@terreno/ui 0.14.2 → 0.15.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -26,6 +26,7 @@
     "@react-native-community/slider": "5.0.1",
     "@react-native-picker/picker": "2.11.4",
     "@react-navigation/native": "^7.1.8",
+    "@shopify/react-native-skia": "2.2.12",
     "emoji-datasource": "^16.0.0",
     "expo-clipboard": "~8.0.8",
     "expo-document-picker": "~14.0.8",
@@ -67,12 +68,10 @@
     "react-native-reanimated": "~4.1.1",
     "react-native-safe-area-context": "~5.6.0",
     "react-native-screens": "~4.16.0",
-    "react-native-signature-canvas": "^4.7.4",
     "react-native-svg": "15.12.1",
     "react-native-swiper-flatlist": "^3.2.5",
     "react-native-web": "~0.21.0",
     "react-native-webview": "13.15.0",
-    "react-signature-canvas": "^1.1.0-alpha.2",
     "react-time-picker": "^8.0.2"
   },
   "devDependencies": {
@@ -87,7 +86,6 @@
     "@types/minimatch": "^6.0.0",
     "@types/react": "~19.1.10",
     "@types/react-datetime-picker": "^5.0.0",
-    "@types/react-signature-canvas": "^1.0.5",
     "@types/react-time-picker": "^6.0.0",
     "babel-preset-react-app": "^10.0.1",
     "expo-modules-core": "~3.0.29",
@@ -138,5 +136,5 @@
     "test:coverage": "TZ=America/New_York bun run ../scripts/check-coverage.ts",
     "types": "bun typedoc"
   },
-  "version": "0.14.2"
+  "version": "0.15.0"
 }

package/src/Badge.test.tsx

@@ -34,6 +34,13 @@ describe("Badge", () => {
     expect(getByText("50")).toBeTruthy();
   });
 
+  it("keeps number badges scannable with a minimum width", () => {
+    const {getByTestId} = renderWithTheme(
+      <Badge testID="number-badge" value={5} variant="numberOnly" />
+    );
+    expect(getByTestId("number-badge")).toHaveStyle({minWidth: 20});
+  });
+
   it("applies correct status colors", () => {
     const statuses = ["error", "warning", "info", "success", "neutral"] as const;
 

package/src/Badge.tsx

@@ -108,6 +108,7 @@ export const Badge = ({
             paddingVertical: variant === "iconOnly" ? 1 : theme.spacing.xs,
             width: variant === "iconOnly" ? 16 : "auto",
           },
+          ...(variant === "numberOnly" ? [{minWidth: 20}] : []),
           isIconOnly && {height: 16, width: 16},
           secondary && {borderColor, borderWidth: 1},
         ]}

package/src/Banner.test.tsx

@@ -1,12 +1,17 @@
-import {describe, expect, it, mock} from "bun:test";
-import {act, fireEvent, waitFor} from "@testing-library/react-native";
+import {beforeEach, describe, expect, it, mock} from "bun:test";
+import {act, fireEvent, render, waitFor} from "@testing-library/react-native";
 import React from "react";
 
-import {Banner, hideBanner} from "./Banner";
+import {Banner, BannerButton, hideBanner} from "./Banner";
+import {ThemeContext} from "./Theme";
 import {renderWithTheme} from "./test-utils";
 import {Unifier} from "./Unifier";
 
 describe("Banner", () => {
+  beforeEach(() => {
+    Unifier.storage.getItem = mock(() => Promise.resolve(null));
+    Unifier.storage.setItem = mock(() => Promise.resolve());
+  });
   it("renders correctly with default props", () => {
     const {toJSON} = renderWithTheme(<Banner id="test-banner" text="Test message" />);
     expect(toJSON()).toMatchSnapshot();
@@ -274,4 +279,19 @@ describe("Banner", () => {
       expect(queryByText("Non persistent")).toBeNull();
     });
   });
+
+  it("BannerButton returns null when theme is not available", () => {
+    const nullThemeContext = {
+      resetTheme: () => {},
+      setPrimitives: () => {},
+      setTheme: () => {},
+      theme: null,
+    };
+    const {toJSON} = render(
+      <ThemeContext.Provider value={nullThemeContext as never}>
+        <BannerButton buttonOnClick={() => {}} buttonText="Test" />
+      </ThemeContext.Provider>
+    );
+    expect(toJSON()).toBeNull();
+  });
 });

package/src/Banner.tsx

@@ -17,7 +17,7 @@ type BannerButtonProps = {
   loading?: boolean;
 };
 
-const BannerButton = ({
+export const BannerButton = ({
   loading: propsLoading,
   buttonText,
   buttonIconName,
@@ -178,14 +178,14 @@ export const Banner = (props: BannerProps): React.ReactElement | null => {
           <View style={{paddingLeft: 16, paddingRight: 10}}>
             <BannerButton
               buttonIconName={buttonIconName}
-              buttonOnClick={buttonOnClick ?? (() => {})}
+              buttonOnClick={buttonOnClick!}
               buttonText={buttonText}
             />
           </View>
         )}
         {Boolean(buttonText && !buttonIconName && buttonOnClick) && (
           <View style={{paddingLeft: 16, paddingRight: 10}}>
-            <BannerButton buttonOnClick={buttonOnClick ?? (() => {})} buttonText={buttonText} />
+            <BannerButton buttonOnClick={buttonOnClick!} buttonText={buttonText} />
           </View>
         )}
       </View>

package/src/DateTimeField.test.tsx

@@ -1105,4 +1105,230 @@ describe("DateTimeField", () => {
       expect(mockOnChange).toHaveBeenCalled();
     });
   });
+
+  describe("12 AM handling in time type (getISOFromFields)", () => {
+    it("should convert hour 12 AM to 0 in time type", async () => {
+      setDesktop();
+      const user = userEvent.setup();
+      // 04:00 UTC = 00:00 (12:00 AM) in America/New_York
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="time"
+          value="2023-05-15T04:00:00.000Z"
+        />
+      );
+      expect(getByPlaceholderText("hh").props.value).toBe("12");
+
+      const minuteInput = getByPlaceholderText("mm");
+      await user.clear(minuteInput);
+      await user.type(minuteInput, "15");
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+      expect(mockOnChange).toHaveBeenCalled();
+      const lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+      const parsed = DateTime.fromISO(lastCall).setZone("America/New_York");
+      expect(parsed.hour).toBe(0);
+      expect(parsed.minute).toBe(15);
+    });
+
+    it("should convert hour 12 AM to 0 in datetime type", async () => {
+      setDesktop();
+      const user = userEvent.setup();
+      // 04:30 UTC = 00:30 (12:30 AM) in America/New_York
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T04:30:00.000Z"
+        />
+      );
+      expect(getByPlaceholderText("hh").props.value).toBe("12");
+
+      const minuteInput = getByPlaceholderText("mm");
+      await user.clear(minuteInput);
+      await user.type(minuteInput, "45");
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+      expect(mockOnChange).toHaveBeenCalled();
+      const lastCall = mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
+      const parsed = DateTime.fromISO(lastCall).setZone("America/New_York");
+      expect(parsed.hour).toBe(0);
+    });
+  });
+
+  describe("onActionSheetChange invalid date handling", () => {
+    it("should warn and return early for invalid ISO string", async () => {
+      setDesktop();
+      const warnSpy = mock(() => {});
+      const originalWarn = console.warn;
+      console.warn = warnSpy;
+
+      const {UNSAFE_root} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="date"
+          value="2023-05-15T00:00:00.000Z"
+        />
+      );
+
+      mockOnChange.mockClear();
+      const actionSheet = UNSAFE_root.findAll(
+        (n: any) => n.props?.onChange && n.props?.visible !== undefined
+      );
+      expect(actionSheet.length).toBeGreaterThan(0);
+      await act(async () => {
+        actionSheet[0].props.onChange("not-a-valid-date");
+      });
+      expect(warnSpy).toHaveBeenCalledWith(
+        "Invalid date passed to DateTimeField",
+        "not-a-valid-date"
+      );
+      expect(mockOnChange).not.toHaveBeenCalled();
+
+      console.warn = originalWarn;
+    });
+  });
+
+  describe("useEffect invalid value handling", () => {
+    it("should warn and return early for invalid non-empty value prop", () => {
+      const warnSpy = mock(() => {});
+      const originalWarn = console.warn;
+      console.warn = warnSpy;
+
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField onChange={mockOnChange} type="date" value="invalid-date-string" />
+      );
+
+      expect(warnSpy).toHaveBeenCalledWith(
+        "Invalid date passed to DateTimeField",
+        "invalid-date-string"
+      );
+      expect(getByPlaceholderText("MM").props.value).toBe("");
+
+      console.warn = originalWarn;
+    });
+
+    it("should warn for invalid value in time type", () => {
+      const warnSpy = mock(() => {});
+      const originalWarn = console.warn;
+      console.warn = warnSpy;
+
+      renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="time"
+          value="not-valid"
+        />
+      );
+
+      expect(warnSpy).toHaveBeenCalledWith("Invalid date passed to DateTimeField", "not-valid");
+
+      console.warn = originalWarn;
+    });
+  });
+
+  describe("getFieldValue datetime hour/minute indices", () => {
+    it("should return hour and minute for datetime indices 3 and 4", () => {
+      setDesktop();
+      // 20:30 UTC = 4:30 PM in America/New_York
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T20:30:00.000Z"
+        />
+      );
+      // Indices 0-2 are date fields, indices 3-4 are hour/minute
+      expect(getByPlaceholderText("hh").props.value).toBe("04");
+      expect(getByPlaceholderText("mm").props.value).toBe("30");
+    });
+
+    it("should return hour and minute for datetime at midnight", () => {
+      setDesktop();
+      // 04:00 UTC = 00:00 (12:00 AM) in America/New_York
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T04:00:00.000Z"
+        />
+      );
+      expect(getByPlaceholderText("hh").props.value).toBe("12");
+      expect(getByPlaceholderText("mm").props.value).toBe("00");
+    });
+  });
+
+  describe("handleTimezoneChange branches", () => {
+    it("should call onTimezoneChange when provided for datetime type", async () => {
+      setDesktop();
+      const mockTzChange = mock(() => {});
+      const {UNSAFE_root} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          onTimezoneChange={mockTzChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T15:30:00.000Z"
+        />
+      );
+
+      const tzPickers = UNSAFE_root.findAll((n: any) => n.props?.onTimezoneChange);
+      expect(tzPickers.length).toBeGreaterThan(0);
+      await act(async () => {
+        tzPickers[0].props.onTimezoneChange("America/Chicago");
+      });
+      expect(mockTzChange).toHaveBeenCalledWith("America/Chicago");
+    });
+
+    it("should set local timezone when onTimezoneChange not provided for datetime type", async () => {
+      setDesktop();
+      const {UNSAFE_root} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T15:30:00.000Z"
+        />
+      );
+
+      const tzPickers = UNSAFE_root.findAll((n: any) => n.props?.onTimezoneChange);
+      expect(tzPickers.length).toBeGreaterThan(0);
+      await act(async () => {
+        tzPickers[0].props.onTimezoneChange("America/Chicago");
+      });
+      expect(mockOnChange).toHaveBeenCalled();
+    });
+  });
+
+  describe("minute validation in validateField", () => {
+    it("should validate minute field for datetime type via hour change triggering revalidation", async () => {
+      setDesktop();
+      const user = userEvent.setup();
+      const {getByPlaceholderText} = renderWithTheme(
+        <DateTimeField
+          onChange={mockOnChange}
+          timezone="America/New_York"
+          type="datetime"
+          value="2023-05-15T15:30:00.000Z"
+        />
+      );
+      // Type an invalid hour (triggers validateField for datetime index 3)
+      const hourInput = getByPlaceholderText("hh");
+      await user.clear(hourInput);
+      await user.type(hourInput, "0");
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      });
+      expect(hourInput).toBeTruthy();
+    });
+  });
 });

package/src/Field.test.tsx

@@ -125,4 +125,27 @@ describe("Field", () => {
     );
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("renders customSelect field", () => {
+    const {toJSON} = renderWithTheme(
+      <Field
+        label="Custom"
+        onChange={() => {}}
+        options={[
+          {label: "Option A", value: "a"},
+          {label: "Option B", value: "b"},
+        ]}
+        type="customSelect"
+        value="a"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders signature field", () => {
+    const {toJSON} = renderWithTheme(
+      <Field label="Sign here" onChange={() => {}} type="signature" value="" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/PickerSelect.test.tsx

@@ -308,6 +308,28 @@ describe("PickerSelect", () => {
         restoreDocument();
       }
     });
+
+    it("calls onValueChange when a web dropdown option is selected", async () => {
+      ensureDocument();
+      savedOS = PlatformModule.OS;
+      try {
+        PlatformModule.OS = "web";
+        const mockOnValueChange = mock(() => {});
+        const {getByTestId} = renderWithTheme(
+          <RNPickerSelect {...defaultProps} onValueChange={mockOnValueChange} value="1" />
+        );
+        await act(async () => {
+          fireEvent.press(getByTestId("web_picker"));
+        });
+        await act(async () => {
+          fireEvent.press(getByTestId("web_dropdown_option_2"));
+        });
+        expect(mockOnValueChange).toHaveBeenCalledWith("2", 2);
+      } finally {
+        PlatformModule.OS = savedOS;
+        restoreDocument();
+      }
+    });
   });
 
   describe("android rendering", () => {

package/src/PickerSelect.tsx

@@ -38,6 +38,7 @@ import {
   Text,
   TextInput,
   type TextInputProps,
+  type TextProps,
   TouchableOpacity,
   View,
 } from "react-native";
@@ -388,6 +389,7 @@ export const RNPickerSelect = ({
       return <View style={{pointerEvents: "box-only"}}>{children}</View>;
     }
 
+    const textProps = textInputProps as Partial<TextProps> | undefined;
     return (
       <View
         style={{
@@ -397,13 +399,27 @@ export const RNPickerSelect = ({
           width: "100%",
         }}
       >
-        <TextInput
-          readOnly
-          style={{color: disabled ? theme.text.secondaryLight : theme.text.primary}}
-          testID="text_input"
-          value={selectedItem?.inputLabel ? selectedItem?.inputLabel : selectedItem?.label}
-          {...textInputProps}
-        />
+        {disabled ? (
+          <Text
+            {...textProps}
+            style={
+              textProps?.style
+                ? [{color: theme.text.secondaryLight, flex: 1}, textProps.style]
+                : {color: theme.text.secondaryLight, flex: 1}
+            }
+            testID={textInputProps?.testID ?? "text_input"}
+          >
+            {selectedItem?.inputLabel ? selectedItem?.inputLabel : selectedItem?.label}
+          </Text>
+        ) : (
+          <TextInput
+            readOnly
+            style={{color: theme.text.primary}}
+            testID="text_input"
+            value={selectedItem?.inputLabel ? selectedItem?.inputLabel : selectedItem?.label}
+            {...textInputProps}
+          />
+        )}
         {renderIcon()}
       </View>
     );
@@ -629,7 +645,7 @@ export const RNPickerSelect = ({
           {...touchableWrapperProps}
         >
           <Text
-            numberOfLines={1}
+            numberOfLines={disabled ? undefined : 1}
             style={{
               color: disabled ? theme.text.secondaryLight : theme.text.primary,
               flex: 1,