Scaleway UI

Scaleway UI library.

---

⚠️ This library is far from being ready. We are actively working on it. Our goal is to have an easy to use UI system. This includes an exhaustive documentation, improved DX, confidence in testing and a lot of refactoring to have consistency across our components.

⚠️ We are going to break a lot of things towards V1. This library is not yet made to be used by external projects

⚠️ We currently do not accept contributions from external contributors

Quick Start

$ yarn 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 {}
}

Development

Storybook

Make sure to have dependencies up to date by running yarn install

$ yarn run start

Test

Unit

$ yarn run test # Will run all tests
$ yarn run test --updateSnapshot # Will update all snapshots
$ yarn run test:watch # Will watch tests and only rerun the one who are modified
$ yarn run test:coverage # Will generate a coverage report
$ yarn run test:coverage --coverageReporters lcov && open coverage/lcov-report/index.html # Will generate an open an html code coverage report

Accessibility

$ yarn run test:a11y # Will run all accessibility tests
$ yarn run test:a11y src/components/Alert # Will run accessibility test of Alert component only

Lint

$ yarn run lint
$ yarn run lint:fix

Build

$ yarn run build
$ yarn run build:profile # Will open a visual representation of the modules inside the compile package

Use a locally built 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 than npm/yarn link, hence avoiding most of their issues with module resolving.

$ yarn global add yalc # Make sure to have the yalc binary

$ cd scaleway-ui
$ yarn build && yalc publish
$ # Now it's ready to install in your project
$ cd ../project-something
$ yalc add @scaleway/ui --yarn
$ cd ../scaleway-ui
$ # If you do some changes into your package
$ yarn 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 a yalc.lock and updates the package.json in the target project. Make sure to not commit these changes

---

Versioning

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