Use modern JSX runtime with Babel, named exports, verbatim syntax (#271)

* Preserve build output (non-minified) for all modules

* Fix TypeScript "Type 'NodeListOf<HTMLElement>' must have a '[Symbol.iterator]()' method that returns an iterator"

* Make sure source maps include original sources

* Configure Babel with Browserslist

* Use named exports, package imports and verbatim syntax

* Fix missing README upgrade link

* Configure Rollup build with Babel

* Switch to modern JSX runtime

* Fix tests that relied on classic JSX runtime

* Fix deprecated Jest assertions

* Avoid circular dependencies

* Remove unused packages

* Remove unused Jest mock

* Update test packages

* Update snapshots

* Use package imports for stories

* Use correct file extensions for exported modules

* Always export util types and guards

* Fix TypeScript compiler issues

* Set up TypeScript references

* Add mandatory ES module file extensions to sources

* Remove mandatory ES module file extensions for Jest

* Remove mostly duplicate `:ci` npm scripts

* Split out ESLint only `lint:js` npm script

* Split out TypeScript only `lint:types` npm script

* Split out Prettier only `lint:prettier` npm script

* Enable Prettier `"quoteProps": "consistent"`

* Update to ESLint v9

* Enable ESLint editor validation for JSX

* Remove ESLint rules we should fix instead

* Turn off ESLint rules handled by TypeScript

* Fix ESLint "Cannot reassign variables declared outside of the component/hook"

* Fix ESLint missing React hook dependencies

* Fix ESLint unnecessary disable comments

* Fix ESLint remaining issues

* Fix missing lodash package

* Upgrade to latest Yarn stable

* Upgrade TypeScript with resolutions

* Require React v18.2 minimum version

* Upgrade to React v19

* Upgrade to React v19 compatible packages

* Restore `'use client'` for Next.js

* Updating component library to latest Storybook for React

* Update changelog for previous fixes

* Add panel component

* Add changelog entry

* Update package version to v6.0.0-beta.1

* Add JSDoc types

---------

Co-authored-by: richard smith <[email protected]>

Author: colinrotherham

.browserslistrc

@@ -0,0 +1,5 @@
+[javascripts]
+supports es6-module
+
+[node]
+node 22

.eslintignore

@@ -22,9 +22,9 @@ jobs:
       - name: Yarn Install
         run: yarn
       - name: Lint
-        run: yarn lint:ci
+        run: yarn lint
       - name: Jest Tests
-        run: yarn test:ci
+        run: yarn test --coverage
       - name: Typescript build
         run: yarn build
       - name: Storybook build

.eslintrc.js

@@ -28,10 +28,10 @@ jobs:
         run: yarn
 
       - name: Lint
-        run: yarn lint:ci
+        run: yarn lint
 
       - name: Jest Tests
-        run: yarn test:ci
+        run: yarn test --coverage
 
       - name: Typescript build
         run: yarn build

.github/workflows/ci.yml

@@ -0,0 +1,12 @@
+# Node.js modules
+node_modules/
+
+# Test coverage
+coverage/
+
+# Build output
+dist/
+
+# Files to ignore
+.yarnrc.yml
+package-lock.json

.github/workflows/release.yml

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

.prettierignore

@@ -4,21 +4,29 @@ import tsConfigPaths from 'vite-tsconfig-paths';
 
 const config: StorybookConfig = {
   stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: ['@storybook/addon-links', '@storybook/addon-docs'],
   framework: {
     name: '@storybook/react-vite',
     options: {},
   },
-  docs: {
-    autodocs: true,
-  },
+
   typescript: {
     reactDocgen: 'react-docgen-typescript',
   },
+
   viteFinal(config) {
     return mergeConfig(config, {
       plugins: [tsConfigPaths()],
+      css: {
+        preprocessorOptions: {
+          scss: {
+            quietDeps: true,
+            loadPaths: ['node_modules'],
+          },
+        },
+      },
     });
   },
 };
+
 export default config;

.prettierrc

@@ -1,15 +1,18 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 import nhsTheme from './theme';
 import { startCase, upperFirst } from 'lodash';
 
-const sentenceCase = (string) => {
-  if (typeof string !== 'string') return '';
-  return upperFirst(startCase(string).toLowerCase());
+const sentenceCase = (name = '') => {
+  if (!name || typeof name !== 'string') {
+    return '';
+  }
+
+  return upperFirst(startCase(name).toLowerCase());
 };
 
 addons.setConfig({
   sidebar: {
-    renderLabel: ({ name, type }) => sentenceCase(name),
+    renderLabel: ({ name }) => sentenceCase(name),
   },
   theme: nhsTheme,
 });

.storybook/main.ts

@@ -1,5 +1,5 @@
 import './storybook.scss';
-import { Preview } from '@storybook/react';
+import { type Preview } from '@storybook/react-vite';
 
 const preview: Preview = {
   parameters: {
@@ -18,5 +18,8 @@ const preview: Preview = {
       },
     },
   },
+
+  tags: ['autodocs'],
 };
+
 export default preview;