@terreno/ui 0.0.14 → 0.0.16

package/README.md

@@ -56,7 +56,7 @@ differentiating based on screen size and format.
 Check out the demo app for easily seeing how the UIs work in iOS/Android/Web 
 in apps/demo.
 
-You can see the [web demo here](https://terreno-ui.netlify.app)
+You can see the [web demo here](https://terreno-demo.netlify.app)
 
 # Installation
 

package/dist/Card.d.ts

@@ -1,2 +1,2 @@
 import type { BoxProps } from "./Common";
-export declare const Card: ({ children, color, padding, width, ...rest }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Card: ({ children, color, padding, ...rest }: BoxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Card.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from "./Box";
 export const Card = (_a) => {
-    var { children, color = "base", padding = 4, width } = _a, rest = __rest(_a, ["children", "color", "padding", "width"]);
-    return (_jsx(Box, Object.assign({ color: color, direction: "column", display: "flex", padding: padding, rounding: "md", shadow: true, width: width }, rest, { children: children })));
+    var { children, color = "base", padding = 4 } = _a, rest = __rest(_a, ["children", "color", "padding"]);
+    return (_jsx(Box, Object.assign({ color: color, direction: "column", display: "flex", padding: padding, rounding: "md", shadow: true }, rest, { children: children })));
 };
 //# sourceMappingURL=Card.js.map

package/dist/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAiE,EAAE,EAAE;QAArE,EAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAG,CAAC,EAAE,KAAK,OAAoB,EAAf,IAAI,cAAtD,yCAAuD,CAAD;IACzE,OAAO,CACL,KAAC,GAAG,kBACF,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,IAAI,EACb,MAAM,QACN,KAAK,EAAE,KAAK,IACR,IAAI,cAEP,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAC,GAAG,EAAC,MAAM,OAAO,CAAC;AAG1B,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAA0D,EAAE,EAAE;QAA9D,EAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,GAAG,CAAC,OAAoB,EAAf,IAAI,cAA/C,gCAAgD,CAAD;IAClE,OAAO,CACL,KAAC,GAAG,kBACF,KAAK,EAAE,KAAK,EACZ,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAC,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAC,IAAI,EACb,MAAM,UACF,IAAI,cAEP,QAAQ,IACL,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/DateUtilities.js

@@ -75,7 +75,7 @@ export function humanDate(date, { timezone, dontShowTime } = {}) {
     }
     else {
         // December 25, 2022
-        return clonedDate.toFormat("MMM d, iiii");
+        return clonedDate.toFormat("MMM d, yyyy");
     }
 }
 // Prints a human friendly date and time, e.g. "Tomorrow 9:00 AM", "Yesterday 9:00 AM", "Monday
@@ -119,7 +119,7 @@ export function humanDateAndTime(date, { timezone, showTimezone = true } = {}) {
     }
     else {
         // December 25, 2022
-        return `${clonedDate.toFormat("MMM d, iiii")} ${time}`;
+        return `${clonedDate.toFormat("MMM d, yyyy")} ${time}`;
     }
 }
 // Print date in the format of M/D/YY, taking timezones into account.

package/package.json

@@ -128,5 +128,5 @@
     "test:ci": "TZ=America/New_York bun test",
     "types": "bunx typedoc"
   },
-  "version": "0.0.14"
+  "version": "0.0.16"
 }

package/src/ActionSheet.test.tsx

@@ -0,0 +1,77 @@
+import {describe, expect, it} from "bun:test";
+import {render} from "@testing-library/react-native";
+import {createRef} from "react";
+import {Text} from "react-native";
+
+import {ActionSheet, getDeviceHeight, getElevation} from "./ActionSheet";
+import {ThemeProvider} from "./Theme";
+
+describe("ActionSheet", () => {
+  it("component is defined", () => {
+    expect(ActionSheet).toBeDefined();
+    expect(typeof ActionSheet).toBe("function");
+  });
+
+  it("renders correctly", () => {
+    const ref = createRef<ActionSheet>();
+    const {toJSON} = render(
+      <ThemeProvider>
+        <ActionSheet ref={ref}>
+          <Text>Test content</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom overlay color", () => {
+    const ref = createRef<ActionSheet>();
+    const {toJSON} = render(
+      <ThemeProvider>
+        <ActionSheet overlayColor="rgba(0,0,0,0.5)" ref={ref}>
+          <Text>Content</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with gesture enabled", () => {
+    const ref = createRef<ActionSheet>();
+    const {toJSON} = render(
+      <ThemeProvider>
+        <ActionSheet gestureEnabled ref={ref}>
+          <Text>Gesture content</Text>
+        </ActionSheet>
+      </ThemeProvider>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  describe("getDeviceHeight", () => {
+    it("returns a number", () => {
+      const height = getDeviceHeight(false);
+      expect(typeof height).toBe("number");
+      expect(height).toBeGreaterThan(0);
+    });
+
+    it("works with statusBarTranslucent true", () => {
+      const height = getDeviceHeight(true);
+      expect(typeof height).toBe("number");
+      expect(height).toBeGreaterThan(0);
+    });
+  });
+
+  describe("getElevation", () => {
+    it("returns empty object for no elevation", () => {
+      expect(getElevation()).toEqual({});
+      expect(getElevation(0)).toEqual({});
+    });
+
+    it("returns elevation styles for positive elevation", () => {
+      const result = getElevation(5);
+      expect(result).toHaveProperty("elevation", 5);
+      expect(result).toHaveProperty("boxShadow");
+    });
+  });
+});

package/src/Banner.test.tsx

@@ -0,0 +1,106 @@
+import {describe, expect, it, mock} from "bun:test";
+import {act, fireEvent, waitFor} from "@testing-library/react-native";
+
+import {Banner} from "./Banner";
+import {renderWithTheme} from "./test-utils";
+
+describe("Banner", () => {
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<Banner id="test-banner" text="Test message" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders text content correctly", () => {
+    const {getByText} = renderWithTheme(<Banner id="test-banner" text="Important notice" />);
+    expect(getByText("Important notice")).toBeTruthy();
+  });
+
+  it("renders with info status (default)", () => {
+    const {toJSON} = renderWithTheme(<Banner id="test-banner" status="info" text="Info message" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with alert status", () => {
+    const {toJSON} = renderWithTheme(
+      <Banner id="test-banner" status="alert" text="Alert message" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with warning status", () => {
+    const {toJSON} = renderWithTheme(
+      <Banner id="test-banner" status="warning" text="Warning message" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with icon when hasIcon is true", () => {
+    const {toJSON} = renderWithTheme(<Banner hasIcon id="test-banner" text="With icon" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders dismissible banner with dismiss button", () => {
+    const {getByLabelText} = renderWithTheme(
+      <Banner dismissible id="test-banner" text="Dismissible" />
+    );
+    expect(getByLabelText("Dismiss")).toBeTruthy();
+  });
+
+  it("hides banner when dismiss button is clicked", async () => {
+    const {getByLabelText, queryByText} = renderWithTheme(
+      <Banner dismissible id="test-dismiss-banner" text="Dismissible banner" />
+    );
+
+    await act(async () => {
+      fireEvent.press(getByLabelText("Dismiss"));
+    });
+
+    await waitFor(() => {
+      expect(queryByText("Dismissible banner")).toBeNull();
+    });
+  });
+
+  it("renders with button", async () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {getByText, toJSON} = renderWithTheme(
+      <Banner
+        buttonOnClick={handleClick}
+        buttonText="Action"
+        id="test-banner"
+        text="Banner with button"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText("Action")).toBeTruthy();
+  });
+
+  it("renders with button and icon", () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {toJSON} = renderWithTheme(
+      <Banner
+        buttonIconName="arrow-right"
+        buttonOnClick={handleClick}
+        buttonText="Go"
+        id="test-banner"
+        text="Banner with button and icon"
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("calls buttonOnClick when button is pressed", async () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {getByText} = renderWithTheme(
+      <Banner buttonOnClick={handleClick} buttonText="Click me" id="test-banner" text="Banner" />
+    );
+
+    await act(async () => {
+      fireEvent.press(getByText("Click me"));
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    });
+
+    await waitFor(() => {
+      expect(handleClick).toHaveBeenCalled();
+    });
+  });
+});

package/src/Body.test.tsx

@@ -0,0 +1,79 @@
+import {describe, expect, it} from "bun:test";
+
+import {Body} from "./Body";
+import {Text} from "./Text";
+import {renderWithTheme} from "./test-utils";
+
+describe("Body", () => {
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(
+      <Body>
+        <Text>Body content</Text>
+      </Body>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders children correctly", () => {
+    const {getByText} = renderWithTheme(
+      <Body>
+        <Text>Test content</Text>
+      </Body>
+    );
+    expect(getByText("Test content")).toBeTruthy();
+  });
+
+  it("renders with scroll enabled", () => {
+    const {toJSON} = renderWithTheme(
+      <Body scroll>
+        <Text>Scrollable content</Text>
+      </Body>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with loading state", () => {
+    const {toJSON} = renderWithTheme(
+      <Body loading>
+        <Text>Content</Text>
+      </Body>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom padding", () => {
+    const {toJSON} = renderWithTheme(
+      <Body padding={10}>
+        <Text>Content</Text>
+      </Body>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with custom height", () => {
+    const {toJSON} = renderWithTheme(
+      <Body height={500}>
+        <Text>Content</Text>
+      </Body>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders without keyboard avoiding when avoidKeyboard is false", () => {
+    const {toJSON} = renderWithTheme(
+      <Body avoidKeyboard={false}>
+        <Text>Content</Text>
+      </Body>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with keyboard avoiding by default", () => {
+    const {toJSON} = renderWithTheme(
+      <Body>
+        <Text>Content</Text>
+      </Body>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/BooleanField.test.tsx

@@ -0,0 +1,84 @@
+import {describe, expect, it, mock} from "bun:test";
+import {fireEvent} from "@testing-library/react-native";
+
+import {BooleanField} from "./BooleanField";
+import {renderWithTheme} from "./test-utils";
+
+describe("BooleanField", () => {
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<BooleanField onChange={() => {}} value={false} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with title", () => {
+    const {getByText, toJSON} = renderWithTheme(
+      <BooleanField onChange={() => {}} title="Enable notifications" value={false} />
+    );
+    expect(getByText("Enable notifications")).toBeTruthy();
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with value true", () => {
+    const {toJSON} = renderWithTheme(<BooleanField onChange={() => {}} value={true} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with title variant showing Yes/No text", () => {
+    const {getByText} = renderWithTheme(
+      <BooleanField onChange={() => {}} title="Active" value={true} variant="title" />
+    );
+    expect(getByText("Yes")).toBeTruthy();
+  });
+
+  it("renders with title variant showing No when false", () => {
+    const {getByText} = renderWithTheme(
+      <BooleanField onChange={() => {}} title="Active" value={false} variant="title" />
+    );
+    expect(getByText("No")).toBeTruthy();
+  });
+
+  it("calls onChange when pressed", () => {
+    const handleChange = mock((_value: boolean) => {});
+    const {UNSAFE_getByType} = renderWithTheme(
+      <BooleanField onChange={handleChange} value={false} />
+    );
+    // TouchableWithoutFeedback is the pressable element
+    const touchable = UNSAFE_getByType("TouchableWithoutFeedback" as any);
+    fireEvent.press(touchable);
+    expect(handleChange).toHaveBeenCalledWith(true);
+  });
+
+  it("does not call onChange when disabled", () => {
+    const handleChange = mock((_value: boolean) => {});
+    const {UNSAFE_getByType} = renderWithTheme(
+      <BooleanField disabled onChange={handleChange} value={false} />
+    );
+    const touchable = UNSAFE_getByType("TouchableWithoutFeedback" as any);
+    fireEvent.press(touchable);
+    expect(handleChange).not.toHaveBeenCalled();
+  });
+
+  it("renders disabled state", () => {
+    const {toJSON} = renderWithTheme(<BooleanField disabled onChange={() => {}} value={false} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with helper text", () => {
+    const {getByText} = renderWithTheme(
+      <BooleanField helperText="Toggle to enable" onChange={() => {}} value={false} />
+    );
+    expect(getByText("Toggle to enable")).toBeTruthy();
+  });
+
+  it("renders with disabled helper text when disabled", () => {
+    const {getByText} = renderWithTheme(
+      <BooleanField
+        disabled
+        disabledHelperText="This setting is locked"
+        onChange={() => {}}
+        value={false}
+      />
+    );
+    expect(getByText("This setting is locked")).toBeTruthy();
+  });
+});

package/src/Button.test.tsx

@@ -0,0 +1,160 @@
+import {describe, expect, it, mock} from "bun:test";
+import {act, fireEvent, waitFor} from "@testing-library/react-native";
+
+import {Button} from "./Button";
+import {renderWithTheme} from "./test-utils";
+
+describe("Button", () => {
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<Button onClick={() => {}} text="Click me" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders button text correctly", () => {
+    const {getByText} = renderWithTheme(<Button onClick={() => {}} text="Submit" />);
+    expect(getByText("Submit")).toBeTruthy();
+  });
+
+  it("renders with testID", () => {
+    const {getByTestId} = renderWithTheme(
+      <Button onClick={() => {}} testID="test-button" text="Test" />
+    );
+    expect(getByTestId("test-button")).toBeTruthy();
+  });
+
+  // Variant tests
+  it("renders primary variant", () => {
+    const {toJSON} = renderWithTheme(
+      <Button onClick={() => {}} text="Primary" variant="primary" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders secondary variant", () => {
+    const {toJSON} = renderWithTheme(
+      <Button onClick={() => {}} text="Secondary" variant="secondary" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders muted variant", () => {
+    const {toJSON} = renderWithTheme(<Button onClick={() => {}} text="Muted" variant="muted" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders outline variant", () => {
+    const {toJSON} = renderWithTheme(
+      <Button onClick={() => {}} text="Outline" variant="outline" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders destructive variant", () => {
+    const {toJSON} = renderWithTheme(
+      <Button onClick={() => {}} text="Delete" variant="destructive" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  // Disabled state
+  it("renders disabled state", () => {
+    const {toJSON} = renderWithTheme(<Button disabled onClick={() => {}} text="Disabled" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("applies disabled styles when disabled", () => {
+    const {toJSON} = renderWithTheme(<Button disabled onClick={() => {}} text="Disabled" />);
+    // The button should render with disabled styling
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  // Loading state
+  it("renders loading state", () => {
+    const {toJSON} = renderWithTheme(<Button loading onClick={() => {}} text="Loading" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  // fullWidth
+  it("renders fullWidth button", () => {
+    const {toJSON} = renderWithTheme(<Button fullWidth onClick={() => {}} text="Full Width" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  // Icon tests
+  it("renders with icon on left", () => {
+    const {toJSON} = renderWithTheme(
+      <Button iconName="check" onClick={() => {}} text="With Icon" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with icon on right", () => {
+    const {toJSON} = renderWithTheme(
+      <Button iconName="arrow-right" iconPosition="right" onClick={() => {}} text="Next" />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  // Click handling
+  it("calls onClick when pressed", async () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {getByText} = renderWithTheme(<Button onClick={handleClick} text="Click" />);
+
+    await act(async () => {
+      fireEvent.press(getByText("Click"));
+      // Wait for debounce
+      await new Promise((resolve) => setTimeout(resolve, 100));
+    });
+
+    await waitFor(() => {
+      expect(handleClick).toHaveBeenCalled();
+    });
+  });
+
+  // Confirmation modal tests
+  it("renders with confirmation modal props", () => {
+    const {toJSON} = renderWithTheme(
+      <Button
+        confirmationText="Are you sure?"
+        modalSubTitle="This action cannot be undone"
+        modalTitle="Confirm Delete"
+        onClick={() => {}}
+        text="Delete"
+        withConfirmation
+      />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("shows confirmation modal when withConfirmation is true and button is pressed", async () => {
+    const handleClick = mock(() => Promise.resolve());
+    const {getByText, queryByText} = renderWithTheme(
+      <Button
+        confirmationText="Are you sure you want to proceed?"
+        modalTitle="Confirm Action"
+        onClick={handleClick}
+        text="Press Me"
+        withConfirmation
+      />
+    );
+
+    await act(async () => {
+      fireEvent.press(getByText("Press Me"));
+      await new Promise((resolve) => setTimeout(resolve, 600));
+    });
+
+    // The confirmation modal should now be visible with the modal title
+    await waitFor(
+      () => {
+        expect(queryByText("Confirm Action")).toBeTruthy();
+      },
+      {timeout: 2000}
+    );
+  });
+
+  // Accessibility
+  it("has correct accessibility props", () => {
+    const {getByLabelText} = renderWithTheme(<Button onClick={() => {}} text="Accessible" />);
+    expect(getByLabelText("Accessible")).toBeTruthy();
+  });
+});

package/src/Card.test.tsx

@@ -0,0 +1,61 @@
+import {describe, expect, it} from "bun:test";
+
+import {Card} from "./Card";
+import {Text} from "./Text";
+import {renderWithTheme} from "./test-utils";
+
+describe("Card", () => {
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(
+      <Card>
+        <Text>Card content</Text>
+      </Card>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders children correctly", () => {
+    const {getByText} = renderWithTheme(
+      <Card>
+        <Text>Test content</Text>
+      </Card>
+    );
+    expect(getByText("Test content")).toBeTruthy();
+  });
+
+  it("applies custom padding", () => {
+    const {toJSON} = renderWithTheme(
+      <Card padding={8}>
+        <Text>Content</Text>
+      </Card>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("applies custom color", () => {
+    const {toJSON} = renderWithTheme(
+      <Card color="secondary">
+        <Text>Content</Text>
+      </Card>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("passes additional Box props", () => {
+    const {toJSON} = renderWithTheme(
+      <Card gap={2} marginTop={4}>
+        <Text>Content</Text>
+      </Card>
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders with testID", () => {
+    const {getByTestId} = renderWithTheme(
+      <Card testID="test-card">
+        <Text>Content</Text>
+      </Card>
+    );
+    expect(getByTestId("test-card")).toBeTruthy();
+  });
+});

package/src/Card.tsx

@@ -1,7 +1,7 @@
 import {Box} from "./Box";
 import type {BoxProps} from "./Common";
 
-export const Card = ({children, color = "base", padding = 4, width, ...rest}: BoxProps) => {
+export const Card = ({children, color = "base", padding = 4, ...rest}: BoxProps) => {
   return (
     <Box
       color={color}
@@ -10,7 +10,6 @@ export const Card = ({children, color = "base", padding = 4, width, ...rest}: Bo
       padding={padding}
       rounding="md"
       shadow
-      width={width}
       {...rest}
     >
       {children}