formancehq / storybook

Formance design system

Storybook

Run

yarn

yarn storybook

Sync Storybook and Console

Yalc is a package that allows you to use packages locally without having to publish a new version to NPM. It allows you to link the package.json to a .yalc folder which works like the node_modules folder.

Install Yalc globally npm i -g yalc

Build and push modification or new version npm run local-publish

Install the Storybook package locally on a project (you need to run this on console or another project) yalc add @numaryhq/storybook

After installation, each time you run the build and push command, the package will be automatically updated on all projects where the package was installed with Yalc

Be careful to modify the package.json on console before putting it into production!

When you add the package with Yalc, the package.json will transform from "@numary/storybook": "^1.1.x" to "@numary/storybook": "file/.yalc..." so remember to change it before putting it into production

storybook's Issues

Storybook testing

UI testing

Goal

This Storybook have only stories and no tests.

The aim of this issue is to set up firsts tests with SB and see how it works.
This first step should and could be considering as a POC.

For more details : https://storybook.js.org/docs/react/writing-tests/introduction

• Test runner to automatically test your entire Storybook and catch broken stories.
• Visual tests capture a screenshot of every story then compare it against baselines to detect appearance and integration issues
• Accessibility tests catch usability issues related to visual, hearing, mobility, cognitive, speech, or neurological disabilities
• Interaction tests verify component functionality by simulating user behaviour, firing events, and ensuring that state is updated as expected
• Coverage tests to measure how much of your code is covered by your tests
• Snapshot tests detect changes in the rendered markup to surface rendering errors or warnings
• Import stories in other tests to QA even more UI characteristics

Requirements

Any PR related to this issue should respect

• linter yarn lint
• design system build yarn build
• storybook build yarn build-storybook
• storybook running yarn storybook
• commit contributing system (based on Commitizen, such as: feat(ComponentX): your real description).