@terreno/ui 0.13.3 → 0.14.0

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.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/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() {

package/src/Pagination.tsx

@@ -134,7 +134,7 @@ export const Pagination: FC<PaginationProps> = ({totalPages, page, setPage}) =>
         alignItems: "center",
         display: "flex",
         flexDirection: "row",
-        gap: theme.spacing.xs as any,
+        gap: theme.spacing.xs,
       }}
     >
       <PaginationButton

package/src/Permissions.ts

@@ -10,6 +10,7 @@ export async function requestPermissions(_kind: PermissionKind): Promise<Permiss
   // const userPropertyKey = `PermissionsFor${capitalize(kind)}`;
 
   //   let k = kind;
+  //   // noExplicitAny: Dead commented-out code; types cannot be resolved without the full uncommented context and Permissions library types
   //   let options: any = undefined;
   //   if (kind === "locationAlways") {
   //     k = "location";
@@ -21,6 +22,7 @@ export async function requestPermissions(_kind: PermissionKind): Promise<Permiss
 
   //   // TODO check soft request status.
 
+  //   // noExplicitAny: Dead commented-out code; MAP[k] type depends on unreferenced MAP constant
   //   const current = await Permissions.check(MAP[k] as any);
   //   // Tracking.log(`[permissions] ${k} permissions are ${current}`);
   //   if (current === "denied" || current === "limited") {
@@ -31,6 +33,7 @@ export async function requestPermissions(_kind: PermissionKind): Promise<Permiss
   //     return resolve("authorized");
   //   }
 
+  //   // noExplicitAny: Dead commented-out code; MAP[k] type depends on unreferenced MAP constant
   //   const response = await Permissions.request(MAP[k] as any, options);
   //   if (response === "granted") {
   //     // Tracking.setUserProperty(userPropertyKey, "true");

package/src/PickerSelect.tsx

@@ -30,6 +30,7 @@ import {
   Keyboard,
   Modal,
   type ModalProps,
+  type NativeSyntheticEvent,
   Platform,
   Pressable,
   type PressableProps,
@@ -137,9 +138,7 @@ export function RNPickerSelect({
   InputAccessoryView,
 }: RNPickerSelectProps) {
   const [showPicker, setShowPicker] = useState<boolean>(false);
-  const [animationType, setAnimationType] = useState<"none" | "slide" | "fade" | undefined>(
-    undefined
-  );
+  const [animationType, setAnimationType] = useState<ModalProps["animationType"]>(undefined);
   const [orientation, setOrientation] = useState<"portrait" | "landscape">("portrait");
   const [doneDepressed, setDoneDepressed] = useState<boolean>(false);
   const {theme} = useTheme();
@@ -185,7 +184,7 @@ export function RNPickerSelect({
       }
       return {
         idx,
-        selectedItem: options[idx] || {},
+        selectedItem: (options[idx] || {}) as Partial<PickerSelectItem>,
       };
     },
     [options]
@@ -217,9 +216,7 @@ export function RNPickerSelect({
 
   const onOrientationChange = ({
     nativeEvent,
-  }: {
-    nativeEvent: {orientation: "portrait" | "landscape"};
-  }) => {
+  }: NativeSyntheticEvent<{orientation: "portrait" | "landscape"}>) => {
     setOrientation(nativeEvent.orientation);
   };
 
@@ -256,12 +253,13 @@ export function RNPickerSelect({
 
   const renderPickerItems = () => {
     return options?.map((item) => {
+      if (!item) return null;
       return (
         <Picker.Item
-          color={item?.color}
-          key={item?.key || item?.label}
-          label={item?.label}
-          value={item?.value}
+          color={item.color}
+          key={item.key || item.label}
+          label={item.label}
+          value={item.value}
         />
       );
     });
@@ -484,9 +482,14 @@ export function RNPickerSelect({
   };
 
   const renderAndroidHeadless = () => {
-    // noExplicitAny: Component is View or Pressable depending on a bug workaround flag. View
-    // ignores Pressable-specific props (onPress) at runtime. A type-safe union cannot express this.
-    const Component = (fixAndroidTouchableBug ? View : Pressable) as unknown as typeof Pressable;
+    // `View` and `Pressable` accept disjoint prop sets; the fork swaps between them to work
+    // around an Android touchable bug, so we cast to a structural component type that accepts
+    // the union of props actually used in JSX below.
+    const Component = (fixAndroidTouchableBug ? View : Pressable) as ComponentType<{
+      onPress?: PressableProps["onPress"];
+      testID?: string;
+      children?: ReactNode;
+    }>;
     return (
       <Component onPress={onOpen} testID="android_touchable_wrapper" {...touchableWrapperProps}>
         <View>

package/src/SelectBadge.test.tsx

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it, mock} from "bun:test";
 import {act, fireEvent} from "@testing-library/react-native";
 

package/src/SelectField.tsx

@@ -19,7 +19,7 @@ export const SelectField: FC<SelectFieldProps> = ({
   const clearOption = {label: placeholder ?? "---", value: ""};
 
   return (
-    <View>
+    <View style={{width: "100%"}}>
       {Boolean(title) && <FieldTitle text={title!} />}
       {Boolean(errorText) && <FieldError text={errorText!} />}
       <RNPickerSelect

package/src/Signature.test.tsx

@@ -1,3 +1,4 @@
+// biome-ignore-all lint/suspicious/noExplicitAny: test mock typing
 import {describe, expect, it, mock} from "bun:test";
 import {fireEvent} from "@testing-library/react-native";
 import {forwardRef, useImperativeHandle} from "react";

package/src/SplitPage.native.tsx

@@ -34,6 +34,7 @@ export const SplitPage = ({
   const {width} = Dimensions.get("window");
 
   const onItemSelect = useCallback(
+    // biome-ignore lint/suspicious/noExplicitAny: SplitPage accepts heterogeneous list item shapes from consumers; the generic propagates from listViewData
     async (item: ListRenderItemInfo<any>) => {
       setSelectedId(item.index);
       await onSelectionChange(item);
@@ -58,6 +59,7 @@ export const SplitPage = ({
     return null;
   }
 
+  // biome-ignore lint/suspicious/noExplicitAny: SplitPage accepts heterogeneous list item shapes from consumers; the generic propagates from listViewData
   const renderItem = (itemInfo: ListRenderItemInfo<any>) => {
     return (
       <Box