@dmsi/wedgekit-react 0.0.551 → 0.0.552

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

@@ -1,97 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

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

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

@@ -1,138 +0,0 @@
-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";
-import { layoutGroupGap, layoutPaddingX, paddingYUsingLayoutGroupGap } from "../../../classNames";
-
-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(
-        "flex flex-col",
-        "hover:bg-action-100 cursor-pointer list-none",
-        selected ? "bg-action-100" : "bg-background-grouped-primary-normal",
-        layoutGroupGap,
-        layoutPaddingX,
-        paddingYUsingLayoutGroupGap
-      )}
-      onClick={() => openRowDetail(data)}
-    >
-      <Stack sizing="component">
-        <Stack horizontal horizontalMobile items="center" justify="between">
-          {enableRowSelection && (
-            <Stack
-              sizing="component"
-              padding
-              width="fit"
-              style={{ paddingLeft: 0, paddingRight: 8 }}
-              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()}
-            style={{ paddingInline: 0 }}
-          >
-            {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="grid grid-cols-2 gap-2 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>
-          <span className="text-icon-primary-normal">
-            <Icon name="keyboard_arrow_down" />
-          </span>
-        </Stack>
-      )}
-    </li>
-  );
-}

package/src/components/MobileDataGrid/MobileDataGridHeader.tsx

@@ -1,81 +0,0 @@
-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"
-            style={{ borderTopRightRadius: 4, borderTopLeftRadius: 4 }}
-          >
-            {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

@@ -1,42 +0,0 @@
-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="grid grid-cols-2 gap-2 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

@@ -1,68 +0,0 @@
-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

@@ -1,55 +0,0 @@
-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.");
-  }
-}