@terreno/ui 0.0.1

package/src/SignatureField.tsx

@@ -0,0 +1,92 @@
+import type {ReactElement} from "react";
+import {Image, View} from "react-native";
+
+import type {SignatureFieldProps} from "./Common";
+import {Heading} from "./Heading";
+import {Icon} from "./Icon";
+import {Signature} from "./Signature";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+
+// NOTE: When using this inside a ScrollView, you must set the scrollEnabled prop to false on the
+// ScrollView onStart and to true onEnd or it will try to scroll the whole view around this
+// component.
+export const SignatureField = ({
+  disabled = false,
+  title = "Signature",
+  value,
+  onChange,
+  onStart,
+  onEnd,
+  disabledText,
+  errorText,
+}: SignatureFieldProps): ReactElement => {
+  const {theme} = useTheme();
+  if (disabled) {
+    if (value) {
+      return (
+        <View>
+          <Heading size="sm">{title}</Heading>
+          <View style={{marginVertical: 8}}>{SignatureImage(value)}</View>
+          <Text size="sm">{disabledText}</Text>
+        </View>
+      );
+    } else {
+      // we don't have a value so should show a grayed out signature field as a box
+      // there is no disabled state for the Signature components
+      return (
+        <View>
+          <View
+            style={{
+              backgroundColor: theme.surface.neutralLight,
+              height: 90,
+              marginVertical: 8,
+              width: 300,
+            }}
+          />
+          <Text size="sm">{disabledText}</Text>
+        </View>
+      );
+    }
+  }
+  return (
+    <View>
+      <Heading size="sm">{title}</Heading>
+      {Boolean(errorText) && (
+        <View style={{flexDirection: "row"}}>
+          <Icon color="error" iconName="triangle-exclamation" />
+          <View style={{marginLeft: 4}}>
+            <Text color="error">{errorText}</Text>
+          </View>
+        </View>
+      )}
+      <View style={{marginVertical: 8}}>
+        <Signature
+          onChange={onChange}
+          onEnd={() => {
+            onEnd?.();
+          }}
+          onStart={() => {
+            onStart?.();
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+const SignatureImage = (image: string): ReactElement => {
+  return (
+    <Image
+      accessibilityIgnoresInvertColors={false}
+      resizeMode="contain"
+      source={{uri: image}}
+      style={{
+        borderColor: "black",
+        borderWidth: 1,
+        height: 80,
+        width: 300,
+      }}
+    />
+  );
+};

package/src/Slider.tsx

@@ -0,0 +1,199 @@
+import SliderComponent from "@react-native-community/slider";
+import type React from "react";
+import type {FC} from "react";
+
+import {Box} from "./Box";
+import type {IconName, SliderProps, ValueMappingItem} from "./Common";
+import {FieldError} from "./fieldElements/FieldError";
+import {FieldHelperText} from "./fieldElements/FieldHelperText";
+import {FieldTitle} from "./fieldElements/FieldTitle";
+import {Icon} from "./Icon";
+import {Text} from "./Text";
+import {useTheme} from "./Theme";
+
+// Find the closest option for the current value
+const getCurrentMapping = (map: ValueMappingItem[], value: number) => {
+  if (!map || map.length === 0) {
+    return null;
+  }
+
+  // Find the option with the closest value
+  let closestOption = map[0];
+  let closestDistance = Math.abs(value - closestOption.value);
+
+  for (const option of map) {
+    const distance = Math.abs(value - option.value);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestOption = option;
+    }
+  }
+
+  return closestOption;
+};
+
+const getCenterContent = (
+  valueMapping: ValueMappingItem[] | undefined,
+  value: number,
+  step: number,
+  disabled: boolean,
+  useIcons: boolean
+): React.ReactElement => {
+  if (!valueMapping || valueMapping.length === 0) {
+    const formattedValue = value.toFixed(
+      step > 0 && step < 1 ? String(step).split(".")[1]?.length || 0 : 0
+    );
+    return (
+      <Text align="center" color={disabled ? "secondaryLight" : "primary"} size="lg">
+        {formattedValue}
+      </Text>
+    );
+  }
+
+  const currentOption = getCurrentMapping(valueMapping, value);
+
+  if (useIcons) {
+    return (
+      <Icon
+        color={disabled ? "secondaryLight" : "primary"}
+        iconName={currentOption?.label as IconName}
+        size={currentOption?.size || "md"}
+      />
+    );
+  }
+
+  return (
+    <Text align="center" color={disabled ? "secondaryLight" : "primary"} size="2xl">
+      {currentOption?.label}
+    </Text>
+  );
+};
+
+const getSliderContent = (
+  slider: React.ReactElement,
+  inlineLabels: boolean,
+  labels?: SliderProps["labels"]
+): React.ReactElement => {
+  if (inlineLabels && labels?.min && labels?.max) {
+    return (
+      <Box alignItems="center" direction="row" gap={2}>
+        <Box flex="shrink" minWidth={30}>
+          <Text color="secondaryDark" size="md">
+            {labels.min}
+          </Text>
+        </Box>
+        <Box flex="grow">{slider}</Box>
+        <Box alignItems="end" flex="shrink" minWidth={30}>
+          <Text color="secondaryDark" size="md">
+            {labels.max}
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <>
+      {slider}
+      {labels && (
+        <Box direction="row" justifyContent="between" marginTop={2}>
+          {labels.min && (
+            <Text color="secondaryDark" size="sm">
+              {labels.min}
+            </Text>
+          )}
+          {labels.custom?.map((customLabel, index) => (
+            <Text color="secondaryDark" key={index} size="sm">
+              {customLabel.label}
+            </Text>
+          ))}
+          {labels.max && (
+            <Text color="secondaryDark" size="sm">
+              {labels.max}
+            </Text>
+          )}
+        </Box>
+      )}
+    </>
+  );
+};
+
+export const Slider: FC<SliderProps> = ({
+  disabled = false,
+  errorText,
+  helperText,
+  inlineLabels = false,
+  labels,
+  maximumTrackTintColor,
+  maximumValue = 1,
+  minimumTrackTintColor,
+  minimumValue = 0,
+  step = 0,
+  thumbTintColor,
+  title,
+  showSelection = false,
+  useIcons = false,
+  value,
+  valueMapping,
+  onChange,
+}) => {
+  const {theme} = useTheme();
+
+  if (!theme) {
+    return null;
+  }
+
+  const minTrackColor = minimumTrackTintColor || theme.surface.primary;
+  const maxTrackColor = maximumTrackTintColor || theme.border.default;
+  const thumbColor = thumbTintColor || theme.surface.primary;
+
+  const sliderStyles = {
+    thumbStyle: {
+      backgroundColor: "white",
+      borderRadius: 24,
+      elevation: 5,
+      height: 48,
+      shadowColor: "#000",
+      shadowOffset: {
+        height: 2,
+        width: 0,
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 3.84,
+      width: 48,
+    },
+    trackStyle: {
+      height: 10,
+    },
+  };
+
+  const sliderElement = (
+    <SliderComponent
+      disabled={disabled}
+      maximumTrackTintColor={maxTrackColor}
+      maximumValue={maximumValue}
+      minimumTrackTintColor={minTrackColor}
+      minimumValue={minimumValue}
+      onValueChange={onChange}
+      step={step}
+      thumbTintColor={thumbColor}
+      value={value}
+      {...sliderStyles}
+    />
+  );
+
+  const centerContent = getCenterContent(valueMapping, value, step, disabled, useIcons);
+  const sliderContent = getSliderContent(sliderElement, inlineLabels, labels);
+
+  return (
+    <Box>
+      {Boolean(title) && <FieldTitle text={title!} />}
+      <Box direction="column" gap={showSelection ? 2 : 0}>
+        {showSelection && <Box alignItems="center">{centerContent}</Box>}
+        {sliderContent}
+      </Box>
+      {Boolean(helperText && !errorText) && <FieldHelperText text={helperText!} />}
+      {Boolean(errorText) && <FieldError text={errorText!} />}
+    </Box>
+  );
+};

package/src/Spinner.tsx

@@ -0,0 +1,35 @@
+import {type FC, useEffect, useState} from "react";
+import {ActivityIndicator} from "react-native";
+
+import type {SpinnerProps} from "./Common";
+import {useTheme} from "./Theme";
+
+export const Spinner: FC<SpinnerProps> = ({size = "md", color = "light"}) => {
+  const [show, setShow] = useState(false);
+  const {theme} = useTheme();
+
+  let computedColor = "";
+  if (color === "light") {
+    computedColor = theme.primitives.neutral400;
+  } else if (color === "dark") {
+    computedColor = theme.primitives.neutral000;
+  } else if (color === "accent") {
+    computedColor = theme.primitives.accent700;
+  } else if (color === "secondary") {
+    computedColor = theme.primitives.secondary600;
+  }
+
+  // The delay is for perceived performance. You don't want to show a spinner when you're doing a
+  // quick action.
+  useEffect(() => {
+    const timer = setTimeout(() => setShow(true), 300);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!show) {
+    return null;
+  }
+
+  const spinnerSize: "small" | "large" = size === "sm" ? "small" : "large";
+  return <ActivityIndicator color={computedColor} size={spinnerSize} />;
+};

package/src/SplitPage.native.tsx

@@ -0,0 +1,163 @@
+// TODO: Update SplitPage native to have desktop UX for tablet sized screens
+import {useCallback, useEffect, useState} from "react";
+import flattenChildren from "react-keyed-flatten-children";
+import {Dimensions, type ListRenderItemInfo, View} from "react-native";
+import {SwiperFlatList} from "react-native-swiper-flatlist";
+
+import {Box} from "./Box";
+import type {SplitPageProps} from "./Common";
+import {FlatList} from "./FlatList";
+import {IconButton} from "./IconButton";
+import {Spinner} from "./Spinner";
+import {Unifier} from "./Unifier";
+
+export const SplitPage = ({
+  children,
+  loading = false,
+  color,
+  keyboardOffset,
+  renderListViewItem,
+  renderListViewHeader,
+  renderContent,
+  onSelectionChange = () => {},
+  listViewData,
+  listViewExtraData,
+  bottomNavBarHeight,
+  showItemList,
+}: SplitPageProps) => {
+  const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
+
+  // flattenChildren is necessary to pull children from a React Fragment. Without this,
+  // splitPage would only recognize the fragment container instead stripping it to render
+  // the children individually
+  const elementArray = flattenChildren(children);
+  const {width} = Dimensions.get("window");
+
+  const onItemSelect = useCallback(
+    async (item: ListRenderItemInfo<any>) => {
+      setSelectedId(item.index);
+      await onSelectionChange(item);
+    },
+    [onSelectionChange]
+  );
+
+  const onItemDeselect = useCallback(async (): Promise<void> => {
+    setSelectedId(undefined);
+    await onSelectionChange(undefined);
+  }, [onSelectionChange]);
+
+  // If the list is showing, deselect the item.
+  useEffect(() => {
+    if (showItemList) {
+      void onItemDeselect();
+    }
+  }, [showItemList, onItemDeselect]);
+
+  if (!children && !renderContent) {
+    console.warn("A child node is required");
+    return null;
+  }
+
+  const renderItem = (itemInfo: ListRenderItemInfo<any>) => {
+    return (
+      <Box
+        accessibilityHint=""
+        accessibilityLabel="Edit"
+        onClick={async () => {
+          await Unifier.utils.haptic();
+          await onItemSelect(itemInfo);
+        }}
+      >
+        {renderListViewItem(itemInfo)}
+      </Box>
+    );
+  };
+
+  const renderList = () => {
+    if (selectedId !== undefined) {
+      return null;
+    }
+
+    return (
+      <View
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          flexGrow: 1,
+          flexShrink: 0,
+          maxWidth: "100%",
+          paddingBottom: bottomNavBarHeight,
+          width: "100%",
+        }}
+      >
+        {renderListViewHeader?.()}
+        <FlatList
+          data={listViewData}
+          extraData={listViewExtraData}
+          keyExtractor={(item) => item.id}
+          renderItem={renderItem}
+        />
+      </View>
+    );
+  };
+
+  const renderListContent = () => {
+    if (selectedId === undefined) {
+      return null;
+    }
+    return (
+      <Box flex="grow" padding={2}>
+        <Box width="100%">
+          <IconButton
+            accessibilityHint="close split page"
+            accessibilityLabel="close"
+            iconName="xmark"
+            onClick={() => onItemDeselect()}
+          />
+        </Box>
+        {renderContent?.(selectedId)}
+      </Box>
+    );
+  };
+
+  const renderChildrenContent = () => {
+    if (selectedId === undefined) {
+      return null;
+    }
+    return (
+      <SwiperFlatList
+        nestedScrollEnabled
+        renderAll
+        showPagination={elementArray.length > 1}
+        style={{width: "100%"}}
+      >
+        {elementArray.map((element, i) => {
+          return (
+            <View
+              key={`${element?.toString() ?? ""}-${i}`}
+              style={{height: elementArray.length > 1 ? "95%" : "100%", padding: 4, width}}
+            >
+              {element}
+            </View>
+          );
+        })}
+      </SwiperFlatList>
+    );
+  };
+
+  const renderMainContent = renderContent ? renderListContent() : renderChildrenContent();
+
+  return (
+    <Box
+      avoidKeyboard
+      color={color || "neutralLight"}
+      flex="grow"
+      height="100%"
+      keyboardOffset={keyboardOffset}
+      width="100%"
+    >
+      {loading === true && <Spinner color="light" size="md" />}
+      {selectedId === undefined ? renderList() : renderMainContent}
+    </Box>
+  );
+};