@uktrade/react-component-library 0.11.0 → 0.13.0

package/dist/components/ApiBoundary/ApiBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ApiBoundary/ApiBoundary.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAGD,eAAO,MAAM,WAAW,GAAI,mDAMzB,gBAAgB,4CAuBlB,CAAC"}
+{"version":3,"file":"ApiBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ApiBoundary/ApiBoundary.tsx"],"names":[],"mappings":"AAKA,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAGD,eAAO,MAAM,WAAW,GAAI,mDAMzB,gBAAgB,4CAwBlB,CAAC"}

package/dist/components/ApiBoundary/ApiBoundary.js

@@ -4,4 +4,4 @@ import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner";
 import styles from "./ApiBoundary.module.css";
 import { Button } from "../Button";
 /* Boundary for API-related states: loading, success, and error */
-export const ApiBoundary = ({ isLoading, isError, error, onRetry, children, }) => (_jsxs("div", { className: styles.root, "aria-live": "polite", children: [isLoading && _jsx(LoadingSpinner, {}), !isLoading && !isError && children, isError && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.errorBackdrop }), _jsxs("section", { className: styles.error, children: [_jsx("h2", { className: "govuk-heading-m", children: "Error!" }), _jsx("pre", { className: styles.description, children: typeof error === "string" ? error : JSON.stringify(error, null, 2) }), _jsx(Button, { variant: "warning", onClick: onRetry, children: "Retry" })] })] }))] }));
+export const ApiBoundary = ({ isLoading, isError, error, onRetry, children, }) => (_jsxs("div", { className: styles.root, "aria-live": "polite", children: [isLoading && _jsx(LoadingSpinner, {}), !isLoading && !isError && children, isError && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.errorBackdrop }), _jsxs("section", { className: styles.error, children: [_jsx("h2", { className: "govuk-heading-m", children: "Error!" }), _jsx("pre", { className: styles.description, children: typeof error === "string" ? error : JSON.stringify(error, null, 2) }), onRetry && (_jsx(Button, { variant: "warning", onClick: onRetry, children: "Retry" }))] })] }))] }));

package/dist/components/ApiQuery/ApiCreateHooks.d.ts

@@ -1,7 +1,7 @@
 import type { PathsWithMethod } from "openapi-typescript-helpers";
 import { createApiClient } from "./ApiCreateClient";
 export declare function createApiHooks<Paths extends {}>(client: ReturnType<typeof createApiClient<Paths>>): {
-    get: <P extends PathsWithMethod<Paths, "get">>(path: P, params?: any) => {
+    get: <P extends PathsWithMethod<Paths, "get">>(path: P, input?: any) => {
         query: import("@tanstack/react-query").UseQueryResult<any, Error>;
         state: {
             data: any;
@@ -11,7 +11,7 @@ export declare function createApiHooks<Paths extends {}>(client: ReturnType<type
             refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<any, Error>>;
         };
     };
-    post: <P extends PathsWithMethod<Paths, "post">>(path: P, params?: any) => {
+    post: <P extends PathsWithMethod<Paths, "post">>(path: P, input?: any) => {
         query: import("@tanstack/react-query").UseQueryResult<any, Error>;
         state: {
             data: any;
@@ -21,5 +21,45 @@ export declare function createApiHooks<Paths extends {}>(client: ReturnType<type
             refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<any, Error>>;
         };
     };
+    postMutation: <P extends PathsWithMethod<Paths, "post">>(path: P) => {
+        mutation: import("@tanstack/react-query").UseMutationResult<any, unknown, any, unknown>;
+        state: {
+            data: any;
+            isLoading: boolean;
+            isError: boolean;
+            error: unknown;
+            mutate: import("@tanstack/react-query").UseMutateFunction<any, unknown, any, unknown>;
+        };
+    };
+    putMutation: <P extends PathsWithMethod<Paths, "put">>(path: P) => {
+        mutation: import("@tanstack/react-query").UseMutationResult<any, unknown, any, unknown>;
+        state: {
+            data: any;
+            isLoading: boolean;
+            isError: boolean;
+            error: unknown;
+            mutate: import("@tanstack/react-query").UseMutateFunction<any, unknown, any, unknown>;
+        };
+    };
+    patchMutation: <P extends PathsWithMethod<Paths, "patch">>(path: P) => {
+        mutation: import("@tanstack/react-query").UseMutationResult<any, unknown, any, unknown>;
+        state: {
+            data: any;
+            isLoading: boolean;
+            isError: boolean;
+            error: unknown;
+            mutate: import("@tanstack/react-query").UseMutateFunction<any, unknown, any, unknown>;
+        };
+    };
+    deleteMutation: <P extends PathsWithMethod<Paths, "delete">>(path: P) => {
+        mutation: import("@tanstack/react-query").UseMutationResult<any, unknown, any, unknown>;
+        state: {
+            data: any;
+            isLoading: boolean;
+            isError: boolean;
+            error: unknown;
+            mutate: import("@tanstack/react-query").UseMutateFunction<any, unknown, any, unknown>;
+        };
+    };
 };
 //# sourceMappingURL=ApiCreateHooks.d.ts.map

package/dist/components/ApiQuery/ApiCreateHooks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiCreateHooks.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiCreateHooks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,wBAAgB,cAAc,CAAC,KAAK,SAAS,EAAE,EAC7C,MAAM,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;UAMzC,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QACrC,CAAC,WACE,GAAG;;;;;;;;;;WAYP,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QACvC,CAAC,WACE,GAAG;;;;;;;;;;EA6CjB"}
+{"version":3,"file":"ApiCreateHooks.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiCreateHooks.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAElE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKpD,wBAAgB,cAAc,CAAC,KAAK,SAAS,EAAE,EAC7C,MAAM,EAAE,UAAU,CAAC,OAAO,eAAe,CAAC,KAAK,CAAC,CAAC;UAQzC,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QACrC,CAAC,UACC,GAAG;;;;;;;;;;WAYN,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QACvC,CAAC,UACC,GAAG;;;;;;;;;;mBAaE,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;;;;;;;;;;kBAQlD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;oBAQ9C,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC;;;;;;;;;;qBAQjD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC;;;;;;;;;;EAQvE"}

package/dist/components/ApiQuery/ApiCreateHooks.js

@@ -1,55 +1,62 @@
 "use client";
 import { createApiClient } from "./ApiCreateClient";
-import { useApi } from "./ApiProvider";
+import { useApi, useApiMutation } from "./ApiProvider";
+// API hook factory that converts a typed OpenAPI client into React hooks (`useApi` and `useApiMutation`) that the UI can use.
+// Provides a simple interface for making API calls and handling loading and error states in your React components.
 export function createApiHooks(client) {
+    // ToDo: Generalize this (params?: any) and fight openapi-fetch’s internal generics to get correct types from PathsWithMethod. Same for the mutation methods.
     // type GetParams<P extends PathsWithMethod<Paths, "get">> =
     //   Parameters<typeof client.GET<P>>[1];
+    // Using useQuery
     return {
-        get: (path, params // GetParams<P> More work to be done to fight openapi-fetch’s internal generics!!!!
-        ) => {
-            return useApi(["get", path, JSON.stringify(params ?? {})], async () => {
-                const res = await client.GET(path, params);
+        get: (path, input) => {
+            return useApi(["get", path, JSON.stringify(input ?? {})], async () => {
+                const res = await client.GET(path, input);
                 if (res.error)
                     throw res.error;
                 return res.data;
             });
         },
-        post: (path, params // GetParams<P> More work to be done to fight openapi-fetch’s internal generics!!!!
-        ) => {
-            return useApi(["post", path, JSON.stringify(params ?? {})], async () => {
-                const res = await client.POST(path, params);
+        post: (path, input) => {
+            return useApi(["post", path, JSON.stringify(input ?? {})], async () => {
+                const res = await client.POST(path, input);
+                if (res.error)
+                    throw res.error;
+                return res.data;
+            });
+        },
+        // Using useMutation
+        postMutation: (path) => {
+            return useApiMutation(async (input) => {
+                const res = await client.POST(path, input);
+                if (res.error)
+                    throw res.error;
+                return res.data;
+            });
+        },
+        putMutation: (path) => {
+            return useApiMutation(async (input) => {
+                const res = await client.PUT(path, input);
+                if (res.error)
+                    throw res.error;
+                return res.data;
+            });
+        },
+        patchMutation: (path) => {
+            return useApiMutation(async (input) => {
+                const res = await client.PATCH(path, input);
+                if (res.error)
+                    throw res.error;
+                return res.data;
+            });
+        },
+        deleteMutation: (path) => {
+            return useApiMutation(async (input) => {
+                const res = await client.DELETE(path, input);
                 if (res.error)
                     throw res.error;
                 return res.data;
             });
         },
-        // TODO: implement other methods (put, delete), furthermore generalize the mutation method
-        // for all methods (No GET) to avoid React Query’s useQuery from running automatically on mount
-        // Same here (params?: any)
-        // postMutation: <P extends PathsWithMethod<Paths, "post">>(path: P, params?: any) => {
-        //   return useApiMutation(async () => {
-        //     const res = await client.POST(path, params);
-        //     if (res.error) throw res.error;
-        //     return res.data;
-        //   });
-        // },
-        // mutation: <
-        //   M extends "post" | "put" | "patch" | "delete",
-        //   P extends PathsWithMethod<Paths, M>
-        // >(
-        //   method: M,
-        //   path: P,
-        //   params?: any
-        // ) => {
-        //   return useApiMutation(async () => {
-        //     const res = await client[method.toUpperCase() as "POST" | "PUT" | "PATCH" | "DELETE"](path, params);
-        //     if (res.error) throw res.error;
-        //     return res.data;
-        //   });
-        // }
-        // ToDo: Generalize this:
-        // const res = await client.POST(path, params);
-        // if (res.error) throw res.error;
-        // return res.data;
     };
 }

package/dist/components/ApiQuery/ApiProvider.d.ts

@@ -21,14 +21,14 @@ export declare function useApi<T>(key: QueryKey, queryFn: () => Promise<T>): {
         refetch: (options?: import("@tanstack/query-core").RefetchOptions) => Promise<import("@tanstack/query-core").QueryObserverResult<import("@tanstack/query-core").NoInfer<T>, Error>>;
     };
 };
-export declare function useApiMutation<T>(mutationFn: () => Promise<T>): {
-    mutation: import("@tanstack/react-query").UseMutationResult<T, Error, void, unknown>;
+export declare function useApiMutation<TData, TVariables = void>(mutationFn: (variables: TVariables) => Promise<TData>): {
+    mutation: import("@tanstack/react-query").UseMutationResult<TData, unknown, TVariables, unknown>;
     state: {
-        data: T | undefined;
+        data: TData | undefined;
         isLoading: boolean;
         isError: boolean;
-        error: Error | null;
-        mutate: import("@tanstack/react-query").UseMutateFunction<T, Error, void, unknown>;
+        error: unknown;
+        mutate: import("@tanstack/react-query").UseMutateFunction<TData, unknown, TVariables, unknown>;
     };
 };
 //# sourceMappingURL=ApiProvider.d.ts.map

package/dist/components/ApiQuery/ApiProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ApiProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,EAIX,KAAK,QAAQ,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,wBAAgB,cAAc,gBAa7B;AAMD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAMhE;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAYF,wBAAgB,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC;;;;;;;;;EAgBjE;AAYD,wBAAgB,cAAc,CAAC,CAAC,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC;;;;;;;;;EAa7D"}
+{"version":3,"file":"ApiProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ApiQuery/ApiProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,WAAW,EAIX,KAAK,QAAQ,EACd,MAAM,uBAAuB,CAAC;AAC/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,wBAAgB,cAAc,gBAa7B;AAMD,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAMhE;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI;IAC7B,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAYF,wBAAgB,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC;;;;;;;;;EAgBjE;AAYD,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,EACrD,UAAU,EAAE,CAAC,SAAS,EAAE,UAAU,KAAK,OAAO,CAAC,KAAK,CAAC;;;;;;;;;EAgBtD"}

package/dist/components/ApiQuery/ApiProvider.js

@@ -65,9 +65,11 @@ It accepts `mutationFn` as function that performs the mutation request, and It r
 - `state` — a simplified structure with commonly used properties like `data`, `isLoading`, `isError`
 */
 export function useApiMutation(mutationFn) {
-    const mutation = useMutation({ mutationFn });
+    const mutation = useMutation({
+        mutationFn,
+    });
     return {
-        mutation, // Full React Query object
+        mutation,
         state: {
             data: mutation.data,
             isLoading: mutation.isPending,

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+type LegendAs = "h1" | "h2" | "h3" | "h4";
+type LegendSize = "s" | "m" | "l" | "xl";
+interface CheckboxOption {
+    id: string;
+    value: string;
+    label: ReactNode;
+    checked?: boolean;
+}
+interface CheckboxGroupProps {
+    legend: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    options: CheckboxOption[];
+    name: string;
+    legendAs?: LegendAs;
+    legendSize?: LegendSize;
+}
+export declare const CheckboxGroup: ({ legend, hint, error, options, name, legendAs, legendSize, }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=CheckBoxGroupInput.d.ts.map

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckBoxGroupInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAC1C,KAAK,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEzC,UAAU,cAAc;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,kBAAkB;IACxB,MAAM,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,GAAI,+DAQ3B,kBAAkB,4CA0DpB,CAAC"}

package/dist/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { createElement } from "react";
+export const CheckboxGroup = ({ legend, hint, error, options, name, legendAs = "h4", legendSize = "m", }) => {
+    const hasError = Boolean(error);
+    const errorId = hasError ? `${name}-error` : undefined;
+    const legendHeading = createElement(legendAs, { className: "govuk-fieldset__heading" }, legend);
+    return (_jsx("div", { className: clsx("govuk-form-group", {
+            "govuk-form-group--error": hasError,
+        }), children: _jsxs("fieldset", { className: "govuk-fieldset", "aria-describedby": errorId, children: [_jsx("legend", { className: clsx("govuk-fieldset__legend", {
+                        [`govuk-fieldset__legend--${legendSize}`]: legendSize !== "m",
+                    }), children: legendHeading }), hint && _jsx("div", { className: "govuk-hint", children: hint }), hasError && (_jsxs("p", { id: errorId, className: "govuk-error-message", children: [_jsx("span", { className: "govuk-visually-hidden", children: "Error:" }), " ", error] })), _jsx("div", { className: "govuk-checkboxes", "data-module": "govuk-checkboxes", children: options.map((opt) => (_jsxs("div", { className: "govuk-checkboxes__item", children: [_jsx("input", { className: "govuk-checkboxes__input", id: opt.id, name: name, type: "checkbox", value: opt.value, defaultChecked: opt.checked }), _jsx("label", { className: "govuk-label govuk-checkboxes__label", htmlFor: opt.id, children: opt.label })] }, opt.id))) })] }) }));
+};

package/dist/components/Inputs/SelectInput/SelectInput.d.ts

@@ -0,0 +1,21 @@
+import type { JSX, ReactNode } from "react";
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type LabelSize = "s" | "m" | "l" | "xl";
+type SelectProps = Omit<JSX.IntrinsicElements["select"], "id">;
+interface SelectInputProps extends SelectProps {
+    id: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    options: {
+        value: string;
+        label: string;
+    }[];
+    placeholder?: string;
+    labelAs?: LabelAs;
+    labelSize?: LabelSize;
+    className?: string;
+}
+export declare const SelectInput: ({ id, label, hint, error, options, placeholder, labelAs, labelSize, className, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SelectInput.d.ts.map

package/dist/components/Inputs/SelectInput/SelectInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/SelectInput/SelectInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,SAAS,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AACxC,KAAK,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,CAAC;AAE/D,UAAU,gBAAiB,SAAQ,WAAW;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,GAAI,2FAWzB,gBAAgB,4CAoElB,CAAC"}

package/dist/components/Inputs/SelectInput/SelectInput.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { createElement } from "react";
+export const SelectInput = ({ id, label, hint, error, options, placeholder, labelAs, labelSize = "m", className, ...props }) => {
+    const hasError = Boolean(error);
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const ariaDescribedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+    const labelElement = (_jsx("label", { htmlFor: id, className: clsx("govuk-label", {
+            [`govuk-label--${labelSize}`]: labelSize !== "m",
+        }), children: label }));
+    return (_jsxs("div", { className: clsx("govuk-form-group", {
+            "govuk-form-group--error": hasError,
+        }), children: [labelAs
+                ? createElement(labelAs, { className: "govuk-label-wrapper" }, labelElement)
+                : labelElement, hint && (_jsx("div", { id: hintId, className: "govuk-hint", children: hint })), hasError && (_jsxs("p", { id: errorId, className: "govuk-error-message", children: [_jsx("span", { className: "govuk-visually-hidden", children: "Error:" }), " ", error] })), _jsxs("select", { id: id, className: clsx("govuk-select", { "govuk-select--error": hasError }, className), "aria-describedby": ariaDescribedBy, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: true, hidden: true, children: placeholder })), options.map((opt) => (_jsx("option", { value: opt.value, children: opt.label }, opt.value)))] })] }));
+};

package/dist/components/Inputs/TextInput/TextInput.d.ts

@@ -0,0 +1,17 @@
+import type { JSX, ReactNode } from "react";
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type InputProps = Omit<JSX.IntrinsicElements["input"], "id">;
+interface TextInputProps extends InputProps {
+    id: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    width?: "10" | "20" | "30";
+    labelSize?: "s" | "m" | "l" | "xl";
+    labelAs?: LabelAs;
+    placeholder?: string;
+    suffix?: ReactNode;
+}
+export declare const TextInput: ({ id, label, hint, error, width, labelSize, labelAs, className, placeholder, suffix, ...props }: TextInputProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TextInput.d.ts.map

package/dist/components/Inputs/TextInput/TextInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../src/components/Inputs/TextInput/TextInput.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG5C,KAAK,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACzC,KAAK,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC;AAE7D,UAAU,cAAe,SAAQ,UAAU;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC3B,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;IACnC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,SAAS,GAAI,iGAYvB,cAAc,4CAuEhB,CAAC"}

package/dist/components/Inputs/TextInput/TextInput.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { createElement } from "react";
+export const TextInput = ({ id, label, hint, error, width = "20", labelSize = "m", labelAs, className, placeholder, suffix, ...props }) => {
+    const hasError = Boolean(error);
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+    const labelElement = (_jsx("label", { htmlFor: id, className: clsx("govuk-label", {
+            [`govuk-label--${labelSize}`]: labelSize !== "m",
+        }), children: label }));
+    const input = (_jsx("input", { id: id, className: clsx("govuk-input", `govuk-input--width-${width}`, className), "aria-invalid": hasError, "aria-describedby": describedBy, placeholder: placeholder, ...props }));
+    return (_jsxs("div", { className: clsx("govuk-form-group", {
+            "govuk-form-group--error": hasError,
+        }), children: [labelAs
+                ? createElement(labelAs, { className: "govuk-label-wrapper" }, labelElement)
+                : labelElement, hint && (_jsx("div", { id: hintId, className: "govuk-hint", children: hint })), hasError && (_jsxs("p", { id: errorId, className: "govuk-error-message", children: [_jsx("span", { className: "govuk-visually-hidden", children: "Error:" }), " ", error] })), suffix ? (_jsxs("div", { className: "govuk-input__wrapper", children: [input, _jsx("div", { className: "govuk-input__suffix", "aria-hidden": "true", children: suffix })] })) : (input)] }));
+};

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

@@ -0,0 +1,4 @@
+export * from "./TextInput/TextInput";
+export * from "./CheckBoxesInput/CheckBoxGroupInput";
+export * from "./SelectInput/SelectInput";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Inputs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Inputs/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC;AACtC,cAAc,sCAAsC,CAAC;AACrD,cAAc,2BAA2B,CAAC"}

package/dist/components/Inputs/index.js

@@ -0,0 +1,3 @@
+export * from "./TextInput/TextInput";
+export * from "./CheckBoxesInput/CheckBoxGroupInput";
+export * from "./SelectInput/SelectInput";

package/dist/index.d.ts

@@ -11,4 +11,5 @@ export * from "./components/BackLink";
 export * from "./components/LoadingSpinner/LoadingSpinner";
 export * from "./components/ApiBoundary/ApiBoundary";
 export * from "./components/ApiQuery";
+export * from "./components/Inputs";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC;AACvD,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,uBAAuB,CAAC;AACtC,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC"}

package/dist/index.js

@@ -11,3 +11,4 @@ export * from "./components/BackLink";
 export * from "./components/LoadingSpinner/LoadingSpinner";
 export * from "./components/ApiBoundary/ApiBoundary";
 export * from "./components/ApiQuery";
+export * from "./components/Inputs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/src/components/ApiBoundary/ApiBoundary.tsx

@@ -33,10 +33,11 @@ export const ApiBoundary = ({
             {typeof error === "string" ? error : JSON.stringify(error, null, 2)}
           </pre>
           
-          {/* TODO: Make this button optional since it cannot always be required */}
-          <Button variant="warning" onClick={onRetry}>
-            Retry
-          </Button>
+          {onRetry && (
+            <Button variant="warning" onClick={onRetry}>
+              Retry
+            </Button>
+          )}
         </section>
       </>
     )}

package/src/components/ApiQuery/ApiCreateHooks.tsx

@@ -3,23 +3,27 @@
 import type { PathsWithMethod } from "openapi-typescript-helpers";
 
 import { createApiClient } from "./ApiCreateClient";
-import { useApi } from "./ApiProvider";
+import { useApi, useApiMutation } from "./ApiProvider";
 
+// API hook factory that converts a typed OpenAPI client into React hooks (`useApi` and `useApiMutation`) that the UI can use.
+// Provides a simple interface for making API calls and handling loading and error states in your React components.
 export function createApiHooks<Paths extends {}>(
   client: ReturnType<typeof createApiClient<Paths>>
 ) {
+  // ToDo: Generalize this (params?: any) and fight openapi-fetch’s internal generics to get correct types from PathsWithMethod. Same for the mutation methods.
   // type GetParams<P extends PathsWithMethod<Paths, "get">> =
   //   Parameters<typeof client.GET<P>>[1];
 
+  // Using useQuery
   return {
     get: <P extends PathsWithMethod<Paths, "get">>(
       path: P,
-      params?: any // GetParams<P> More work to be done to fight openapi-fetch’s internal generics!!!!
+      input?: any
     ) => {
       return useApi(
-        ["get", path, JSON.stringify(params ?? {})],
+        ["get", path, JSON.stringify(input ?? {})],
         async () => {
-          const res = await client.GET(path, params);
+          const res = await client.GET(path, input);
           if (res.error) throw res.error;
           return res.data;
         }
@@ -28,49 +32,49 @@ export function createApiHooks<Paths extends {}>(
 
     post: <P extends PathsWithMethod<Paths, "post">>(
       path: P,
-      params?: any  // GetParams<P> More work to be done to fight openapi-fetch’s internal generics!!!!
+      input?: any
     ) => {
       return useApi(
-        ["post", path, JSON.stringify(params ?? {})],
+        ["post", path, JSON.stringify(input ?? {})],
         async () => {
-          const res = await client.POST(path, params);
+          const res = await client.POST(path, input);
           if (res.error) throw res.error;
           return res.data;
         }
       );
     },
 
-    // TODO: implement other methods (put, delete), furthermore generalize the mutation method
-    // for all methods (No GET) to avoid React Query’s useQuery from running automatically on mount
-
-    // Same here (params?: any)
-    // postMutation: <P extends PathsWithMethod<Paths, "post">>(path: P, params?: any) => {
-    //   return useApiMutation(async () => {
-    //     const res = await client.POST(path, params);
-    //     if (res.error) throw res.error;
-    //     return res.data;
-    //   });
-    // },
+    // Using useMutation
+    postMutation: <P extends PathsWithMethod<Paths, "post">>(path: P) => {
+      return useApiMutation(async (input: any) => {
+        const res = await client.POST(path, input);
+        if (res.error) throw res.error;
+        return res.data;
+      });
+    },
 
-    // mutation: <
-    //   M extends "post" | "put" | "patch" | "delete",
-    //   P extends PathsWithMethod<Paths, M>
-    // >(
-    //   method: M,
-    //   path: P,
-    //   params?: any
-    // ) => {
-    //   return useApiMutation(async () => {
-    //     const res = await client[method.toUpperCase() as "POST" | "PUT" | "PATCH" | "DELETE"](path, params);
-    //     if (res.error) throw res.error;
-    //     return res.data;
-    //   });
-    // }
+    putMutation: <P extends PathsWithMethod<Paths, "put">>(path: P) => {
+      return useApiMutation(async (input: any) => {
+        const res = await client.PUT(path, input);
+        if (res.error) throw res.error;
+        return res.data;
+      });
+    },
 
-    // ToDo: Generalize this:
-    // const res = await client.POST(path, params);
-    // if (res.error) throw res.error;
-    // return res.data;
+    patchMutation: <P extends PathsWithMethod<Paths, "patch">>(path: P) => {
+      return useApiMutation(async (input: any) => {
+        const res = await client.PATCH(path, input);
+        if (res.error) throw res.error;
+        return res.data;
+      });
+    },
 
+    deleteMutation: <P extends PathsWithMethod<Paths, "delete">>(path: P) => {
+      return useApiMutation(async (input: any) => {
+        const res = await client.DELETE(path, input);
+        if (res.error) throw res.error;
+        return res.data;
+      });
+    },
   };
 }

package/src/components/ApiQuery/ApiProvider.tsx

@@ -89,11 +89,15 @@ It accepts `mutationFn` as function that performs the mutation request, and It r
 - `mutation` — the full React Query mutation object  
 - `state` — a simplified structure with commonly used properties like `data`, `isLoading`, `isError`
 */
-export function useApiMutation<T>(mutationFn: () => Promise<T>) {
-  const mutation = useMutation({ mutationFn });
+export function useApiMutation<TData, TVariables = void>(
+  mutationFn: (variables: TVariables) => Promise<TData>
+) {
+  const mutation = useMutation<TData, unknown, TVariables>({
+    mutationFn,
+  });
 
   return {
-    mutation, // Full React Query object
+    mutation,
     state: {
       data: mutation.data,
       isLoading: mutation.isPending,
@@ -103,3 +107,4 @@ export function useApiMutation<T>(mutationFn: () => Promise<T>) {
     },
   };
 }
+

package/src/components/Inputs/CheckBoxesInput/CheckBoxGroupInput.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import clsx from "clsx";
+import type { ReactNode } from "react";
+import { createElement } from "react";
+
+type LegendAs = "h1" | "h2" | "h3" | "h4";
+type LegendSize = "s" | "m" | "l" | "xl";
+
+interface CheckboxOption {
+    id: string;
+    value: string;
+    label: ReactNode;
+    checked?: boolean;
+}
+
+interface CheckboxGroupProps {
+    legend: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    options: CheckboxOption[];
+    name: string;
+    legendAs?: LegendAs;
+    legendSize?: LegendSize;
+}
+
+export const CheckboxGroup = ({
+    legend,
+    hint,
+    error,
+    options,
+    name,
+    legendAs = "h4",
+    legendSize = "m",
+}: CheckboxGroupProps) => {
+    const hasError = Boolean(error);
+    const errorId = hasError ? `${name}-error` : undefined;
+
+    const legendHeading = createElement(
+        legendAs,
+        { className: "govuk-fieldset__heading" },
+        legend
+    );
+
+    return (
+        <div
+            className={clsx("govuk-form-group", {
+                "govuk-form-group--error": hasError,
+            })}
+        >
+            <fieldset className="govuk-fieldset" aria-describedby={errorId}>
+                <legend
+                    className={clsx("govuk-fieldset__legend", {
+                        [`govuk-fieldset__legend--${legendSize}`]:
+                            legendSize !== "m",
+                    })}
+                >
+                    {legendHeading}
+                </legend>
+
+                {hint && <div className="govuk-hint">{hint}</div>}
+
+                {hasError && (
+                    <p id={errorId} className="govuk-error-message">
+                        <span className="govuk-visually-hidden">Error:</span>{" "}
+                        {error}
+                    </p>
+                )}
+
+                <div className="govuk-checkboxes" data-module="govuk-checkboxes">
+                    {options.map((opt) => (
+                        <div key={opt.id} className="govuk-checkboxes__item">
+                            <input
+                                className="govuk-checkboxes__input"
+                                id={opt.id}
+                                name={name}
+                                type="checkbox"
+                                value={opt.value}
+                                defaultChecked={opt.checked}
+                            />
+                            <label
+                                className="govuk-label govuk-checkboxes__label"
+                                htmlFor={opt.id}
+                            >
+                                {opt.label}
+                            </label>
+                        </div>
+                    ))}
+                </div>
+            </fieldset>
+        </div>
+    );
+};

package/src/components/Inputs/SelectInput/SelectInput.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import clsx from "clsx";
+import type { JSX, ReactNode } from "react";
+import { createElement } from "react";
+
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type LabelSize = "s" | "m" | "l" | "xl";
+type SelectProps = Omit<JSX.IntrinsicElements["select"], "id">;
+
+interface SelectInputProps extends SelectProps {
+    id: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    options: { value: string; label: string }[];
+    placeholder?: string;
+    labelAs?: LabelAs;
+    labelSize?: LabelSize;
+    className?: string;
+}
+
+export const SelectInput = ({
+    id,
+    label,
+    hint,
+    error,
+    options,
+    placeholder,
+    labelAs,
+    labelSize = "m",
+    className,
+    ...props
+}: SelectInputProps) => {
+    const hasError = Boolean(error);
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const ariaDescribedBy =
+        [hintId, errorId].filter(Boolean).join(" ") || undefined;
+
+    const labelElement = (
+        <label
+            htmlFor={id}
+            className={clsx("govuk-label", {
+                [`govuk-label--${labelSize}`]: labelSize !== "m",
+            })}
+        >
+            {label}
+        </label>
+    );
+
+    return (
+        <div
+            className={clsx("govuk-form-group", {
+                "govuk-form-group--error": hasError,
+            })}
+        >
+            {labelAs
+                ? createElement(
+                    labelAs,
+                    { className: "govuk-label-wrapper" },
+                    labelElement
+                )
+                : labelElement}
+
+            {hint && (
+                <div id={hintId} className="govuk-hint">
+                    {hint}
+                </div>
+            )}
+
+            {hasError && (
+                <p id={errorId} className="govuk-error-message">
+                    <span className="govuk-visually-hidden">Error:</span> {error}
+                </p>
+            )}
+
+            <select
+                id={id}
+                className={clsx(
+                    "govuk-select",
+                    { "govuk-select--error": hasError },
+                    className
+                )}
+                aria-describedby={ariaDescribedBy}
+                {...props}
+            >
+                {placeholder && (
+                    <option value="" disabled hidden>
+                        {placeholder}
+                    </option>
+                )}
+
+                {options.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                    </option>
+                ))}
+            </select>
+        </div>
+    );
+};

package/src/components/Inputs/TextInput/TextInput.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import clsx from "clsx";
+import type { JSX, ReactNode } from "react";
+import { createElement } from "react";
+
+type LabelAs = "h1" | "h2" | "h3" | "h4";
+type InputProps = Omit<JSX.IntrinsicElements["input"], "id">;
+
+interface TextInputProps extends InputProps {
+    id: string;
+    label: ReactNode;
+    hint?: ReactNode;
+    error?: string;
+    width?: "10" | "20" | "30";
+    labelSize?: "s" | "m" | "l" | "xl";
+    labelAs?: LabelAs;
+    placeholder?: string;
+    suffix?: ReactNode;
+}
+
+export const TextInput = ({
+    id,
+    label,
+    hint,
+    error,
+    width = "20",
+    labelSize = "m",
+    labelAs,
+    className,
+    placeholder,
+    suffix,
+    ...props
+}: TextInputProps) => {
+    const hasError = Boolean(error);
+
+    const hintId = hint ? `${id}-hint` : undefined;
+    const errorId = hasError ? `${id}-error` : undefined;
+    const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+
+    const labelElement = (
+        <label
+            htmlFor={id}
+            className={clsx("govuk-label", {
+                [`govuk-label--${labelSize}`]: labelSize !== "m",
+            })}
+        >
+            {label}
+        </label>
+    );
+
+    const input = (
+        <input
+            id={id}
+            className={clsx(
+                "govuk-input",
+                `govuk-input--width-${width}`,
+                className
+            )}
+            aria-invalid={hasError}
+            aria-describedby={describedBy}
+            placeholder={placeholder}
+            {...props}
+        />
+    );
+
+    return (
+        <div
+            className={clsx("govuk-form-group", {
+                "govuk-form-group--error": hasError,
+            })}
+        >
+            {labelAs
+                ? createElement(
+                    labelAs,
+                    { className: "govuk-label-wrapper" },
+                    labelElement
+                )
+                : labelElement}
+
+            {hint && (
+                <div id={hintId} className="govuk-hint">
+                    {hint}
+                </div>
+            )}
+
+            {hasError && (
+                <p id={errorId} className="govuk-error-message">
+                    <span className="govuk-visually-hidden">Error:</span> {error}
+                </p>
+            )}
+
+            {suffix ? (
+                <div className="govuk-input__wrapper">
+                    {input}
+                    <div className="govuk-input__suffix" aria-hidden="true">
+                        {suffix}
+                    </div>
+                </div>
+            ) : (
+                input
+            )}
+        </div>
+    );
+};

package/src/components/Inputs/index.ts

@@ -0,0 +1,3 @@
+export * from "./TextInput/TextInput";
+export * from "./CheckBoxesInput/CheckBoxGroupInput";
+export * from "./SelectInput/SelectInput";

package/src/index.ts

@@ -11,3 +11,4 @@ export * from "./components/BackLink";
 export * from "./components/LoadingSpinner/LoadingSpinner";
 export * from "./components/ApiBoundary/ApiBoundary";
 export * from "./components/ApiQuery";
+export * from "./components/Inputs";