Add mandatory ES module file extensions to sources

Author: colinrotherham

.eslintrc.cjs

@@ -27,6 +27,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
   ],
   rules: {
+    'import/no-unresolved': 'off',
     'react/prop-types': 0,
     'jsx-a11y/anchor-has-content': 0,
     'jsx-a11y/alt-text': 0,

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

@@ -1 +1 @@
-export * from './Details';
+export * from './Details.js';

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

@@ -7,8 +7,8 @@ import {
   type FC,
   type ReactNode,
 } from 'react';
-import { CrossIcon, TickIcon } from '../icons';
-import { HeadingLevel, type HeadingLevelProps } from '#components/utils/HeadingLevel';
+import { CrossIcon, TickIcon } from '../icons/index.js';
+import { HeadingLevel, type HeadingLevelProps } from '#components/utils/HeadingLevel.js';
 
 type ListType = 'do' | 'dont';
 

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

@@ -1 +1 @@
-export * from './DoAndDontList';
+export * from './DoAndDontList.js';

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

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
-import { Col, Container, Row } from '#components/layout';
-import { HeadingLevel, type HeadingLevelProps } from '#components/utils/HeadingLevel';
+import { Col, Container, Row } from '#components/layout/index.js';
+import { HeadingLevel, type HeadingLevelProps } from '#components/utils/HeadingLevel.js';
 
 export interface HeroContentProps extends ComponentPropsWithoutRef<'div'> {
   hasImage: boolean;

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

@@ -1 +1 @@
-export * from './Hero';
+export * from './Hero.js';

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

@@ -1,2 +1,2 @@
-export * from './individual';
-export * from './Icon';
+export * from './individual/index.js';
+export * from './Icon.js';

src/components/content-presentation/icons/individual/ArrowLeftIcon.tsx

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import { Icon, type IconProps } from '../Icon';
+import { Icon, type IconProps } from '../Icon.js';
 
 export const ArrowLeftIcon: FC<IconProps> = (props) => (
   <Icon modifier="arrow-left" {...props}>

src/components/content-presentation/icons/individual/ArrowRightCircleIcon.tsx

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import { Icon, type IconProps } from '../Icon';
+import { Icon, type IconProps } from '../Icon.js';
 
 export const ArrowRightCircleIcon: FC<IconProps> = (props) => (
   <Icon modifier="arrow-right-circle" {...props}>

src/components/content-presentation/icons/individual/ArrowRightIcon.tsx

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import { Icon, type IconProps } from '../Icon';
+import { Icon, type IconProps } from '../Icon.js';
 
 export const ArrowRightIcon: FC<IconProps> = (props) => (
   <Icon modifier="arrow-right" {...props}>