Use package imports for stories

colinrotherham · colinrotherham · commit 6637a462a539 · 2025-10-06T10:17:07.000+01:00
diff --git a/README.md b/README.md
@@ -27,7 +27,7 @@ import { PureComponent } from 'react';
 import { Button } from 'nhsuk-react-components';
 
 // Or you can import components directly
-import Button from 'nhsuk-react-components/dist/esm/components/button';
+import { Button } from 'nhsuk-react-components/dist/esm/components/button';
 
 class GetStartedButton extends PureComponent {
   render() {
diff --git a/package.json b/package.json
@@ -14,6 +14,10 @@
       "import": "./dist/esm/components/*",
       "require": "./dist/cjs/components/*"
     },
+    "#components": {
+      "import": "./dist/esm/components/index.js",
+      "require": "./dist/cjs/components/index.js"
+    },
     "#patterns/*": {
       "import": "./dist/esm/patterns/*",
       "require": "./dist/cjs/patterns/*"
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -0,0 +1,6 @@
+export * from './content-presentation';
+export * from './form-elements';
+export * from './layout';
+export * from './navigation';
+export * from './typography';
+export * from './utils';
diff --git a/src/index.ts b/src/index.ts
@@ -1,7 +1,2 @@
-export * from './components/content-presentation';
-export * from './components/form-elements';
-export * from './components/layout';
-export * from './components/navigation';
-export * from './components/typography';
-export * from './components/utils';
+export * from './components';
 export * from './patterns';
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';
-import { Details } from 'nhsuk-react-components';
+import { Details } 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/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';
-import { DoAndDontList } from 'nhsuk-react-components';
+import { DoAndDontList } 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/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';
-import { Hero } from 'nhsuk-react-components';
+import { Hero } from '#components';
 
 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 'nhsuk-react-components';
+} from '#components';
 
 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';
-import { Images } from 'nhsuk-react-components';
+import { Images } from '#components';
 
 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';
-import { InsetText } from 'nhsuk-react-components';
+import { InsetText } from '#components';
 
 const meta: Meta<typeof InsetText> = {
   title: 'Content Presentation/InsetText',
diff --git a/stories/Content Presentation/SummaryList.stories.tsx b/stories/Content Presentation/SummaryList.stories.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { type Meta, type StoryObj } from '@storybook/react';
-import { BodyText, SummaryList } from 'nhsuk-react-components';
+import { BodyText, SummaryList } from '#components';
 
 /**
  * ## Implementation notes
diff --git a/stories/Content Presentation/Table.stories.tsx b/stories/Content Presentation/Table.stories.tsx
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { Col, HintText, Row, Table } from 'nhsuk-react-components';
+import { Col, HintText, Row, Table } from '#components';
 
 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';
-import { Tabs } from 'nhsuk-react-components';
+import { Tabs } from '#components';
 
 /**
  * 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';
-import { Tag } from 'nhsuk-react-components';
+import { Tag } from '#components';
 
 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';
-import { WarningCallout } from 'nhsuk-react-components';
+import { WarningCallout } from '#components';
 
 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';
-import { Button } from 'nhsuk-react-components';
+import { Button } from '#components';
 
 /**
  * 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';
-import { CharacterCount } from 'nhsuk-react-components';
+import { CharacterCount } from '#components';
 
 /**
  * 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,6 @@
 import { type Meta, type StoryObj } from '@storybook/react';
 import { useEffect, useRef, useState, type SyntheticEvent } from 'react';
-import { Checkboxes, TextInput } from 'nhsuk-react-components';
+import { Checkboxes, TextInput } 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/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';
-import React, { useState } from 'react';
-import { DateInput, type DateInputValue } from 'nhsuk-react-components';
+import { useState } from 'react';
+import { DateInput, type DateInputValue } from '#components';
 
 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';
-import { ErrorMessage } from 'nhsuk-react-components';
+import { ErrorMessage } 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/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';
-import { ErrorSummary } from 'nhsuk-react-components';
+import { ErrorSummary } 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/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,5 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { Fieldset, TextInput } from 'nhsuk-react-components';
+import { Fieldset, TextInput } 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/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';
-import { HintText } from 'nhsuk-react-components';
+import { HintText } from '#components';
 
 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';
-import { Label } from 'nhsuk-react-components';
+import { Label } from '#components';
 
 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,6 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import { Checkboxes, Radios, TextInput } from 'nhsuk-react-components';
+import { useState } from 'react';
+import { Checkboxes, Radios, TextInput } from '#components';
 
 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,6 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import { Select, TextInput } from 'nhsuk-react-components';
+import { useState } from 'react';
+import { Select, TextInput } from '#components';
 
 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';
-import { TextInput } from 'nhsuk-react-components';
+import { TextInput } from '#components';
 
 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,6 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import React, { useState } from 'react';
-import { TextInput, Textarea } from 'nhsuk-react-components';
+import { useState } from 'react';
+import { TextInput, Textarea } from '#components';
 
 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,5 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { Card, Col, Container, Row } from 'nhsuk-react-components';
+import { Card, Col, Container, Row } from '#components';
 
 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';
-import { ActionLink } from 'nhsuk-react-components';
+import { ActionLink } from '#components';
 
 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';
-import { BackLink } from 'nhsuk-react-components';
+import { BackLink } from '#components';
 
 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,5 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { Breadcrumb, Container } from 'nhsuk-react-components';
+import { Breadcrumb, Container } from '#components';
 
 /**
  * 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,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import { type Meta, type StoryObj } from '@storybook/react';
-import { Card, ChevronRightCircleIcon } from 'nhsuk-react-components';
+import { Card, ChevronRightCircleIcon } from '#components';
 
 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';
-import { ContentsList } from 'nhsuk-react-components';
+import { ContentsList } 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/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';
-import { Footer } from 'nhsuk-react-components';
+import { Footer } from '#components';
 
 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';
-import React, { type ComponentProps } from 'react';
-import { Header } from 'nhsuk-react-components';
+import { type ComponentProps } from 'react';
+import { Header } from '#components';
 
 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';
-import { Pagination } from 'nhsuk-react-components';
+import { Pagination } from '#components';
 
 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,6 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import React, { type FC, type ReactNode } from 'react';
-import { HintText, SkipLink } from 'nhsuk-react-components';
+import { type FC, type ReactNode } from 'react';
+import { HintText, SkipLink } from '#components';
 
 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';
-import { NavAZ } from 'nhsuk-react-components';
+import { NavAZ } from '#patterns';
 
 /**
  * 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,5 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/react';
-import { Card, Col, Container, HeadingLevel, NavAZ, Row } from 'nhsuk-react-components';
+import { Card, Col, Container, HeadingLevel, Row } from '#components';
+import { NavAZ } from '#patterns';
 
 /**
  * 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';
-import { ReviewDate } from 'nhsuk-react-components';
+import { ReviewDate } from '#patterns';
 
 const meta: Meta<typeof ReviewDate> = {
   title: 'Patterns/ReviewDate',
diff --git a/stories/Welcome.mdx b/stories/Welcome.mdx
@@ -44,7 +44,7 @@ import { PureComponent } from 'react';
 import { Button } from 'nhsuk-react-components';
 
 // Or you can import components directly
-import Button from 'nhsuk-react-components/dist/esm/components/button';
+import { Button } from 'nhsuk-react-components/dist/esm/components/button';
 
 function GetStartedButton() {
   return <Button href="/get-started">Get Started</Button>;
diff --git a/tsconfig.base.json b/tsconfig.base.json
@@ -16,8 +16,9 @@
     "types": [],
     "paths": {
       "#components/*": ["./src/components/*"],
+      "#components": ["./src/components/index.ts"],
       "#patterns/*": ["./src/patterns/*"],
-      "#patterns": ["./src/patterns/index"],
+      "#patterns": ["./src/patterns/index.ts"],
       "#util/*": ["./src/util/*"],
       "nhsuk-react-components": ["./src/index.ts"]
     }
