@terreno/ui 0.5.0 → 0.7.0

package/src/HeightFieldDesktop.test.tsx

@@ -0,0 +1,137 @@
+import {afterAll, afterEach, beforeEach, describe, expect, it, mock} from "bun:test";
+import {fireEvent} from "@testing-library/react-native";
+
+// Mock isNative to return false so the desktop/web path is rendered
+mock.module("./Utilities", () => ({
+  isNative: () => false,
+}));
+
+import {HeightField} from "./HeightField";
+import {renderWithTheme} from "./test-utils";
+
+describe("HeightField (desktop/web path)", () => {
+  let mockOnChange: ReturnType<typeof mock>;
+
+  beforeEach(() => {
+    mockOnChange = mock(() => {});
+  });
+
+  afterEach(() => {});
+
+  afterAll(() => {
+    // Restore isNative to default native behavior so the mock doesn't leak to other test files
+    mock.module("./Utilities", () => ({
+      isNative: () => true,
+    }));
+  });
+
+  describe("rendering", () => {
+    it("renders two text inputs for feet and inches", () => {
+      const {getAllByLabelText} = renderWithTheme(<HeightField onChange={mockOnChange} value="" />);
+      expect(getAllByLabelText("ft input").length).toBe(1);
+      expect(getAllByLabelText("in input").length).toBe(1);
+    });
+
+    it("renders the correct initial feet and inches from value", () => {
+      const {getByDisplayValue} = renderWithTheme(
+        <HeightField onChange={mockOnChange} value="70" />
+      );
+      // 70 inches = 5ft 10in
+      expect(getByDisplayValue("5")).toBeTruthy();
+      expect(getByDisplayValue("10")).toBeTruthy();
+    });
+
+    it("renders title when provided", () => {
+      const {getByText} = renderWithTheme(
+        <HeightField onChange={mockOnChange} title="Height" value="" />
+      );
+      expect(getByText("Height")).toBeTruthy();
+    });
+
+    it("renders helper text", () => {
+      const {getByText} = renderWithTheme(
+        <HeightField helperText="Enter your height" onChange={mockOnChange} value="" />
+      );
+      expect(getByText("Enter your height")).toBeTruthy();
+    });
+
+    it("renders error text", () => {
+      const {getByText} = renderWithTheme(
+        <HeightField errorText="Invalid height" onChange={mockOnChange} value="" />
+      );
+      expect(getByText("Invalid height")).toBeTruthy();
+    });
+  });
+
+  describe("onChange behavior", () => {
+    it("calls onChange with correct total inches when feet changes", () => {
+      const {getAllByLabelText} = renderWithTheme(
+        <HeightField onChange={mockOnChange} value="70" />
+      );
+      const feetInput = getAllByLabelText("ft input")[0];
+      fireEvent.changeText(feetInput, "6");
+      // 6 feet + 10 inches (from value "70" = 5ft 10in, inches = 10) = 82 inches
+      expect(mockOnChange).toHaveBeenCalledWith("82");
+    });
+
+    it("calls onChange with correct total inches when inches changes", () => {
+      const {getAllByLabelText} = renderWithTheme(
+        <HeightField onChange={mockOnChange} value="70" />
+      );
+      const inchesInput = getAllByLabelText("in input")[0];
+      fireEvent.changeText(inchesInput, "0");
+      // 5 feet (from value "70" = 5ft 10in, feet = 5) + 0 inches = 60 inches
+      expect(mockOnChange).toHaveBeenCalledWith("60");
+    });
+
+    it("calls onChange with empty string when both inputs are cleared", () => {
+      const {getAllByLabelText} = renderWithTheme(
+        <HeightField onChange={mockOnChange} value="70" />
+      );
+      const feetInput = getAllByLabelText("ft input")[0];
+      const inchesInput = getAllByLabelText("in input")[0];
+      fireEvent.changeText(feetInput, "");
+      fireEvent.changeText(inchesInput, "");
+      expect(mockOnChange).toHaveBeenCalledWith("");
+    });
+
+    it("does not call onChange with values exceeding max feet", () => {
+      const {getAllByLabelText} = renderWithTheme(
+        <HeightField max={95} onChange={mockOnChange} value="" />
+      );
+      const feetInput = getAllByLabelText("ft input")[0];
+      // max is 95 inches = 7ft 11in, so maxFeet = 7
+      fireEvent.changeText(feetInput, "8");
+      expect(mockOnChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("disabled state", () => {
+    it("renders text inputs as non-editable when disabled", () => {
+      const {getAllByLabelText} = renderWithTheme(
+        <HeightField disabled onChange={mockOnChange} value="70" />
+      );
+      const feetInput = getAllByLabelText("ft input")[0];
+      expect(feetInput.props.editable).toBe(false);
+    });
+  });
+
+  describe("snapshots", () => {
+    it("matches snapshot with default props", () => {
+      const component = renderWithTheme(<HeightField onChange={mockOnChange} value="" />);
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("matches snapshot with value", () => {
+      const component = renderWithTheme(<HeightField onChange={mockOnChange} value="70" />);
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+
+    it("matches snapshot when disabled", () => {
+      const component = renderWithTheme(
+        <HeightField disabled onChange={mockOnChange} value="70" />
+      );
+      expect(component.toJSON()).toMatchSnapshot();
+    });
+  });
+});

package/src/Page.tsx

@@ -8,6 +8,7 @@ import {ErrorBoundary} from "./ErrorBoundary";
 import {Heading} from "./Heading";
 import {IconButton} from "./IconButton";
 import {Spinner} from "./Spinner";
+import {Text} from "./Text";
 
 export class Page extends React.Component<PageProps, {}> {
   actionSheetRef: React.RefObject<any> = React.createRef();
@@ -74,15 +75,25 @@ export class Page extends React.Component<PageProps, {}> {
           width="100%"
         >
           {this.renderHeader()}
-          {this.props.loading === true && <Spinner />}
-          {/* <KeyboardAccessoryNavigation
-          avoidKeyboard
-          doneButton={true}
-          nextButton={true}
-          previousButton={true}
-        /> */}
-
-          {this.props.children}
+          {this.props.loading ? (
+            <Box
+              alignItems="center"
+              direction="column"
+              display="flex"
+              flex="grow"
+              justifyContent="center"
+              marginTop={8}
+            >
+              <Spinner />
+              {Boolean(this.props.loadingText) && (
+                <Box marginTop={2}>
+                  <Text color="secondaryDark">{this.props.loadingText}</Text>
+                </Box>
+              )}
+            </Box>
+          ) : (
+            this.props.children
+          )}
         </Box>
         {Boolean(this.props.footer) && (
           <Box

package/src/ScrollView.tsx

@@ -1,2 +1,3 @@
 import {ScrollView} from "react-native";
+
 export {ScrollView};

package/src/TextField.tsx

@@ -78,6 +78,7 @@ export const TextField: FC<TextFieldProps> = ({
   onEnter,
   onSubmitEditing,
   testID,
+  id,
 }) => {
   const {theme} = useTheme();
 
@@ -167,6 +168,7 @@ export const TextField: FC<TextFieldProps> = ({
           enterKeyHint={returnKeyType}
           keyboardType={keyboardType as KeyboardTypeOptions}
           multiline={multiline}
+          nativeID={id}
           numberOfLines={rows || 4}
           onBlur={() => {
             if (disabled) return;

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

@@ -41,6 +41,7 @@ exports[`AddressField renders correctly with default props 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": undefined,
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -144,6 +145,7 @@ exports[`AddressField renders correctly with default props 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "address2",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -247,6 +249,7 @@ exports[`AddressField renders correctly with default props 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "city",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -1129,6 +1132,7 @@ exports[`AddressField renders correctly with default props 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "zipcode",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],

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

@@ -1590,6 +1590,7 @@ exports[`CustomSelectField renders with custom value (not in options) 1`] = `
                     "enterKeyHint": undefined,
                     "keyboardType": "default",
                     "multiline": undefined,
+                    "nativeID": "customOptions",
                     "numberOfLines": 1,
                     "onBlur": [Function],
                     "onChangeText": [Function],

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

@@ -22,6 +22,7 @@ exports[`EmailField renders correctly with default props 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "email-address",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -101,6 +102,7 @@ exports[`EmailField renders with icon 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "email-address",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],

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

@@ -22,6 +22,7 @@ exports[`Field renders text field by default 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -101,6 +102,7 @@ exports[`Field renders text field with type text 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -180,6 +182,7 @@ exports[`Field renders password field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -259,6 +262,7 @@ exports[`Field renders email field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "email-address",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -338,6 +342,7 @@ exports[`Field renders url field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "url",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -417,6 +422,7 @@ exports[`Field renders number field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -496,6 +502,7 @@ exports[`Field renders textarea field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "default",
             "multiline": true,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],
@@ -3275,6 +3282,7 @@ exports[`Field renders address field 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": undefined,
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -3378,6 +3386,7 @@ exports[`Field renders address field 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "address2",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -3481,6 +3490,7 @@ exports[`Field renders address field 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "city",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -4363,6 +4373,7 @@ exports[`Field renders address field 1`] = `
                   "enterKeyHint": undefined,
                   "keyboardType": "default",
                   "multiline": undefined,
+                  "nativeID": "zipcode",
                   "numberOfLines": 1,
                   "onBlur": [Function],
                   "onChangeText": [Function],
@@ -4452,6 +4463,7 @@ exports[`Field renders phoneNumber field 1`] = `
             "enterKeyHint": undefined,
             "keyboardType": "number-pad",
             "multiline": undefined,
+            "nativeID": undefined,
             "numberOfLines": 1,
             "onBlur": [Function],
             "onChangeText": [Function],