Upgrade to Storybook 6

Author: Tomdango

.storybook/config.js

@@ -1,3 +1,11 @@
 module.exports = {
-  addons: ['@storybook/addon-storysource'],
-};
+  "stories": [
+    "../stories/*.stories.@(ts|tsx)",
+    "../stories/**/*.stories.@(ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-scss"
+  ],
+}

.storybook/main.js

@@ -0,0 +1,6 @@
+import { addons } from "@storybook/addons";
+import nhsTheme from "./theme";
+
+addons.setConfig({
+    theme: nhsTheme
+});

.storybook/manager.js

@@ -0,0 +1,6 @@
+import "./storybook.scss";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+}
+

.storybook/preview.js

@@ -1,37 +1,36 @@
-import { create } from '@storybook/theming';
+import { create } from "@storybook/theming/create";
+const version = require("../package.json").version;
 
 export default create({
-  base: 'light',
-  background: 'white',
-  colorPrimary: '#005eb8',
-  colorSecondary: '#425563',
+    base: 'light',
+    background: 'white',
+    colorPrimary: '#005eb8',
+    colorSecondary: '#425563',
 
-  // UI
-  appBg: 'white',
-  appContentBg: 'white',
-  appBorderColor: 'grey',
-  appBorderRadius: 4,
+    // UI
+    appBg: 'white',
+    appContentBg: 'white',
+    appBorderColor: 'grey',
+    appBorderRadius: 4,
 
-  // Typography
-  fontBase: '"Frutiger W01", Arial, sans-serif',
-  fontCode: 'monospace',
+    // Typography
+    fontCode: 'monospace',
 
-  // Text colors
-  textColor: '#212b32',
-  textInverseColor: 'white',
+    // 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',
+    // 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,
+    // Form colors
+    inputBg: 'white',
+    inputBorder: '#425563',
+    inputTextColor: '#212b32',
+    inputBorderRadius: 4,
 
-  brandTitle: 'NHS.UK React Components',
-  brandUrl: 'https://beta.nhs.uk/service-manual/',
-  brandImage: 'https://assets.nhs.uk/images/nhs-logo.png',
+    brandTitle: `NHS.UK React Components (v${version})`,
+    brandUrl: 'https://github.com/NHSDigital/nhsuk-react-components'
 });

.storybook/theme.js

@@ -13,23 +13,25 @@
     "@babel/plugin-proposal-numeric-separator": "^7.10.1",
     "@babel/preset-react": "^7.10.1",
     "@babel/preset-typescript": "^7.10.1",
-    "@storybook/addon-centered": "^5.3.19",
-    "@storybook/addon-info": "^5.3.19",
-    "@storybook/addon-storysource": "^5.3.19",
-    "@storybook/react": "^5.3.19",
-    "@storybook/storybook-deployer": "^2.8.6",
+    "@storybook/addon-actions": "^6.0.28",
+    "@storybook/addon-essentials": "^6.0.28",
+    "@storybook/addon-links": "^6.0.28",
+    "@storybook/addon-storysource": "^6.0.28",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.0.28",
+    "@storybook/storybook-deployer": "^2.8.7",
     "@types/classnames": "^2.2.9",
     "@types/enzyme": "^3.10.3",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/jest": "^24.0.23",
     "@types/jest-axe": "^3.2.2",
-    "@types/node": "^12.12.12",
     "@types/react": "^16.9.3",
     "@types/react-dom": "^16.9.3",
     "@typescript-eslint/eslint-plugin": "^2.3.1",
     "@typescript-eslint/parser": "^2.3.1",
     "awesome-typescript-loader": "^5.2.1",
     "babel-loader": "^8.0.6",
+    "css-loader": "^5.0.0",
     "enzyme": "^3.10.3",
     "enzyme-adapter-react-16": "^1.15.1",
     "enzyme-to-json": "^3.4.3",
@@ -43,20 +45,22 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.14.3",
     "eslint-plugin-react-hooks": "^1.7.0",
-    "jest": "^24.9.0",
+    "jest": "^26.6.1",
     "jest-axe": "^3.4.0",
     "nhsuk-frontend": "^3.1.0",
     "node-sass": "^4.14.1",
     "prettier": "^1.18.2",
     "react": "^16.9.3",
     "react-docgen-typescript-loader": "^3.2.1",
     "react-dom": "^16.9.3",
+    "react-is": "^17.0.1",
     "rollup": "^1.21.4",
     "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-scss": "^1.0.2",
     "rollup-plugin-typescript2": "^0.24.2",
-    "sass-loader": "^8.0.2",
-    "ts-jest": "^24.2.0",
+    "sass-loader": "^10.0.4",
+    "style-loader": "^2.0.0",
+    "ts-jest": "^26.4.3",
     "ts-node": "^8.4.1",
     "tslib": "^2.0.0",
     "typescript": "^3.9.5"
@@ -70,7 +74,7 @@
     "classnames": "^2.2.6"
   },
   "scripts": {
-    "storybook": "start-storybook",
+    "storybook": "start-storybook -p 6006 --no-dll",
     "cleanup": "bash scripts/cleanup.sh",
     "build": "yarn cleanup && yarn build:dist && yarn build:lib",
     "build:dist": "rollup -c",
@@ -79,7 +83,8 @@
     "test:ci": "jest --coverage",
     "test:watch": "jest --watch",
     "lint": "eslint --fix -c .eslintrc.js --ext .ts --ext .tsx src/*.ts src/components/**/*.ts src/util/*.ts",
-    "prebuild": "yarn lint && yarn test --coverage"
+    "prebuild": "yarn lint && yarn test --coverage",
+    "build-storybook": "build-storybook --no-dll"
   },
   "files": [
     "dist",

.storybook/webpack.config.js

@@ -21,8 +21,8 @@ class Checkboxes extends PureComponent<CheckboxesProps, CheckboxesState> {
 
   private boxIds: Record<string, string> = {};
 
-  constructor(props: {}, ...rest: any[]) {
-    super(props, ...rest);
+  constructor(props: {}) {
+    super(props);
     this.state = {
       conditionalBoxes: [],
     };

package.json

@@ -44,8 +44,8 @@ class DateInput extends PureComponent<DateInputProps, DateInputState> {
 
   static Year = YearInput;
 
-  constructor(props: DateInputProps, ...rest: any[]) {
-    super(props, ...rest);
+  constructor(props: DateInputProps) {
+    super(props);
     this.state = {
       values: {
         day: props.value?.day || '',
@@ -113,7 +113,6 @@ class DateInput extends PureComponent<DateInputProps, DateInputState> {
     if (inputType === 'year') this.yearRef = ref;
   };
 
-
   render() {
     const { children, onChange, value, defaultValue, ...rest } = this.props;
 

src/components/checkboxes/Checkboxes.tsx

@@ -50,8 +50,8 @@ interface FieldsetProps extends HTMLProps<HTMLFieldSetElement> {
 type FieldsetState = { registeredComponents: Array<string>; erroredComponents: Array<string> };
 
 class Fieldset extends PureComponent<FieldsetProps, FieldsetState> {
-  constructor(props: FieldsetProps, ...rest: any[]) {
-    super(props, ...rest);
+  constructor(props: FieldsetProps) {
+    super(props);
     this.state = {
       registeredComponents: [],
       erroredComponents: [],