Fozzie Components Documentation
This is a mono-repo. It contains several packages, all controlled from a top level
Each project has its own
package.json file containing package specific configuration, however don't run
yarn install from a package project; instead run it from the top level.
If you run
yarn install from a package then you may well get an unhelpful error like this:
Error: ENOENT: no such file or directory, symlink '…\fozzie-components\packages\…' -> '…\fozzie-components\node_modules\@justeat\…'
If this happens, delete all the
node_modules folders throughout and then run
yarn install from the root directory again.
In some rare cases modules specified in the components own
package.json file can sometimes fail to resolve / install correctly. This can lead to errors like: Example error: The following module could not be found, please run
yarn add @moduleName to install it.
There's two solutions you could try from the root of the project which may fix this:
- yarn cache clean
- yarn build
It is recommended to run the following commands at the root of the monorepo in order to install dependencies and allow you to view components in isolation via Storybook.
Importing optional SCSS helpers from Fozzie
We have created several optional mixin helpers in Fozzie. Here's an example of how to use it:
Note: Importing the optional mixin and using
@include in the
common.scss file of your component doesn't work if you have
module enabled on your SFC.
<style lang="scss" module> @include pageBanner(); </style>
Unit / Integration / Contract
# Run Unit / Integration / Contract tests for all components cd ./fozzie-components yarn test
# Run Unit / Integration / Contract tests for individual f-* packag cd ./fozzie-components/packages/f-* yarn test
# Run Component tests for all components # Note: Ensure Storybook is not running when running the following commands cd ./fozzie-components yarn storybook:build yarn storybook:serve-static yarn test-component:chrome
# Run Component tests for individual f-* package # Note: Ensure Storybook is not running when running the following commands cd ./fozzie-components yarn storybook:build yarn storybook:serve-static # And in another window cd ./fozzie-components/packages/f-*user-message* yarn test-component:chrome
To run storybook first you must run the following at the the top level
yarn build to build the require packages for storybook to run.
yarn storybook:serve to start storybook, which will open on
Running a single component in Storybook
If you wish to view a single component in Storybook during development, you can do this by opening the components
*.stories.js file in your IDE and running the
Storybook - Run Currently Open Story File task which can be found in the debug tab on the left. (This only works with VS Code).
This is particuarly useful as it prevents a bug where Storybook pulls in other components stylesheets (See here).
We use Husky to manage our git hooks.
If you wish to skip this Husky hook, simply add the
--no-verify argument when making your commit.
git commit -m "Refactor f-button" --no-verify.
More information about how to contribute to this repo can be found in our Storybook Documentation section