@alepha/ui 0.16.2 → 0.17.1

package/src/core/components/table/DataTableToolbar.tsx

@@ -1,7 +1,12 @@
 import { Badge, Divider, Flex } from "@mantine/core";
-import { IconRefresh, IconX } from "@tabler/icons-react";
+import {
+  IconClipboard,
+  IconDownload,
+  IconRefresh,
+  IconX,
+} from "@tabler/icons-react";
 import type { TObject } from "alepha";
-import { isValidElement, type ReactNode } from "react";
+import { isValidElement, type ReactNode, useCallback } from "react";
 import { isComponentType } from "../../helpers/isComponentType.ts";
 import ActionButton, { type ActionProps } from "../buttons/ActionButton.tsx";
 import ColumnPicker from "./ColumnPicker.tsx";
@@ -14,6 +19,27 @@ import type {
   FilterVisibility,
 } from "./types.ts";
 
+// ─────────────────────────────────────────────────────────────────────────────
+
+const escapeCsvField = (value: string): string => {
+  if (value.includes(",") || value.includes('"') || value.includes("\n")) {
+    return `"${value.replace(/"/g, '""')}"`;
+  }
+  return value;
+};
+
+const extractText = (node: ReactNode): string => {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(extractText).join("");
+  if (typeof node === "object" && "props" in node) {
+    return extractText((node as any).props.children);
+  }
+  return "";
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+
 export interface DataTableToolbarProps<
   T extends object,
   Filters extends TObject,
@@ -26,6 +52,8 @@ export interface DataTableToolbarProps<
   onFilterVisibilityChange: (visibility: FilterVisibility) => void;
   actions?: Array<ActionProps & { label?: ReactNode }>;
   onRefresh?: () => void;
+  items: T[];
+  withExport?: boolean;
   // Checkbox-related props
   selectedItems?: T[];
   checkboxActions?: Array<CheckboxAction<T>>;
@@ -41,12 +69,59 @@ const DataTableToolbar = <T extends object, Filters extends TObject>({
   onFilterVisibilityChange,
   actions,
   onRefresh,
+  items,
+  withExport,
   selectedItems = [],
   checkboxActions,
   onClearSelection,
 }: DataTableToolbarProps<T, Filters>) => {
   const hasSelection = selectedItems.length > 0;
 
+  const exportableColumns = useCallback(() => {
+    return Object.entries(columns).filter(
+      ([key, col]) => !col.actions && columnVisibility[key] !== false,
+    );
+  }, [columns, columnVisibility]);
+
+  const buildRows = useCallback((): string[][] => {
+    const cols = exportableColumns();
+    return items.map((item) =>
+      cols.map(([_key, col]) => {
+        if (!col.value) return "";
+        const node = col.value(item, {} as any);
+        return extractText(node);
+      }),
+    );
+  }, [items, exportableColumns]);
+
+  const buildCsv = useCallback((): string => {
+    const cols = exportableColumns();
+    const header = cols.map(([_key, col]) => escapeCsvField(col.label));
+    const rows = buildRows().map((row) => row.map(escapeCsvField));
+    return [header.join(","), ...rows.map((r) => r.join(","))].join("\n");
+  }, [exportableColumns, buildRows]);
+
+  const exportCsv = useCallback(() => {
+    const csv = buildCsv();
+    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "export.csv";
+    a.click();
+    URL.revokeObjectURL(url);
+  }, [buildCsv]);
+
+  const exportClipboard = useCallback(async () => {
+    const cols = exportableColumns();
+    const header = cols.map(([_key, col]) => col.label);
+    const rows = buildRows();
+    const text = [header.join("\t"), ...rows.map((r) => r.join("\t"))].join(
+      "\n",
+    );
+    await navigator.clipboard.writeText(text);
+  }, [exportableColumns, buildRows]);
+
   const handleCheckboxAction = async (action: CheckboxAction<T>) => {
     const ctx: CheckboxActionContext<T> = {
       selectedItems,
@@ -70,6 +145,26 @@ const DataTableToolbar = <T extends object, Filters extends TObject>({
           visibility={columnVisibility}
           onVisibilityChange={onColumnVisibilityChange}
         />
+        {withExport && (
+          <ActionButton
+            variant="subtle"
+            icon={IconDownload}
+            menu={{
+              items: [
+                {
+                  label: "Export as CSV",
+                  icon: <IconDownload size={14} />,
+                  onClick: exportCsv,
+                },
+                {
+                  label: "Copy to clipboard",
+                  icon: <IconClipboard size={14} />,
+                  onClick: exportClipboard,
+                },
+              ],
+            }}
+          />
+        )}
 
         {hasSelection && (
           <>
@@ -115,9 +210,7 @@ const DataTableToolbar = <T extends object, Filters extends TObject>({
             props
           ),
         )}
-        <ActionButton icon={IconRefresh} onClick={onRefresh}>
-          Refresh
-        </ActionButton>
+        <ActionButton variant="subtle" icon={IconRefresh} onClick={onRefresh} />
       </Flex>
     </Flex>
   );

package/src/core/components/table/FilterPicker.tsx

@@ -1,12 +1,4 @@
-import {
-  Button,
-  Checkbox,
-  Group,
-  Popover,
-  ScrollArea,
-  Stack,
-  Text,
-} from "@mantine/core";
+import { Checkbox, Flex, Popover, ScrollArea, Text } from "@mantine/core";
 import { IconFilter } from "@tabler/icons-react";
 import type { TObject } from "alepha";
 import { useState } from "react";
@@ -63,9 +55,7 @@ const FilterPicker = ({
     });
   };
 
-  const visibleCount = filterKeys.filter(
-    (key) => visibility[key] !== false,
-  ).length;
+  const visibleCount = filterKeys.filter((key) => visibility[key]).length;
 
   return (
     <Popover
@@ -83,7 +73,13 @@ const FilterPicker = ({
       }}
     >
       <Popover.Target>
-        <ActionButton variant="subtle" icon={IconFilter} />
+        <div>
+          <ActionButton
+            variant="subtle"
+            icon={IconFilter}
+            onClick={() => setOpened((o) => !o)}
+          />
+        </div>
       </Popover.Target>
       <Popover.Dropdown
         bg="transparent"
@@ -93,43 +89,49 @@ const FilterPicker = ({
           backdropFilter: "blur(20px)",
         }}
       >
-        <Stack gap="xs" bg={ui.colors.surface} p="sm" bdrs="sm">
-          <Group justify="space-between">
+        <Flex
+          direction="column"
+          gap="xs"
+          bg={ui.colors.surface}
+          p="sm"
+          bdrs="sm"
+        >
+          <Flex justify="space-between">
             <Text size="sm" fw={500}>
               Filters ({visibleCount}/{filterKeys.length})
             </Text>
-            <Group gap={4}>
-              <Button
+            <Flex gap={4}>
+              <ActionButton
                 size="compact-xs"
                 variant="subtle"
                 onClick={handleShowAll}
               >
                 All
-              </Button>
-              <Button
+              </ActionButton>
+              <ActionButton
                 size="compact-xs"
                 variant="subtle"
                 onClick={handleHideAll}
               >
                 None
-              </Button>
-            </Group>
-          </Group>
+              </ActionButton>
+            </Flex>
+          </Flex>
 
           <ScrollArea.Autosize mah={300}>
-            <Stack gap={4}>
+            <Flex direction="column" gap={4}>
               {filterKeys.map((key) => (
                 <Checkbox
                   key={key}
                   label={getFieldLabel(schema, key)}
-                  checked={visibility[key] !== false}
+                  checked={visibility[key] === true}
                   onChange={(e) => handleToggle(key, e.currentTarget.checked)}
                   size="sm"
                 />
               ))}
-            </Stack>
+            </Flex>
           </ScrollArea.Autosize>
-        </Stack>
+        </Flex>
       </Popover.Dropdown>
     </Popover>
   );

package/src/core/components/table/types.ts

@@ -1,4 +1,4 @@
-import type { TableProps, TableTrProps } from "@mantine/core";
+import type { DrawerProps, TableProps, TableTrProps } from "@mantine/core";
 import type {
   Alepha,
   Async,
@@ -13,6 +13,20 @@ import type { ReactNode } from "react";
 import type { ActionProps } from "../buttons/ActionButton.tsx";
 import type { TypeFormProps } from "../form/TypeForm.tsx";
 
+// -----------------------------------------------------------------------------
+// Constants
+// -----------------------------------------------------------------------------
+
+export const DEFAULT_MAX_VISIBLE_COLUMNS = 8;
+
+// -----------------------------------------------------------------------------
+// Row Action Types
+// -----------------------------------------------------------------------------
+
+export type DataTableRowAction = ActionProps & {
+  visible?: boolean;
+};
+
 // -----------------------------------------------------------------------------
 // Visibility Types
 // -----------------------------------------------------------------------------
@@ -37,7 +51,7 @@ export interface DataTableColumnContext<Filters extends TObject> {
 
 export interface DataTableColumn<T extends object, Filters extends TObject> {
   label: string;
-  value: (item: T, ctx: DataTableColumnContext<Filters>) => ReactNode;
+  value?: (item: T, ctx: DataTableColumnContext<Filters>) => ReactNode;
   fit?: boolean;
   /**
    * Enable sorting for this column. When true, clicking the header will sort by this column.
@@ -48,6 +62,19 @@ export interface DataTableColumn<T extends object, Filters extends TObject> {
    * Follows Alepha sort convention: 'field' for ASC, '-field' for DESC.
    */
   sortKey?: string;
+  /**
+   * Row-level actions rendered as ActionButtons.
+   * Defaults: variant="subtle", size="xs", preventDefault=true.
+   * Use `visible` on each action to conditionally show/hide.
+   */
+  actions?: (
+    item: T,
+    ctx: DataTableColumnContext<Filters>,
+  ) => DataTableRowAction[];
+  /**
+   * Hide this column by default. Users can show it via the column picker.
+   */
+  defaultHidden?: boolean;
 }
 
 // -----------------------------------------------------------------------------
@@ -119,13 +146,28 @@ export interface DataTableProps<T extends object, Filters extends TObject> {
    */
   filters?: TObject;
 
-  panel?: (item: T) => ReactNode;
-  canPanel?: (item: T) => boolean;
+  panel?:
+    | ((item: T) => ReactNode)
+    | {
+        render: (item: T) => ReactNode;
+        can?: (item: T) => boolean;
+      };
+
+  drawer?:
+    | ((item: T) => ReactNode)
+    | {
+        render: (item: T) => ReactNode;
+        can?: (item: T) => boolean;
+        props?: Omit<DrawerProps, "opened" | "onClose" | "children">;
+      };
 
   submitOnInit?: boolean;
   submitEvery?: DurationLike;
 
-  withLineNumbers?: boolean;
+  /**
+   * Enable export button in toolbar (CSV download + clipboard copy).
+   */
+  withExport?: boolean;
 
   /**
    * Enable row selection with checkboxes. When true, a checkbox column is added as the first column.
@@ -133,8 +175,9 @@ export interface DataTableProps<T extends object, Filters extends TObject> {
   withCheckbox?: boolean;
 
   /**
-   * Function to get a unique key for each item. Required when withCheckbox is true.
-   * Used to track selected items across pagination.
+   * Function to get a unique key for each item.
+   * Used to track selected items, panel expansion, and drawer identity.
+   * Falls back to item.id then JSON.stringify if not provided.
    */
   getItemKey?: (item: T) => string;
 
@@ -150,38 +193,10 @@ export interface DataTableProps<T extends object, Filters extends TObject> {
    */
   infinityScroll?: boolean;
 
-  // -------------------------------------------------------------------------------------------------------------------
-  // Column Visibility
-  // -------------------------------------------------------------------------------------------------------------------
-
-  /**
-   * Initial column visibility state. By default, first 10 columns are visible.
-   */
-  defaultColumnVisibility?: ColumnVisibility;
-
-  /**
-   * Maximum number of columns to show by default. Default is 10.
-   */
-  defaultVisibleColumnCount?: number;
-
-  /**
-   * Callback when column visibility changes.
-   */
-  onColumnVisibilityChange?: (visibility: ColumnVisibility) => void;
-
-  // -------------------------------------------------------------------------------------------------------------------
-  // Filter Visibility
-  // -------------------------------------------------------------------------------------------------------------------
-
-  /**
-   * Initial filter visibility state. By default, all filters are visible.
-   */
-  defaultFilterVisibility?: FilterVisibility;
-
   /**
-   * Callback when filter visibility changes.
+   * Filter keys to show by default. Default: none (empty array).
    */
-  onFilterVisibilityChange?: (visibility: FilterVisibility) => void;
+  defaultFilters?: string[];
 
   // -------------------------------------------------------------------------------------------------------------------
   // Mantine Props

package/src/core/components/table/useTableSelection.ts

@@ -0,0 +1,83 @@
+import { useCallback, useMemo, useState } from "react";
+
+export interface UseTableSelectionReturn<T> {
+  selectedItems: T[];
+  allSelected: boolean;
+  someSelected: boolean;
+  toggleItem: (item: T) => void;
+  toggleAll: () => void;
+  clear: () => void;
+  isSelected: (item: T) => boolean;
+}
+
+export const useTableSelection = <T>(
+  items: T[],
+  getItemKey: (item: T) => string,
+  enabled: boolean,
+): UseTableSelectionReturn<T> => {
+  const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set());
+
+  const selectedItems = useMemo(() => {
+    if (!enabled) return [];
+    return items.filter((item) => selectedKeys.has(getItemKey(item)));
+  }, [items, selectedKeys, getItemKey, enabled]);
+
+  const allSelected = useMemo(() => {
+    if (items.length === 0) return false;
+    return items.every((item) => selectedKeys.has(getItemKey(item)));
+  }, [items, selectedKeys, getItemKey]);
+
+  const someSelected = useMemo(() => {
+    if (items.length === 0) return false;
+    const count = items.filter((item) =>
+      selectedKeys.has(getItemKey(item)),
+    ).length;
+    return count > 0 && count < items.length;
+  }, [items, selectedKeys, getItemKey]);
+
+  const toggleItem = useCallback(
+    (item: T) => {
+      const key = getItemKey(item);
+      setSelectedKeys((prev) => {
+        const next = new Set(prev);
+        if (next.has(key)) next.delete(key);
+        else next.add(key);
+        return next;
+      });
+    },
+    [getItemKey],
+  );
+
+  const toggleAll = useCallback(() => {
+    if (allSelected) {
+      setSelectedKeys((prev) => {
+        const next = new Set(prev);
+        for (const item of items) next.delete(getItemKey(item));
+        return next;
+      });
+    } else {
+      setSelectedKeys((prev) => {
+        const next = new Set(prev);
+        for (const item of items) next.add(getItemKey(item));
+        return next;
+      });
+    }
+  }, [allSelected, items, getItemKey]);
+
+  const clear = useCallback(() => setSelectedKeys(new Set()), []);
+
+  const isSelected = useCallback(
+    (item: T) => selectedKeys.has(getItemKey(item)),
+    [selectedKeys, getItemKey],
+  );
+
+  return {
+    selectedItems,
+    allSelected,
+    someSelected,
+    toggleItem,
+    toggleAll,
+    clear,
+    isSelected,
+  };
+};

package/src/core/styles.css

@@ -3,6 +3,7 @@
 @import "@mantine/spotlight/styles.css";
 @import "@mantine/dates/styles.css";
 @import "@mantine/notifications/styles.css";
+@import "@mantine/charts/styles.css";
 @import "./components/buttons/DarkModeButton.css";
 
 :root {

package/src/core/utils/parseInput.ts

@@ -109,6 +109,7 @@ export interface GenericControlProps {
   title?: string;
   description?: string;
   icon?: ReactElement | ((props: { size: number }) => ReactNode);
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
 }
 
 export interface ControlInput {

package/src/demo/components/DemoHome.tsx

@@ -1,4 +1,4 @@
-import { Box, Stack, Text, Title } from "@mantine/core";
+import { Flex, Text, Title } from "@mantine/core";
 import { IconBraces } from "@tabler/icons-react";
 
 const components = [
@@ -13,16 +13,16 @@ const components = [
 
 const DemoHome = () => {
   return (
-    <Stack gap="xl" p="xl">
-      <Box>
+    <Flex direction="column" gap="xl" p="xl">
+      <Flex>
         <Title order={1} mb="xs">
           Component Showcase
         </Title>
         <Text c="dimmed" size="lg">
           Interactive demos and documentation for @alepha/ui components.
         </Text>
-      </Box>
-    </Stack>
+      </Flex>
+    </Flex>
   );
 };