Chromatic Hosting for Storybook (#162)

* Use Chromatic for storybook

* Add fetch-depth 0 to checkout

* Correct links in README

* Add Chromatic Thanks

* Remove push on storybook branch

* Update rollup dependencies

* Run build-storybook in CI

Author: Tomdango

.github/workflows/ci.yml

@@ -17,4 +17,4 @@ jobs:
       - name: Typescript build
         run: yarn build
       - name: Storybook build
-        run: yarn storybook-to-ghpages --dry-run --ci
+        run: yarn build-storybook

.github/workflows/storybook.yml

@@ -10,14 +10,15 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@master
+        uses: actions/checkout@v3
         with:
-          persist-credentials: false
+          fetch-depth: 0
 
       - name: Yarn Install
         run: yarn install
 
       - name: Deploy Storybook
-        run: mkdir -p storybook-build && touch storybook-build/.nojekyll && yarn storybook-to-ghpages --ci --out storybook-build
-        env:
-          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

README.md

@@ -19,7 +19,7 @@ If you're coming from versions of the library prior to 1.0.0, please give [this
 
 ## Upgrading to 2.0
 
-If you're upgrading to 2.0, please be aware we have made some breaking changes.  [This doc](/docs/upgrade-to-2.0.md) has the details.
+If you're upgrading to 2.0, please be aware we have made some breaking changes. [This doc](/docs/upgrade-to-2.0.md) has the details.
 
 ## Installation
 
@@ -51,7 +51,7 @@ class GetStartedButton extends PureComponent {
 
 ### Storybook
 
-A storybook containing all of the components and their usage can be found [here](https://nhsdigital.github.io/nhsuk-react-components).
+A storybook containing all of the components and their usage can be found [here](https://main--6422e711d7f854c1b681c505.chromatic.com).
 
 ## Maintainers
 
@@ -61,6 +61,7 @@ A storybook containing all of the components and their usage can be found [here]
 - Sam Brown ([GitHub](https://github.com/samueldavidbrown))
 - Luke Pearson ([GitHub](https://github.com/lukepearson))
 - Kevin Kuszyk ([GitHub](https://github.com/kevinkuszyk))
+- Kai Spencer ([GitHub](https://github.com/KaiSpencer))
 
 ## Preparing Releases
 
@@ -72,3 +73,9 @@ To prepare a release create a new release TAG in github with your release versio
 
 - Create a new release with a tag like `major.minor.patch` against main.
 - If the change is a `beta` then select `pre-release` as true, this will make the `tag` point at `beta`. Otherwise the tag will be `latest`.
+
+## Thanks
+
+<a href="https://www.chromatic.com/"><img src="https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png" width="153" height="30" alt="Chromatic" /></a>
+
+Thanks to [Chromatic](https://www.chromatic.com/) for providing the visual testing platform that helps us review UI changes and catch visual regressions.

package.json

@@ -11,8 +11,9 @@
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.19.6",
     "@babel/preset-react": "^7.18.6",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-typescript": "^11.1.0",
     "@storybook/addon-actions": "^7.0.2",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",
@@ -21,17 +22,18 @@
     "@storybook/preview-web": "^7.0.2",
     "@storybook/react": "^7.0.2",
     "@storybook/react-vite": "^7.0.2",
-    "@storybook/storybook-deployer": "^2.8.16",
     "@storybook/theming": "^7.0.2",
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.23",
     "@types/jest-axe": "^3.5.1",
     "@types/node": "^15.0.2",
     "@types/react": "16.14.0",
     "@types/react-dom": "^16.9.12",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.1",
     "@typescript-eslint/eslint-plugin": "^4.23.0",
     "@typescript-eslint/parser": "^4.23.0",
     "babel-loader": "^8.2.2",
+    "chromatic": "^6.17.3",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.6",
     "enzyme-to-json": "^3.6.2",
@@ -51,9 +53,9 @@
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "regenerator-runtime": "^0.13.7",
-    "rollup": "^2.47.0",
+    "rollup": "^3.20.2",
+    "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.34.1",
     "sass": "^1.32.12",
     "storybook": "^7.0.2",
     "ts-jest": "^26.5.6",

rollup.config.js rollup.config.mjsrollup.config.js renamed to rollup.config.mjs

@@ -1,16 +1,15 @@
 import commonjs from '@rollup/plugin-commonjs';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import resolve from '@rollup/plugin-node-resolve';
-import typescript from 'rollup-plugin-typescript2';
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const packageJson = require('./package.json');
+import typescript from '@rollup/plugin-typescript';
+import dts from 'rollup-plugin-dts';
+import packageJson from './package.json' assert { type: 'json' };
 
 const plugins = [
   peerDepsExternal(),
   resolve(),
   commonjs(),
-  typescript({ typescript: require('typescript') }),
+  typescript({ tsconfig: './tsconfig.json' }),
 ];
 
 export default [
@@ -30,4 +29,9 @@ export default [
     ],
     plugins,
   },
+  {
+    input: 'dist/lib/index.d.ts',
+    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    plugins: [dts()],
+  },
 ];

tsconfig.json

@@ -3,7 +3,7 @@
         "declaration": true,
         "declarationDir": "lib",
         "module": "esnext",
-        "target": "ES5",
+        "target": "ES6",
         "lib": ["es5", "es6", "dom", "es2016", "es2017"],
         "sourceMap": true,
         "jsx": "react",