@terreno/ui 0.0.1

package/src/AddressField.test.tsx

@@ -0,0 +1,120 @@
+import {afterEach, beforeEach, describe, expect, it, mock} from "bun:test";
+import {fireEvent} from "@testing-library/react-native";
+
+import {AddressField} from "./AddressField";
+import {renderWithTheme} from "./test-utils";
+
+describe("AddressField", () => {
+  let mockOnChange: ReturnType<typeof mock>;
+  let mockOnBlur: ReturnType<typeof mock>;
+
+  const defaultValue = {
+    address1: "123 Main St",
+    address2: "Apt 4B",
+    city: "Springfield",
+    countyCode: "17167",
+    countyName: "Sangamon",
+    state: "IL",
+    zipcode: "62701",
+  };
+
+  beforeEach(() => {
+    mockOnChange = mock(() => {});
+    mockOnBlur = mock(() => {});
+  });
+
+  afterEach(() => {
+    // Reset mocks after each test
+  });
+
+  const defaultProps = {
+    onBlur: mockOnBlur,
+    onChange: mockOnChange,
+    testID: "test-address",
+    value: defaultValue,
+  };
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(
+      <AddressField {...defaultProps} onBlur={mockOnBlur} onChange={mockOnChange} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders all address fields", () => {
+    const {getByTestId} = renderWithTheme(
+      <AddressField {...defaultProps} onBlur={mockOnBlur} onChange={mockOnChange} />
+    );
+
+    expect(getByTestId("test-address-address1")).toBeTruthy();
+    expect(getByTestId("test-address-address2")).toBeTruthy();
+    expect(getByTestId("test-address-city")).toBeTruthy();
+    expect(getByTestId("test-address-zip")).toBeTruthy();
+  });
+
+  it("calls onChange when address fields are updated", () => {
+    const {getByTestId} = renderWithTheme(
+      <AddressField {...defaultProps} onBlur={mockOnBlur} onChange={mockOnChange} />
+    );
+
+    const cityInput = getByTestId("test-address-city");
+    fireEvent.changeText(cityInput, "New City");
+
+    expect(mockOnChange).toHaveBeenCalledWith({
+      ...defaultValue,
+      city: "New City",
+    });
+  });
+
+  it("calls onBlur when a field is blurred", () => {
+    const {getByTestId} = renderWithTheme(
+      <AddressField {...defaultProps} onBlur={mockOnBlur} onChange={mockOnChange} />
+    );
+    // Reset mock since it was called during render
+    mockOnBlur.mockClear();
+    const zipInput = getByTestId("test-address-zip");
+    fireEvent.changeText(zipInput, "90210");
+    fireEvent(zipInput, "blur");
+
+    expect(mockOnBlur).toHaveBeenCalledWith({
+      ...defaultValue,
+      zipcode: "90210",
+    });
+  });
+
+  it("renders county fields when includeCounty is true", () => {
+    const {getByTestId} = renderWithTheme(
+      <AddressField {...defaultProps} includeCounty onBlur={mockOnBlur} onChange={mockOnChange} />
+    );
+
+    expect(getByTestId("test-address-county")).toBeTruthy();
+    expect(getByTestId("test-address-county-code")).toBeTruthy();
+  });
+
+  it("does not render county fields when includeCounty is false", () => {
+    const {queryByTestId} = renderWithTheme(
+      <AddressField
+        {...defaultProps}
+        includeCounty={false}
+        onBlur={mockOnBlur}
+        onChange={mockOnChange}
+      />
+    );
+
+    expect(queryByTestId("test-address-county")).toBeNull();
+    expect(queryByTestId("test-address-county-code")).toBeNull();
+  });
+
+  it("disables all fields when disabled prop is true", () => {
+    const {getByTestId} = renderWithTheme(
+      <AddressField {...defaultProps} disabled onBlur={mockOnBlur} onChange={mockOnChange} />
+    );
+
+    const address1Input = getByTestId("test-address-address1");
+    const cityInput = getByTestId("test-address-city");
+
+    // Check that the disabled prop is passed down to the inputs
+    expect(address1Input.props.accessibilityState.disabled).toBe(true);
+    expect(cityInput.props.accessibilityState.disabled).toBe(true);
+  });
+});

package/src/AddressField.tsx

@@ -0,0 +1,122 @@
+import type {FC} from "react";
+import {View} from "react-native";
+
+import type {AddressFieldProps, AddressInterface} from "./Common";
+import {USSTATESLIST} from "./Constants";
+import {SelectField} from "./SelectField";
+import {TextField} from "./TextField";
+import {UnifiedAddressAutoCompleteField} from "./UnifiedAddressAutoComplete";
+
+export const AddressField: FC<AddressFieldProps> = ({
+  disabled,
+  googleMapsApiKey,
+  googlePlacesMobileStyles,
+  includeCounty,
+  value,
+  testID,
+  onChange,
+  onBlur,
+}) => {
+  const handleAddressChange = (field: string, newValue: string) => {
+    onChange({...value, [field]: newValue});
+    onBlur?.({...value, [field]: newValue});
+  };
+
+  const handleAutoCompleteChange = (newValue: AddressInterface) => {
+    onChange({...value, ...newValue});
+  };
+
+  const {
+    address1 = "",
+    address2 = "",
+    city = "",
+    state = "",
+    zipcode = "",
+    countyName = "",
+    countyCode = "",
+  }: AddressInterface = value ?? ({} as AddressInterface);
+
+  return (
+    <>
+      <View style={{marginBottom: 16}}>
+        <UnifiedAddressAutoCompleteField
+          disabled={disabled}
+          googleMapsApiKey={googleMapsApiKey}
+          googlePlacesMobileStyles={googlePlacesMobileStyles}
+          handleAddressChange={(result) => handleAddressChange("address1", result)}
+          handleAutoCompleteChange={(result) => handleAutoCompleteChange(result)}
+          includeCounty={includeCounty}
+          inputValue={address1}
+          testID={`${testID}-address1`}
+        />
+      </View>
+      <View style={{marginBottom: 16}}>
+        <TextField
+          disabled={disabled}
+          id="address2"
+          onChange={(result) => handleAddressChange("address2", result)}
+          testID={`${testID}-address2`}
+          title="Apt, suite, etc"
+          type="text"
+          value={address2}
+        />
+      </View>
+      <View style={{marginBottom: 16}}>
+        <TextField
+          disabled={disabled}
+          id="city"
+          onChange={(result) => handleAddressChange("city", result)}
+          testID={`${testID}-city`}
+          title="City"
+          type="text"
+          value={city}
+        />
+      </View>
+      <View style={{marginBottom: 16}}>
+        <SelectField
+          onChange={(result) => handleAddressChange("state", result!)}
+          options={USSTATESLIST}
+          title="State"
+          value={state}
+        />
+      </View>
+      <View style={{marginBottom: 16}}>
+        <TextField
+          disabled={disabled}
+          id="zipcode"
+          onChange={(result) => handleAddressChange("zipcode", result)}
+          testID={`${testID}-zip`}
+          title="Zipcode"
+          type="text"
+          value={zipcode}
+        />
+      </View>
+      {includeCounty && (
+        <>
+          <View style={{marginBottom: 16}}>
+            <TextField
+              disabled={disabled}
+              id="countyName"
+              onChange={(result) => handleAddressChange("countyName", result)}
+              testID={`${testID}-county`}
+              title="County Name"
+              type="text"
+              value={countyName}
+            />
+          </View>
+          <View style={{marginBottom: 16}}>
+            <TextField
+              disabled={disabled}
+              id="countyCode"
+              onChange={(result) => handleAddressChange("countyCode", result)}
+              testID={`${testID}-county-code`}
+              title="County Code"
+              type="text"
+              value={countyCode}
+            />
+          </View>
+        </>
+      )}
+    </>
+  );
+};

package/src/Avatar.test.tsx

@@ -0,0 +1,163 @@
+import {beforeEach, describe, expect, it, mock, spyOn} from "bun:test";
+import {act, fireEvent} from "@testing-library/react-native";
+import * as ImageManipulator from "expo-image-manipulator";
+
+import {Avatar} from "./Avatar";
+import {renderWithTheme} from "./test-utils";
+
+// Mock functions for image manipulation chain
+const mockSaveAsync = mock(() =>
+  Promise.resolve({
+    base64: "test-base64",
+    uri: "test-uri",
+  })
+);
+const mockRenderAsync = mock(() =>
+  Promise.resolve({
+    saveAsync: mockSaveAsync,
+  })
+);
+const mockResize = mock(() => ({
+  renderAsync: mockRenderAsync,
+}));
+
+// Mock expo-image-manipulator
+mock.module("expo-image-manipulator", () => ({
+  ImageManipulator: {
+    manipulate: mock(() => ({
+      resize: mockResize,
+    })),
+  },
+  SaveFormat: {
+    JPEG: "jpeg",
+    PNG: "png",
+  },
+}));
+
+// Mock expo-image-picker
+mock.module("expo-image-picker", () => ({
+  launchImageLibraryAsync: mock(() =>
+    Promise.resolve({
+      assets: [
+        {
+          height: 100,
+          uri: "test-uri",
+          width: 100,
+        },
+      ],
+      canceled: false,
+    })
+  ),
+}));
+
+// Mock expo-linear-gradient
+mock.module("expo-linear-gradient", () => ({
+  LinearGradient: "LinearGradient",
+}));
+
+describe("Avatar", () => {
+  const defaultProps = {
+    name: "John Doe",
+    src: "https://example.com/avatar.jpg",
+    testID: "avatar",
+  };
+
+  beforeEach(() => {
+    // Reset mocks
+    mockSaveAsync.mockClear();
+    mockRenderAsync.mockClear();
+    mockResize.mockClear();
+  });
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<Avatar {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders initials when no image is provided", () => {
+    const {getByText} = renderWithTheme(<Avatar name="John Doe" testID="avatar" />);
+    expect(getByText("JD")).toBeTruthy();
+  });
+
+  it("renders image when src is provided", () => {
+    const {getByTestId} = renderWithTheme(<Avatar {...defaultProps} />);
+    const image = getByTestId("avatar-image");
+    expect(image).toBeTruthy();
+  });
+
+  it("shows initials when image fails to load", () => {
+    const {getByText, getByTestId} = renderWithTheme(<Avatar {...defaultProps} name="John Doe" />);
+
+    // Simulate image load error
+    fireEvent(getByTestId("avatar-image"), "onError");
+
+    expect(getByText("JD")).toBeTruthy();
+  });
+
+  it("applies correct size class", () => {
+    const size = "lg";
+    const {getByTestId} = renderWithTheme(<Avatar {...defaultProps} size={size} />);
+    const avatar = getByTestId("avatar-image");
+    // Check if the style contains the expected size
+    expect(avatar.props.style).toMatchObject({
+      height: 72, // lg size from the sizes object
+    });
+  });
+
+  it("shows status indicator when status is provided", () => {
+    const {getByTestId} = renderWithTheme(<Avatar {...defaultProps} status="online" />);
+    expect(getByTestId("status-indicator")).toBeTruthy();
+  });
+
+  it("shows edit icon when status is imagePicker and size is xl", () => {
+    const {getByText} = renderWithTheme(
+      <Avatar {...defaultProps} size="xl" status="imagePicker" />
+    );
+    expect(getByText("Upload Image")).toBeTruthy();
+  });
+
+  it("calls onChange when edit icon is pressed", async () => {
+    const mockOnChange = mock(() => {});
+    const {getByText} = renderWithTheme(
+      <Avatar {...defaultProps} onChange={mockOnChange} size="xl" status="imagePicker" />
+    );
+
+    await act(async () => {
+      fireEvent.press(getByText("Upload Image"));
+    });
+
+    // The onChange should be called with the processed image
+    expect(mockOnChange).toHaveBeenCalledWith({
+      avatarImageFormat: "png",
+      base64: "test-base64",
+      uri: "data:image/png;base64,test-base64",
+    });
+    expect(ImageManipulator.ImageManipulator.manipulate).toHaveBeenCalled();
+    expect(mockResize).toHaveBeenCalled();
+    expect(mockRenderAsync).toHaveBeenCalled();
+    expect(mockSaveAsync).toHaveBeenCalledWith({
+      base64: true,
+      format: "png",
+    });
+  });
+
+  it("applies border when hasBorder is true", () => {
+    const {getByTestId} = renderWithTheme(<Avatar {...defaultProps} hasBorder />);
+    const avatar = getByTestId("avatar-image");
+    // Check if the style contains border properties
+    expect(avatar.props.style).toMatchObject({
+      borderColor: expect.any(String),
+      borderWidth: expect.any(Number),
+    });
+  });
+
+  it("shows warning when imagePicker status is used with non-xl size", () => {
+    const consoleWarnSpy = spyOn(console, "warn").mockImplementation(() => {});
+    renderWithTheme(<Avatar {...defaultProps} size="lg" status="imagePicker" />);
+
+    expect(consoleWarnSpy).toHaveBeenCalledWith(
+      "Avatars with the status of 'imagePicker' should also have an onChange property."
+    );
+    consoleWarnSpy.mockRestore();
+  });
+});

package/src/Avatar.tsx

@@ -0,0 +1,298 @@
+import {ImageManipulator, type ImageResult, SaveFormat} from "expo-image-manipulator";
+import {launchImageLibraryAsync} from "expo-image-picker";
+import {LinearGradient} from "expo-linear-gradient";
+import type React from "react";
+import {type FC, useState} from "react";
+import {Image, Pressable, Text, View} from "react-native";
+
+import type {AvatarProps, CustomSvgProps} from "./Common";
+import {Icon} from "./Icon";
+import {MobileIcon, OfflineIcon, OnlineIcon, OutOfOfficeIcon} from "./icons";
+import {isMobileDevice} from "./MediaQuery";
+import {useTheme} from "./Theme";
+import {Tooltip} from "./Tooltip";
+
+const sizes = {
+  lg: 72,
+  md: 56,
+  sm: 38,
+  xl: 120,
+  xs: 28,
+};
+
+const initialsFontSizes = {
+  lg: 32,
+  md: 24,
+  sm: 16,
+  xl: 60,
+  xs: 12,
+};
+
+const iconSizeScale = {
+  lg: 1.1,
+  md: 0.9,
+  sm: 0.7,
+  xl: 1.5,
+  xs: 0.5,
+};
+
+const sizeIconPadding = {
+  lg: 7,
+  md: 9,
+  sm: 10,
+  xl: 0,
+  xs: 12,
+};
+
+export const Avatar: FC<AvatarProps> = ({
+  name,
+  hasBorder = false,
+  size = "md",
+  src,
+  onChange,
+  status,
+  doNotDisturb = false,
+}) => {
+  const {theme} = useTheme();
+  const [isImageLoaded, setIsImageLoaded] = useState(true);
+  const avatarImageFormat = SaveFormat.PNG;
+  const avatarImageDiameter = sizes[size];
+  const showEditIcon = status === "imagePicker";
+
+  const avatarRadius = avatarImageDiameter / 2;
+  const computedInitials =
+    (name.match(/(^\S\S?|\s\S)?/g) ?? []) // Use nullish coalescing to handle the case where match returns null
+      .map((v) => v.trim())
+      .join("")
+      .match(/(^\S|\S$)?/g) ??
+    [] // Use nullish coalescing to handle the case where match returns null
+      .join("")
+      .toLocaleUpperCase();
+  const statusIcons: {
+    [id: string]: {
+      icon: (props: CustomSvgProps) => React.ReactElement;
+      label: string;
+    };
+  } = {
+    activeMobile: {
+      icon: MobileIcon,
+
+      label: "Active on Mobile",
+    },
+    offline: {icon: OfflineIcon, label: "Offline"},
+    online: {icon: OnlineIcon, label: "Online"},
+    outOfOffice: {icon: OutOfOfficeIcon, label: "Out of Office"},
+  };
+
+  if (showEditIcon && !onChange) {
+    console.warn("Avatars with the status of 'imagePicker' should also have an onChange property.");
+  }
+
+  const handleImageError = (event: any) => {
+    setIsImageLoaded(false);
+    console.warn("Image load error: ", event);
+  };
+
+  const pickImage = async () => {
+    // TODO: Add permission request to use camera to take a picture
+    const result = await launchImageLibraryAsync({
+      allowsEditing: true,
+      base64: true,
+      mediaTypes: "images",
+    });
+
+    if (!result.canceled && result.assets) {
+      const resizedImage = await resizeAndFormatImage(result.assets[0].uri);
+      // convert base64 to data uri
+      resizedImage.uri = `data:image/${avatarImageFormat.toLowerCase()};base64,${resizedImage.base64}`;
+      if (onChange) {
+        onChange({avatarImageFormat, ...resizedImage});
+      }
+    }
+  };
+
+  const resizeAndFormatImage = async (imageUri: string): Promise<ImageResult> => {
+    const imageContext = await ImageManipulator.manipulate(imageUri);
+    const resizedImage = await imageContext.resize({
+      height: avatarImageDiameter,
+    });
+    const renderedImage = await resizedImage.renderAsync();
+    return await renderedImage.saveAsync({base64: true, format: avatarImageFormat});
+  };
+
+  const renderEditIcon = () => {
+    if (size !== "xl") {
+      console.error(`Avatar: "imagePicker" status is only supported for size "xl"`);
+      return null;
+    }
+
+    return (
+      <Pressable
+        aria-role="button"
+        onPress={pickImage}
+        style={{
+          alignItems: "center",
+          backgroundColor: "rgba(255,255,255,0.75)",
+          borderRadius: avatarRadius,
+          height: avatarImageDiameter,
+          justifyContent: "center",
+          position: "absolute",
+          width: avatarImageDiameter,
+          zIndex: 5,
+        }}
+      >
+        <Icon color="primary" iconName="pen-to-square" size="2xl" type="regular" />
+        <Text
+          style={{
+            fontSize: 12,
+            fontWeight: "bold",
+            marginTop: 10,
+            textAlign: "center",
+          }}
+        >
+          Upload Image
+        </Text>
+      </Pressable>
+    );
+  };
+
+  const renderStatusIcon = () => {
+    if (!status || showEditIcon) {
+      return null;
+    }
+    const {icon} = statusIcons[status];
+
+    if (!icon) {
+      console.warn(`Avatar: Invalid status ${status}`);
+      return null;
+    }
+
+    return (
+      <View
+        style={{
+          bottom: 0,
+          position: "absolute",
+          right: 0,
+          zIndex: 5,
+        }}
+        testID="status-indicator"
+      >
+        {icon({
+          doNotDisturb,
+          transform: [{scale: iconSizeScale[size]}],
+        })}
+      </View>
+    );
+  };
+
+  let avatar = (
+    <View
+      accessibilityHint={showEditIcon ? "Opens file explorer" : "Avatar image"}
+      aria-label={`${name}'s avatar`}
+      aria-role="image"
+      style={{height: avatarImageDiameter, position: "relative", width: avatarImageDiameter}}
+    >
+      <Pressable
+        aria-role="button"
+        style={{
+          borderRadius: 1,
+          cursor: showEditIcon ? "pointer" : "auto",
+          overflow: "hidden",
+          position: "relative",
+        }}
+      >
+        {src && isImageLoaded ? (
+          // TODO: Make our Image component rounding work so that we can use it for Avatar.
+          // Currently it creates an unrounded box around the Image.
+          <Image
+            accessibilityIgnoresInvertColors
+            onError={handleImageError}
+            source={{cache: "force-cache", uri: src}}
+            style={{
+              borderColor: hasBorder ? "white" : "transparent",
+              borderRadius: avatarRadius,
+              borderWidth: hasBorder && status !== "imagePicker" ? avatarImageDiameter * 0.04 : 0,
+              height: avatarImageDiameter,
+              overflow: "hidden",
+            }}
+            testID="avatar-image"
+          />
+        ) : (
+          <View
+            style={{
+              alignItems: "center",
+              backgroundColor: theme.surface.secondaryDark,
+              borderColor: hasBorder && status !== "imagePicker" ? "white" : "transparent",
+              borderRadius: avatarRadius,
+              borderWidth: hasBorder && status !== "imagePicker" ? avatarImageDiameter * 0.04 : 0,
+              display: "flex",
+              height: avatarImageDiameter,
+              justifyContent: "center",
+              width: avatarImageDiameter,
+            }}
+          >
+            <Text
+              style={{
+                color: theme.text.inverted,
+                fontSize: initialsFontSizes[size],
+                fontWeight: 500,
+              }}
+            >
+              {computedInitials}
+            </Text>
+          </View>
+        )}
+      </Pressable>
+      {/* Needs to come after the image so it renders on top. */}
+      {showEditIcon && renderEditIcon()}
+    </View>
+  );
+
+  if (hasBorder && status !== "imagePicker") {
+    const gradientDiameter = avatarImageDiameter * 1.1;
+    const gradientStartColor = "#FFC947";
+    const gradientEndColor = "#EA9095";
+    // Start the first color in the top left corner and end the second color in the bottom
+    // right corner.
+
+    avatar = (
+      <LinearGradient
+        colors={[gradientStartColor, gradientEndColor]}
+        end={{x: 1, y: 1}}
+        start={{x: 0, y: 0}}
+        style={{
+          alignItems: "center",
+          borderRadius: gradientDiameter / 2,
+          height: gradientDiameter,
+          justifyContent: "center",
+          width: gradientDiameter,
+        }}
+      >
+        {avatar}
+      </LinearGradient>
+    );
+  }
+
+  if (status) {
+    // Need to wrap the tooltip so it doesn't expand to 100% width and render the tooltip off.
+    // Don't show the tooltips on mobile because they intercept the edit avatar clicks.
+    const widthPlusPadding = avatarImageDiameter + sizeIconPadding[size];
+
+    avatar = (
+      <View
+        style={{
+          paddingBottom: sizeIconPadding[size],
+          paddingRight: sizeIconPadding[size],
+          width: widthPlusPadding,
+        }}
+      >
+        <Tooltip idealPosition="top" text={isMobileDevice() ? undefined : status}>
+          {avatar}
+        </Tooltip>
+        {renderStatusIcon()}
+      </View>
+    );
+  }
+
+  return avatar;
+};