ferns-ui 0.47.10 → 1.0.0

package/src/Modal.tsx

@@ -1,226 +1,250 @@
-import React, {useEffect, useRef} from "react";
-import {Dimensions, Modal as RNModal} from "react-native";
+import React, {FC, useEffect, useRef} from "react";
+import {Dimensions, DimensionValue, Modal as RNModal, Pressable, View} from "react-native";
 import ActionSheet, {ActionSheetRef} from "react-native-actions-sheet";
+import {
+  PanGestureHandler,
+  PanGestureHandlerStateChangeEvent,
+  State,
+} from "react-native-gesture-handler";
 
-import {Box} from "./Box";
 import {Button} from "./Button";
 import {ModalProps} from "./Common";
 import {Heading} from "./Heading";
-import {IconButton} from "./IconButton";
+import {Icon} from "./Icon";
 import {isMobileDevice} from "./MediaQuery";
 import {Text} from "./Text";
+import {useTheme} from "./Theme";
 import {isNative} from "./Utilities";
 
-export const Modal = ({
-  onDismiss,
-  visible,
-  align = "center",
+const getModalSize = (size: "sm" | "md" | "lg"): DimensionValue => {
+  const sizeMap = {
+    sm: 540,
+    md: 720,
+    lg: 900,
+  };
+  let sizePx: DimensionValue = sizeMap[size] || sizeMap.sm;
+  if (sizePx > Dimensions.get("window").width) {
+    sizePx = "90%";
+  }
+  return sizePx;
+};
+
+const ModalContent: FC<{
+  children?: ModalProps["children"];
+  title?: ModalProps["title"];
+  subtitle?: ModalProps["subtitle"];
+  text?: ModalProps["text"];
+  primaryButtonText?: ModalProps["primaryButtonText"];
+  primaryButtonDisabled?: ModalProps["primaryButtonDisabled"];
+  secondaryButtonText?: ModalProps["secondaryButtonText"];
+  primaryButtonOnClick?: ModalProps["primaryButtonOnClick"];
+  secondaryButtonOnClick?: ModalProps["secondaryButtonOnClick"];
+  onDismiss: ModalProps["onDismiss"];
+  sizePx: DimensionValue;
+  theme: any;
+  isMobile: boolean;
+}> = ({
   children,
-  footer,
-  heading,
-  size,
-  subHeading,
+  title,
+  subtitle,
+  text,
   primaryButtonText,
+  primaryButtonDisabled,
+  secondaryButtonText,
   primaryButtonOnClick,
+  secondaryButtonOnClick,
+  onDismiss,
+  sizePx,
+  theme,
+  isMobile,
+}) => {
+  return (
+    <View
+      style={{
+        padding: 32,
+        alignItems: "center",
+        alignSelf: "center",
+        zIndex: 1,
+        backgroundColor: theme.surface.base,
+        margin: "auto",
+        borderRadius: theme.radius.default,
+        width: sizePx,
+        ...(isMobile
+          ? {}
+          : {
+              shadowColor: "#000",
+              shadowOffset: {
+                width: 0,
+                height: 4,
+              },
+              shadowOpacity: 0.5,
+              shadowRadius: 24,
+              elevation: 24,
+            }),
+      }}
+    >
+      <View style={{alignSelf: "flex-end", position: "relative"}}>
+        <Pressable
+          accessibilityHint="Closes the modal"
+          accessibilityLabel="Close modal"
+          accessibilityRole="button"
+          style={{
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            position: "absolute",
+            top: -8,
+            bottom: -8,
+            left: -8,
+            right: -8,
+          }}
+          onPress={onDismiss}
+        >
+          <Icon iconName="x" size="sm" />
+        </Pressable>
+      </View>
+      {title && (
+        <View
+          accessibilityHint="Modal title"
+          accessibilityLabel={title}
+          accessibilityRole="header"
+          style={{alignSelf: "flex-start"}}
+        >
+          <Heading size="lg">{title}</Heading>
+        </View>
+      )}
+      {subtitle && (
+        <View
+          accessibilityHint="Modal Sub Heading Text"
+          accessibilityLabel={subtitle}
+          accessibilityRole="text"
+          style={{alignSelf: "flex-start", marginTop: subtitle ? 8 : 0}}
+        >
+          <Text size="lg">{subtitle}</Text>
+        </View>
+      )}
+      {text && (
+        <View
+          accessibilityHint="Modal body text"
+          accessibilityLabel={text}
+          accessibilityRole="text"
+          style={{marginVertical: text ? 12 : 0, alignSelf: "flex-start"}}
+        >
+          <Text>{text}</Text>
+        </View>
+      )}
+      {children && (
+        <View accessibilityRole="text" style={{marginTop: text ? 0 : 12}}>
+          {children}
+        </View>
+      )}
+      <View
+        style={{
+          marginTop: text && !children ? 20 : 32,
+          flexDirection: "row",
+          alignSelf: "flex-end",
+        }}
+      >
+        {Boolean(secondaryButtonText && secondaryButtonOnClick) && (
+          <View style={{marginRight: primaryButtonText ? 20 : 0}}>
+            <Button
+              text={secondaryButtonText as string}
+              variant="muted"
+              onClick={secondaryButtonOnClick!}
+            />
+          </View>
+        )}
+        {Boolean(primaryButtonText && primaryButtonOnClick) && (
+          <Button
+            disabled={primaryButtonDisabled}
+            text={primaryButtonText as string}
+            onClick={primaryButtonOnClick!}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export const Modal: FC<ModalProps> = ({
+  children,
   primaryButtonDisabled = false,
+  primaryButtonText,
   secondaryButtonText,
+  size = "sm",
+  subtitle,
+  text,
+  title,
+  visible,
+  onDismiss,
+  primaryButtonOnClick,
   secondaryButtonOnClick,
-  showClose = false,
-}: ModalProps): React.ReactElement => {
+}: ModalProps) => {
   const actionSheetRef = useRef<ActionSheetRef>(null);
+  const {theme} = useTheme();
 
-  if (subHeading && !heading) {
-    throw new Error("Cannot render Modal with subHeading and no heading");
-  }
-  if (!footer && !primaryButtonText && !secondaryButtonText && !showClose) {
-    throw new Error(
-      "Cannot render Modal without footer, primaryButtonText, secondaryButtonText, or showClose"
-    );
-  }
-
-  let sizePx: string | number = 540;
-  if (size === "md") {
-    sizePx = 720;
-  } else if (size === "lg") {
-    sizePx = 900;
-  }
-
-  // Adjust size for small screens
-  if (sizePx > Dimensions.get("window").width) {
-    sizePx = "90%";
-  }
+  const onHandlerStateChange = ({nativeEvent}: PanGestureHandlerStateChangeEvent) => {
+    if (nativeEvent.state === State.END && nativeEvent.translationY > 100) {
+      onDismiss();
+    }
+  };
 
-  // Modal uses a visible prop, but ActionSheet uses a setModalVisible method on a reference.
   // Open the action sheet ref when the visible prop changes.
   useEffect(() => {
     if (actionSheetRef.current) {
       actionSheetRef.current.setModalVisible(visible);
     }
-  }, [visible, actionSheetRef]);
+  }, [visible]);
 
-  const renderClose = (): React.ReactElement | null => {
-    if (!showClose) {
-      return null;
-    }
-    return (
-      <IconButton
-        accessibilityLabel="close"
-        bgColor="white"
-        icon="times"
-        iconColor="darkGray"
-        onClick={() => onDismiss()}
-      />
-    );
-  };
+  const isMobile = isMobileDevice() && isNative();
+  const sizePx = getModalSize(size);
 
-  const renderModalHeader = (): React.ReactElement => {
-    return (
-      <Box direction="row" padding={3} width="100%">
-        <Box width={40}>{renderClose()}</Box>
-        <Box direction="column" flex="grow">
-          <Heading align={align === "center" ? "center" : undefined} size="sm">
-            {heading}
-          </Heading>
-          {Boolean(subHeading) && (
-            <Box paddingY={2}>
-              <Text align={align === "center" ? "center" : undefined}>{subHeading}</Text>
-            </Box>
-          )}
-        </Box>
-        <Box width={40} />
-      </Box>
-    );
+  const modalContentProps = {
+    title,
+    subtitle,
+    text,
+    primaryButtonText,
+    primaryButtonDisabled,
+    secondaryButtonText,
+    primaryButtonOnClick,
+    secondaryButtonOnClick,
+    onDismiss,
+    sizePx,
+    theme,
+    isMobile,
   };
 
-  const renderModalFooter = (): React.ReactElement | null => {
-    if (footer) {
-      return footer;
-    }
+  if (isMobile) {
     return (
-      <Box direction="row" justifyContent="end" width="100%">
-        {Boolean(secondaryButtonText) && (
-          <Box marginRight={4} minWidth={120}>
-            <Button
-              color="gray"
-              text={secondaryButtonText ?? ""}
-              onClick={secondaryButtonOnClick}
+      <ActionSheet ref={actionSheetRef} onClose={onDismiss}>
+        <PanGestureHandler onHandlerStateChange={onHandlerStateChange}>
+          <View>
+            <View
+              accessibilityHint="Pull down to close the modal"
+              accessibilityLabel="Pull down bar"
+              accessibilityRole="adjustable"
+              style={{
+                justifyContent: "center",
+                alignItems: "center",
+                alignSelf: "center",
+                padding: 2,
+                backgroundColor: "#9A9A9A",
+                borderRadius: 5,
+                width: "30%",
+                height: 3,
+                marginTop: 10,
+              }}
             />
-          </Box>
-        )}
-        <Box minWidth={120}>
-          <Button
-            color="primary"
-            disabled={primaryButtonDisabled}
-            text={primaryButtonText ?? ""}
-            onClick={primaryButtonOnClick}
-          />
-        </Box>
-      </Box>
+            <ModalContent {...modalContentProps}>{children}</ModalContent>
+          </View>
+        </PanGestureHandler>
+      </ActionSheet>
     );
-  };
-
-  const renderModal = (): React.ReactElement => {
+  } else {
     return (
       <RNModal animationType="slide" transparent visible={visible} onRequestClose={onDismiss}>
-        <Box
-          alignItems="center"
-          alignSelf="center"
-          color="white"
-          dangerouslySetInlineStyle={{
-            __style: {
-              zIndex: 1,
-              shadowColor: "#999",
-              shadowOffset: {
-                width: 4,
-                height: 6,
-              },
-              shadowRadius: 4,
-              shadowOpacity: 1.0,
-              elevation: 8,
-            },
-          }}
-          direction="column"
-          justifyContent="center"
-          marginTop={12}
-          maxWidth={sizePx}
-          minWidth={300}
-          paddingX={8}
-          paddingY={2}
-          rounding={6}
-          shadow
-          width={sizePx}
-        >
-          <Box marginBottom={6} width="100%">
-            {renderModalHeader()}
-            <Box paddingY={4}>{children}</Box>
-            <Box paddingY={4}>{renderModalFooter()}</Box>
-          </Box>
-        </Box>
+        <ModalContent {...modalContentProps}>{children}</ModalContent>
       </RNModal>
     );
-  };
-
-  const renderActionSheet = (): React.ReactElement => {
-    return (
-      <ActionSheet ref={actionSheetRef} onClose={onDismiss}>
-        <Box direction="row" marginBottom={2} paddingX={2} paddingY={2} width="100%">
-          <Box marginRight={4} minWidth={50}>
-            {Boolean(showClose) && (
-              <IconButton
-                accessibilityLabel="close"
-                bgColor="white"
-                icon="times"
-                iconColor="darkGray"
-                size="lg"
-                onClick={() => onDismiss()}
-              />
-            )}
-            {Boolean(secondaryButtonText) && (
-              <Button
-                color="darkGray"
-                inline
-                size="lg"
-                text={secondaryButtonText ?? ""}
-                type="ghost"
-                onClick={secondaryButtonOnClick}
-              />
-            )}
-          </Box>
-          <Box alignItems="center" direction="column" flex="grow" justifyContent="center">
-            <Heading align={align === "center" ? "center" : undefined} size="sm">
-              {heading}
-            </Heading>
-            {Boolean(subHeading) && (
-              <Box paddingY={2}>
-                <Text align={align === "center" ? "center" : undefined}>{subHeading}</Text>
-              </Box>
-            )}
-          </Box>
-
-          <Box alignSelf="start" height="100%" justifyContent="start" marginLeft={4} minWidth={50}>
-            {Boolean(primaryButtonText) && (
-              <Button
-                color="primary"
-                disabled={primaryButtonDisabled}
-                inline
-                size="md"
-                text={primaryButtonText!}
-                type="ghost"
-                onClick={primaryButtonOnClick}
-              />
-            )}
-          </Box>
-        </Box>
-        <Box marginBottom={12} paddingX={4}>
-          {children}
-        </Box>
-      </ActionSheet>
-    );
-  };
-
-  if (isMobileDevice() && isNative()) {
-    return renderActionSheet();
-  } else {
-    return renderModal();
   }
 };

package/src/MultiselectField.tsx

@@ -0,0 +1,103 @@
+import React, {FC, useEffect, useState} from "react";
+import {TouchableOpacity, View} from "react-native";
+
+import {CheckBox} from "./CheckBox";
+import {MultiselectFieldProps} from "./Common";
+import {FieldError, FieldHelperText} from "./fieldElements";
+import {Heading} from "./Heading";
+import {isMobileDevice} from "./MediaQuery";
+import {Text} from "./Text";
+
+interface OptionProps {
+  isDefault: boolean;
+  value: string;
+  label?: string;
+  selected: boolean;
+  onSelect: () => void;
+}
+
+const Option: FC<OptionProps> = ({value, label, isDefault, selected, onSelect}) => {
+  return (
+    <View
+      style={{
+        display: "flex",
+        flexDirection: isDefault ? "row" : "row-reverse",
+        justifyContent: "space-between",
+      }}
+    >
+      <View style={{flex: 1, flexWrap: "wrap"}}>
+        <Text>{label ?? value}</Text>
+      </View>
+      <TouchableOpacity
+        key={value}
+        accessibilityHint={`Select ${label ?? value} from list of options`}
+        accessibilityLabel={label ?? value}
+        accessibilityRole="checkbox"
+        hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
+        style={{
+          justifyContent: "center",
+        }}
+        onPress={onSelect}
+      >
+        <View
+          style={{
+            paddingStart: isDefault ? 8 : 0,
+            paddingEnd: isDefault ? 0 : 8,
+          }}
+        >
+          <CheckBox selected={selected} />
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export const MultiselectField: FC<MultiselectFieldProps> = ({
+  options,
+  title,
+  value = [],
+  variant = "leftText",
+  onChange,
+  errorText,
+  helperText,
+}) => {
+  const isMobile = isMobileDevice();
+  const isDefault = variant === "leftText";
+  const [selectedItems, setSelectedItems] = useState<string[]>(value);
+  // set the selected items to the value passed in the props
+  useEffect(() => {
+    setSelectedItems(value);
+  }, [value]);
+
+  const toggleItem = (item: string) => {
+    const newSelectedItems = selectedItems.includes(item)
+      ? selectedItems.filter((selected) => selected !== item)
+      : [...selectedItems, item];
+    setSelectedItems(newSelectedItems);
+    onChange(newSelectedItems);
+  };
+  return (
+    <View
+      accessibilityHint="Contains a prompt and list of options to select"
+      accessibilityLabel={title}
+      accessibilityRole="combobox"
+      style={{display: "flex", width: "100%", gap: isMobile ? 16 : 8}}
+    >
+      <Heading color="primary" size="sm">
+        {title}
+      </Heading>
+      {Boolean(errorText) && <FieldError text={errorText!} />}
+      {options.map((option) => (
+        <Option
+          key={option.key ?? option.value}
+          isDefault={isDefault}
+          label={option.label}
+          selected={selectedItems.includes(option.value)}
+          value={option.value}
+          onSelect={() => toggleItem(option.value)}
+        />
+      ))}
+      {Boolean(helperText) && <FieldHelperText text={helperText!} />}
+    </View>
+  );
+};

package/src/NumberField.tsx

@@ -0,0 +1,55 @@
+import React, {FC, useCallback, useState} from "react";
+
+import {NumberFieldProps} from "./Common";
+import {TextField} from "./TextField";
+
+export const NumberField: FC<NumberFieldProps> = ({
+  errorText,
+  value: valueProp,
+  max,
+  min,
+  type,
+  ...rest
+}: NumberFieldProps) => {
+  const [value, setValue] = useState(valueProp ?? "");
+
+  const getError = useCallback(
+    (newV?: string) => {
+      const v = String(newV);
+      if (!v) {
+        return;
+      }
+      const num = type === "number" ? parseInt(v) : parseFloat(v);
+      if (isNaN(num) || (type === "number" && v.match(/[^0-9]/) !== null)) {
+        return "Value must be an integer";
+      } else if (
+        (type === "decimal" && v.match(/[^0-9.]+/) !== null) ||
+        (v.match(/\./g) || []).length > 1
+      ) {
+        return "Value must be a decimal";
+      } else if (max !== undefined && num > max) {
+        return `Value must be less than or equal to ${max}`;
+      } else if (min !== undefined && num < min) {
+        return `Value must be greater than or equal to ${min}`;
+      }
+      return undefined;
+    },
+    [max, min, type]
+  );
+
+  const error = errorText || getError(value);
+
+  // Only return the value if it is a valid number
+  const localOnChange = useCallback(
+    (v: string) => {
+      setValue(v);
+      const err = getError(v);
+      if (!err) {
+        rest.onChange(v);
+      }
+    },
+    [getError, rest]
+  );
+
+  return <TextField {...rest} errorText={error} value={value} onChange={localOnChange} />;
+};

package/src/NumberPickerActionSheet.tsx

@@ -26,10 +26,7 @@ export class NumberPickerActionSheet extends React.Component<
           <Box alignItems="end" display="flex" width="100%">
             <Box width="33%">
               <Button
-                color="blue"
-                size="lg"
                 text="Close"
-                type="ghost"
                 onClick={() => {
                   this.props.actionSheetRef?.current?.setModalVisible(false);
                 }}
@@ -45,7 +42,7 @@ export class NumberPickerActionSheet extends React.Component<
               height: PICKER_HEIGHT,
               backgroundColor: "#FFFFFF",
             }}
-            onValueChange={(itemValue) => this.props.onChange({value: String(itemValue)})}
+            onValueChange={(itemValue) => this.props.onChange(String(itemValue))}
           >
             {range(this.props.min, this.props.max).map((n) => (
               <Picker.Item key={String(n)} label={String(n)} value={String(n)} />

package/src/OpenAPIContext.tsx

@@ -38,7 +38,7 @@ export const OpenAPIProvider = ({children, specUrl}: OpenAPIProviderProps): Reac
     }
 
     for (const dotField of dotFields.slice(1)) {
-      field = field?.properties?.[dotField];
+      field = (field?.properties as any)?.[dotField];
     }
     return field;
   };