📝 You can still participate in its development and start contributing to it.
$ pnpm add @scaleway/ui @emotion/react @emotion/styled
import { theme, normalize, Button } from '@scaleway/ui'
import { Global, css, ThemeProvider } from '@emotion/react'
const App = () => (
<ThemeProvider theme={theme}>
<Global styles={css`${normalize()}`}>
<Button variant="primary" onClick={() => console.log('clicked')}>
Click Me
</Button>
</ThemeProvider>
)
N.B. To allow typescript theme typings with @emotion/styled
components,
you'll have to define the @emotion/react
module Theme
interface in your project.
Example, in a global.d.ts
file:
- Declaration to use the default Scaleway theme
declare module '@emotion/react' {
import type { SCWUITheme } from '@scaleway/ui'
// https://emotion.sh/docs/typescript#define-a-theme
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface Theme extends SCWUITheme {}
}
- Declaration to use your custom theme
import type { MyTheme } from './src/theme'
declare module '@emotion/react' {
// https://emotion.sh/docs/typescript#define-a-theme
// eslint-disable-next-line @typescript-eslint/no-empty-interface
export interface Theme extends MyTheme {}
}
Before any command, install dependencies running following command:
$ pnpm install
You can easily start Storybook by running:
$ pnpm run start
Storybook documentation will then be available on http://localhost:6006
$ pnpm run test:unit # Will run all tests
$ pnpm run test:unit:update # Will update all snapshots
$ pnpm run test:unit:watch # Will watch tests and only rerun the one who are modified
$ pnpm run test:unit:coverage # Will generate a coverage report
$ pnpm run testunit::coverage --coverageReporters lcov && open coverage/lcov-report/index.html # Will generate an open an html code coverage report
$ pnpm run test:a11y # Will run all accessibility tests
$ pnpm run test:a11y src/components/Alert # Will run accessibility test of Alert component only
$ pnpm run lint
$ pnpm run lint:fix
$ pnpm run test:visual # Build the storybook and launch visual tests
$ pnpm run test:visual:update # Build the storybook, launch visual tests and update screenshots
$ pnpm run test:visual:nobuild # Launch visual tests without (re)building the storybook
$ pnpm run build
$ pnpm run build:profile # Will open a visual representation of the modules inside the compile package
You might want to test your local changes against a React application.
yalc
is a tool aiming to simplify working with local npm packages by providing a different workflow thannpm/pnpm link
, hence avoiding most of their issues with module resolving.
$ pnpm install --global yalc # Make sure to have the yalc binary
$ cd scaleway-ui
$ pnpm run build && yalc publish
$ # Now it's ready to install in your project
$ cd ../project-something
$ yalc add @scaleway/ui
$ cd ../scaleway-ui
$ # If you do some changes into your package
$ pnpm run build && yalc publish --push --sig # --push will automatically update the package on projects where it have been added, --sig updates the signature hash to trigger webpack update
⚠️ since 1.0.0.pre.51 (2021-04-23),yalc publish
needs the--sig
option to trigger webpack module actual update.
⚠️ yalc
create ayalc.lock
and updates thepackage.json
in the target project. Make sure to not commit these changes
We enforce the conventionnal commits convention in order to infer package bump versions and generate changelog.
Only the feat
, fix
and perf
types will generate a new package on the main
branch
Checkout our documentation website.
Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.