@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

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

@@ -0,0 +1,139 @@
+import type { JSX } from 'react';
+import type { DataTableColumnDef, DataTableExpandedState, DataTablePaginationState, DataTableRow, DataTableRowSelectionState, DataTableSortingState } from './types';
+export type DataTableProps<I = unknown> = {
+    /**
+     * The data to be shown in the table. See https://tanstack.com/table/v8/docs/guide/data
+     */
+    data: I[];
+    /**
+     * The column configuration table. See https://tanstack.com/table/v8/docs/guide/column-defs
+     */
+    columns: DataTableColumnDef<I, any>[];
+    /**
+     * Is table full width
+     * @default true
+     */
+    fullWidth?: boolean;
+    /**
+     * Show a checkbox column and enables selection
+     * @default false
+     */
+    enableRowSelection?: boolean | ((row: DataTableRow<I>) => boolean);
+    /**
+     * Enables selection of multiple rows
+     * @default true
+     */
+    enableMultiRowSelection?: boolean;
+    /**
+     * Specify the selected rows. If `undefined`, the selections are managed internally
+     * Object with the key of row ID and a boolean specifying if the row is selected.
+     * The default row ID is the index. This can be changed using `getRowId` prop
+     * @default undefined
+     */
+    selections?: DataTableRowSelectionState;
+    /**
+     * Callback to be called when the row are selected / unselected
+     */
+    onSelectionsChange?: (selections: DataTableRowSelectionState) => void;
+    /**
+     * Show pagination
+     * @default true
+     */
+    enablePagination?: boolean;
+    /**
+     * Add borders to all cells
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Specify the pagination params. Object of shape { pageIndex: number, pageSize: number }.
+     * If `undefined` then the pagination is managed internally.
+     * @default undefined
+     */
+    pagination?: DataTablePaginationState;
+    /**
+     * Callback to be called when the pagination params change
+     */
+    onPaginationChange?: (pagination: DataTablePaginationState) => void;
+    /**
+     * Specify the sorting params.
+     * If `undefined` then the sorting is managed internally.
+     * @default undefined
+     */
+    sorting?: DataTableSortingState;
+    /**
+     * Default sorting applied when the table is first mounted (uncontrolled mode).
+     * Ignored when `sorting` is provided.
+     * @default []
+     */
+    defaultSorting?: DataTableSortingState;
+    /**
+     * Callback to be called when the sorting changes
+     */
+    onSortingChange?: (sorting: DataTableSortingState) => void;
+    /**
+     * Classname of the wrapper element
+     */
+    wrapperClassName?: string;
+    /**
+     * Classname of the content element
+     */
+    contentClassName?: string;
+    /**
+     * Classname of the table element
+     */
+    tableClassName?: string;
+    /**
+     * Show a loading indicator overlay
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Show a columns with a button which can expand the row
+     * @default false
+     */
+    enableRowExpansion?: boolean;
+    /**
+     * Callback to check if a row can be expanded
+     * @default false
+     */
+    canRowExpand?: (row: DataTableRow<I>) => boolean;
+    /**
+     * Specify the expanded rows
+     * If `undefined`, the expansions are managed internally
+     * Object with the key of row ID and a boolean specifying if the row is selected.
+     * The default row ID is the index. This can be changed using `getRowId` prop
+     */
+    expandedRows?: DataTableExpandedState;
+    /**
+     * Callback to be called when the rows are expanded or collapsed
+     */
+    onExpandedRowsChange?: (expandedRows: DataTableExpandedState) => void;
+    /**
+     * Render the content of the expanded row. Required when `enableRowExpansion` is `true`
+     */
+    renderExpandedContent?: (row: DataTableRow<I>) => React.ReactNode;
+    /**
+     * Get the row ID for a row. If not specified index is the default row ID.
+     * @default index
+     */
+    getRowId?: (row: I, index: number, parent?: DataTableRow<I>) => string;
+    /**
+     * Called when a body row is clicked. When set, rows become interactive
+     * (pointer cursor, `role="button"`, keyboard-activatable with Enter/Space).
+     * Clicks originating from an interactive control in the row (button, link,
+     * input, checkbox, or anything marked `data-no-row-click`) are ignored, so
+     * the selection checkbox and expand toggle keep working independently.
+     */
+    onRowClick?: (rowData: I) => void;
+};
+/**
+ * Generic typed data table built on TanStack React Table. Supports
+ * pagination, sorting, expansion, row selection and custom column renderers.
+ *
+ * @category tables
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const DataTable: <I = unknown>({ data, columns: providedColumns, fullWidth, enableRowSelection, selections: providedSelections, onSelectionsChange, enablePagination, enableMultiRowSelection, pagination: providedPagination, onPaginationChange, sorting: providedSorting, defaultSorting, onSortingChange, wrapperClassName, contentClassName, tableClassName, loading, bordered, enableRowExpansion, canRowExpand, expandedRows: providedExpandedRows, onExpandedRowsChange, renderExpandedContent, getRowId, onRowClick, }: DataTableProps<I>) => JSX.Element;
+export { createColumnHelper as getDataTableColumnHelper } from '@tanstack/react-table';

package/dist/primitives/components/data-table/data-table.example.d.ts

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

package/dist/primitives/components/data-table/data-table.example.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DataTable } from '@tetherto/mdk-react-devkit';
+const data = [
+    { id: 'miner-01', status: 'online', hashrate: 102.4, power_w: 3200 },
+    { id: 'miner-02', status: 'warning', hashrate: 95.1, power_w: 3450 },
+    { id: 'miner-03', status: 'offline', hashrate: 0, power_w: 0 },
+];
+const columns = [
+    { accessorKey: 'id', header: 'Miner' },
+    { accessorKey: 'status', header: 'Status' },
+    { accessorKey: 'hashrate', header: 'Hashrate (TH/s)' },
+    { accessorKey: 'power_w', header: 'Power (W)' },
+];
+export const DataTableExample = () => {
+    return _jsx(DataTable, { data: data, columns: columns, getRowId: (row) => row.id });
+};

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

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createColumnHelper, getCoreRowModel, getExpandedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
+import { MinusIcon, PlusIcon } from '@radix-ui/react-icons';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useCallback, useMemo } from 'react';
+import { cn } from '../../utils';
+import { Button } from '../button';
+import { Checkbox } from '../checkbox';
+import { Pagination } from '../pagination';
+import { Spinner } from '../spinner';
+import { EmptyTableBody, SkeletonTableBody, TableBody } from './data-table-body';
+import { TableHeader } from './data-table-header';
+import { columnIds } from './data-table.constants';
+const DEFAULT_PAGE_SIZE = 10;
+/**
+ * TanStack Table may invoke state handlers while React is still mounting the
+ * table surface. Deferring avoids Radix useControllableState updates before mount.
+ */
+const useDeferredTableOnChange = (onChange) => useCallback((updater) => {
+    queueMicrotask(() => onChange(updater));
+}, [onChange]);
+/**
+ * Generic typed data table built on TanStack React Table. Supports
+ * pagination, sorting, expansion, row selection and custom column renderers.
+ *
+ * @category tables
+ * @domain generic
+ * @tier agent-ready
+ */
+export const DataTable = ({ data, columns: providedColumns, fullWidth = true, enableRowSelection = false, selections: providedSelections, onSelectionsChange, enablePagination = true, enableMultiRowSelection = true, pagination: providedPagination, onPaginationChange, sorting: providedSorting, defaultSorting, onSortingChange, wrapperClassName, contentClassName, tableClassName, loading, bordered = false, enableRowExpansion = false, canRowExpand = () => true, expandedRows: providedExpandedRows, onExpandedRowsChange, renderExpandedContent, getRowId, onRowClick, }) => {
+    const [sorting, setSorting] = useControllableState({
+        prop: providedSorting,
+        defaultProp: defaultSorting ?? [],
+        onChange: onSortingChange,
+    });
+    const [pagination, setPagination] = useControllableState({
+        prop: providedPagination,
+        defaultProp: {
+            pageIndex: 0,
+            pageSize: DEFAULT_PAGE_SIZE,
+        },
+        onChange: onPaginationChange,
+    });
+    const [rowSelection, setRowSelection] = useControllableState({
+        prop: providedSelections,
+        defaultProp: {},
+        onChange: onSelectionsChange,
+    });
+    const [expandedRows, setExpandedRows] = useControllableState({
+        prop: providedExpandedRows,
+        defaultProp: {},
+        onChange: onExpandedRowsChange,
+    });
+    const handleSortingChange = useDeferredTableOnChange(setSorting);
+    const handlePaginationChange = useDeferredTableOnChange(setPagination);
+    const handleRowSelectionChange = useDeferredTableOnChange(setRowSelection);
+    const handleExpandedChange = useDeferredTableOnChange(setExpandedRows);
+    const tableLocalState = useMemo(() => {
+        const localState = {
+            sorting,
+            rowSelection,
+            ...(enablePagination ? { pagination } : {}),
+            ...(enableRowExpansion ? { expanded: expandedRows } : {}),
+        };
+        return localState;
+    }, [sorting, rowSelection, enablePagination, pagination, enableRowExpansion, expandedRows]);
+    const columnHelper = createColumnHelper();
+    const columns = useMemo(() => [
+        ...(enableRowExpansion
+            ? [
+                columnHelper.display({
+                    id: columnIds.rowExpansion,
+                    header: '',
+                    cell: ({ row }) => (_jsx(Button, { variant: "icon", onClick: row.getToggleExpandedHandler(), icon: row.getIsExpanded() ? _jsx(MinusIcon, {}) : _jsx(PlusIcon, {}) })),
+                    maxSize: 50,
+                }),
+            ]
+            : []),
+        ...(enableRowSelection
+            ? [
+                columnHelper.display({
+                    id: columnIds.rowSelection,
+                    header: ({ table }) => {
+                        let checked = false;
+                        if (table.getIsSomePageRowsSelected()) {
+                            checked = 'indeterminate';
+                        }
+                        else {
+                            checked = table.getIsAllPageRowsSelected();
+                        }
+                        return (_jsx(Checkbox, { size: "sm", checked: checked, onCheckedChange: (value) => {
+                                if (typeof value === 'boolean') {
+                                    table.toggleAllPageRowsSelected(value);
+                                }
+                            } }));
+                    },
+                    cell: ({ row }) => (_jsx("div", { className: "mdk-table-body__row-selection", children: _jsx(Checkbox, { size: "sm", checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: row.getToggleSelectedHandler() }) })),
+                    maxSize: 50,
+                }),
+            ]
+            : []),
+        ...providedColumns,
+    ], [providedColumns, enableRowSelection]);
+    const tableBackend = useReactTable({
+        // Basic Options
+        data,
+        columns,
+        getRowId,
+        // Pagination
+        ...(enablePagination ? { onPaginationChange: handlePaginationChange } : {}),
+        // Sorting — always wired (unlike pagination/selection/expansion): table state and
+        // controlled `sorting` props stay valid even when every column sets enableSorting: false.
+        onSortingChange: handleSortingChange,
+        // Selections
+        enableRowSelection,
+        enableMultiRowSelection,
+        ...(enableRowSelection ? { onRowSelectionChange: handleRowSelectionChange } : {}),
+        // Expansion
+        getRowCanExpand: canRowExpand,
+        ...(enableRowExpansion ? { onExpandedChange: handleExpandedChange } : {}),
+        // Table State
+        state: tableLocalState,
+        // Pipeline
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        ...(enablePagination ? { getPaginationRowModel: getPaginationRowModel() } : {}),
+        getExpandedRowModel: getExpandedRowModel(),
+    });
+    const handlePageChange = (pageNumber) => {
+        tableBackend.setPageIndex(pageNumber - 1);
+    };
+    const handlePageSizeChange = (pageNumber, size) => tableBackend.setPagination({
+        ...pagination,
+        pageIndex: pageNumber - 1,
+        pageSize: size,
+    });
+    const hasData = Boolean(data.length);
+    // Keep footer when row count exceeds default page size so page-size control stays
+    // available after switching to a larger page size (e.g. 20) that fits all rows on one page.
+    const showPagination = enablePagination &&
+        hasData &&
+        (tableBackend.getPageCount() > 1 || data.length > DEFAULT_PAGE_SIZE);
+    return (_jsxs("div", { className: cn('mdk-table', wrapperClassName), children: [_jsxs("div", { className: "mdk-table-content-wrapper", children: [_jsx("div", { className: cn('mdk-table__content-section', {
+                            'mdk-table__content-section--empty': !hasData,
+                            'mdk-table__content-section--no-overflow': !hasData || loading,
+                            'mdk-table__content-section--bordered': bordered,
+                        }, contentClassName), children: _jsxs("table", { className: cn('mdk-table__element', tableClassName, {
+                                'mdk-table__element--width-full': fullWidth,
+                                'mdk-table__element--bordered': bordered,
+                            }), style: {
+                                minWidth: tableBackend.getCenterTotalSize(),
+                            }, children: [(hasData || loading) && _jsx(TableHeader, { table: tableBackend }), hasData && (_jsx(TableBody, { table: tableBackend, renderExpandedContent: renderExpandedContent, onRowClick: onRowClick })), loading && !hasData && (_jsx(SkeletonTableBody, { columnCount: tableBackend.getAllLeafColumns().length }))] }) }), !hasData && !loading && _jsx(EmptyTableBody, {}), loading && hasData && (_jsx("div", { className: "mdk-table__loader-overlay", children: _jsx(Spinner, {}) }))] }), showPagination && (_jsx("div", { className: "mdk-table__pagination-section", children: _jsx(Pagination, { total: data.length, current: pagination.pageIndex + 1, onChange: handlePageChange, pageSize: pagination.pageSize, onSizeChange: handlePageSizeChange, disabled: loading }) }))] }));
+};
+export { createColumnHelper as getDataTableColumnHelper } from '@tanstack/react-table';

package/dist/primitives/components/data-table/index.d.ts

@@ -0,0 +1,2 @@
+export * from './data-table';
+export * from './types';

package/dist/primitives/components/data-table/index.js

@@ -0,0 +1,2 @@
+export * from './data-table';
+export * from './types';

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

@@ -0,0 +1 @@
+export type { ColumnDef as DataTableColumnDef, ExpandedState as DataTableExpandedState, PaginationState as DataTablePaginationState, Row as DataTableRow, RowSelectionState as DataTableRowSelectionState, SortingState as DataTableSortingState, } from '@tanstack/react-table';

package/dist/primitives/components/data-table/types.js

@@ -0,0 +1 @@
+export {};

package/dist/primitives/components/date-picker/date-picker.example.d.ts

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

package/dist/primitives/components/date-picker/date-picker.example.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for DatePicker and DateRangePicker.
+ */
+import { useState } from 'react';
+import { DatePicker, DateRangePicker } from '@tetherto/mdk-react-devkit';
+export const DatePickerExample = () => {
+    const [date, setDate] = useState();
+    const [range, setRange] = useState();
+    return (_jsxs("div", { className: "mdk-example-row", children: [_jsx(DatePicker, { selected: date, onSelect: setDate }), _jsx(DateRangePicker, { selected: range, onSelect: setRange, showPresets: true })] }));
+};

package/dist/primitives/components/date-picker/index.d.ts

@@ -0,0 +1,209 @@
+import type { DayPickerProps } from 'react-day-picker';
+export type DatePickerProps = {
+    /**
+     * Currently selected date
+     */
+    selected?: Date;
+    /**
+     * Callback when date changes
+     */
+    onSelect?: (date: Date | undefined) => void;
+    /**
+     * Placeholder text when no date is selected
+     * @default "Pick a date"
+     */
+    placeholder?: string;
+    /**
+     * Date format for display
+     * @default "MM/dd/yyyy"
+     */
+    dateFormat?: string;
+    /**
+     * Whether the picker is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom className for the trigger button
+     */
+    triggerClassName?: string;
+    /**
+     * Custom className for the calendar
+     */
+    calendarClassName?: string;
+} & Omit<DayPickerProps, 'mode' | 'selected' | 'onSelect'>;
+/**
+ * Single-date selection component built on react-day-picker with the MDK
+ * dark theme. Controlled via `selected` / `onSelect`.
+ *
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * const [date, setDate] = useState<Date>()
+ * <DatePicker selected={date} onSelect={setDate} placeholder="Pick a date" />
+ * ```
+ */
+export declare const DatePicker: import("react").ForwardRefExoticComponent<{
+    /**
+     * Currently selected date
+     */
+    selected?: Date;
+    /**
+     * Callback when date changes
+     */
+    onSelect?: (date: Date | undefined) => void;
+    /**
+     * Placeholder text when no date is selected
+     * @default "Pick a date"
+     */
+    placeholder?: string;
+    /**
+     * Date format for display
+     * @default "MM/dd/yyyy"
+     */
+    dateFormat?: string;
+    /**
+     * Whether the picker is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Custom className for the trigger button
+     */
+    triggerClassName?: string;
+    /**
+     * Custom className for the calendar
+     */
+    calendarClassName?: string;
+} & Omit<DayPickerProps, "mode" | "onSelect" | "selected"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type DateRange = {
+    /** Range start; `undefined` means nothing is selected and the placeholder shows */
+    from: Date | undefined;
+    /** Range end; while unset the trigger shows `from` alone and Apply stays disabled */
+    to?: Date | undefined;
+};
+export type PresetItem = {
+    /** Preset button text; also used as the React key, so keep it unique */
+    label: string;
+    /** Range applied to the draft on click; needs both `from` and `to`. Highlighted when the draft is within 5 minutes of it at both ends */
+    value: DateRange;
+};
+export type DateRangePickerProps = {
+    /**
+     * Selected date range
+     */
+    selected?: DateRange;
+    /**
+     * Callback when date range changes
+     */
+    onSelect?: (range: DateRange | undefined) => void;
+    /**
+     * Placeholder text when no range is selected
+     * @default "Pick a date range"
+     */
+    placeholder?: string;
+    /**
+     * Date format for display
+     * @default "MM/dd/yyyy"
+     */
+    dateFormat?: string;
+    /**
+     * Whether the picker is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show preset buttons
+     * @default true
+     */
+    showPresets?: boolean;
+    /**
+     * Custom preset items
+     */
+    presets?: PresetItem[];
+    /**
+     * Whether to allow future dates
+     * @default false
+     */
+    allowFutureDates?: boolean;
+    /**
+     * Custom className for the trigger button
+     */
+    triggerClassName?: string;
+    /**
+     * Custom className for the calendar
+     */
+    calendarClassName?: string;
+    /**
+     * Custom className for the modal
+     */
+    modalClassName?: string;
+} & Omit<DayPickerProps, 'mode' | 'selected'>;
+/**
+ * Date-range selection component with preset shortcuts (last 7/14/30/90
+ * days) and a modal interface. Controlled via `selected` / `onSelect`.
+ *
+ * @category forms
+ * @domain generic
+ * @tier agent-ready
+ *
+ * @example
+ * ```tsx
+ * const [range, setRange] = useState<DateRange>()
+ * <DateRangePicker selected={range} onSelect={setRange} showPresets />
+ * ```
+ */
+export declare const DateRangePicker: import("react").ForwardRefExoticComponent<{
+    /**
+     * Selected date range
+     */
+    selected?: DateRange;
+    /**
+     * Callback when date range changes
+     */
+    onSelect?: (range: DateRange | undefined) => void;
+    /**
+     * Placeholder text when no range is selected
+     * @default "Pick a date range"
+     */
+    placeholder?: string;
+    /**
+     * Date format for display
+     * @default "MM/dd/yyyy"
+     */
+    dateFormat?: string;
+    /**
+     * Whether the picker is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show preset buttons
+     * @default true
+     */
+    showPresets?: boolean;
+    /**
+     * Custom preset items
+     */
+    presets?: PresetItem[];
+    /**
+     * Whether to allow future dates
+     * @default false
+     */
+    allowFutureDates?: boolean;
+    /**
+     * Custom className for the trigger button
+     */
+    triggerClassName?: string;
+    /**
+     * Custom className for the calendar
+     */
+    calendarClassName?: string;
+    /**
+     * Custom className for the modal
+     */
+    modalClassName?: string;
+} & Omit<DayPickerProps, "mode" | "selected"> & import("react").RefAttributes<HTMLButtonElement>>;