turbo

This package provides the design system for all Frazer 4 projects.

Note that due to an incompatibility between the version of babel-loader used by Storybook and the one used by CRA, this package MUST use yarn for package management. If this is fixed in a new version of npm, this can be changed.

Publishing

This package is automatically published via CircleCI whenever a new version is tagged. There are a couple of steps that must be taken prior to that however.

1. Update the CHANGELOG with all changes since the previous version labeled with the new tag.
2. Run npm run compile to build the new distribution.
3. Bump the version in package.json to match the new tag.
4. Commit all changes with a commit message like Update to version vM.m.p.
5. Tag the commit with the new tag using git tag -a vM.m.p -m "Version M.m.p"
6. Push to master making sure to push tags as well e.g. git push origin master --follow-tags
7. Verify CI passes and the new package version is released.

Storybook

For help in writing Storybook stories, see the documentation here: https://storybook.js.org/docs/react/writing-stories/introduction.

For local testing, we have previously tried using npm link, but there is a documented issue using hooks with this package. Alternatively, we suggest using yalc: https://www.npmjs.com/package/yalc.

Our public version of Storybook is published via CircleCI each time the master branch is updated. This version of Storybook is located at: https://frazerhub.github.io/turbo/.

Tailwind

This package uses Tailwind 2.0. Tailwind configuration can be updated in /tailwind.config.js and then run npm run build:tailwind to create a new /src/styles/tailwind.css file based on the configuration file.

---

This package was bootstrapped using the instructions here: https://fathomtech.io/blog/create-a-react-component-library-using-create-react-app/