@oc-digital/react-component-library 7.2.2-beta.0 → 7.2.2-beta.20

package/build/stories/Button.d.ts

@@ -0,0 +1,28 @@
+
+interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => JSX.Element;
+export {};

package/build/stories/Button.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof Button>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/build/stories/Header.d.ts

@@ -0,0 +1,12 @@
+
+type User = {
+    name: string;
+};
+interface HeaderProps {
+    user?: User;
+    onLogin: () => void;
+    onLogout: () => void;
+    onCreateAccount: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => JSX.Element;
+export {};

package/build/stories/Header.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+
+declare const meta: Meta<typeof Header>;
+export default meta;
+type Story = StoryObj<typeof Header>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/build/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+
+export declare const Page: React.FC;

package/build/stories/Page.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Page } from './Page';
+
+declare const meta: Meta<typeof Page>;
+export default meta;
+type Story = StoryObj<typeof Page>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/build/style.css

@@ -0,0 +1 @@
+._input_1kwvp_1{background:transparent;border:0;font-family:Roboto,Helvetica,Arial,sans-serif;transition:border-bottom .2s cubic-bezier(.4,0,.2,1) 0ms,margin-top .2s cubic-bezier(.4,0,.2,1) 0m;margin-top:0;min-width:100%;box-sizing:content-box;font-size:14px;padding:0}._input_1kwvp_1[data-valid=false]{border-bottom-color:#d32f2f!important}input._input_1kwvp_1:not(:disabled):hover:not(:focus){border-bottom:1px solid rgb(158,158,158);margin-top:1px}input._input_1kwvp_1:not(:disabled):focus{outline:none;border-bottom:2px solid rgb(115,196,202);margin-top:2px}._input_1kwvp_1:disabled{cursor:text}._wrapper_1kwvp_35{display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:fit-content;min-width:100%;gap:.35rem}._wrapper_1kwvp_35[data-full-width=true]{width:100%}._wrapper_1kwvp_35[data-full-width=true] ._input_1kwvp_1{width:100%!important;max-width:100%}td[data-align=center] ._input_1kwvp_1{text-align:center;margin:auto}._error_ra74q_1{color:#d32f2f;display:block}._checkbox_1j8tf_1{accent-color:rgb(115,196,202);margin:0;width:15px;height:15px;cursor:pointer}._label_1j8tf_9{display:flex;justify-content:center;align-items:center;margin:auto;border-radius:5rem;width:38px;height:38px;cursor:pointer;transition:background .2s ease}._label_1j8tf_9:hover{background:#00000008}._label_1j8tf_9:active{background:#0000001a}._disabled_1j8tf_29._label_1j8tf_9{cursor:default!important}._disabled_1j8tf_29._label_1j8tf_9:hover,._disabled_1j8tf_29._label_1j8tf_9:active{background:none!important}._disabled_1j8tf_29._label_1j8tf_9 ._checkbox_1j8tf_1{cursor:default!important}._newRowHighlight_2pv8n_1{background-color:#73c4ca30}._editedCellHighlight_2pv8n_5{background-color:#5840f52e!important;background-clip:padding-box}._editedBorder_2pv8n_10{border:3px solid #5840f52e;border-width:2px 4px}._errorBorder_2pv8n_15{border:3px solid rgb(211,47,47);border-width:2px 4px}._emptyLoadingPadding_2pv8n_20{background:#fff;padding-top:.75rem;padding-bottom:.75rem}._centeredText_2pv8n_26{text-align:center}._disabled_2pv8n_30{background-color:#0000000a}._pagination_2pv8n_34{margin-top:1rem;margin-bottom:1rem;display:flex;align-items:center;justify-content:center}._virtualisationContainer_2pv8n_42{background:#fff;min-width:fit-content}._cellPadding_2pv8n_47{padding:.5rem .75rem}._shadedHeader_2pv8n_51:nth-of-type(2n){background-color:#eee}._shadedBodyCell_2pv8n_55:nth-of-type(2n){background-color:#00000012;background-clip:padding-box}._shadedHeaderGroupParent_2pv8n_60:nth-of-type(2n){background-color:#eee}._shadedHeaderGroup2Children_2pv8n_64:nth-of-type(4n-2),._shadedHeaderGroup2Children_2pv8n_64:nth-of-type(4n-1){background-color:#eee}._shadedBody2CellsInsideGroup_2pv8n_69:nth-of-type(4n-2),._shadedBody2CellsInsideGroup_2pv8n_69:nth-of-type(4n-1){background-color:#00000012;background-clip:padding-box}._offsetStickyPosition_2pv8n_75{top:0;position:sticky}._stickyHeaderZIndex_2pv8n_80{z-index:3}._headerCellColour_2pv8n_84{background-color:#fafafa}._rowCellColour_2pv8n_88{background-color:#fff;background-clip:padding-box}._rowHoverForStickyCell_2pv8n_93:hover ._stickyRowCell_2pv8n_93{background-color:#f5f5f5}._headerBorders_2pv8n_97:not(tr:last-child th){border:none}._tableRow_2pv8n_101{background:#fff}._tableRow_2pv8n_101:hover{background:#0000000a}._tableHeadingCell_2pv8n_109{font-weight:500}._tableCell_2pv8n_113{font-family:Roboto,Helvetica,Arial,sans-serif;font-size:.875rem;line-height:1.5rem;letter-spacing:.01071em;display:table-cell;vertical-align:inherit;border-bottom:1px solid rgb(224,224,224);text-align:left;color:#000000de;padding:8px}._tableCellTotalsLabel_2pv8n_126{text-align:center;font-weight:500}._tableTotalCell_2pv8n_131{border-bottom:0;height:54.5px}._tableTotalWrapper_2pv8n_136{display:grid;grid-template-columns:1fr auto;font-weight:500}thead ._tableCell_2pv8n_113{border:0!important;border-collapse:initial}

package/build/styles/colours.d.ts

@@ -1,3 +1,3 @@
-export declare const RED = "#d32f2f";
-export declare const GREY = "rgb(158, 158, 158)";
-export declare const PRIMARY = "rgb(115, 196, 202)";
+export declare const RED = "#d32f2f";
+export declare const GREY = "rgb(158, 158, 158)";
+export declare const PRIMARY = "rgb(115, 196, 202)";

package/build/styles/font.d.ts

@@ -1 +1 @@
-export declare const useFontStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"boldText" | "bolderText" | "smallText" | "warningColor" | "centerText">;
+export declare const useFontStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"boldText" | "bolderText" | "smallText" | "warningColor" | "centerText">;

package/build/styles/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./spacing";
-export * from "./font";
-export * from "./layout";
+export * from "./spacing";
+export * from "./font";
+export * from "./layout";

package/build/styles/layout.d.ts

@@ -1 +1 @@
-export declare const useLayoutStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"contentBox" | "limitWidth60rem" | "limitWidth50rem" | "limitWidth45rem" | "limitWidth40rem" | "limitWidth35rem" | "limitWidth30rem" | "limitWidth25rem" | "centeredText" | "startAlignedText" | "width20" | "width49" | "width50" | "width60" | "width100" | "flexCenter" | "centerJustify" | "leftJustify" | "rightJustify" | "adornmentGap">;
+export declare const useLayoutStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"contentBox" | "limitWidth60rem" | "limitWidth50rem" | "limitWidth45rem" | "limitWidth40rem" | "limitWidth35rem" | "limitWidth30rem" | "limitWidth25rem" | "centeredText" | "startAlignedText" | "width20" | "width49" | "width50" | "width60" | "width100" | "flexCenter" | "centerJustify" | "leftJustify" | "rightJustify" | "adornmentGap">;

package/build/styles/spacing.d.ts

@@ -1 +1 @@
-export declare const useSpacingStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"labelBreak" | "contentBreak" | "sectionBreak" | "doubleSectionBreak" | "rightSpacer1" | "rightSpacer2" | "leftSpacer1" | "leftSpacer2" | "buttonSpacing" | "leftRightPadding1" | "leftRightPadding2" | "topBottomPadding1" | "topBottomPadding2">;
+export declare const useSpacingStyles: (props?: any) => import("@mui/styles/withStyles").ClassNameMap<"labelBreak" | "contentBreak" | "sectionBreak" | "doubleSectionBreak" | "rightSpacer1" | "rightSpacer2" | "leftSpacer1" | "leftSpacer2" | "buttonSpacing" | "leftRightPadding1" | "leftRightPadding2" | "topBottomPadding1" | "topBottomPadding2">;

package/build/styles/themes.d.ts

@@ -1,2 +1,2 @@
-export declare const novelTheme: import("@mui/material/styles").Theme;
-export declare const partnersTheme: import("@mui/material/styles").Theme;
+export declare const novelTheme: import("@mui/material/styles").Theme;
+export declare const partnersTheme: import("@mui/material/styles").Theme;

package/build/utils/index.d.ts

@@ -1,5 +1,5 @@
-import { TableCellValues } from "../EditableTable/EditableTable.types";
-export declare function sortDescendingStartDateString<T extends {
-    startDate: string;
-}>(array: T[]): T[];
-export declare const didCellValueChange: (oldVal: TableCellValues, newVal: TableCellValues, isDateValue?: boolean) => boolean;
+import { TableCellValues } from "../EditableTable/EditableTable.types";
+export declare function sortDescendingStartDateString<T extends {
+    startDate: string;
+}>(array: T[]): T[];
+export declare const didCellValueChange: (oldVal: TableCellValues, newVal: TableCellValues, isDateValue?: boolean) => boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@oc-digital/react-component-library",
   "type": "module",
-  "version": "7.2.2-beta.0",
+  "version": "7.2.2-beta.20",
   "description": "React component library for Optimal Compliance",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -14,7 +14,7 @@
     "build:watch": "npx rollup -c -w",
     "prepublishOnly": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
     "beta": "npm publish --tag beta",
     "lint": "eslint ./",
@@ -24,9 +24,12 @@
   "license": "ISC",
   "devDependencies": {
     "@babel/core": "^7.15.5",
+    "@babel/eslint-parser": "^7.24.5",
+    "@babel/plugin-syntax-import-attributes": "^7.24.1",
     "@babel/preset-env": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
+    "@chromatic-com/storybook": "^1.3.4",
     "@date-io/date-fns": "^1.3.13",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
@@ -38,23 +41,22 @@
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-actions": "^7.6.12",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-links": "^7.6.12",
-    "@storybook/addon-themes": "^7.6.12",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-webpack5": "^7.6.12",
+    "@storybook/addon-actions": "^8.0.10",
+    "@storybook/addon-essentials": "^8.0.10",
+    "@storybook/addon-links": "^8.0.10",
+    "@storybook/addon-themes": "^8.0.10",
+    "@storybook/react": "^8.0.10",
+    "@storybook/react-vite": "^8.0.10",
     "@types/react": "^17.0.21",
     "@types/react-table": "^7.7.8",
-    "@typescript-eslint/eslint-plugin": "^4.31.1",
-    "@typescript-eslint/parser": "^4.31.1",
-    "babel-eslint": "^10.1.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
     "babel-loader": "^8.2.2",
     "date-fns": "^2.25.0",
-    "eslint": "^7.32.0",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-plugin-flowtype": "^5.10.0",
+    "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-flowtype": "^8.0.3",
     "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^4.0.0",
@@ -70,12 +72,14 @@
     "react-router-dom": "^6.21.1",
     "react-table": "^7.7.0",
     "rollup": "^4.12.1",
-    "rollup-plugin-import-css-classes": "^1.4.0",
+    "rollup-plugin-import-css-classes": "^1.5.0",
+    "rollup-plugin-import-css-classes-storybook": "npm:rollup-plugin-import-css-classes@^2.0.0-beta.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "storybook": "^7.6.12",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "storybook": "^8.0.10",
     "tslib": "^2.3.1",
-    "typescript": "^4.4.3",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
@@ -96,7 +100,7 @@
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
     "parserOptions": {
-      "ecmaVersion": 2020,
+      "ecmaVersion": 2023,
       "sourceType": "module",
       "ecmaFeatures": {
         "jsx": true

package/build/EditableTable/components/styled/Checkbox.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const Checkbox: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;

package/build/EditableTable/components/styled/CheckboxLabel.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const CheckboxLabel: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {}>;

package/build/EditableTable/components/styled/Input.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-export declare const Input: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const NumericFormatInput: import("@emotion/styled").StyledComponent<import("react-number-format/types/types").InternalNumberFormatBase & {
-    thousandSeparator?: string | boolean | undefined;
-    decimalSeparator?: string | undefined;
-    allowedDecimalSeparators?: string[] | undefined;
-    thousandsGroupStyle?: "none" | "thousand" | "lakh" | "wan" | undefined;
-    decimalScale?: number | undefined;
-    fixedDecimalScale?: boolean | undefined;
-    allowNegative?: boolean | undefined;
-    allowLeadingZeros?: boolean | undefined;
-    suffix?: string | undefined;
-    prefix?: string | undefined;
-} & Omit<import("react-number-format").InputAttributes, never> & Omit<unknown, "defaultValue" | "value" | "type" | "onChange" | "prefix" | "inputMode" | "onFocus" | "onBlur" | "onKeyDown" | "onMouseUp" | "ref" | "displayType" | "renderText" | "getInputRef" | "valueIsNumericString" | "onValueChange" | "isAllowed" | "isCharacterSame" | "thousandSeparator" | "decimalSeparator" | "allowedDecimalSeparators" | "thousandsGroupStyle" | "decimalScale" | "fixedDecimalScale" | "allowNegative" | "allowLeadingZeros" | "suffix"> & {
-    customInput?: import("react").ComponentType<unknown> | undefined;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-}, {}, {}>;

package/build/EditableTable/components/styled/InputAdornmentWrapper.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const InputAdornmentWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/EditableTable/components/styled/InputWrapper.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const InputWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/build/EditableTable/components/styled/SmallError.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-export declare const SmallError: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/build/assets/index-DCUzKTQq.css

@@ -1,78 +0,0 @@
-.input {
-  background: transparent;
-  border: 0;
-  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
-  transition: border-bottom 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    margin-top 200ms cubic-bezier(0.4, 0, 0.2, 1) 0m;
-  margin-top: 0;
-  min-width: 3ch;
-  max-width: 20ch;
-  box-sizing: content-box;
-
-  &:hover {
-    border-bottom: 1px solid rgb(158, 158, 158);
-    margin-top: 1px;
-  }
-
-  &:focus {
-    outline: none;
-    border-bottom: 2px solid rgb(115, 196, 202);
-    margin-top: 2px;
-  }
-
-  &[data-valid="false"] {
-    border-bottom-color: #d32f2f !important;
-  }
-}
-
-.wrapper {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  width: fit-content;
-  margin: auto;
-}
-
-.error {
-  color: #d32f2f;
-  display: block;
-  text-align: center;
-}
-
-.checkbox {
-  accent-color: rgb(115, 196, 202);
-  margin: 0;
-  width: 15px;
-  height: 15px;
-  cursor: pointer;
-}
-
-.label {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin: auto;
-  border-radius: 5rem;
-  width: 38px;
-  height: 38px;
-  cursor: pointer;
-  transition: background 0.2s ease;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.03);
-  }
-
-  &:active {
-    background: rgba(0, 0, 0, 0.1);
-  }
-}
-
-.disabled.label {
-  &:hover {
-    background: unset;
-  }
-
-  &:active {
-    background: unset;
-  }
-}