@bigbinary/neeto-atoms 1.0.4 → 1.0.5

package/dist/components/DataTable/DataTable.d.ts

@@ -0,0 +1,2 @@
+import type { DataTableProps } from "./types";
+export declare const DataTable: <TData>({ columns, data, getRowId: getRowIdProp, sorting: sortingProp, onSortingChange: onSortingChangeProp, enableSorting, enableURLSort, totalCount, pageSize, currentPage: currentPageProp, onPageChange: onPageChangeProp, enableURLPagination, enableRowSelection: enableRowSelectionProp, selectedRowKeys, onRowSelect, bulkSelectAllRowsProps, enableColumnResize, enableColumnFreeze, columnPinning: columnPinningProp, onColumnPinningChange: onColumnPinningChangeProp, localStorageKeyPrefix, columnVisibility: columnVisibilityProp, onColumnVisibilityChange: onColumnVisibilityChangeProp, onColumnHide: onColumnHideProp, enableColumnReorder, columnOrder: columnOrderProp, onColumnOrderChange: onColumnOrderChangeProp, enableAddColumn, onColumnAdd, onColumnDelete, onColumnUpdate, onMoreActionClick, enableHeaderMenu, loading, fixedHeight, bordered, className, scroll, emptyMessage, onRowClick, allowRowClick, }: DataTableProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/components/BulkSelectCallout.d.ts

@@ -0,0 +1,8 @@
+import type { BulkSelectAllRowsProps } from "../types";
+interface BulkSelectCalloutProps {
+    bulkSelectAllRowsProps: BulkSelectAllRowsProps;
+    isAllPageRowsSelected: boolean;
+    isBulkAllSelected: boolean;
+}
+export declare const BulkSelectCallout: ({ bulkSelectAllRowsProps, isAllPageRowsSelected, isBulkAllSelected, }: BulkSelectCalloutProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/DataTable/components/DataTablePagination.d.ts

@@ -0,0 +1,7 @@
+interface DataTablePaginationProps {
+    currentPage: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+}
+export declare const DataTablePagination: ({ currentPage, pageCount, onPageChange, }: DataTablePaginationProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/DataTable/components/EmptyState.d.ts

@@ -0,0 +1,7 @@
+import type React from "react";
+interface EmptyStateProps {
+    colSpan: number;
+    message?: string | React.ReactNode;
+}
+export declare const EmptyState: ({ colSpan, message, }: EmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DataTable/components/HeaderCellMenu.d.ts

@@ -0,0 +1,19 @@
+import type { Column } from "@tanstack/react-table";
+interface HeaderCellMenuProps<TData> {
+    column: Column<TData, unknown>;
+    enableAddColumn?: boolean;
+    enableColumnFreeze?: boolean;
+    isColumnPinned?: boolean;
+    canMoveLeft?: boolean;
+    canMoveRight?: boolean;
+    onSort?: (columnId: string, desc: boolean) => void;
+    onHideColumn?: (columnId: string) => void;
+    onTogglePin?: (columnId: string) => void;
+    onAddColumn?: (position: number) => void;
+    onDeleteColumn?: (columnId: string) => void;
+    onMoveColumn?: (columnId: string, direction: -1 | 1) => void;
+    onMoreActionClick?: (actionType: string, columnId: string) => void;
+    columnIndex: number;
+}
+export declare const HeaderCellMenu: <TData>({ column, enableAddColumn, enableColumnFreeze, isColumnPinned, canMoveLeft, canMoveRight, onSort, onHideColumn, onTogglePin, onAddColumn, onDeleteColumn, onMoveColumn, onMoreActionClick, columnIndex, }: HeaderCellMenuProps<TData>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/DataTable/components/LoadingOverlay.d.ts

@@ -0,0 +1 @@
+export declare const LoadingOverlay: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/DataTable/components/ResizeHandle.d.ts

@@ -0,0 +1,6 @@
+import type { Header } from "@tanstack/react-table";
+interface ResizeHandleProps<TData> {
+    header: Header<TData, unknown>;
+}
+export declare const ResizeHandle: <TData>({ header }: ResizeHandleProps<TData>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/DataTable/components/SelectionCheckbox.d.ts

@@ -0,0 +1,7 @@
+interface SelectionCheckboxProps {
+    checked: boolean | "indeterminate";
+    onCheckedChange: (checked: boolean) => void;
+    ariaLabel?: string;
+}
+export declare const SelectionCheckbox: ({ checked, onCheckedChange, ariaLabel, }: SelectionCheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/DataTable/components/SortIndicator.d.ts

@@ -0,0 +1,6 @@
+import type { Column } from "@tanstack/react-table";
+interface SortIndicatorProps<TData> {
+    column: Column<TData, unknown>;
+}
+export declare const SortIndicator: <TData>({ column, }: SortIndicatorProps<TData>) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/DataTable/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const DEFAULT_PAGE_SIZE = 30;
+export declare const URL_SORT_PARAMS: {
+    readonly SORT_BY: "sort_by";
+    readonly ORDER_BY: "order_by";
+};
+export declare const URL_PAGE_PARAM = "page";
+export declare const SORT_DIRECTIONS: {
+    readonly ASC: "asc";
+    readonly DESC: "desc";
+};
+export declare const STORAGE_KEY_PREFIX = "NEETOUI";
+export declare const STORAGE_KEY_SUFFIX = "FIXED_COLUMNS";

package/dist/components/DataTable/hooks/useColumnOrdering.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnOrderState, OnChangeFn } from "@tanstack/react-table";
+interface UseColumnOrderingOptions {
+    enabled?: boolean;
+    columnOrder?: ColumnOrderState;
+    onColumnOrderChange?: OnChangeFn<ColumnOrderState>;
+}
+export declare const useColumnOrdering: ({ enabled, columnOrder: controlledOrder, onColumnOrderChange: controlledOnChange, }: UseColumnOrderingOptions) => {
+    columnOrder: ColumnOrderState;
+    onColumnOrderChange: OnChangeFn<ColumnOrderState>;
+    moveColumn: (columnId: string, direction: -1 | 1) => void;
+    reorderColumn: (fromId: string, toId: string) => void;
+};
+export {};

package/dist/components/DataTable/hooks/useColumnPinning.d.ts

@@ -0,0 +1,15 @@
+import type { ColumnPinningState, OnChangeFn } from "@tanstack/react-table";
+interface UseColumnPinningOptions {
+    enabled?: boolean;
+    columnPinning?: ColumnPinningState;
+    onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
+    localStorageKeyPrefix?: string;
+    initialPinnedColumns?: string[];
+}
+export declare const useColumnPinning: ({ enabled, columnPinning: controlledPinning, onColumnPinningChange: controlledOnChange, localStorageKeyPrefix, initialPinnedColumns, }: UseColumnPinningOptions) => {
+    columnPinning: ColumnPinningState;
+    onColumnPinningChange: OnChangeFn<ColumnPinningState>;
+    toggleColumnPin: (columnId: string) => void;
+    isColumnPinned: (columnId: string) => boolean;
+};
+export {};

package/dist/components/DataTable/hooks/useColumnVisibility.d.ts

@@ -0,0 +1,14 @@
+import type { OnChangeFn, VisibilityState } from "@tanstack/react-table";
+interface UseColumnVisibilityOptions {
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    onColumnHide?: (columnId: string) => void;
+}
+export declare const useColumnVisibility: ({ columnVisibility: controlledVisibility, onColumnVisibilityChange: controlledOnChange, onColumnHide, }: UseColumnVisibilityOptions) => {
+    columnVisibility: VisibilityState;
+    onColumnVisibilityChange: OnChangeFn<VisibilityState>;
+    hideColumn: (columnId: string) => void;
+    showColumn: (columnId: string) => void;
+    toggleColumnVisibility: (columnId: string) => void;
+};
+export {};

package/dist/components/DataTable/hooks/useTablePagination.d.ts

@@ -0,0 +1,18 @@
+interface UseTablePaginationOptions {
+    totalCount?: number;
+    pageSize?: number;
+    currentPage?: number;
+    onPageChange?: (page: number) => void;
+    enableURLPagination?: boolean;
+}
+export declare const useTablePagination: ({ totalCount, pageSize, currentPage: controlledPage, onPageChange: controlledOnPageChange, enableURLPagination, }: UseTablePaginationOptions) => {
+    currentPage: number;
+    pageCount: number;
+    pageSize: number;
+    paginationState: {
+        pageIndex: number;
+        pageSize: number;
+    };
+    onPageChange: (page: number) => void;
+};
+export {};

package/dist/components/DataTable/hooks/useTableSelection.d.ts

@@ -0,0 +1,15 @@
+import type { ColumnDef, OnChangeFn, Row, RowSelectionState } from "@tanstack/react-table";
+interface UseTableSelectionOptions<TData> {
+    enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+    selectedRowKeys?: string[];
+    onRowSelect?: (keys: string[], rows: TData[]) => void;
+    data: TData[];
+    getRowId: (row: TData) => string;
+}
+export declare const useTableSelection: <TData>({ enableRowSelection, selectedRowKeys, onRowSelect, data, getRowId, }: UseTableSelectionOptions<TData>) => {
+    rowSelection: RowSelectionState;
+    onRowSelectionChange: OnChangeFn<RowSelectionState>;
+    selectionColumn: ColumnDef<TData, unknown> | null;
+    enableRowSelection: boolean | ((row: Row<TData>) => boolean);
+};
+export {};

package/dist/components/DataTable/hooks/useTableSort.d.ts

@@ -0,0 +1,11 @@
+import type { SortingState, OnChangeFn } from "@tanstack/react-table";
+interface UseTableSortOptions {
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    enableURLSort?: boolean;
+}
+export declare const useTableSort: ({ sorting: controlledSorting, onSortingChange: controlledOnSortingChange, enableURLSort, }: UseTableSortOptions) => {
+    sorting: SortingState;
+    onSortingChange: OnChangeFn<SortingState>;
+};
+export {};

package/dist/components/DataTable/index.d.ts

@@ -0,0 +1,8 @@
+export { DataTable } from "./DataTable";
+export { useTableSort } from "./hooks/useTableSort";
+export { useTablePagination } from "./hooks/useTablePagination";
+export { useTableSelection } from "./hooks/useTableSelection";
+export { useColumnPinning } from "./hooks/useColumnPinning";
+export { useColumnVisibility } from "./hooks/useColumnVisibility";
+export { useColumnOrdering } from "./hooks/useColumnOrdering";
+export type { DataTableProps, BulkSelectAllRowsProps, DataTableColumnMeta, ColumnMoreAction, } from "./types";

package/dist/components/DataTable/types.d.ts

@@ -0,0 +1,69 @@
+import type { ColumnDef, ColumnOrderState, ColumnPinningState, OnChangeFn, Row, SortingState, VisibilityState } from "@tanstack/react-table";
+export interface BulkSelectAllRowsProps {
+    selectAllRowMessage: string;
+    selectAllRowButtonLabel: string;
+    setBulkSelectedAllRows: (value: boolean) => void;
+    allRowsSelectedMessage?: string;
+    clearSelectionButtonLabel?: string;
+}
+export interface ColumnMoreAction {
+    type: string;
+    label: string;
+    icon?: React.ComponentType<{
+        className?: string;
+        size?: number;
+    }>;
+}
+export interface DataTableColumnMeta {
+    isHidable?: boolean;
+    isDeletable?: boolean;
+    moreActions?: ColumnMoreAction[];
+    description?: string;
+    align?: "left" | "center" | "right";
+}
+export interface DataTableProps<TData> {
+    columns: ColumnDef<TData, unknown>[];
+    data: TData[];
+    getRowId?: (row: TData) => string;
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    enableSorting?: boolean;
+    enableURLSort?: boolean;
+    totalCount?: number;
+    pageSize?: number;
+    currentPage?: number;
+    onPageChange?: (page: number) => void;
+    enableURLPagination?: boolean;
+    enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
+    selectedRowKeys?: string[];
+    onRowSelect?: (keys: string[], rows: TData[]) => void;
+    bulkSelectAllRowsProps?: BulkSelectAllRowsProps;
+    enableColumnResize?: boolean;
+    enableColumnFreeze?: boolean;
+    columnPinning?: ColumnPinningState;
+    onColumnPinningChange?: OnChangeFn<ColumnPinningState>;
+    localStorageKeyPrefix?: string;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    onColumnHide?: (columnId: string) => void;
+    enableColumnReorder?: boolean;
+    columnOrder?: ColumnOrderState;
+    onColumnOrderChange?: OnChangeFn<ColumnOrderState>;
+    enableAddColumn?: boolean;
+    onColumnAdd?: (position: number) => void;
+    onColumnDelete?: (columnId: string) => void;
+    onColumnUpdate?: (columns: ColumnDef<TData, unknown>[]) => void;
+    onMoreActionClick?: (actionType: string, columnId: string) => void;
+    enableHeaderMenu?: boolean;
+    loading?: boolean;
+    fixedHeight?: boolean;
+    bordered?: boolean;
+    className?: string;
+    scroll?: {
+        x?: number | string;
+        y?: number | string;
+    };
+    emptyMessage?: string | React.ReactNode;
+    onRowClick?: (event: React.MouseEvent, row: TData, index: number) => void;
+    allowRowClick?: boolean;
+}

package/dist/components/DataTable/utils.d.ts

@@ -0,0 +1,14 @@
+import type { SortingState } from "@tanstack/react-table";
+import type { RowSelectionState } from "@tanstack/react-table";
+export declare const getSearchParams: () => URLSearchParams;
+export declare const readSortFromURL: () => SortingState;
+export declare const writeSortToURL: (sorting: SortingState) => void;
+export declare const readPageFromURL: () => number;
+export declare const writePageToURL: (page: number) => void;
+export declare const keysToRowSelection: (keys: string[]) => RowSelectionState;
+export declare const rowSelectionToKeys: (selection: RowSelectionState) => string[];
+export declare const hashPathname: () => string;
+export declare const getStorageKey: (prefix?: string) => string;
+export declare const readFromLocalStorage: (key: string) => string[];
+export declare const writeToLocalStorage: (key: string, value: string[]) => void;
+export declare const getPageNumbers: (current: number, total: number) => (number | "ellipsis")[];

package/dist/index.css

@@ -4,6 +4,7 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
@@ -130,6 +131,6 @@
     @apply border-border outline-ring/50;
   }
   body {
-    @apply bg-background text-foreground antialiased;
+    @apply bg-background text-foreground !font-sans antialiased;
   }
 }

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export * from "./components/Carousel";
 export * from "./components/Chart";
 export * from "./components/Checkbox";
 export * from "./components/Combobox";
+export * from "./components/DataTable";
 export * from "./components/Collapsible";
 export * from "./components/Command";
 export * from "./components/ContextMenu";