@pstdio/ui 0.0.1

package/src/components/data-table/data-table.stories.tsx

@@ -0,0 +1,209 @@
+import { Badge, Box, Icon as ChakraIcon } from "@chakra-ui/react";
+import {
+  Building2,
+  CalendarClock,
+  CheckCircle2,
+  CreditCard,
+  DollarSign,
+  Factory,
+  FileText,
+  Flame,
+  Globe2,
+  Info,
+} from "lucide-react";
+import { type ReactNode, useState } from "react";
+
+import { DataTable, type DataTableProps, type RowData } from ".";
+
+type StoryFn = () => ReactNode;
+
+interface StoryContext {
+  parameters?: {
+    pageHeight?: string;
+    pagePadding?: string | number;
+  };
+}
+
+interface DataTableStoryContainerProps {
+  args: DataTableProps;
+  height?: string;
+  marginX?: string;
+  maxWidth?: string;
+}
+
+const statusCell = (label: string, colorPalette: string) => ({
+  display: (
+    <Badge colorPalette={colorPalette} variant="subtle" textStyle="label/S/medium" px="xs" py="4px" borderRadius="md">
+      {label}
+    </Badge>
+  ),
+  sortValue: label,
+});
+
+const vendors = ["Northwind Traders", "Fabrikam Logistics", "Contoso Supplies", "Adventure Works"];
+const regions = ["North America", "Europe", "APAC", "LATAM"];
+const departments = ["Finance", "Operations", "Logistics", "Procurement"];
+const priorities = ["Low", "Medium", "High"];
+const paymentMethods = ["Wire", "Card", "ACH", "Check"];
+
+const statusOptions = [
+  { label: "Paid", colorPalette: "green" },
+  { label: "Pending", colorPalette: "yellow" },
+  { label: "Overdue", colorPalette: "red" },
+];
+
+const tableRows: RowData[] = [
+  {
+    id: "inv-001",
+    Invoice: "INV-001",
+    Vendor: vendors[0],
+    "Due Date": "2024-06-12",
+    Amount: 1280.5,
+    Approved: true,
+    Status: statusCell(statusOptions[0].label, statusOptions[0].colorPalette),
+    Region: regions[0],
+    Department: departments[0],
+    Priority: priorities[2],
+    "Payment Method": paymentMethods[0],
+  },
+  {
+    id: "inv-002",
+    Invoice: "INV-002",
+    Vendor: vendors[1],
+    "Due Date": "2024-06-18",
+    Amount: 812.2,
+    Approved: false,
+    Status: statusCell(statusOptions[1].label, statusOptions[1].colorPalette),
+    Region: regions[1],
+    Department: departments[1],
+    Priority: priorities[1],
+    "Payment Method": paymentMethods[1],
+  },
+  {
+    id: "inv-003",
+    Invoice: "INV-003",
+    Vendor: vendors[2],
+    "Due Date": "2024-06-25",
+    Amount: 2640,
+    Approved: true,
+    Status: statusCell(statusOptions[2].label, statusOptions[2].colorPalette),
+    Region: regions[2],
+    Department: departments[2],
+    Priority: priorities[0],
+    "Payment Method": paymentMethods[2],
+  },
+];
+
+const generateTableRows = (count: number) => {
+  const rows: RowData[] = [];
+
+  for (let index = 0; index < count; index++) {
+    const invoiceNumber = index + 1;
+    const invoiceId = invoiceNumber.toString().padStart(4, "0");
+    const statusOption = statusOptions[index % statusOptions.length];
+    const month = String((index % 12) + 1).padStart(2, "0");
+    const day = String((index % 28) + 1).padStart(2, "0");
+    const amount = Number((950 + invoiceNumber * 3.25).toFixed(2));
+    const region = regions[index % regions.length];
+    const department = departments[index % departments.length];
+    const priority = priorities[index % priorities.length];
+    const paymentMethod = paymentMethods[index % paymentMethods.length];
+
+    rows.push({
+      id: `inv-${invoiceId}`,
+      Invoice: `INV-${invoiceId}`,
+      Vendor: vendors[index % vendors.length],
+      "Due Date": `2024-${month}-${day}`,
+      Amount: amount,
+      Approved: invoiceNumber % 2 === 0,
+      Status: statusCell(statusOption.label, statusOption.colorPalette),
+      Region: region,
+      Department: department,
+      Priority: priority,
+      "Payment Method": paymentMethod,
+    });
+  }
+
+  return rows;
+};
+
+const thousandTableRows = generateTableRows(1000);
+
+const columnIconProps = {
+  boxSize: "14px",
+};
+
+const columnIcons: DataTableProps["columnIcons"] = {
+  Invoice: <ChakraIcon as={FileText} {...columnIconProps} />,
+  Vendor: <ChakraIcon as={Factory} {...columnIconProps} />,
+  "Due Date": <ChakraIcon as={CalendarClock} {...columnIconProps} />,
+  Amount: <ChakraIcon as={DollarSign} {...columnIconProps} />,
+  Approved: <ChakraIcon as={CheckCircle2} {...columnIconProps} />,
+  Status: <ChakraIcon as={Info} {...columnIconProps} />,
+  Region: <ChakraIcon as={Globe2} {...columnIconProps} />,
+  Department: <ChakraIcon as={Building2} {...columnIconProps} />,
+  Priority: <ChakraIcon as={Flame} {...columnIconProps} />,
+  "Payment Method": <ChakraIcon as={CreditCard} {...columnIconProps} />,
+};
+
+const withStoryPage = (Story: StoryFn, context: StoryContext) => {
+  const pagePadding = context.parameters?.pagePadding ?? "sm";
+  const pageHeight = context.parameters?.pageHeight;
+
+  return (
+    <Box padding={pagePadding} background="bg" height={pageHeight}>
+      <Story />
+    </Box>
+  );
+};
+
+const DataTableStoryContainer = (props: DataTableStoryContainerProps) => {
+  const { args, maxWidth, height, marginX } = props;
+  const [activeRowId, setActiveRowId] = useState<string | null>(null);
+
+  const handleRowClick = (row: RowData) => {
+    const rowId = row.id;
+
+    if (typeof rowId !== "string") return;
+
+    setActiveRowId(rowId);
+  };
+
+  return (
+    <Box width="100%" maxWidth={maxWidth} height={height} marginX={marginX}>
+      <DataTable {...args} activeRowId={activeRowId} onRowClick={handleRowClick} />
+    </Box>
+  );
+};
+
+const meta = {
+  title: "Components/DataTable",
+  component: DataTable,
+  decorators: [withStoryPage],
+  args: {
+    data: tableRows,
+    hiddenColumns: ["id"],
+    columnIcons,
+  },
+};
+
+export default meta;
+
+export const Default = {
+  render: (args: DataTableProps) => {
+    return <DataTableStoryContainer args={args} maxWidth="960px" height="420px" marginX="auto" />;
+  },
+};
+
+export const FullHeight = {
+  args: {
+    data: thousandTableRows,
+  },
+  parameters: {
+    pagePadding: 0,
+    pageHeight: "100vh",
+  },
+  render: (args: DataTableProps) => {
+    return <DataTableStoryContainer args={args} height="100%" />;
+  },
+};

package/src/components/data-table/data-table.tsx

@@ -0,0 +1,232 @@
+import "./data-table.css";
+
+import { Icon as ChakraIcon, Flex, IconButton, Menu, Portal, Table, Text } from "@chakra-ui/react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+} from "@tanstack/react-table";
+import { ArrowDownAZ, ArrowUpAZ, MoreVertical } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { MenuItem } from "../menu-item";
+import { Tooltip } from "../tooltip";
+import { buildColumns } from "./build-columns";
+import { PaginationFooter } from "./pagination-footer";
+import { SelectionToolbar } from "./selection-toolbar";
+import type { DataTableProps } from "./types";
+
+export const DataTable = (props: DataTableProps) => {
+  const {
+    data,
+    noBorder,
+    fullWidth,
+    onCSVDownload,
+    hiddenColumns,
+    onRowClick,
+    isRowInteractive,
+    activeRowId,
+    columnIcons,
+  } = props;
+  const [sorting, setSorting] = useState<SortingState>([]);
+  const hiddenColumnsSet = new Set(hiddenColumns ?? []);
+  const columnKeys = Object.keys(data[0] || {}).filter((key) => !hiddenColumnsSet.has(key));
+  const columns = buildColumns(data, columnKeys, columnIcons);
+
+  const table = useReactTable({
+    data,
+    columns,
+    defaultColumn: { size: 150, minSize: 40, maxSize: 800 },
+    state: { sorting },
+    columnResizeMode: "onChange",
+    columnResizeDirection: "ltr",
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    enableMultiRowSelection: true,
+    enableRowSelection: true,
+    autoResetAll: true,
+  });
+
+  useEffect(() => {
+    table.setPageSize(30);
+  }, [table]);
+
+  const columnSizeVars = (() => {
+    const headers = table.getFlatHeaders();
+    const colSizes: Record<string, number> = {};
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i]!;
+      colSizes[`--header-${header.id}-size`] = header.getSize();
+      colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+    }
+    return colSizes;
+  })();
+
+  const selectedRows = table.getSelectedRowModel().rows;
+  const allRows = table.getCoreRowModel().rows;
+  const selectedRowIds = selectedRows
+    .map((row) => row.original.id)
+    .filter((id): id is string => typeof id === "string");
+
+  return (
+    <Flex direction="column" height="100%" width="100%">
+      {!!selectedRows.length && (
+        <SelectionToolbar
+          selectedCount={selectedRows.length}
+          totalCount={allRows.length}
+          onClearSelection={() => table.toggleAllRowsSelected(false)}
+          onSelectAll={() => table.toggleAllRowsSelected(true)}
+          onCSVDownload={() => onCSVDownload?.(selectedRowIds)}
+        />
+      )}
+      <Table.ScrollArea height="100%" overflowY="auto" overflowX="auto" maxWidth={"unset"}>
+        <Table.Root
+          className={`data-table${fullWidth ? " full-width" : ""}`}
+          stickyHeader
+          style={{ ...columnSizeVars, width: fullWidth ? "100%" : table.getTotalSize() }}
+        >
+          <Table.Header>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <Table.Row
+                background="bg.muted"
+                key={headerGroup.id}
+                borderRight={noBorder ? "none" : "1px solid"}
+                borderColor="border.muted"
+              >
+                {headerGroup.headers.map((header) => (
+                  <Table.ColumnHeader
+                    textTransform="none"
+                    borderRight="1px solid"
+                    _last={{ borderRight: "none" }}
+                    borderColor="border.muted"
+                    paddingX="xs"
+                    paddingY="2xs"
+                    key={header.id}
+                    overflow={"hidden"}
+                    position="relative"
+                    style={{
+                      width:
+                        fullWidth && headerGroup.headers.indexOf(header) === headerGroup.headers.length - 1
+                          ? undefined
+                          : `calc(var(--header-${header?.id}-size) * 1px)`,
+                    }}
+                  >
+                    <Tooltip content={flexRender(header.column.columnDef.header, header.getContext())}>
+                      <Flex
+                        className="group"
+                        alignItems="center"
+                        justifyContent="space-between"
+                        gap="1"
+                        flex="1"
+                        paddingY="2xs"
+                      >
+                        <Text textStyle="label/S/medium">
+                          {flexRender(header.column.columnDef.header, header.getContext())}
+                        </Text>
+                        {header.column.id !== "rowIndex" && table.getCoreRowModel().rows.length > 1 && (
+                          <Menu.Root>
+                            <Menu.Trigger asChild>
+                              <IconButton
+                                ml="2px"
+                                size="2xs"
+                                aria-label="sort column"
+                                variant="ghost"
+                                visibility="hidden"
+                                _groupHover={{ visibility: "visible" }}
+                              >
+                                <ChakraIcon as={MoreVertical} boxSize="14px" />
+                              </IconButton>
+                            </Menu.Trigger>
+                            <Portal>
+                              <Menu.Positioner>
+                                <Menu.Content zIndex="popover" bg="bg">
+                                  <MenuItem
+                                    onClick={() => header.column.toggleSorting(false)}
+                                    primaryLabel="Sort ascending"
+                                    isDisabled={header.column.getIsSorted() === "asc"}
+                                    leftIcon={ArrowUpAZ}
+                                  />
+                                  <MenuItem
+                                    onClick={() => header.column.toggleSorting(true)}
+                                    primaryLabel="Sort descending"
+                                    isDisabled={header.column.getIsSorted() === "desc"}
+                                    leftIcon={ArrowDownAZ}
+                                  />
+                                  {header.column.getIsSorted() && (
+                                    <MenuItem onClick={() => header.column.clearSorting()} primaryLabel="Clear sort" />
+                                  )}
+                                </Menu.Content>
+                              </Menu.Positioner>
+                            </Portal>
+                          </Menu.Root>
+                        )}
+                        {header.column.getCanResize() && (
+                          <span
+                            {...{
+                              onDoubleClick: () => header.column.resetSize(),
+                              onMouseDown: header.getResizeHandler(),
+                              onTouchStart: header.getResizeHandler(),
+                              className: `resizer ${header.column.getIsResizing() ? "isResizing" : ""}`,
+                            }}
+                          />
+                        )}
+                      </Flex>
+                    </Tooltip>
+                  </Table.ColumnHeader>
+                ))}
+              </Table.Row>
+            ))}
+          </Table.Header>
+          <Table.Body>
+            {table.getRowModel().rows.map((row) => {
+              const rowIsInteractive = onRowClick ? (isRowInteractive?.(row.original) ?? true) : false;
+
+              return (
+                <Table.Row
+                  key={row.id}
+                  cursor={rowIsInteractive ? "pointer" : undefined}
+                  onClick={rowIsInteractive ? () => onRowClick?.(row.original) : undefined}
+                  borderTop={noBorder ? "none" : "1px solid"}
+                  borderBottom={"1px solid"}
+                  borderRight={noBorder ? "none" : "1px solid"}
+                  _last={{ borderBottom: noBorder ? "none" : "1px solid", borderColor: "border.muted" }}
+                  borderColor="border.muted"
+                  background={
+                    activeRowId && typeof row.original.id === "string" && row.original.id === activeRowId
+                      ? "bg.panel"
+                      : "bg"
+                  }
+                  _hover={rowIsInteractive ? { background: "bg.panel" } : undefined}
+                >
+                  {row.getVisibleCells().map((cell, index) => (
+                    <Table.Cell
+                      width="fit-content"
+                      maxWidth={"12rem"}
+                      overflow={"hidden"}
+                      padding="xs"
+                      borderRight="1px solid"
+                      borderColor="border.muted"
+                      _last={{ borderRight: "none" }}
+                      borderBottom="none"
+                      key={cell.id}
+                      textStyle="paragraph/S/regular"
+                      background={index === 0 ? "bg.muted" : "inherit"}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              );
+            })}
+          </Table.Body>
+        </Table.Root>
+      </Table.ScrollArea>
+      {table.getPageCount() > 1 && <PaginationFooter table={table} />}
+    </Flex>
+  );
+};

package/src/components/data-table/helpers.tsx

@@ -0,0 +1,69 @@
+import { Icon as ChakraIcon } from "@chakra-ui/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import { CalendarClock, CheckCircle2, Hash, Type } from "lucide-react";
+import { isValidElement, type ReactElement, type ReactNode } from "react";
+
+import type { ColumnType, DisplayValue, RowData } from "./types";
+
+export const isDisplayValue = (value: unknown): value is DisplayValue =>
+  typeof value === "object" && value !== null && "display" in value;
+
+export const isString = (v: unknown): v is string => typeof v === "string" || v instanceof String;
+export const isNumber = (v: unknown): v is number => typeof v === "number" || v instanceof Number;
+export const isBoolean = (v: unknown): v is boolean => typeof v === "boolean" || v instanceof Boolean;
+
+export const getType = (values: unknown[]): ColumnType => {
+  const comparableValues = values
+    .map((value) => {
+      if (isDisplayValue(value)) return value.sortValue ?? null;
+      if (value instanceof String || value instanceof Number || value instanceof Boolean) return value.valueOf();
+      if (isValidElement(value)) return null;
+      return value;
+    })
+    .filter((value) => value !== null && value !== undefined);
+
+  if (comparableValues.length === 0) return "unknown";
+  if (comparableValues.every((v) => isString(v) && !Number.isNaN(Date.parse(v.toString())))) return "date";
+  if (comparableValues.every((v) => isNumber(v))) return "number";
+  if (comparableValues.every((v) => isBoolean(v))) return "boolean";
+  if (comparableValues.every((v) => isString(v))) return "string";
+  return "unknown";
+};
+
+const headerIconProps = {
+  boxSize: "14px",
+  marginRight: "2px",
+};
+
+export const getIcon = (values: unknown[]): ReactElement | null => {
+  const type = getType(values);
+  if (type === "date") return <ChakraIcon as={CalendarClock} {...headerIconProps} />;
+  if (type === "string") return <ChakraIcon as={Type} {...headerIconProps} />;
+  if (type === "number") return <ChakraIcon as={Hash} {...headerIconProps} />;
+  if (type === "boolean") return <ChakraIcon as={CheckCircle2} {...headerIconProps} />;
+  return null;
+};
+
+export function formatDisplayValue(value: unknown): ReactNode {
+  if (isDisplayValue(value)) return value.display;
+  if (isValidElement(value)) return value;
+
+  if (value instanceof String || value instanceof Number || value instanceof Boolean) {
+    value = value.valueOf();
+  }
+
+  switch (typeof value) {
+    case "boolean":
+      return value ? "TRUE" : "FALSE";
+    case "number":
+      return value;
+    case "object":
+      return value !== null ? JSON.stringify(value) : "-";
+    case "undefined":
+      return "-";
+    default:
+      return value ? String(value) : "-";
+  }
+}
+
+export const columnHelper = createColumnHelper<RowData>();

package/src/components/data-table/index.ts

@@ -0,0 +1,3 @@
+export { DataTable } from "./data-table";
+export { formatDisplayValue, getIcon } from "./helpers";
+export type { DataTableProps, RowData } from "./types";

package/src/components/data-table/pagination-footer.tsx

@@ -0,0 +1,58 @@
+import { Button, Flex, Stack, Text } from "@chakra-ui/react";
+import type { useReactTable } from "@tanstack/react-table";
+
+import { NumberInputField, NumberInputRoot } from "../number-input";
+import type { RowData } from "./types";
+
+export function PaginationFooter({ table }: { table: ReturnType<typeof useReactTable<RowData>> }) {
+  const totalPages = Math.max(table.getPageCount(), 1);
+
+  return (
+    <Flex
+      alignItems="center"
+      justifyContent="space-between"
+      borderTop="1px solid"
+      borderColor={"border.muted"}
+      paddingX="xs"
+    >
+      <Text>{table.getCoreRowModel().rows.length} rows</Text>
+      <Stack alignItems="center" direction="row" justifyContent="flex-end" paddingY="xs">
+        <Button size="xs" onClick={() => table.setPageIndex(0)} disabled={!table.getCanPreviousPage()}>
+          {"<<"}
+        </Button>
+        <Button size="xs" onClick={() => table.previousPage()} disabled={!table.getCanPreviousPage()}>
+          {"<"}
+        </Button>
+        <Button size="xs" onClick={() => table.nextPage()} disabled={!table.getCanNextPage()}>
+          {">"}
+        </Button>
+        <Button
+          size="xs"
+          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+          disabled={!table.getCanNextPage()}
+        >
+          {">>"}
+        </Button>
+        <Flex alignItems="center" height="100%" marginLeft="sm" marginRight="md" gap="xs">
+          <Text>Page</Text>
+          <NumberInputRoot
+            margin="2xs"
+            width="3rem"
+            size="xs"
+            min={1}
+            max={totalPages}
+            value={`${table.getState().pagination.pageIndex + 1}`}
+            onValueChange={(details) => {
+              const next = Number.isNaN(details.valueAsNumber) ? 1 : details.valueAsNumber;
+              const clamped = Math.min(totalPages, Math.max(1, next));
+              table.setPageIndex(clamped - 1);
+            }}
+          >
+            <NumberInputField className="nodrag" />
+          </NumberInputRoot>
+          <Text>of {totalPages}</Text>
+        </Flex>
+      </Stack>
+    </Flex>
+  );
+}

package/src/components/data-table/selection-toolbar.tsx

@@ -0,0 +1,26 @@
+import { Button, Icon as ChakraIcon, Flex, IconButton, Stack, Text } from "@chakra-ui/react";
+
+interface SelectionToolbarProps {
+  selectedCount: number;
+  totalCount: number;
+  onClearSelection: () => void;
+  onSelectAll: () => void;
+  onCSVDownload: () => void;
+}
+
+export function SelectionToolbar(props: SelectionToolbarProps) {
+  const { selectedCount, totalCount, onClearSelection, onSelectAll, onCSVDownload } = props;
+
+  return (
+    <Flex alignItems="center" paddingY="2xs" paddingX="sm">
+      <Stack direction="row" alignItems="center">
+        <IconButton aria-label="clear-selection" onClick={onClearSelection} size="xs">
+          <ChakraIcon boxSize="16px" />
+        </IconButton>
+        <Text>{selectedCount} rows selected</Text>
+        {selectedCount !== totalCount && <Button onClick={onSelectAll}>Select all {totalCount} rows</Button>}
+        <Button onClick={onCSVDownload}>Download CSV</Button>
+      </Stack>
+    </Flex>
+  );
+}

package/src/components/data-table/types.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+export type ColumnType = "boolean" | "date" | "number" | "string" | "unknown";
+
+export type RowData = Record<string, unknown>;
+
+export type DisplayValue = { display: ReactNode; sortValue?: unknown };
+
+export interface DataTableProps {
+  data: RowData[];
+  isReadOnly?: boolean;
+  noBorder?: boolean;
+  fullWidth?: boolean;
+  onCSVUpload?: (csv: string) => Promise<void>;
+  onCSVDownload?: (scenarios: string[]) => void;
+  hiddenColumns?: string[];
+  onRowClick?: (row: RowData) => void;
+  isRowInteractive?: (row: RowData) => boolean;
+  activeRowId?: string | null;
+  columnIcons?: Partial<Record<string, ReactNode>>;
+}

package/src/components/delete-confirmation-modal.stories.tsx

@@ -0,0 +1,46 @@
+import { Box, Button, Stack, Text } from "@chakra-ui/react";
+import type { ReactNode } from "react";
+import { useState } from "react";
+
+import { DeleteConfirmationModal } from "./delete-confirmation-modal";
+
+type StoryFn = () => ReactNode;
+
+const meta = {
+  title: "Components/DeleteConfirmationModal",
+  component: DeleteConfirmationModal,
+  decorators: [
+    (Story: StoryFn) => (
+      <Box minH="320px" padding="sm" background="bg">
+        <Story />
+      </Box>
+    ),
+  ],
+};
+
+export default meta;
+
+export const Default = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(true);
+
+    return (
+      <Stack gap="md">
+        <Text textStyle="paragraph/S/regular" color="fg.muted">
+          Use the button below to reopen the confirmation modal after closing it.
+        </Text>
+        <Button size="sm" variant="outline" onClick={() => setIsOpen(true)}>
+          Open confirmation modal
+        </Button>
+        <DeleteConfirmationModal
+          open={isOpen}
+          onClose={() => setIsOpen(false)}
+          onDelete={() => setIsOpen(false)}
+          headline="Delete pipeline?"
+          notificationText="Deleting this pipeline will remove all versions. This action cannot be undone."
+          buttonText="Delete pipeline"
+        />
+      </Stack>
+    );
+  },
+};