@uktrade/react-component-library 0.18.2 → 0.19.0

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

@@ -1,10 +1,9 @@
 interface ApiBoundaryProps {
-    isLoading: boolean;
-    isError: boolean;
-    error?: unknown;
-    onRetry?: () => void;
+    isLoading?: boolean;
+    isError?: boolean;
+    error?: React.ReactNode | Error | null;
     children: React.ReactNode;
 }
-export declare const ApiBoundary: ({ isLoading, isError, error, onRetry, children, }: ApiBoundaryProps) => import("react/jsx-runtime").JSX.Element;
+export declare function ApiBoundary({ isLoading, isError, error, children }: ApiBoundaryProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=ApiBoundary.d.ts.map

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,4CAwBlB,CAAC"}
+{"version":3,"file":"ApiBoundary.d.ts","sourceRoot":"","sources":["../../../src/components/ApiBoundary/ApiBoundary.tsx"],"names":[],"mappings":"AAIA,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,GAAG,IAAI,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,OAAe,EACf,KAAK,EACL,QAAQ,EACT,EAAE,gBAAgB,2CAalB"}

package/dist/components/ApiBoundary/ApiBoundary.js

@@ -1,7 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-// import { LoadingBox } from "govuk-react";
+"use client";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 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) }), onRetry && (_jsx(Button, { variant: "warning", onClick: onRetry, children: "Retry" }))] })] }))] }));
+export function ApiBoundary({ isLoading, isError = false, error, children }) {
+    if (isLoading) {
+        return _jsx(LoadingSpinner, {});
+    }
+    if (isError) {
+        if (error instanceof Error) {
+            return _jsx("p", { children: error.message });
+        }
+        return _jsx(_Fragment, { children: error });
+    }
+    return _jsx(_Fragment, { children: children });
+}
+;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.18.2",
+  "version": "0.19.0",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -54,17 +54,17 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.53.1",
-    "@typescript-eslint/parser": "^8.53.1",
+    "@typescript-eslint/eslint-plugin": "^8.59.0",
+    "@typescript-eslint/parser": "^8.59.0",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "^4.0.18",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
-    "globals": "^17.2.0",
+    "globals": "^17.5.0",
     "jsdom": "^27.4.0",
-    "openapi-typescript": "^7.10.1",
+    "openapi-typescript": "^7.13.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.53.1",
+    "typescript-eslint": "^8.59.0",
     "vitest": "^4.0.18"
   },
   "engines": {

package/src/components/ApiBoundary/ApiBoundary.tsx

@@ -1,45 +1,30 @@
-// import { LoadingBox } from "govuk-react";
+"use client"
+
 import { LoadingSpinner } from "../LoadingSpinner/LoadingSpinner";
-import styles from "./ApiBoundary.module.css";
-import { Button } from "../Button";
 
 interface ApiBoundaryProps {
-  isLoading: boolean;
-  isError: boolean;
-  error?: unknown;
-  onRetry?: () => void;
+  isLoading?: boolean;
+  isError?: boolean;
+  error?: React.ReactNode | Error | null;
   children: React.ReactNode;
 }
 
-/* Boundary for API-related states: loading, success, and error */
-export const ApiBoundary = ({
+export function ApiBoundary({
   isLoading,
-  isError,
+  isError = false,
   error,
-  onRetry,
-  children,
-}: ApiBoundaryProps) => (
-  <div className={styles.root} aria-live="polite">
-    {isLoading && <LoadingSpinner />}
+  children
+}: ApiBoundaryProps) {
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
 
-    {!isLoading && !isError && children}
+  if (isError) {
+    if (error instanceof Error) {
+      return <p>{error.message}</p>;
+    }
+    return <>{error}</>;
+  }
 
-    {isError && (
-      <>
-        <div className={styles.errorBackdrop} />
-        <section className={styles.error}>
-          <h2 className="govuk-heading-m">Error!</h2>
-          <pre className={styles.description}>
-            {typeof error === "string" ? error : JSON.stringify(error, null, 2)}
-          </pre>
-          
-          {onRetry && (
-            <Button variant="warning" onClick={onRetry}>
-              Retry
-            </Button>
-          )}
-        </section>
-      </>
-    )}
-  </div>
-);
+  return <>{children}</>;
+};

package/dist/components/ApiBoundary/ApiBoundary.module.css

@@ -1,30 +0,0 @@
-.hods-loading-spinner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-top: 1rem;
-}
-
-.hods-loading-spinner__spinner {
-  width: 80px;
-  height: 80px;
-  border: 12px solid #dee0e2;
-  border-top-color: #1d70b8; /* GOV.UK blue */
-  border-radius: 50%;
-  animation: hods-loading-spinner-rotate 1.5s linear infinite;
-}
-
-.hods-loading-spinner__content {
-  margin-top: 1rem;
-  text-align: center;
-}
-
-@keyframes hods-loading-spinner-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

package/src/components/ApiBoundary/ApiBoundary.module.css

@@ -1,30 +0,0 @@
-.hods-loading-spinner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding-top: 1rem;
-}
-
-.hods-loading-spinner__spinner {
-  width: 80px;
-  height: 80px;
-  border: 12px solid #dee0e2;
-  border-top-color: #1d70b8; /* GOV.UK blue */
-  border-radius: 50%;
-  animation: hods-loading-spinner-rotate 1.5s linear infinite;
-}
-
-.hods-loading-spinner__content {
-  margin-top: 1rem;
-  text-align: center;
-}
-
-@keyframes hods-loading-spinner-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}