Migrate to Storybook v7 (#139)

* Migrate to Storybook v7
All components to CSF3

* Gitignore idea files

* Add Docs pages

* Move docs pages from repo into root level story docs where available

* Move all component stories into new subfolder for components

* Add existing markdown docs as docstrings instead to maintain autodoc layout

* Default to Welcome.mdx

* Fieldset duplicate heading

* Update storybook RC to stable v7 release

Author: KaiSpencer

.gitignore

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

.storybook/main.js

@@ -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/main.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/manager.js .storybook/manager.ts.storybook/manager.js renamed to .storybook/manager.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',
+});

.storybook/preview.js

@@ -9,14 +9,19 @@
   "license": "MIT",
   "devDependencies": {
     "@babel/cli": "^7.13.16",
-    "@babel/core": "^7.14.0",
+    "@babel/core": "^7.19.6",
     "@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",
+    "@storybook/addon-actions": "^7.0.2",
+    "@storybook/blocks": "^7.0.2",
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-links": "^7.0.2",
+    "@storybook/addons": "^7.0.2",
+    "@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",
@@ -49,10 +54,11 @@
     "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 +68,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",