@cruk/cruk-react-components 5.0.7 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cruk/cruk-react-components",
-  "version": "5.0.7",
+  "version": "6.0.0",
   "description": "React components implementing CRUK, RFL, SU2C & Bowelbabe designs",
   "license": "MIT",
   "publishConfig": {
@@ -20,7 +20,7 @@
     "preanalyze": "npm run build-lib",
     "analyze": "source-map-explorer lib/index.js",
     "cypress-headless": "npx cypress run --component",
-    "cy:open": "npx cypress open --component",
+    "cy:open": "npx cypress open --component ",
     "node-test": " node --import tsx --test-reporter=spec --test 'src/utils/__tests__/testHelpers.test.ts'",
     "node-test-watch": "node --import tsx --test-reporter=spec --watch --test 'src/utils/__tests__/testHelpers.test.ts'",
     "test": "npm run node-test && npm run cypress-headless",
@@ -51,81 +51,74 @@
     "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.9.0",
-    "@chromatic-com/storybook": "^1.6.1",
-    "@cruk/eslint-config": "^3.0.1",
+    "@chromatic-com/storybook": "^3.2.4",
+    "@cruk/eslint-config": "^4",
     "@cypress/webpack-dev-server": "3.5.3",
     "@cypress/webpack-preprocessor": "^6.0.0",
-    "@mdx-js/loader": "^2.2.1",
-    "@mdx-js/mdx": "^2.2.1",
-    "@mdx-js/react": "^2.2.1",
+    "@mdx-js/loader": "^3",
+    "@mdx-js/mdx": "^3",
+    "@mdx-js/react": "^3",
     "@rollup/plugin-commonjs": "^26.0.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "^8.3.6",
-    "@storybook/addon-actions": "^8.3.6",
-    "@storybook/addon-docs": "^8.3.6",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/react": "^8.3.6",
-    "@storybook/react-webpack5": "^8.3.6",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
-    "@storybook/test": "^8.3.6",
+    "@storybook/addon-a11y": "^8.5.3",
+    "@storybook/addon-docs": "^8.5.3",
+    "@storybook/addon-essentials": "^8.5.3",
+    "@storybook/addon-interactions": "^8.5.3",
+    "@storybook/addon-links": "^8.5.3",
+    "@storybook/addon-webpack5-compiler-swc": "^2.0.0",
+    "@storybook/react": "^8.5.3",
+    "@storybook/react-webpack5": "^8.5.3",
+    "@storybook/test": "^8.5.3",
     "@types/assert": "^1.5.1",
-    "@types/mdx": "^2.0.2",
-    "@types/mdx-js__react": "^1.5.1",
-    "@types/node": "^18.11.17",
-    "@types/react": "^18.0.1",
-    "@types/react-dom": "^18.0.1",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "@typescript-eslint/parser": "^7.0.0",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "axe-core": "^4.8.2",
     "babel-loader": "8.3.0",
     "babel-plugin-styled-components": "^2.0.2",
     "chromatic": "^6.21.0",
-    "cypress": "^13.3.2",
-    "cypress-axe": "1.5.0",
-    "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-prettier": "^5.0.1",
-    "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "7.37.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "cypress": "^14",
+    "cypress-axe": "1.6.0",
+    "cypress-real-events": "^1.14.0",
+    "eslint": "^9",
+    "eslint-config-prettier": "^10",
+    "eslint-plugin-prettier": "^5",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-storybook": "^0.11.2",
     "html-loader": "^5.1.0",
     "html-webpack-plugin": "^5.3.2",
     "prettier": "^3",
     "prop-types": "^15.8.1",
-    "react": "^18.0.1",
-    "react-dom": "^18.0.1",
+    "react": "^19",
+    "react-dom": "^19",
     "rollup": "^4.22.4",
     "rollup-plugin-typescript2": "^0.36.0",
     "source-map-explorer": "^2.2.2",
-    "storybook": "^8.2.2",
+    "storybook": "^8.5.3",
     "ts-loader": "9.5.1",
     "tsx": "^4.16.2",
     "typescript": "^5.0.2",
+    "typescript-eslint": "^8.20.0",
     "webpack": "^5.53.0",
     "webpack-cli": "5.1.4",
     "webpack-dev-server": "^4.7.3"
   },
   "peerDependencies": {
-    "react": "^18.0.1",
-    "react-dom": "^18.0.1",
+    "react": "^19",
+    "react-dom": "^19",
     "styled-components": "^6.1.11"
   },
   "dependencies": {
     "@fortawesome/fontawesome-common-types": "^6.4.2",
     "@fortawesome/free-brands-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
-    "react-focus-lock": "^2.5.2",
+    "react-focus-lock": "^2",
     "react-intersection-observer": "^9.1.0",
     "react-is": "^18.2.0",
-    "styled-components": "^6.1.11",
-    "release-it": "^17.10.0"
+    "release-it": "^17.10.0",
+    "styled-components": "^6.1.11"
   }
 }

package/lib/components/ErrorText/styles.d.ts

@@ -1,8 +0,0 @@
-import { type ThemeType } from "../../types";
-type ThemeProps = {
-    theme: ThemeType;
-};
-export declare const StyledErrorText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
-}, ThemeProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Text").TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
-export default StyledErrorText;

package/lib/components/GlobalStyle.d.ts

@@ -1,2 +0,0 @@
-export declare const GlobalStyle: import("react").ForwardRefExoticComponent<import("styled-components").ExecutionProps & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & {};
-export default GlobalStyle;

package/lib/components/GlobalStyleNoFontFace.d.ts

@@ -1,2 +0,0 @@
-export declare const GlobalStyleNoFontFace: import("react").ForwardRefExoticComponent<import("styled-components").ExecutionProps & import("react").RefAttributes<import("react").NamedExoticComponent<import("styled-components").ExecutionProps & object>>> & {};
-export default GlobalStyleNoFontFace;

package/lib/components/InfoBox/styles.d.ts

@@ -1,10 +0,0 @@
-import { type ThemeType } from "../../types";
-import { type BoxProps } from "../Box";
-type InfoBoxProps = BoxProps & {
-    css?: string;
-    theme: ThemeType;
-};
-export declare const StyledInfoBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, InfoBoxProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export default StyledInfoBox;

package/lib/components/Link/styles.d.ts

@@ -1,12 +0,0 @@
-import { type AnchorHTMLAttributes } from "react";
-import { type TextProps } from "../Text";
-import { type ThemeType } from "../../types";
-type StyledLinkProps = AnchorHTMLAttributes<HTMLElement> & TextProps & {
-    theme: ThemeType;
-    $appearance?: "primary" | "secondary";
-    $textHoverColor?: string;
-};
-export declare const StyledLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<TextProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
-}, StyledLinkProps>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<TextProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
-export default StyledLink;

package/lib/components/Modal/styles.d.ts

@@ -1,21 +0,0 @@
-import { type ThemeType } from "../../types";
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Box").BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, {
-    $backgroundColor?: string;
-    $top: string;
-    $width: string;
-    $maxWidth: string;
-    $isAnimated?: boolean;
-    theme: ThemeType;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Box").BoxProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>, "ref"> & {
-    ref?: ((instance: HTMLElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLElement> | null | undefined;
-}, {
-    theme: ThemeType;
-}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLElement>>, keyof import("react").Component<any, {}, any>>;
-export declare const Background: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    theme: ThemeType;
-    $isAnimated?: boolean;
-}>> & string;

package/lib/components/ThemeCheatSheet.d.ts

@@ -1,7 +0,0 @@
-import React from "react";
-import { type ThemeType } from "../types";
-export declare function ThemeCheatSheet({ theme }: {
-    theme?: ThemeType;
-}): React.JSX.Element;
-declare const _default: React.ForwardRefExoticComponent<import("styled-components").ExecutionProps & React.RefAttributes<typeof ThemeCheatSheet>> & {};
-export default _default;

package/lib/utils/debounce.d.ts

@@ -1,2 +0,0 @@
-export declare const debounce: (delay: number, callback: Function) => (...args: unknown[]) => void;
-export default debounce;