ferns-ui 1.2.2 → 1.2.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/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 {