@terreno/ui 0.0.15 → 0.0.17

package/src/PhoneNumberField.test.tsx

@@ -0,0 +1,79 @@
+import {describe, expect, it, mock} from "bun:test";
+
+import {PhoneNumberField} from "./PhoneNumberField";
+import {renderWithTheme} from "./test-utils";
+
+describe("PhoneNumberField", () => {
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(
+      <PhoneNumberField label="Phone" onChange={() => {}} value="" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with placeholder", () => {
+    const {getByPlaceholderText} = renderWithTheme(
+      <PhoneNumberField
+        label="Phone"
+        onChange={() => {}}
+        placeholder="Enter phone number"
+        value=""
+      />
+    );
+    expect(getByPlaceholderText("Enter phone number")).toBeTruthy();
+  });
+
+  it("renders with initial value", () => {
+    const {getByDisplayValue} = renderWithTheme(
+      <PhoneNumberField label="Phone" onChange={() => {}} value="(555) 123-4567" />
+    );
+    expect(getByDisplayValue("(555) 123-4567")).toBeTruthy();
+  });
+
+  it("formats phone number as user types", () => {
+    const handleChange = mock((_value: string) => {});
+    const {toJSON} = renderWithTheme(
+      <PhoneNumberField label="Phone" onChange={handleChange} value="5551234567" />
+    );
+    // Snapshot captures the formatted phone number display
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom errorText", () => {
+    const {getByText} = renderWithTheme(
+      <PhoneNumberField
+        errorText="Phone number is required"
+        label="Phone"
+        onChange={() => {}}
+        value=""
+      />
+    );
+    expect(getByText("Phone number is required")).toBeTruthy();
+  });
+
+  it("renders with icon", () => {
+    const {toJSON} = renderWithTheme(
+      <PhoneNumberField iconName="phone" label="Phone" onChange={() => {}} value="" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("uses US as default country code", () => {
+    const {toJSON} = renderWithTheme(
+      <PhoneNumberField label="Phone" onChange={() => {}} value="5551234567" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("accepts custom country code", () => {
+    const {toJSON} = renderWithTheme(
+      <PhoneNumberField
+        defaultCountryCode="GB"
+        label="Phone"
+        onChange={() => {}}
+        value="7911123456"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/PickerSelect.test.tsx

@@ -0,0 +1,52 @@
+import {describe, expect, it, mock} from "bun:test";
+
+import {RNPickerSelect} from "./PickerSelect";
+import {renderWithTheme} from "./test-utils";
+
+// Note: @react-native-picker/picker is mocked globally in bunSetup.ts
+
+describe("PickerSelect", () => {
+  const defaultProps = {
+    items: [
+      {label: "Option 1", value: "1"},
+      {label: "Option 2", value: "2"},
+      {label: "Option 3", value: "3"},
+    ],
+    onValueChange: () => {},
+    placeholder: {label: "Select an option", value: ""},
+  };
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("component is defined", () => {
+    expect(RNPickerSelect).toBeDefined();
+    expect(typeof RNPickerSelect).toBe("function");
+  });
+
+  it("renders with selected value", () => {
+    const {toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} value="2" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders disabled state", () => {
+    const {toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} disabled />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders without placeholder when placeholder is empty object", () => {
+    const {toJSON} = renderWithTheme(<RNPickerSelect {...defaultProps} placeholder={{}} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("calls onValueChange when value changes", () => {
+    const mockOnValueChange = mock(() => {});
+    renderWithTheme(
+      <RNPickerSelect {...defaultProps} onValueChange={mockOnValueChange} value="1" />
+    );
+    // The component is rendered, onValueChange would be called on user interaction
+    expect(mockOnValueChange).toBeDefined();
+  });
+});

package/src/Radio.test.tsx

@@ -0,0 +1,30 @@
+import {describe, expect, it} from "bun:test";
+
+import {Radio} from "./Radio";
+import {renderWithTheme} from "./test-utils";
+
+describe("Radio", () => {
+  it("renders correctly when not selected", () => {
+    const {toJSON} = renderWithTheme(<Radio selected={false} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly when selected", () => {
+    const {toJSON} = renderWithTheme(<Radio selected />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("shows inner circle when selected", () => {
+    const {toJSON} = renderWithTheme(<Radio selected />);
+    const snapshot = toJSON();
+    // Should have nested View for the inner filled circle
+    expect(snapshot).toMatchSnapshot();
+  });
+
+  it("does not show inner circle when not selected", () => {
+    const {toJSON} = renderWithTheme(<Radio selected={false} />);
+    const snapshot = toJSON();
+    // Should only have outer circle, no inner content
+    expect(snapshot).toMatchSnapshot();
+  });
+});

package/src/RadioField.test.tsx

@@ -0,0 +1,89 @@
+import {describe, expect, it, mock} from "bun:test";
+import {fireEvent} from "@testing-library/react-native";
+
+import {RadioField} from "./RadioField";
+import {renderWithTheme} from "./test-utils";
+
+describe("RadioField", () => {
+  const defaultOptions = [
+    {label: "Option A", value: "a"},
+    {label: "Option B", value: "b"},
+    {label: "Option C", value: "c"},
+  ];
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(
+      <RadioField onChange={() => {}} options={defaultOptions} title="Select one" value="" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders title correctly", () => {
+    const {getByText} = renderWithTheme(
+      <RadioField onChange={() => {}} options={defaultOptions} title="Choose an option" value="" />
+    );
+    expect(getByText("Choose an option")).toBeTruthy();
+  });
+
+  it("renders all options", () => {
+    const {getByText} = renderWithTheme(
+      <RadioField onChange={() => {}} options={defaultOptions} title="Title" value="" />
+    );
+    expect(getByText("Option A")).toBeTruthy();
+    expect(getByText("Option B")).toBeTruthy();
+    expect(getByText("Option C")).toBeTruthy();
+  });
+
+  it("shows selected option", () => {
+    const {toJSON} = renderWithTheme(
+      <RadioField onChange={() => {}} options={defaultOptions} title="Title" value="b" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("calls onChange when option is selected", () => {
+    const handleChange = mock((_value: string) => {});
+    const {getByText} = renderWithTheme(
+      <RadioField onChange={handleChange} options={defaultOptions} title="Title" value="" />
+    );
+
+    fireEvent.press(getByText("Option B"));
+    expect(handleChange).toHaveBeenCalledWith("b");
+  });
+
+  it("renders with rightText variant (default)", () => {
+    const {toJSON} = renderWithTheme(
+      <RadioField
+        onChange={() => {}}
+        options={defaultOptions}
+        title="Title"
+        value=""
+        variant="rightText"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with leftText variant", () => {
+    const {toJSON} = renderWithTheme(
+      <RadioField
+        onChange={() => {}}
+        options={defaultOptions}
+        title="Title"
+        value=""
+        variant="leftText"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders options using value when label is not provided", () => {
+    const optionsWithoutLabels = [{value: "first"}, {value: "second"}, {value: "third"}];
+    const {getByText} = renderWithTheme(
+      <RadioField onChange={() => {}} options={optionsWithoutLabels} title="Title" value="" />
+    );
+    expect(getByText("first")).toBeTruthy();
+    expect(getByText("second")).toBeTruthy();
+    expect(getByText("third")).toBeTruthy();
+  });
+});

package/src/SectionDivider.test.tsx

@@ -0,0 +1,17 @@
+import {describe, expect, it} from "bun:test";
+
+import {SectionDivider} from "./SectionDivider";
+import {renderWithTheme} from "./test-utils";
+
+describe("SectionDivider", () => {
+  it("renders correctly", () => {
+    const {toJSON} = renderWithTheme(<SectionDivider />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("is hidden from accessibility", () => {
+    const {toJSON} = renderWithTheme(<SectionDivider />);
+    // The component should have aria-hidden=true
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/SegmentedControl.test.tsx

@@ -0,0 +1,84 @@
+import {describe, expect, it, mock} from "bun:test";
+import {fireEvent} from "@testing-library/react-native";
+
+import {SegmentedControl} from "./SegmentedControl";
+import {renderWithTheme} from "./test-utils";
+
+describe("SegmentedControl", () => {
+  const defaultItems = ["Tab 1", "Tab 2", "Tab 3"];
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<SegmentedControl items={defaultItems} selectedIndex={0} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders all items", () => {
+    const {getByText} = renderWithTheme(
+      <SegmentedControl items={defaultItems} selectedIndex={0} />
+    );
+    expect(getByText("Tab 1")).toBeTruthy();
+    expect(getByText("Tab 2")).toBeTruthy();
+    expect(getByText("Tab 3")).toBeTruthy();
+  });
+
+  it("highlights selected item", () => {
+    const {toJSON} = renderWithTheme(<SegmentedControl items={defaultItems} selectedIndex={1} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("calls onChange when item is pressed", () => {
+    const handleChange = mock((_index: number) => {});
+    const {getByText} = renderWithTheme(
+      <SegmentedControl items={defaultItems} onChange={handleChange} selectedIndex={0} />
+    );
+
+    fireEvent.press(getByText("Tab 2"));
+    expect(handleChange).toHaveBeenCalledWith(1);
+  });
+
+  it("renders with medium size (default)", () => {
+    const {toJSON} = renderWithTheme(
+      <SegmentedControl items={defaultItems} selectedIndex={0} size="md" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with large size", () => {
+    const {toJSON} = renderWithTheme(
+      <SegmentedControl items={defaultItems} selectedIndex={0} size="lg" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with badges", () => {
+    const badges = [
+      {count: 5, status: "info" as const},
+      {count: 3, status: "warning" as const},
+      {count: 1, status: "error" as const},
+    ];
+    const {toJSON} = renderWithTheme(
+      <SegmentedControl badges={badges} items={defaultItems} selectedIndex={0} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with maxItems and scroll buttons", () => {
+    const manyItems = ["Tab 1", "Tab 2", "Tab 3", "Tab 4", "Tab 5", "Tab 6"];
+    const {toJSON} = renderWithTheme(
+      <SegmentedControl items={manyItems} maxItems={3} selectedIndex={0} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("handles scroll navigation", () => {
+    const manyItems = ["Tab 1", "Tab 2", "Tab 3", "Tab 4", "Tab 5", "Tab 6"];
+    const {getByText, toJSON} = renderWithTheme(
+      <SegmentedControl items={manyItems} maxItems={3} selectedIndex={0} />
+    );
+    // Initially shows first 3 items
+    expect(getByText("Tab 1")).toBeTruthy();
+    expect(getByText("Tab 2")).toBeTruthy();
+    expect(getByText("Tab 3")).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/SelectBadge.test.tsx

@@ -0,0 +1,103 @@
+import {describe, expect, it} from "bun:test";
+
+import {SelectBadge} from "./SelectBadge";
+import {renderWithTheme} from "./test-utils";
+
+describe("SelectBadge", () => {
+  const defaultOptions = [
+    {label: "Option A", value: "a"},
+    {label: "Option B", value: "b"},
+    {label: "Option C", value: "c"},
+  ];
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectBadge onChange={() => {}} options={defaultOptions} value="a" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("displays selected option label", () => {
+    const {getByText} = renderWithTheme(
+      <SelectBadge onChange={() => {}} options={defaultOptions} value="b" />
+    );
+    expect(getByText("Option B")).toBeTruthy();
+  });
+
+  it("displays placeholder when no value", () => {
+    const {getByText} = renderWithTheme(
+      <SelectBadge onChange={() => {}} options={defaultOptions} value={undefined as any} />
+    );
+    expect(getByText("---")).toBeTruthy();
+  });
+
+  it("renders with info status (default)", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectBadge onChange={() => {}} options={defaultOptions} status="info" value="a" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with success status", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectBadge onChange={() => {}} options={defaultOptions} status="success" value="a" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with warning status", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectBadge onChange={() => {}} options={defaultOptions} status="warning" value="a" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with error status", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectBadge onChange={() => {}} options={defaultOptions} status="error" value="a" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with neutral status", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectBadge onChange={() => {}} options={defaultOptions} status="neutral" value="a" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with secondary style", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectBadge
+        onChange={() => {}}
+        options={defaultOptions}
+        secondary
+        status="success"
+        value="a"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom colors", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectBadge
+        customBackgroundColor="#FF0000"
+        customBorderColor="#00FF00"
+        customTextColor="#0000FF"
+        onChange={() => {}}
+        options={defaultOptions}
+        status="custom"
+        value="a"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders disabled state", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectBadge disabled onChange={() => {}} options={defaultOptions} value="a" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/SelectField.test.tsx

@@ -0,0 +1,84 @@
+import {describe, expect, it} from "bun:test";
+
+import {SelectField} from "./SelectField";
+import {renderWithTheme} from "./test-utils";
+
+describe("SelectField", () => {
+  const defaultOptions = [
+    {label: "Option 1", value: "opt1"},
+    {label: "Option 2", value: "opt2"},
+    {label: "Option 3", value: "opt3"},
+  ];
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectField onChange={() => {}} options={defaultOptions} value="" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with title", () => {
+    const {getByText, toJSON} = renderWithTheme(
+      <SelectField onChange={() => {}} options={defaultOptions} title="Select an option" value="" />
+    );
+    expect(getByText("Select an option")).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with helper text", () => {
+    const {getByText} = renderWithTheme(
+      <SelectField
+        helperText="This is helper text"
+        onChange={() => {}}
+        options={defaultOptions}
+        value=""
+      />
+    );
+    expect(getByText("This is helper text")).toBeTruthy();
+  });
+
+  it("renders with error text", () => {
+    const {getByText} = renderWithTheme(
+      <SelectField
+        errorText="This field is required"
+        onChange={() => {}}
+        options={defaultOptions}
+        value=""
+      />
+    );
+    expect(getByText("This field is required")).toBeTruthy();
+  });
+
+  it("renders with selected value", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectField onChange={() => {}} options={defaultOptions} value="opt2" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom placeholder", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectField
+        onChange={() => {}}
+        options={defaultOptions}
+        placeholder="Choose one..."
+        value=""
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders disabled state", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectField disabled onChange={() => {}} options={defaultOptions} value="" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with requireValue (no clear option)", () => {
+    const {toJSON} = renderWithTheme(
+      <SelectField onChange={() => {}} options={defaultOptions} requireValue value="opt1" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/SideDrawer.test.tsx

@@ -0,0 +1,99 @@
+import {describe, expect, it, mock} from "bun:test";
+
+import {SideDrawer} from "./SideDrawer";
+import {Text} from "./Text";
+import {renderWithTheme} from "./test-utils";
+
+describe("SideDrawer", () => {
+  it("renders correctly when closed", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer isOpen={false} renderContent={() => <Text>Drawer content</Text>}>
+        <Text>Main content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly when open", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer isOpen={true} renderContent={() => <Text>Drawer content</Text>}>
+        <Text>Main content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with left position (default)", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer isOpen={true} position="left" renderContent={() => <Text>Left drawer</Text>}>
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with right position", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer isOpen={true} position="right" renderContent={() => <Text>Right drawer</Text>}>
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with front drawer type (default)", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer drawerType="front" isOpen={true} renderContent={() => <Text>Front drawer</Text>}>
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with back drawer type", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer drawerType="back" isOpen={true} renderContent={() => <Text>Back drawer</Text>}>
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with slide drawer type", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer drawerType="slide" isOpen={true} renderContent={() => <Text>Slide drawer</Text>}>
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom drawer styles", () => {
+    const {toJSON} = renderWithTheme(
+      <SideDrawer
+        drawerStyles={{width: "50%"}}
+        isOpen={true}
+        renderContent={() => <Text>Styled drawer</Text>}
+      >
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("accepts onOpen and onClose callbacks", () => {
+    const handleOpen = mock(() => {});
+    const handleClose = mock(() => {});
+    const {toJSON} = renderWithTheme(
+      <SideDrawer
+        isOpen={false}
+        onClose={handleClose}
+        onOpen={handleOpen}
+        renderContent={() => <Text>Drawer</Text>}
+      >
+        <Text>Content</Text>
+      </SideDrawer>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/Signature.test.tsx

@@ -0,0 +1,32 @@
+import {describe, expect, it, mock} from "bun:test";
+import {forwardRef} from "react";
+import {View} from "react-native";
+
+import {Signature} from "./Signature";
+import {renderWithTheme} from "./test-utils";
+
+// Mock react-signature-canvas
+mock.module("react-signature-canvas", () => ({
+  default: forwardRef(({backgroundColor}: any, ref) => (
+    <View ref={ref as any} style={{backgroundColor}} testID="signature-canvas" />
+  )),
+}));
+
+describe("Signature", () => {
+  it("renders correctly", () => {
+    const mockOnChange = mock(() => {});
+    const {toJSON} = renderWithTheme(<Signature onChange={mockOnChange} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("component is defined", () => {
+    expect(Signature).toBeDefined();
+    expect(typeof Signature).toBe("function");
+  });
+
+  it("renders with clear button", () => {
+    const mockOnChange = mock(() => {});
+    const {getByText} = renderWithTheme(<Signature onChange={mockOnChange} />);
+    expect(getByText("Clear")).toBeTruthy();
+  });
+});