@yuno-payments/dashboard-design-system 2.9.5 → 3.0.0

package/dist/components/organisms/data-table/data-table.d.ts

@@ -1,162 +0,0 @@
-import { ColumnResizeMode } from '@tanstack/react-table';
-import { DataTableActionsConfig, DataTableColumnDef, DataTableTranslations, DataTableLanguage } from './data-table.types';
-import { EmptyProps } from '../../molecules';
-/**
- * Props for the DataTable component
- */
-export interface DataTableProps<TData, TValue> {
-    /**
-     * Column definitions for the table
-     */
-    columns: DataTableColumnDef<TData, TValue>[];
-    /**
-     * Array of data to display in the table
-     */
-    data: TData[];
-    /**
-     * Whether the table is in a loading state
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Configuration for the empty state when no data is available
-     */
-    empty?: EmptyProps;
-    /**
-     * Whether to enable checkbox selection column
-     * @default false
-     */
-    checkboxSelection?: boolean;
-    /**
-     * Controlled row selection state (optional)
-     * If provided, component operates in controlled mode
-     */
-    rowSelection?: import('@tanstack/react-table').RowSelectionState;
-    /**
-     * Callback fired when row selection changes
-     * In controlled mode, you must update the rowSelection prop
-     */
-    onRowSelectionChange?: (rowSelectionState: import('@tanstack/react-table').RowSelectionState, selectedRows: TData[]) => void;
-    /**
-     * Whether to enable column sorting
-     * @default true
-     */
-    enableSorting?: boolean;
-    /**
-     * Whether sorting is handled manually (server-side)
-     * @default false
-     */
-    manualSorting?: boolean;
-    /**
-     * Controlled sorting state (optional)
-     * If provided, component operates in controlled mode
-     */
-    sorting?: import('@tanstack/react-table').SortingState;
-    /**
-     * Callback when sorting changes (required for controlled mode)
-     */
-    onSortingChange?: (sorting: import('@tanstack/react-table').SortingState) => void;
-    /**
-     * Whether to enable column filtering
-     * @default false
-     */
-    enableColumnFilters?: boolean;
-    /**
-     * Whether to enable column resizing
-     * @default true
-     */
-    enableColumnResizing?: boolean;
-    /**
-     * Column resize mode: 'onChange' or 'onEnd'
-     * @default 'onChange'
-     */
-    columnResizeMode?: ColumnResizeMode;
-    /**
-     * Whether to enable column pinning
-     * @default true
-     */
-    enableColumnPinning?: boolean;
-    /**
-     * Callback fired when a row is clicked
-     */
-    onRowClick?: (row: TData) => void;
-    /**
-     * Configuration for actions column (always pinned to the right)
-     */
-    actions?: DataTableActionsConfig<TData>;
-    /**
-     * Fixed height for the table container
-     */
-    height?: string | number;
-    /**
-     * Height for each row in pixels
-     * @default 52
-     */
-    rowHeight?: number;
-    /**
-     * Additional CSS classes for the container
-     */
-    className?: string;
-    /**
-     * Unique key for persisting table state in localStorage
-     */
-    persistKey?: string;
-    /**
-     * Initial settings to load (from backend/profile)
-     * Takes precedence over localStorage
-     */
-    initialSettings?: import('./data-table.types').DataTableSettings;
-    /**
-     * Callback when table settings change (for syncing to backend)
-     */
-    onUpdate?: (settings: import('./data-table.types').DataTableSettings) => void;
-    /**
-     * Whether to enable drag-and-drop column reordering.
-     * When enabled, column headers can be dragged to reorder.
-     * Order persists via persistKey (localStorage) and onUpdate callback.
-     * @default false
-     */
-    enableColumnDragDrop?: boolean;
-    /**
-     * Language code for translations.
-     * When provided, uses built-in translations for the specified language.
-     * @default "en"
-     */
-    lang?: DataTableLanguage;
-    /**
-     * Translation strings for the column menu and dialogs.
-     * All fields are optional with English defaults.
-     * Overrides lang-based translations if both are provided.
-     *
-     * @example
-     * ```tsx
-     * <DataTable
-     *   lang="es"
-     *   translations={{
-     *     ascending: t('table.ascending'),
-     *     descending: t('table.descending'),
-     *     clearSorting: t('table.clearSorting'),
-     *     // ...
-     *   }}
-     * />
-     * ```
-     */
-    translations?: DataTableTranslations;
-}
-/**
- * Advanced data table component built on TanStack Table.
- * Features sorting, filtering, column resizing, row selection, column drag-and-drop reordering, and loading/empty states.
- * Supports column pinning, visibility control, and state persistence.
- *
- * @example
- * ```tsx
- * // Column drag-and-drop reordering
- * <DataTable
- *   columns={columns}
- *   data={data}
- *   enableColumnDragDrop
- *   persistKey="my-table"
- * />
- * ```
- */
-export declare function DataTable<TData, TValue>({ columns, data, isLoading, empty, checkboxSelection, rowSelection: externalRowSelection, onRowSelectionChange, enableSorting, manualSorting, sorting: externalSorting, onSortingChange: externalOnSortingChange, enableColumnFilters, enableColumnResizing, columnResizeMode, enableColumnPinning, onRowClick, actions, height, rowHeight, className, persistKey, initialSettings, onUpdate, enableColumnDragDrop, lang, translations, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;

package/dist/components/organisms/data-table/data-table.js

@@ -1,222 +0,0 @@
-import { j as o } from "../../../_virtual/jsx-runtime.js";
-import * as l from "react";
-import { useReactTable as ee } from "../../../node_modules/@tanstack/react-table/build/lib/index.js";
-import { DragDropProvider as te } from "../../../node_modules/@dnd-kit/react/index.js";
-import { move as oe } from "../../../node_modules/@dnd-kit/helpers/dist/index.js";
-import { Table as ne } from "../../../vendor/shadcn/table.js";
-import { cn as R } from "../../../lib/utils.js";
-import { getDataTableTranslations as re } from "./data-table.types.js";
-import { DataTableLoading as se } from "./components/states/data-table-loading.js";
-import { DataTableHeader as ie } from "./components/data-table-header.js";
-import { DataTableBody as le } from "./components/data-table-body.js";
-import { useDataTableColumns as ae } from "./hooks/use-data-table-columns.js";
-import { useDataTableState as me } from "./hooks/use-data-table-state.js";
-import { ROW_HEIGHT_DEFAULT as ce } from "./utils/data-table-constants.js";
-import { getFilteredRowModel as ue, getSortedRowModel as de, getCoreRowModel as fe } from "../../../node_modules/@tanstack/table-core/build/lib/index.js";
-import { Empty as ge } from "../../molecules/empty/empty.js";
-function Me({
-  columns: h,
-  data: a,
-  isLoading: E = !1,
-  empty: F,
-  checkboxSelection: x = !1,
-  rowSelection: u,
-  onRowSelectionChange: m,
-  enableSorting: M = !0,
-  manualSorting: O = !1,
-  sorting: A,
-  onSortingChange: k,
-  enableColumnFilters: L = !1,
-  enableColumnResizing: f = !0,
-  columnResizeMode: P = "onChange",
-  enableColumnPinning: B = !0,
-  onRowClick: H,
-  actions: g,
-  height: I,
-  rowHeight: y = ce,
-  className: N,
-  persistKey: W,
-  initialSettings: _,
-  onUpdate: $,
-  enableColumnDragDrop: p = !1,
-  lang: j,
-  translations: D
-}) {
-  const C = l.useMemo(
-    () => ({
-      ...re(j),
-      ...D
-    }),
-    [j, D]
-  ), z = ae({
-    columns: h,
-    checkboxSelection: x,
-    actions: g
-  }), {
-    sorting: T,
-    setSorting: v,
-    columnFilters: G,
-    setColumnFilters: U,
-    columnVisibility: q,
-    setColumnVisibility: J,
-    rowSelection: i,
-    setRowSelection: K,
-    columnPinning: Q,
-    handleColumnPinningChange: X,
-    columnOrder: d,
-    setColumnOrder: c
-  } = me({
-    persistKey: W,
-    hasActions: !!g,
-    externalSorting: A,
-    onExternalSortingChange: k,
-    externalRowSelection: u,
-    initialSettings: _,
-    onUpdate: $,
-    enableColumnDragDrop: p
-  }), r = ee({
-    data: a,
-    columns: z,
-    getCoreRowModel: fe(),
-    enableColumnResizing: f,
-    columnResizeMode: P,
-    enableColumnPinning: B,
-    meta: {
-      translations: C
-    },
-    defaultColumn: {
-      enableSorting: !1,
-      minSize: 50
-    },
-    ...M && {
-      onSortingChange: (e) => {
-        v(typeof e == "function" ? e(T) : e);
-      },
-      getSortedRowModel: de(),
-      manualSorting: O
-    },
-    ...L && {
-      onColumnFiltersChange: U,
-      getFilteredRowModel: ue()
-    },
-    onColumnVisibilityChange: J,
-    onRowSelectionChange: (e) => {
-      const t = typeof e == "function" ? e(i) : e;
-      if (K(t), m && u !== void 0) {
-        const s = Object.keys(t).filter((n) => t[n]).map((n) => a[parseInt(n)]).filter(Boolean);
-        m(t, s);
-      }
-    },
-    onColumnPinningChange: X,
-    onColumnOrderChange: c,
-    state: {
-      sorting: T,
-      columnFilters: G,
-      columnVisibility: q,
-      rowSelection: i,
-      columnPinning: Q,
-      columnOrder: d
-    }
-  });
-  l.useEffect(() => {
-    if (m && u === void 0) {
-      const e = Object.keys(i).filter((t) => i[t]).map((t) => a[parseInt(t)]).filter(Boolean);
-      m(i, e);
-    }
-  }, [i, m, a, u]);
-  const S = l.useRef([]), Y = l.useCallback(() => {
-    S.current = d.length > 0 ? [...d] : r.getAllLeafColumns().map((e) => e.id);
-  }, [d, r]), Z = l.useCallback(
-    (e) => {
-      c((t) => {
-        const s = t.length > 0 ? t : r.getAllLeafColumns().map((b) => b.id);
-        return oe({ columns: s }, e).columns;
-      });
-    },
-    [r, c]
-  ), V = l.useCallback(
-    (e) => {
-      e.operation.canceled && c(S.current);
-    },
-    [c]
-  );
-  if (E)
-    return /* @__PURE__ */ o.jsx(
-      se,
-      {
-        columns: h,
-        checkboxSelection: x,
-        actions: g,
-        rowHeight: y
-      }
-    );
-  if (a.length === 0) {
-    const e = F || {}, {
-      title: t,
-      description: s,
-      media: n,
-      actions: b
-    } = e;
-    return /* @__PURE__ */ o.jsx(
-      ge,
-      {
-        media: n,
-        title: t ?? C.noResults,
-        description: s ?? C.noDataAvailable,
-        actions: b
-      }
-    );
-  }
-  const w = /* @__PURE__ */ o.jsx("div", { className: R("yuno-data-table space-y-4", N), children: /* @__PURE__ */ o.jsx(
-    "div",
-    {
-      className: "yuno-data-table rounded-md border overflow-x-auto",
-      style: { height: I || "auto" },
-      children: /* @__PURE__ */ o.jsxs(ne, { className: R("table-fixed"), children: [
-        /* @__PURE__ */ o.jsx("colgroup", { children: r.getHeaderGroups()[0]?.headers.map((e) => {
-          const t = e.column.columnDef.enableResizing === !1, s = e.column.id === "_spacer", n = e.column.getSize();
-          return s ? /* @__PURE__ */ o.jsx("col", { style: { width: "auto" } }, e.id) : /* @__PURE__ */ o.jsx(
-            "col",
-            {
-              style: {
-                width: t ? `${n}px` : "auto",
-                minWidth: t ? `${n}px` : void 0,
-                maxWidth: t ? `${n}px` : void 0
-              }
-            },
-            e.id
-          );
-        }) }),
-        /* @__PURE__ */ o.jsx(
-          ie,
-          {
-            table: r,
-            enableColumnResizing: f,
-            enableColumnDragDrop: p
-          }
-        ),
-        /* @__PURE__ */ o.jsx(
-          le,
-          {
-            table: r,
-            enableColumnResizing: f,
-            onRowClick: H,
-            rowHeight: y
-          }
-        )
-      ] })
-    }
-  ) });
-  return p ? /* @__PURE__ */ o.jsx(
-    te,
-    {
-      onDragStart: Y,
-      onDragOver: Z,
-      onDragEnd: V,
-      children: w
-    }
-  ) : w;
-}
-export {
-  Me as DataTable
-};

package/dist/components/organisms/data-table/data-table.types.d.ts

@@ -1,216 +0,0 @@
-import { ColumnDef, RowData, SortingState, VisibilityState, ColumnFiltersState, PaginationState, RowSelectionState, Table, Column, CellContext, HeaderContext } from '@tanstack/react-table';
-import { IconName } from '../../atoms/icon';
-import { EmptyProps } from '../../molecules';
-/**
- * Supported languages for DataTable translations
- */
-export type DataTableLanguage = "en" | "es" | "ja" | "ar" | "fr" | "pt" | "tr" | "ru" | "de" | "zh";
-/**
- * Translation strings for the DataTable column menu and dialogs.
- * All fields are optional with English defaults.
- */
-export interface DataTableTranslations {
-    /** @default "Ascending" */
-    ascending?: string;
-    /** @default "Descending" */
-    descending?: string;
-    /** @default "Clear sorting" */
-    clearSorting?: string;
-    /** @default "Pin to the left" */
-    pinToLeft?: string;
-    /** @default "Pin to the right" */
-    pinToRight?: string;
-    /** @default "Unpin" */
-    unpin?: string;
-    /** @default "Hide" */
-    hide?: string;
-    /** @default "(Last column)" */
-    lastColumn?: string;
-    /** @default "Manage columns" */
-    manageColumns?: string;
-    /** @default "Hide all" */
-    hideAll?: string;
-    /** @default "Show all" */
-    showAll?: string;
-    /** @default "Search columns..." */
-    searchColumns?: string;
-    /** @default "No columns found" */
-    noColumnsFound?: string;
-    /** @default "No results" */
-    noResults?: string;
-    /** @default "No data available" */
-    noDataAvailable?: string;
-    /** @default "Sort ascending" */
-    sortAscending?: string;
-    /** @default "Sort descending" */
-    sortDescending?: string;
-    /** @default "Pinned column" */
-    pinnedColumn?: string;
-    /** @default "Menu" */
-    menu?: string;
-    /** @default "Actions" */
-    actions?: string;
-    /** @default "Select all" */
-    selectAll?: string;
-    /** @default "Select row" */
-    selectRow?: string;
-}
-/**
- * Default English translations for DataTable
- */
-export declare const DEFAULT_DATA_TABLE_TRANSLATIONS: Required<DataTableTranslations>;
-/**
- * All DataTable translations by language code
- */
-export declare const DATA_TABLE_TRANSLATIONS: Record<DataTableLanguage, Required<DataTableTranslations>>;
-/**
- * Get translations for a specific language
- * Falls back to English if language not found
- */
-export declare function getDataTableTranslations(lang?: DataTableLanguage): Required<DataTableTranslations>;
-declare module "@tanstack/react-table" {
-    interface TableMeta<TData extends RowData> {
-        updateData?: (rowIndex: number, columnId: string, value: unknown) => void;
-        translations?: Required<DataTableTranslations>;
-    }
-}
-export interface DataTableActionsConfig<TData> {
-    /** Custom render function for complete control */
-    render?: (row: TData) => React.ReactNode;
-    /** Icon for the default button (only used if render is not provided) */
-    icon?: IconName;
-    /** Click handler for the default button (only used if render is not provided) */
-    onClick?: (row: TData) => void;
-}
-/**
- * Configuration for DataTableColumnHeader component
- *
- * @example
- * ```tsx
- * {
- *   title: "Email",
- *   info: "User's email address",
- *   className: "justify-end"
- * }
- * ```
- */
-export interface DataTableColumnHeaderConfig {
-    title: string;
-    info?: string;
-    className?: string;
-}
-/**
- * Extended ColumnDef that supports multiple header formats:
- *
- * 1. String - Simple text header with sorting/filtering support
- * @example
- * ```tsx
- * {
- *   accessorKey: "name",
- *   header: "Name"
- * }
- * ```
- *
- * 2. Object - Header with additional info tooltip and className
- * @example
- * ```tsx
- * {
- *   accessorKey: "email",
- *   header: {
- *     title: "Email",
- *     info: "User's email address",
- *     className: "justify-end"
- *   }
- * }
- * ```
- *
- * 3. Function - Custom render function for complete control
- * @example
- * ```tsx
- * {
- *   id: "custom",
- *   header: () => <div className="custom-header">Custom</div>
- * }
- * ```
- */
-export type DataTableColumnDef<TData, TValue = unknown> = (({
-    header?: string | DataTableColumnHeaderConfig | ((props: HeaderContext<TData, TValue>) => React.ReactNode);
-} & Omit<ColumnDef<TData, TValue>, "header">) | ColumnDef<TData, TValue>) & {
-    enablePinning?: boolean;
-};
-export type DataTableColumn<TData> = ColumnDef<TData> & {
-    accessorKey?: string;
-    header?: string | ((props: HeaderContext<TData, unknown>) => React.ReactNode);
-    cell?: (props: CellContext<TData, unknown>) => React.ReactNode;
-    enableSorting?: boolean;
-    enableHiding?: boolean;
-};
-/**
- * Settings structure compatible with TableV2 format
- * Used for initialSettings and onUpdate callback
- */
-export interface DataTableSettings {
-    hide?: string[];
-    show?: string[];
-    width?: {
-        [key: string]: number;
-    };
-    pinnedColumns?: {
-        right: string[];
-        left: string[];
-    };
-    order?: string[];
-    sorting?: SortingState;
-}
-export interface DataTableProps<TData> {
-    columns: DataTableColumn<TData>[];
-    data: TData[];
-    isLoading?: boolean;
-    empty?: EmptyProps;
-    checkboxSelection?: boolean;
-    /**
-     * Controlled row selection state (optional)
-     * If provided, component operates in controlled mode
-     */
-    rowSelection?: RowSelectionState;
-    /**
-     * Callback fired when row selection changes
-     * In controlled mode, you must update the rowSelection prop
-     * @param rowSelectionState - Object with row indices as keys (e.g., { "0": true, "2": true })
-     * @param selectedRows - Array of actual row data objects
-     */
-    onRowSelectionChange?: (rowSelectionState: RowSelectionState, selectedRows: TData[]) => void;
-    enablePagination?: boolean;
-    pageSize?: number;
-    pageIndex?: number;
-    pageCount?: number;
-    onPaginationChange?: (pagination: PaginationState) => void;
-    manualPagination?: boolean;
-    enableSorting?: boolean;
-    sorting?: SortingState;
-    onSortingChange?: (sorting: SortingState) => void;
-    manualSorting?: boolean;
-    enableColumnFilters?: boolean;
-    columnFilters?: ColumnFiltersState;
-    onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
-    enableColumnPinning?: boolean;
-    columnVisibility?: VisibilityState;
-    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
-    onRowClick?: (row: TData) => void;
-    height?: string | number;
-    rowHeight?: number;
-    persistKey?: string;
-    initialSettings?: DataTableSettings;
-    onUpdate?: (settings: DataTableSettings) => void;
-    renderToolbar?: () => React.ReactNode;
-    renderActions?: () => React.ReactNode;
-    className?: string;
-}
-export interface DataTablePaginationProps<TData> {
-    table: Table<TData>;
-}
-export interface DataTableColumnHeaderProps<TData, TValue> {
-    column: Column<TData, TValue>;
-    title: string;
-    className?: string;
-}