fix conflicts

.github/workflows/ci.yml

@@ -1,6 +1,9 @@
 name: CI Build
 
-on: [push, pull_request]
+on: 
+  push:
+    branches: main
+  pull_request: 
 
 jobs:
   build:
@@ -17,4 +20,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: yarn storybook-to-ghpages --ci
-        env:
-          GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+        uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -110,3 +110,6 @@ dist
 lib/
 yarn-error.log
 storybook-static/
+
+# IDEA files
+.idea/

.storybook/main.ts

@@ -0,0 +1,13 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+};
+export default config;

.storybook/preview.ts

@@ -0,0 +1,14 @@
+import './storybook.scss';
+import { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    options: {
+      storySort: {
+        order: ['Welcome', 'Migration Guides', 'Components', 'FormBehaviour', 'Deprecated'],
+      },
+    },
+  },
+};
+export default preview;

.storybook/theme.ts

@@ -0,0 +1,36 @@
+import { create } from '@storybook/theming/create';
+const version = require('../package.json').version;
+
+export default create({
+  base: 'light',
+
+  colorPrimary: '#005eb8',
+  colorSecondary: '#768692',
+
+  // UI
+  appBg: 'white',
+  appContentBg: 'white',
+  appBorderColor: 'grey',
+  appBorderRadius: 4,
+
+  // Typography
+  fontCode: 'monospace',
+
+  // Text colors
+  textColor: '#212b32',
+  textInverseColor: 'white',
+
+  // Toolbar default and active colors
+  barTextColor: 'rgba(255,255,255,0.8)',
+  barSelectedColor: 'rgba(255,255,255,1)',
+  barBg: '#005eb8',
+
+  // Form colors
+  inputBg: 'white',
+  inputBorder: '#425563',
+  inputTextColor: '#212b32',
+  inputBorderRadius: 4,
+
+  brandTitle: `NHS.UK React Components (v${version})`,
+  brandUrl: 'https://github.com/NHSDigital/nhsuk-react-components',
+});

README.md

@@ -11,15 +11,15 @@
 
 NHS.UK Frontend ported to React
 
-[![GitHub Actions CI Status](https://github.com/NHSDigital/nhsuk-react-components/workflows/CI/badge.svg)](https://github.com/NHSDigital/nhsuk-react-components/actions?query=workflow%3A%22CI+Build%22+branch%3Amain) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/nhsuk-react-components.svg)](https://bundlephobia.com/result?p=nhsuk-react-components)
+[![GitHub Actions CI Status](https://github.com/NHSDigital/nhsuk-react-components/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/NHSDigital/nhsuk-react-components/actions?query=workflow%3A%22CI+Build%22+branch%3Amain) [![Bundle Size](https://img.shields.io/bundlephobia/minzip/nhsuk-react-components.svg)](https://bundlephobia.com/result?p=nhsuk-react-components)
 
 ## Coming from 0.x?
 
 If you're coming from versions of the library prior to 1.0.0, please give [this doc](/docs/upgrade-to-1.0.md) a brief read, as there a number of changes between 0.x release and the 1.0 release.
 
 ## 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

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-react-components",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "author": {
     "email": "[email protected]",
     "name": "Thomas Judd-Cooper",
@@ -9,23 +9,31 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.0",
-    "@rollup/plugin-commonjs": "^19.0.0",
-    "@rollup/plugin-node-resolve": "^13.0.0",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/react": "^6.2.9",
-    "@storybook/storybook-deployer": "^2.8.7",
+    "@babel/core": "^7.19.6",
+    "@babel/preset-react": "^7.18.6",
+    "@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",
+    "@storybook/addons": "^7.0.2",
+    "@storybook/blocks": "^7.0.2",
+    "@storybook/preview-web": "^7.0.2",
+    "@storybook/react": "^7.0.2",
+    "@storybook/react-vite": "^7.0.2",
+    "@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",
@@ -45,14 +53,15 @@
     "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.30.0",
     "sass": "^1.32.12",
-    "sass-loader": "10.1.1",
+    "storybook": "^7.0.2",
     "ts-jest": "^26.5.6",
     "ts-node": "^9.1.1",
-    "typescript": "4.2.4"
+    "typescript": "4.2.4",
+    "vite": "^4.2.1"
   },
   "peerDependencies": {
     "nhsuk-frontend": ">=4.0.0",
@@ -62,18 +71,21 @@
   "dependencies": {
     "classnames": "^2.2.6"
   },
+  "resolutions": {
+    "@types/react": "16.14.0"
+  },
   "scripts": {
     "cleanup": "rm -rf dist/ > /dev/null && rm -rf lib/ > /dev/null",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "storybook dev -p 6006",
     "build:dist": "rollup -c",
     "build:lib": "NODE_ENV=production babel src --out-dir lib --extensions \".ts,.tsx\" --ignore \"**/__tests__,**/__mocks__,**/setupTests.ts\"",
     "build": "yarn cleanup && yarn build:dist && yarn build:lib",
     "test": "jest",
     "test:ci": "jest --coverage",
     "lint": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}' --fix",
     "lint:ci": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}'",
-    "build-storybook": "build-storybook",
-    "prepublishOnly": "yarn lint:ci && yarn test:ci && yarn start-storybook --smoke-test"
+    "build-storybook": "storybook build",
+    "prepublishOnly": "yarn lint:ci && yarn test:ci && yarn storybook --smoke-test"
   },
   "files": [
     "dist",

rollup.config.js → 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()],
+  },
 ];