@pstdio/ui 0.0.3 → 0.1.0

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

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

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

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

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

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

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

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

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

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