Merge pull request #428 from iCHEF/ci/integrate-chromatic

feat: integrate storybook with chromatic

.github/workflows/storybook.yml

@@ -0,0 +1,49 @@
+name: Storybook
+on:
+  pull_request:
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - ready_for_review
+  push:
+    branches:
+      - master
+      - develop
+
+jobs:
+  build-and-publish-storybook:
+    name: Build and publish storybook
+    runs-on: ubuntu-latest
+    timeout-minutes: 20
+    if: >
+      github.event.pull_request.draft == false &&
+      !contains(github.event.pull_request.labels.*.name, 'skip storybook')
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Chromatic needs the full Git history to keep track of changes
+      - uses: actions/setup-node@v2
+        with:
+          node-version: "20"
+          registry-url: "https://registry.npmjs.org"
+      - name: Install packages with cache
+        uses: iCHEF/npm-install-with-cache-action@v1
+        with:
+          is-monorepo: true
+      - name: Build
+        run: yarn prepublish
+
+      - name: "Build storybook"
+        run: cd packages/storybook && yarn build:storybook --quiet --loglevel error
+      - name: "Push storybook to Chromatic"
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true
+          exitOnceUploaded: true # we use linked project so don't need to wait for build results
+          autoAcceptChanges: master|develop # all changes should be reviewed in PRs
+          storybookBuildDir: storybook-static
+          workingDir: packages/storybook
+          onlyChanged: true

.gitignore

@@ -7,6 +7,7 @@ es5/
 build/
 deploy/
 public/
+storybook-static/
 tmp/
 .cache/
 .idea/

packages/storybook/package.json

@@ -15,8 +15,8 @@
   "homepage": "https://github.com/iCHEF/gypcrete#readme",
   "scripts": {
     "storybook": "start-storybook -p 8100 -c .storybook --ci --quiet",
-    "build:storybook": "build-storybook -o ./public",
-    "clean": "rm -rf ./public",
+    "build:storybook": "build-storybook --webpack-stats-json",
+    "clean": "rm -rf ./storybook-static",
     "ghpages": "npm run clean && npm run build:storybook"
   },
   "dependencies": {
@@ -30,6 +30,7 @@
     "@storybook/manager-webpack5": "^6.5.12",
     "@storybook/react": "^6.5.12",
     "autoprefixer": "^7.2.5",
+    "chromatic": "10.6.1",
     "mini-css-extract-plugin": "^2.7.6",
     "prop-types": "^15.6.2",
     "react": "^18.2.0",

yarn.lock

@@ -6485,6 +6485,11 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
+chromatic@10.6.1:
+  version "10.6.1"
+  resolved "https://registry.yarnpkg.com/chromatic/-/chromatic-10.6.1.tgz#26dcc49420c676f227bfced8c0e5d49ed7abf06c"
+  integrity sha512-bd4C5sEEtN83uUmbc4Fu+x7+lJIPdMUdu4D6HRDQEIDl/Tatc8+By4bZluH1pzg/MbP9vllkL6Ua9vF4EEA7VA==
+
 chrome-trace-event@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz"