Use named exports and package imports

Author: colinrotherham

babel.config.js

@@ -34,6 +34,21 @@ module.exports = {
   env: {
     test: {
       browserslistEnv: 'node',
+      plugins: [
+        // Override package.json "imports" for Jest to use sources
+        // otherwise a build step to output `./dist` is necessary
+        [
+          'module-resolver',
+          {
+            alias: {
+              '#components': './src/components',
+              '#patterns': './src/patterns',
+              '#util': './src/util',
+              'nhsuk-react-components': './src/index.ts',
+            },
+          },
+        ],
+      ],
     },
   },
 };

package.json

@@ -9,6 +9,24 @@
     "dist"
   ],
   "sideEffects": false,
+  "imports": {
+    "#components/*": {
+      "import": "./dist/esm/components/*",
+      "require": "./dist/cjs/components/*"
+    },
+    "#patterns/*": {
+      "import": "./dist/esm/patterns/*",
+      "require": "./dist/cjs/patterns/*"
+    },
+    "#patterns": {
+      "import": "./dist/esm/patterns/index.js",
+      "require": "./dist/cjs/patterns/index.js"
+    },
+    "#util/*": {
+      "import": "./dist/esm/util/*",
+      "require": "./dist/cjs/util/*"
+    }
+  },
   "exports": {
     ".": {
       "import": {
@@ -68,6 +86,7 @@
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
     "babel-jest": "^29.7.0",
+    "babel-plugin-module-resolver": "^5.0.2",
     "chromatic": "^6.17.3",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",

src/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import * as index from '../index';
+import * as index from '..';
 
 describe('Index', () => {
   it('contains all expected elements', () => {
@@ -15,26 +15,34 @@ describe('Index', () => {
       'Breadcrumb',
       'Button',
       'Card',
+      'CardContext',
       'CharacterCount',
       'Checkboxes',
+      'CheckboxesContext',
       'ChevronRightCircleIcon',
       'Clearfix',
       'Col',
       'Container',
       'ContentsList',
       'CrossIcon',
       'DateInput',
+      'DateInputContext',
       'Details',
       'DoAndDontList',
       'ErrorMessage',
       'ErrorSummary',
       'Fieldset',
       'Footer',
       'Form',
+      'FormContext',
       'FormGroup',
+      'FormGroupContext',
       'Header',
+      'HeaderContext',
+      'HeadingLevel',
       'Hero',
       'HintText',
+      'Icon',
       'Images',
       'InsetText',
       'Label',
@@ -43,6 +51,7 @@ describe('Index', () => {
       'NavAZ',
       'Pagination',
       'Radios',
+      'RadiosContext',
       'ReadingWidth',
       'ReviewDate',
       'Row',
@@ -51,6 +60,9 @@ describe('Index', () => {
       'SkipLink',
       'SummaryList',
       'Table',
+      'TableContext',
+      'TableSection',
+      'TableSectionContext',
       'Tabs',
       'Tag',
       'Textarea',

src/components/content-presentation/details/Details.tsx

@@ -1,5 +1,5 @@
-import React, { ComponentPropsWithoutRef, FC, forwardRef } from 'react';
 import classNames from 'classnames';
+import React, { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
 
 export interface DetailsProps extends ComponentPropsWithoutRef<'details'> {
   expander?: boolean;
@@ -40,7 +40,7 @@ DetailsSummary.displayName = 'Details.Summary';
 DetailsText.displayName = 'Details.Text';
 ExpanderGroup.displayName = 'Details.ExpanderGroup';
 
-export default Object.assign(DetailsComponent, {
+export const Details = Object.assign(DetailsComponent, {
   Summary: DetailsSummary,
   Text: DetailsText,
   ExpanderGroup,

src/components/content-presentation/details/__tests__/Details.test.tsx

@@ -1,7 +1,7 @@
-import React, { createRef } from 'react';
 import { render } from '@testing-library/react';
-import { renderClient, renderServer } from '@util/components';
-import Details from '../';
+import React, { createRef } from 'react';
+import { Details } from '..';
+import { renderClient, renderServer } from '#util/components';
 
 describe('Details', () => {
   it('matches snapshot', async () => {

src/components/content-presentation/details/index.ts

@@ -1 +1 @@
-export { default } from './Details';
+export * from './Details';

src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx

@@ -1,14 +1,14 @@
+import classNames from 'classnames';
 import React, {
-  ComponentPropsWithoutRef,
-  FC,
   createContext,
-  useContext,
-  ReactNode,
   forwardRef,
+  useContext,
+  type ComponentPropsWithoutRef,
+  type FC,
+  type ReactNode,
 } from 'react';
-import classNames from 'classnames';
-import { Tick, Cross } from '@components/content-presentation/icons';
-import HeadingLevel, { HeadingLevelProps } from '@components/utils/HeadingLevel';
+import { CrossIcon, TickIcon } from '#components/content-presentation';
+import { HeadingLevel, type HeadingLevelProps } from '#components/utils';
 
 type ListType = 'do' | 'dont';
 
@@ -53,12 +53,12 @@ const DoAndDontItem: FC<DoAndDontItemProps> = ({ prefixText, listItemType, child
     <li {...rest}>
       {(listItemType || listItem) === 'do' ? (
         <>
-          <Tick />
+          <TickIcon />
           {actualPrefix}
         </>
       ) : (
         <>
-          <Cross />
+          <CrossIcon />
           {actualPrefix}
         </>
       )}
@@ -70,6 +70,6 @@ const DoAndDontItem: FC<DoAndDontItemProps> = ({ prefixText, listItemType, child
 DoAndDontListComponent.displayName = 'DoAndDontList';
 DoAndDontItem.displayName = 'DoAndDontList.Item';
 
-export default Object.assign(DoAndDontListComponent, {
+export const DoAndDontList = Object.assign(DoAndDontListComponent, {
   Item: DoAndDontItem,
 });

src/components/content-presentation/do-and-dont-list/__tests__/DoAndDontList.test.tsx

@@ -1,7 +1,7 @@
-import React, { createRef } from 'react';
 import { render } from '@testing-library/react';
-import DoAndDontList from '../';
-import { renderClient, renderServer } from '@util/components';
+import React, { createRef } from 'react';
+import { DoAndDontList } from '..';
+import { renderClient, renderServer } from '#util/components';
 
 describe('DoAndDontList', () => {
   describe('list type "do"', () => {

src/components/content-presentation/do-and-dont-list/index.ts

@@ -1 +1 @@
-export { default } from './DoAndDontList';
+export * from './DoAndDontList';

src/components/content-presentation/hero/Hero.tsx

@@ -1,7 +1,7 @@
-import React, { ComponentPropsWithoutRef, FC, forwardRef } from 'react';
 import classNames from 'classnames';
-import { Container, Row, Col } from '../../layout';
-import HeadingLevel, { HeadingLevelProps } from '@components/utils/HeadingLevel';
+import React, { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
+import { Col, Container, Row } from '#components/layout';
+import { HeadingLevel, type HeadingLevelProps } from '#components/utils';
 
 export interface HeroContentProps extends ComponentPropsWithoutRef<'div'> {
   hasImage: boolean;
@@ -73,7 +73,7 @@ HeroComponent.displayName = 'Hero';
 HeroHeading.displayName = 'Hero.Heading';
 HeroText.displayName = 'Hero.Text';
 
-export default Object.assign(HeroComponent, {
+export const Hero = Object.assign(HeroComponent, {
   Heading: HeroHeading,
   Text: HeroText,
 });