@terreno/ui 0.0.1

package/src/RadioField.tsx

@@ -0,0 +1,43 @@
+import type React from "react";
+import {TouchableOpacity, View} from "react-native";
+
+import type {RadioFieldProps} from "./Common";
+import {Heading} from "./Heading";
+import {isMobileDevice} from "./MediaQuery";
+import {Radio} from "./Radio";
+import {Text} from "./Text";
+
+export const RadioField = ({
+  title,
+  options,
+  value,
+  onChange,
+  variant = "rightText",
+}: RadioFieldProps): React.ReactElement => {
+  return (
+    <View style={{gap: isMobileDevice() ? 16 : 8}}>
+      <Heading size="sm">{title}</Heading>
+      {options.map((option) => (
+        <TouchableOpacity
+          accessibilityHint={`Select ${option} from list of options`}
+          aria-label={option.label ?? option.value}
+          aria-role="button"
+          key={option.key ?? option.value}
+          onPress={() => onChange(option.value)}
+          style={{
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+        >
+          {variant === "leftText" && <Text>{option.label ?? option.value}</Text>}
+          <Radio key={option.key ?? option.value} selected={option.value === value} />
+          {variant === "rightText" && (
+            <View style={{marginRight: 0}}>
+              <Text>{option.label ?? option.value}</Text>
+            </View>
+          )}
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+};

package/src/ScrollView.tsx

@@ -0,0 +1,2 @@
+import {ScrollView} from "react-native";
+export {ScrollView};

package/src/SectionDivider.tsx

@@ -0,0 +1,18 @@
+import type React from "react";
+import {View} from "react-native";
+import {useTheme} from "./Theme";
+
+export const SectionDivider: React.FC<{}> = () => {
+  const {theme} = useTheme();
+  return (
+    <View
+      accessibilityRole="none"
+      aria-hidden={true}
+      style={{
+        backgroundColor: theme.primitives.neutral500,
+        height: 1,
+        width: "100%",
+      }}
+    />
+  );
+};

package/src/SegmentedControl.tsx

@@ -0,0 +1,126 @@
+import {type FC, useCallback, useState} from "react";
+import {Pressable, View} from "react-native";
+
+import {Badge} from "./Badge";
+import type {SegmentedControlProps} from "./Common";
+import {Heading} from "./Heading";
+import {Icon} from "./Icon";
+import {useTheme} from "./Theme";
+
+export const SegmentedControl: FC<SegmentedControlProps> = ({
+  items,
+  onChange = () => {},
+  size = "md",
+  selectedIndex,
+  maxItems,
+  badges = [],
+}) => {
+  const height = size === "md" ? 36 : 44;
+  const {theme} = useTheme();
+  const [startIndex, setStartIndex] = useState(0);
+
+  const handlePrevious = useCallback(() => {
+    setStartIndex((prev) => Math.max(0, prev - (maxItems ?? 4)));
+  }, [maxItems]);
+
+  const handleNext = useCallback(() => {
+    setStartIndex((prev) =>
+      Math.min(items.length - (maxItems ?? items.length), prev + (maxItems ?? 4))
+    );
+  }, [items.length, maxItems]);
+
+  const visibleItems = maxItems ? items.slice(startIndex, startIndex + maxItems) : items;
+  const visibleBadges = maxItems ? badges.slice(startIndex, startIndex + maxItems) : badges;
+  const canScrollLeft = startIndex > 0;
+  const canScrollRight = maxItems ? startIndex + maxItems < items.length : false;
+  const shouldShowScrollButtons = maxItems ? maxItems < items.length : false;
+
+  return (
+    <View
+      style={{
+        alignItems: "center",
+        display: "flex",
+        flexDirection: "row",
+        gap: 8,
+      }}
+    >
+      {Boolean(shouldShowScrollButtons) && (
+        <Pressable disabled={!canScrollLeft} onPress={handlePrevious}>
+          <Icon
+            color={canScrollLeft ? "linkLight" : "extraLight"}
+            iconName="chevron-left"
+            size="lg"
+          />
+        </Pressable>
+      )}
+      <View
+        style={{
+          alignItems: "center",
+          backgroundColor: theme.primitives.neutral300,
+          borderRadius: theme.primitives.radius3xl,
+          display: "flex",
+          flexDirection: "row",
+          flexGrow: 1,
+          flexShrink: 1,
+          height,
+          maxHeight: height,
+          overflow: "hidden",
+        }}
+      >
+        <View
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            flexGrow: 1,
+            gap: 4,
+            height: height - 4,
+            paddingHorizontal: 4,
+          }}
+        >
+          {visibleItems.map((item, index) => {
+            const actualIndex = startIndex + index;
+            return (
+              <Pressable
+                aria-role="button"
+                key={actualIndex}
+                onPress={() => onChange(actualIndex)}
+                style={{
+                  alignItems: "center",
+                  backgroundColor: actualIndex === selectedIndex ? theme.surface.base : undefined,
+                  borderRadius: theme.primitives.radius3xl,
+                  display: "flex",
+                  flexBasis: 0,
+                  flexDirection: "row",
+                  flexGrow: 1,
+                  gap: 8,
+                  height: "100%",
+                  justifyContent: "center",
+                  overflow: "hidden",
+                  paddingHorizontal: 2,
+                }}
+              >
+                <Heading size="sm">{item}</Heading>
+                {visibleBadges[index] && (
+                  <Badge
+                    status={visibleBadges[index].status ?? "info"}
+                    value={visibleBadges[index].count}
+                    variant="numberOnly"
+                  />
+                )}
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+      {Boolean(shouldShowScrollButtons) && (
+        <Pressable disabled={!canScrollRight} onPress={handleNext}>
+          <Icon
+            color={canScrollRight ? "linkLight" : "extraLight"}
+            iconName="chevron-right"
+            size="lg"
+          />
+        </Pressable>
+      )}
+    </View>
+  );
+};

package/src/SelectBadge.tsx

@@ -0,0 +1,280 @@
+import {Picker} from "@react-native-picker/picker";
+import type React from "react";
+import {useCallback, useMemo, useState} from "react";
+import {Modal, Platform, Text, TouchableOpacity, View} from "react-native";
+
+import type {FieldOption, SelectBadgeProps, SurfaceTheme, TextTheme} from "./Common";
+import {Icon} from "./Icon";
+import {useTheme} from "./Theme";
+
+export const SelectBadge = ({
+  value,
+  status = "info",
+  secondary = false,
+  customBackgroundColor,
+  customTextColor,
+  customBorderColor,
+  disabled = false,
+  options,
+  onChange,
+}: SelectBadgeProps): React.ReactElement => {
+  const {theme} = useTheme();
+  const [showPicker, setShowPicker] = useState(false);
+  // Temporary state to manage value changes for ios picker
+  // Assures the badge display value persists when user scrolls through options
+  const [iosDisplayValue, setIosDisplayValue] = useState<string | undefined>(value);
+
+  const secondaryBorderColors = {
+    custom: "#AAAAAA",
+    error: "#F39E9E",
+    info: "#8FC1D2",
+    neutral: "#AAAAAA",
+    success: "#7FD898",
+    warning: "#FCC58F",
+  };
+
+  let borderWidth = 0;
+  if (secondary || status === "custom") borderWidth = 1;
+
+  let badgeColor: keyof TextTheme = "inverted";
+
+  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];
+
+  let leftOfChevronBorderColor = textColor;
+  if (status === "custom") leftOfChevronBorderColor = customBorderColor ?? textColor;
+  else if (secondary) leftOfChevronBorderColor = borderColor;
+
+  const findSelectedItem = useCallback(
+    (v: string | undefined | null): FieldOption | null => {
+      if (v !== undefined && v !== null) {
+        return options.find((opt) => opt.value === v) || null;
+      }
+      return null;
+    },
+    [options]
+  );
+
+  const displayVal = useMemo(() => {
+    return findSelectedItem(value)?.label ?? "---";
+  }, [value, findSelectedItem]);
+
+  const handleOnChange = useCallback(
+    (val: string) => {
+      const selectedItem = findSelectedItem(val);
+      if (selectedItem) {
+        onChange(selectedItem.value);
+      }
+      setShowPicker(false);
+    },
+    [findSelectedItem, onChange]
+  );
+
+  const renderPickerItems = useCallback(() => {
+    return options?.map((item: any) => (
+      <Picker.Item key={item.key || item.label} label={item.label} value={item.value} />
+    ));
+  }, [options]);
+
+  const renderIosPicker = useCallback(() => {
+    const handleValueChangeIos = (itemValue: string) => {
+      setIosDisplayValue(itemValue);
+    };
+
+    const handleSave = () => {
+      if (iosDisplayValue && !disabled) {
+        handleOnChange(iosDisplayValue);
+      } else {
+        setShowPicker(false);
+      }
+    };
+
+    const handleDismiss = () => {
+      setShowPicker(false);
+      setIosDisplayValue(value);
+    };
+
+    return (
+      <Modal
+        animationType="slide"
+        onRequestClose={handleDismiss}
+        supportedOrientations={["portrait", "landscape"]}
+        transparent
+        visible={showPicker}
+      >
+        <View style={{flex: 1, justifyContent: "flex-end"}}>
+          <TouchableOpacity
+            accessibilityHint="Closes the picker modal"
+            accessibilityLabel="Dismiss picker modal"
+            activeOpacity={1}
+            onPress={handleDismiss}
+            style={{flex: 1}}
+          />
+          <View
+            style={{
+              backgroundColor: theme.surface.neutralLight,
+              borderTopColor: theme.border.default,
+              borderTopWidth: 1,
+              height: 215,
+            }}
+          >
+            <View
+              style={{
+                alignItems: "center",
+                backgroundColor: "#f8f8f8",
+                height: 45,
+                justifyContent: "center",
+                width: "100%",
+              }}
+            >
+              <TouchableOpacity
+                accessibilityHint="Saves the selected value"
+                accessibilityLabel="Save selected value"
+                aria-role="button"
+                hitSlop={{bottom: 4, left: 4, right: 4, top: 4}}
+                onPress={handleSave}
+                style={{
+                  alignSelf: "flex-end",
+                  paddingRight: 12,
+                }}
+              >
+                <View>
+                  <Text
+                    style={{
+                      color: "#007aff",
+                      fontSize: 17,
+                      fontWeight: "600",
+                      paddingTop: 1,
+                    }}
+                  >
+                    Save
+                  </Text>
+                </View>
+              </TouchableOpacity>
+            </View>
+            <Picker
+              enabled={!disabled}
+              onValueChange={handleValueChangeIos}
+              selectedValue={iosDisplayValue}
+            >
+              {renderPickerItems()}
+            </Picker>
+          </View>
+        </View>
+      </Modal>
+    );
+  }, [showPicker, iosDisplayValue, disabled, theme, value, handleOnChange, renderPickerItems]);
+
+  const renderPicker = useCallback(() => {
+    return (
+      <Picker
+        enabled={!disabled}
+        onValueChange={handleOnChange}
+        selectedValue={findSelectedItem(value)?.value ?? undefined}
+        style={[
+          {
+            color: "transparent",
+            height: "100%",
+            opacity: 0,
+            position: "absolute",
+            width: "100%",
+          },
+          // Android headless picker: transparent overlay to capture touches without visible UI.
+          Platform.OS !== "web" && {backgroundColor: "transparent"},
+        ]}
+      >
+        {renderPickerItems()}
+      </Picker>
+    );
+  }, [disabled, findSelectedItem, value, handleOnChange, renderPickerItems]);
+
+  return (
+    <View style={{alignItems: "flex-start", opacity: disabled ? 0.5 : 1}}>
+      <TouchableOpacity
+        accessibilityHint="Opens the options picker"
+        accessibilityLabel="Open select badge options"
+        aria-role="button"
+        disabled={disabled}
+        onPress={() => setShowPicker(!showPicker)}
+      >
+        <View
+          style={{
+            alignItems: "center",
+            display: "flex",
+            flexDirection: "row",
+            height: 20,
+            width: "auto",
+          }}
+        >
+          <View
+            style={{
+              alignItems: "center",
+              backgroundColor,
+              borderBottomLeftRadius: 4,
+              borderColor,
+              borderTopLeftRadius: 4,
+              borderWidth,
+              flexDirection: "row",
+              height: 20,
+              justifyContent: "center",
+              paddingHorizontal: theme.spacing.sm,
+              width: "auto",
+            }}
+          >
+            <Text
+              style={{
+                color: textColor,
+                fontFamily: "text",
+                fontSize: 10,
+                fontWeight: "700",
+              }}
+            >
+              {displayVal}
+            </Text>
+          </View>
+          <View
+            style={{
+              alignItems: "center",
+              backgroundColor,
+              borderBottomRightRadius: 4,
+              borderColor: leftOfChevronBorderColor,
+              borderLeftWidth: 1,
+              borderTopRightRadius: 4,
+              borderWidth,
+              flexDirection: "row",
+              height: 20,
+              justifyContent: "center",
+              paddingHorizontal: theme.spacing.xs,
+              paddingVertical: 1,
+              width: "auto",
+            }}
+          >
+            <Icon
+              color={textColor as any}
+              iconName={showPicker ? "chevron-up" : "chevron-down"}
+              size="sm"
+            />
+          </View>
+        </View>
+      </TouchableOpacity>
+      {Platform.OS === "ios" ? renderIosPicker() : renderPicker()}
+    </View>
+  );
+};

package/src/SelectField.tsx

@@ -0,0 +1,41 @@
+import type {FC} from "react";
+import {View} from "react-native";
+
+import type {SelectFieldProps} from "./Common";
+import {FieldError, FieldHelperText, FieldTitle} from "./fieldElements";
+import {RNPickerSelect} from "./PickerSelect";
+
+export const SelectField: FC<SelectFieldProps> = ({
+  disabled = false,
+  errorText,
+  helperText,
+  options,
+  requireValue = false,
+  placeholder = "Please select an option.",
+  title,
+  value,
+  onChange,
+}) => {
+  const clearOption = {label: placeholder ?? "---", value: ""};
+
+  return (
+    <View>
+      {title && <FieldTitle text={title} />}
+      {Boolean(errorText) && <FieldError text={errorText!} />}
+      <RNPickerSelect
+        disabled={disabled}
+        items={options}
+        onValueChange={(v) => {
+          if (v === undefined || v === "") {
+            onChange("");
+          } else {
+            onChange(v);
+          }
+        }}
+        placeholder={!requireValue ? clearOption : {}}
+        value={value ?? ""}
+      />
+      {helperText && <FieldHelperText text={helperText} />}
+    </View>
+  );
+};

package/src/SideDrawer.tsx

@@ -0,0 +1,56 @@
+import {type ReactElement, useCallback} from "react";
+import {Platform, SafeAreaView, type StyleProp, type ViewStyle} from "react-native";
+import {Drawer} from "react-native-drawer-layout";
+
+import type {SideDrawerProps} from "./Common";
+import {useTheme} from "./Theme";
+
+const DEFAULT_STYLES: StyleProp<ViewStyle> = {
+  borderColor: "gray",
+  borderWidth: 1,
+  height: "100%",
+  width: Platform.OS === "web" ? "40%" : "95%",
+};
+
+const addWebScroll = (isOpen: boolean): ViewStyle => {
+  if (Platform.OS === "web") {
+    return {display: isOpen ? "flex" : "none", overflow: "scroll"};
+  } else {
+    return {};
+  }
+};
+
+export const SideDrawer = ({
+  position = "left",
+  isOpen,
+  renderContent,
+  onClose = () => {},
+  onOpen = () => {},
+  drawerType = "front",
+  children,
+  drawerStyles = {},
+}: SideDrawerProps): ReactElement => {
+  const {theme} = useTheme();
+  const renderDrawerContent = useCallback((): ReactElement => {
+    return <SafeAreaView>{renderContent()}</SafeAreaView>;
+  }, [renderContent]);
+
+  return (
+    <Drawer
+      drawerPosition={position}
+      drawerStyle={[
+        DEFAULT_STYLES,
+        {backgroundColor: theme.surface.neutralLight},
+        drawerStyles,
+        addWebScroll(isOpen),
+      ]}
+      drawerType={drawerType}
+      onClose={onClose}
+      onOpen={onOpen}
+      open={isOpen}
+      renderDrawerContent={renderDrawerContent}
+    >
+      {children}
+    </Drawer>
+  );
+};

package/src/Signature.native.tsx

@@ -0,0 +1,57 @@
+import {type FC, useRef} from "react";
+import {Text, View} from "react-native";
+import SignatureScreen, {type SignatureViewRef} from "react-native-signature-canvas";
+
+import {useTheme} from "./Theme";
+
+interface Props {
+  onChange: (signature: string) => void;
+  onStart?: () => void;
+  onEnd?: () => void;
+}
+
+const style = `.m-signature-pad--footer {display: none; margin: 0px;}`;
+
+export const Signature: FC<Props> = ({onChange, onStart, onEnd}: Props) => {
+  const ref = useRef<SignatureViewRef>(null);
+  const {theme} = useTheme();
+
+  const handleClear = () => {
+    ref.current?.clearSignature();
+  };
+
+  const onBegin = () => {
+    onStart?.();
+  };
+
+  // Called after end of stroke. Kind of goofy if you ask me,
+  // but you need this in order to trigger the 'onOK' callback that gives us the actual image.
+  const handleEnd = () => {
+    ref.current?.readSignature();
+    onEnd?.();
+  };
+
+  return (
+    <View style={{minWidth: 220}}>
+      <View style={{borderColor: theme.border.dark, borderWidth: 1, minHeight: 90}}>
+        <SignatureScreen
+          backgroundColor={theme.surface.base}
+          onBegin={onBegin}
+          onEnd={handleEnd}
+          onOK={(img) => onChange(img)}
+          ref={ref}
+          trimWhitespace
+          webStyle={style}
+        />
+      </View>
+      <View style={{flexDirection: "row"}}>
+        <Text
+          onPress={handleClear}
+          style={{color: theme.text.link, textDecorationLine: "underline"}}
+        >
+          Clear
+        </Text>
+      </View>
+    </View>
+  );
+};

package/src/Signature.tsx

@@ -0,0 +1,44 @@
+import {type ReactElement, useRef} from "react";
+import {Text, View} from "react-native";
+import SignatureCanvas from "react-signature-canvas";
+
+import {useTheme} from "./Theme";
+
+export interface SignatureProps {
+  onChange: (signature: string) => void;
+  onStart?: () => void;
+  onEnd?: () => void;
+  value?: string; // note this
+}
+
+export const Signature = ({onChange}: SignatureProps): ReactElement | null => {
+  const ref = useRef<SignatureCanvas>(null);
+  const {theme} = useTheme();
+
+  const onClear = () => {
+    ref.current?.clear();
+  };
+
+  const onUpdatedSignature = () => {
+    if (ref.current?.toDataURL()) {
+      onChange(ref.current.toDataURL());
+    }
+  };
+  return (
+    <View>
+      <View style={{borderColor: theme.border.dark, borderWidth: 1, maxWidth: 300, width: "100%"}}>
+        <SignatureCanvas
+          backgroundColor={theme.surface.base}
+          onEnd={onUpdatedSignature}
+          penColor={theme.text.secondaryDark}
+          ref={ref}
+        />
+      </View>
+      <View>
+        <Text onPress={onClear} style={{color: theme.text.link, textDecorationLine: "underline"}}>
+          Clear
+        </Text>
+      </View>
+    </View>
+  );
+};