ferns-ui 0.47.10 → 1.0.0

package/src/icons/MobileIcon.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import Svg, {Path} from "react-native-svg";
+
+import {CustomSvgProps} from "../Common";
+
+export const MobileIcon = ({doNotDisturb, ...props}: CustomSvgProps) => {
+  return (
+    <Svg fill="none" height={33} viewBox="0 0 33 45" width={30} {...props}>
+      <Path d="M3 7h24v35H3z" fill="#fff" />
+      <Path
+        d="M8.864 5.5A5.867 5.867 0 0 0 3 11.364v26.182a5.867 5.867 0 0 0 5.864 5.863h15.272A5.867 5.867 0 0 0 30 37.546V11.364A5.867 5.867 0 0 0 24.136 5.5H8.864Zm1.5 7.364h12.272v18.818H10.364V12.864Z"
+        fill="#3EA45C"
+        stroke="#fff"
+        strokeWidth={3}
+      />
+      <Path
+        d="M14.622 37.249h3.768a.789.582 0 0 1 .789.582.789.582 0 0 1-.789.581h-3.779a.789.582 0 0 1-.789-.581.8.582 0 0 1 .8-.582Z"
+        fill="#fff"
+        stroke="#fff"
+      />
+      {doNotDisturb && (
+        <>
+          <Path
+            d="M21 4h8l-8 6.857h8"
+            stroke="#fff"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={8}
+          />
+          <Path
+            d="M21 4h8l-8 6.857h8"
+            stroke="#3EA45C"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={3}
+          />
+        </>
+      )}
+    </Svg>
+  );
+};

package/src/icons/OfflineIcon.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import Svg, {Path} from "react-native-svg";
+
+import {CustomSvgProps} from "../Common";
+export const OfflineIcon = ({doNotDisturb, ...props}: CustomSvgProps) => (
+  <Svg fill="none" height={33} width={30} {...props}>
+    <Path
+      d="M28.5 18c0 7.456-6.044 13.5-13.5 13.5S1.5 25.456 1.5 18 7.544 4.5 15 4.5 28.5 10.544 28.5 18Z"
+      fill="#2B6072"
+      stroke="#fff"
+      strokeWidth={3}
+    />
+    <Path
+      d="M24.5 18a9.5 9.5 0 1 1-19 0 9.5 9.5 0 0 1 19 0Z"
+      fill="#fff"
+      stroke="#9A9A9A"
+      strokeWidth={5}
+    />
+    {doNotDisturb && (
+      <>
+        <Path
+          d="M18 4h8l-8 6.857h8"
+          stroke="#fff"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={8}
+        />
+        <Path
+          d="M18 4h8l-8 6.857h8"
+          stroke="#9A9A9A"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+        />
+      </>
+    )}
+  </Svg>
+);

package/src/icons/OnlineIcon.tsx

@@ -0,0 +1,40 @@
+// Generated with https://react-svgr.com/playground/?native=true&typescript=true
+
+import * as React from "react";
+import Svg, {Path} from "react-native-svg";
+
+import {CustomSvgProps} from "../Common";
+
+export const OnlineIcon = ({doNotDisturb, ...props}: CustomSvgProps) => {
+  return (
+    <Svg fill="none" height="33" width="30" {...props}>
+      <Path
+        d="M28.5 18c0 7.456-6.044 13.5-13.5 13.5S1.5 25.456 1.5 18 7.544 4.5 15 4.5 28.5 10.544 28.5 18Z"
+        fill="#fff"
+        stroke="#fff"
+      />
+      <Path
+        d="M26 18c0 6.075-4.925 11-11 11S4 24.075 4 18 8.925 7 15 7s11 4.925 11 11Z"
+        fill="#3EA45C"
+      />
+      {doNotDisturb && (
+        <>
+          <Path
+            d="M18 4h8l-8 6.857h8"
+            stroke="#fff"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={8}
+          />
+          <Path
+            d="M18 4h8l-8 6.857h8"
+            stroke="#3EA45C"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={3}
+          />
+        </>
+      )}
+    </Svg>
+  );
+};

package/src/icons/OutOfficeIcon.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import Svg, {Path} from "react-native-svg";
+
+import {CustomSvgProps} from "../Common";
+export const OutOfOfficeIcon = ({doNotDisturb, ...props}: CustomSvgProps) => (
+  <Svg fill="none" height={33} width={30} {...props}>
+    <Path
+      d="M28.5 18c0 7.456-6.044 13.5-13.5 13.5S1.5 25.456 1.5 18 7.544 4.5 15 4.5 28.5 10.544 28.5 18Z"
+      fill="#fff"
+      stroke="#fff"
+      strokeWidth={3}
+    />
+    <Path
+      d="M26 18c0 6.075-4.925 11-11 11S4 24.075 4 18 8.925 7 15 7s11 4.925 11 11Z"
+      fill="#D33232"
+    />
+    <Path d="M9 18h12" stroke="#fff" strokeLinecap="round" strokeWidth={4} />
+    {doNotDisturb && (
+      <>
+        <Path
+          d="M18 4h8l-8 6.857h8"
+          stroke="#fff"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={8}
+        />
+        <Path
+          d="M18 4h8l-8 6.857h8"
+          stroke="#D33232"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={3}
+        />
+      </>
+    )}
+  </Svg>
+);

package/src/icons/index.ts

@@ -0,0 +1,4 @@
+export * from "./MobileIcon";
+export * from "./OfflineIcon";
+export * from "./OnlineIcon";
+export * from "./OutOfficeIcon";

package/src/index.tsx

@@ -1,26 +1,29 @@
+export * from "./Accordion";
 export * from "./ActionSheet";
+export * from "./AddressField";
 export * from "./Avatar";
 export * from "./Badge";
 export * from "./Banner";
-export * from "./BlurBox";
 export * from "./Body";
+export * from "./BooleanField";
 export * from "./Box";
 export * from "./Button";
 export * from "./Card";
 export * from "./CheckBox";
 export * from "./Common";
 export * from "./Constants";
+export * from "./CustomSelectField";
 export * from "./DateTimeActionSheet";
 export * from "./DateTimeField";
 export * from "./DateUtilities";
 export * from "./DecimalRangeActionSheet";
+export * from "./DismissButton";
+export * from "./EmailField";
 export * from "./ErrorBoundary";
 export * from "./ErrorPage";
 export * from "./FernsProvider";
 export * from "./Field";
 export * from "./FlatList";
-export * from "./Form";
-export * from "./HeaderButtons";
 export * from "./Heading";
 export * from "./HeightActionSheet";
 export * from "./Icon";
@@ -29,29 +32,41 @@ export * from "./Image";
 export * from "./ImageBackground";
 export * from "./InfoTooltipButton";
 export * from "./Link";
-export * from "./Mask";
 export * from "./MediaQuery";
 export * from "./MobileAddressAutoComplete";
 export * from "./Modal";
 export * from "./ModalSheet";
+export * from "./MultiselectField";
+export * from "./NumberField";
 export * from "./NumberPickerActionSheet";
 export * from "./OpenAPIContext";
 export * from "./Page";
-export * from "./Pill";
-export * from "./ProgressBar";
+export * from "./Pagination";
+export * from "./PasswordField";
+export * from "./PhoneNumberField";
+export * from "./Radio";
+export * from "./RadioField";
 export * from "./ScrollView";
 export * from "./SegmentedControl";
-export * from "./SelectList";
+export * from "./SelectField";
 export * from "./SideDrawer";
 export * from "./Signature";
+export * from "./SignatureField";
 export * from "./Spinner";
 export * from "./SplitPage";
-export * from "./Switch";
-export * from "./Table";
-export * from "./tableContext";
-export * from "./TableHeader";
-export * from "./TableHeaderCell";
-export * from "./TableRow";
+export * from "./table/Table";
+export * from "./table/Table";
+export * from "./table/TableBadge";
+export * from "./table/TableBoolean";
+export * from "./table/tableContext";
+export * from "./table/TableDate";
+export * from "./table/TableHeader";
+export * from "./table/TableHeaderCell";
+export * from "./table/TableIconButton";
+export * from "./table/TableNumber";
+export * from "./table/TableRow";
+export * from "./table/TableText";
+export * from "./table/TableTitle";
 export * from "./TapToEdit";
 export * from "./Text";
 export * from "./TextArea";
@@ -64,7 +79,6 @@ export * from "./Unifier";
 export * from "./useStoredState";
 export * from "./Utilities";
 export * from "./WebAddressAutocomplete";
-export * from "./WithLabel";
 // export * from "./Layout";
 // export * from "./Drawer";
 // export * from "./Chart";

package/src/setupTests.ts

@@ -1 +1,2 @@
 process.env.TZ = "America/New_York";
+export {};

package/src/{Table.tsx → table/Table.tsx}

@@ -2,14 +2,14 @@ import React, {Children, ReactElement, useEffect} from "react";
 import {ScrollView} from "react-native";
 import {DimensionValue} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
 
-import {Box} from "./Box";
-import {ColumnSortInterface, TableProps} from "./Common";
-import {PaginationControl} from "./Pagination";
+import {Box} from "../Box";
+import {ColumnSortInterface, TableProps} from "../Common";
+import {Pagination} from "../Pagination";
 import {TableContextProvider} from "./tableContext";
 
 export const Table = ({
   children,
-  columns,
+  columns, // see notes in common about table columns width and decide if we need to change this to a more specific type 'size'
   borderStyle,
   alternateRowBackground = true,
   maxHeight,
@@ -17,6 +17,7 @@ export const Table = ({
   sort,
   page: propsPage,
   setPage: propsSetPage,
+  totalPages,
   more,
   extraControls,
 }: TableProps): React.ReactElement => {
@@ -37,10 +38,11 @@ export const Table = ({
   let width: DimensionValue;
   if (columns.every((column) => typeof column === "number")) {
     width = columns.reduce((acc, curr) => {
-      return (acc as number) + (curr as number);
+      return (acc as number) + (curr as number) + 8; // 8 for margin between columns;
     }, 0) as number;
     if (hasDrawerContents) {
-      width = (width as number) + 30;
+      // Size of IconButton + padding is 56
+      width = (width as number) + 56;
     }
   } else {
     width = "100%";
@@ -67,9 +69,18 @@ export const Table = ({
       stickyHeader={stickyHeader}
     >
       <>
-        <Box flex="grow" maxWidth="100%" width={width}>
+        <Box
+          flex="grow"
+          maxWidth="100%"
+          style={{
+            position: "relative",
+          }}
+          width={width}
+        >
           <ScrollView horizontal style={{width, maxWidth: "100%"}}>
+            {/* TODO: Replace table scrollview with flat list */}
             <ScrollView
+              // nestedScrollEnabled
               stickyHeaderIndices={stickyHeader ? [0] : undefined}
               style={{width, maxWidth: "100%", flex: 1, maxHeight}}
             >
@@ -77,20 +88,19 @@ export const Table = ({
                 children,
                 (child, index) =>
                   Boolean(child) &&
-                  React.cloneElement(child as any, {
-                    color: index % 2 === 1 && alternateRowBackground ? "lightGray" : "white",
+                  React.cloneElement(child as ReactElement, {
+                    color: index % 2 === 1 && alternateRowBackground ? "neutralLight" : "base",
                   })
               )}
             </ScrollView>
           </ScrollView>
         </Box>
-        {Boolean(shouldPaginate) && (
-          <Box alignItems="center" borderTop="gray" direction="row" height={60} paddingX={8}>
-            <PaginationControl
+        {Boolean(shouldPaginate && totalPages !== undefined) && (
+          <Box alignItems="center" borderTop="default" direction="row" height={60} paddingX={8}>
+            <Pagination
               page={propsPage ?? page}
               setPage={propsSetPage ?? setPage}
-              shouldDisableBackButton={(propsPage ?? page) <= 1}
-              shouldDisableNextButton={!more}
+              totalPages={totalPages!}
             />
             {Boolean(extraControls) && extraControls}
           </Box>

package/src/table/TableBadge.tsx

@@ -0,0 +1,46 @@
+import React, {FC, useState} from "react";
+import {View} from "react-native";
+
+import {Badge} from "../Badge";
+import {TableBadgeProps} from "../Common";
+import {SelectField} from "../SelectField";
+
+export interface TableBadgeHandles {
+  handleSave: () => void | Promise<void>;
+}
+
+// TODO: Support error state in TableBadge
+export const TableBadge: FC<TableBadgeProps> = ({
+  value,
+  badgeStatus = "info",
+  badgeIconName,
+  isEditing = false,
+  editingOptions,
+}) => {
+  const [selected, setSelected] = useState<string | undefined>(value);
+
+  const handleChange = (newVal: string | undefined) => {
+    if (newVal === "") {
+      setSelected(undefined);
+    } else {
+      setSelected(newVal);
+    }
+  };
+
+  return (
+    <View
+      style={{
+        justifyContent: "center",
+        alignItems: "center",
+      }}
+    >
+      {isEditing && editingOptions ? (
+        <SelectField options={editingOptions} value={selected} onChange={handleChange} />
+      ) : (
+        <Badge iconName={badgeIconName} secondary status={badgeStatus} value={value} />
+      )}
+    </View>
+  );
+};
+
+TableBadge.displayName = "TableBadge";

package/src/table/TableBoolean.tsx

@@ -0,0 +1,70 @@
+import React, {FC, useCallback, useState} from "react";
+import {TouchableOpacity, View, ViewStyle} from "react-native";
+
+import {CheckBox} from "../CheckBox";
+import {TableBooleanProps} from "../Common";
+import {Icon} from "../Icon";
+import {useTheme} from "../Theme";
+
+export interface TableBooleanHandles {
+  handleSave: () => void | Promise<void>;
+}
+
+export const TableBoolean: FC<TableBooleanProps> = ({value, isEditing = false}) => {
+  const [checked, setChecked] = useState(value);
+  const {theme} = useTheme();
+  const valueString = checked ? "checked" : "unchecked";
+  const oppositeValueString = checked ? "unchecked" : "checked";
+
+  const handlePress = useCallback(() => {
+    setChecked(!checked);
+  }, [checked]);
+
+  if (isEditing) {
+    return (
+      <TouchableOpacity
+        accessibilityHint={`Tap to change the checkbox from ${oppositeValueString} to ${valueString}`}
+        accessibilityLabel={`Checkbox is currently ${valueString}`}
+        accessibilityRole="checkbox"
+        hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
+        style={
+          {
+            alignItems: "center",
+            justifyContent: "center",
+          } as ViewStyle
+        }
+        onPress={handlePress}
+      >
+        <CheckBox selected={checked} size="lg" />
+      </TouchableOpacity>
+    );
+  } else {
+    return (
+      <View
+        style={{
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+        }}
+      >
+        <View
+          accessibilityHint={value ? "Checked icon" : "Unchecked icon"}
+          accessibilityLabel={`The checkbox is ${valueString}`}
+          accessibilityRole="image"
+          style={{
+            height: 32,
+            width: 32,
+            borderRadius: 16,
+            backgroundColor: value ? theme.surface.successLight : "transparent",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Icon color={value ? "success" : "secondaryLight"} iconName={value ? "check" : "x"} />
+        </View>
+      </View>
+    );
+  }
+};
+
+TableBoolean.displayName = "TableBoolean";

package/src/table/TableDate.tsx

@@ -0,0 +1,38 @@
+import {DateTime} from "luxon";
+import React, {FC, useState} from "react";
+import {Text} from "react-native";
+
+import {TableDateProps} from "../Common";
+
+export const TableDate: FC<TableDateProps> = ({value, annotated = false}) => {
+  const initialDate =
+    typeof value === "string" ? DateTime.fromISO(value) : DateTime.fromJSDate(value);
+  const [dateVal] = useState(initialDate);
+
+  // TODO: Formatting date with annotations should be in DateUtilities and tested.
+  const formatDate = (date: DateTime) => {
+    const now = DateTime.now();
+    const diff = now.diff(date, ["years", "months", "days"]).toObject();
+
+    let diffString = "";
+    if (diff.years) {
+      diffString += `${Math.floor(diff.years)} Year${Math.floor(diff.years) > 1 ? "s" : ""} `;
+    }
+    if (diff.months) {
+      diffString += `${Math.floor(diff.months)} Mo${Math.floor(diff.months) > 1 ? "s" : ""} `;
+    }
+    if (diff.days) {
+      diffString += `${Math.floor(diff.days)} Day${Math.floor(diff.days) > 1 ? "s" : ""}`;
+    }
+
+    return `${date.toFormat("MM/dd/yyyy")} (${diffString.trim()})`;
+  };
+
+  return (
+    <Text style={{fontSize: 16}}>
+      {annotated ? formatDate(dateVal) : dateVal.toFormat("MM/dd/yyyy")}
+    </Text>
+  );
+};
+
+TableDate.displayName = "TableDate";

package/src/{TableHeader.tsx → table/TableHeader.tsx}

@@ -1,7 +1,7 @@
 import React from "react";
 
-import {Box} from "./Box";
-import {TableHeaderProps} from "./Common";
+import {Box} from "../Box";
+import {TableHeaderProps} from "../Common";
 import {TableRow} from "./TableRow";
 
 /**
@@ -13,7 +13,7 @@ export const TableHeader = ({
   color,
 }: TableHeaderProps): React.ReactElement => {
   return (
-    <Box color={color ?? "white"} display={display === "visuallyHidden" ? "none" : "flex"}>
+    <Box color={color ?? "base"} display={display === "visuallyHidden" ? "none" : "flex"}>
       <TableRow headerRow>{children}</TableRow>
     </Box>
   );

package/src/table/TableHeaderCell.tsx

@@ -0,0 +1,93 @@
+// TableHeaderCell.tsx
+import {FontAwesome6} from "@expo/vector-icons";
+import React, {ReactElement, useCallback} from "react";
+import {View} from "react-native";
+
+import {Box} from "../Box";
+import {AlignItems, TableHeaderCellProps} from "../Common";
+import {useTheme} from "../Theme";
+import {useTableContext} from "./tableContext";
+import {TableTitle} from "./TableTitle";
+
+/**
+ * Use TableHeaderCell to define a header cell in Table.
+ */
+export const TableHeaderCell = ({
+  children,
+  index,
+  sortable,
+  align = "left",
+  title,
+  onSortChange,
+}: TableHeaderCellProps): ReactElement => {
+  const {theme} = useTheme();
+
+  const {columns, setSortColumn, sortColumn} = useTableContext();
+  const width = columns[index];
+  if (!width) {
+    console.warn(`No width defined for column ${index} in TableHeaderCell`);
+  }
+  if (children && title) {
+    console.warn("Both children and title are defined in TableHeaderCell. Title will be ignored.");
+  }
+  if (!children && !title) {
+    console.error("Either children or title is required in TableHeaderCell");
+  }
+
+  const sort = sortColumn?.column === index ? sortColumn.direction : undefined;
+  let alignItems: AlignItems = "start";
+  if (align === "center") {
+    alignItems = "center";
+  } else if (align === "right") {
+    alignItems = "end";
+  }
+
+  const onClick = useCallback(() => {
+    // desc => asc => undefined
+    const newSort = sort === "desc" ? "asc" : sort === "asc" ? undefined : "desc";
+    if (setSortColumn) {
+      setSortColumn(newSort ? {column: index, direction: newSort} : undefined);
+    }
+    onSortChange && onSortChange(newSort);
+  }, [index, onSortChange, setSortColumn, sort]);
+
+  if (sortable && !onSortChange) {
+    console.error("onSortChange is required when sortable is true");
+  }
+  return (
+    <Box
+      accessibilityHint="changes sort alphabetical order"
+      accessibilityLabel="sort"
+      alignItems="center"
+      direction="row"
+      flex="grow"
+      justifyContent={alignItems}
+      onClick={sortable ? onClick : undefined}
+    >
+      {Boolean(children) && children}
+      {Boolean(title) && <TableTitle align={align} title={title!} />}
+      {Boolean(sort) && (
+        <Box alignSelf="end" paddingX={2}>
+          {/* Make it look like an IconButton, but we can't nest buttons and the whole row is clickable. */}
+          <View
+            style={{
+              alignItems: "center",
+              backgroundColor: theme.surface.primary,
+              borderRadius: theme.radius.rounded as any,
+              justifyContent: "center",
+              height: 16,
+              width: 16,
+            }}
+          >
+            <FontAwesome6
+              color={theme.text.inverted}
+              name={sort === "asc" ? "arrow-down" : "arrow-up"}
+              size={10}
+              solid
+            />
+          </View>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/table/TableIconButton.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-native-a11y/has-accessibility-hint */
+// accessibility hint handled in IconButton.tsx
+
+import React, {FC} from "react";
+import {View} from "react-native";
+
+import {IconButtonProps, IconName, TableIconButtonProps} from "../Common";
+import {IconButton} from "../IconButton";
+
+export const TableIconButton: FC<TableIconButtonProps> = ({tableIconButtonName, onClick}) => {
+  const iconButtonMap: Record<
+    string,
+    {
+      iconName: IconName;
+      variant: IconButtonProps["variant"];
+      accessibilityLabel: string;
+      accessibilityHint: string;
+    }
+  > = {
+    edit: {
+      iconName: "pen-to-square",
+      variant: "muted",
+      accessibilityLabel: "Edit",
+      accessibilityHint: "Edit row",
+    },
+    saveAndClose: {
+      iconName: "check",
+      variant: "secondary",
+      accessibilityLabel: "Save and close",
+      accessibilityHint: "Save and close row",
+    },
+    insert: {
+      iconName: "plus",
+      variant: "primary",
+      accessibilityLabel: "Insert Data",
+      accessibilityHint: "Insert Data",
+    },
+    drawerOpen: {
+      iconName: "chevron-down",
+      variant: "muted",
+      accessibilityLabel: "Open Drawer for more Data",
+      accessibilityHint: "Open Drawer",
+    },
+    drawerClose: {
+      iconName: "chevron-up",
+      variant: "secondary",
+      accessibilityLabel: "Close Drawer for more Data",
+      accessibilityHint: "Close Drawer",
+    },
+  };
+
+  return (
+    <View style={{justifyContent: "center", alignItems: "center", width: "100%"}}>
+      <IconButton
+        accessibilityLabel={iconButtonMap[tableIconButtonName].accessibilityLabel}
+        iconName={iconButtonMap[tableIconButtonName].iconName}
+        variant={iconButtonMap[tableIconButtonName].variant}
+        onClick={onClick}
+      />
+    </View>
+  );
+};