@ukhomeoffice/cop-react-form-renderer 7.3.2-alpha.5 → 8.0.0-alpha

package/README.md

@@ -1,68 +1,81 @@
-[![Build and test](https://github.com/UKHomeOffice/cop-react-form-renderer/actions/workflows/build-and-test.yml/badge.svg)](https://github.com/UKHomeOffice/cop-react-form-renderer/actions/workflows/build-and-test.yml)
-[![Publish cop-react-form-renderer to npm](https://github.com/UKHomeOffice/cop-react-form-renderer/actions/workflows/publish-cop-react-form-renderer-to-npm.yml/badge.svg)](https://github.com/UKHomeOffice/cop-react-form-renderer/actions/workflows/publish-cop-react-form-renderer-to-npm.yml)
-[![Deploy Storybook](https://github.com/UKHomeOffice/cop-react-form-renderer/actions/workflows/deploy-storybook.yml/badge.svg)](https://github.com/UKHomeOffice/cop-react-form-renderer/actions/workflows/deploy-storybook.yml)
 
-TODO: 
-
-* Remove all ESLint rule exceptions
-
-# Getting Started with COP React Form Renderer
+# cop-react-form-renderer
 
 The COP React Form Renderer is a library that renders a form on the basis of a supplied JSON.
 
 It uses components from [COP React Design System](https://github.com/UKHomeOffice/cop-react-design-system).
 - `@ukhomeoffice/cop-react-components` - and offers various styles of forms. These are showcased inside of
-a [yarn storybook](Storybook) within the project.
+a [npm run storybook](Storybook) within the project.
 
 To get started run `nvm use` to switch to currently supported node version (if your using node version manager). Otherwise, install node version specified in `.nvmrc`.
 
-This library uses the yarn package manager. To install this you will need to run `npm install --global yarn` on the supported version of node.
+
+This project is essentially 2 packaged into one repo:
+* A library of React components with unit tests defined for reuse by other repos (see /src/stories)
+* A React Storybook application with documentation for each React component (see .stories.tsx files)
+
+The library of components is transpiled (and is cleaned up by rimraf). 
+The storybook can be useful for developers and web designers to provide context for each component. 
 
 ## Available Scripts
 
 In the project directory, you can run:
 
-### `yarn install`
+### `npm install`
+
+Installs the `package.json` dependencies.
 
-Installs the package.json dependencies.
+### `npm run storybook`
 
-### `yarn lint`
+Runs the app in the development mode.\
+Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
 
-Runs `eslint` against the project to check for coding issues.
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
 
-### `yarn test`
+### `npm test`
 
 Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://jestjs.io/docs/cli) for more information.
+See the section about [running tests](https://vitest.dev/guide/features.html#watch-mode) for more information.
 
-### `yarn compile`
+You can also use `npm test:coverage` to see the % code coverage for the repo.
 
-Builds the library for production to the `dist` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
 
-The build is minified and the filenames include the hashes.
+### `npm run lib:transpile`
 
-### `yarn storybook`
+Builds the components for production to the `dist` folder.\
+It correctly bundles React components in production mode and optimizes the build for the best performance.
 
-Runs Storybook on [http://localhost:6007](http://localhost:6007), which showcases the components within this library.
+The build is minified and the filenames include the hashes.\
+Your components are ready to be deployed!
 
-### `yarn clean-storybook`
+### `npm run build-storybook`
+Builds the storybook files ending in `.stories.tsx` to static HTML, CSS & JS files located in `storybook-static` folder.
 
-Clears local caches for modules (like cop-react-components) and starts the local storybook server.
+### `npm run lib:yalc-publish`
+This will compile the code with source maps enabled and publish it to the local yalc repository in `~/.yalc` (`%LOCALAPPDATA%/Yalc` on Windows).
 
-Without this, yalc updates may not propagate locally into this app
+To use in another repo, use `yalc add @ukhomeoffice/cop-react-components@6.0.0` (with your version number)
+To remove previous yalc versions, run within the other repo: `yalc remove --all`
 
-### `yarn build-storybook`
+Be weary that other dependencies using Vite or similar may cache the unchanged version of the module (instead of the auto-updating Yalc version) inside the node_modules of the project you're testing from
 
-Builds Storybook for production to the `storybook-static` folder.
 
-### `npm run yalc-publish`
-This will compile the code with source maps enabled and publish it to the local yalc repository in `~/.yalc` Any linked repositories will be automatically updated.
+## Learn More
+
+You can learn more in the [Introduction to Storybook for React](https://storybook.js.org/docs/react/get-started/introduction).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
 
 # Using the Service
 ## Versioning
 For versioning this project uses SemVer.
 
+## Deploying Storybook
+Storybook changes will be deployed automatically on merge to main, see [deploy-storybook.yml](.github/workflows/deploy-storybook.yml) or can alternatively be triggered manually via github actions ui for branch deployments.
+
+The ui is available [here](https://ukhomeoffice.github.io/cop-react-components/?path=/story/d-accordion--default-story). 
+
 ## Authors
 This project is authored by the Home Office.
 
@@ -71,7 +84,68 @@ This project is licensed under the MIT license. For details please see [License]
 
 This project contains public sector information licensed under the Open Government Licence v3.0. (http://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/)
 
-## Deploying Storybook
-Storybook changes will be deployed automatically on merge to main, see [deploy-storybook.yml](.github/workflows/deploy-storybook.yml) or can alternatively be triggered manually via github actions ui for branch deployments.
 
-The ui is available [here](https://ukhomeoffice.github.io/cop-react-form-renderer/?path=/story/f-api-hooks--page). 
+
+
+
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

package/dist/components/CheckYourAnswers/Answer.d.ts

@@ -0,0 +1,10 @@
+interface AnswerProps {
+    component?: {
+        cyaPlaceholder?: string;
+    };
+    formData?: object;
+    value?: string | object;
+    placeholder?: string;
+}
+declare const Answer: ({ value, component, formData, placeholder }: AnswerProps) => any;
+export default Answer;

package/dist/components/CheckYourAnswers/CheckYourAnswers.d.ts

@@ -0,0 +1,35 @@
+import { ObjectEncodingOptions } from 'node:fs';
+export declare const DEFAULT_CLASS = "hods-check-your-answers";
+export declare const DEFAULT_TITLE = "Check your answers";
+export declare const DEFAULT_MARGIN_BOTTOM = 9;
+interface CheckYourAnswersProps {
+    actions?: object | string[];
+    groups?: ObjectEncodingOptions[];
+    hide_actions?: boolean;
+    hide_page_titles?: boolean;
+    hide_title?: boolean;
+    noChangeAction?: boolean;
+    noGroupAction?: boolean;
+    onAction: Function;
+    onRowAction: Function;
+    pages: {
+        formData: object;
+    }[];
+    sections?: {
+        name: string;
+        tasks: {
+            name: string;
+            pages: string[];
+            state: string;
+        }[];
+    }[];
+    summaryListClassModifiers?: string | string[];
+    title?: string;
+    titleSize?: string;
+    type?: string;
+    hideBlankRows?: boolean;
+    optionalFieldPlaceholder?: string;
+}
+/** Renders the **Check your answers** screen for a form */
+declare const CheckYourAnswers: ({ title, titleSize, pages: _pages, actions, onAction, onRowAction, hide_page_titles, hide_actions, hide_title, summaryListClassModifiers, noChangeAction, noGroupAction, groups, sections, type, hideBlankRows, optionalFieldPlaceholder }: CheckYourAnswersProps) => any;
+export default CheckYourAnswers;

package/dist/components/CheckYourAnswers/index.d.ts

@@ -0,0 +1,2 @@
+import { default as CheckYourAnswers } from './CheckYourAnswers';
+export default CheckYourAnswers;

package/dist/components/CollectionPage/CollectionPage.d.ts

@@ -0,0 +1,24 @@
+export declare const DEFAULT_CLASS = "hods-form__page";
+interface CollectionPageProps {
+    page: {
+        id: string;
+        title?: string;
+        collection: {
+            name: string;
+            waitForFormData?: boolean;
+        };
+        components: string | object[];
+        actions?: object | string[];
+        formData: object;
+    };
+    pages: object[];
+    onCollectionChange?: Function;
+    onAction: Function;
+    hashLink?: boolean;
+    classBlock?: string;
+    classModifiers?: string | string[];
+    className?: string;
+    submitting?: boolean;
+}
+declare const CollectionPage: ({ page, pages, onCollectionChange, onAction, hashLink, classBlock, classModifiers, className, submitting }: CollectionPageProps) => import("react/jsx-runtime").JSX.Element | null;
+export default CollectionPage;

package/dist/components/CollectionPage/index.d.ts

@@ -0,0 +1 @@
+export { default } from './CollectionPage';

package/dist/components/CollectionSummary/BannerStrip.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT_CLASS = "hods-form-banner-strip";
+interface BannerStripProps {
+    id: string;
+    banners?: string | object[];
+    formData?: object;
+    classModifiers?: string | string[];
+}
+declare const BannerStrip: ({ id, banners, formData, classModifiers }: BannerStripProps) => import("react/jsx-runtime").JSX.Element;
+export default BannerStrip;

package/dist/components/CollectionSummary/CollectionSummary.d.ts

@@ -0,0 +1,53 @@
+export declare const DEFAULT_ADD_BUTTON_LABEL = "Add";
+interface CollectionSummaryProps {
+    config: {
+        fieldId: string;
+        id: string;
+        collectionName: string;
+        addButton?: {
+            label?: string;
+            page: string;
+            customAction?: {
+                type?: string;
+            };
+        };
+        card?: {
+            banners?: string | object[];
+            title?: string;
+            details?: string;
+            duplicateAction?: {
+                fieldsToIgnore?: string[];
+            };
+            listView?: boolean;
+        };
+        errorCard?: {
+            banners?: string | object[];
+            title?: string;
+            details?: string;
+            duplicateAction?: {
+                fieldsToIgnore?: string[];
+            };
+        };
+        duplicatedCard?: {
+            banners?: string | object[];
+            title?: string;
+            details?: string;
+            duplicateAction?: {
+                fieldsToIgnore?: string[];
+            };
+        };
+        confirmation?: {
+            message?: string;
+            label?: string;
+            displayFields?: string[];
+        };
+        childCollections?: string[];
+    };
+    onAction?: Function;
+    onChange?: Function;
+    onTopLevelChange?: Function;
+    formData: object;
+    pages?: object[];
+}
+declare const CollectionSummary: ({ config, formData, onAction, onChange, onTopLevelChange, pages }: CollectionSummaryProps) => import("react/jsx-runtime").JSX.Element;
+export default CollectionSummary;

package/dist/components/CollectionSummary/Confirmation.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+export declare const DEFAULT_CLASS = "hods-form-confirmation";
+export declare const DEFAULT_MESSAGE = "Are you sure?";
+export declare const DEFAULT_CONFIRM_LABEL = "Confirm";
+interface ConfirmationProps {
+    id: string;
+    message?: string;
+    confirmLabel?: string;
+    children?: ReactNode;
+    onConfirm: Function;
+    onCancel: Function;
+    classModifiers?: string | string[];
+}
+declare const Confirmation: ({ id, message, confirmLabel, children, onConfirm, onCancel, classModifiers }: ConfirmationProps) => import("react/jsx-runtime").JSX.Element;
+export default Confirmation;

package/dist/components/CollectionSummary/RenderListView.d.ts

@@ -0,0 +1,42 @@
+export declare const DEFAULT_CLASS = "govuk-summary-card";
+export declare const DEFAULT_LIST_CLASS = "govuk-summary-list";
+export declare const DEFAULT_TITLE = "Item";
+export declare const DEFAULT_CHANGE_BUTTON_LABEL = "Change";
+export declare const DEFAULT_DELETE_BUTTON_LABEL = "Delete";
+export declare const DEFAULT_CHANGE_BUTTON_CLASS = "secondary";
+export declare const DEFAULT_DELETE_BUTTON_CLASS = "warning";
+interface RenderListViewProps {
+    id: string;
+    entryData: {
+        id: string;
+        index: number;
+    };
+    config: {
+        className?: string;
+        banners?: string[] | any[];
+        title?: string;
+        changeAction: {
+            label?: string;
+            page: string;
+            classModifiers?: string;
+        };
+        deleteAction?: {
+            label?: string;
+            classModifiers?: string;
+        };
+        listView?: boolean;
+    };
+    onFullEdit: Function;
+    onDelete: Function;
+    masterPage: {
+        childPages: [
+            {
+                components: any[];
+            }
+        ];
+    };
+    classModifiers?: string | string[];
+    optionalFieldPlaceholder?: string;
+}
+declare const RenderListView: ({ id, entryData, config, onFullEdit, onDelete, masterPage, classModifiers, optionalFieldPlaceholder }: RenderListViewProps) => import("react/jsx-runtime").JSX.Element;
+export default RenderListView;

package/dist/components/CollectionSummary/SummaryCard.d.ts

@@ -0,0 +1,62 @@
+import { SummaryCardAction } from './SummaryCardButtons';
+export declare const DEFAULT_CLASS = "hods-form-summary-card";
+export declare const DEFAULT_TITLE = "Item";
+export declare const DEFAULT_CHANGE_BUTTON_LABEL = "Change";
+export declare const DEFAULT_DELETE_BUTTON_LABEL = "Delete";
+export declare const DEFAULT_EDIT_LABEL = "Quick Edit";
+export declare const DEFAULT_DUPLICATE_BUTTON_LABEL = "Duplicate";
+export declare const DEFAULT_DETAILS_TITLE = "Full details";
+export declare const DEFAULT_CHANGE_BUTTON_CLASS = "secondary";
+interface SummaryCardProps {
+    id: string;
+    entryData: {
+        id: string;
+        index: number;
+    };
+    config: {
+        className?: string;
+        banners?: string[] | object[];
+        title?: string;
+        details?: string;
+        changeAction?: SummaryCardAction | SummaryCardAction[];
+        deleteAction?: {
+            label: string;
+            aria_label: string;
+        };
+        duplicateAction?: {
+            label: string;
+            aria_label: string;
+        };
+        quickEdit?: {
+            components: [
+                {
+                    use: string;
+                }
+            ];
+        };
+        detailsTitle?: string;
+        listView?: boolean;
+        focusOn?: boolean;
+        fullDetails?: {
+            optionalFieldPlaceholder: string;
+        };
+    };
+    masterPage: {
+        childPages: [
+            {
+                components: object[];
+            }
+        ];
+    };
+    classModifiers?: string | string[];
+    onFullEdit?: Function;
+    onDelete?: Function;
+    onDuplicate?: Function;
+    onQuickEdit?: Function;
+    parentCollectionName: string;
+    childCollections?: string[];
+    formData: object;
+    hideDetails?: boolean;
+}
+declare const SummaryCard: ({ id, entryData, config, classModifiers, onFullEdit, onDelete, onDuplicate, onQuickEdit, parentCollectionName, childCollections, formData, masterPage, hideDetails, }: SummaryCardProps) => import("react/jsx-runtime").JSX.Element;
+export default SummaryCard;

package/dist/components/CollectionSummary/SummaryCardButtons.d.ts

@@ -0,0 +1,21 @@
+export interface SummaryCardAction {
+    label?: string;
+    page: string;
+    classModifiers?: string;
+    aria_label?: string;
+}
+interface SummaryCardButtonsProps {
+    id: string;
+    "data-testid"?: string;
+    entryData: {
+        id: string;
+        index: number;
+    };
+    onFullEdit?: Function;
+    autoFocus?: boolean;
+    name?: string;
+    actions: SummaryCardAction | SummaryCardAction[];
+    formData: any;
+}
+export declare const SummaryCardButtons: ({ id, "data-testid": dataTestId, actions, onFullEdit, entryData, formData, name, autoFocus }: SummaryCardButtonsProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/CollectionSummary/SummaryCardDetails.d.ts

@@ -0,0 +1,14 @@
+export declare const DEFAULT_CLASS = "hods-form-summary-card-details";
+interface SummaryCardDetailsProps {
+    childCollections?: string[];
+    masterPage: {
+        childPages: object[];
+    };
+    formData: object;
+    entryData: object;
+    classModifiers?: string | string[];
+    hideChildSectionTitles?: boolean;
+    optionalFieldPlaceholder?: string;
+}
+declare const SummaryCardDetails: ({ masterPage, childCollections, formData, entryData, classModifiers, hideChildSectionTitles, optionalFieldPlaceholder }: SummaryCardDetailsProps) => any[];
+export default SummaryCardDetails;

package/dist/components/CollectionSummary/SummaryCardValidationContext.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+interface SummaryCardValidationContextProviderProps {
+    entryId: string;
+    topLevelErrors?: object[];
+    clearTopLevelErrorsForCard: Function;
+    children?: ReactNode;
+}
+declare const SummaryCardValidationContextProvider: ({ entryId, topLevelErrors, clearTopLevelErrorsForCard, children }: SummaryCardValidationContextProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default SummaryCardValidationContextProvider;

package/dist/components/CollectionSummary/index.d.ts

@@ -0,0 +1,2 @@
+import { default as CollectionSummary } from './CollectionSummary';
+export default CollectionSummary;

package/dist/components/FormComponent/Collection.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+export declare const DEFAULT_CLASS = "hods-form-collection";
+interface CollectionProps {
+    config: {
+        className?: string;
+        countOffset?: number;
+        disableAddAndRemove?: boolean;
+        id: string;
+        fieldId: string;
+        full_path?: string;
+        restrictHint?: boolean;
+        item?: {
+            fieldId?: string;
+            type?: string;
+        }[];
+        label?: string;
+        labels?: {
+            initial?: string;
+            item?: string;
+            add?: string;
+            remove?: string;
+        };
+        minimumEntries?: number;
+        readonly?: boolean;
+        removeLocation?: string;
+        subsequentItemStyle?: object;
+        focusOnAdd?: boolean;
+        required?: boolean;
+    };
+    formData?: object;
+    onChange?: Function;
+    onTopLevelChange?: Function;
+    value?: ReactNode | {
+        id?: string;
+    } | object[];
+    wrap?: boolean;
+}
+declare const Collection: ({ config, value: _value, formData, onChange, onTopLevelChange, wrap }: CollectionProps) => import("react/jsx-runtime").JSX.Element;
+export default Collection;

package/dist/components/FormComponent/Container.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+export declare const DEFAULT_CLASS = "hods-form-container";
+interface ContainerProps {
+    container: {
+        className?: string;
+        components?: {
+            fieldId?: string;
+            type?: string;
+        }[];
+        fieldId?: string;
+        full_path?: string;
+        id?: string;
+        readonly?: boolean;
+        title?: string;
+    };
+    formData?: object;
+    fullPath?: string;
+    onChange?: Function;
+    onTopLevelChange?: Function;
+    value?: ReactNode | {
+        id?: string;
+    } | object[];
+    wrap?: boolean;
+}
+declare const Container: ({ container, value, formData, onChange, wrap, onTopLevelChange, ...attrs }: ContainerProps) => import("react/jsx-runtime").JSX.Element;
+export default Container;

package/dist/components/FormComponent/FormComponent.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+interface FormComponentProps {
+    component: {
+        additionalValidation?: object[];
+        allowMultiple?: boolean;
+        content?: string;
+        cya_label?: string;
+        data?: {
+            options?: string | object[];
+            url?: string;
+        };
+        disabled?: boolean;
+        fieldId?: string;
+        full_path?: string;
+        hint?: string;
+        id?: string;
+        label?: string;
+        suffix?: string;
+        fieldset?: boolean;
+        type?: string;
+        pageCollection?: {
+            name?: string;
+        };
+    };
+    value?: ReactNode | {
+        id?: string;
+    } | object[];
+    formData?: object | null;
+    wrap?: boolean;
+    onAction?: Function;
+    onChange?: Function;
+    onTopLevelChange?: Function;
+    pages?: object[];
+    submitting?: boolean;
+}
+/** Renders a single component on a form with <Link href="https://ukhomeoffice.github.io/cop-react-components/?path=/docs/d-alert--default-story">COP React components</Link>,
+on the basis of a <Link href="/?path=/docs/json-format-component">JSON</Link> configuration */
+declare const FormComponent: ({ component, value, formData, wrap, onAction, onChange, onTopLevelChange, pages, submitting, ...attrs }: FormComponentProps) => any;
+export default FormComponent;

package/dist/components/FormComponent/helpers/addLabel.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Adds label to target for given value.
+ * @param {object} target The target to be updated.
+ * @returns The updated target.
+ */
+declare const addLabel: (paramTarget: any, component: any, data: any) => any;
+export default addLabel;

package/dist/components/FormComponent/helpers/getComponentDisabled.d.ts

@@ -0,0 +1,2 @@
+declare const getComponentDisabled: (disabled: any, formData: any) => boolean;
+export default getComponentDisabled;

package/dist/components/FormComponent/helpers/getComponentError.d.ts

@@ -0,0 +1,4 @@
+declare const getComponentError: (component: any, errors: any) => {
+    error: any;
+} | undefined;
+export default getComponentError;

package/dist/components/FormComponent/helpers/getComponentFieldSet.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (component: any) => any;
+export default _default;

package/dist/components/FormComponent/helpers/index.d.ts

@@ -0,0 +1,5 @@
+import { default as addLabel } from './addLabel';
+import { default as getComponentDisabled } from './getComponentDisabled';
+import { default as getComponentError } from './getComponentError';
+import { default as getComponentFieldSet } from './getComponentFieldSet';
+export { addLabel, getComponentDisabled, getComponentError, getComponentFieldSet, };

package/dist/components/FormComponent/index.d.ts

@@ -0,0 +1,2 @@
+import { default as FormComponent } from './FormComponent';
+export default FormComponent;