Merge pull request #90 from NHSDigital/v4/upgrade-tools

Uplift Dependencies & Tooling

Author: Tomdango

.babelrc

@@ -1,3 +1,11 @@
 {
-  "ignore": ["**/__tests__/*", "*/__mocks__/*", "*/setupTests.ts"]
+    "presets": ["@babel/preset-env", "@babel/typescript", "@babel/preset-react"],
+    "plugins": [
+      "@babel/plugin-proposal-numeric-separator",
+      ["@babel/proposal-class-properties", { "loose": true }],
+      "@babel/proposal-object-rest-spread",
+      ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+      ["@babel/plugin-proposal-private-methods", { "loose": true }]
+    ],
+    "sourceMaps": "inline"
 }

.eslintrc

@@ -0,0 +1,37 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 2021,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "env": {
+        "browser": true,
+        "es6": true,
+        "jest": true
+    },
+    "settings": {
+        "react": {
+            "version": "detect"
+        }
+    },
+    "extends": [
+        "plugin:react/recommended",
+        "plugin:@typescript-eslint/recommended",
+        "prettier",
+        "plugin:import/errors",
+        "plugin:import/warnings",
+        "plugin:import/typescript",
+        "plugin:jsx-a11y/recommended",
+        "plugin:react-hooks/recommended"
+    ],
+    "rules": {
+        "react/prop-types": 0,
+        "jsx-a11y/anchor-has-content": 0,
+        "jsx-a11y/alt-text": 0,
+        "jsx-a11y/heading-has-content": 0,
+        "react-hooks/exhaustive-deps": 0
+    }
+}

.eslintrc.js

@@ -11,7 +11,7 @@ jobs:
       - name: Yarn Install
         run: yarn
       - name: Lint
-        run: yarn lint
+        run: yarn lint:ci
       - name: Jest Tests
         run: yarn test:ci
       - name: Typescript build

.github/workflows/ci.yml

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 100,
+  "tabWidth": 2
+}

.prettierrc

@@ -1,10 +1,15 @@
+const path = require("path");
+
 module.exports = {
-  stories: ['../stories/*.stories.@(ts|tsx)', '../stories/**/*.stories.@(ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'],
+  stories: ["../stories/**/*.stories.@(ts|tsx)"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+  webpackFinal: (config) => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: ["style-loader", "css-loader", "sass-loader"],
+      include: path.resolve(__dirname, "../"),
+    });
 
-  typescript: {
-    check: true,
-    checkOptions: {},
-    reactDocgen: 'react-docgen-typescript',
+    return config;
   },
 };

.prettierrc.js

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

.storybook/main.js

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

.storybook/manager.js

@@ -2,35 +2,35 @@ 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: "#768692",
 
-    // UI
-    appBg: 'white',
-    appContentBg: 'white',
-    appBorderColor: 'grey',
-    appBorderRadius: 4,
+  // UI
+  appBg: "white",
+  appContentBg: "white",
+  appBorderColor: "grey",
+  appBorderRadius: 4,
 
-    // Typography
-    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 (v${version})`,
-    brandUrl: 'https://github.com/NHSDigital/nhsuk-react-components'
+  brandTitle: `NHS.UK React Components (v${version})`,
+  brandUrl: "https://github.com/NHSDigital/nhsuk-react-components",
 });