Use ES modules for Storybook

Author: colinrotherham

.storybook/manager.ts

@@ -1,5 +1,5 @@
 import { addons } from 'storybook/manager-api';
-import nhsTheme from './theme';
+import nhsTheme from './theme.js';
 import { startCase, upperFirst } from 'lodash';
 
 const sentenceCase = (name = '') => {

stories/Content Presentation/NotificationBanner.stories.tsx

@@ -1,6 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { NotificationBanner } from '#components';
-import { NotificationBannerLink } from '#components/content-presentation/notification-banner/components';
+import { NotificationBanner, NotificationBannerLink } from '#components';
 
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/notification-banner" target="_blank">here</a>.

tsconfig.dev.json

@@ -7,11 +7,9 @@
     "types": ["jest", "node"]
   },
   "include": [
-    "./.storybook/*.ts",
     "./src/**/*.test.ts",
     "./src/**/*.test.tsx",
     "./src/setupTests.ts",
-    "./stories/**/*.tsx",
     "./*.config.cjs",
     "./*.config.js"
   ]

tsconfig.json

@@ -7,6 +7,9 @@
     },
     {
       "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.stories.json"
     }
   ]
 }

tsconfig.stories.json

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsxdev",
+    "types": ["node"]
+  },
+  "include": ["./.storybook/*.ts", "./stories/**/*.tsx"]
+}