@terreno/ui 0.0.16 → 0.0.18

package/src/Button.tsx

@@ -1,40 +1,18 @@
 import FontAwesome6 from "@expo/vector-icons/FontAwesome6";
 import debounce from "lodash/debounce";
-import {type FC, useMemo, useState} from "react";
+import {type FC, lazy, Suspense, useMemo, useState} from "react";
 import {ActivityIndicator, Pressable, Text, View} from "react-native";
 
 import {Box} from "./Box";
 import type {ButtonProps} from "./Common";
 import {isMobileDevice} from "./MediaQuery";
-import {Modal} from "./Modal";
 import {useTheme} from "./Theme";
 import {Tooltip} from "./Tooltip";
 import {Unifier} from "./Unifier";
 import {isNative} from "./Utilities";
 
-const ConfirmationModal: FC<{
-  visible: boolean;
-  title: string;
-  subtitle?: string;
-  text: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-}> = ({visible, title, subtitle, text, onConfirm, onCancel}) => {
-  return (
-    <Modal
-      onDismiss={onCancel}
-      primaryButtonOnClick={onConfirm}
-      primaryButtonText="Confirm"
-      secondaryButtonOnClick={onCancel}
-      secondaryButtonText="Cancel"
-      subtitle={subtitle}
-      title={title}
-      visible={visible}
-    >
-      <Text>{text}</Text>
-    </Modal>
-  );
-};
+// Lazy load Modal to break the circular dependency: Modal -> Button -> Modal
+const LazyModal = lazy(() => import("./Modal").then((module) => ({default: module.Modal})));
 
 const ButtonComponent: FC<ButtonProps> = ({
   confirmationText = "Are you sure you want to continue?",
@@ -159,18 +137,23 @@ const ButtonComponent: FC<ButtonProps> = ({
           </Box>
         )}
       </View>
-      {withConfirmation && (
-        <ConfirmationModal
-          onCancel={() => setShowConfirmation(false)}
-          onConfirm={async () => {
-            await onClick();
-            setShowConfirmation(false);
-          }}
-          subtitle={modalSubTitle}
-          text={confirmationText}
-          title={modalTitle}
-          visible={showConfirmation}
-        />
+      {withConfirmation && showConfirmation && (
+        <Suspense fallback={null}>
+          <LazyModal
+            onDismiss={() => setShowConfirmation(false)}
+            primaryButtonOnClick={async () => {
+              await onClick();
+              setShowConfirmation(false);
+            }}
+            primaryButtonText="Confirm"
+            secondaryButtonOnClick={() => setShowConfirmation(false)}
+            secondaryButtonText="Cancel"
+            subtitle={modalSubTitle}
+            text={confirmationText}
+            title={modalTitle}
+            visible={showConfirmation}
+          />
+        </Suspense>
       )}
     </Pressable>
   );

package/src/Common.ts

@@ -2785,3 +2785,48 @@ export interface SliderProps extends HelperTextProps, ErrorTextProps {
    */
   valueMapping?: ValueMappingItem[];
 }
+
+export interface UserInactivityProps {
+  /**
+   * Children components to embed inside UserInactivity's View.
+   * If any children component is pressed, `onAction` is called after
+   * `timeForInactivity` milliseconds.
+   */
+  children: React.ReactNode;
+
+  /**
+   * If it's explicitly set to `true` after the component has already been initialized,
+   * the timer restarts and the view is considered active until the new timer expires.
+   * @default true
+   */
+  isActive?: boolean;
+
+  /**
+   * Callback triggered anytime UserInactivity's View isn't touched for more than
+   * `timeForInactivity` milliseconds.
+   * The `active` argument is true if and only if the View wasn't touched for more
+   * than `timeForInactivity` milliseconds.
+   */
+  onAction: (active: boolean) => void;
+
+  /**
+   * If set to true, the timer is not reset when the keyboard appears
+   * or disappears.
+   * @default false
+   */
+  skipKeyboard?: boolean;
+
+  /**
+   * Optional custom style for UserInactivity's View.
+   * @default { flex: 1 }
+   */
+  style?: StyleProp<ViewStyle>;
+
+  /**
+   * Number of milliseconds after which the view is considered inactive.
+   * If it changed, the timer restarts and the view is considered active until
+   * the new timer expires.
+   * @default 10000
+   */
+  timeForInactivity?: number;
+}

package/src/DateTimeActionSheet.test.tsx

@@ -1,16 +1,65 @@
 import {describe, expect, it} from "bun:test";
 
 import {DateTimeActionSheet} from "./DateTimeActionSheet";
+import {renderWithTheme} from "./test-utils";
+
+// Note: @react-native-picker/picker, react-native-calendars, and expo-localization
+// are mocked globally in bunSetup.ts
 
 describe("DateTimeActionSheet", () => {
-  // DateTimeActionSheet uses react-native-calendars and @react-native-picker/picker
-  // which don't work in the test environment
-  it.skip("renders correctly (skipped - uses native picker and calendar)", () => {
-    expect(DateTimeActionSheet).toBeDefined();
+  const defaultProps = {
+    onChange: () => {},
+    onDismiss: () => {},
+    visible: true,
+  };
+
+  it("renders correctly with datetime type", () => {
+    const {toJSON} = renderWithTheme(
+      <DateTimeActionSheet {...defaultProps} type="datetime" value="2024-01-15T10:30:00.000Z" />
+    );
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("component is defined", () => {
     expect(DateTimeActionSheet).toBeDefined();
     expect(typeof DateTimeActionSheet).toBe("function");
   });
+
+  it("renders correctly with date type", () => {
+    const {toJSON} = renderWithTheme(
+      <DateTimeActionSheet {...defaultProps} type="date" value="2024-01-15T00:00:00.000Z" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with time type", () => {
+    const {toJSON} = renderWithTheme(
+      <DateTimeActionSheet {...defaultProps} type="time" value="2024-01-15T10:30:00.000Z" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly when not visible", () => {
+    const {toJSON} = renderWithTheme(
+      <DateTimeActionSheet
+        {...defaultProps}
+        type="datetime"
+        value="2024-01-15T10:30:00.000Z"
+        visible={false}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom timezone", () => {
+    const {toJSON} = renderWithTheme(
+      <DateTimeActionSheet
+        {...defaultProps}
+        timezone="America/Los_Angeles"
+        type="datetime"
+        value="2024-01-15T10:30:00.000Z"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/MobileAddressAutoComplete.test.tsx

@@ -1,15 +1,58 @@
-import {describe, expect, it} from "bun:test";
+import {describe, expect, it, mock} from "bun:test";
+import {forwardRef} from "react";
+import {Text, View} from "react-native";
 
 import {MobileAddressAutocomplete} from "./MobileAddressAutoComplete";
+import {renderWithTheme} from "./test-utils";
+
+// Mock react-native-google-places-autocomplete
+mock.module("react-native-google-places-autocomplete", () => ({
+  GooglePlacesAutocomplete: forwardRef(({placeholder}: any, ref) => (
+    <View ref={ref as any} testID="google-places-autocomplete">
+      <Text>{placeholder}</Text>
+    </View>
+  )),
+}));
 
 describe("MobileAddressAutocomplete", () => {
-  // MobileAddressAutocomplete uses Google Places API and complex native interactions
-  it.skip("renders correctly (skipped - uses Google Places API)", () => {
-    expect(MobileAddressAutocomplete).toBeDefined();
+  const defaultProps = {
+    handleAddressChange: () => {},
+    handleAutoCompleteChange: () => {},
+    inputValue: "",
+  };
+
+  it("renders correctly with Google API key", () => {
+    const {toJSON} = renderWithTheme(
+      <MobileAddressAutocomplete {...defaultProps} googleMapsApiKey="test-api-key" />
+    );
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("component is defined", () => {
     expect(MobileAddressAutocomplete).toBeDefined();
     expect(typeof MobileAddressAutocomplete).toBe("function");
   });
+
+  it("renders TextField fallback without Google API key", () => {
+    const {toJSON} = renderWithTheme(<MobileAddressAutocomplete {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders disabled state", () => {
+    const {toJSON} = renderWithTheme(
+      <MobileAddressAutocomplete {...defaultProps} disabled googleMapsApiKey="test-api-key" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with input value", () => {
+    const {toJSON} = renderWithTheme(
+      <MobileAddressAutocomplete
+        {...defaultProps}
+        googleMapsApiKey="test-api-key"
+        inputValue="123 Main St"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/ModalSheet.test.tsx

@@ -1,12 +1,32 @@
-import {describe, expect, it} from "bun:test";
+import {describe, expect, it, mock} from "bun:test";
+import {forwardRef, useRef} from "react";
+import {Text, View} from "react-native";
 
 import {SimpleContent, useCombinedRefs} from "./ModalSheet";
+import {renderWithTheme} from "./test-utils";
+
+// Mock react-native-modalize
+mock.module("react-native-modalize", () => ({
+  Modalize: forwardRef(({children}: {children: React.ReactNode}, ref) => (
+    <View ref={ref as any} testID="modalize">
+      {children}
+    </View>
+  )),
+}));
+
+// Mock react-native-portalize
+mock.module("react-native-portalize", () => ({
+  Portal: ({children}: {children: React.ReactNode}) => <View testID="portal">{children}</View>,
+}));
 
 describe("ModalSheet", () => {
-  // ModalSheet uses react-native-modalize and react-native-portalize
-  // which don't work in the test environment
-  it.skip("renders correctly (skipped - uses react-native-modalize)", () => {
-    expect(SimpleContent).toBeDefined();
+  it("renders correctly with children", () => {
+    const {toJSON} = renderWithTheme(
+      <SimpleContent>
+        <Text>Test Content</Text>
+      </SimpleContent>
+    );
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("SimpleContent is defined", () => {
@@ -17,4 +37,16 @@ describe("ModalSheet", () => {
     expect(useCombinedRefs).toBeDefined();
     expect(typeof useCombinedRefs).toBe("function");
   });
+
+  it("useCombinedRefs combines multiple refs", () => {
+    const TestComponent = () => {
+      const ref1 = useRef<View>(null);
+      const ref2 = useRef<View>(null);
+      const combinedRef = useCombinedRefs(ref1, ref2);
+      return <View ref={combinedRef} testID="combined-ref-view" />;
+    };
+
+    const {getByTestId} = renderWithTheme(<TestComponent />);
+    expect(getByTestId("combined-ref-view")).toBeTruthy();
+  });
 });

package/src/PickerSelect.test.tsx

@@ -1,16 +1,52 @@
-import {describe, expect, it} from "bun:test";
+import {describe, expect, it, mock} from "bun:test";
 
 import {RNPickerSelect} from "./PickerSelect";
+import {renderWithTheme} from "./test-utils";
+
+// Note: @react-native-picker/picker is mocked globally in bunSetup.ts
 
 describe("PickerSelect", () => {
-  // PickerSelect uses @react-native-picker/picker which has internal issues
-  // with the test renderer (TypeError: undefined is not an object evaluating 'item.key')
-  it.skip("renders correctly (skipped - Picker component not supported in test environment)", () => {
-    expect(RNPickerSelect).toBeDefined();
+  const defaultProps = {
+    items: [
+      {label: "Option 1", value: "1"},
+      {label: "Option 2", value: "2"},
+      {label: "Option 3", value: "3"},
+    ],
+    onValueChange: () => {},
+    placeholder: {label: "Select an option", value: ""},
+  };
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("component is defined", () => {
     expect(RNPickerSelect).toBeDefined();
     expect(typeof RNPickerSelect).toBe("function");
   });
+
+  it("renders with selected value", () => {
+    const {toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} value="2" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders disabled state", () => {
+    const {toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} disabled />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders without placeholder when placeholder is empty object", () => {
+    const {toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} placeholder={{}} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("calls onValueChange when value changes", () => {
+    const mockOnValueChange = mock(() => {});
+    renderWithTheme(
+      <RNPickerSelect {...defaultProps} onValueChange={mockOnValueChange} value="1" />
+    );
+    // The component is rendered, onValueChange would be called on user interaction
+    expect(mockOnValueChange).toBeDefined();
+  });
 });

package/src/Signature.test.tsx

@@ -1,15 +1,32 @@
-import {describe, expect, it} from "bun:test";
+import {describe, expect, it, mock} from "bun:test";
+import {forwardRef} from "react";
+import {View} from "react-native";
 
 import {Signature} from "./Signature";
+import {renderWithTheme} from "./test-utils";
+
+// Mock react-signature-canvas
+mock.module("react-signature-canvas", () => ({
+  default: forwardRef(({backgroundColor}: any, ref) => (
+    <View ref={ref as any} style={{backgroundColor}} testID="signature-canvas" />
+  )),
+}));
 
 describe("Signature", () => {
-  // Signature uses react-signature-canvas which requires a canvas/DOM environment
-  it.skip("renders correctly (skipped - requires canvas environment)", () => {
-    expect(Signature).toBeDefined();
+  it("renders correctly", () => {
+    const mockOnChange = mock(() => {});
+    const {toJSON} = renderWithTheme(<Signature onChange={mockOnChange} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("component is defined", () => {
     expect(Signature).toBeDefined();
     expect(typeof Signature).toBe("function");
   });
+
+  it("renders with clear button", () => {
+    const mockOnChange = mock(() => {});
+    const {getByText} = renderWithTheme(<Signature onChange={mockOnChange} />);
+    expect(getByText("Clear")).toBeTruthy();
+  });
 });

package/src/SignatureField.test.tsx

@@ -1,16 +1,60 @@
-import {describe, expect, it} from "bun:test";
+import {describe, expect, it, mock} from "bun:test";
+import {forwardRef} from "react";
+import {View} from "react-native";
 
 import {SignatureField} from "./SignatureField";
+import {renderWithTheme} from "./test-utils";
+
+// Mock react-signature-canvas (used by Signature component)
+mock.module("react-signature-canvas", () => ({
+  default: forwardRef(({backgroundColor}: any, ref) => (
+    <View ref={ref as any} style={{backgroundColor}} testID="signature-canvas" />
+  )),
+}));
 
 describe("SignatureField", () => {
-  // SignatureField uses react-signature-canvas which requires a canvas/DOM environment
-  // that isn't available in the bun test environment
-  it.skip("renders correctly (skipped - requires canvas environment)", () => {
-    expect(SignatureField).toBeDefined();
+  const defaultProps = {
+    onChange: () => {},
+  };
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<SignatureField {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("component is defined", () => {
     expect(SignatureField).toBeDefined();
     expect(typeof SignatureField).toBe("function");
   });
+
+  it("renders with custom title", () => {
+    const {getByText} = renderWithTheme(<SignatureField {...defaultProps} title="Sign Here" />);
+    expect(getByText("Sign Here")).toBeTruthy();
+  });
+
+  it("renders disabled state with value", () => {
+    const {toJSON} = renderWithTheme(
+      <SignatureField
+        {...defaultProps}
+        disabled
+        disabledText="Signature captured"
+        value="data:image/png;base64,test"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders disabled state without value", () => {
+    const {toJSON} = renderWithTheme(
+      <SignatureField {...defaultProps} disabled disabledText="Signature not available" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with error text", () => {
+    const {getByText} = renderWithTheme(
+      <SignatureField {...defaultProps} errorText="Signature is required" />
+    );
+    expect(getByText("Signature is required")).toBeTruthy();
+  });
 });

package/src/SplitPage.test.tsx

@@ -1,15 +1,82 @@
-import {describe, expect, it} from "bun:test";
+import {describe, expect, it, mock} from "bun:test";
+import {View} from "react-native";
 
 import {SplitPage} from "./SplitPage";
+import {renderWithTheme} from "./test-utils";
+
+// Mock react-native-swiper-flatlist
+mock.module("react-native-swiper-flatlist", () => ({
+  SwiperFlatList: ({children}: {children: React.ReactNode}) => (
+    <View testID="swiper-flatlist">{children}</View>
+  ),
+}));
 
 describe("SplitPage", () => {
-  // SplitPage uses react-native-swiper-flatlist and complex FlatList interactions
-  it.skip("renders correctly (skipped - uses react-native-swiper-flatlist)", () => {
-    expect(SplitPage).toBeDefined();
+  const defaultProps = {
+    listViewData: [
+      {id: "1", name: "Item 1"},
+      {id: "2", name: "Item 2"},
+    ],
+    renderListViewItem: ({item}: {item: {id: string; name: string}}) => (
+      <View testID={`item-${item.id}`} />
+    ),
+  };
+
+  it("renders correctly with renderContent", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage
+        {...defaultProps}
+        renderContent={(selectedId) => <View testID={`content-${selectedId}`} />}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with children", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage {...defaultProps}>
+        <View testID="child-1" />
+        <View testID="child-2" />
+      </SplitPage>
+    );
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("component is defined", () => {
     expect(SplitPage).toBeDefined();
     expect(typeof SplitPage).toBe("function");
   });
+
+  it("renders with loading state", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage
+        {...defaultProps}
+        loading
+        renderContent={(selectedId) => <View testID={`content-${selectedId}`} />}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom color", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage
+        {...defaultProps}
+        color="primary"
+        renderContent={(selectedId) => <View testID={`content-${selectedId}`} />}
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with tabs when more than 2 children", () => {
+    const {toJSON} = renderWithTheme(
+      <SplitPage {...defaultProps} tabs={["Tab 1", "Tab 2", "Tab 3"]}>
+        <View testID="child-1" />
+        <View testID="child-2" />
+        <View testID="child-3" />
+      </SplitPage>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/TerrenoProvider.tsx

@@ -1,11 +1,11 @@
 import type React from "react";
 import type {FC} from "react";
 import {Host} from "react-native-portalize";
-import {ToastProvider} from "react-native-toast-notifications";
 
 import {OpenAPIProvider} from "./OpenAPIContext";
 import {ThemeProvider} from "./Theme";
 import {Toast} from "./Toast";
+import {ToastProvider} from "./ToastNotifications";
 
 export const TerrenoProvider: FC<{
   children: React.ReactNode;

package/src/Toast.tsx

@@ -1,12 +1,12 @@
 import type React from "react";
 import {Platform, Pressable, View} from "react-native";
-import {useToast as useRNToast} from "react-native-toast-notifications";
 
 import type {IconName, SurfaceColor, TextColor, ToastProps} from "./Common";
 import {Heading} from "./Heading";
 import {Icon} from "./Icon";
 import {Text} from "./Text";
 import {useTheme} from "./Theme";
+import {useToastNotifications} from "./ToastNotifications";
 import {isAPIError, printAPIError} from "./Utilities";
 
 const TOAST_DURATION_MS = 3 * 1000;
@@ -30,7 +30,7 @@ export function useToast(): {
   show: (title: string, options?: UseToastOptions) => string;
   catch: (error: any, message?: string, options?: UseToastVariantOptions) => void;
 } {
-  const toast = useRNToast();
+  const toast = useToastNotifications();
   const show = (title: string, options?: UseToastOptions): string => {
     const toastData = {
       variant: "info",
@@ -79,7 +79,6 @@ export function useToast(): {
 
 // TODO: Support secondary version of Toast.
 // TODO: Support dismissible version of Toast. Currently only persistent are dismissible.
-// This may require a different library from react-native-toast-notifications.
 export const Toast = ({
   title,
   variant = "info",