@terreno/ui 0.0.15 → 0.0.16

package/src/Theme.test.tsx

@@ -0,0 +1,153 @@
+import {describe, expect, it} from "bun:test";
+import {render} from "@testing-library/react-native";
+import {Text, View} from "react-native";
+
+import {ThemeProvider, useTheme} from "./Theme";
+
+const ThemeConsumer = () => {
+  const {theme} = useTheme();
+  return (
+    <View>
+      <Text testID="surface-base">{theme.surface?.base}</Text>
+      <Text testID="text-primary">{theme.text?.primary}</Text>
+    </View>
+  );
+};
+
+describe("Theme", () => {
+  describe("ThemeProvider", () => {
+    it("renders children", () => {
+      const {getByText} = render(
+        <ThemeProvider>
+          <Text>Child content</Text>
+        </ThemeProvider>
+      );
+      expect(getByText("Child content")).toBeTruthy();
+    });
+
+    it("provides default theme values", () => {
+      const {getByTestId} = render(
+        <ThemeProvider>
+          <ThemeConsumer />
+        </ThemeProvider>
+      );
+      // Default surface.base is neutral000 which maps to #FFFFFF
+      expect(getByTestId("surface-base").children[0]).toBe("#FFFFFF");
+      // Default text.primary is neutral900 which maps to #1C1C1C
+      expect(getByTestId("text-primary").children[0]).toBe("#1C1C1C");
+    });
+  });
+
+  describe("useTheme", () => {
+    it("returns theme object", () => {
+      let capturedTheme: any;
+      const Capture = () => {
+        capturedTheme = useTheme();
+        return null;
+      };
+
+      render(
+        <ThemeProvider>
+          <Capture />
+        </ThemeProvider>
+      );
+
+      expect(capturedTheme.theme).toBeDefined();
+      expect(capturedTheme.setTheme).toBeDefined();
+      expect(capturedTheme.setPrimitives).toBeDefined();
+      expect(capturedTheme.resetTheme).toBeDefined();
+    });
+
+    it("provides surface colors", () => {
+      let theme: any;
+      const Capture = () => {
+        theme = useTheme().theme;
+        return null;
+      };
+
+      render(
+        <ThemeProvider>
+          <Capture />
+        </ThemeProvider>
+      );
+
+      expect(theme.surface).toBeDefined();
+      expect(theme.surface.base).toBeDefined();
+      expect(theme.surface.primary).toBeDefined();
+      expect(theme.surface.error).toBeDefined();
+    });
+
+    it("provides text colors", () => {
+      let theme: any;
+      const Capture = () => {
+        theme = useTheme().theme;
+        return null;
+      };
+
+      render(
+        <ThemeProvider>
+          <Capture />
+        </ThemeProvider>
+      );
+
+      expect(theme.text).toBeDefined();
+      expect(theme.text.primary).toBeDefined();
+      expect(theme.text.inverted).toBeDefined();
+      expect(theme.text.error).toBeDefined();
+    });
+
+    it("provides border colors", () => {
+      let theme: any;
+      const Capture = () => {
+        theme = useTheme().theme;
+        return null;
+      };
+
+      render(
+        <ThemeProvider>
+          <Capture />
+        </ThemeProvider>
+      );
+
+      expect(theme.border).toBeDefined();
+      expect(theme.border.default).toBeDefined();
+    });
+
+    it("provides spacing values", () => {
+      let theme: any;
+      const Capture = () => {
+        theme = useTheme().theme;
+        return null;
+      };
+
+      render(
+        <ThemeProvider>
+          <Capture />
+        </ThemeProvider>
+      );
+
+      expect(theme.spacing).toBeDefined();
+      expect(theme.spacing.sm).toBeDefined();
+      expect(theme.spacing.md).toBeDefined();
+      expect(theme.spacing.lg).toBeDefined();
+    });
+
+    it("provides radius values", () => {
+      let theme: any;
+      const Capture = () => {
+        theme = useTheme().theme;
+        return null;
+      };
+
+      render(
+        <ThemeProvider>
+          <Capture />
+        </ThemeProvider>
+      );
+
+      expect(theme.radius).toBeDefined();
+      expect(theme.radius.default).toBeDefined();
+      expect(theme.radius.rounded).toBeDefined();
+    });
+  });
+});

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,15 @@
+import {describe, expect, it} from "bun:test";
+
+import {UnifiedAddressAutoCompleteField} from "./UnifiedAddressAutoComplete";
+
+describe("UnifiedAddressAutoCompleteField", () => {
+  // UnifiedAddressAutoCompleteField uses Google Places API and platform-specific implementations
+  it.skip("renders correctly (skipped - uses Google Places API)", () => {
+    expect(UnifiedAddressAutoCompleteField).toBeDefined();
+  });
+
+  it("component is defined", () => {
+    expect(UnifiedAddressAutoCompleteField).toBeDefined();
+    expect(typeof UnifiedAddressAutoCompleteField).toBe("function");
+  });
+});

package/src/Utilities.test.tsx

@@ -0,0 +1,237 @@
+import {describe, expect, it} from "bun:test";
+
+import {
+  concat,
+  findAddressComponent,
+  fromClassName,
+  fromInlineStyle,
+  iconNumberToSize,
+  identity,
+  isAPIError,
+  isNative,
+  isTestUser,
+  isValidGoogleApiKey,
+  mergeInlineStyles,
+  printAPIError,
+  processAddressComponents,
+  toProps,
+} from "./Utilities";
+
+describe("Utilities", () => {
+  describe("mergeInlineStyles", () => {
+    it("merges inline styles", () => {
+      const existing = {__style: {color: "red"}};
+      const newStyle = {backgroundColor: "blue"};
+      const result = mergeInlineStyles(existing, newStyle);
+      expect(result.__style).toEqual({backgroundColor: "blue", color: "red"});
+    });
+
+    it("handles undefined existing style", () => {
+      const result = mergeInlineStyles(undefined, {color: "red"});
+      expect(result.__style).toEqual({color: "red"});
+    });
+  });
+
+  describe("isTestUser", () => {
+    it("returns true for nang.io email", () => {
+      expect(isTestUser({email: "test@nang.io"} as any)).toBe(true);
+    });
+
+    it("returns true for example.com email", () => {
+      expect(isTestUser({email: "test@example.com"} as any)).toBe(true);
+    });
+
+    it("returns false for regular email", () => {
+      expect(isTestUser({email: "user@company.com"} as any)).toBe(false);
+    });
+
+    it("returns falsy for undefined profile", () => {
+      expect(isTestUser(undefined)).toBeFalsy();
+    });
+  });
+
+  describe("iconNumberToSize", () => {
+    it("returns xs for size less than 8", () => {
+      expect(iconNumberToSize(5)).toBe("xs");
+    });
+
+    it("returns sm for size 8-11", () => {
+      expect(iconNumberToSize(10)).toBe("sm");
+    });
+
+    it("returns md for size 12-13", () => {
+      expect(iconNumberToSize(12)).toBe("md");
+    });
+
+    it("returns lg for size 14-19", () => {
+      expect(iconNumberToSize(16)).toBe("lg");
+    });
+
+    it("returns xl for size 20+", () => {
+      expect(iconNumberToSize(24)).toBe("xl");
+    });
+
+    it("returns lg for default size (16)", () => {
+      expect(iconNumberToSize()).toBe("lg");
+    });
+  });
+
+  describe("Style utilities", () => {
+    describe("identity", () => {
+      it("returns empty style", () => {
+        const result = identity();
+        expect(result.className.size).toBe(0);
+        expect(Object.keys(result.inlineStyle).length).toBe(0);
+      });
+    });
+
+    describe("fromClassName", () => {
+      it("creates style from classnames", () => {
+        const result = fromClassName("class1", "class2");
+        expect(result.className.has("class1")).toBe(true);
+        expect(result.className.has("class2")).toBe(true);
+      });
+    });
+
+    describe("fromInlineStyle", () => {
+      it("creates style from inline styles", () => {
+        const result = fromInlineStyle({color: "red", fontSize: 14});
+        expect(result.inlineStyle).toEqual({color: "red", fontSize: 14});
+      });
+    });
+
+    describe("concat", () => {
+      it("concatenates multiple styles", () => {
+        const style1 = fromClassName("class1");
+        const style2 = fromClassName("class2");
+        const style3 = fromInlineStyle({color: "red"});
+        const result = concat([style1, style2, style3]);
+        expect(result.className.has("class1")).toBe(true);
+        expect(result.className.has("class2")).toBe(true);
+        expect(result.inlineStyle.color).toBe("red");
+      });
+    });
+
+    describe("toProps", () => {
+      it("converts style to props object", () => {
+        const style = concat([fromClassName("a", "b"), fromInlineStyle({color: "red"})]);
+        const props = toProps(style);
+        expect(props.className).toBe("a b");
+        expect(props.style).toEqual({color: "red"});
+      });
+
+      it("omits empty className", () => {
+        const style = fromInlineStyle({color: "red"});
+        const props = toProps(style);
+        expect(props.className).toBeUndefined();
+      });
+
+      it("omits empty style", () => {
+        const style = fromClassName("class1");
+        const props = toProps(style);
+        expect(props.style).toBeUndefined();
+      });
+    });
+  });
+
+  describe("isNative", () => {
+    it("returns boolean", () => {
+      const result = isNative();
+      expect(typeof result).toBe("boolean");
+    });
+  });
+
+  describe("findAddressComponent", () => {
+    const components = [
+      {long_name: "123", short_name: "123", types: ["street_number"]},
+      {long_name: "Main Street", short_name: "Main St", types: ["route"]},
+      {long_name: "New York", short_name: "NY", types: ["locality"]},
+    ];
+
+    it("finds component by type", () => {
+      expect(findAddressComponent(components, "locality")).toBe("New York");
+    });
+
+    it("returns empty string for missing type", () => {
+      expect(findAddressComponent(components, "country")).toBe("");
+    });
+  });
+
+  describe("processAddressComponents", () => {
+    const components = [
+      {long_name: "123", short_name: "123", types: ["street_number"]},
+      {long_name: "Main Street", short_name: "Main St", types: ["route"]},
+      {long_name: "Boston", short_name: "Boston", types: ["locality"]},
+      {long_name: "Massachusetts", short_name: "MA", types: ["administrative_area_level_1"]},
+      {long_name: "02101", short_name: "02101", types: ["postal_code"]},
+    ];
+
+    it("processes address components correctly", () => {
+      const result = processAddressComponents(components);
+      expect(result.address1).toBe("123 Main Street");
+      expect(result.city).toBe("Boston");
+      expect(result.state).toBe("Massachusetts");
+      expect(result.zipcode).toBe("02101");
+    });
+
+    it("handles empty components", () => {
+      const result = processAddressComponents([]);
+      expect(result.address1).toBe("");
+    });
+
+    it("handles undefined components", () => {
+      const result = processAddressComponents(undefined);
+      expect(result.address1).toBe("");
+    });
+  });
+
+  describe("isValidGoogleApiKey", () => {
+    it("returns true for valid-looking API key", () => {
+      expect(isValidGoogleApiKey("AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY")).toBe(true);
+    });
+
+    it("returns false for empty string", () => {
+      expect(isValidGoogleApiKey("")).toBe(false);
+    });
+
+    it("returns false for too short key", () => {
+      expect(isValidGoogleApiKey("short")).toBe(false);
+    });
+
+    it("returns false for key with invalid characters", () => {
+      expect(isValidGoogleApiKey("invalid key with spaces!!!")).toBe(false);
+    });
+  });
+
+  describe("isAPIError", () => {
+    it("returns truthy for API error object", () => {
+      const error = {data: {detail: "Something went wrong", title: "Error"}};
+      expect(isAPIError(error)).toBeTruthy();
+    });
+
+    it("returns falsy for non-API error", () => {
+      expect(isAPIError({message: "error"})).toBeFalsy();
+    });
+
+    it("returns falsy for null", () => {
+      expect(isAPIError(null)).toBeFalsy();
+    });
+  });
+
+  describe("printAPIError", () => {
+    it("prints error title", () => {
+      const error = {data: {title: "Not Found"}};
+      expect(printAPIError(error as any)).toBe("Not Found");
+    });
+
+    it("prints error title and detail", () => {
+      const error = {data: {detail: "Resource does not exist", title: "Not Found"}};
+      expect(printAPIError(error as any)).toBe("Not Found: Resource does not exist");
+    });
+
+    it("omits detail when details is false", () => {
+      const error = {data: {detail: "Resource does not exist", title: "Not Found"}};
+      expect(printAPIError(error as any, false)).toBe("Not Found");
+    });
+  });
+});

package/src/WebAddressAutocomplete.test.tsx

@@ -0,0 +1,15 @@
+import {describe, expect, it} from "bun:test";
+
+import {WebAddressAutocomplete} from "./WebAddressAutocomplete";
+
+describe("WebAddressAutocomplete", () => {
+  // WebAddressAutocomplete uses Google Places API
+  it.skip("renders correctly (skipped - uses Google Places API)", () => {
+    expect(WebAddressAutocomplete).toBeDefined();
+  });
+
+  it("component is defined", () => {
+    expect(WebAddressAutocomplete).toBeDefined();
+    expect(typeof WebAddressAutocomplete).toBe("function");
+  });
+});