@terreno/ui 0.0.1

package/src/polyfill.d.ts

@@ -0,0 +1,11 @@
+// export {}; // this file needs to be a module
+
+// declare global {
+//   interface Array<T> {
+//     includes(searchElement: T): boolean;
+//   }
+
+//   interface Object {
+//     values<T>(obj: any): T[];
+//   }
+// }

package/src/table/Table.tsx

@@ -0,0 +1,109 @@
+import React, {Children, type ReactElement, useEffect} from "react";
+import {ScrollView} from "react-native";
+import type {DimensionValue} from "react-native/Libraries/StyleSheet/StyleSheetTypes";
+
+import {Box} from "../Box";
+import type {ColumnSortInterface, TableProps, TableRowProps} from "../Common";
+import {Pagination} from "../Pagination";
+import {TableContextProvider} from "./tableContext";
+
+export const Table = ({
+  children,
+  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,
+  stickyHeader = true,
+  sort,
+  page: propsPage,
+  setPage: propsSetPage,
+  totalPages,
+  more,
+  extraControls,
+}: TableProps): React.ReactElement => {
+  const arrayChildren = Children.toArray(children);
+
+  // Check if any of the rows below have a drawerContents prop to see if we need to render space
+  // for the caret.
+  const [sortColumn, setSortColumn] = React.useState<ColumnSortInterface | undefined>(sort);
+  const [page, setPage] = React.useState<number>(propsPage ?? 1);
+  // Check if any of the rows below have a drawerContents prop to see if we need to render space
+  // for the caret.
+  const hasDrawerContents = arrayChildren.some((child) => {
+    return (child as ReactElement<TableRowProps>).props?.drawerContents;
+  });
+
+  // Calculate the total width of the table. If the table has only number widths, calculate a
+  // width. Otherwise use 100%.
+  let width: DimensionValue;
+  if (columns.every((column) => typeof column === "number")) {
+    width = columns.reduce((acc, curr) => {
+      return (acc as number) + (curr as number) + 8; // 8 for margin between columns;
+    }, 0) as number;
+    if (hasDrawerContents) {
+      // Size of IconButton + padding is 56
+      width = (width as number) + 56;
+    }
+  } else {
+    width = "100%";
+  }
+
+  // If propsPage changes in the parent, update the local page state.
+  useEffect(() => {
+    if (propsPage && propsPage !== page) {
+      setPage(propsPage);
+    }
+  }, [page, propsPage]);
+
+  const shouldPaginate = more || page > 1;
+
+  return (
+    <TableContextProvider
+      alternateRowBackground={alternateRowBackground}
+      borderStyle={borderStyle}
+      columns={columns}
+      hasDrawerContents={hasDrawerContents}
+      page={page}
+      setSortColumn={setSortColumn}
+      sortColumn={sortColumn}
+      stickyHeader={stickyHeader}
+    >
+      <Box
+        flex="grow"
+        maxWidth="100%"
+        style={{
+          position: "relative",
+        }}
+        width={width}
+      >
+        <ScrollView horizontal style={{maxWidth: "100%", width}}>
+          {/* TODO: Replace table scrollview with flat list */}
+          <ScrollView
+            // nestedScrollEnabled
+            stickyHeaderIndices={stickyHeader ? [0] : undefined}
+            style={{flex: 1, maxHeight, maxWidth: "100%", width}}
+          >
+            {Children.map(
+              children,
+              (child, index) =>
+                Boolean(child) &&
+                React.cloneElement(child as ReactElement<TableRowProps>, {
+                  color: index % 2 === 1 && alternateRowBackground ? "neutralLight" : "base",
+                })
+            )}
+          </ScrollView>
+        </ScrollView>
+      </Box>
+      {Boolean(shouldPaginate && totalPages !== undefined) && (
+        <Box alignItems="center" borderTop="default" direction="row" height={60} paddingX={8}>
+          <Pagination
+            page={propsPage ?? page}
+            setPage={propsSetPage ?? setPage}
+            totalPages={totalPages!}
+          />
+          {Boolean(extraControls) && extraControls}
+        </Box>
+      )}
+    </TableContextProvider>
+  );
+};

package/src/table/TableBadge.tsx

@@ -0,0 +1,46 @@
+import {type FC, useState} from "react";
+import {View} from "react-native";
+
+import {Badge} from "../Badge";
+import type {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={{
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      {isEditing && editingOptions ? (
+        <SelectField onChange={handleChange} options={editingOptions} value={selected} />
+      ) : (
+        <Badge iconName={badgeIconName} secondary status={badgeStatus} value={value} />
+      )}
+    </View>
+  );
+};
+
+TableBadge.displayName = "TableBadge";

package/src/table/TableBoolean.tsx

@@ -0,0 +1,70 @@
+import {type FC, useCallback, useState} from "react";
+import {TouchableOpacity, View, type ViewStyle} from "react-native";
+
+import {CheckBox} from "../CheckBox";
+import type {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}`}
+        aria-label={`Checkbox is currently ${valueString}`}
+        aria-role="checkbox"
+        hitSlop={{bottom: 10, left: 10, right: 10, top: 10}}
+        onPress={handlePress}
+        style={
+          {
+            alignItems: "center",
+            justifyContent: "center",
+          } as ViewStyle
+        }
+      >
+        <CheckBox selected={checked} size="lg" />
+      </TouchableOpacity>
+    );
+  } else {
+    return (
+      <View
+        style={{
+          alignItems: "center",
+          justifyContent: "center",
+          width: "100%",
+        }}
+      >
+        <View
+          accessibilityHint={value ? "Checked icon" : "Unchecked icon"}
+          aria-label={`The checkbox is ${valueString}`}
+          aria-role="image"
+          style={{
+            alignItems: "center",
+            backgroundColor: value ? theme.surface.successLight : "transparent",
+            borderRadius: 16,
+            height: 32,
+            justifyContent: "center",
+            width: 32,
+          }}
+        >
+          <Icon color={value ? "success" : "error"} iconName={value ? "check" : "x"} />
+        </View>
+      </View>
+    );
+  }
+};
+
+TableBoolean.displayName = "TableBoolean";

package/src/table/TableDate.tsx

@@ -0,0 +1,38 @@
+import {DateTime} from "luxon";
+import {type FC, useState} from "react";
+import {Text} from "react-native";
+
+import type {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/table/TableHeader.tsx

@@ -0,0 +1,20 @@
+import type React from "react";
+
+import {Box} from "../Box";
+import type {TableHeaderProps} from "../Common";
+import {TableRow} from "./TableRow";
+
+/**
+ * Use TableHeader to group the header content in Table.
+ */
+export const TableHeader = ({
+  children,
+  display = "tableHeaderGroup",
+  color,
+}: TableHeaderProps): React.ReactElement => {
+  return (
+    <Box color={color ?? "base"} display={display === "visuallyHidden" ? "none" : "flex"}>
+      <TableRow headerRow>{children}</TableRow>
+    </Box>
+  );
+};

package/src/table/TableHeaderCell.tsx

@@ -0,0 +1,94 @@
+// TableHeaderCell.tsx
+import {FontAwesome6} from "@expo/vector-icons";
+import {type ReactElement, useCallback} from "react";
+import {View} from "react-native";
+
+import {Box} from "../Box";
+import type {AlignItems, TableHeaderCellProps} from "../Common";
+import {useTheme} from "../Theme";
+import {TableTitle} from "./TableTitle";
+import {useTableContext} from "./tableContext";
+
+/**
+ * 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?.(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,
+              height: 16,
+              justifyContent: "center",
+              width: 16,
+            }}
+          >
+            <FontAwesome6
+              color={theme.text.inverted}
+              name={sort === "asc" ? "arrow-down" : "arrow-up"}
+              selectable={undefined}
+              size={10}
+              solid
+            />
+          </View>
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/table/TableIconButton.tsx

@@ -0,0 +1,61 @@
+// accessibility hint handled in IconButton.tsx
+
+import type {FC} from "react";
+import {View} from "react-native";
+
+import type {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;
+    }
+  > = {
+    drawerClose: {
+      accessibilityHint: "Close Drawer",
+      accessibilityLabel: "Close Drawer for more Data",
+      iconName: "chevron-up",
+      variant: "secondary",
+    },
+    drawerOpen: {
+      accessibilityHint: "Open Drawer",
+      accessibilityLabel: "Open Drawer for more Data",
+      iconName: "chevron-down",
+      variant: "muted",
+    },
+    edit: {
+      accessibilityHint: "Edit row",
+      accessibilityLabel: "Edit",
+      iconName: "pen-to-square",
+      variant: "muted",
+    },
+    insert: {
+      accessibilityHint: "Insert Data",
+      accessibilityLabel: "Insert Data",
+      iconName: "plus",
+      variant: "primary",
+    },
+    saveAndClose: {
+      accessibilityHint: "Save and close row",
+      accessibilityLabel: "Save and close",
+      iconName: "check",
+      variant: "secondary",
+    },
+  };
+
+  return (
+    <View style={{alignItems: "center", justifyContent: "center", width: "100%"}}>
+      <IconButton
+        accessibilityLabel={iconButtonMap[tableIconButtonName].accessibilityLabel}
+        iconName={iconButtonMap[tableIconButtonName].iconName}
+        onClick={onClick}
+        variant={iconButtonMap[tableIconButtonName].variant}
+      />
+    </View>
+  );
+};

package/src/table/TableNumber.tsx

@@ -0,0 +1,29 @@
+import type {FC} from "react";
+import {Text} from "react-native";
+
+import type {TableNumberProps} from "../Common";
+import {useTheme} from "../Theme";
+
+// TODO: Implement isEditing to TableNumber
+export const TableNumber: FC<TableNumberProps> = ({isEditing, value, align = "right"}) => {
+  const {theme} = useTheme();
+
+  if (isEditing) {
+    console.warn("isEditing is not implemented yet.");
+  }
+
+  return (
+    <Text
+      style={{
+        color: theme.text.primary,
+        fontFamily: "text",
+        fontSize: 14,
+        textAlign: align,
+      }}
+    >
+      {value}
+    </Text>
+  );
+};
+
+TableNumber.displayName = "TableNumber";

package/src/table/TableRow.tsx

@@ -0,0 +1,67 @@
+import React, {Children, useRef} from "react";
+
+import {Box} from "../Box";
+import type {TableRowProps} from "../Common";
+import {IconButton} from "../IconButton";
+import {useTableContext} from "./tableContext";
+
+const TableCell = ({children, index}: {children: React.ReactNode; index: number}) => {
+  const {columns} = useTableContext();
+  return (
+    <Box justifyContent="center" marginRight={2} paddingX={3} paddingY={4} width={columns[index]}>
+      {children}
+    </Box>
+  );
+};
+
+/**
+ * Use TableRow to define a row in Table.
+ */
+export const TableRow = ({
+  children,
+  headerRow = false,
+  expanded,
+  drawerContents,
+  color = "base",
+}: TableRowProps): React.ReactElement => {
+  const [isExpanded, setIsExpanded] = React.useState(expanded || false);
+  const {hasDrawerContents} = useTableContext();
+  const rowRef = useRef<typeof Box>(null);
+
+  const border = {__style: {borderBottom: `${headerRow ? 2 : 1}px solid #e0e0e0`}};
+
+  return (
+    <Box color={color} dangerouslySetInlineStyle={border} ref={rowRef} width="100%">
+      <Box direction="row" paddingY={1} width="100%">
+        {Boolean(drawerContents) && (
+          <TableCell index={-1}>
+            {/* TODO: The expand table button doesn't exactly line up with the designs */}
+            <IconButton
+              accessibilityHint="press to expand"
+              accessibilityLabel="expand"
+              iconName={isExpanded ? "chevron-up" : "chevron-down"}
+              onClick={() => {
+                setIsExpanded(!isExpanded);
+              }}
+              variant="secondary"
+            />
+          </TableCell>
+        )}
+        {/* Still render a blank space so the columns line up. */}
+        {Boolean(hasDrawerContents && !drawerContents) && (
+          <TableCell index={-1}>
+            <Box width={32} />
+          </TableCell>
+        )}
+        {Children.map(children, (child, index) => (
+          <TableCell index={index}>{child}</TableCell>
+        ))}
+      </Box>
+      {Boolean(isExpanded) && (
+        <Box paddingX={2} width="100%">
+          {drawerContents}
+        </Box>
+      )}
+    </Box>
+  );
+};

package/src/table/TableText.tsx

@@ -0,0 +1,29 @@
+import type {FC} from "react";
+import {Text} from "react-native";
+
+import type {TableTextProps} from "../Common";
+import {useTheme} from "../Theme";
+
+// TODO: Implement isEditing to TableText
+export const TableText: FC<TableTextProps> = ({isEditing, value, align}) => {
+  const {theme} = useTheme();
+
+  if (isEditing) {
+    console.warn("isEditing is not implemented yet.");
+  }
+
+  return (
+    <Text
+      style={{
+        color: theme.text.primary,
+        fontFamily: "text",
+        fontSize: 14,
+        textAlign: align,
+      }}
+    >
+      {value}
+    </Text>
+  );
+};
+
+TableText.displayName = "TableText";

package/src/table/TableTitle.tsx

@@ -0,0 +1,31 @@
+import type {FC} from "react";
+import {Text} from "react-native";
+
+import type {TableTitleProps} from "../Common";
+import {useTheme} from "../Theme";
+
+export const TableTitle: FC<TableTitleProps> = ({title, align = "left"}) => {
+  const {theme} = useTheme();
+  return (
+    // No hint needed for a title.
+    <Text
+      aria-label={`Table title: ${title}`}
+      aria-role="header"
+      ellipsizeMode="tail" // ensures that the text is clipped at the end of the line for all platforms
+      numberOfLines={3}
+      style={{
+        color: theme.text.primary,
+        flexWrap: "wrap",
+        fontFamily: "text",
+        fontSize: 10,
+        fontWeight: "700",
+        lineHeight: 16,
+        overflow: "hidden",
+        textAlign: align,
+        textTransform: "uppercase",
+      }}
+    >
+      {title}
+    </Text>
+  );
+};

package/src/table/tableContext.tsx

@@ -0,0 +1,67 @@
+import type React from "react";
+import {type Context, createContext, useContext} from "react";
+
+import type {TableContextProviderProps, TableContextType} from "../Common";
+
+const TableContext: Context<TableContextType> = createContext<TableContextType>({
+  alternateRowBackground: true,
+  borderStyle: "sm",
+  columns: [],
+  hasDrawerContents: false,
+  page: 1,
+  setSortColumn: () => {},
+  sortColumn: undefined,
+  stickyHeader: true,
+});
+
+export const {Provider} = TableContext;
+
+export const TableContextProvider = ({
+  children,
+  columns,
+  hasDrawerContents,
+  sortColumn,
+  setSortColumn,
+  stickyHeader,
+  borderStyle,
+  alternateRowBackground,
+  page,
+}: TableContextProviderProps): React.ReactElement<typeof Provider> => {
+  return (
+    <Provider
+      value={{
+        alternateRowBackground,
+        borderStyle,
+        columns,
+        hasDrawerContents,
+        page,
+        setSortColumn,
+        sortColumn,
+        stickyHeader,
+      }}
+    >
+      {children}
+    </Provider>
+  );
+};
+
+export function useTableContext(): TableContextType {
+  const {
+    columns,
+    hasDrawerContents,
+    setSortColumn,
+    sortColumn,
+    stickyHeader,
+    alternateRowBackground,
+    borderStyle,
+  } = useContext(TableContext);
+  return {
+    alternateRowBackground,
+    borderStyle,
+    columns,
+    hasDrawerContents,
+    setSortColumn,
+    sortColumn,
+    stickyHeader,
+  };
+}