mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
079db2fdb4
Various SVGs were being imported directly in components using Webpack loaders. This was done to get these components to work correctly in storybook, which uses Webpack. However we don't use Webpack for our actual build system, so these components would fail when you attempted to use them. Instead the storybook script has been updated to use the `--static-dir` flag, which allows specifying a directory of files to serve statically. The `app` directory is served statically, so all of the relative URLs we use in practice to reference fonts and images should just work. The storybook build command has been updated to use the same flag. Unfortunately this also means that the uncompiled background code is now included in the build as well, because it's alongside our static files. This shouldn't have any impact upon the build though. The use of this `static-dir` option as made much of the existing storybook Webpack configuration unnecessary, so it has been reduced to just the essential steps. |
||
|---|---|---|
| .. | ||
| main.js | ||
| preview.js | ||
| README.md | ||
| webpack.config.js | ||
Storybook
We're currently using Storybook as part of our design system. To run Storybook and test some of our UI components, clone the repo and run the following:
yarn
yarn storybook
You should then see:
info Storybook started on => http://localhost:6006/
In your browser, navigate to http://localhost:6006/ to see the Storybook application. From here, you'll be able to easily view components and even modify some of their properties.