@terreno/ui 0.0.15 → 0.0.17

package/src/TimezonePicker.test.tsx

@@ -0,0 +1,57 @@
+import {describe, expect, it, mock} from "bun:test";
+
+import {TimezonePicker} from "./TimezonePicker";
+import {renderWithTheme} from "./test-utils";
+
+describe("TimezonePicker", () => {
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<TimezonePicker onChange={() => {}} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with title by default", () => {
+    const {getByText} = renderWithTheme(<TimezonePicker onChange={() => {}} />);
+    expect(getByText("Timezone")).toBeTruthy();
+  });
+
+  it("hides title when hideTitle is true", () => {
+    const {toJSON} = renderWithTheme(<TimezonePicker hideTitle onChange={() => {}} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with selected timezone", () => {
+    const {toJSON} = renderWithTheme(
+      <TimezonePicker onChange={() => {}} timezone="America/New_York" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders USA timezones by default", () => {
+    const {toJSON} = renderWithTheme(
+      <TimezonePicker location="USA" onChange={() => {}} timezone="America/New_York" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders worldwide timezones when specified", () => {
+    const {toJSON} = renderWithTheme(
+      <TimezonePicker location="Worldwide" onChange={() => {}} timezone="Europe/London" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with short timezone labels", () => {
+    const {toJSON} = renderWithTheme(
+      <TimezonePicker onChange={() => {}} shortTimezone timezone="America/New_York" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("calls onChange when timezone is selected", () => {
+    const handleChange = mock((_value: string) => {});
+    const {toJSON} = renderWithTheme(
+      <TimezonePicker onChange={handleChange} timezone="America/New_York" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/Toast.test.tsx

@@ -0,0 +1,82 @@
+import {describe, expect, it, mock} from "bun:test";
+
+import {Toast} from "./Toast";
+import {renderWithTheme} from "./test-utils";
+
+describe("Toast", () => {
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<Toast title="Test message" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders title correctly", () => {
+    const {getByText} = renderWithTheme(<Toast title="Success!" />);
+    expect(getByText("Success!")).toBeTruthy();
+  });
+
+  it("renders info variant (default)", () => {
+    const {toJSON} = renderWithTheme(<Toast title="Info message" variant="info" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders success variant", () => {
+    const {toJSON} = renderWithTheme(<Toast title="Success!" variant="success" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders warning variant", () => {
+    const {toJSON} = renderWithTheme(<Toast title="Warning!" variant="warning" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders error variant", () => {
+    const {toJSON} = renderWithTheme(<Toast title="Error!" variant="error" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with small size (default)", () => {
+    const {toJSON} = renderWithTheme(<Toast size="sm" title="Small toast" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with large size", () => {
+    const {toJSON} = renderWithTheme(<Toast size="lg" title="Large toast" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with subtitle when size is large", () => {
+    const {getByText, toJSON} = renderWithTheme(
+      <Toast size="lg" subtitle="Additional details here" title="Main message" />
+    );
+    expect(getByText("Main message")).toBeTruthy();
+    expect(getByText("Additional details here")).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders persistent toast with dismiss button", () => {
+    const handleDismiss = mock(() => {});
+    const {toJSON} = renderWithTheme(
+      <Toast onDismiss={handleDismiss} persistent title="Persistent toast" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders dismiss button when persistent with onDismiss", () => {
+    const handleDismiss = mock(() => {});
+    const {toJSON} = renderWithTheme(
+      <Toast onDismiss={handleDismiss} persistent title="Dismissible" />
+    );
+    // Verify dismiss button is rendered
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders all variants with large size correctly", () => {
+    const variants = ["info", "success", "warning", "error"] as const;
+    variants.forEach((variant) => {
+      const {toJSON} = renderWithTheme(
+        <Toast size="lg" subtitle="Details" title={`${variant} toast`} variant={variant} />
+      );
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/src/Tooltip.test.tsx

@@ -0,0 +1,89 @@
+import {describe, expect, it} from "bun:test";
+
+import {Text} from "./Text";
+import {Tooltip} from "./Tooltip";
+import {renderWithTheme} from "./test-utils";
+
+describe("Tooltip", () => {
+  it("renders children correctly", () => {
+    const {getByText} = renderWithTheme(
+      <Tooltip text="Tooltip text">
+        <Text>Hover me</Text>
+      </Tooltip>
+    );
+    expect(getByText("Hover me")).toBeTruthy();
+  });
+
+  it("renders without tooltip when text is empty", () => {
+    const {getByText, toJSON} = renderWithTheme(
+      <Tooltip text="">
+        <Text>No tooltip</Text>
+      </Tooltip>
+    );
+    expect(getByText("No tooltip")).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with tooltip text", () => {
+    const {toJSON} = renderWithTheme(
+      <Tooltip text="This is helpful information">
+        <Text>Hover for info</Text>
+      </Tooltip>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with top position (default)", () => {
+    const {toJSON} = renderWithTheme(
+      <Tooltip idealPosition="top" text="Top tooltip">
+        <Text>Content</Text>
+      </Tooltip>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with bottom position", () => {
+    const {toJSON} = renderWithTheme(
+      <Tooltip idealPosition="bottom" text="Bottom tooltip">
+        <Text>Content</Text>
+      </Tooltip>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with left position", () => {
+    const {toJSON} = renderWithTheme(
+      <Tooltip idealPosition="left" text="Left tooltip">
+        <Text>Content</Text>
+      </Tooltip>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with right position", () => {
+    const {toJSON} = renderWithTheme(
+      <Tooltip idealPosition="right" text="Right tooltip">
+        <Text>Content</Text>
+      </Tooltip>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with arrow", () => {
+    const {toJSON} = renderWithTheme(
+      <Tooltip includeArrow text="Tooltip with arrow">
+        <Text>Content</Text>
+      </Tooltip>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with arrow and specific position", () => {
+    const {toJSON} = renderWithTheme(
+      <Tooltip idealPosition="bottom" includeArrow text="Bottom with arrow">
+        <Text>Content</Text>
+      </Tooltip>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/UnifiedAddressAutoComplete.test.tsx

@@ -0,0 +1,53 @@
+import {describe, expect, it, mock} from "bun:test";
+import {forwardRef} from "react";
+import {Text, View} from "react-native";
+import {renderWithTheme} from "./test-utils";
+import {UnifiedAddressAutoCompleteField} from "./UnifiedAddressAutoComplete";
+
+// Mock react-native-google-places-autocomplete (used by MobileAddressAutocomplete)
+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("UnifiedAddressAutoCompleteField", () => {
+  const defaultProps = {
+    handleAddressChange: () => {},
+    handleAutoCompleteChange: () => {},
+    inputValue: "",
+  };
+
+  it("renders correctly without Google API key (fallback to TextField)", () => {
+    const {toJSON} = renderWithTheme(<UnifiedAddressAutoCompleteField {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("component is defined", () => {
+    expect(UnifiedAddressAutoCompleteField).toBeDefined();
+    expect(typeof UnifiedAddressAutoCompleteField).toBe("function");
+  });
+
+  it("renders with input value", () => {
+    const {toJSON} = renderWithTheme(
+      <UnifiedAddressAutoCompleteField {...defaultProps} inputValue="123 Main St" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders disabled state", () => {
+    const {toJSON} = renderWithTheme(
+      <UnifiedAddressAutoCompleteField {...defaultProps} disabled />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with invalid Google API key (falls back to TextField)", () => {
+    const {toJSON} = renderWithTheme(
+      <UnifiedAddressAutoCompleteField {...defaultProps} googleMapsApiKey="invalid" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/UserInactivity.test.tsx

@@ -0,0 +1,96 @@
+import {describe, expect, it, mock} from "bun:test";
+import {act} from "@testing-library/react-native";
+
+import {Text} from "./Text";
+import {renderWithTheme} from "./test-utils";
+import {UserInactivity} from "./UserInactivity";
+
+describe("UserInactivity", () => {
+  it("renders children correctly", () => {
+    const onAction = mock((_active: boolean) => {});
+    const {getByText} = renderWithTheme(
+      <UserInactivity onAction={onAction}>
+        <Text>Test Content</Text>
+      </UserInactivity>
+    );
+    expect(getByText("Test Content")).toBeTruthy();
+  });
+
+  it("renders with custom style", () => {
+    const onAction = mock((_active: boolean) => {});
+    const {toJSON} = renderWithTheme(
+      <UserInactivity onAction={onAction} style={{backgroundColor: "red", flex: 2}}>
+        <Text>Test Content</Text>
+      </UserInactivity>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with default style when no style provided", () => {
+    const onAction = mock((_active: boolean) => {});
+    const {toJSON} = renderWithTheme(
+      <UserInactivity onAction={onAction}>
+        <Text>Test Content</Text>
+      </UserInactivity>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("calls onAction with false after timeout", async () => {
+    const onAction = mock((_active: boolean) => {});
+
+    renderWithTheme(
+      <UserInactivity onAction={onAction} timeForInactivity={50}>
+        <Text>Test Content</Text>
+      </UserInactivity>
+    );
+
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    });
+
+    expect(onAction).toHaveBeenCalledWith(false);
+  });
+
+  it("accepts timeForInactivity prop", () => {
+    const onAction = mock((_active: boolean) => {});
+    const {toJSON} = renderWithTheme(
+      <UserInactivity onAction={onAction} timeForInactivity={5000}>
+        <Text>Test Content</Text>
+      </UserInactivity>
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("accepts isActive prop", () => {
+    const onAction = mock((_active: boolean) => {});
+    const {toJSON} = renderWithTheme(
+      <UserInactivity isActive={true} onAction={onAction}>
+        <Text>Test Content</Text>
+      </UserInactivity>
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+
+  it("renders multiple children", () => {
+    const onAction = mock((_active: boolean) => {});
+    const {getByText} = renderWithTheme(
+      <UserInactivity onAction={onAction}>
+        <Text>First Child</Text>
+        <Text>Second Child</Text>
+      </UserInactivity>
+    );
+    expect(getByText("First Child")).toBeTruthy();
+    expect(getByText("Second Child")).toBeTruthy();
+  });
+
+  it("accepts skipKeyboard prop", () => {
+    const onAction = mock((_active: boolean) => {});
+    const {toJSON} = renderWithTheme(
+      <UserInactivity onAction={onAction} skipKeyboard={true}>
+        <Text>Test Content</Text>
+      </UserInactivity>
+    );
+    expect(toJSON()).toBeTruthy();
+  });
+});

package/src/UserInactivity.tsx

@@ -0,0 +1,129 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2017-2021 Alberto Schiabel
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ * Vendored from https://github.com/jkomyno/react-native-user-inactivity
+ */
+
+import {type FC, useCallback, useEffect, useRef, useState} from "react";
+import {Keyboard, PanResponder, View, type ViewStyle} from "react-native";
+
+import type {UserInactivityProps} from "./Common";
+
+const DEFAULT_TIME_FOR_INACTIVITY = 10000;
+const DEFAULT_STYLE: ViewStyle = {
+  flex: 1,
+};
+
+export const UserInactivity: FC<UserInactivityProps> = ({
+  children,
+  isActive: isActiveProp,
+  onAction,
+  skipKeyboard = false,
+  style,
+  timeForInactivity = DEFAULT_TIME_FOR_INACTIVITY,
+}) => {
+  const actualStyle = style ?? DEFAULT_STYLE;
+
+  const initialActive = isActiveProp === undefined ? true : isActiveProp;
+  const [active, setActive] = useState(initialActive);
+  const [resetKey, setResetKey] = useState(0);
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isFirstRender = useRef(true);
+
+  const clearTimer = useCallback(() => {
+    if (timeoutRef.current !== null) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  const resetTimerDueToActivity = useCallback(() => {
+    clearTimer();
+    setActive(true);
+    setResetKey((prev) => prev + 1);
+  }, [clearTimer]);
+
+  // Handle isActive prop changes
+  useEffect(() => {
+    if (isActiveProp) {
+      resetTimerDueToActivity();
+    }
+  }, [isActiveProp, resetTimerDueToActivity]);
+
+  // Setup the inactivity timeout
+  useEffect(() => {
+    timeoutRef.current = setTimeout(() => {
+      setActive(false);
+      onAction(false);
+    }, timeForInactivity);
+
+    return clearTimer;
+  }, [resetKey, timeForInactivity, onAction, clearTimer]);
+
+  // Trigger onAction when active state changes (except on first render)
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      if (active) {
+        onAction(true);
+      }
+    }
+  }, [active, onAction]);
+
+  // Setup keyboard listeners
+  useEffect(() => {
+    if (skipKeyboard) {
+      return;
+    }
+
+    const hideEvent = Keyboard.addListener("keyboardDidHide", resetTimerDueToActivity);
+    const showEvent = Keyboard.addListener("keyboardDidShow", resetTimerDueToActivity);
+
+    return () => {
+      hideEvent.remove();
+      showEvent.remove();
+    };
+  }, [skipKeyboard, resetTimerDueToActivity]);
+
+  const resetTimerForPanResponder = useCallback(() => {
+    resetTimerDueToActivity();
+    return false;
+  }, [resetTimerDueToActivity]);
+
+  // Initialize PanResponder once
+  const [panResponder] = useState(() =>
+    PanResponder.create({
+      onMoveShouldSetPanResponderCapture: resetTimerForPanResponder,
+      onPanResponderTerminationRequest: resetTimerForPanResponder,
+      onStartShouldSetPanResponderCapture: resetTimerForPanResponder,
+    })
+  );
+
+  return (
+    <View collapsable={false} style={actualStyle} {...panResponder.panHandlers}>
+      {children}
+    </View>
+  );
+};