4a7f86bf31
This patch will rewrite all chrome:// URLs in .mjs files, but it isn't emitting proper URLs for assets. This means that JS imports will map correctly, but any img/css references won't have a valid path outside of local development and CSS files that use @import will not resolve imports correctly. To reference images and CSS files you will still need to ensure those files are in the Storybook static path and use a separate URL to reference them in the `window.IS_STORYBOOK` case. Differential Revision: https://phabricator.services.mozilla.com/D165060 |
||
|---|---|---|
| .. | ||
| .storybook | ||
| stories | ||
| mach_commands.py | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
= Storybook for Firefox
Storybook is a component library to document our design system, reusable components and any specific components you might want to test with dummy data.
== Background
The storybook will list components that can be reused, and will help document what common elements we have. It can also list implementation specific components, but they should not be added to the "Design System" section.
Changes to files directly referenced from the storybook (so basically non-chrome:// paths) should automatically reflect changes in the opened browser. If you make a change to a chrome:// referenced file then you'll need to do a hard refresh (Cmd+Shift+R/Ctrl+Shift+R) to notice the changes.
== Running Storybook
Installing the npm dependencies and running the storybook npm script should be
enough to get storybook running. This can be done with your personal npm/node
that happens to be compatible or using ./mach npm.
=== Running with mach based npm
If you do this a lot, you might want to add an alias like this to your shell's startup config:
alias npm-storybook="./mach npm --prefix=browser/components/storybook"
Then running npm-storybook from the repo's root directory will work with the
storybook directory.
To start storybook the first time (or if it's been a while since you last installed):
# Install the package-lock.json exactly so lockfileVersion won't change.
# Using the `install` command may affect package-lock.json.
./mach npm --prefix=browser/components/storybook ci
# or
npm-storybook ci
Once you've got your dependencies installed you can start storybook. You should run your local build to test in storybook since chrome:// URLs are currently being pulled from the running browser, so any changes to common-shared.css for example will come from your build.
# Start the Storybook server.
./mach npm --prefix=browser/components/storybook run start-storybook
# or
npm-storybook run start-storybook
# In another terminal:
./mach run http://localhost:5703/
# On MacOS/Linux, there's a command to start storybook and launch your browser.
./mach npm --prefix=browser/components/storybook run storybook
# or
npm-storybook run storybook
=== Personal npm
You can use your own npm to install and run storyboook. Compatibility is up
to you to sort out.
cd browser/components/storybook
npm ci # Install the package-lock.json exactly so lockfileVersion won't change
npm run storybook