feat: add publish to chromatic and workflow to do so automatically

Author: CyrilAdelekan

.github/workflows/chromatic.yml

@@ -0,0 +1,33 @@
+name: 'Chromatic Publish'
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  chromatic-deployment:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}
+          autoAcceptChanges: 'main'
+          exitZeroOnChanges: true

.storybook/manager-head.html

@@ -0,0 +1,2 @@
+<meta name="description" content="These are common component use for React applications based on GDS and govuk-frontend" key="desc" />
+<meta name="robots" content="noindex" />

README.md

@@ -22,6 +22,8 @@ npm install @hmlr/govuk-react-components-library
 
 ## Components
 
+You can explore the [components in chromatic](https://67da9f53fd479dc895c4293f-davohxhxay.chromatic.com/).
+
 Note that any component with a `👈🏽` below means that - This component will need javascript to be enabled because of the transitions present in the components using `createAll` or `initAll` recommended by [`govuk-frontend` documentation](https://frontend.design-system.service.gov.uk/configure-components/)
 
 The Components includes:

package-lock.json

@@ -29,7 +29,8 @@
     "format": "prettier --ignore-path .gitignore --write '**/*.+(js|mjs|ts|tsx|json|css|scss|html|md)'",
     "prepare": "husky",
     "release": "standard-version",
-    "uml": "tsuml2 --glob './src/**/\\!(*.spec|*.test|TestUtilities|JestSetup).[t]s?(x)' -o './assets/uml-diagram.svg'"
+    "uml": "tsuml2 --glob './src/**/\\!(*.spec|*.test|TestUtilities|JestSetup).[t]s?(x)' -o './assets/uml-diagram.svg'",
+    "chromatic": "npx chromatic --exit-zero-on-changes"
   },
   "repository": {
     "type": "git",
@@ -93,6 +94,7 @@
     "autoprefixer": "^10.4.21",
     "babel-jest": "^29.7.0",
     "bootstrap": "^5.3.3",
+    "chromatic": "^11.27.0",
     "css-loader": "^7.1.2",
     "deep-iterator": "^1.1.0",
     "eslint": "^9.22.0",