diff --git a/.eslintrc.js b/.eslintrc.js index 97688586..af6ce11c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,41 +1,41 @@ module.exports = { - parserOptions: { - project: './tsconfig.json', - tsconfigRootDir: __dirname, - }, - env: { - browser: true, - jest: true, - }, - settings: { - 'import/resolver': { - typescript: {}, - }, - react: { - version: 'detect', - }, - }, - extends: [ - 'plugin:react/recommended', - 'plugin:@typescript-eslint/recommended', - 'prettier', - 'plugin:import/errors', - 'plugin:import/warnings', - 'plugin:import/typescript', - 'plugin:jsx-a11y/recommended', - 'plugin:react-hooks/recommended', - ], - rules: { - 'react/prop-types': 0, - 'jsx-a11y/anchor-has-content': 0, - 'jsx-a11y/alt-text': 0, - 'jsx-a11y/heading-has-content': 0, - 'react-hooks/exhaustive-deps': 0, - }, - overrides: [ - { - files: ['*.stories.tsx'], - rules: { '@typescript-eslint/no-unused-vars': 'off' }, - }, - ], + parserOptions: { + project: './tsconfig.json', + tsconfigRootDir: __dirname, + }, + env: { + browser: true, + jest: true, + }, + settings: { + 'import/resolver': { + typescript: {}, + }, + react: { + version: 'detect', + }, + }, + extends: [ + 'plugin:react/recommended', + 'plugin:@typescript-eslint/recommended', + 'prettier', + 'plugin:import/errors', + 'plugin:import/warnings', + 'plugin:import/typescript', + 'plugin:jsx-a11y/recommended', + 'plugin:react-hooks/recommended', + 'plugin:storybook/recommended'], + rules: { + 'react/prop-types': 0, + 'jsx-a11y/anchor-has-content': 0, + 'jsx-a11y/alt-text': 0, + 'jsx-a11y/heading-has-content': 0, + 'react-hooks/exhaustive-deps': 0, + }, + overrides: [ + { + files: ['*.stories.tsx'], + rules: { '@typescript-eslint/no-unused-vars': 'off' }, + }, + ], }; diff --git a/.storybook/main.ts b/.storybook/main.ts index f42bd8fe..a7e05d76 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -3,22 +3,35 @@ import { mergeConfig } from 'vite'; import tsConfigPaths from 'vite-tsconfig-paths'; const config: StorybookConfig = { - stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'], - addons: ['@storybook/addon-links', '@storybook/addon-essentials'], - framework: { - name: '@storybook/react-vite', - options: {}, - }, - docs: { - autodocs: true, - }, - typescript: { - reactDocgen: 'react-docgen-typescript', - }, - viteFinal(config) { - return mergeConfig(config, { - plugins: [tsConfigPaths()], - }); - }, + stories: ['../stories/**/*.stories.@(ts|tsx)', '../stories/**/*.mdx'], + addons: ['@storybook/addon-links', '@storybook/addon-docs'], + framework: { + name: '@storybook/react-vite', + options: {}, + }, + + typescript: { + reactDocgen: 'react-docgen-typescript', + }, + + viteFinal(config) { + return mergeConfig(config, { + plugins: [tsConfigPaths()], + css: { + preprocessorOptions: { + scss: { + // Hide deprecation noise coming from dependencies like nhsuk-frontend + quietDeps: true, + // Specifically silence the Dart Sass "misplaced-rest" deprecation + // (Type cast to any in case your TS types don't include this yet) + silenceDeprecations: ['misplaced-rest'], + // Optional: ensure node_modules is in the Sass load path + // includePaths: ['node_modules'], + } as any, + }, + }, + }); + } }; + export default config; diff --git a/.storybook/manager.ts b/.storybook/manager.ts index 44bea631..ee4aa802 100644 --- a/.storybook/manager.ts +++ b/.storybook/manager.ts @@ -1,4 +1,4 @@ -import { addons } from '@storybook/manager-api'; +import { addons } from 'storybook/manager-api'; import nhsTheme from './theme'; import { startCase, upperFirst } from "lodash"; diff --git a/.storybook/preview.ts b/.storybook/preview.mts similarity index 81% rename from .storybook/preview.ts rename to .storybook/preview.mts index fce54dde..3879ce94 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.mts @@ -1,5 +1,5 @@ import './storybook.scss'; -import { Preview } from '@storybook/react'; +import { Preview } from '@storybook/react-vite'; const preview: Preview = { parameters: { @@ -10,6 +10,7 @@ const preview: Preview = { 'Welcome', 'Migration Guides', 'Form Elements', + 'Extensions', 'Content Presentation', 'Navigation', 'Layout', @@ -18,5 +19,7 @@ const preview: Preview = { }, }, }, + + tags: ['autodocs'] }; export default preview; diff --git a/.storybook/storybook.scss b/.storybook/storybook.scss index 5e3e892c..2b22b51b 100644 --- a/.storybook/storybook.scss +++ b/.storybook/storybook.scss @@ -1,5 +1,7 @@ // Allow current nhsuk styles to override legacy -@import '../node_modules/nhsuk-frontend/packages/nhsuk.scss'; +@use '../node_modules/nhsuk-frontend/packages/nhsuk.scss'; +@use '../src/styles/core.scss'; +@use '../src/styles/variables.scss'; .tag-wrapper { display: flex; diff --git a/.storybook/theme.ts b/.storybook/theme.ts index 5d3ea651..471d6a03 100644 --- a/.storybook/theme.ts +++ b/.storybook/theme.ts @@ -1,5 +1,8 @@ -import { create } from '@storybook/theming/create'; -const version = require('../package.json').version; +import { create } from 'storybook/theming/create'; +import packageJson from '../package.json' assert { type: 'json' }; + +const version = packageJson.version; + export default create({ base: 'light', diff --git a/.vscode/settings.json b/.vscode/settings.json index 667ff68e..da13668f 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -6,11 +6,25 @@ "source.fixAll": "explicit", "source.fixAll.eslint": "explicit" }, - "eslint.validate": ["javascript", "typescript"], + "eslint.validate": [ + "javascript", + "typescript" + ], "eslint.codeAction.showDocumentation": { "enable": true }, "eslint.alwaysShowStatus": true, - "eslint.workingDirectories": ["src"], - "typescript.tsdk": "node_modules/typescript/lib" -} + "eslint.workingDirectories": [ + "src" + ], + "typescript.tsdk": "node_modules/typescript/lib", + "[jsonc]": { + "editor.defaultFormatter": "vscode.json-language-features" + }, + "[typescriptreact]": { + "editor.defaultFormatter": "vscode.typescript-language-features" + }, + "[javascript]": { + "editor.defaultFormatter": "vscode.typescript-language-features" + } +} \ No newline at end of file diff --git a/bundle-base.tsconfig.json b/bundle-base.tsconfig.json index 6bc40994..803d63f7 100644 --- a/bundle-base.tsconfig.json +++ b/bundle-base.tsconfig.json @@ -18,6 +18,7 @@ "outDir": "./dist", "paths": { "@components/*": ["src/components/*"], + "@extensions/*": ["src/components/extension/*"], "@content-presentation/*": ["src/components/content-presentation/*"], "@form-elements/*": ["src/components/form-elements/*"], "@navigation/*": ["src/components/navigation/*"], diff --git a/package.json b/package.json index 671def70..0f4a3559 100644 --- a/package.json +++ b/package.json @@ -9,87 +9,81 @@ "lib" ], "main": "dist/cjs/index.js", - "module": "dist/esm", + "module": "dist/esm/index.js", + "type": "module", "types": "dist/index.d.ts", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/esm/index.js", + "require": "./dist/cjs/index.js" + } + }, + "sideEffects": false, "scripts": { - "cleanup": "rm -rf dist/ > /dev/null && rm -rf lib/ > /dev/null", - "storybook": "storybook dev -p 6006", + "cleanup": "rm -rf dist/ lib/ >/dev/null 2>&1 || true", "build": "yarn cleanup && rollup -c", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build", "test": "jest", "test:watch": "jest --watch", "test:ci": "jest --coverage", "lint": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}'", "lint:fix": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}' --fix", "lint:ci": "eslint 'src/**/*.{js,ts,tsx}' 'stories/**/*.{js,ts,tsx}'", - "build-storybook": "storybook build", "prepublishOnly": "yarn lint:ci && yarn test:ci && yarn storybook --smoke-test" }, - "license": "MIT", + "peerDependencies": { + "react": "^19.0.0", + "react-dom": "^19.0.0" + }, "devDependencies": { "@babel/core": "^7.24.1", - "@babel/plugin-transform-modules-commonjs": "^7.23.3", "@rollup/plugin-commonjs": "^25.0.7", "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-terser": "^0.4.4", "@rollup/plugin-typescript": "^11.1.6", - "@storybook/addon-actions": "^8.0.5", - "@storybook/addon-essentials": "^8.0.5", - "@storybook/addon-links": "^8.0.5", - "@storybook/blocks": "^8.0.5", - "@storybook/manager-api": "^8.0.5", - "@storybook/preview-api": "^8.0.5", - "@storybook/react": "^8.0.5", - "@storybook/react-vite": "^8.0.5", - "@storybook/theming": "^8.0.5", - "@testing-library/jest-dom": "^6.4.2", - "@testing-library/react": "^14.2.1", - "@types/babel__core": "^7", - "@types/jest": "^29.5.12", - "@types/jest-axe": "^3.5.9", - "@types/node": "^15.0.2", - "@types/react": "^18.2.60", + "@storybook/addon-docs": "9.1.3", + "@storybook/addon-links": "^9.1.3", + "@storybook/react-vite": "^9.1.3", + "@testing-library/react": "^16.3.0", + "@types/lodash": "^4", + "@types/react": "^19.1.12", "@types/react-dom": "^18.2.19", - "@types/rollup-plugin-peer-deps-external": "^2.2.1", - "@typescript-eslint/eslint-plugin": "^7.1.0", - "@typescript-eslint/parser": "^7.1.0", - "babel-jest": "^29.7.0", - "chromatic": "^6.17.3", - "eslint": "^8.57.0", - "eslint-config-airbnb": "^19.0.4", - "eslint-config-prettier": "^9.1.0", - "eslint-import-resolver-typescript": "^3.6.1", - "eslint-plugin-import": "^2.29.1", - "eslint-plugin-jsx-a11y": "^6.8.0", - "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-react": "^7.33.2", - "eslint-plugin-react-hooks": "^4.6.0", - "jest": "^29.7.0", - "jest-axe": "^8.0.0", - "jest-environment-jsdom": "^29.7.0", + "@types/stylus": "^0", + "eslint-plugin-storybook": "9.1.3", + "less": "^4.4.1", "nhsuk-frontend": "^9.0.1", - "prettier": "^3.2.5", - "react": "^18.2.0", - "react-dom": "^18.2.0", - "regenerator-runtime": "^0.13.7", + "react": "^19.1.1", + "react-dom": "^19.1.1", "rollup": "^4.13.0", "rollup-plugin-dts": "^6.1.0", "rollup-plugin-peer-deps-external": "^2.2.4", + "rollup-plugin-postcss": "^4.0.2", "rollup-plugin-preserve-directives": "^0.4.0", "rollup-plugin-tsconfig-paths": "^1.5.2", - "sass": "^1.53.0", - "storybook": "^8.0.5", - "ts-jest": "^29.1.2", + "sass": "^1.91.0", + "sass-embedded": "^1.92.1", + "storybook": "^9.1.3", + "stylus": "^0.64.0", + "tslib": "^2.8.1", "typescript": "5.3.3", - "vite": "^4.5.3", + "vite": "^7.1.3", "vite-tsconfig-paths": "^4.3.2" }, + "license": "MIT", + "packageManager": "yarn@4.1.1", "dependencies": { - "classnames": "^2.2.6" - }, - "peerDependencies": { - "nhsuk-frontend": ">=9.0.0 <10.0.0", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" + "classnames": "^2.5.1", + "i": "^0.3.7", + "lodash": "^4.17.21", + "npm": "^11.6.0" }, - "packageManager": "yarn@4.1.1" + "typesVersions": { + "*": { + "react": [ + "node_modules/react/index.d.ts" + ] + } + } } diff --git a/rollup.config.mjs b/rollup.config.mjs index efbc3a58..658f7709 100644 --- a/rollup.config.mjs +++ b/rollup.config.mjs @@ -6,84 +6,107 @@ import external from 'rollup-plugin-peer-deps-external'; import { dts } from 'rollup-plugin-dts'; 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' }; // suppresses warnings printed to console as part of bundling components with directives present. const onWarnSuppression = { - onwarn(warning, warn) { - if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes(`"use client"`)) { - return; - } - warn(warning); - }, + onwarn(warning, warn) { + if (warning.code === 'MODULE_LEVEL_DIRECTIVE' && warning.message.includes(`"use client"`)) return; + warn(warning); + }, }; -const commonPlugins = [external(), tsPaths(), resolve(), commonjs()]; +const commonPlugins = [ + external(), + tsPaths(), + resolve({ extensions: ['.mjs', '.js', '.ts', '.tsx'] }), + commonjs(), + postcss({ + extract: true, + modules: false, + minimize: false, + use: { sass: { quietDeps: true } }, + includePaths: ['node_modules'], + }), +]; + +const jsOnlyPreserveDirectives = preserveDirectives({ + include: ['**/*.{js,jsx,ts,tsx,mjs,cjs}'], + exclude: ['**/*.{css,scss,sass,less,styl}'], +}); export default [ - // cjs export - { - input: 'src/index.ts', - output: [ - { - file: packageJson.main, - format: 'cjs', - sourcemap: true, - }, - ], - plugins: [ - ...commonPlugins, - typescript({ - tsconfig: 'bundle-base.tsconfig.json', - compilerOptions: { - declaration: false, - }, - }), - terser(), - ], - ...onWarnSuppression, - }, - // esm export - { - input: 'src/index.ts', - output: [ - { - dir: packageJson.module, - format: 'esm', - sourcemap: true, - preserveModules: true, - preserveModulesRoot: 'src', - }, - ], - plugins: [ - ...commonPlugins, - typescript({ - tsconfig: 'bundle-base.tsconfig.json', - compilerOptions: { - declaration: true, - declarationDir: 'dist/esm', - emitDeclarationOnly: true, - outDir: 'dist/esm', - }, - }), - preserveDirectives(), - terser({ compress: { directives: false } }), - ], - ...onWarnSuppression, - }, - // type bundling - { - input: 'src/index.ts', - output: [{ file: 'dist/index.d.ts', format: 'esm' }], - external: [], - plugins: [ - dts({ - compilerOptions: { - paths: tsBuildConfig.compilerOptions.paths, - }, - }), - ], - }, + // cjs export + { + input: 'src/index.ts', + output: [{ file: packageJson.main, format: 'cjs', sourcemap: true }], + plugins: [ + ...commonPlugins, + typescript({ + tsconfig: 'bundle-base.tsconfig.json', + compilerOptions: { declaration: false }, + }), + terser(), + ], + ...onWarnSuppression, + }, + + // esm export + { + input: 'src/index.ts', + output: [ + { + dir: packageJson.module, + format: 'esm', + sourcemap: true, + preserveModules: true, + preserveModulesRoot: 'src', + }, + ], + plugins: [ + ...commonPlugins, + typescript({ + tsconfig: 'bundle-base.tsconfig.json', + compilerOptions: { + declaration: false, + emitDeclarationOnly: false, + outDir: undefined, + }, + }), + jsOnlyPreserveDirectives, + terser({ compress: { directives: false } }), + ], + ...onWarnSuppression, + }, + + // d.ts bundle ⬅️ only changes are here + { + input: 'src/index.ts', + output: [{ file: 'dist/index.d.ts', format: 'es' }], + + // Keep styles and React types external so dts doesn't try to inline them + external: [ + /\.s?css$/i, + /\.less$/i, + /\.styl(us)?$/i, + /^react($|\/)/, + /^react-dom($|\/)/, + /^@types\/react($|\/)/, + /^@types\/react-dom($|\/)/, + ], + + plugins: [ + dts({ + respectExternal: true, + // helps avoid lib type conflicts; also carry through your tsconfig paths + compilerOptions: { + skipLibCheck: true, + paths: tsBuildConfig.compilerOptions?.paths ?? {}, + }, + }), + ], + }, ]; diff --git a/src/components/content-presentation/details/Details.tsx b/src/components/content-presentation/details/Details.tsx index 64a07302..baf79a01 100644 --- a/src/components/content-presentation/details/Details.tsx +++ b/src/components/content-presentation/details/Details.tsx @@ -1,35 +1,35 @@ -import React, { FC, HTMLProps } from 'react'; +import React from 'react'; import classNames from 'classnames'; -interface DetailsProps extends HTMLProps { +interface DetailsProps extends React.HTMLProps { expander?: boolean; } -interface Details extends FC { - Summary: FC>; - Text: FC>; - ExpanderGroup: FC>; +interface Details extends React.FC { + Summary: React.FC>; + Text: React.FC>; + ExpanderGroup: React.FC>; } // TODO: Check if standard NHS.UK polyfill "details.polyfill.js" is required -const Details: Details = ({ className, expander, ...rest }) => ( +const Details: Details = ({ className, expander, ...rest }: any) => (
); -const DetailsSummary: FC> = ({ className, children, ...rest }) => ( +const DetailsSummary: React.FC> = ({ className, children, ...rest }) => ( {children} ); -const DetailsText: FC> = ({ className, ...rest }) => ( +const DetailsText: React.FC> = ({ className, ...rest }) => (
); -const ExpanderGroup: FC> = ({ className, ...rest }) => ( +const ExpanderGroup: React.FC> = ({ className, ...rest }) => (
); diff --git a/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx b/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx index 28c037a2..9573b6b0 100644 --- a/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx +++ b/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx @@ -1,19 +1,19 @@ 'use client'; -import React, { FC, HTMLProps, createContext, useContext, ReactNode } from 'react'; +import React, { createContext, useContext } 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 HTMLProps { +interface DoAndDontListProps extends React.HTMLProps { listType: ListType; heading?: string; headingLevel?: HeadingLevelType; } -interface DoAndDontList extends FC { - Item: FC; +interface DoAndDontList extends React.FC { + Item: React.FC; } const DoAndDontListContext = createContext('do'); @@ -44,12 +44,12 @@ const DoAndDontList: DoAndDontList = ({ ); }; -interface DoAndDontItemProps extends HTMLProps { +interface DoAndDontItemProps extends React.HTMLProps { listItemType?: ListType; - prefixText?: ReactNode; + prefixText?: React.ReactNode; } -const DoAndDontItem: FC = ({ prefixText, listItemType, children, ...rest }) => { +const DoAndDontItem: React.FC = ({ prefixText, listItemType, children, ...rest }) => { const listItem = useContext(DoAndDontListContext); const defaultPrefix = (listItemType || listItem) === 'do' ? null : 'do not '; const actualPrefix = prefixText === undefined ? defaultPrefix : prefixText; diff --git a/src/components/content-presentation/hero/Hero.tsx b/src/components/content-presentation/hero/Hero.tsx index 09a60434..f5bedc43 100644 --- a/src/components/content-presentation/hero/Hero.tsx +++ b/src/components/content-presentation/hero/Hero.tsx @@ -1,13 +1,13 @@ -import React, { FC, HTMLProps } from 'react'; +import React from 'react'; import classNames from 'classnames'; import { Container, Row, Col } from '../../layout'; import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel'; -interface HeroContentProps extends HTMLProps { +interface HeroContentProps extends React.HTMLProps { hasImage: boolean; } -const HeroContent: FC = ({ children, hasImage }) => { +const HeroContent: React.FC = ({ children, hasImage }) => { if (!children) { return null; } @@ -29,11 +29,11 @@ const HeroContent: FC = ({ children, hasImage }) => { ); }; -interface HeroHeadingProps extends HTMLProps { +interface HeroHeadingProps extends React.HTMLProps { headingLevel?: HeadingLevelType; } -const HeroHeading: FC = ({ className, headingLevel = 'h1', ...rest }) => ( +const HeroHeading: React.FC = ({ className, headingLevel = 'h1', ...rest }) => ( = ({ className, headingLevel = 'h1', ... /> ); -const HeroText: FC> = ({ className, ...rest }) => ( +const HeroText: React.FC> = ({ className, ...rest }) => (

); -interface HeroProps extends HTMLProps { +interface HeroProps extends React.HTMLProps { imageSrc?: string; } -interface Hero extends FC { - Heading: FC; - Text: FC>; +interface Hero extends React.FC { + Heading: React.FC; + Text: React.FC>; } const Hero: Hero = ({ className, children, imageSrc, ...rest }) => ( diff --git a/src/components/content-presentation/icons/BaseIcon.tsx b/src/components/content-presentation/icons/BaseIcon.tsx index ed865eb2..1d656d4a 100644 --- a/src/components/content-presentation/icons/BaseIcon.tsx +++ b/src/components/content-presentation/icons/BaseIcon.tsx @@ -1,12 +1,12 @@ -import React, { FC, HTMLProps } from 'react'; +import React from 'react'; import classNames from 'classnames'; -export interface BaseIconSVGProps extends HTMLProps { +export interface BaseIconSVGProps extends React.HTMLProps { iconType?: string; crossOrigin?: '' | 'anonymous' | 'use-credentials'; } -export const BaseIconSVG: FC = ({ +export const BaseIconSVG: React.FC = ({ className, children, height = 34, diff --git a/src/components/content-presentation/icons/individual/ArrowLeft.tsx b/src/components/content-presentation/icons/individual/ArrowLeft.tsx index c8ad007b..c8ef6e04 100644 --- a/src/components/content-presentation/icons/individual/ArrowLeft.tsx +++ b/src/components/content-presentation/icons/individual/ArrowLeft.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React from 'react'; import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon'; -export const ArrowLeft: FC = (props) => ( +export const ArrowLeft: React.FC = (props) => ( diff --git a/src/components/content-presentation/icons/individual/ArrowRight.tsx b/src/components/content-presentation/icons/individual/ArrowRight.tsx index 680b60b8..ae0c1953 100644 --- a/src/components/content-presentation/icons/individual/ArrowRight.tsx +++ b/src/components/content-presentation/icons/individual/ArrowRight.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React from 'react'; import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon'; -export const ArrowRight: FC = (props) => ( +export const ArrowRight: React.FC = (props) => ( diff --git a/src/components/content-presentation/icons/individual/ArrowRightCircle.tsx b/src/components/content-presentation/icons/individual/ArrowRightCircle.tsx index a75a7258..25beaa6a 100644 --- a/src/components/content-presentation/icons/individual/ArrowRightCircle.tsx +++ b/src/components/content-presentation/icons/individual/ArrowRightCircle.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React from 'react'; import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon'; -export const ArrowRightCircle: FC = (props) => ( +export const ArrowRightCircle: React.FC = (props) => ( diff --git a/src/components/content-presentation/icons/individual/ChevronDown.tsx b/src/components/content-presentation/icons/individual/ChevronDown.tsx index 55b69c92..de8bd50a 100644 --- a/src/components/content-presentation/icons/individual/ChevronDown.tsx +++ b/src/components/content-presentation/icons/individual/ChevronDown.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React from 'react'; import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon'; -export const ChevronDown: FC = (props) => ( +export const ChevronDown: React.FC = (props) => ( diff --git a/src/components/content-presentation/icons/individual/ChevronLeft.tsx b/src/components/content-presentation/icons/individual/ChevronLeft.tsx index 8d90ae26..82b92629 100644 --- a/src/components/content-presentation/icons/individual/ChevronLeft.tsx +++ b/src/components/content-presentation/icons/individual/ChevronLeft.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React from 'react'; import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon'; -export const ChevronLeft: FC = (props) => ( +export const ChevronLeft: React.FC = (props) => ( diff --git a/src/components/content-presentation/icons/individual/ChevronRight.tsx b/src/components/content-presentation/icons/individual/ChevronRight.tsx index a9e812e5..1cbe05ed 100644 --- a/src/components/content-presentation/icons/individual/ChevronRight.tsx +++ b/src/components/content-presentation/icons/individual/ChevronRight.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React from 'react'; import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon'; -export const ChevronRight: FC = (props) => ( +export const ChevronRight: React.FC = (props) => ( diff --git a/src/components/content-presentation/icons/individual/ChevronRightCircle.tsx b/src/components/content-presentation/icons/individual/ChevronRightCircle.tsx index 348517b1..8418cd79 100644 --- a/src/components/content-presentation/icons/individual/ChevronRightCircle.tsx +++ b/src/components/content-presentation/icons/individual/ChevronRightCircle.tsx @@ -1,6 +1,6 @@ -import React, { FC } from 'react'; +import React from 'react'; -export const ChevronRightCircle: FC = () => ( +export const ChevronRightCircle: React.FC = () => ( = (props) => ( +export const Close: React.FC = (props) => ( diff --git a/src/components/content-presentation/icons/individual/Cross.tsx b/src/components/content-presentation/icons/individual/Cross.tsx index 3a835175..0928b603 100644 --- a/src/components/content-presentation/icons/individual/Cross.tsx +++ b/src/components/content-presentation/icons/individual/Cross.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React from 'react'; import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon'; -export const Cross: FC = (props) => ( +export const Cross: React.FC = (props) => ( = ({ height = 1, width = 19, ...rest }) => ( +export const Emdash: React.FC = ({ height = 1, width = 19, ...rest }) => ( diff --git a/src/components/content-presentation/icons/individual/Minus.tsx b/src/components/content-presentation/icons/individual/Minus.tsx index a8fa4199..83018e75 100644 --- a/src/components/content-presentation/icons/individual/Minus.tsx +++ b/src/components/content-presentation/icons/individual/Minus.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React from 'react'; import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon'; -export const Minus: FC = (props) => ( +export const Minus: React.FC = (props) => ( = (props) => ( +export const Plus: React.FC = (props) => ( = (props) => ( +export const Search: React.FC = (props) => ( diff --git a/src/components/content-presentation/icons/individual/SmallEmdash.tsx b/src/components/content-presentation/icons/individual/SmallEmdash.tsx index 341d409d..db625d96 100644 --- a/src/components/content-presentation/icons/individual/SmallEmdash.tsx +++ b/src/components/content-presentation/icons/individual/SmallEmdash.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React from 'react'; import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon'; -export const SmallEmdash: FC = ({ height = 1, width = 16, ...rest }) => ( +export const SmallEmdash: React.FC = ({ height = 1, width = 16, ...rest }) => ( diff --git a/src/components/content-presentation/icons/individual/Tick.tsx b/src/components/content-presentation/icons/individual/Tick.tsx index 2617a00c..3720640c 100644 --- a/src/components/content-presentation/icons/individual/Tick.tsx +++ b/src/components/content-presentation/icons/individual/Tick.tsx @@ -1,7 +1,7 @@ -import React, { FC } from 'react'; +import React from 'react'; import { BaseIconSVGProps, BaseIconSVG } from '../BaseIcon'; -export const Tick: FC = (props) => ( +export const Tick: React.FC = (props) => ( { +interface ImageProps extends React.HTMLProps { // 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: FC = ({ className, caption, ...rest }) => ( +const Images: React.FC = ({ className, caption, ...rest }) => (
{/* eslint-disable-next-line jsx-a11y/alt-text */}
diff --git a/src/components/content-presentation/inset-text/InsetText.tsx b/src/components/content-presentation/inset-text/InsetText.tsx index b61dcb5a..1b0766e4 100644 --- a/src/components/content-presentation/inset-text/InsetText.tsx +++ b/src/components/content-presentation/inset-text/InsetText.tsx @@ -1,11 +1,11 @@ -import React, { FC, HTMLProps } from 'react'; +import React from 'react'; import classNames from 'classnames'; -interface InsetTextProps extends HTMLProps { +interface InsetTextProps extends React.HTMLProps { visuallyHiddenText?: string | false; } -const InsetText: FC = ({ +const InsetText: React.FC = ({ className, children, visuallyHiddenText = 'Information: ', diff --git a/src/components/content-presentation/summary-list/SummaryList.tsx b/src/components/content-presentation/summary-list/SummaryList.tsx index 7eb4426d..e21655d4 100644 --- a/src/components/content-presentation/summary-list/SummaryList.tsx +++ b/src/components/content-presentation/summary-list/SummaryList.tsx @@ -1,31 +1,31 @@ -import React, { FC, HTMLProps } from 'react'; +import React from 'react'; import classNames from 'classnames'; -const SummaryListRow: FC> = ({ className, ...rest }) => ( +const SummaryListRow: React.FC> = ({ className, ...rest }) => (

); -const SummaryListKey: FC> = ({ className, ...rest }) => ( +const SummaryListKey: React.FC> = ({ className, ...rest }) => (
); -const SummaryListValue: FC> = ({ className, ...rest }) => ( +const SummaryListValue: React.FC> = ({ className, ...rest }) => (
); -const SummaryListActions: FC> = ({ className, ...rest }) => ( +const SummaryListActions: React.FC> = ({ className, ...rest }) => (
); -interface SummaryListProps extends HTMLProps { +interface SummaryListProps extends React.HTMLProps { noBorder?: boolean; } -interface SummaryList extends FC { - Row: FC>; - Key: FC>; - Value: FC>; - Actions: FC>; +interface SummaryList extends React.FC { + Row: React.FC>; + Key: React.FC>; + Value: React.FC>; + Actions: React.FC>; } const SummaryList: SummaryList = ({ className, noBorder, ...rest }) => ( diff --git a/src/components/content-presentation/table/Table.tsx b/src/components/content-presentation/table/Table.tsx index 73942891..6f25aa39 100644 --- a/src/components/content-presentation/table/Table.tsx +++ b/src/components/content-presentation/table/Table.tsx @@ -1,4 +1,4 @@ -import React, { ComponentProps, FC, HTMLProps, ReactNode, useMemo, useState } from 'react'; +import React, { useMemo, useState } from 'react'; import classNames from 'classnames'; import TableBody from './components/TableBody'; import TableCaption from './components/TableCaption'; @@ -9,19 +9,19 @@ import TableRow from './components/TableRow'; import TablePanel, { TablePanelProps } from './components/TablePanel'; import TableContext, { ITableContext } from './TableContext'; -interface TableProps extends HTMLProps { +interface TableProps extends React.HTMLProps { responsive?: boolean; - caption?: ReactNode; - captionProps?: ComponentProps; + caption?: React.ReactNode; + captionProps?: React.ComponentProps; } -interface Table extends FC { - Body: FC>; - Cell: FC; - Container: FC>; - Head: FC>; - Panel: FC; - Row: FC>; +interface Table extends React.FC { + Body: React.FC>; + Cell: React.FC; + Container: React.FC>; + Head: React.FC>; + Panel: React.FC; + Row: React.FC>; } const Table = ({ diff --git a/src/components/content-presentation/table/components/TableBody.tsx b/src/components/content-presentation/table/components/TableBody.tsx index 8d6bdf4a..f1cf51da 100644 --- a/src/components/content-presentation/table/components/TableBody.tsx +++ b/src/components/content-presentation/table/components/TableBody.tsx @@ -1,8 +1,8 @@ import classNames from 'classnames'; -import React, { FC, HTMLProps } from 'react'; +import React from 'react'; import TableSectionContext, { TableSection } from '../TableSectionContext'; -const TableBody: FC> = ({ className, children, ...rest }) => ( +const TableBody: React.FC> = ({ className, children, ...rest }) => ( {children} diff --git a/src/components/content-presentation/table/components/TableCaption.tsx b/src/components/content-presentation/table/components/TableCaption.tsx index e40a3d98..07f8c281 100644 --- a/src/components/content-presentation/table/components/TableCaption.tsx +++ b/src/components/content-presentation/table/components/TableCaption.tsx @@ -1,7 +1,7 @@ -import React, { FC, HTMLProps } from 'react'; +import React from 'react'; import classNames from 'classnames'; -const TableCaption: FC> = ({ className, ...rest }) => ( +const TableCaption: React.FC> = ({ className, ...rest }) => ( ); TableCaption.displayName = 'Table.Caption'; diff --git a/src/components/content-presentation/table/components/TableCell.tsx b/src/components/content-presentation/table/components/TableCell.tsx index 68a44089..cd905a43 100644 --- a/src/components/content-presentation/table/components/TableCell.tsx +++ b/src/components/content-presentation/table/components/TableCell.tsx @@ -1,18 +1,18 @@ import classNames from 'classnames'; -import React, { FC, HTMLProps, useContext } from 'react'; +import React, { useContext } from 'react'; import useDevWarning from '@util/hooks/UseDevWarning'; import TableSectionContext, { TableSection } from '../TableSectionContext'; const CellOutsideOfSectionWarning = 'Table.Cell used outside of a Table.Head or Table.Body component. Unable to determine section type from context.'; -export interface TableCellProps extends HTMLProps { +export interface TableCellProps extends React.HTMLProps { _responsive?: boolean; _responsiveHeading?: string; isNumeric?: boolean; } -const TableCell: FC = ({ +const TableCell: React.FC = ({ className, _responsive = false, _responsiveHeading = '', diff --git a/src/components/content-presentation/table/components/TableContainer.tsx b/src/components/content-presentation/table/components/TableContainer.tsx index f47cb3a1..ba7602e2 100644 --- a/src/components/content-presentation/table/components/TableContainer.tsx +++ b/src/components/content-presentation/table/components/TableContainer.tsx @@ -1,7 +1,7 @@ -import React, { FC, HTMLProps } from 'react'; +import React from 'react'; import classNames from 'classnames'; -const TableContainer: FC> = ({ className, ...rest }) => ( +const TableContainer: React.FC> = ({ className, ...rest }) => (
); TableContainer.displayName = 'Table.Container'; diff --git a/src/components/content-presentation/table/components/TableHead.tsx b/src/components/content-presentation/table/components/TableHead.tsx index 11f77bf4..4a570972 100644 --- a/src/components/content-presentation/table/components/TableHead.tsx +++ b/src/components/content-presentation/table/components/TableHead.tsx @@ -1,8 +1,8 @@ -import React, { FC, HTMLProps } from 'react'; +import React from 'react'; import classNames from 'classnames'; import TableSectionContext, { TableSection } from '../TableSectionContext'; -const TableHead: FC> = ({ className, children, ...rest }) => ( +const TableHead: React.FC> = ({ className, children, ...rest }) => ( {children} diff --git a/src/components/content-presentation/table/components/TablePanel.tsx b/src/components/content-presentation/table/components/TablePanel.tsx index 7542a14e..9e5b60fc 100644 --- a/src/components/content-presentation/table/components/TablePanel.tsx +++ b/src/components/content-presentation/table/components/TablePanel.tsx @@ -1,13 +1,13 @@ -import React, { FC, ComponentProps, HTMLProps } from 'react'; +import React from 'react'; import classNames from 'classnames'; import HeadingLevel from '@components/utils/HeadingLevel'; -export interface TablePanelProps extends HTMLProps { +export interface TablePanelProps extends React.HTMLProps { heading?: string; - headingProps?: ComponentProps; + headingProps?: React.ComponentProps; } -const TablePanel: FC = ({ +const TablePanel: React.FC = ({ className, heading, headingProps, diff --git a/src/components/content-presentation/table/components/TableRow.tsx b/src/components/content-presentation/table/components/TableRow.tsx index 05453cc7..0c5922a4 100644 --- a/src/components/content-presentation/table/components/TableRow.tsx +++ b/src/components/content-presentation/table/components/TableRow.tsx @@ -1,11 +1,11 @@ 'use client'; import classNames from 'classnames'; -import React, { Children, cloneElement, FC, HTMLProps, useContext, useEffect } from 'react'; +import React, { Children, cloneElement, useContext, useEffect } from 'react'; import TableContext from '../TableContext'; import { getHeadingsFromChildren, isTableCell } from '../TableHelpers'; import TableSectionContext, { TableSection } from '../TableSectionContext'; -const TableRow: FC> = ({ className, children, ...rest }) => { +const TableRow: React.FC> = ({ className, children, ...rest }) => { const section = useContext(TableSectionContext); const { isResponsive, headings, setHeadings } = useContext(TableContext); diff --git a/src/components/content-presentation/tabs/Tabs.tsx b/src/components/content-presentation/tabs/Tabs.tsx index edfcf250..ca194f60 100644 --- a/src/components/content-presentation/tabs/Tabs.tsx +++ b/src/components/content-presentation/tabs/Tabs.tsx @@ -1,10 +1,10 @@ 'use client'; import classNames from 'classnames'; -import React, { FC, HTMLAttributes, useEffect } from 'react'; +import React, { useEffect } from 'react'; import HeadingLevel, { HeadingLevelType } from '@components/utils/HeadingLevel'; import TabsJs from '@resources/tabs'; -type TabsProps = HTMLAttributes; +type TabsProps = React.HTMLAttributes; type TabTitleProps = { children: React.ReactNode; headingLevel?: HeadingLevelType }; @@ -22,17 +22,17 @@ type TabContentsProps = { children: React.ReactNode; }; -const TabTitle: FC = ({ children, headingLevel = 'h2' }) => ( +const TabTitle: React.FC = ({ children, headingLevel = 'h2' }) => ( {children} ); -const TabList: FC = ({ children }) => ( +const TabList: React.FC = ({ children }) => (
    {children}
); -const TabListItem: FC = ({ id, children }) => ( +const TabListItem: React.FC = ({ id, children }) => (
  • {children} @@ -40,17 +40,17 @@ const TabListItem: FC = ({ id, children }) => (
    • ); -const TabContents: FC = ({ id, children }) => ( +const TabContents: React.FC = ({ id, children }) => (
    {children}
    ); -interface Tabs extends FC { - Title: FC; - List: FC; - ListItem: FC; - Contents: FC; +interface Tabs extends React.FC { + Title: React.FC; + List: React.FC; + ListItem: React.FC; + Contents: React.FC; } const Tabs: Tabs = ({ className, children, ...rest }) => { diff --git a/src/components/content-presentation/tag/Tag.tsx b/src/components/content-presentation/tag/Tag.tsx index 3774ec99..0c9175b0 100644 --- a/src/components/content-presentation/tag/Tag.tsx +++ b/src/components/content-presentation/tag/Tag.tsx @@ -1,21 +1,21 @@ -import React, { FC, HTMLProps } from 'react'; +import React from 'react'; import classNames from 'classnames'; -interface TagProps extends HTMLProps { +interface TagProps extends React.HTMLProps { color?: - | 'white' - | 'grey' - | 'green' - | 'aqua-green' - | 'blue' - | 'purple' - | 'pink' - | 'red' - | 'orange' - | 'yellow'; + | 'white' + | 'grey' + | 'green' + | 'aqua-green' + | 'blue' + | 'purple' + | 'pink' + | 'red' + | 'orange' + | 'yellow'; } -const Tag: FC = ({ className, color, ...rest }) => ( +const Tag: React.FC = ({ className, color, ...rest }) => ( { +interface WarningCalloutLabelProps extends React.HTMLProps { headingLevel?: HeadingLevelType; visuallyHiddenText?: string | false; } -const WarningCalloutLabel: FC = ({ +const WarningCalloutLabel: React.FC = ({ className, visuallyHiddenText = 'Important: ', children, @@ -22,7 +22,7 @@ const WarningCalloutLabel: FC = ({ ); -interface IWarningCallout extends FC> { +interface IWarningCallout extends React.FC> { Label: typeof WarningCalloutLabel; } diff --git a/src/components/form-elements/button/Button.tsx b/src/components/form-elements/button/Button.tsx index 11cd64c0..bf73ee9b 100644 --- a/src/components/form-elements/button/Button.tsx +++ b/src/components/form-elements/button/Button.tsx @@ -1,7 +1,6 @@ import React, { EventHandler, FC, - HTMLProps, KeyboardEvent, SyntheticEvent, useCallback, @@ -12,7 +11,7 @@ import classNames from 'classnames'; // Debounce timeout - default 1 second export const DefaultButtonDebounceTimeout = 1000; -export interface ButtonProps extends HTMLProps { +export interface ButtonProps extends React.HTMLProps { type?: 'button' | 'submit' | 'reset'; disabled?: boolean; secondary?: boolean; @@ -23,7 +22,7 @@ export interface ButtonProps extends HTMLProps { debounceTimeout?: number; } -export interface ButtonLinkProps extends HTMLProps { +export interface ButtonLinkProps extends React.HTMLProps { disabled?: boolean; secondary?: boolean; reverse?: boolean; @@ -37,7 +36,7 @@ const useDebounceTimeout = ( fn?: EventHandler, timeout: number = DefaultButtonDebounceTimeout, ) => { - const timeoutRef = useRef(); + const timeoutRef = useRef(0); if (!fn) return undefined; @@ -60,7 +59,7 @@ const useDebounceTimeout = ( return handler; }; -export const Button: FC = ({ +export const Button: React.FC = ({ className, disabled, secondary, @@ -93,7 +92,7 @@ export const Button: FC = ({ /> ); }; -export const ButtonLink: FC = ({ +export const ButtonLink: React.FC = ({ className, role = 'button', draggable = false, @@ -148,7 +147,7 @@ export const ButtonLink: FC = ({ ); }; -const ButtonWrapper: FC = ({ href, as, ...rest }) => { +const ButtonWrapper: React.FC = ({ href, as, ...rest }) => { if (as === 'a') { return ; } diff --git a/src/components/form-elements/character-count/CharacterCount.tsx b/src/components/form-elements/character-count/CharacterCount.tsx index e19ca0e9..04613de1 100644 --- a/src/components/form-elements/character-count/CharacterCount.tsx +++ b/src/components/form-elements/character-count/CharacterCount.tsx @@ -1,5 +1,5 @@ 'use client'; -import React, { FC, useEffect } from 'react'; +import React, { useEffect } from 'react'; import CharacterCountJs from '@resources/character-count'; import { HTMLAttributesWithData } from '@util/types/NHSUKTypes'; @@ -16,7 +16,7 @@ type CharacterCountProps = React.HTMLAttributes & { thresholdPercent?: number; }; -const CharacterCount: FC = ({ +const CharacterCount: React.FC = ({ children, maxLength, countType, diff --git a/src/components/form-elements/checkboxes/Checkboxes.tsx b/src/components/form-elements/checkboxes/Checkboxes.tsx index 4b10e37b..7ede76ff 100644 --- a/src/components/form-elements/checkboxes/Checkboxes.tsx +++ b/src/components/form-elements/checkboxes/Checkboxes.tsx @@ -1,6 +1,6 @@ 'use client'; -import React, { HTMLProps, useEffect } from 'react'; +import React, { useEffect } from 'react'; import classNames from 'classnames'; import { FormElementProps } from '@util/types/FormTypes'; import SingleInputFormGroup from '@components/utils/SingleInputFormGroup'; @@ -10,7 +10,7 @@ import Divider from './components/Divider'; import { generateRandomName } from '@util/RandomID'; import CheckboxJs from '@resources/checkboxes'; -interface CheckboxesProps extends HTMLProps, FormElementProps { +interface CheckboxesProps extends React.HTMLProps, FormElementProps { idPrefix?: string; } diff --git a/src/components/form-elements/checkboxes/components/Box.tsx b/src/components/form-elements/checkboxes/components/Box.tsx index 3c576c57..89063ad0 100644 --- a/src/components/form-elements/checkboxes/components/Box.tsx +++ b/src/components/form-elements/checkboxes/components/Box.tsx @@ -1,32 +1,30 @@ 'use client'; import React, { - FC, - HTMLProps, useContext, ReactNode, useEffect, - useState, - MutableRefObject, + useState } from 'react'; import classNames from 'classnames'; import CheckboxContext, { ICheckboxContext } from '../CheckboxContext'; import Label, { LabelProps } from '../../label/Label'; import HintText, { HintTextProps } from '../../hint-text/HintText'; import { HTMLAttributesWithData } from '@util/types/NHSUKTypes'; +import { MutableRefObject } from '@components/form-elements/fieldset/Fieldset'; -type BoxProps = Omit, 'label'> & { +type BoxProps = Omit, 'label'> & { labelProps?: LabelProps; hint?: string; hintProps?: HintTextProps; conditional?: ReactNode; forceShowConditional?: boolean; - conditionalWrapperProps?: HTMLProps; + conditionalWrapperProps?: React.HTMLProps; inputRef?: MutableRefObject; exclusive?: boolean; }; -const Box: FC = ({ +const Box: React.FC = ({ id, labelProps, children, diff --git a/src/components/form-elements/checkboxes/components/Divider.tsx b/src/components/form-elements/checkboxes/components/Divider.tsx index 547aa302..6ca9079c 100644 --- a/src/components/form-elements/checkboxes/components/Divider.tsx +++ b/src/components/form-elements/checkboxes/components/Divider.tsx @@ -1,10 +1,10 @@ -import React, { FC } from 'react'; +import React from 'react'; type DividerProps = { dividerText?: string; }; -const Divider: FC = ({ dividerText = 'or' }) => ( +const Divider: React.FC = ({ dividerText = 'or' }) => (
    {dividerText}
    ); diff --git a/src/components/form-elements/date-input/DateInput.tsx b/src/components/form-elements/date-input/DateInput.tsx index 50f2040b..494033b1 100644 --- a/src/components/form-elements/date-input/DateInput.tsx +++ b/src/components/form-elements/date-input/DateInput.tsx @@ -1,6 +1,6 @@ 'use client'; -import React, { HTMLProps, ChangeEvent, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import classNames from 'classnames'; import { DayInput, MonthInput, YearInput } from './components/IndividualDateInputs'; import SingleInputFormGroup from '@components/utils/SingleInputFormGroup'; @@ -13,14 +13,14 @@ type DateInputValue = { year: string; }; -export type DateInputChangeEvent = ChangeEvent & { +export type DateInputChangeEvent = React.ChangeEvent & { target: HTMLInputElement & { value: DateInputValue }; currentTarget: HTMLInputElement & { value: DateInputValue }; }; interface DateInputProps - extends Omit, 'value' | 'defaultValue'>, - FormElementProps { + extends Omit, 'value' | 'defaultValue'>, + FormElementProps { autoSelectNext?: boolean; value?: Partial; defaultValue?: Partial; @@ -64,7 +64,7 @@ const DateInput = ({ } }; - const handleChange = (inputType: InputType, event: ChangeEvent): void => { + const handleChange = (inputType: InputType, event: React.ChangeEvent): void => { handleFocusNextInput(inputType, event.target.value); event.stopPropagation(); diff --git a/src/components/form-elements/date-input/components/IndividualDateInputs.tsx b/src/components/form-elements/date-input/components/IndividualDateInputs.tsx index 441caa88..55adbdae 100644 --- a/src/components/form-elements/date-input/components/IndividualDateInputs.tsx +++ b/src/components/form-elements/date-input/components/IndividualDateInputs.tsx @@ -1,10 +1,10 @@ 'use client'; -import React, { FC, HTMLProps, useContext, ChangeEvent } from 'react'; +import React, { useContext, ChangeEvent } from 'react'; import classNames from 'classnames'; import Label, { LabelProps } from '../../label/Label'; import DateInputContext, { IDateInputContext } from '../DateInputContext'; -export interface IndividualDateInputProps extends HTMLProps { +export interface IndividualDateInputProps extends React.HTMLProps { labelProps?: LabelProps; inputType: 'day' | 'month' | 'year'; inputRef?: (ref: HTMLInputElement | null) => void; @@ -17,7 +17,7 @@ const labels: Record<'day' | 'month' | 'year', string> = { year: 'Year', }; -const IndividualDateInput: FC = ({ +const IndividualDateInput: React.FC = ({ label, labelProps, inputType, @@ -100,14 +100,14 @@ const IndividualDateInput: FC = ({ ); }; -export const DayInput: FC> = (props) => ( +export const DayInput: React.FC> = (props) => ( ); -export const MonthInput: FC> = (props) => ( +export const MonthInput: React.FC> = (props) => ( ); -export const YearInput: FC> = (props) => ( +export const YearInput: React.FC> = (props) => ( ); diff --git a/src/components/form-elements/error-message/ErrorMessage.tsx b/src/components/form-elements/error-message/ErrorMessage.tsx index 4bc89ead..a1282c6e 100644 --- a/src/components/form-elements/error-message/ErrorMessage.tsx +++ b/src/components/form-elements/error-message/ErrorMessage.tsx @@ -1,11 +1,11 @@ -import React, { FC, HTMLProps } from 'react'; +import React from 'react'; import classNames from 'classnames'; -export interface ErrorMessageProps extends HTMLProps { +export interface ErrorMessageProps extends React.HTMLProps { visuallyHiddenText?: false | string; } -const ErrorMessage: FC = ({ +const ErrorMessage: React.FC = ({ className, visuallyHiddenText = 'Error: ', children, diff --git a/src/components/form-elements/error-summary/ErrorSummary.tsx b/src/components/form-elements/error-summary/ErrorSummary.tsx index 83fceb49..9361bf7f 100644 --- a/src/components/form-elements/error-summary/ErrorSummary.tsx +++ b/src/components/form-elements/error-summary/ErrorSummary.tsx @@ -1,17 +1,12 @@ import React, { - FC, - ForwardRefExoticComponent, forwardRef, - HTMLProps, - PropsWithoutRef, - RefAttributes, } from 'react'; import classNames from 'classnames'; import useDevWarning from '@util/hooks/UseDevWarning'; const DefaultErrorSummaryTitleID = 'error-summary-title'; -const ErrorSummaryTitle: FC> = ({ +const ErrorSummaryTitle: React.FC> = ({ className, id = DefaultErrorSummaryTitleID, ...rest @@ -20,31 +15,31 @@ const ErrorSummaryTitle: FC> = ({ ); -const ErrorSummaryBody: FC> = ({ className, ...rest }) => ( +const ErrorSummaryBody: React.FC> = ({ className, ...rest }) => (
    ); -const ErrorSummaryList: FC> = ({ className, ...rest }) => ( +const ErrorSummaryList: React.FC> = ({ className, ...rest }) => (