ferns-ui 0.47.9 → 1.0.0-beta.0

package/src/SegmentedControl.tsx

@@ -1,112 +1,60 @@
 import React from "react";
+import {Pressable, View} from "react-native";
 
-import {Box} from "./Box";
-import {
-  SegmentedControlProps,
-  SegmentedControlPropsMultiSelect,
-  SegmentedControlPropsSingleSelect,
-} from "./Common";
+import {SegmentedControlProps} from "./Common";
 import {Text} from "./Text";
+import {useTheme} from "./Theme";
 
 export const SegmentedControl = ({
   items,
   onChange = () => {},
-  multiselect = false,
-  selectLimit = 1,
-  ...props
+  size = "md",
+  selectedIndex,
 }: SegmentedControlProps) => {
-  const selectedItemIndex = (props as SegmentedControlPropsSingleSelect).selectedItemIndex;
-  const selectedItemIndexes = (props as SegmentedControlPropsMultiSelect).selectedItemIndexes;
-
-  const renderItem = (item: string | React.ReactNode) => {
-    return (
-      <Text align="center" weight="bold">
-        {item}
-      </Text>
-    );
-    // if (typeof item === "string") {
-    //   return <Text weight="bold">{item}</Text>;
-    // } else {
-    //   return item;
-    // }
-  };
-
-  if (selectedItemIndex === undefined && selectedItemIndexes === undefined) {
-    console.warn("One of the following must be defined: selectedItemIndex, selectedItemIndexes");
-    return null;
-  }
-
-  if (!multiselect && selectedItemIndexes?.length && selectedItemIndexes?.length > 1) {
-    console.warn("Multiple selections not allowed without multiselect flag");
-    return null;
-  }
-
-  if (selectedItemIndexes?.length && selectedItemIndexes?.length > selectLimit) {
-    console.warn("The number of selected items exceeds the limit");
-    return null;
-  }
-
-  const isTabActive = (index: any) => {
-    return selectedItemIndex === index || selectedItemIndexes?.includes(index)
-      ? "white"
-      : "lightGray";
-  };
-
+  const height = size === "md" ? 36 : 44;
+  const {theme} = useTheme();
   return (
-    <Box
-      color="lightGray"
-      direction="row"
-      display="flex"
-      height={40}
-      justifyContent="between"
-      // padding={1}
-      rounding={3}
-      width="100%"
+    <View
+      style={{
+        display: "flex",
+        flexGrow: 1,
+        flexDirection: "row",
+        flexShrink: 1,
+        alignItems: "center",
+        gap: 4,
+        height,
+        borderRadius: theme.primitives.radius3xl,
+        borderColor: theme.primitives.neutral300,
+        borderWidth: 3,
+        backgroundColor: theme.primitives.neutral300,
+      }}
     >
       {items.map((item, index) => (
-        <Box
+        <Pressable
           key={index}
-          color={isTabActive(index)}
-          height="100%"
-          // paddingX={2}
-          rounding={3}
-          width={`${100 / items.length}%`}
+          accessibilityRole="button"
+          style={{
+            display: "flex",
+            paddingTop: theme.spacing.sm,
+            paddingBottom: theme.spacing.sm,
+            paddingLeft: theme.spacing.md,
+            paddingRight: theme.spacing.md,
+            justifyContent: "center",
+            alignItems: "center",
+            height: "100%",
+            flexBasis: 0,
+            gap: 12,
+            flexGrow: 1,
+            flexShrink: 0,
+            borderRadius: theme.primitives.radius3xl,
+            backgroundColor: index === selectedIndex ? theme.surface.base : undefined,
+            overflow: "hidden",
+          }}
+          onPress={() => onChange(index)}
         >
-          <Box
-            alignItems="center"
-            display="flex"
-            height="100%"
-            justifyContent="center"
-            paddingX={1}
-            width="100%"
-            onClick={() => {
-              if (
-                selectedItemIndexes?.length === selectLimit &&
-                !selectedItemIndexes?.includes(index)
-              ) {
-                return;
-              }
-              if (multiselect) {
-                const typedOnChange =
-                  onChange as unknown as SegmentedControlPropsMultiSelect["onChange"];
-                if (selectedItemIndexes?.includes(index)) {
-                  typedOnChange({activeIndex: selectedItemIndexes.filter((i) => i !== index)});
-                } else {
-                  const currentIndexes = [...(selectedItemIndexes as number[])];
-                  currentIndexes?.push(index);
-                  typedOnChange({activeIndex: currentIndexes?.sort() as number[]});
-                }
-              } else {
-                const typedOnChange =
-                  onChange as unknown as SegmentedControlPropsSingleSelect["onChange"];
-                typedOnChange({activeIndex: index});
-              }
-            }}
-          >
-            {renderItem(item)}
-          </Box>
-        </Box>
+          <Text>{item}</Text>
+        </Pressable>
       ))}
-    </Box>
+    </View>
   );
 };

package/src/SelectField.tsx

@@ -0,0 +1,41 @@
+import React, {FC} from "react";
+import {View} from "react-native";
+
+import {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}
+        placeholder={!requireValue ? clearOption : {}}
+        value={value ?? ""}
+        onValueChange={(v) => {
+          if (v === "" && !requireValue) {
+            (onChange as (val: string | undefined) => void)(undefined);
+          } else {
+            onChange(v);
+          }
+        }}
+      />
+      {helperText && <FieldHelperText text={helperText} />}
+    </View>
+  );
+};

package/src/SideDrawer.tsx

@@ -3,11 +3,11 @@ import {Platform, SafeAreaView, StyleProp, ViewStyle} from "react-native";
 import {Drawer} from "react-native-drawer-layout";
 
 import {SideDrawerProps} from "./Common";
+import {useTheme} from "./Theme";
 
 const DEFAULT_STYLES: StyleProp<ViewStyle> = {
   width: Platform.OS === "web" ? "40%" : "95%",
   height: "100%",
-  backgroundColor: "lightgray",
   borderWidth: 1,
   borderColor: "gray",
 };
@@ -30,6 +30,7 @@ export const SideDrawer = ({
   children,
   drawerStyles = {},
 }: SideDrawerProps): ReactElement => {
+  const {theme} = useTheme();
   const renderDrawerContent = useCallback((): ReactElement => {
     return <SafeAreaView>{renderContent()}</SafeAreaView>;
   }, [renderContent]);
@@ -37,7 +38,12 @@ export const SideDrawer = ({
   return (
     <Drawer
       drawerPosition={position}
-      drawerStyle={[DEFAULT_STYLES, drawerStyles, addWebScroll(isOpen)]}
+      drawerStyle={[
+        DEFAULT_STYLES,
+        {backgroundColor: theme.surface.neutralLight},
+        drawerStyles,
+        addWebScroll(isOpen),
+      ]}
       drawerType={drawerType}
       open={isOpen}
       renderDrawerContent={renderDrawerContent}

package/src/Signature.native.tsx

@@ -1,8 +1,8 @@
 import React, {useRef} from "react";
+import {Text, View} from "react-native";
 import SignatureScreen, {SignatureViewRef} from "react-native-signature-canvas";
 
-import {Box} from "./Box";
-import {Button} from "./Button";
+import {useTheme} from "./Theme";
 
 interface Props {
   onChange: (signature: string) => void;
@@ -14,6 +14,7 @@ const style = `.m-signature-pad--footer {display: none; margin: 0px;}`;
 
 export const Signature: React.FC<Props> = ({onChange, onStart, onEnd}: Props) => {
   const ref = useRef<SignatureViewRef>(null);
+  const {theme} = useTheme();
 
   const handleClear = () => {
     ref.current?.clearSignature();
@@ -31,20 +32,26 @@ export const Signature: React.FC<Props> = ({onChange, onStart, onEnd}: Props) =>
   };
 
   return (
-    <Box>
-      <Box border="black" height={100}>
+    <View style={{minWidth: 220}}>
+      <View style={{borderColor: theme.border.dark, borderWidth: 1, minHeight: 90}}>
         <SignatureScreen
           ref={ref}
+          backgroundColor={theme.surface.base}
           trimWhitespace
           webStyle={style}
           onBegin={onBegin}
           onEnd={handleEnd}
           onOK={(img) => onChange(img)}
         />
-      </Box>
-      <Box direction="row">
-        <Button text="Clear" onClick={handleClear} />
-      </Box>
-    </Box>
+      </View>
+      <View style={{flexDirection: "row"}}>
+        <Text
+          style={{color: theme.text.link, textDecorationLine: "underline"}}
+          onPress={handleClear}
+        >
+          Clear
+        </Text>
+      </View>
+    </View>
   );
 };

package/src/Signature.tsx

@@ -1,17 +1,19 @@
 import React, {ReactElement, useRef} from "react";
+import {Text, View} from "react-native";
 import SignatureCanvas from "react-signature-canvas";
 
-import {Box} from "./Box";
-import {Button} from "./Button";
+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();
@@ -22,15 +24,21 @@ export const Signature = ({onChange}: SignatureProps): ReactElement | null => {
       onChange(ref.current.toDataURL());
     }
   };
-
   return (
-    <Box width={300}>
-      <Box border="black">
-        <SignatureCanvas ref={ref} backgroundColor="white" onEnd={onUpdatedSignature} />
-      </Box>
-      <Box direction="row">
-        <Button color="gray" text="Clear" onClick={onClear} />
-      </Box>
-    </Box>
+    <View>
+      <View style={{borderColor: theme.border.dark, borderWidth: 1, width: "100%", maxWidth: 300}}>
+        <SignatureCanvas
+          ref={ref}
+          backgroundColor={theme.surface.base}
+          penColor={theme.text.secondaryDark}
+          onEnd={onUpdatedSignature}
+        />
+      </View>
+      <View>
+        <Text style={{color: theme.text.link, textDecorationLine: "underline"}} onPress={onClear}>
+          Clear
+        </Text>
+      </View>
+    </View>
   );
 };

package/src/SignatureField.tsx

@@ -0,0 +1,92 @@
+import React, {ReactElement} from "react";
+import {Image, View} from "react-native";
+
+import {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={{
+              height: 90,
+              width: 300,
+              backgroundColor: theme.surface.neutralLight,
+              marginVertical: 8,
+            }}
+          />
+          <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 && onEnd();
+          }}
+          onStart={() => {
+            onStart && onStart();
+          }}
+        />
+      </View>
+    </View>
+  );
+};
+
+const SignatureImage = (image: string): ReactElement => {
+  return (
+    <Image
+      accessibilityIgnoresInvertColors={false}
+      resizeMode="contain"
+      source={{uri: image}}
+      style={{
+        width: 300,
+        height: 80,
+        borderWidth: 1,
+        borderColor: "black",
+      }}
+    />
+  );
+};

package/src/Spinner.tsx

@@ -2,9 +2,22 @@ import React, {ReactElement, useEffect, useState} from "react";
 import {ActivityIndicator} from "react-native";
 
 import {SpinnerProps} from "./Common";
+import {useTheme} from "./Theme";
 
-export const Spinner = ({size, color}: SpinnerProps): ReactElement | null => {
+export const Spinner = ({size = "md", color = "light"}: SpinnerProps): ReactElement | null => {
   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.
@@ -16,6 +29,7 @@ export const Spinner = ({size, color}: SpinnerProps): ReactElement | null => {
   if (!show) {
     return null;
   }
+
   const spinnerSize: "small" | "large" = size === "sm" ? "small" : "large";
-  return <ActivityIndicator color={color ?? "darkGray"} size={spinnerSize} />;
+  return <ActivityIndicator color={computedColor} size={spinnerSize} />;
 };

package/src/SplitPage.native.tsx

@@ -1,5 +1,5 @@
 // TODO: Update SplitPage native to have desktop UX for tablet sized screens
-import React, {useCallback, useContext, useEffect, useState} from "react";
+import React, {useCallback, useEffect, useState} from "react";
 import flattenChildren from "react-keyed-flatten-children";
 import {Dimensions, ListRenderItemInfo, View} from "react-native";
 import {SwiperFlatList} from "react-native-swiper-flatlist";
@@ -9,7 +9,7 @@ import {SplitPageProps} from "./Common";
 import {FlatList} from "./FlatList";
 import {IconButton} from "./IconButton";
 import {Spinner} from "./Spinner";
-import {ThemeContext} from "./Theme";
+import {useTheme} from "./Theme";
 import {Unifier} from "./Unifier";
 
 export const SplitPage = ({
@@ -26,7 +26,7 @@ export const SplitPage = ({
   bottomNavBarHeight,
   showItemList,
 }: SplitPageProps) => {
-  const {theme} = useContext(ThemeContext);
+  const {theme} = useTheme();
   const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
 
   // flattenChildren is necessary to pull children from a React Fragment. Without this,
@@ -63,6 +63,8 @@ export const SplitPage = ({
   const renderItem = (itemInfo: ListRenderItemInfo<any>) => {
     return (
       <Box
+        accessibilityHint=""
+        accessibilityLabel="Edit"
         onClick={async () => {
           await Unifier.utils.haptic();
           await onItemSelect(itemInfo);
@@ -109,9 +111,9 @@ export const SplitPage = ({
       <Box flex="grow" padding={2}>
         <Box width="100%">
           <IconButton
+            accessibilityHint="close split page"
             accessibilityLabel="close"
-            icon="times"
-            iconColor="darkGray"
+            iconName="xmark"
             onClick={() => onItemDeselect()}
           />
         </Box>
@@ -150,13 +152,13 @@ export const SplitPage = ({
   return (
     <Box
       avoidKeyboard
-      color={color || "lightGray"}
+      color={color || "neutralLight"}
       flex="grow"
       height="100%"
       keyboardOffset={keyboardOffset}
       width="100%"
     >
-      {loading === true && <Spinner color={theme.darkGray as any} size="md" />}
+      {loading === true && <Spinner color="light" size="md" />}
       {selectedId === undefined ? renderList() : renderMainContent}
     </Box>
   );

package/src/SplitPage.tsx

@@ -1,4 +1,4 @@
-import React, {Children, useCallback, useContext, useEffect, useState} from "react";
+import React, {Children, useCallback, useEffect, useState} from "react";
 import {Dimensions, ListRenderItemInfo, ScrollView, View} from "react-native";
 import {SwiperFlatList} from "react-native-swiper-flatlist";
 
@@ -9,7 +9,7 @@ import {IconButton} from "./IconButton";
 import {mediaQueryLargerThan} from "./MediaQuery";
 import {SegmentedControl} from "./SegmentedControl";
 import {Spinner} from "./Spinner";
-import {ThemeContext} from "./Theme";
+import {useTheme} from "./Theme";
 
 // A component for rendering a list on one side and a details view on the right for large screens,
 // and a scrollable list where clicking an item takes you the details view.
@@ -28,9 +28,8 @@ export const SplitPage = ({
   listViewWidth,
   bottomNavBarHeight,
   showItemList,
-  selectLimit,
 }: SplitPageProps) => {
-  const {theme} = useContext(ThemeContext);
+  const {theme} = useTheme();
   const [selectedId, setSelectedId] = useState<number | undefined>(undefined);
   const [activeTabs, setActiveTabs] = useState<number[]>([0, 1]);
   const {width} = Dimensions.get("window");
@@ -72,6 +71,8 @@ export const SplitPage = ({
   const renderItem = (itemInfo: ListRenderItemInfo<any>) => {
     return (
       <Box
+        accessibilityHint=""
+        accessibilityLabel="Select"
         onClick={async () => {
           await onItemSelect(itemInfo);
         }}
@@ -126,11 +127,9 @@ export const SplitPage = ({
           <Box marginBottom={4} paddingX={4} width="100%">
             <SegmentedControl
               items={tabs}
-              multiselect
-              selectLimit={selectLimit || tabs.length}
-              selectedItemIndexes={activeTabs}
+              selectedIndex={activeTabs[0]}
               onChange={(index) => {
-                setActiveTabs([...(index.activeIndex as number[])]);
+                setActiveTabs([...([index] as number[])]);
               }}
             />
           </Box>
@@ -227,9 +226,9 @@ export const SplitPage = ({
         {isMobileDevice && (
           <Box width="100%">
             <IconButton
+              accessibilityHint="close split page"
               accessibilityLabel="close"
-              icon="times"
-              iconColor="darkGray"
+              iconName="xmark"
               onClick={() => onItemDeselect()}
             />
           </Box>
@@ -289,7 +288,7 @@ export const SplitPage = ({
   return (
     <Box
       avoidKeyboard
-      color={color || "lightGray"}
+      color={color || "neutralLight"}
       direction="row"
       display="flex"
       height="100%"
@@ -297,7 +296,7 @@ export const SplitPage = ({
       padding={2}
       width="100%"
     >
-      {loading === true && <Spinner color={theme.darkGray as any} size="md" />}
+      {loading === true && <Spinner color={theme.text.primary as any} size="md" />}
       {Boolean(isMobileDevice) ? renderMobileSplitPage() : renderSplitPage()}
     </Box>
   );