@vector-im/compound-web
v7.6.0
Published
Compound components for the Web
Downloads
12,908
Maintainers
Readme
Compound Web
React implementation of Compound – Element's design system – See full documentation on https://compound.element.io and the Figma component library
Development
| Command | Runs |
| -------------------------- | ----------------------------- |
| yarn dev
| Runs a local Storybook server |
| yarn lint
| Lints all components |
| yarn gen:component $name
| Bootstraps a new component |
Testing
| Command | Runs |
| -------------------- | --------------------------------- |
| yarn test
| Runs unit tests |
| yarn e2e:docker
| Runs end-to-end tests |
| yarn e2e:docker -u
| Updates end-to-end test snapshots |
All components are expected to come with comprehensive unit tests and visual tests. We use Playwright to run visual tests on every story present in Storybook, so story coverage is really important! It helps us validate component implementations against the designs and prevents visual regressions at the same time.
We recommend running the end-to-end tests via Docker as shown above to get consistent text rendering for screenshots.
Linking
If you want to work on Compound Web as a linked package within a larger React application, TypeScript might complain about there being multiple copies of @types/react in the tree. You can work around this by linking Compound Web's copy of @types/react to your application's copy:
$ cd my-application/node_modules/@types/react
$ yarn link
$ cd ../../../../compound-web
$ yarn link @types/react
Release
To release a new version of Compound Web:
- Review the changes since last released and choose the appropriate version bump (major, minor, patch).
- Run the Release npm package action, inputting the version bump.
The action will:
- add a commit bumping the version in
package.json
- publish the package to npm
- tag a release on Github
- add a commit bumping the version in
- Manually add a changelog to the release on github.