updated imports for HTMLProps and FC

Author: ricksmith130

package.json

@@ -74,6 +74,7 @@
   "license": "MIT",
   "packageManager": "[email protected]",
   "dependencies": {
+    "chalk": "^5.6.2",
     "classnames": "^2.5.1",
     "i": "^0.3.7",
     "lodash": "^4.17.21",

rollup.config.mjs

@@ -8,8 +8,8 @@ import tsPaths from 'rollup-plugin-tsconfig-paths';
 import preserveDirectives from 'rollup-plugin-preserve-directives';
 import postcss from 'rollup-plugin-postcss';
 
-import tsBuildConfig from './bundle-base.tsconfig.json' assert { type: 'json' };
-import packageJson from './package.json' assert { type: 'json' };
+import tsBuildConfig from './bundle-base.tsconfig.json' with { type: 'json' };
+import packageJson from './package.json' with { type: 'json' };
 
 // suppresses warnings printed to console as part of bundling components with directives present.
 const onWarnSuppression = {

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

@@ -1,14 +1,15 @@
 import React from 'react';
+import { HTMLProps } from 'react'
 import classNames from 'classnames';
 
-interface DetailsProps extends React.HTMLProps<HTMLDetailsElement> {
+interface DetailsProps extends HTMLProps<HTMLDetailsElement> {
   expander?: boolean;
 }
 
 interface Details extends React.FC<DetailsProps> {
-  Summary: React.FC<React.HTMLProps<HTMLDivElement>>;
-  Text: React.FC<React.HTMLProps<HTMLDivElement>>;
-  ExpanderGroup: React.FC<React.HTMLProps<HTMLDivElement>>;
+  Summary: React.FC<HTMLProps<HTMLDivElement>>;
+  Text: React.FC<HTMLProps<HTMLDivElement>>;
+  ExpanderGroup: React.FC<HTMLProps<HTMLDivElement>>;
 }
 
 // TODO: Check if standard NHS.UK polyfill "details.polyfill.js" is required
@@ -19,17 +20,17 @@ const Details: Details = ({ className, expander, ...rest }: any) => (
   />
 );
 
-const DetailsSummary: React.FC<React.HTMLProps<HTMLDivElement>> = ({ className, children, ...rest }) => (
+const DetailsSummary: React.FC<HTMLProps<HTMLDivElement>> = ({ className, children, ...rest }) => (
   <summary className={classNames('nhsuk-details__summary', className)} {...rest}>
     <span className="nhsuk-details__summary-text">{children}</span>
   </summary>
 );
 
-const DetailsText: React.FC<React.HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
+const DetailsText: React.FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
   <div className={classNames('nhsuk-details__text', className)} {...rest} />
 );
 
-const ExpanderGroup: React.FC<React.HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
+const ExpanderGroup: React.FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
   <div className={classNames('nhsuk-expander-group', className)} {...rest} />
 );
 

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

@@ -1,12 +1,12 @@
 'use client';
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, HTMLProps } from 'react';
 import classNames from 'classnames';
 import { Tick, Cross } from '@components/content-presentation/icons';
 import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
 
 type ListType = 'do' | 'dont';
 
-interface DoAndDontListProps extends React.HTMLProps<HTMLDivElement> {
+interface DoAndDontListProps extends HTMLProps<HTMLDivElement> {
   listType: ListType;
   heading?: string;
   headingLevel?: HeadingLevelType;
@@ -44,7 +44,7 @@ const DoAndDontList: DoAndDontList = ({
   );
 };
 
-interface DoAndDontItemProps extends React.HTMLProps<HTMLLIElement> {
+interface DoAndDontItemProps extends HTMLProps<HTMLLIElement> {
   listItemType?: ListType;
   prefixText?: React.ReactNode;
 }

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import React, { HTMLProps } from 'react';
 import classNames from 'classnames';
 import { Container, Row, Col } from '../../layout';
 import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel';
 
-interface HeroContentProps extends React.HTMLProps<HTMLDivElement> {
+interface HeroContentProps extends HTMLProps<HTMLDivElement> {
   hasImage: boolean;
 }
 
@@ -29,7 +29,7 @@ const HeroContent: React.FC<HeroContentProps> = ({ children, hasImage }) => {
   );
 };
 
-interface HeroHeadingProps extends React.HTMLProps<HTMLHeadingElement> {
+interface HeroHeadingProps extends HTMLProps<HTMLHeadingElement> {
   headingLevel?: HeadingLevelType;
 }
 
@@ -41,17 +41,17 @@ const HeroHeading: React.FC<HeroHeadingProps> = ({ className, headingLevel = 'h1
   />
 );
 
-const HeroText: React.FC<React.HTMLProps<HTMLParagraphElement>> = ({ className, ...rest }) => (
+const HeroText: React.FC<HTMLProps<HTMLParagraphElement>> = ({ className, ...rest }) => (
   <p className={classNames('nhsuk-body-l nhsuk-u-margin-bottom-0', className)} {...rest} />
 );
 
-interface HeroProps extends React.HTMLProps<HTMLDivElement> {
+interface HeroProps extends HTMLProps<HTMLDivElement> {
   imageSrc?: string;
 }
 
 interface Hero extends React.FC<HeroProps> {
   Heading: React.FC<HeroHeadingProps>;
-  Text: React.FC<React.HTMLProps<HTMLParagraphElement>>;
+  Text: React.FC<HTMLProps<HTMLParagraphElement>>;
 }
 
 const Hero: Hero = ({ className, children, imageSrc, ...rest }) => (

src/components/content-presentation/icons/BaseIcon.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { HTMLProps, FC } from 'react';
 import classNames from 'classnames';
 
-export interface BaseIconSVGProps extends React.HTMLProps<SVGSVGElement> {
+export interface BaseIconSVGProps extends HTMLProps<SVGSVGElement> {
   iconType?: string;
   crossOrigin?: '' | 'anonymous' | 'use-credentials';
 }
 
-export const BaseIconSVG: React.FC<BaseIconSVGProps> = ({
+export const BaseIconSVG: FC<BaseIconSVGProps> = ({
   className,
   children,
   height = 34,

src/components/content-presentation/icons/__tests__/Icons.test.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
+import { HTMLProps, FC } from 'react';
 import { render } from '@testing-library/react';
 import * as Icons from '../';
 
 describe('Icons', () => {
   it('all icons match snapshots', () => {
     Object.entries(Icons).forEach((icon) => {
       const [name, Component] = icon;
-      const Icon = Component as React.FC<React.HTMLProps<SVGSVGElement>>;
+      const Icon = Component as FC<HTMLProps<SVGSVGElement>>;
       const { container } = render(<Icon />);
 
       expect(container).toMatchSnapshot(name);

src/components/content-presentation/images/Images.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
+import { FC, HTMLProps } from 'react';
 import classNames from 'classnames';
 
-interface ImageProps extends React.HTMLProps<HTMLImageElement> {
+interface ImageProps extends HTMLProps<HTMLImageElement> {
   // Overriding the default crossOrigin the default is crossOrigin: string | undefined
   // which causes a typescript "incompatible types" error.
   crossOrigin?: 'anonymous' | 'use-credentials' | undefined;
   caption?: string;
 }
 
-const Images: React.FC<ImageProps> = ({ className, caption, ...rest }) => (
+const Images: FC<ImageProps> = ({ className, caption, ...rest }) => (
   <figure className="nhsuk-image">
     {/* eslint-disable-next-line jsx-a11y/alt-text */}
     <img className={classNames('nhsuk-image__img', className)} {...rest} />

src/components/content-presentation/inset-text/InsetText.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { FC, HTMLProps } from 'react';
 import classNames from 'classnames';
 
-interface InsetTextProps extends React.HTMLProps<HTMLDivElement> {
+interface InsetTextProps extends HTMLProps<HTMLDivElement> {
   visuallyHiddenText?: string | false;
 }
 
-const InsetText: React.FC<InsetTextProps> = ({
+const InsetText: FC<InsetTextProps> = ({
   className,
   children,
   visuallyHiddenText = 'Information: ',

src/components/content-presentation/summary-list/SummaryList.tsx

@@ -1,31 +1,31 @@
-import React from 'react';
+import React, { FC, HTMLProps } from 'react';
 import classNames from 'classnames';
 
-const SummaryListRow: React.FC<React.HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
+const SummaryListRow: FC<HTMLProps<HTMLDivElement>> = ({ className, ...rest }) => (
   <div className={classNames('nhsuk-summary-list__row', className)} {...rest} />
 );
 
-const SummaryListKey: React.FC<React.HTMLProps<HTMLDListElement>> = ({ className, ...rest }) => (
+const SummaryListKey: FC<HTMLProps<HTMLDListElement>> = ({ className, ...rest }) => (
   <dt className={classNames('nhsuk-summary-list__key', className)} {...rest} />
 );
 
-const SummaryListValue: React.FC<React.HTMLProps<HTMLDListElement>> = ({ className, ...rest }) => (
+const SummaryListValue: FC<HTMLProps<HTMLDListElement>> = ({ className, ...rest }) => (
   <dd className={classNames('nhsuk-summary-list__value', className)} {...rest} />
 );
 
-const SummaryListActions: React.FC<React.HTMLProps<HTMLDListElement>> = ({ className, ...rest }) => (
+const SummaryListActions: FC<HTMLProps<HTMLDListElement>> = ({ className, ...rest }) => (
   <dd className={classNames('nhsuk-summary-list__actions', className)} {...rest} />
 );
 
-interface SummaryListProps extends React.HTMLProps<HTMLDListElement> {
+interface SummaryListProps extends HTMLProps<HTMLDListElement> {
   noBorder?: boolean;
 }
 
-interface SummaryList extends React.FC<SummaryListProps> {
-  Row: React.FC<React.HTMLProps<HTMLDivElement>>;
-  Key: React.FC<React.HTMLProps<HTMLDListElement>>;
-  Value: React.FC<React.HTMLProps<HTMLDListElement>>;
-  Actions: React.FC<React.HTMLProps<HTMLDListElement>>;
+interface SummaryList extends FC<SummaryListProps> {
+  Row: FC<HTMLProps<HTMLDivElement>>;
+  Key: FC<HTMLProps<HTMLDListElement>>;
+  Value: FC<HTMLProps<HTMLDListElement>>;
+  Actions: FC<HTMLProps<HTMLDListElement>>;
 }
 
 const SummaryList: SummaryList = ({ className, noBorder, ...rest }) => (