@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/src/components/MobileDataGrid/ColumnSelector/index.tsx

@@ -0,0 +1,97 @@
+import { useCallback, useRef, useState } from "react";
+import { Button, Icon, Menu } from "../..";
+import { Checkbox, MenuOption } from "../..";
+import { useGridContext } from "../GridContextProvider/useGridContext";
+
+export function ColumnSelector<T>() {
+  const context = useGridContext<T>();
+  const ref = useRef<HTMLDivElement>(null);
+  const [show, setShow] = useState(false);
+  const {
+    columns,
+    id,
+    testid,
+    visibleColumns,
+    numberOfColumnsToShow,
+    primaryKey,
+    resetColumnVisibility,
+    dispatch,
+  } = context;
+
+  const toggleColumnVisibility = useCallback(
+    (index: number, visible: boolean) => {
+      dispatch({ type: "UPDATE", index, payload: { meta: { visible } } });
+    },
+    [dispatch],
+  );
+
+  return (
+    <div
+      id={id ? `${id}-column-selector` : undefined}
+      data-testid={testid}
+      className="text-text-secondary-normal border-l border-brand-200 p-mobile-container-padding"
+      ref={ref}
+    >
+      <Button
+        id={id ? `${id}-button` : undefined}
+        testid={testid ? `${testid}-button` : undefined}
+        onClick={() => setShow((prev) => !prev)}
+        variant="navigation"
+        iconOnly
+        size={24}
+        leftIcon={<Icon name="tune" />}
+      ></Button>
+      <Menu
+        id={id ? `${id}-menu` : undefined}
+        testid={testid ? `${testid}-menu` : undefined}
+        positionTo={ref}
+        position="bottom-right"
+        show={show}
+        setShow={setShow}
+        calculateMinMaxHeight
+      >
+        <Button
+          id={id ? `${id}-reset-button` : undefined}
+          testid={testid ? `${testid}-reset-button` : undefined}
+          variant="tertiary"
+          onClick={() => {
+            resetColumnVisibility();
+            setShow(false);
+          }}
+        >
+          Reset to default
+        </Button>
+        {columns
+          .filter((x) => x.meta?.inVisibilityMenu)
+          .map((column) => (
+            <MenuOption
+              key={id ? `${id}-option-${column.id}` : undefined}
+              testid={testid ? `${testid}-option-${column.id}` : undefined}
+            >
+              <Checkbox
+                id={id ? `${id}-checkbox-${column.id}` : undefined}
+                testid={testid ? `${testid}-checkbox-${column.id}` : undefined}
+                label={column.header?.toString()}
+                checked={
+                  !!column.meta?.visible || column.id === String(primaryKey)
+                }
+                disabled={
+                  (typeof numberOfColumnsToShow !== "undefined" &&
+                    // account for header+link occupying one slot
+                    visibleColumns.length >= numberOfColumnsToShow - 1 &&
+                    column.meta?.visible !== true) ||
+                  column.id === String(primaryKey)
+                }
+                onChange={(e) => {
+                  toggleColumnVisibility(
+                    columns.findIndex(({ id }) => id === column.id),
+                    e.target.checked,
+                  );
+                }}
+              />
+            </MenuOption>
+          ))}
+      </Menu>
+    </div>
+  );
+}

package/src/components/MobileDataGrid/GridContextProvider/GridContext.tsx

@@ -0,0 +1,25 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { createContext, Dispatch } from "react";
+import { Action } from "../dataGridReducer";
+
+export type GridContextType<T = unknown> = {
+  columns: ColumnDef<T>[];
+  selectedRowIds: (string | number)[];
+  data: T[];
+  dispatch: Dispatch<Action<T>>;
+  getId: (data: T) => string | number | undefined;
+  resetColumnVisibility: () => void;
+  handleRowSelect: (item: T) => void;
+  handleRowSelectAll: () => void;
+  id?: string;
+  testid?: string;
+  numberOfColumnsToShow?: number;
+  visibleColumns: ColumnDef<T>[];
+  primaryKey?: keyof T;
+  isRowDetailOpen: boolean;
+  currentRow: T | null;
+  openRowDetail: (row: T) => void;
+  closeRowDetail: () => void;
+};
+
+export const GridContext = createContext<GridContextType | null>(null);

package/src/components/MobileDataGrid/GridContextProvider/index.tsx

@@ -0,0 +1,132 @@
+import { useCallback, useMemo, useReducer, useState } from "react";
+import { dataGridReducer } from "../dataGridReducer";
+import { GridContext, GridContextType } from "./GridContext";
+import { ColumnDef } from "@tanstack/react-table";
+
+type GridContextProps<T> = {
+  initialColumns: ColumnDef<T>[];
+  data: T[];
+  getId: (data: T) => string | number | undefined;
+  id?: string;
+  testid?: string;
+  children?: React.ReactNode;
+  onRowSelect?: (row: T, selectedIds: (string | number)[]) => void;
+  numberOfColumnsToShow?: number;
+  primaryKey?: keyof T;
+};
+
+export function GridContextProvider<T>(props: GridContextProps<T>) {
+  const {
+    initialColumns,
+    id,
+    testid,
+    children,
+    data,
+    numberOfColumnsToShow,
+    primaryKey,
+    getId,
+    onRowSelect,
+  } = props;
+  const [columns, dispatch] = useReducer(dataGridReducer<T>, initialColumns);
+  const [selectedRowIds, setSelectedRowIds] = useState<(string | number)[]>([]);
+  const [currentRow, setCurrentRow] = useState<T | null>(null);
+
+  const resetColumnVisibility = useCallback(() => {
+    // use initialColumns' meta?.visible data in columns.
+    const newColumns = columns.map((column) => {
+      const initialColumn = initialColumns.find((c) => c.id === column.id);
+      return {
+        ...column,
+        meta: {
+          ...column.meta,
+          visible: initialColumn?.meta?.visible,
+        },
+      };
+    });
+    dispatch({ type: "SET", payload: newColumns });
+  }, [columns, initialColumns]);
+
+  const handleRowSelect = useCallback(
+    (item: T) => {
+      const rowId = getId(item) ?? "";
+      if (!rowId) return;
+      const nextSelected = selectedRowIds.includes(rowId)
+        ? selectedRowIds.filter((id) => id !== rowId)
+        : [...selectedRowIds, rowId];
+
+      setSelectedRowIds(nextSelected);
+      if (onRowSelect) onRowSelect(item, nextSelected);
+    },
+    [getId, onRowSelect, selectedRowIds],
+  );
+
+  const handleRowSelectAll = useCallback(() => {
+    setSelectedRowIds((prev) => {
+      if (prev.length === data.length) {
+        // Select none
+        return [];
+      }
+      // Select all
+      return data.map(getId).filter((id) => id !== undefined);
+    });
+  }, [data, getId]);
+
+  const openRowDetail = useCallback((row: T) => {
+    setCurrentRow(row);
+  }, []);
+
+  const closeRowDetail = useCallback(() => {
+    setCurrentRow(null);
+  }, []);
+
+  const visibleColumns = useMemo(() => {
+    // header+link counts as the first column when limiting
+    const effectiveLimit =
+      typeof numberOfColumnsToShow === "number"
+        ? Math.max(numberOfColumnsToShow - 1, 0)
+        : undefined;
+    if (primaryKey) {
+      const pkColumn = columns.find((col) => col.id === String(primaryKey));
+      const otherColumns = columns.filter(
+        (col) => col.id !== String(primaryKey),
+      );
+      const orderedColumns = pkColumn
+        ? [pkColumn, ...otherColumns]
+        : [...otherColumns];
+      return orderedColumns
+        .filter((x) => x.meta?.visible !== false)
+        .slice(0, effectiveLimit);
+    }
+    return columns
+      .filter((x) => x.meta?.visible !== false)
+      .slice(0, effectiveLimit);
+  }, [columns, numberOfColumnsToShow, primaryKey]);
+
+  return (
+    <GridContext.Provider
+      value={
+        {
+          columns,
+          testid,
+          id,
+          data,
+          selectedRowIds,
+          visibleColumns,
+          numberOfColumnsToShow,
+          primaryKey,
+          dispatch,
+          getId,
+          resetColumnVisibility,
+          handleRowSelect,
+          handleRowSelectAll,
+          isRowDetailOpen: !!currentRow,
+          currentRow,
+          openRowDetail,
+          closeRowDetail,
+        } as GridContextType<unknown> | null
+      }
+    >
+      {children}
+    </GridContext.Provider>
+  );
+}

package/src/components/MobileDataGrid/GridContextProvider/useGridContext.ts

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { GridContext, GridContextType } from "./GridContext";
+
+export function useGridContext<T>() {
+  const ctx = useContext(GridContext) as GridContextType<T> | null;
+  if (!ctx) {
+    throw new Error("useGridContext must be used within GridContextProvider");
+  }
+  return ctx;
+}

package/src/components/MobileDataGrid/MobileDataGridCard/MobileDataGridColumn.tsx

@@ -0,0 +1,20 @@
+import { Paragraph } from "../../Paragraph";
+import { ColumnDef } from "@tanstack/react-table";
+
+export function MobileDataGridColumn<T extends Record<string, unknown>>(props: {
+  column: ColumnDef<T>;
+  data: T;
+}) {
+  const { column, data } = props;
+
+  return (
+    <div className="mb-2 grid grid-cols-2 gap-2 px-3 flex-1">
+      <Paragraph color="text-secondary-normal" className="text-left">
+        {column.header?.toString()}:
+      </Paragraph>{" "}
+      {column.id && data[column.id]
+        ? (data[column.id] as React.ReactNode)
+        : null}
+    </div>
+  );
+}

package/src/components/MobileDataGrid/MobileDataGridCard/index.tsx

@@ -0,0 +1,129 @@
+import { Icon } from "../../Icon";
+import { Paragraph } from "../../Paragraph";
+import { Stack } from "../../Stack";
+import { useGridContext } from "../GridContextProvider/useGridContext";
+import { Checkbox } from "../../Checkbox";
+import clsx from "clsx";
+import { MobileDataGridColumn } from "./MobileDataGridColumn";
+import { Subheader } from "../../Subheader";
+import { RowActions } from "../types";
+
+export function MobileDataGridCard<T extends Record<string, unknown>>({
+  renderLink,
+  renderChevron = true,
+  data,
+  enableRowSelection,
+  selected,
+  rowActions,
+}: {
+  renderLink?: (data: T) => React.ReactNode;
+  renderChevron?: boolean;
+  data: T;
+  enableRowSelection?: boolean;
+  selected?: boolean;
+  rowActions?: RowActions<T>;
+}) {
+  const context = useGridContext<T>();
+  const { id, testid, visibleColumns, getId, handleRowSelect, openRowDetail } =
+    context;
+
+  return (
+    <li
+      id={id ? `${id}-card-${getId(data)}` : undefined}
+      data-testid={testid ? `${testid}-card-${getId(data)}` : undefined}
+      className={clsx(
+        "hover:bg-action-100 cursor-pointer list-none",
+        selected ? "bg-action-100" : "bg-background-grouped-primary-normal",
+      )}
+      onClick={() => openRowDetail(data)}
+    >
+      <Stack sizing="component">
+        <Stack horizontal horizontalMobile items="center" justify="between">
+          {enableRowSelection && (
+            <Stack
+              sizing="component"
+              padding
+              width="fit"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <Checkbox
+                id={id ? `${id}-${getId(data)}-select-checkbox` : undefined}
+                testid={
+                  testid
+                    ? `${testid}-${getId(data)}-select-checkbox`
+                    : undefined
+                }
+                checked={selected}
+                onChange={() => handleRowSelect(data)}
+              />
+            </Stack>
+          )}
+          <Stack
+            sizing="component"
+            padding
+            onClick={(e) => e.stopPropagation()}
+          >
+            {renderLink ? (
+              renderLink(data)
+            ) : (
+              <Subheader>
+                {String(data[context.primaryKey as string] ?? "")}
+              </Subheader>
+            )}
+          </Stack>
+          <Stack
+            horizontal
+            horizontalMobile
+            items="center"
+            justify="end"
+            sizing="component"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {rowActions &&
+              (typeof rowActions === "function"
+                ? rowActions(data)
+                : rowActions)}
+          </Stack>
+        </Stack>
+
+        <Stack sizing="layout-group">
+          {visibleColumns
+            .filter((x) => x.meta?.visible !== false && !x.id?.startsWith("__"))
+            .map((column, index) =>
+              column.meta?.useCustomRenderer &&
+              column.meta.mobileCell &&
+              column.id ? (
+                <div
+                  key={`${column.id}-${index}`}
+                  className="mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1"
+                >
+                  <Paragraph
+                    color="text-secondary-normal"
+                    className="text-left"
+                  >
+                    {column.header?.toString()}:
+                  </Paragraph>{" "}
+                  <column.meta.mobileCell
+                    column={column}
+                    row={data}
+                    cellValue={data[column.id]}
+                  />
+                </div>
+              ) : (
+                <MobileDataGridColumn
+                  key={`${column.id}-${index}`}
+                  column={column}
+                  data={data}
+                />
+              ),
+            )}
+        </Stack>
+      </Stack>
+      {renderChevron && (
+        <Stack items="center" justify="center" horizontal horizontalMobile>
+          <Icon name="keyboard_arrow_down" />
+        </Stack>
+      )}
+    </li>
+  );
+}

package/src/components/MobileDataGrid/MobileDataGridHeader.tsx

@@ -0,0 +1,80 @@
+import { Checkbox } from "../Checkbox";
+import { Heading3 } from "../Heading";
+import { Stack } from "../Stack";
+import { Theme } from "../Theme";
+import { ColumnSelector } from "./ColumnSelector";
+import { GridContextType } from "./GridContextProvider/GridContext";
+import { useGridContext } from "./GridContextProvider/useGridContext";
+
+export function MobileDataGridHeader<T>({
+  header: Header,
+  enableColumnSelector,
+  enableRowSelection,
+}: {
+  header?: string | ((ctx: GridContextType<T>) => React.ReactNode);
+  enableColumnSelector?: boolean;
+  enableRowSelection?: boolean;
+}) {
+  const ctx = useGridContext<T>();
+  const {
+    id,
+    testid,
+    selectedRowIds,
+    data,
+    primaryKey,
+    columns,
+    handleRowSelectAll,
+  } = ctx;
+
+  if (typeof Header === "undefined" && !primaryKey) return null;
+  if (typeof Header === "function") return <Header {...ctx} />;
+  if (typeof Header === "string" || primaryKey)
+    return (
+      <div
+        id={id ? `${id}-header` : undefined}
+        data-testid={testid ? `${testid}-header` : undefined}
+        className="sticky top-0"
+      >
+        <Theme theme="brand">
+          <Stack
+            horizontal
+            horizontalMobile
+            items="center"
+            justify="between"
+            backgroundColor="background-primary-normal"
+          >
+            {enableRowSelection && (
+              <div className="p-mobile-component-padding border-r border-brand-200 max-w-fit h-full">
+                <Checkbox
+                  id={id ? `${id}-select-all-checkbox` : undefined}
+                  testid={testid ? `${testid}-select-all-checkbox` : undefined}
+                  checked={selectedRowIds.length === data.length}
+                  indeterminate={
+                    !!selectedRowIds.length &&
+                    selectedRowIds.length !== data.length
+                  }
+                  onChange={handleRowSelectAll}
+                />
+              </div>
+            )}
+            <Stack
+              horizontal
+              horizontalMobile
+              items="center"
+              sizing="component"
+              padding
+            >
+              <Heading3 as="span" color="text-primary-normal">
+                {typeof Header === "string"
+                  ? Header
+                  : columns
+                      .find((col) => col.id === primaryKey)
+                      ?.header?.toString()}
+              </Heading3>
+            </Stack>
+            {enableColumnSelector && <ColumnSelector />}
+          </Stack>
+        </Theme>
+      </div>
+    );
+}

package/src/components/MobileDataGrid/RowDetailModalProvider/ModalContent.tsx

@@ -0,0 +1,42 @@
+import { Paragraph } from "../../Paragraph";
+import { Stack } from "../../Stack";
+import { useGridContext } from "../GridContextProvider/useGridContext";
+import { MobileDataGridColumn } from "../MobileDataGridCard/MobileDataGridColumn";
+
+export function ModalContent() {
+  const context = useGridContext<Record<string, unknown>>();
+  const { columns, currentRow } = context;
+
+  if (!currentRow) return null;
+  return (
+    <Stack sizing="layout-group">
+      {columns
+        .filter((x) => !x.id?.startsWith("__"))
+        .map((column, index) =>
+          column.meta?.useCustomRenderer &&
+          column.meta.mobileCell &&
+          column.id ? (
+            <div
+              key={`${column.id}-${index}`}
+              className="mb-2 grid grid-cols-2 gap-2 px-3 items-center flex-1"
+            >
+              <Paragraph color="text-secondary-normal" className="text-left">
+                {column.header?.toString()}:
+              </Paragraph>{" "}
+              <column.meta.mobileCell
+                column={column}
+                row={currentRow}
+                cellValue={currentRow?.[column.id as string]}
+              />
+            </div>
+          ) : (
+            <MobileDataGridColumn
+              key={`${column.id}-${index}`}
+              column={column}
+              data={currentRow}
+            />
+          ),
+        )}
+    </Stack>
+  );
+}

package/src/components/MobileDataGrid/RowDetailModalProvider/index.tsx

@@ -0,0 +1,68 @@
+import { Button } from "../../Button";
+import { Heading2 } from "../../Heading";
+import { Icon } from "../../Icon";
+import { Modal } from "../../Modal";
+import { Stack } from "../../Stack";
+import { useGridContext } from "../GridContextProvider/useGridContext";
+import { ModalContent } from "./ModalContent";
+
+export function RowDetailModalProvider() {
+  const context = useGridContext<Record<string, unknown>>();
+  const {
+    id,
+    testid,
+    isRowDetailOpen,
+    currentRow,
+    primaryKey,
+    closeRowDetail,
+  } = context;
+
+  // TODO: implement modal UI later
+  // Also verify if modal is opening in orders screen.doesn't seem to work in storybooks
+  return (
+    <Modal
+      fixedHeightScrolling
+      open={isRowDetailOpen}
+      onClose={closeRowDetail}
+      hideCloseIcon
+      size="medium"
+      className="!p-0"
+      headerIcon={
+        <Stack
+          horizontal
+          horizontalMobile
+          items="center"
+          justify="between"
+          width="full"
+        >
+          <Heading2>
+            {(currentRow?.[primaryKey ?? "id"] as string | undefined) ??
+              "Grid Detail"}
+          </Heading2>
+          <Button
+            id={id ? `${id}-open-in-new-button` : undefined}
+            testid={testid ? `${testid}-open-in-new-button` : undefined}
+            iconOnly
+            variant="tertiary"
+            onClick={closeRowDetail}
+            leftIcon={
+              <span className="text-icon-primary-normal contents">
+                <Icon name="open_in_new" size={24} />
+              </span>
+            }
+          />
+        </Stack>
+      }
+      customActions={
+        <Button onClick={closeRowDetail} className="w-full">
+          Close
+        </Button>
+      }
+      showButtons
+    >
+      <div className="bg-white max-h-full flex flex-col flex-grow-1">
+        <ModalContent />
+      </div>
+    </Modal>
+  );
+}

package/src/components/MobileDataGrid/dataGridReducer.ts

@@ -0,0 +1,55 @@
+import { ColumnDef } from "@tanstack/react-table";
+
+export type Action<T> =
+  | {
+      payload: ColumnDef<T>[];
+      type: "SET";
+    }
+  | {
+      type: "INSERT";
+      pos: "LEADING" | "TRAILING";
+      payload: ColumnDef<T>;
+    }
+  | { type: "INSERT"; pos: "INDEX"; index: number; payload: ColumnDef<T> }
+  | {
+      type: "UPDATE";
+      index?: number;
+      id?: string | number;
+      payload: Partial<ColumnDef<T>>;
+    };
+export function dataGridReducer<T>(
+  state: ColumnDef<T>[],
+  action: Action<T>,
+): ColumnDef<T>[] {
+  const { type, payload } = action;
+
+  let itemIndex: number | null = null;
+  if (action.type === "INSERT" && action.pos === "INDEX")
+    itemIndex = action.index;
+  if (action.type === "UPDATE")
+    itemIndex =
+      action.index ??
+      state.filter(({ id }) => !!id).findIndex(({ id }) => id === action.id);
+  switch (type) {
+    case "SET":
+      return [...payload];
+    case "UPDATE":
+      if (typeof itemIndex !== "number" || itemIndex < 0)
+        throw new Error("action.(id | index) must be provided.");
+
+      return [
+        ...state.slice(0, itemIndex),
+        {
+          ...state[itemIndex],
+          ...payload,
+          meta: {
+            ...(state[itemIndex].meta ?? {}),
+            ...(payload.meta ?? {}),
+          },
+        },
+        ...state.slice(itemIndex + 1),
+      ] as ColumnDef<T>[];
+    default:
+      throw new Error("Action type not implemented.");
+  }
+}