Use ES modules for Storybook

colinrotherham · colinrotherham · commit ac610424517d · 2025-11-03T22:00:06.000Z
diff --git a/.storybook/manager.ts b/.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 = '') => {
diff --git a/package.json b/package.json
@@ -12,18 +12,10 @@
       "import": "./dist/esm/components/*",
       "require": "./dist/cjs/components/*"
     },
-    "#components": {
-      "import": "./dist/esm/components/index.js",
-      "require": "./dist/cjs/components/index.cjs"
-    },
     "#patterns/*": {
       "import": "./dist/esm/patterns/*",
       "require": "./dist/cjs/patterns/*"
     },
-    "#patterns": {
-      "import": "./dist/esm/patterns/index.js",
-      "require": "./dist/cjs/patterns/index.cjs"
-    },
     "#util/*": {
       "import": "./dist/esm/util/*",
       "require": "./dist/cjs/util/*"
diff --git a/stories/Content Presentation/Details.stories.tsx b/stories/Content Presentation/Details.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Details } from '#components';
+import { Details } from '#components/content-presentation/details/index.js';
 
 /**
  * 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/contents-list" target="_blank">here</a>.
diff --git a/stories/Content Presentation/DoAndDontList.stories.tsx b/stories/Content Presentation/DoAndDontList.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { DoAndDontList } from '#components';
+import { DoAndDontList } from '#components/content-presentation/do-and-dont-list/index.js';
 
 /**
  * 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/do-dont-list" target="_blank" rel="noopener noreferrer">here</a>.
diff --git a/stories/Content Presentation/Hero.stories.tsx b/stories/Content Presentation/Hero.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Hero } from '#components';
+import { Hero } from '#components/content-presentation/hero/index.js';
 
 const meta: Meta<typeof Hero> = {
   title: 'Content Presentation/Hero',
diff --git a/stories/Content Presentation/Icons.stories.tsx b/stories/Content Presentation/Icons.stories.tsx
@@ -8,7 +8,7 @@ import {
   SearchIcon,
   TickIcon,
   UserIcon,
-} from '#components';
+} from '#components/content-presentation/icons/individual/index.js';
 
 const meta: Meta = {
   title: 'Content Presentation/Icons',
diff --git a/stories/Content Presentation/Images.stories.tsx b/stories/Content Presentation/Images.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Images } from '#components';
+import { Images } from '#components/content-presentation/images/index.js';
 
 const meta: Meta<typeof Images> = {
   title: 'Content Presentation/Images',
diff --git a/stories/Content Presentation/InsetText.stories.tsx b/stories/Content Presentation/InsetText.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { InsetText } from '#components';
+import { InsetText } from '#components/content-presentation/inset-text/index.js';
 
 const meta: Meta<typeof InsetText> = {
   title: 'Content Presentation/InsetText',
diff --git a/stories/Content Presentation/NotificationBanner.stories.tsx b/stories/Content Presentation/NotificationBanner.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { NotificationBanner } from '#components';
-import { NotificationBannerLink } from '#components/content-presentation/notification-banner/components';
+import { NotificationBanner } from '#components/content-presentation/notification-banner/index.js';
+import { NotificationBannerLink } from '#components/content-presentation/notification-banner/components/index.js';
 
 /**
  * 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>.
diff --git a/stories/Content Presentation/Panel.stories.tsx b/stories/Content Presentation/Panel.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Panel } from '#components';
+import { Panel } from '#components/content-presentation/panel/index.js';
 
 const meta: Meta<typeof Panel> = {
   title: 'Content Presentation/Panel',
diff --git a/stories/Content Presentation/SummaryList.stories.tsx b/stories/Content Presentation/SummaryList.stories.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { BodyText, SummaryList } from '#components';
+import { BodyText } from '#components/typography/BodyText.js';
+import { SummaryList } from '#components/content-presentation/summary-list/index.js';
 
 /**
  * ## Implementation notes
diff --git a/stories/Content Presentation/Table.stories.tsx b/stories/Content Presentation/Table.stories.tsx
@@ -1,5 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Col, HintText, Row, Table } from '#components';
+import { Table } from '#components/content-presentation/table/index.js';
+import { HintText } from '#components/form-elements/hint-text/index.js';
+import { Col, Row } from '#components/layout/index.js';
 
 const meta: Meta<typeof Table> = {
   title: 'Content Presentation/Table',
diff --git a/stories/Content Presentation/Tabs.stories.tsx b/stories/Content Presentation/Tabs.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Tabs } from '#components';
+import { Tabs } from '#components/content-presentation/tabs/index.js';
 
 /**
  * The tabs component lets users navigate between related sections of content, displaying 1 section at a time.
diff --git a/stories/Content Presentation/Tag.stories.tsx b/stories/Content Presentation/Tag.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Tag } from '#components';
+import { Tag } from '#components/content-presentation/tag/index.js';
 
 const meta: Meta<typeof Tag> = {
   title: 'Content Presentation/Tag',
diff --git a/stories/Content Presentation/WarningCallout.stories.tsx b/stories/Content Presentation/WarningCallout.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { WarningCallout } from '#components';
+import { WarningCallout } from '#components/content-presentation/warning-callout/index.js';
 
 const meta: Meta<typeof WarningCallout> = {
   title: 'Content Presentation/WarningCallout',
diff --git a/stories/Form Elements/Button.stories.tsx b/stories/Form Elements/Button.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Button } from '#components';
+import { Button } from '#components/form-elements/button/index.js';
 
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/components/button" target="_blank" rel="noopener noreferrer">here</a>.
diff --git a/stories/Form Elements/CharacterCount.stories.tsx b/stories/Form Elements/CharacterCount.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { CharacterCount } from '#components';
+import { CharacterCount } from '#components/form-elements/character-count/index.js';
 
 /**
  * Help users know how much text they can enter when there is a limit on the number of characters.
diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx
@@ -1,6 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useEffect, useRef, useState, type SyntheticEvent } from 'react';
-import { Checkboxes, TextInput } from '#components';
+import { Checkboxes } from '#components/form-elements/checkboxes/index.js';
+import { TextInput } from '#components/form-elements/text-input/index.js';
 
 /**
  * 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/checkboxes" target="_blank" rel="noopener noreferrer">here</a>.
diff --git a/stories/Form Elements/DateInput.stories.tsx b/stories/Form Elements/DateInput.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
-import { DateInput, type DateInputValue } from '#components';
+import { DateInput, type DateInputValue } from '#components/form-elements/date-input/index.js';
 
 const meta: Meta<typeof DateInput> = {
   title: 'Form Elements/DateInput',
diff --git a/stories/Form Elements/ErrorMessage.stories.tsx b/stories/Form Elements/ErrorMessage.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { ErrorMessage } from '#components';
+import { ErrorMessage } from '#components/form-elements/error-message/index.js';
 
 /**
  * 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/error-message" target="_blank" rel="noopener noreferrer">here</a>.
diff --git a/stories/Form Elements/ErrorSummary.stories.tsx b/stories/Form Elements/ErrorSummary.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { ErrorSummary } from '#components';
+import { ErrorSummary } from '#components/form-elements/error-summary/index.js';
 
 /**
  * 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/error-summary" target="_blank" rel="noopener noreferrer">here</a>.
diff --git a/stories/Form Elements/Fieldset.stories.tsx b/stories/Form Elements/Fieldset.stories.tsx
@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Fieldset, TextInput } from '#components';
+import { Fieldset } from '#components/form-elements/fieldset/index.js';
+import { TextInput } from '#components/form-elements/text-input/index.js';
 
 /**
  * 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/fieldset" target="_blank" rel="noopener noreferrer">here</a>.
diff --git a/stories/Form Elements/HintText.stories.tsx b/stories/Form Elements/HintText.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { HintText } from '#components';
+import { HintText } from '#components/form-elements/hint-text/index.js';
 
 const meta: Meta<typeof HintText> = {
   title: 'Form Elements/HintText',
diff --git a/stories/Form Elements/Label.stories.tsx b/stories/Form Elements/Label.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Label } from '#components';
+import { Label } from '#components/form-elements/label/index.js';
 
 const meta: Meta<typeof Label> = {
   title: 'Form Elements/Label',
diff --git a/stories/Form Elements/Radios.stories.tsx b/stories/Form Elements/Radios.stories.tsx
@@ -1,6 +1,8 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
-import { Checkboxes, Radios, TextInput } from '#components';
+import { Checkboxes } from '#components/form-elements/checkboxes/index.js';
+import { Radios } from '#components/form-elements/radios/index.js';
+import { TextInput } from '#components/form-elements/text-input/index.js';
 
 const meta: Meta<typeof Radios> = {
   title: 'Form Elements/Radios',
diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx
@@ -1,6 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
-import { Select, TextInput } from '#components';
+import { Select } from '#components/form-elements/select/index.js';
+import { TextInput } from '#components/form-elements/text-input/index.js';
 
 const meta: Meta<typeof Select> = {
   title: 'Form Elements/Select',
diff --git a/stories/Form Elements/TextInput.stories.tsx b/stories/Form Elements/TextInput.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { TextInput } from '#components';
+import { TextInput } from '#components/form-elements/text-input/index.js';
 
 const meta: Meta<typeof TextInput> = {
   title: 'Form Elements/TextInput',
diff --git a/stories/Form Elements/Textarea.stories.tsx b/stories/Form Elements/Textarea.stories.tsx
@@ -1,6 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { useState } from 'react';
-import { TextInput, Textarea } from '#components';
+import { TextInput } from '#components/form-elements/text-input/index.js';
+import { Textarea } from '#components/form-elements/textarea/index.js';
 
 const meta: Meta<typeof Textarea> = {
   title: 'Form Elements/Textarea',
diff --git a/stories/Layout/Grid.stories.tsx b/stories/Layout/Grid.stories.tsx
@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Card, Col, Container, Row } from '#components';
+import { Card } from '#components/navigation/card/index.js';
+import { Col, Container, Row } from '#components/layout/index.js';
 
 const meta: Meta = {
   title: 'Layout/Grid',
diff --git a/stories/Navigation/ActionLink.stories.tsx b/stories/Navigation/ActionLink.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { ActionLink } from '#components';
+import { ActionLink } from '#components/navigation/action-link/index.js';
 
 const meta: Meta<typeof ActionLink> = {
   title: 'Navigation/ActionLink',
diff --git a/stories/Navigation/BackLink.stories.tsx b/stories/Navigation/BackLink.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { BackLink } from '#components';
+import { BackLink } from '#components/navigation/back-link/index.js';
 
 const meta: Meta<typeof BackLink> = {
   title: 'Navigation/BackLink',
diff --git a/stories/Navigation/Breadcrumb.stories.tsx b/stories/Navigation/Breadcrumb.stories.tsx
@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Breadcrumb, Container } from '#components';
+import { Breadcrumb } from '#components/navigation/breadcrumb/index.js';
+import { Container } from '#components/layout/index.js';
 
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/components/breadcrumb" target="_blank">here</a>.
diff --git a/stories/Navigation/Card.stories.tsx b/stories/Navigation/Card.stories.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Card, ChevronRightCircleIcon } from '#components';
+import { Card } from '#components/navigation/card/index.js';
+import { ChevronRightCircleIcon } from '#components/content-presentation/icons/individual/index.js';
 
 const meta: Meta<typeof Card> = {
   title: 'Navigation/Card',
diff --git a/stories/Navigation/ContentsList.stories.tsx b/stories/Navigation/ContentsList.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { ContentsList } from '#components';
+import { ContentsList } from '#components/navigation/contents-list/index.js';
 
 /**
  * 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/contents-list" target="_blank" rel="noopener noreferrer">here</a>.
diff --git a/stories/Navigation/Footer.stories.tsx b/stories/Navigation/Footer.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Footer } from '#components';
+import { Footer } from '#components/navigation/footer/index.js';
 
 const meta: Meta<typeof Footer> = {
   title: 'Navigation/Footer',
diff --git a/stories/Navigation/Header.stories.tsx b/stories/Navigation/Header.stories.tsx
@@ -1,6 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { type ComponentProps } from 'react';
-import { Header } from '#components';
+import { Header } from '#components/navigation/header/index.js';
 
 const meta: Meta<typeof Header> = {
   title: 'Navigation/Header',
diff --git a/stories/Navigation/Pagination.stories.tsx b/stories/Navigation/Pagination.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Pagination } from '#components';
+import { Pagination } from '#components/navigation/pagination/index.js';
 
 const meta: Meta<typeof Pagination> = {
   title: 'Navigation/Pagination',
diff --git a/stories/Navigation/SkipLink.stories.tsx b/stories/Navigation/SkipLink.stories.tsx
@@ -1,6 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { type FC, type ReactNode } from 'react';
-import { HintText, SkipLink } from '#components';
+import { HintText } from '#components/form-elements/hint-text/index.js';
+import { SkipLink } from '#components/navigation/skip-link/index.js';
 
 const CodeText: FC<{ children: ReactNode }> = ({ children }) => (
   <span
diff --git a/stories/Patterns/NavAZ.stories.tsx b/stories/Patterns/NavAZ.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { NavAZ } from '#patterns';
+import { NavAZ } from '#patterns/nav-a-z/index.js';
 
 /**
  * This component is generally used as part of the 'A to Z page' pattern.
diff --git a/stories/Patterns/PageAZ.stories.tsx b/stories/Patterns/PageAZ.stories.tsx
@@ -1,6 +1,8 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Card, Col, Container, HeadingLevel, Row } from '#components';
-import { NavAZ } from '#patterns';
+import { Card } from '#components/navigation/card/index.js';
+import { HeadingLevel } from '#components/utils/index.js';
+import { Col, Container, Row } from '#components/layout/index.js';
+import { NavAZ } from '#patterns/nav-a-z/index.js';
 
 /**
  * A to Z is a way of presenting a number of pages alphabetically.
diff --git a/stories/Patterns/ReviewDate.stories.tsx b/stories/Patterns/ReviewDate.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { ReviewDate } from '#patterns';
+import { ReviewDate } from '#patterns/review-date/index.js';
 
 const meta: Meta<typeof ReviewDate> = {
   title: 'Patterns/ReviewDate',
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -17,9 +17,7 @@
     "verbatimModuleSyntax": true,
     "paths": {
       "#components/*": ["./src/components/*"],
-      "#components": ["./src/components/index.ts"],
       "#patterns/*": ["./src/patterns/*"],
-      "#patterns": ["./src/patterns/index.ts"],
       "#util/*": ["./src/util/*"],
       "nhsuk-react-components": ["./src/index.ts"]
     }
diff --git a/tsconfig.dev.json b/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"
   ]
diff --git a/tsconfig.json b/tsconfig.json
@@ -7,6 +7,9 @@
     },
     {
       "path": "./tsconfig.build.json"
+    },
+    {
+      "path": "./tsconfig.stories.json"
     }
   ]
 }
diff --git a/tsconfig.stories.json b/tsconfig.stories.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsxdev",
+    "types": ["node"]
+  },
+  "include": ["./.storybook/*.ts", "./stories/**/*.tsx"]
+}
