@terreno/ui 0.13.0 → 0.14.0

package/src/DateUtilities.tsx

@@ -61,7 +61,7 @@ export function humanDate(
   date: string,
   {timezone, dontShowTime}: {timezone?: string; dontShowTime?: boolean} = {}
 ): string {
-  let clonedDate;
+  let clonedDate: DateTime;
   try {
     clonedDate = getDate(date, {timezone});
   } catch (error: unknown) {
@@ -95,7 +95,7 @@ export function humanDateAndTime(
   date: string,
   {timezone, showTimezone = true}: {timezone?: string; showTimezone?: boolean} = {}
 ): string {
-  let clonedDate;
+  let clonedDate: DateTime;
   try {
     clonedDate = getDate(date, {timezone});
   } catch (error: unknown) {
@@ -162,7 +162,7 @@ export const printDate = (
     return justDate.startOf("day").toFormat("M/d/yyyy");
   }
 
-  let clonedDate;
+  let clonedDate: DateTime;
   try {
     clonedDate = getDate(date, {timezone});
   } catch (error: unknown) {
@@ -214,7 +214,7 @@ export function printTime(
   if (!date) {
     return defaultValue ?? "Invalid Date";
   }
-  let clonedDate;
+  let clonedDate: DateTime;
   if (!timezone) {
     throw new Error("printTime: timezone is required");
   }
@@ -250,7 +250,7 @@ export function printDateAndTime(
   if (!date) {
     return defaultValue ?? "Invalid Datetime";
   }
-  let clonedDate;
+  let clonedDate: DateTime;
   try {
     clonedDate = getDate(date, {timezone});
   } catch (error: unknown) {
@@ -307,7 +307,7 @@ export function printSince(
   date: string,
   {timezone, showAgo = true}: {timezone?: string; showAgo?: boolean} = {}
 ): string {
-  let clonedDate;
+  let clonedDate: DateTime;
   const ago = showAgo ? " ago" : "";
   try {
     clonedDate = getDate(date, {timezone});

package/src/DecimalRangeActionSheet.test.tsx

@@ -94,4 +94,32 @@ describe("DecimalRangeActionSheet", () => {
     });
     expect(handleChange).toHaveBeenCalled();
   });
+
+  it("invokes actionSheetRef.setModalVisible(false) when Close is pressed", () => {
+    const actionSheetRef = createRef<ActionSheet>();
+    const {UNSAFE_getAllByProps} = render(
+      <ThemeProvider>
+        <DecimalRangeActionSheet
+          actionSheetRef={actionSheetRef}
+          max={10}
+          min={0}
+          onChange={() => {}}
+          value="5.5"
+        />
+      </ThemeProvider>
+    );
+
+    // Spy on the ActionSheet instance's setModalVisible after React assigns the ref
+    const spy = mock(() => {});
+    if (actionSheetRef.current) {
+      actionSheetRef.current.setModalVisible = spy;
+    }
+
+    const closeButtons = UNSAFE_getAllByProps({text: "Close"});
+    const buttonOnClick = closeButtons[0].props.onClick as () => void;
+    act(() => {
+      buttonOnClick();
+    });
+    expect(spy).toHaveBeenCalledWith(false);
+  });
 });

package/src/ErrorBoundary.test.tsx

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {afterAll, beforeAll, describe, expect, it, mock, spyOn} from "bun:test";
 import React from "react";
 

package/src/HeightField.test.tsx

@@ -206,3 +206,71 @@ describe("HeightField", () => {
     });
   });
 });
+
+describe("HeightField - Android platform", () => {
+  // Toggle Platform.OS to "android" to exercise the Android rendering branch
+  // that uses SelectField pickers instead of the Pressable+ActionSheet path.
+  const {Platform} = require("react-native") as {Platform: {OS: string}};
+  const originalOS = Platform.OS;
+
+  beforeEach(() => {
+    Platform.OS = "android";
+  });
+
+  afterEach(() => {
+    Platform.OS = originalOS;
+  });
+
+  it("renders Android pickers with title, helperText, and errorText", () => {
+    const onChange = mock(() => {});
+    const {getByText, queryByLabelText} = renderWithTheme(
+      <HeightField
+        errorText="Required"
+        helperText="Enter height"
+        onChange={onChange}
+        title="Height"
+        value="70"
+      />
+    );
+    // Title and helper/error rendered
+    expect(getByText("Height")).toBeTruthy();
+    expect(getByText("Enter height")).toBeTruthy();
+    expect(getByText("Required")).toBeTruthy();
+    // The Pressable from the iOS branch should NOT be present.
+    expect(queryByLabelText("Height selector")).toBeNull();
+  });
+
+  it("renders Android pickers in disabled state", () => {
+    const onChange = mock(() => {});
+    const {root} = renderWithTheme(
+      <HeightField disabled onChange={onChange} title="Height" value="60" />
+    );
+    expect(root).toBeTruthy();
+  });
+
+  it("forwards feet picker changes to onChange (Android)", () => {
+    const onChange = mock(() => {});
+    const {SelectField} = require("./SelectField") as {
+      SelectField: React.ComponentType<{onChange?: (v: string) => void}>;
+    };
+    const {UNSAFE_getAllByType} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const selects = UNSAFE_getAllByType(SelectField);
+    expect(selects.length).toBe(2);
+    // First SelectField is feet. value="70" → 5ft 10in. Bumping feet to 6 yields 6*12+10=82.
+    selects[0].props.onChange?.("6");
+    expect(onChange).toHaveBeenCalledWith("82");
+  });
+
+  it("forwards inches picker changes to onChange (Android)", () => {
+    const onChange = mock(() => {});
+    const {SelectField} = require("./SelectField") as {
+      SelectField: React.ComponentType<{onChange?: (v: string) => void}>;
+    };
+    const {UNSAFE_getAllByType} = renderWithTheme(<HeightField onChange={onChange} value="70" />);
+    const selects = UNSAFE_getAllByType(SelectField);
+    expect(selects.length).toBe(2);
+    // Second SelectField is inches. value="70" → 5ft 10in. Changing inches to 3 yields 5*12+3=63.
+    selects[1].props.onChange?.("3");
+    expect(onChange).toHaveBeenCalledWith("63");
+  });
+});

package/src/HeightField.tsx

@@ -1,6 +1,7 @@
 import {type FC, useCallback, useEffect, useMemo, useRef, useState} from "react";
 import {Platform, Pressable, type StyleProp, TextInput, View} from "react-native";
 
+import type {ActionSheet} from "./ActionSheet";
 import {Box} from "./Box";
 import type {HeightFieldProps, TextStyleWithOutline} from "./Common";
 import {FieldError, FieldHelperText, FieldTitle} from "./fieldElements";
@@ -154,7 +155,7 @@ export const HeightField: FC<HeightFieldProps> = ({
   max,
 }) => {
   const {theme} = useTheme();
-  const actionSheetRef: React.RefObject<any> = useRef(null);
+  const actionSheetRef = useRef<ActionSheet | null>(null);
   const isMobileOrNative = isMobileDevice() || isNative();
 
   const minInches = min ?? DEFAULT_MIN_INCHES;

package/src/Hyperlink.tsx

@@ -36,73 +36,94 @@
 
 import * as mdurl from "mdurl";
 import React from "react";
-import {Linking, Platform, Text, View} from "react-native";
+import {Linking, Platform, type StyleProp, Text, type TextStyle, View} from "react-native";
 
 import type {HyperlinkProps} from "./Common";
 
-const linkifyLib = require("linkify-it")();
+interface LinkifyMatch {
+  index: number;
+  lastIndex: number;
+  raw: string;
+  schema: string;
+  text: string;
+  url: string;
+}
+
+interface LinkifyItLike {
+  pretest: (text: string) => boolean;
+  test: (text: string) => boolean;
+  match: (text: string) => LinkifyMatch[] | null;
+}
+
+const linkifyLib: LinkifyItLike = require("linkify-it")();
 
 const {OS} = Platform;
 
 // Leaving this as a class component because it was easier to handle the `parse(this)` in
 // `render()`
 class HyperlinkComponent extends React.Component<HyperlinkProps> {
-  isTextNested = (component: any) => {
+  isTextNested = (component: React.ReactElement) => {
     if (!React.isValidElement(component)) throw new Error("Invalid component");
-    const {type: {displayName} = {} as any} = component;
+    const componentType = (component.type as {displayName?: string} | undefined) ?? {};
+    const {displayName} = componentType;
     if (displayName !== "Text") throw new Error("Not a Text component");
-    return typeof (component.props as any).children !== "string";
+    return typeof (component.props as {children?: unknown}).children !== "string";
   };
 
-  linkify = (component: any) => {
+  linkify = (component: React.ReactElement<{children: string; style?: unknown}>) => {
     const linkifyIt = this.props.linkify || linkifyLib;
 
     if (!linkifyIt.pretest(component.props.children) || !linkifyIt.test(component.props.children))
       return component;
 
-    const elements = [];
+    const elements: React.ReactNode[] = [];
     let _lastIndex = 0;
 
-    const {key: _key, ref: _ref, ...componentProps} = component.props;
+    const {key: _key, ref: _ref, ...componentProps} = component.props as Record<string, unknown>;
 
     try {
-      linkifyIt.match(component.props.children).forEach(({index, lastIndex, text, url}: any) => {
-        const nonLinkedText = component.props.children.substring(_lastIndex, index);
-        nonLinkedText && elements.push(nonLinkedText);
-        _lastIndex = lastIndex;
-        if (this.props.linkText)
-          text =
-            typeof this.props.linkText === "function"
-              ? this.props.linkText(url)
-              : this.props.linkText;
-
-        const clickHandlerProps: any = {};
-        if (OS !== "web") {
-          if (this.props.onLongPress) {
-            clickHandlerProps.onLongPress = () => (this.props as any).onLongPress(url, text);
+      linkifyIt
+        .match(component.props.children)
+        ?.forEach(({index, lastIndex, text, url}: LinkifyMatch) => {
+          const nonLinkedText = component.props.children.substring(_lastIndex, index);
+          nonLinkedText && elements.push(nonLinkedText);
+          _lastIndex = lastIndex;
+          if (this.props.linkText)
+            text =
+              typeof this.props.linkText === "function"
+                ? this.props.linkText(url)
+                : this.props.linkText;
+
+          const clickHandlerProps: {onPress?: () => void; onLongPress?: () => void} = {};
+          if (OS !== "web") {
+            if (this.props.onLongPress) {
+              clickHandlerProps.onLongPress = () => this.props.onLongPress?.(url, text);
+            }
+          }
+          if (this.props.onPress) {
+            // The HyperlinkProps onPress signature is (url) => void per Common.ts, but this forked
+            // component invokes it with both url and text. Cast to avoid arity mismatch.
+            const onPressFn = this.props.onPress as (url: string, text: string) => void;
+            clickHandlerProps.onPress = () => onPressFn(url, text);
           }
-        }
-        if (this.props.onPress) {
-          clickHandlerProps.onPress = () => (this.props as any).onPress(url, text);
-        }
-
-        let injected: any = {};
-        if (this.props.injectViewProps) {
-          injected = this.props.injectViewProps(url);
-        }
-
-        elements.push(
-          <Text
-            {...componentProps}
-            {...clickHandlerProps}
-            key={url + index}
-            style={[component.props.style, this.props.linkStyle]}
-            {...injected}
-          >
-            {text}
-          </Text>
-        );
-      });
+
+          let injected: Record<string, unknown> = {};
+          if (this.props.injectViewProps) {
+            injected = this.props.injectViewProps(url);
+          }
+
+          elements.push(
+            <Text
+              {...componentProps}
+              {...clickHandlerProps}
+              key={url + index}
+              style={[component.props.style, this.props.linkStyle]}
+              {...injected}
+            >
+              {text}
+            </Text>
+          );
+        });
       elements.push(
         component.props.children.substring(_lastIndex, component.props.children.length)
       );
@@ -112,11 +133,13 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
     }
   };
 
-  parse = (component: any): React.ReactElement => {
-    const {props: {children} = {} as any} = component || {};
+  parse = (component: React.ReactElement): React.ReactElement => {
+    const props =
+      (component?.props as {children?: React.ReactNode; style?: StyleProp<TextStyle>}) ?? {};
+    const {children} = props;
     if (!children) return component;
 
-    const {key: _key, ref: _ref, ...componentProps} = component.props;
+    const {key: _key, ref: _ref, ...componentProps} = component.props as Record<string, unknown>;
 
     const linkifyIt = this.props.linkify || linkifyLib;
 
@@ -124,15 +147,19 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
       component,
       componentProps,
       React.Children.map(children, (child) => {
-        const {type: {displayName} = {} as any} = child || {};
+        const childType = (child as React.ReactElement | null)?.type as
+          | {displayName?: string}
+          | undefined;
+        const displayName = childType?.displayName;
         if (typeof child === "string" && linkifyIt.pretest(child))
           return this.linkify(
-            <Text {...componentProps} style={component.props.style}>
+            <Text {...componentProps} style={props.style}>
               {child}
             </Text>
           );
-        if (displayName === "Text" && !this.isTextNested(child)) return this.linkify(child);
-        return this.parse(child);
+        if (displayName === "Text" && !this.isTextNested(child as React.ReactElement))
+          return this.linkify(child as React.ReactElement<{children: string; style?: unknown}>);
+        return this.parse(child as React.ReactElement);
       })
     );
   };
@@ -148,7 +175,11 @@ class HyperlinkComponent extends React.Component<HyperlinkProps> {
       <View {...viewProps} style={this.props.style}>
         {!this.props.onPress && !this.props.onLongPress && !this.props.linkStyle
           ? this.props.children
-          : (this.parse(this).props as {children?: React.ReactNode}).children}
+          : (
+              this.parse(this as unknown as React.ReactElement).props as {
+                children?: React.ReactNode;
+              }
+            ).children}
       </View>
     );
   }

package/src/IconButton.tsx

@@ -159,7 +159,7 @@ const IconButtonComponent: FC<IconButtonProps> = ({
             display: "flex",
             height: 12,
             justifyContent: "center",
-            padding: theme.spacing.xs as any,
+            padding: theme.spacing.xs,
             position: "absolute",
             right: 0,
             width: 12,

package/src/ImageBackground.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import {ImageBackground as ImageBackgroundNative} from "react-native";
+import {
+  ImageBackground as ImageBackgroundNative,
+  type ImageBackgroundProps as NativeImageBackgroundProps,
+} from "react-native";
 
-interface ImageBackgroundProps {
-  children?: any;
-  style?: any;
-  source: any;
-}
+type ImageBackgroundProps = NativeImageBackgroundProps;
 
 export class ImageBackground extends React.Component<ImageBackgroundProps, {}> {
   render() {

package/src/Modal.tsx

@@ -12,7 +12,7 @@ import {Gesture, GestureDetector} from "react-native-gesture-handler";
 import {runOnJS} from "react-native-reanimated";
 
 import {Button} from "./Button";
-import type {ModalProps} from "./Common";
+import type {ModalProps, TerrenoTheme} from "./Common";
 import {Heading} from "./Heading";
 import {Icon} from "./Icon";
 import {isMobileDevice} from "./MediaQuery";
@@ -45,7 +45,7 @@ const ModalContent: FC<{
   secondaryButtonOnClick?: ModalProps["secondaryButtonOnClick"];
   onDismiss: ModalProps["onDismiss"];
   sizePx: DimensionValue;
-  theme: any;
+  theme: TerrenoTheme;
   isMobile: boolean;
 }> = ({
   children,

package/src/ModalSheet.test.tsx

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it, mock} from "bun:test";
 import {forwardRef, useRef} from "react";
 import {Text, View} from "react-native";
@@ -14,11 +15,6 @@ mock.module("react-native-modalize", () => ({
   )),
 }));
 
-// Mock react-native-portalize
-mock.module("react-native-portalize", () => ({
-  Portal: ({children}: {children: React.ReactNode}) => <View testID="portal">{children}</View>,
-}));
-
 describe("ModalSheet", () => {
   it("renders correctly with children", () => {
     const {toJSON} = renderWithTheme(

package/src/ModalSheet.tsx

@@ -1,14 +1,23 @@
-import {forwardRef, useEffect, useRef} from "react";
+import {
+  forwardRef,
+  type MutableRefObject,
+  type ReactNode,
+  type Ref,
+  useEffect,
+  useRef,
+} from "react";
 import {Animated} from "react-native";
 import {Modalize} from "react-native-modalize";
 import {Portal} from "react-native-portalize";
 
-export const useCombinedRefs = (...refs: any) => {
-  const targetRef = useRef<any>(null);
+export const useCombinedRefs = <T,>(
+  ...refs: Array<Ref<T> | undefined>
+): MutableRefObject<T | null> => {
+  const targetRef = useRef<T | null>(null);
 
   // Iterate through the refs array, and set the ref.current value to the targetRef
   useEffect(() => {
-    refs.forEach((ref: any) => {
+    refs.forEach((ref) => {
       if (!ref) {
         return;
       }
@@ -16,7 +25,7 @@ export const useCombinedRefs = (...refs: any) => {
       if (typeof ref === "function") {
         ref(targetRef.current);
       } else {
-        ref.current = targetRef.current;
+        (ref as MutableRefObject<T | null>).current = targetRef.current;
       }
     });
   }, [refs]);
@@ -25,7 +34,7 @@ export const useCombinedRefs = (...refs: any) => {
 };
 
 interface Props {
-  children: any;
+  children: ReactNode;
 }
 
 export const SimpleContent = forwardRef((props: Props, ref) => {

package/src/NumberField.test.tsx

@@ -110,6 +110,20 @@ describe("NumberField", () => {
     expect(queryByText(/must be/)).toBeNull();
   });
 
+  it("shows decimal error for non-numeric characters in decimal type", () => {
+    const {getByText} = renderWithTheme(
+      <NumberField label="Decimal" onChange={noOp} type="decimal" value="12abc" />
+    );
+    expect(getByText("Value must be a decimal")).toBeTruthy();
+  });
+
+  it("shows decimal error for multiple decimal points", () => {
+    const {getByText} = renderWithTheme(
+      <NumberField label="Decimal" onChange={noOp} type="decimal" value="1.2.3" />
+    );
+    expect(getByText("Value must be a decimal")).toBeTruthy();
+  });
+
   it("syncs value when prop changes", async () => {
     const handleChange = mock((_value: string): void => {});
     const {getByDisplayValue, unmount} = renderWithTheme(

package/src/OfflineBanner.test.tsx

@@ -0,0 +1,70 @@
+import {describe, expect, it} from "bun:test";
+
+import {OfflineBanner} from "./OfflineBanner";
+import {renderWithTheme} from "./test-utils";
+
+describe("OfflineBanner", () => {
+  it("renders nothing when online and not syncing", () => {
+    const {toJSON} = renderWithTheme(
+      <OfflineBanner isOnline={true} isSyncing={false} queueLength={0} />
+    );
+    expect(toJSON()).toBeNull();
+  });
+
+  it("shows offline banner when not online", () => {
+    const {getByTestId, getByText} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={false} queueLength={0} />
+    );
+    expect(getByTestId("offline-banner")).toBeTruthy();
+    expect(getByText("You're offline.")).toBeTruthy();
+  });
+
+  it("shows queue count in offline banner text", () => {
+    const {getByText} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={false} queueLength={5} />
+    );
+    expect(
+      getByText("You're offline. 5 pending changes will sync when you reconnect.")
+    ).toBeTruthy();
+  });
+
+  it("shows singular 'change' for 1 pending", () => {
+    const {getByText} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={false} queueLength={1} />
+    );
+    expect(
+      getByText("You're offline. 1 pending change will sync when you reconnect.")
+    ).toBeTruthy();
+  });
+
+  it("shows plural 'changes' for multiple pending", () => {
+    const {getByText} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={false} queueLength={3} />
+    );
+    expect(
+      getByText("You're offline. 3 pending changes will sync when you reconnect.")
+    ).toBeTruthy();
+  });
+
+  it("shows syncing banner when isSyncing is true", () => {
+    const {getByTestId, getByText} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={true} queueLength={2} />
+    );
+    expect(getByTestId("offline-banner")).toBeTruthy();
+    expect(getByText("Syncing offline changes...")).toBeTruthy();
+  });
+
+  it("uses custom testID prop", () => {
+    const {getByTestId} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={false} queueLength={0} testID="custom-banner" />
+    );
+    expect(getByTestId("custom-banner")).toBeTruthy();
+  });
+
+  it("uses custom testID prop while syncing", () => {
+    const {getByTestId} = renderWithTheme(
+      <OfflineBanner isOnline={false} isSyncing={true} queueLength={2} testID="custom-banner" />
+    );
+    expect(getByTestId("custom-banner")).toBeTruthy();
+  });
+});

package/src/OfflineBanner.tsx

@@ -0,0 +1,54 @@
+import type React from "react";
+
+import {Banner} from "./Banner";
+import {Box} from "./Box";
+
+export interface OfflineBannerProps {
+  /** Whether the server is currently reachable */
+  isOnline: boolean;
+  /** Number of mutations waiting to be synced */
+  queueLength: number;
+  /** Whether mutations are currently being replayed */
+  isSyncing: boolean;
+  /** testID for the root element */
+  testID?: string;
+}
+
+/**
+ * Displays offline/syncing status banners. Renders nothing when online and idle.
+ *
+ * @example
+ * ```typescript
+ * const {isOnline, queueLength, isSyncing} = useServerStatus();
+ * <OfflineBanner isOnline={isOnline} queueLength={queueLength} isSyncing={isSyncing} />
+ * ```
+ */
+export const OfflineBanner: React.FC<OfflineBannerProps> = ({
+  isOnline,
+  queueLength,
+  isSyncing,
+  testID = "offline-banner",
+}) => {
+  if (isSyncing) {
+    return (
+      <Box marginBottom={4} testID={testID}>
+        <Banner id="syncing-status" status="info" text="Syncing offline changes..." />
+      </Box>
+    );
+  }
+
+  if (!isOnline) {
+    const suffix =
+      queueLength > 0
+        ? ` ${queueLength} pending change${queueLength !== 1 ? "s" : ""} will sync when you reconnect.`
+        : "";
+
+    return (
+      <Box marginBottom={4} testID={testID}>
+        <Banner id="offline-status" status="warning" text={`You're offline.${suffix}`} />
+      </Box>
+    );
+  }
+
+  return null;
+};

package/src/OpenAPIContext.tsx

@@ -8,6 +8,7 @@ import type {
   OpenAPIContextType,
   OpenAPIProviderProps,
   OpenAPISpec,
+  OpenApiProperty,
 } from "./Common";
 
 const OpenAPIContext = createContext<OpenAPIContextType | null>(null);
@@ -39,7 +40,7 @@ export const OpenAPIProvider = ({children, specUrl}: OpenAPIProviderProps): Reac
     }
 
     for (const dotField of dotFields.slice(1)) {
-      field = (field?.properties as any)?.[dotField];
+      field = (field?.properties as Record<string, OpenApiProperty> | undefined)?.[dotField];
     }
     return field;
   };
@@ -55,7 +56,7 @@ export const OpenAPIProvider = ({children, specUrl}: OpenAPIProviderProps): Reac
         const data = (await response.json()) as OpenAPISpec;
         setSpec(data);
       })
-      .catch((error: any) => console.error(`Error fetching OpenAPI spec: ${error}`));
+      .catch((error: unknown) => console.error(`Error fetching OpenAPI spec: ${String(error)}`));
   }, [specUrl]);
 
   return (

package/src/Page.tsx

@@ -11,6 +11,7 @@ import {Spinner} from "./Spinner";
 import {Text} from "./Text";
 
 export class Page extends React.Component<PageProps, {}> {
+  // biome-ignore lint/suspicious/noExplicitAny: ActionSheet class is defined in ActionSheet.tsx which imports from Common.ts indirectly; using its type here would create a circular dependency
   actionSheetRef: React.RefObject<any> = React.createRef();
 
   renderHeader() {