ferns-ui 1.2.2 → 1.2.4

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from "./CheckBox";
 export * from "./Common";
 export * from "./Constants";
 export * from "./CustomSelectField";
+export * from "./DataTable";
 export * from "./DateTimeActionSheet";
 export * from "./DateTimeField";
 export * from "./DateUtilities";
@@ -30,6 +31,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./Image";
 export * from "./ImageBackground";
+export * from "./InfoModalIcon";
 export * from "./InfoTooltipButton";
 export * from "./Link";
 export * from "./MediaQuery";

package/dist/index.js

@@ -13,6 +13,7 @@ export * from "./CheckBox";
 export * from "./Common";
 export * from "./Constants";
 export * from "./CustomSelectField";
+export * from "./DataTable";
 export * from "./DateTimeActionSheet";
 export * from "./DateTimeField";
 export * from "./DateUtilities";
@@ -30,6 +31,7 @@ export * from "./Icon";
 export * from "./IconButton";
 export * from "./Image";
 export * from "./ImageBackground";
+export * from "./InfoModalIcon";
 export * from "./InfoTooltipButton";
 export * from "./Link";
 export * from "./MediaQuery";

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC;AACjC,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,8BAA8B,CAAC;AAC7C,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,aAAa,CAAC;AAC5B,cAAc,0BAA0B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferns-ui",
-  "version": "1.2.2",
+  "version": "1.2.4",
   "main": "dist/index.js",
   "license": "Apache-2.0",
   "scripts": {
@@ -158,6 +158,7 @@
     "react-native-drawer-layout": "^3.3.2",
     "react-native-gesture-handler": "~2.16.1",
     "react-native-google-places-autocomplete": "^2.5.6",
+    "react-native-markdown-display": "^7.0.2",
     "react-native-modalize": "^2.1.1",
     "react-native-permissions": "^4.1.5",
     "react-native-picker-select": "^9.1.3",

package/src/Accordion.tsx

@@ -4,7 +4,7 @@ import {Pressable, View} from "react-native";
 
 import {AccordionProps} from "./Common";
 import {Heading} from "./Heading";
-import {Modal} from "./Modal";
+import {InfoModalIcon} from "./InfoModalIcon";
 import {Text} from "./Text";
 import {useTheme} from "./Theme";
 
@@ -21,7 +21,6 @@ export const Accordion: FC<AccordionProps> = ({
 }) => {
   const {theme} = useTheme();
   const [collapsed, setCollapsed] = useState(false);
-  const [infoModalVisibleState, setInfoModalVisibleState] = useState(false);
 
   // The external collapse state should override the internal collapse state.
   useEffect(() => {
@@ -29,65 +28,47 @@ export const Accordion: FC<AccordionProps> = ({
   }, [isCollapsed]);
 
   return (
-    <>
-      <Modal
-        primaryButtonOnClick={() => setInfoModalVisibleState(false)}
-        primaryButtonText="Close"
-        size="md"
-        subtitle={infoModalSubtitle}
-        text={infoModalText}
-        title={infoModalTitle}
-        visible={infoModalVisibleState}
-        onDismiss={() => setInfoModalVisibleState(false)}
-      >
-        {infoModalChildren}
-      </Modal>
-      <View
-        style={{
-          padding: 16,
-          borderBottomColor: theme.border.default,
-          borderTopColor: theme.border.default,
-          borderTopWidth: 2,
-          borderBottomWidth: 2,
-          width: "100%",
-        }}
-      >
-        <View style={{flexDirection: "row", justifyContent: "space-between", alignItems: "center"}}>
-          <View style={{flexDirection: "column", gap: 4}}>
-            <View style={{flexDirection: "row", alignItems: "center"}}>
-              <Heading>{title}</Heading>
-              {includeInfoModal && infoModalTitle && (
-                <Pressable
-                  aria-role="button"
-                  hitSlop={{top: 10, bottom: 10, left: 10, right: 10}}
-                  style={{marginLeft: 8}}
-                  onPress={() => setInfoModalVisibleState(true)}
-                >
-                  <Heading color="secondaryLight" size="sm">
-                    ⓘ
-                  </Heading>
-                </Pressable>
-              )}
-            </View>
-            {subtitle && <Text>{subtitle}</Text>}
-          </View>
-          <View>
-            <Pressable
-              aria-role="button"
-              hitSlop={{top: 20, bottom: 20, left: 20, right: 20}}
-              onPress={() => setCollapsed(!collapsed)}
-            >
-              <FontAwesome6
-                color={theme.text.link}
-                name={collapsed ? "chevron-down" : "chevron-up"}
-                selectable={undefined}
-                size={16}
+    <View
+      style={{
+        padding: 16,
+        borderBottomColor: theme.border.default,
+        borderTopColor: theme.border.default,
+        borderTopWidth: 2,
+        borderBottomWidth: 2,
+        width: "100%",
+      }}
+    >
+      <View style={{flexDirection: "row", justifyContent: "space-between", alignItems: "center"}}>
+        <View style={{flexDirection: "column", gap: 4}}>
+          <View style={{flexDirection: "row", alignItems: "center"}}>
+            <Heading>{title}</Heading>
+            {includeInfoModal && infoModalTitle && (
+              <InfoModalIcon
+                infoModalChildren={infoModalChildren}
+                infoModalSubtitle={infoModalSubtitle}
+                infoModalText={infoModalText}
+                infoModalTitle={infoModalTitle}
               />
-            </Pressable>
+            )}
           </View>
+          {subtitle && <Text>{subtitle}</Text>}
+        </View>
+        <View>
+          <Pressable
+            aria-role="button"
+            hitSlop={{top: 20, bottom: 20, left: 20, right: 20}}
+            onPress={() => setCollapsed(!collapsed)}
+          >
+            <FontAwesome6
+              color={theme.text.link}
+              name={collapsed ? "chevron-down" : "chevron-up"}
+              selectable={undefined}
+              size={16}
+            />
+          </Pressable>
         </View>
-        {collapsed ? null : <View style={{marginTop: 8}}>{children}</View>}
       </View>
-    </>
+      {collapsed ? null : <View style={{marginTop: 8}}>{children}</View>}
+    </View>
   );
 };

package/src/Button.tsx

@@ -116,12 +116,17 @@ const ButtonComponent: FC<ButtonProps> = ({
       testID={testID}
       onPress={debounce(
         async () => {
+          // TODO: Allow for a click outside of the confirmation modal to close it.
           await Unifier.utils.haptic();
           setLoading(true);
+
           try {
+            // If a confirmation is required, and the confirmation modal is not currently open,
+            // open it
             if (withConfirmation && !showConfirmation) {
               setShowConfirmation(true);
-            } else if (onClick) {
+            } else if (!withConfirmation && onClick) {
+              // If a confirmation is not required, perform the action.
               await onClick();
             }
           } catch (error) {

package/src/Common.ts

@@ -11,18 +11,7 @@ import {
   FontAwesome6SolidNames,
 } from "./CommonIconTypes";
 
-export interface AccordionProps {
-  /**
-   * The content to be displayed inside the accordion.
-   */
-  children: React.ReactNode;
-
-  /**
-   * If true, an information modal will be included.
-   * @default false
-   */
-  includeInfoModal?: boolean;
-
+export interface InfoModalIconProps {
   /**
    * The content of the information modal.
    */
@@ -42,6 +31,19 @@ export interface AccordionProps {
    * The title of the information modal.
    */
   infoModalTitle?: ModalProps["title"];
+}
+
+export interface AccordionProps extends InfoModalIconProps {
+  /**
+   * The content to be displayed inside the accordion.
+   */
+  children: React.ReactNode;
+
+  /**
+   * If true, an information modal will be included.
+   * @default false
+   */
+  includeInfoModal?: boolean;
 
   /**
    * If true, the accordion will be collapsed.
@@ -1916,6 +1918,69 @@ export interface PaginationProps {
   totalPages: number;
 }
 
+/**
+ * Data Table
+ */
+export type DataTableCellData = {
+  value: any;
+  highlight?: SurfaceColor;
+  textSize?: "sm" | "md" | "lg";
+};
+
+export type DataTableCustomComponentMap = Record<
+  string,
+  React.ComponentType<{column: DataTableColumn; cellData: DataTableCellData}>
+>;
+export interface DataTableColumn {
+  title: string;
+  columnType: "text" | "number" | "date" | "boolean" | string;
+  width: number;
+  highlight?: SurfaceColor;
+  sortable?: boolean;
+  infoModalText?: string;
+}
+
+export interface DataTableProps {
+  data: {value: any; highlight?: SurfaceColor; textSize?: "sm" | "md" | "lg"}[][];
+  columns: DataTableColumn[];
+  alternateRowBackground?: boolean;
+  totalPages?: number;
+  page?: number;
+  setPage?: (page: number) => void;
+  pinnedColumns?: number;
+  sortColumn?: ColumnSortInterface;
+  setSortColumn?: (sortColumn?: ColumnSortInterface) => void;
+  rowHeight?: number;
+  defaultTextSize?: "sm" | "md" | "lg";
+  /**
+   * When tapping the eye icon, a modal is shown with more info about the row.
+   */
+  moreContentComponent?: React.ComponentType<{
+    column: DataTableColumn;
+    rowData: any[];
+    rowIndex: number;
+  }>;
+  // Extra data to pass to the more modal.
+  moreContentExtraData?: any[];
+  // Allows handling of custom column types.
+  customColumnComponentMap?: DataTableCustomComponentMap;
+}
+
+export interface DataTableCellProps {
+  value: any;
+  columnDef: DataTableColumn;
+  colIndex: number;
+  isPinnedHorizontal: boolean;
+  isPinnedRow?: boolean;
+  pinnedColumns: number;
+  columnWidths: number[];
+  backgroundColor: string;
+  highlight?: SurfaceColor;
+  customColumnComponentMap?: DataTableCustomComponentMap;
+  height: number;
+  textSize?: "sm" | "md" | "lg";
+}
+
 export interface TableHeaderProps {
   /**
    * Must be an instance of TableRow.
@@ -1934,7 +1999,7 @@ export interface TableHeaderProps {
   color?: BoxColor;
 }
 
-export interface TableHeaderCellProps {
+export interface TableHeaderCellProps extends InfoModalIconProps {
   /**
    * The content of the table header cell.
    */
@@ -1953,6 +2018,11 @@ export interface TableHeaderCellProps {
    * wrap the text yourself. Alignments will match between the cell and the title.
    */
   title?: string;
+  /**
+   * If provided, a tooltip icon will be shown and a tooltip will be shown when hovering over the
+   * icon.
+   */
+  infoText?: string;
 }
 
 export interface TableRowProps {