@terreno/ui 0.9.2 → 0.10.0

package/src/Common.ts

@@ -2066,7 +2066,7 @@ export interface PaginationProps {
  * Data Table
  */
 export interface DataTableCellData {
-  value: any;
+  value: unknown;
   highlight?: SurfaceColor;
   textSize?: "sm" | "md" | "lg";
 }
@@ -2085,7 +2085,7 @@ export interface DataTableColumn {
 }
 
 export interface DataTableProps {
-  data: {value: any; highlight?: SurfaceColor; textSize?: "sm" | "md" | "lg"}[][];
+  data: DataTableCellData[][];
   columns: DataTableColumn[];
   alternateRowBackground?: boolean;
   totalPages?: number;
@@ -2100,19 +2100,21 @@ export interface DataTableProps {
   /**
    * When tapping the eye icon, a modal is shown with more info about the row.
    */
-  moreContentComponent?: React.ComponentType<{
-    column: DataTableColumn;
-    rowData: any[];
-    rowIndex: number;
-  }>;
+  moreContentComponent?: React.ComponentType<
+    {
+      column: DataTableColumn;
+      rowData: DataTableCellData[];
+      rowIndex: number;
+    } & Record<string, unknown>
+  >;
   // Extra data to pass to the more modal.
-  moreContentExtraData?: any[];
+  moreContentExtraData?: Record<string, unknown>[];
   // Allows handling of custom column types.
   customColumnComponentMap?: DataTableCustomComponentMap;
 }
 
 export interface DataTableCellProps {
-  value: any;
+  value: DataTableCellData;
   columnDef: DataTableColumn;
   colIndex: number;
   isPinnedHorizontal: boolean;

package/src/ConsentHistory.tsx

@@ -17,7 +17,7 @@ import type {ConsentHistoryEntry} from "./useConsentHistory";
 import {useConsentHistory} from "./useConsentHistory";
 
 interface ConsentHistoryProps {
-  api: any;
+  api: Parameters<typeof useConsentHistory>[0];
   baseUrl?: string;
   title?: string;
 }

package/src/ConsentNavigator.test.tsx

@@ -33,7 +33,7 @@ const createMockApi = (forms: ConsentFormPublic[]) => {
   mockSubmitMutation.mockReturnValue({unwrap: mockUnwrap});
 
   const innerApi = {
-    injectEndpoints: mock((_config: any) => ({
+    injectEndpoints: mock((_config: unknown) => ({
       useGetPendingConsentsQuery: mock(() => ({
         data: {data: forms},
         error: undefined,
@@ -48,13 +48,13 @@ const createMockApi = (forms: ConsentFormPublic[]) => {
   };
 
   return {
-    enhanceEndpoints: mock((_config: any) => innerApi),
+    enhanceEndpoints: mock((_config: unknown) => innerApi),
   };
 };
 
 const createLoadingMockApi = () => {
   const innerApi = {
-    injectEndpoints: mock((_config: any) => ({
+    injectEndpoints: mock((_config: unknown) => ({
       useGetPendingConsentsQuery: mock(() => ({
         data: undefined,
         error: undefined,
@@ -69,7 +69,7 @@ const createLoadingMockApi = () => {
   };
 
   return {
-    enhanceEndpoints: mock((_config: any) => innerApi),
+    enhanceEndpoints: mock((_config: unknown) => innerApi),
   };
 };
 

package/src/DataTable.tsx

@@ -32,23 +32,21 @@ import {TableTitle} from "./table/TableTitle";
 // easily.
 
 const TextCell: FC<{
-  cellData: {value: string; textSize?: "sm" | "md" | "lg"};
+  cellData: DataTableCellData;
   column: DataTableColumn;
 }> = ({cellData}) => {
   return (
     <Box flex="grow" justifyContent="center">
-      <Text size={cellData.textSize || "md"}>{cellData.value}</Text>
+      <Text size={cellData.textSize || "md"}>{String(cellData.value ?? "")}</Text>
     </Box>
   );
 };
 
-const CheckedCell: FC<{cellData: {value: boolean}; column: DataTableColumn}> = ({cellData}) => {
+const CheckedCell: FC<{cellData: DataTableCellData; column: DataTableColumn}> = ({cellData}) => {
+  const isChecked = Boolean(cellData.value);
   return (
     <Box flex="grow" justifyContent="center" width="100%">
-      <Icon
-        color={cellData.value ? "success" : "secondaryDark"}
-        iconName={cellData.value ? "check" : "x"}
-      />
+      <Icon color={isChecked ? "success" : "secondaryDark"} iconName={isChecked ? "check" : "x"} />
     </Box>
   );
 };
@@ -71,7 +69,7 @@ const DataTableCell: FC<DataTableCellProps> = ({
   // Default to TextCell
   let Component: React.ComponentType<{
     column: DataTableColumn;
-    cellData: {value: any; highlight?: SurfaceColor};
+    cellData: DataTableCellData;
   }> = TextCell;
   if (customColumnComponentMap?.[columnDef.columnType]) {
     Component = customColumnComponentMap[columnDef.columnType];
@@ -401,20 +399,22 @@ const DataTableHeader: FC<DataTableHeaderProps> = ({
 };
 
 interface DataTableContentProps {
-  data: any[][];
+  data: DataTableCellData[][];
   columns: DataTableColumn[];
   pinnedColumns: number;
   alternateRowBackground: boolean;
   columnWidths: number[];
   bodyScrollRef: React.RefObject<ScrollView | null>;
   onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>, isHeader: boolean) => void;
-  moreContentComponent?: React.ComponentType<{
-    column: DataTableColumn;
-    rowData: any[];
-    rowIndex: number;
-  }>;
+  moreContentComponent?: React.ComponentType<
+    {
+      column: DataTableColumn;
+      rowData: DataTableCellData[];
+      rowIndex: number;
+    } & Record<string, unknown>
+  >;
   // Extra props to pass to the more modal, one per row.
-  moreContentExtraData?: any[];
+  moreContentExtraData?: Record<string, unknown>[];
   moreContentSize?: "sm" | "md" | "lg";
   customColumnComponentMap?: DataTableCustomComponentMap;
   rowHeight: number;

package/src/DateUtilities.test.ts

@@ -25,9 +25,11 @@ describe("DateUtilities", () => {
 
   describe("humanDate", () => {
     it("should return invalid date if date is undefined", () => {
-      expect(() => humanDate(undefined as any, {timezone: "America/New_York"})).toThrow(
-        "humanDate: Passed undefined"
-      );
+      expect(() =>
+        humanDate(undefined as unknown as Parameters<typeof humanDate>[0], {
+          timezone: "America/New_York",
+        })
+      ).toThrow("humanDate: Passed undefined");
     });
 
     it("should throw an error if date is invalid", () => {
@@ -95,9 +97,11 @@ describe("DateUtilities", () => {
 
   describe("humanDateTime", () => {
     it("should return invalid date if date is undefined", () => {
-      expect(() => humanDateAndTime(undefined as any, {timezone: "America/New_York"})).toThrow(
-        "humanDateAndTime: Passed undefined"
-      );
+      expect(() =>
+        humanDateAndTime(undefined as unknown as Parameters<typeof humanDateAndTime>[0], {
+          timezone: "America/New_York",
+        })
+      ).toThrow("humanDateAndTime: Passed undefined");
     });
 
     it("should throw an error if date is invalid", () => {
@@ -232,7 +236,9 @@ describe("DateUtilities", () => {
 
   describe("printDate", () => {
     it("should throw an error if date is undefined", () => {
-      expect(printDate(undefined as any)).toBe("Invalid Date");
+      expect(printDate(undefined as unknown as Parameters<typeof printDate>[0])).toBe(
+        "Invalid Date"
+      );
     });
 
     it("should throw an error if date is invalid", () => {
@@ -270,11 +276,17 @@ describe("DateUtilities", () => {
 
   describe("printOnlyDate", () => {
     it("should print invalid if no date and no default", () => {
-      expect(printOnlyDate(undefined as any)).toBe("Invalid Date");
+      expect(printOnlyDate(undefined as unknown as Parameters<typeof printOnlyDate>[0])).toBe(
+        "Invalid Date"
+      );
     });
 
     it("should print default if no date and default", () => {
-      expect(printOnlyDate(undefined as any, {defaultValue: "default"})).toBe("default");
+      expect(
+        printOnlyDate(undefined as unknown as Parameters<typeof printOnlyDate>[0], {
+          defaultValue: "default",
+        })
+      ).toBe("default");
     });
 
     it("should print the date in the default format", () => {
@@ -287,9 +299,11 @@ describe("DateUtilities", () => {
 
   describe("printDateTime", () => {
     it("should return invalid date if date is undefined", () => {
-      expect(printDateAndTime(undefined as any, {timezone: "America/New_York"})).toBe(
-        "Invalid Datetime"
-      );
+      expect(
+        printDateAndTime(undefined as unknown as Parameters<typeof printDateAndTime>[0], {
+          timezone: "America/New_York",
+        })
+      ).toBe("Invalid Datetime");
     });
 
     it("should throw an error if date is invalid", () => {
@@ -339,7 +353,11 @@ describe("DateUtilities", () => {
 
   describe("printTime", () => {
     it("should return invalid date if date is undefined", () => {
-      expect(printTime(undefined as any, {timezone: "America/New_York"})).toBe("Invalid Date");
+      expect(
+        printTime(undefined as unknown as Parameters<typeof printTime>[0], {
+          timezone: "America/New_York",
+        })
+      ).toBe("Invalid Date");
     });
 
     it("should throw an error if date is invalid", () => {
@@ -349,9 +367,9 @@ describe("DateUtilities", () => {
     });
 
     it("should throw an error with no timezone", () => {
-      expect(() => printTime("2022-12-24T12:00:00.000Z", {} as any)).toThrow(
-        "printTime: timezone is required"
-      );
+      expect(() =>
+        printTime("2022-12-24T12:00:00.000Z", {} as unknown as Parameters<typeof printTime>[1])
+      ).toThrow("printTime: timezone is required");
     });
 
     it("should return the time in the default format", () => {

package/src/DateUtilities.tsx

@@ -1,5 +1,12 @@
 import {DateTime} from "luxon";
 
+const getErrorMessage = (error: unknown): string => {
+  if (error instanceof Error) {
+    return error.message;
+  }
+  return String(error);
+};
+
 function getDate(date: string, {timezone}: {timezone?: string} = {}): DateTime {
   if (!date) {
     throw new Error("Passed undefined");
@@ -57,8 +64,8 @@ export function humanDate(
   let clonedDate;
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`humanDate: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`humanDate: ${getErrorMessage(error)}`);
   }
   if (isTomorrow(date, {timezone})) {
     return "Tomorrow";
@@ -91,8 +98,8 @@ export function humanDateAndTime(
   let clonedDate;
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`humanDateAndTime: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`humanDateAndTime: ${getErrorMessage(error)}`);
   }
   // This should maybe use printTime()
   let time: string = "";
@@ -158,8 +165,8 @@ export const printDate = (
   let clonedDate;
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`printDate: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`printDate: ${getErrorMessage(error)}`);
   }
 
   return clonedDate.toLocaleString(DateTime.DATE_SHORT);
@@ -213,8 +220,8 @@ export function printTime(
   }
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`printTime: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`printTime: ${getErrorMessage(error)}`);
   }
   if (showTimezone) {
     return clonedDate.toLocaleString({
@@ -246,8 +253,8 @@ export function printDateAndTime(
   let clonedDate;
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`printDateAndTime: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`printDateAndTime: ${getErrorMessage(error)}`);
   }
   if (showTimezone) {
     return clonedDate.toLocaleString({
@@ -304,8 +311,8 @@ export function printSince(
   const ago = showAgo ? " ago" : "";
   try {
     clonedDate = getDate(date, {timezone});
-  } catch (error: any) {
-    throw new Error(`printSince: ${error.message}`);
+  } catch (error: unknown) {
+    throw new Error(`printSince: ${getErrorMessage(error)}`);
   }
   const now = timezone ? DateTime.now().setZone(timezone) : DateTime.now();
   const diff = now.diff(clonedDate, "months");
@@ -349,7 +356,11 @@ export function getTimezoneOptions(location: "USA" | "Worldwide", shortTimezone
   if (location === "USA") {
     timezones = usTimezoneOptions.map((tz) => [tz.label, tz.value]);
   } else {
-    timezones = (Intl as any).supportedValuesOf("timeZone").map((tz: any) => {
+    const intlWithSupportedValuesOf = Intl as typeof Intl & {
+      supportedValuesOf?: (key: "timeZone") => string[];
+    };
+    const supportedValues = intlWithSupportedValuesOf.supportedValuesOf?.("timeZone") ?? [];
+    timezones = supportedValues.map((tz) => {
       return [tz, tz];
     });
   }

package/src/DraggableList.tsx

@@ -6,7 +6,7 @@
 // Copyright Patryk Jaworski @gerwld
 
 import React, {useMemo, useState} from "react";
-import {Platform, View} from "react-native";
+import {Platform, type StyleProp, View, type ViewStyle} from "react-native";
 import {Gesture, GestureDetector} from "react-native-gesture-handler";
 import Animated, {
   runOnJS,
@@ -41,7 +41,7 @@ interface DragItemProps {
   renderGrip?: React.ReactElement | (() => React.ReactElement); // Optional drag handle
   passVibration?: () => void; // Optional haptic feedback callback
   itemBorderRadius: number; // Border radius for items
-  itemContainerStyle?: any; // Additional styling for item container
+  itemContainerStyle?: StyleProp<ViewStyle>; // Additional styling for item container
   callbackNewDataIds?: (newIds: string[]) => void; // Callback when items are reordered
   backgroundOnHold?: string; // Background color when item is being dragged
   plainPosition: number; // Current position in the list
@@ -52,10 +52,10 @@ interface DragItemProps {
  */
 interface DragListProps {
   data?: string[]; // Array of item IDs (deprecated, use dataIDs)
-  style?: any; // Style for the list container
+  style?: StyleProp<ViewStyle>; // Style for the list container
   callbackNewDataIds: (newIds: string[]) => void; // Callback when items are reordered
-  contentContainerStyle?: any; // Style for the content container
-  itemContainerStyle?: any; // Style for each item container
+  contentContainerStyle?: StyleProp<ViewStyle>; // Style for the content container
+  itemContainerStyle?: StyleProp<ViewStyle>; // Style for each item container
   renderItem: (props: {item: string}) => React.ReactElement; // Function to render item content
   renderGrip?: React.ReactElement | (() => React.ReactElement); // Optional custom drag handle
   passVibration?: () => void; // Optional haptic feedback callback

package/src/ErrorBoundary.test.tsx

@@ -1,6 +1,8 @@
-import {afterAll, beforeAll, describe, expect, it, mock} from "bun:test";
+import {afterAll, beforeAll, describe, expect, it, mock, spyOn} from "bun:test";
+import React from "react";
 
 import {ErrorBoundary} from "./ErrorBoundary";
+import {ErrorPage} from "./ErrorPage";
 import {Text} from "./Text";
 import {renderWithTheme} from "./test-utils";
 
@@ -41,4 +43,53 @@ describe("ErrorBoundary", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("sets state from getDerivedStateFromError", () => {
+    const error = new Error("derived");
+
+    const result = ErrorBoundary.getDerivedStateFromError(error);
+
+    expect(result).toEqual({error});
+  });
+
+  it("calls onError when componentDidCatch receives an error", () => {
+    const onError = mock(() => {});
+    const boundary = new ErrorBoundary({children: null, onError});
+    const error = new Error("caught");
+
+    boundary.componentDidCatch(error, {componentStack: "stack trace"});
+
+    expect(onError).toHaveBeenCalledTimes(1);
+    expect((onError as any).mock.calls[0]).toEqual([error, "stack trace"]);
+  });
+
+  it("does not throw when componentDidCatch is called without onError", () => {
+    const boundary = new ErrorBoundary({children: null});
+    const error = new Error("caught");
+
+    expect(() => boundary.componentDidCatch(error, {componentStack: "stack trace"})).not.toThrow();
+  });
+
+  it("resets error state when resetError is called", () => {
+    const boundary = new ErrorBoundary({children: null});
+    const setStateSpy = spyOn(boundary, "setState");
+
+    boundary.resetError();
+
+    expect(setStateSpy).toHaveBeenCalledTimes(1);
+    expect((setStateSpy as any).mock.calls[0][0]).toEqual({error: undefined});
+    setStateSpy.mockRestore();
+  });
+
+  it("renders ErrorPage when state has an error", () => {
+    const boundary = new ErrorBoundary({children: <Text>Child content</Text>});
+    const error = new Error("render error");
+    boundary.state = {error};
+
+    const renderedElement = boundary.render() as React.ReactElement;
+
+    expect(renderedElement.type).toBe(ErrorPage);
+    expect(renderedElement.props.error).toBe(error);
+    expect(typeof renderedElement.props.resetError).toBe("function");
+  });
 });

package/src/Icon.tsx

@@ -4,9 +4,6 @@ import type {FC} from "react";
 import {type IconProps, iconSizeToNumber} from "./Common";
 import {useTheme} from "./Theme";
 
-// TODO: Update <Icon /> to be closer to Expo's Vector Icon, letting multiple icon packs be used,
-// etc.
-// TODO: Add documentation for adding FA6-Pro icons.
 export const Icon: FC<IconProps> = ({
   color = "primary",
   size = "md",

package/src/OpenAPIContext.test.tsx

@@ -1,10 +1,76 @@
-import {describe, expect, it} from "bun:test";
-import {render} from "@testing-library/react-native";
+import {afterEach, beforeEach, describe, expect, it, mock} from "bun:test";
+import {render, waitFor} from "@testing-library/react-native";
 import {Text} from "react-native";
 
-import {OpenAPIProvider} from "./OpenAPIContext";
+import type {OpenAPIContextType, OpenAPISpec} from "./Common";
+import {OpenAPIProvider, useOpenAPISpec} from "./OpenAPIContext";
+
+const TEST_SPEC: OpenAPISpec = {
+  paths: {
+    "/todoItems/": {
+      get: {
+        responses: {
+          "200": {
+            content: {
+              "application/json": {
+                schema: {
+                  properties: {
+                    data: {
+                      items: {
+                        properties: {
+                          metadata: {
+                            properties: {
+                              color: {description: "Color metadata", type: "string"},
+                            },
+                            type: "object",
+                          },
+                          title: {description: "Title for the todo", type: "string"},
+                        },
+                        required: ["title"],
+                        type: "object",
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+const ContextReader = ({onContext}: {onContext: (context: OpenAPIContextType) => void}) => {
+  const context = useOpenAPISpec();
+  onContext(context);
+  return <Text>Context reader</Text>;
+};
+
+const HookOutsideProvider = () => {
+  useOpenAPISpec();
+  return <Text>unreachable</Text>;
+};
 
 describe("OpenAPIContext", () => {
+  const originalFetch = globalThis.fetch;
+  const originalWarn = console.warn;
+  const originalError = console.error;
+
+  beforeEach(() => {
+    globalThis.fetch = mock(async () => ({
+      json: async () => TEST_SPEC,
+    })) as unknown as typeof globalThis.fetch;
+    console.warn = mock(() => {});
+    console.error = mock(() => {});
+  });
+
+  afterEach(() => {
+    globalThis.fetch = originalFetch;
+    console.warn = originalWarn;
+    console.error = originalError;
+  });
+
   describe("OpenAPIProvider", () => {
     it("renders children", () => {
       const {getByText} = render(
@@ -32,5 +98,120 @@ describe("OpenAPIContext", () => {
       );
       expect(toJSON()).toMatchSnapshot();
     });
+
+    it("fetches spec and resolves model fields", async () => {
+      let capturedContext: OpenAPIContextType | null = null;
+      render(
+        <OpenAPIProvider specUrl="https://api.example.com/openapi.json">
+          <ContextReader
+            onContext={(context) => {
+              capturedContext = context;
+            }}
+          />
+        </OpenAPIProvider>
+      );
+
+      await waitFor(() => {
+        expect(capturedContext?.spec).toEqual(TEST_SPEC);
+      });
+
+      const modelFields = capturedContext?.getModelFields("Todo Items");
+      expect(modelFields?.type).toBe("object");
+      expect(modelFields?.required).toEqual(["title"]);
+      expect(modelFields?.properties?.title).toEqual({
+        description: "Title for the todo",
+        type: "string",
+      });
+    });
+
+    it("resolves nested model fields using dot notation", async () => {
+      let capturedContext: OpenAPIContextType | null = null;
+      render(
+        <OpenAPIProvider specUrl="https://api.example.com/openapi.json">
+          <ContextReader
+            onContext={(context) => {
+              capturedContext = context;
+            }}
+          />
+        </OpenAPIProvider>
+      );
+
+      await waitFor(() => {
+        expect(capturedContext?.spec).toEqual(TEST_SPEC);
+      });
+
+      expect(capturedContext?.getModelField("Todo Items", "metadata.color")).toEqual({
+        description: "Color metadata",
+        type: "string",
+      });
+    });
+
+    it("warns when model path is missing", async () => {
+      let capturedContext: OpenAPIContextType | null = null;
+      render(
+        <OpenAPIProvider specUrl="https://api.example.com/openapi.json">
+          <ContextReader
+            onContext={(context) => {
+              capturedContext = context;
+            }}
+          />
+        </OpenAPIProvider>
+      );
+
+      await waitFor(() => {
+        expect(capturedContext?.spec).toEqual(TEST_SPEC);
+      });
+
+      expect(capturedContext?.getModelFields("Unknown Model")).toBeNull();
+      expect(console.warn).toHaveBeenCalledWith("No OpenAPI model found for Unknown Model");
+    });
+
+    it("warns when model field is missing", async () => {
+      let capturedContext: OpenAPIContextType | null = null;
+      render(
+        <OpenAPIProvider specUrl="https://api.example.com/openapi.json">
+          <ContextReader
+            onContext={(context) => {
+              capturedContext = context;
+            }}
+          />
+        </OpenAPIProvider>
+      );
+
+      await waitFor(() => {
+        expect(capturedContext?.spec).toEqual(TEST_SPEC);
+      });
+
+      expect(capturedContext?.getModelField("Todo Items", "missingField")).toBeUndefined();
+      expect(console.warn).toHaveBeenCalledWith(
+        "No OpenAPI field found for Todo Items:missingField"
+      );
+    });
+
+    it("logs an error when spec fetch fails", async () => {
+      globalThis.fetch = mock(async () => {
+        throw new Error("network down");
+      }) as unknown as typeof globalThis.fetch;
+
+      render(
+        <OpenAPIProvider specUrl="https://api.example.com/openapi.json">
+          <Text>Fetch failing</Text>
+        </OpenAPIProvider>
+      );
+
+      await waitFor(() => {
+        expect(console.error).toHaveBeenCalledWith(
+          "Error fetching OpenAPI spec: Error: network down"
+        );
+      });
+    });
+  });
+
+  describe("useOpenAPISpec", () => {
+    it("throws when used outside OpenAPIProvider", () => {
+      expect(() => render(<HookOutsideProvider />)).toThrow(
+        "useOpenAPISpec must be used within an OpenAPIProvider"
+      );
+    });
   });
 });

package/src/PasswordField.tsx

@@ -2,6 +2,6 @@ import type React from "react";
 
 import {Box} from "./Box";
 
-export const PasswordField = (): React.ReactElement => {
+export const PasswordField: React.FC = () => {
   return <Box />;
 };