Skip to content

Instantly share code, notes, and snippets.

@krfong916

krfong916/swish-design.md

Created February 18, 2021 22:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save krfong916/096554e0a52a0ede0d0bf4cf647338f7 to your computer and use it in GitHub Desktop.
Save krfong916/096554e0a52a0ede0d0bf4cf647338f7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
swish-design.md

Storybook

Storybook

Repo

We have two repos in our project.

Swish
-------
|
--- package.json
|
--- src/components
    |
    --- package.json

The top-level repo has storybook configuration options. The repo contained in the /src folder contains our UI package.

Here is the design system development workflow.

1. Create a branch for an issue 
2. Make local changes
3. Push local changes to the branch
4. We have a github action when a change is pushed to the local branch (see chromatic.yml). Chromatic builds a static storybook instance and publishes it for review on chromatic
5. After changes have been reviewed and tests pass, create a pull request.
6. After review approval, merge the branch with main
7. A deploy is triggered via github actions when a branch is merged to main (see push.yml file).
8. The action will package our UI package and publish to NPM for distribution

Below demonstrates the workflow

Local -> Chromatic -> Merge PR -> Github Actions push package to NPM

Technology Decisions

  • Lerna: we have a monorepo. Manually updating packages exposes our package to human error. Lerna handles dependency updates for us.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment