@terreno/ui 0.0.16 → 0.0.18

package/src/UnifiedAddressAutoComplete.test.tsx

@@ -1,15 +1,53 @@
-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 {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", () => {
-  // UnifiedAddressAutoCompleteField uses Google Places API and platform-specific implementations
-  it.skip("renders correctly (skipped - uses Google Places API)", () => {
-    expect(UnifiedAddressAutoCompleteField).toBeDefined();
+  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;
+  }, [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>
+  );
+};

package/src/WebAddressAutocomplete.test.tsx

@@ -1,15 +1,33 @@
 import {describe, expect, it} from "bun:test";
-
+import {renderWithTheme} from "./test-utils";
 import {WebAddressAutocomplete} from "./WebAddressAutocomplete";
 
 describe("WebAddressAutocomplete", () => {
-  // WebAddressAutocomplete uses Google Places API
-  it.skip("renders correctly (skipped - uses Google Places API)", () => {
-    expect(WebAddressAutocomplete).toBeDefined();
+  const defaultProps = {
+    handleAddressChange: () => {},
+    handleAutoCompleteChange: () => {},
+    inputValue: "",
+  };
+
+  it("renders correctly without Google API key", () => {
+    const {toJSON} = renderWithTheme(<WebAddressAutocomplete {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it("component is defined", () => {
     expect(WebAddressAutocomplete).toBeDefined();
     expect(typeof WebAddressAutocomplete).toBe("function");
   });
+
+  it("renders with input value", () => {
+    const {toJSON} = renderWithTheme(
+      <WebAddressAutocomplete {...defaultProps} inputValue="123 Main St" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders disabled state", () => {
+    const {toJSON} = renderWithTheme(<WebAddressAutocomplete {...defaultProps} disabled />);
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/__snapshots__/Button.test.tsx.snap

@@ -907,353 +907,6 @@ exports[`Button renders with confirmation modal props 1`] = `
       },
       "type": "View",
     },
-    {
-      "$$typeof": Symbol(react.test.json),
-      "children": [
-        {
-          "$$typeof": Symbol(react.test.json),
-          "children": [
-            {
-              "$$typeof": Symbol(react.test.json),
-              "children": [
-                {
-                  "$$typeof": Symbol(react.test.json),
-                  "children": [
-                    {
-                      "$$typeof": Symbol(react.test.json),
-                      "children": [
-                        {
-                          "$$typeof": Symbol(react.test.json),
-                          "children": null,
-                          "props": {
-                            "accessibilityHint": "Closes the modal",
-                            "aria-label": "Close modal",
-                            "aria-role": "button",
-                            "onPress": [Function],
-                            "style": {
-                              "alignItems": "center",
-                              "bottom": -8,
-                              "flex": 1,
-                              "justifyContent": "center",
-                              "left": -8,
-                              "position": "absolute",
-                              "right": -8,
-                              "top": -8,
-                            },
-                          },
-                          "type": "Pressable",
-                        },
-                      ],
-                      "props": {
-                        "style": {
-                          "alignSelf": "flex-end",
-                          "position": "relative",
-                        },
-                        "testID": undefined,
-                      },
-                      "type": "View",
-                    },
-                    {
-                      "$$typeof": Symbol(react.test.json),
-                      "children": [
-                        {
-                          "$$typeof": Symbol(react.test.json),
-                          "children": [
-                            "Confirm Delete",
-                          ],
-                          "props": {
-                            "numberOfLines": 0,
-                            "style": {
-                              "color": "#1C1C1C",
-                              "fontFamily": "heading-bold",
-                              "fontSize": 20,
-                            },
-                            "testID": undefined,
-                          },
-                          "type": "Text",
-                        },
-                      ],
-                      "props": {
-                        "accessibilityHint": "Modal title",
-                        "aria-label": "Confirm Delete",
-                        "aria-role": "header",
-                        "style": {
-                          "alignSelf": "flex-start",
-                        },
-                        "testID": undefined,
-                      },
-                      "type": "View",
-                    },
-                    {
-                      "$$typeof": Symbol(react.test.json),
-                      "children": [
-                        {
-                          "$$typeof": Symbol(react.test.json),
-                          "children": [
-                            {
-                              "$$typeof": Symbol(react.test.json),
-                              "children": [
-                                "This action cannot be undone",
-                              ],
-                              "props": {
-                                "numberOfLines": 0,
-                                "selectable": undefined,
-                                "style": {
-                                  "color": "#1C1C1C",
-                                  "fontFamily": "text-medium",
-                                  "fontSize": 16,
-                                  "textAlign": "left",
-                                },
-                                "testID": undefined,
-                              },
-                              "type": "Text",
-                            },
-                          ],
-                          "props": {},
-                          "type": "View",
-                        },
-                      ],
-                      "props": {
-                        "accessibilityHint": "Modal Sub Heading Text",
-                        "aria-label": "This action cannot be undone",
-                        "aria-role": "text",
-                        "style": {
-                          "alignSelf": "flex-start",
-                          "marginTop": 8,
-                        },
-                        "testID": undefined,
-                      },
-                      "type": "View",
-                    },
-                    {
-                      "$$typeof": Symbol(react.test.json),
-                      "children": [
-                        {
-                          "$$typeof": Symbol(react.test.json),
-                          "children": [
-                            "Are you sure?",
-                          ],
-                          "props": {
-                            "style": undefined,
-                          },
-                          "type": "Text",
-                        },
-                      ],
-                      "props": {
-                        "style": {
-                          "flex": 1,
-                          "marginTop": 12,
-                          "width": "100%",
-                        },
-                        "testID": undefined,
-                      },
-                      "type": "View",
-                    },
-                    {
-                      "$$typeof": Symbol(react.test.json),
-                      "children": [
-                        {
-                          "$$typeof": Symbol(react.test.json),
-                          "children": [
-                            {
-                              "$$typeof": Symbol(react.test.json),
-                              "children": [
-                                {
-                                  "$$typeof": Symbol(react.test.json),
-                                  "children": [
-                                    {
-                                      "$$typeof": Symbol(react.test.json),
-                                      "children": [
-                                        {
-                                          "$$typeof": Symbol(react.test.json),
-                                          "children": [
-                                            "Cancel",
-                                          ],
-                                          "props": {
-                                            "style": {
-                                              "color": "#353535",
-                                              "fontSize": 16,
-                                              "fontWeight": "700",
-                                            },
-                                          },
-                                          "type": "Text",
-                                        },
-                                      ],
-                                      "props": {
-                                        "style": {
-                                          "flexDirection": "row",
-                                        },
-                                        "testID": undefined,
-                                      },
-                                      "type": "View",
-                                    },
-                                  ],
-                                  "props": {
-                                    "style": {
-                                      "flexDirection": "row",
-                                    },
-                                    "testID": undefined,
-                                  },
-                                  "type": "View",
-                                },
-                              ],
-                              "props": {
-                                "accessibilityHint": "Press to perform action",
-                                "aria-label": "Cancel",
-                                "aria-role": "button",
-                                "disabled": undefined,
-                                "onPress": [Function: debounced],
-                                "style": {
-                                  "alignItems": "center",
-                                  "alignSelf": undefined,
-                                  "backgroundColor": "#B6CDD5",
-                                  "borderColor": undefined,
-                                  "borderRadius": 360,
-                                  "borderWidth": undefined,
-                                  "flexDirection": "column",
-                                  "justifyContent": "center",
-                                  "paddingHorizontal": 20,
-                                  "paddingVertical": 8,
-                                  "width": "auto",
-                                },
-                                "testID": undefined,
-                              },
-                              "type": "Pressable",
-                            },
-                          ],
-                          "props": {
-                            "style": {
-                              "marginRight": 20,
-                            },
-                            "testID": undefined,
-                          },
-                          "type": "View",
-                        },
-                        {
-                          "$$typeof": Symbol(react.test.json),
-                          "children": [
-                            {
-                              "$$typeof": Symbol(react.test.json),
-                              "children": [
-                                {
-                                  "$$typeof": Symbol(react.test.json),
-                                  "children": [
-                                    {
-                                      "$$typeof": Symbol(react.test.json),
-                                      "children": [
-                                        "Confirm",
-                                      ],
-                                      "props": {
-                                        "style": {
-                                          "color": "#FFFFFF",
-                                          "fontSize": 16,
-                                          "fontWeight": "700",
-                                        },
-                                      },
-                                      "type": "Text",
-                                    },
-                                  ],
-                                  "props": {
-                                    "style": {
-                                      "flexDirection": "row",
-                                    },
-                                    "testID": undefined,
-                                  },
-                                  "type": "View",
-                                },
-                              ],
-                              "props": {
-                                "style": {
-                                  "flexDirection": "row",
-                                },
-                                "testID": undefined,
-                              },
-                              "type": "View",
-                            },
-                          ],
-                          "props": {
-                            "accessibilityHint": "Press to perform action",
-                            "aria-label": "Confirm",
-                            "aria-role": "button",
-                            "disabled": undefined,
-                            "onPress": [Function: debounced],
-                            "style": {
-                              "alignItems": "center",
-                              "alignSelf": undefined,
-                              "backgroundColor": "#0E9DCD",
-                              "borderColor": undefined,
-                              "borderRadius": 360,
-                              "borderWidth": undefined,
-                              "flexDirection": "column",
-                              "justifyContent": "center",
-                              "paddingHorizontal": 20,
-                              "paddingVertical": 8,
-                              "width": "auto",
-                            },
-                            "testID": undefined,
-                          },
-                          "type": "Pressable",
-                        },
-                      ],
-                      "props": {
-                        "style": {
-                          "alignSelf": "flex-end",
-                          "flexDirection": "row",
-                          "marginTop": 32,
-                        },
-                        "testID": undefined,
-                      },
-                      "type": "View",
-                    },
-                  ],
-                  "props": {
-                    "style": {
-                      "alignItems": "center",
-                      "alignSelf": "center",
-                      "backgroundColor": "#FFFFFF",
-                      "borderRadius": 4,
-                      "boxShadow": "0px 4px 24px rgba(0, 0, 0, 0.5)",
-                      "elevation": 24,
-                      "margin": "auto",
-                      "maxHeight": "100%",
-                      "padding": 32,
-                      "width": "90%",
-                      "zIndex": 1,
-                    },
-                    "testID": undefined,
-                  },
-                  "type": "View",
-                },
-              ],
-              "props": {
-                "onPress": [Function],
-                "style": {
-                  "cursor": "auto",
-                },
-              },
-              "type": "Pressable",
-            },
-          ],
-          "props": {
-            "onPress": [Function],
-            "style": {
-              "alignItems": "center",
-              "backgroundColor": "rgba(0, 0, 0, 0.5)",
-              "flex": 1,
-              "justifyContent": "center",
-            },
-          },
-          "type": "Pressable",
-        },
-      ],
-      "props": {
-        "animationType": "none",
-        "onRequestClose": [Function],
-        "transparent": true,
-        "visible": false,
-      },
-      "type": "Modal",
-    },
   ],
   "props": {
     "accessibilityHint": "Opens a confirmation dialog",

package/src/__snapshots__/DateTimeActionSheet.test.tsx.snap

@@ -0,0 +1,11 @@
+// Bun Snapshot v1, https://bun.sh/docs/test/snapshots
+
+exports[`DateTimeActionSheet renders correctly with datetime type 1`] = `null`;
+
+exports[`DateTimeActionSheet renders correctly with date type 1`] = `null`;
+
+exports[`DateTimeActionSheet renders correctly with time type 1`] = `null`;
+
+exports[`DateTimeActionSheet renders correctly when not visible 1`] = `null`;
+
+exports[`DateTimeActionSheet renders with custom timezone 1`] = `null`;