Merge pull request #198 from NHSDigital/feature/nhsuk-frontend-v8_enz…

…yme_migration

Migrate enzyme to react-testing-library

.eslintignore

@@ -1,2 +1,4 @@
 jest.config.js
-.eslintrc.js
+.eslintrc.js
+rollup.config.mjs
+dist

.eslintrc.js

@@ -1,5 +1,4 @@
 module.exports = {
-  // parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.json',
     tsconfigRootDir: __dirname,
@@ -8,6 +7,11 @@ module.exports = {
     browser: true,
     jest: true,
   },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
   extends: [
     'plugin:react/recommended',
     'plugin:@typescript-eslint/recommended',

.github/workflows/ci.yml

@@ -1,16 +1,24 @@
 name: CI Build
 
-on: 
+on:
   push:
     branches: main
-  pull_request: 
+  pull_request:
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v4
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+      - name: Enable corepack
+        run: corepack enable
+      - name: Set Yarn version
+        run: yarn set version stable
       - name: Yarn Install
         run: yarn
       - name: Lint

.github/workflows/release.yml

@@ -9,26 +9,37 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v1
-
+      - uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.x'
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Set Yarn version
+        run: yarn set version stable
+
       - name: Yarn Install
         run: yarn
-      
+
       - name: Lint
-        run: yarn lint
-      
+        run: yarn lint:ci
+
       - name: Jest Tests
         run: yarn test:ci
-      
+
       - name: Typescript build
         run: yarn build
-      
+
       - name: Set Version to Release Tag Name
         run: |
           yarn version --new-version ${{ github.event.release.tag_name }} --no-git-tag-version
-      
+
       - name: Publish to npm, publish pre-release as beta
-        uses: JS-DevTools/npm-publish@v1 
+        uses: JS-DevTools/npm-publish@v1
         with:
           token: ${{ secrets.NPM_TOKEN }}
           tag: ${{ github.event.release.prerelease && 'beta' || 'latest' }}

.gitignore

@@ -2,8 +2,6 @@
 logs
 *.log
 npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
 lerna-debug.log*
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
@@ -65,6 +63,18 @@ typings/
 # Output of 'npm pack'
 *.tgz
 
+# Yarn files
+yarn-error.log
+yarn-debug.log*
+yarn-error.log*
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
 # Yarn Integrity file
 .yarn-integrity
 
@@ -108,7 +118,6 @@ dist
 
 # Custom
 lib/
-yarn-error.log
 storybook-static/
 
 # IDEA files

.nvmrc

@@ -0,0 +1 @@
+18

.storybook/storybook.scss

@@ -1,8 +1,3 @@
-// Also import styles for deprecated Panel and Promo
-@import '../node_modules/nhsuk-frontend-legacy/packages/core/all.scss';
-@import '../node_modules/nhsuk-frontend-legacy/packages/components/panel/panel';
-@import '../node_modules/nhsuk-frontend-legacy/packages/components/promo/promo';
-
 // Allow current nhsuk styles to override legacy
 @import '../node_modules/nhsuk-frontend/packages/nhsuk.scss';
 

.yarnrc.yml

@@ -0,0 +1,2 @@
+nodeLinker: node-modules
+npmRegistryServer: https://registry.yarnpkg.com

build.tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "target": "es6",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "declaration": true,
+    "declarationDir": "types",
+    "emitDeclarationOnly": true,
+    "baseUrl": "./",
+    "types": ["jest", "node"],
+    "sourceMap": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@content-presentation/*": ["src/components/content-presentation/*"],
+      "@form-elements/*": ["src/components/form-elements/*"],
+      "@navigation/*": ["src/components/navigation/*"],
+      "@typography/*": ["src/components/typography/*"],
+      "@utils/*": ["src/utils/*"],
+      "@patterns/*": ["src/patterns/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "build"]
+}

jest.config.js

@@ -3,15 +3,23 @@ const { compilerOptions } = require('./tsconfig.json');
 
 const jestConfig = {
   testEnvironment: 'jsdom',
-  moduleDirectories: ['node_modules'],
-  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
-  collectCoverageFrom: ['<rootDir>/src/**/*.{ts,tsx}'],
+  rootDir: './src',
+  setupFilesAfterEnv: ['<rootDir>/../setup/setupTests.ts'],
+  collectCoverageFrom: ['<rootDir>/**/*.{ts,tsx}'],
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
-    prefix: '<rootDir>/src/',
+    prefix: '<rootDir>',
   }),
   transform: {
-    '^.+\\.(t|j)sx?$': 'ts-jest',
+    '^.+\\.(t|j)sx?$': [
+      'ts-jest',
+      {
+        babelConfig: {
+          plugins: ['@babel/plugin-transform-modules-commonjs'],
+        },
+      },
+    ],
   },
+  transformIgnorePatterns: ['node_modules/(?!nhsuk-frontend/packages)'],
 };
 
 module.exports = jestConfig;

package.json

@@ -8,18 +8,18 @@
     "dist",
     "lib"
   ],
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/cjs/index.d.ts",
   "scripts": {
     "cleanup": "rm -rf dist/ > /dev/null && rm -rf lib/ > /dev/null",
     "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 src/components/navigation/pagination/__tests__/Pagination.test.tsx",
+    "build": "yarn cleanup && rollup -c",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "test:ci": "jest --coverage",
-    "lint": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}' --fix",
+    "lint": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}'",
+    "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}' --fix",
     "lint:ci": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}'",
     "build-storybook": "storybook build",
     "prepublishOnly": "yarn lint:ci && yarn test:ci && yarn storybook --smoke-test"
@@ -28,10 +28,12 @@
   "devDependencies": {
     "@babel/cli": "^7.13.16",
     "@babel/core": "^7.19.6",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
     "@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",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@storybook/addon-actions": "^7.0.2",
     "@storybook/addon-essentials": "^7.0.2",
     "@storybook/addon-links": "^7.0.2",
@@ -41,15 +43,16 @@
     "@storybook/react": "^7.0.2",
     "@storybook/react-vite": "^7.0.2",
     "@storybook/theming": "^7.0.2",
-    "@types/jest": "^26.0.23",
-    "@types/jest-axe": "^3.5.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@types/jest": "^29.5.12",
+    "@types/jest-axe": "^3.5.9",
     "@types/node": "^15.0.2",
     "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
     "@types/rollup-plugin-peer-deps-external": "^2.2.1",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
-    "babel-loader": "^8.2.2",
     "chromatic": "^6.17.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -61,14 +64,14 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.7.0",
     "jest-axe": "^8.0.0",
+    "jest-environment-jsdom": "^29.7.0",
     "nhsuk-frontend": "8.1.0",
-    "nhsuk-frontend-legacy": "npm:[email protected]",
     "prettier": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "regenerator-runtime": "^0.13.7",
-    "rollup": "^3.20.2",
-    "rollup-plugin-dts": "^5.3.0",
+    "rollup": "^4.13.0",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "sass": "^1.53.0",
     "storybook": "^7.6.17",
@@ -77,14 +80,12 @@
     "vite": "^4.2.1"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.2.1",
-    "classnames": "^2.2.6",
-    "jest-environment-jsdom": "^29.7.0"
+    "classnames": "^2.2.6"
   },
   "peerDependencies": {
     "nhsuk-frontend": ">=8.0.0",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }

rollup.config.mjs

@@ -1,37 +1,40 @@
-import commonjs from '@rollup/plugin-commonjs';
-import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import resolve from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
 import typescript from '@rollup/plugin-typescript';
+import terser from '@rollup/plugin-terser';
+import external from 'rollup-plugin-peer-deps-external';
 import dts from 'rollup-plugin-dts';
-import packageJson from './package.json' assert { type: 'json' };
 
-const plugins = [
-  peerDepsExternal(),
-  resolve(),
-  commonjs(),
-  typescript({ tsconfig: './tsconfig.json' }),
-];
+import packageJson from './package.json' assert { type: 'json' };
 
 export default [
   {
     input: 'src/index.ts',
     output: [
-      { file: packageJson.main, format: 'cjs', sourcemap: true },
-      { file: packageJson.module, format: 'esm', sourcemap: true },
+      {
+        file: packageJson.main,
+        format: 'cjs',
+        sourcemap: true,
+        name: 'react-ts-lib',
+      },
+      {
+        file: packageJson.module,
+        format: 'esm',
+        sourcemap: true,
+      },
     ],
-    plugins,
-  },
-  {
-    input: 'src/deprecated/index.ts',
-    output: [
-      { file: 'dist/deprecated.js', format: 'cjs', sourcemap: true },
-      { file: 'dist/deprecated.es.js', format: 'esm', sourcemap: true },
+    plugins: [
+      external(),
+      resolve(),
+      commonjs(),
+      typescript({ tsconfig: './build.tsconfig.json', exclude: ['**/__tests__', '**/*.test.tsx'] }),
+      terser(),
     ],
-    plugins,
   },
   {
-    input: 'dist/lib/index.d.ts',
+    input: 'dist/esm/types/index.d.ts',
     output: [{ file: 'dist/index.d.ts', format: 'esm' }],
+    external: [],
     plugins: [dts()],
   },
 ];