@uktrade/react-component-library 0.22.10 → 0.22.12

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;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"}
+{"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;AAqBpD,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;;;;;;;;;;WAQN,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QACvC,CAAC,UACC,GAAG;;;;;;;;;;mBAUE,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC;;;;;;;;;;kBAKlD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;oBAK9C,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC;;;;;;;;;;qBAKjD,CAAC,SAAS,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,QAAQ,CAAC;;;;;;;;;;EAKvE"}

package/dist/components/ApiQuery/ApiCreateHooks.js

@@ -1,6 +1,15 @@
 "use client";
 import { createApiClient } from "./ApiCreateClient";
 import { useApi, useApiMutation } from "./ApiProvider";
+function unwrap(res) {
+    if (res.error) {
+        throw Object.assign(res.error, {
+            status: res.response.status,
+            response: res.response,
+        });
+    }
+    return res.data;
+}
 // 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) {
@@ -10,53 +19,23 @@ export function createApiHooks(client) {
     // Using useQuery
     return {
         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;
-            });
+            return useApi(["get", path, JSON.stringify(input ?? {})], async () => unwrap(await client.GET(path, input)));
         },
         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;
-            });
+            return useApi(["post", path, JSON.stringify(input ?? {})], async () => unwrap(await client.POST(path, input)));
         },
         // Using useMutation
         postMutation: (path) => {
-            return useApiMutation(async (input) => {
-                const res = await client.POST(path, input);
-                if (res.error)
-                    throw res.error;
-                return res.data;
-            });
+            return useApiMutation(async (input) => unwrap(await client.POST(path, input)));
         },
         putMutation: (path) => {
-            return useApiMutation(async (input) => {
-                const res = await client.PUT(path, input);
-                if (res.error)
-                    throw res.error;
-                return res.data;
-            });
+            return useApiMutation(async (input) => unwrap(await client.PUT(path, input)));
         },
         patchMutation: (path) => {
-            return useApiMutation(async (input) => {
-                const res = await client.PATCH(path, input);
-                if (res.error)
-                    throw res.error;
-                return res.data;
-            });
+            return useApiMutation(async (input) => unwrap(await client.PATCH(path, input)));
         },
         deleteMutation: (path) => {
-            return useApiMutation(async (input) => {
-                const res = await client.DELETE(path, input);
-                if (res.error)
-                    throw res.error;
-                return res.data;
-            });
+            return useApiMutation(async (input) => unwrap(await client.DELETE(path, input)));
         },
     };
 }

package/dist/components/NotificationBanner/NotificationBanner.module.css

@@ -1,15 +1,10 @@
-:root {
-  --error-colour: #d4351c;
-  --neutral-color: #1d70b8;
-}
-
 .error {
-  border-color: var(--error-colour);
-  background-color: var(--error-colour);
+  border-color: #d4351c;
+  background-color: #d4351c;
 }
 
 .error .govuk-notification-banner__title {
-  color: var(--error-colour);
+  color: #d4351c;
 }
 
 .fullWidthContent > p {
@@ -22,5 +17,5 @@
   border: none;
   padding: 0;
   cursor: pointer;
-  color: var(--neutral-color);
+  color: #1d70b8;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uktrade/react-component-library",
-  "version": "0.22.10",
+  "version": "0.22.12",
   "description": "A collection of reusable React components following GOV.UK design patterns.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -55,13 +55,13 @@
     "@types/react": "^19.2.9",
     "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.59.0",
-    "@typescript-eslint/parser": "^8.59.0",
+    "@typescript-eslint/parser": "^8.62.0",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "^4.0.18",
     "eslint": "^9.39.2",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^17.5.0",
-    "jsdom": "^27.4.0",
+    "jsdom": "^29.1.1",
     "openapi-typescript": "^7.13.0",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.59.0",

package/src/components/ApiQuery/ApiCreateHooks.tsx

@@ -5,6 +5,22 @@ import type { PathsWithMethod } from "openapi-typescript-helpers";
 import { createApiClient } from "./ApiCreateClient";
 import { useApi, useApiMutation } from "./ApiProvider";
 
+
+function unwrap<T>(res: {
+  data?: T;
+  error?: any;
+  response: Response;
+}): T {
+  if (res.error) {
+    throw Object.assign(res.error, {
+      status: res.response.status,
+      response: res.response,
+    });
+  }
+
+  return res.data as T;
+}
+
 // 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 {}>(
@@ -22,11 +38,7 @@ export function createApiHooks<Paths extends {}>(
     ) => {
       return useApi(
         ["get", path, JSON.stringify(input ?? {})],
-        async () => {
-          const res = await client.GET(path, input);
-          if (res.error) throw res.error;
-          return res.data;
-        }
+        async () => unwrap(await client.GET(path, input))
       );
     },
 
@@ -36,45 +48,30 @@ export function createApiHooks<Paths extends {}>(
     ) => {
       return useApi(
         ["post", path, JSON.stringify(input ?? {})],
-        async () => {
-          const res = await client.POST(path, input);
-          if (res.error) throw res.error;
-          return res.data;
-        }
+        async () => 
+          unwrap(await client.POST(path, input))
       );
     },
 
     // 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;
-      });
+      return useApiMutation(async (input: any) =>
+          unwrap(await client.POST(path, input)));
     },
 
     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;
-      });
+      return useApiMutation(async (input: any) => 
+          unwrap(await client.PUT(path, input)));
     },
 
     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;
-      });
+      return useApiMutation(async (input: any)=> 
+          unwrap(await client.PATCH(path, input)));
     },
 
     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;
-      });
+      return useApiMutation(async (input: any) => 
+          unwrap(await client.DELETE(path, input)));
     },
   };
 }

package/src/components/NotificationBanner/NotificationBanner.module.css

@@ -1,15 +1,10 @@
-:root {
-  --error-colour: #d4351c;
-  --neutral-color: #1d70b8;
-}
-
 .error {
-  border-color: var(--error-colour);
-  background-color: var(--error-colour);
+  border-color: #d4351c;
+  background-color: #d4351c;
 }
 
 .error .govuk-notification-banner__title {
-  color: var(--error-colour);
+  color: #d4351c;
 }
 
 .fullWidthContent > p {
@@ -22,5 +17,5 @@
   border: none;
   padding: 0;
   cursor: pointer;
-  color: var(--neutral-color);
+  color: #1d70b8;
 }