@terreno/ui 0.0.1

package/src/Badge.test.tsx

@@ -0,0 +1,116 @@
+import {describe, expect, it} from "bun:test";
+
+import {Badge} from "./Badge";
+import {renderWithTheme} from "./test-utils";
+
+describe("Badge", () => {
+  const defaultProps = {
+    value: "Test",
+  };
+
+  it("renders correctly with default props", () => {
+    const {toJSON} = renderWithTheme(<Badge {...defaultProps} />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders text value correctly", () => {
+    const {getByText} = renderWithTheme(<Badge {...defaultProps} />);
+    expect(getByText("Test")).toBeTruthy();
+  });
+
+  it("renders number value correctly", () => {
+    const {getByText} = renderWithTheme(<Badge value={42} />);
+    expect(getByText("42")).toBeTruthy();
+  });
+
+  it("truncates large numbers with maxValue", () => {
+    const {getByText} = renderWithTheme(<Badge maxValue={100} value={150} variant="numberOnly" />);
+    expect(getByText("100+")).toBeTruthy();
+  });
+
+  it("does not truncate numbers below maxValue", () => {
+    const {getByText} = renderWithTheme(<Badge maxValue={100} value={50} variant="numberOnly" />);
+    expect(getByText("50")).toBeTruthy();
+  });
+
+  it("applies correct status colors", () => {
+    const statuses = ["error", "warning", "info", "success", "neutral"] as const;
+
+    statuses.forEach((status) => {
+      let {getByTestId} = renderWithTheme(
+        <Badge {...defaultProps} status={status} testID="badge" />
+      );
+
+      // Test primary variant
+      const badge = getByTestId("badge");
+      expect(badge).toHaveStyle({backgroundColor: expect.any(String)});
+
+      // Test secondary variant
+      ({getByTestId} = renderWithTheme(
+        <Badge {...defaultProps} secondary status={status} testID="badge-secondary" />
+      ));
+      const secondaryBadge = getByTestId("badge-secondary");
+      expect(secondaryBadge).toHaveStyle({backgroundColor: expect.any(String)});
+    });
+  });
+
+  it("renders icon when iconName is provided", () => {
+    const {getByTestId} = renderWithTheme(
+      <Badge {...defaultProps} iconName="check" testID="badge-with-icon" />
+    );
+    expect(getByTestId("icon")).toBeTruthy();
+  });
+
+  it("renders icon only when variant is iconOnly", () => {
+    const {getByTestId, queryByText} = renderWithTheme(
+      <Badge {...defaultProps} iconName="check" testID="icon-only-badge" variant="iconOnly" />
+    );
+
+    expect(getByTestId("icon")).toBeTruthy();
+    expect(queryByText("Test")).toBeNull();
+  });
+
+  it("applies custom colors when status is custom", () => {
+    const customColors = {
+      customBackgroundColor: "#123456",
+      customBorderColor: "#654321",
+      customIconColor: "#ffcc00",
+      customTextColor: "#ffffff",
+    };
+
+    const {getByTestId} = renderWithTheme(
+      <Badge
+        {...defaultProps}
+        iconName="star"
+        secondary
+        status="custom"
+        testID="custom-badge"
+        {...(customColors as any)}
+      />
+    );
+
+    const badge = getByTestId("custom-badge");
+    expect(badge).toHaveStyle({
+      backgroundColor: customColors.customBackgroundColor,
+      borderColor: customColors.customBorderColor,
+    });
+  });
+
+  it("applies correct border radius based on variant", () => {
+    // Default variant
+    let {getByTestId} = renderWithTheme(<Badge {...defaultProps} testID="default-badge" />);
+    expect(getByTestId("default-badge")).toHaveStyle({borderRadius: expect.any(Number)});
+
+    // Icon only variant
+    ({getByTestId} = renderWithTheme(
+      <Badge {...defaultProps} iconName="check" testID="icon-only-badge" variant="iconOnly" />
+    ));
+    expect(getByTestId("icon-only-badge")).toHaveStyle({borderRadius: expect.any(Number)});
+
+    // Number only variant
+    ({getByTestId} = renderWithTheme(
+      <Badge {...defaultProps} testID="number-only-badge" variant="numberOnly" />
+    ));
+    expect(getByTestId("number-only-badge")).toHaveStyle({borderRadius: expect.any(Number)});
+  });
+});

package/src/Badge.tsx

@@ -0,0 +1,136 @@
+import type React from "react";
+import {Text, View} from "react-native";
+
+import type {BadgeProps, SurfaceTheme, TextTheme} from "./Common";
+import {Icon} from "./Icon";
+import {useTheme} from "./Theme";
+
+export const Badge = ({
+  value,
+  iconName,
+  status = "info",
+  secondary = false,
+  variant,
+  maxValue = 100,
+  customBackgroundColor,
+  customTextColor,
+  customBorderColor,
+  customIconColor,
+  customIconName,
+  testID,
+}: BadgeProps): React.ReactElement => {
+  const {theme} = useTheme();
+  const isIconOnly = variant === "iconOnly";
+
+  let badgeColor: keyof TextTheme = "inverted";
+
+  // TODO: Move to theme
+  const secondaryBorderColors = {
+    custom: "#AAAAAA",
+    error: "#F39E9E",
+    info: "#8FC1D2",
+    neutral: "#AAAAAA",
+    success: "#7FD898",
+    warning: "#FCC58F",
+  };
+
+  if (secondary) {
+    if (status === "error") {
+      badgeColor = "error";
+    } else if (status === "warning") {
+      badgeColor = "warning";
+    } else if (status === "info") {
+      badgeColor = "secondaryDark";
+    } else if (status === "success") {
+      badgeColor = "success";
+    } else if (status === "neutral") {
+      badgeColor = "primary";
+    }
+  }
+
+  let badgeBgColor: keyof SurfaceTheme = "neutralDark";
+
+  if (status === "error") {
+    badgeBgColor = secondary ? "errorLight" : "error";
+  } else if (status === "warning") {
+    badgeBgColor = secondary ? "warningLight" : "warning";
+  } else if (status === "info") {
+    badgeBgColor = secondary ? "secondaryLight" : "secondaryDark";
+  } else if (status === "success") {
+    badgeBgColor = secondary ? "successLight" : "success";
+  } else if (status === "neutral") {
+    badgeBgColor = secondary ? "neutralLight" : "neutralDark";
+  }
+
+  const backgroundColor = status === "custom" ? customBackgroundColor : theme.surface[badgeBgColor];
+  const borderColor = status === "custom" ? customBorderColor : secondaryBorderColors[status];
+  const textColor = status === "custom" ? customTextColor : theme.text[badgeColor];
+  const iconColor = status === "custom" ? customIconColor : badgeColor;
+
+  let badgeBorderRadius = theme.radius.default;
+  if (isIconOnly) {
+    badgeBorderRadius = theme.radius.full;
+  } else if (variant === "numberOnly") {
+    badgeBorderRadius = theme.radius.rounded;
+  }
+
+  let badgeValue = value;
+
+  if (variant === "numberOnly") {
+    if (!Number.isNaN(Number(value)) && maxValue) {
+      const numberValue = Number(value);
+      if (numberValue > maxValue) {
+        badgeValue = `${maxValue}+`;
+      } else {
+        badgeValue = numberValue;
+      }
+    } else {
+      console.warn("Warning: Badge value is not a number");
+    }
+  }
+
+  return (
+    <View
+      style={{
+        alignItems: "flex-start",
+      }}
+    >
+      <View
+        style={[
+          {
+            alignItems: "center",
+            backgroundColor,
+            borderRadius: badgeBorderRadius,
+            flexDirection: "row",
+            height: variant === "iconOnly" ? 16 : "auto",
+            justifyContent: "center",
+            paddingHorizontal: variant === "iconOnly" ? theme.spacing.xs : theme.spacing.sm,
+            paddingVertical: variant === "iconOnly" ? 1 : theme.spacing.xs,
+            width: variant === "iconOnly" ? 16 : "auto",
+          },
+          isIconOnly && {height: 16, width: 16},
+          secondary && {borderColor, borderWidth: 1},
+        ]}
+        testID={testID}
+      >
+        {Boolean(variant !== "numberOnly" && iconName) && (
+          <View style={{marginRight: variant === "iconOnly" ? 0 : theme.spacing.sm}} testID="icon">
+            <Icon color={iconColor} iconName={customIconName ?? iconName!} size="xs" />
+          </View>
+        )}
+        {Boolean(variant !== "iconOnly") && (
+          <Text
+            style={{
+              color: textColor,
+              fontFamily: "text",
+              fontSize: 10,
+              fontWeight: "700",
+            }}
+          >
+            {badgeValue}
+          </Text>
+        )}
+      </View>
+    </View>
+  );
+};

package/src/Banner.tsx

@@ -0,0 +1,200 @@
+import debounce from "lodash/debounce";
+import type React from "react";
+import {useEffect, useState} from "react";
+import {ActivityIndicator, Text as NativeText, Pressable, View} from "react-native";
+
+import {Box} from "./Box";
+import type {BannerProps, IconName, SurfaceTheme} from "./Common";
+import {DismissButton} from "./DismissButton";
+import {Icon} from "./Icon";
+import {useTheme} from "./Theme";
+import {Unifier} from "./Unifier";
+
+type BannerButtonProps = {
+  buttonIconName?: string;
+  buttonOnClick: () => void | Promise<void>;
+  buttonText: string;
+  loading?: boolean;
+};
+
+const BannerButton = ({
+  loading: propsLoading,
+  buttonText,
+  buttonIconName,
+  buttonOnClick,
+}: BannerButtonProps): React.ReactElement | null => {
+  const [loading, setLoading] = useState(propsLoading);
+  const {theme} = useTheme();
+
+  if (!theme) {
+    return null;
+  }
+
+  return (
+    <Pressable
+      accessibilityHint={`Press to perform action ${buttonText}`}
+      aria-label={buttonText}
+      aria-role="button"
+      onPress={debounce(
+        async () => {
+          await Unifier.utils.haptic();
+          setLoading(true);
+          try {
+            await buttonOnClick();
+          } catch (error) {
+            setLoading(false);
+            throw error;
+          }
+          setLoading(false);
+        },
+        500,
+        {leading: true}
+      )}
+      style={{
+        alignItems: "center",
+        alignSelf: "stretch",
+        backgroundColor: theme.surface.base,
+        borderRadius: theme.radius.rounded as any,
+        flexDirection: "column",
+        justifyContent: "center",
+        paddingHorizontal: 12,
+        paddingVertical: 4,
+      }}
+    >
+      <View style={{flexDirection: "row"}}>
+        <View style={{flexDirection: "row-reverse"}}>
+          {Boolean(buttonIconName) && (
+            <View
+              style={{
+                alignSelf: "center",
+                marginLeft: 8,
+                marginRight: 0,
+              }}
+            >
+              <Icon iconName={buttonIconName as IconName} type="solid" />
+            </View>
+          )}
+          <NativeText style={{fontSize: 12}}>{buttonText}</NativeText>
+        </View>
+        {Boolean(loading) && (
+          <Box marginLeft={2}>
+            <ActivityIndicator size="small" />
+          </Box>
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+function getKey(id: string): string {
+  return `@TerrenoUI:${id}`;
+}
+
+export const hideBanner = (id: string): Promise<void> => {
+  console.debug(`[banner] Hiding ${getKey(id)} `);
+  return Unifier.storage.setItem(getKey(id), "true");
+};
+
+export const Banner = (props: BannerProps): React.ReactElement | null => {
+  const {id, text, status = "info", dismissible = false, hasIcon = false, buttonOnClick} = props;
+
+  const {buttonText, buttonIconName} = props as BannerButtonProps;
+
+  const {theme} = useTheme();
+
+  let bgColor: keyof SurfaceTheme = "secondaryDark";
+
+  if (status === "alert") {
+    bgColor = "error";
+  } else if (status === "warning") {
+    bgColor = "warning";
+  }
+
+  const [show, setShow] = useState(true);
+
+  // Load seen from async storage.
+  useEffect(() => {
+    if (dismissible) {
+      void Unifier.storage.getItem(getKey(id)).then((isSeen) => {
+        console.debug(`[banner] ${getKey(id)} seen? ${isSeen}`);
+        setShow(!isSeen);
+      });
+    }
+  }, [id, dismissible]);
+
+  const dismiss = async (): Promise<void> => {
+    if (!dismissible) {
+      return;
+    }
+    await hideBanner(id);
+    setShow(false);
+  };
+
+  if (!show) {
+    return null;
+  }
+
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        backgroundColor: theme.surface[bgColor],
+        borderRadius: theme.radius.default,
+        flexDirection: "row",
+        height: "auto",
+        margin: "auto",
+        minHeight: theme.spacing.xl,
+        padding: theme.spacing.xs,
+        width: "100%",
+      }}
+    >
+      <View
+        style={{
+          alignItems: "center",
+          flex: 1,
+          flexDirection: "row",
+          justifyContent: "center",
+        }}
+      >
+        {Boolean(hasIcon) && (
+          <View style={{paddingLeft: 10, paddingRight: 12}}>
+            <Icon color="inverted" iconName="triangle-exclamation" />
+          </View>
+        )}
+        <NativeText
+          style={{
+            color: theme.text.inverted,
+            flexShrink: 1,
+            flexWrap: "wrap",
+            fontWeight: "bold",
+            textAlign: "center",
+          }}
+        >
+          {text}
+        </NativeText>
+        {Boolean(buttonText && buttonIconName && buttonOnClick) && (
+          <View style={{paddingLeft: 16, paddingRight: 10}}>
+            <BannerButton
+              buttonIconName={buttonIconName}
+              buttonOnClick={buttonOnClick ?? (() => {})}
+              buttonText={buttonText}
+            />
+          </View>
+        )}
+        {Boolean(buttonText && !buttonIconName && buttonOnClick) && (
+          <View style={{paddingLeft: 16, paddingRight: 10}}>
+            <BannerButton buttonOnClick={buttonOnClick ?? (() => {})} buttonText={buttonText} />
+          </View>
+        )}
+      </View>
+      {Boolean(dismissible) && (
+        <DismissButton
+          accessibilityHint="Press to dismiss banner"
+          accessibilityLabel="Dismiss"
+          color="inverted"
+          onClick={dismiss}
+        />
+      )}
+    </View>
+  );
+};

package/src/Body.tsx

@@ -0,0 +1,34 @@
+import type React from "react";
+import {ActivityIndicator, KeyboardAvoidingView} from "react-native";
+
+import {Box} from "./Box";
+import type {BodyProps} from "./Common";
+import {useTheme} from "./Theme";
+
+export const Body = ({
+  scroll,
+  loading,
+  padding,
+  height,
+  avoidKeyboard,
+  children,
+}: BodyProps): React.ReactElement => {
+  const {theme} = useTheme();
+
+  const renderBody = () => {
+    return (
+      <Box avoidKeyboard height="100%" scroll={scroll}>
+        <Box height={height || "100%"} padding={padding !== undefined ? padding : 5}>
+          {loading === true && <ActivityIndicator color={theme.text.primary} size="large" />}
+          {children}
+        </Box>
+      </Box>
+    );
+  };
+
+  if (avoidKeyboard === false) {
+    return renderBody();
+  } else {
+    return <KeyboardAvoidingView behavior="position">{renderBody()}</KeyboardAvoidingView>;
+  }
+};

package/src/BooleanField.tsx

@@ -0,0 +1,141 @@
+import {type FC, useCallback, useEffect, useRef} from "react";
+import {Animated, TouchableWithoutFeedback, View} from "react-native";
+
+import type {BooleanFieldProps} from "./Common";
+import {FieldHelperText, FieldTitle} from "./fieldElements";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+
+const TOUCHABLE_SIZE = 20;
+const OFFSET = 10;
+const WIDTH = 36;
+const WIDTH_WITH_OFFSET = OFFSET + WIDTH;
+
+export const BooleanField: FC<BooleanFieldProps> = ({
+  title,
+  variant,
+  value,
+  onChange,
+  disabled,
+  disabledHelperText,
+  helperText,
+}) => {
+  const {theme} = useTheme();
+  const backgroundColor = useRef(
+    new Animated.Value(value ? WIDTH_WITH_OFFSET : -1 * WIDTH_WITH_OFFSET)
+  ).current;
+  const circleColor = useRef(
+    new Animated.Value(value ? WIDTH_WITH_OFFSET : -1 * WIDTH_WITH_OFFSET)
+  ).current;
+  const circleBorderColor = useRef(
+    new Animated.Value(value ? WIDTH_WITH_OFFSET : -1 * WIDTH_WITH_OFFSET)
+  ).current;
+  const transformSwitch = useRef(new Animated.Value(value ? OFFSET : -1 * OFFSET)).current;
+
+  const animateSwitch = useCallback(
+    (newValue: boolean) => {
+      Animated.parallel([
+        Animated.spring(transformSwitch, {
+          toValue: newValue ? OFFSET : -1 * OFFSET,
+          useNativeDriver: false,
+        }),
+        Animated.timing(backgroundColor, {
+          duration: 200,
+          toValue: newValue ? WIDTH_WITH_OFFSET : -1 * WIDTH_WITH_OFFSET,
+          useNativeDriver: false,
+        }),
+        Animated.timing(circleColor, {
+          duration: 200,
+          toValue: newValue ? WIDTH_WITH_OFFSET : -1 * WIDTH_WITH_OFFSET,
+          useNativeDriver: false,
+        }),
+        Animated.timing(circleBorderColor, {
+          duration: 200,
+          toValue: value ? WIDTH_WITH_OFFSET : -1 * WIDTH_WITH_OFFSET,
+          useNativeDriver: false,
+        }),
+      ]).start();
+    },
+    [backgroundColor, circleColor, circleBorderColor, transformSwitch, value]
+  );
+
+  const handleSwitch = () => {
+    if (disabled) {
+      return;
+    }
+    animateSwitch(!value);
+    onChange(!value);
+  };
+
+  // Update animation when value changes without pressing
+  useEffect(() => {
+    animateSwitch(value);
+  }, [value, animateSwitch]);
+
+  const interpolatedColorAnimation = backgroundColor.interpolate({
+    inputRange: [-1 * WIDTH_WITH_OFFSET, WIDTH_WITH_OFFSET],
+    outputRange: [theme.surface.base, theme.surface.secondaryDark],
+  });
+
+  return (
+    <View
+      style={{
+        alignItems: "flex-start",
+        flexDirection: "column",
+      }}
+    >
+      <View
+        style={{
+          alignItems: variant === "title" ? "flex-start" : "center",
+          flexDirection: variant === "title" ? "column" : "row",
+          justifyContent: variant === "title" ? "flex-start" : "center",
+        }}
+      >
+        {Boolean(title) && <FieldTitle text={title!} />}
+        <TouchableWithoutFeedback aria-role="button" onPress={handleSwitch}>
+          <View style={{alignItems: "center", flexDirection: "row", justifyContent: "center"}}>
+            <Animated.View
+              style={{
+                backgroundColor: disabled ? theme.surface.disabled : interpolatedColorAnimation,
+                borderColor: disabled ? theme.surface.disabled : theme.surface.secondaryDark,
+                borderRadius: TOUCHABLE_SIZE,
+                borderWidth: 1,
+                height: TOUCHABLE_SIZE,
+                marginHorizontal: variant === "title" ? undefined : OFFSET,
+                marginRight: variant === "title" ? OFFSET : undefined,
+                width: WIDTH,
+              }}
+            >
+              <Animated.View
+                style={{
+                  alignItems: "center",
+                  flex: 1,
+                  flexDirection: "row",
+                  justifyContent: "center",
+                  left: transformSwitch,
+                  width: WIDTH,
+                }}
+              >
+                <Animated.View
+                  style={{
+                    alignItems: "center",
+                    backgroundColor: theme.surface.base,
+                    borderColor: disabled ? theme.surface.disabled : theme.surface.secondaryDark,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    height: TOUCHABLE_SIZE,
+                    justifyContent: "center",
+                    width: TOUCHABLE_SIZE,
+                  }}
+                />
+              </Animated.View>
+            </Animated.View>
+            {variant === "title" && <Text size="md">{value ? "Yes" : "No"}</Text>}
+          </View>
+        </TouchableWithoutFeedback>
+      </View>
+      {disabled && disabledHelperText && <FieldHelperText text={disabledHelperText} />}
+      {Boolean(helperText) && <FieldHelperText text={helperText as string} />}
+    </View>
+  );
+};