@shipfox/react-ui 0.14.0 → 0.16.0

package/dist/components/skeleton/skeleton.stories.js

@@ -0,0 +1,345 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Code, Header } from '../../components/typography/index.js';
+import { Skeleton } from './skeleton.js';
+const meta = {
+    title: 'Components/Skeleton',
+    component: Skeleton,
+    tags: [
+        'autodocs'
+    ]
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsx(Skeleton, {
+            className: "w-200 h-20"
+        })
+};
+export const Card = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-12 p-16 rounded-10 border border-border-neutral-base bg-background-field-base max-w-400",
+            children: [
+                /*#__PURE__*/ _jsx(Skeleton, {
+                    className: "h-200 w-full rounded-6"
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "space-y-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-20 w-3/4"
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-16 w-full"
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-16 w-5/6"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex gap-8 pt-8",
+                    children: [
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-32 w-100 rounded-6"
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-32 w-100 rounded-6"
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const List = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "flex flex-col gap-8 max-w-500",
+            children: Array.from({
+                length: 5
+            }, (_, i)=>i).map((id)=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-12 p-12 rounded-6 border border-border-neutral-base bg-background-field-base",
+                    children: [
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-48 w-48 rounded-full shrink-0"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex-1 space-y-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Skeleton, {
+                                    className: "h-16 w-3/4"
+                                }),
+                                /*#__PURE__*/ _jsx(Skeleton, {
+                                    className: "h-14 w-1/2"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(Skeleton, {
+                            className: "h-32 w-80 rounded-6"
+                        })
+                    ]
+                }, `list-${id}`))
+        })
+};
+export const Showcase = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-32",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "Basic Shapes"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-12",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Code, {
+                                            variant: "label",
+                                            className: "text-foreground-neutral-subtle",
+                                            children: "Rectangle"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-20 w-200"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Code, {
+                                            variant: "label",
+                                            className: "text-foreground-neutral-subtle",
+                                            children: "Circle"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-48 w-48 rounded-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Code, {
+                                            variant: "label",
+                                            className: "text-foreground-neutral-subtle",
+                                            children: "Square"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-100 w-100"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "Card Loading"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex flex-col gap-12 p-16 rounded-10 border border-border-neutral-base bg-background-field-base max-w-400",
+                            children: [
+                                /*#__PURE__*/ _jsx(Skeleton, {
+                                    className: "h-200 w-full rounded-6"
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "space-y-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-20 w-3/4"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-full"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-2/3"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-8 pt-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-100 rounded-6"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-100 rounded-6"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "List Loading"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex flex-col gap-8 max-w-500",
+                            children: Array.from({
+                                length: 4
+                            }, (_, i)=>i).map((id)=>/*#__PURE__*/ _jsxs("div", {
+                                    className: "flex items-center gap-12 p-12 rounded-6 border border-border-neutral-base bg-background-field-base",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-48 w-48 rounded-full shrink-0"
+                                        }),
+                                        /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex-1 space-y-8",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Skeleton, {
+                                                    className: "h-16 w-3/4"
+                                                }),
+                                                /*#__PURE__*/ _jsx(Skeleton, {
+                                                    className: "h-14 w-1/2"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-80 rounded-6"
+                                        })
+                                    ]
+                                }, `list-loading-${id}`))
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "Table Loading"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "rounded-10 border border-border-neutral-base bg-background-field-base overflow-hidden max-w-700",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-16 p-12 border-b border-border-neutral-base bg-background-neutral-base",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-140"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-220"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-120"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-100 ml-auto"
+                                        })
+                                    ]
+                                }),
+                                Array.from({
+                                    length: 5
+                                }, (_, i)=>i).map((id)=>/*#__PURE__*/ _jsxs("div", {
+                                        className: "flex gap-16 p-12 border-b border-border-neutral-base last:border-0",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Skeleton, {
+                                                className: "h-14 w-140"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Skeleton, {
+                                                className: "h-14 w-220"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Skeleton, {
+                                                className: "h-14 w-120"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Skeleton, {
+                                                className: "h-14 w-100 ml-auto"
+                                            })
+                                        ]
+                                    }, `table-row-${id}`))
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "Form Loading"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "max-w-400 space-y-16 p-16 rounded-10 border border-border-neutral-base bg-background-field-base",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "space-y-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-100"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-full rounded-6"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "space-y-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-120"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-full rounded-6"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "space-y-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-80"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-96 w-full rounded-6"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex gap-8 pt-8",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-100 rounded-6"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-32 w-100 rounded-6"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-16",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            children: "Avatar Group Loading"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex -space-x-8",
+                            children: Array.from({
+                                length: 5
+                            }, (_, i)=>i).map((id)=>/*#__PURE__*/ _jsx(Skeleton, {
+                                    className: "h-40 w-40 rounded-full border-2 border-background-field-base"
+                                }, `avatar-${id}`))
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=skeleton.stories.js.map

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

@@ -0,0 +1,83 @@
+import type { ColumnDef, VisibilityState } from '@tanstack/react-table';
+import { type ComponentProps } from 'react';
+/**
+ * Props for the {@link DataTable} component.
+ *
+ * @typeParam TData - The shape of the row data.
+ * @typeParam TValue - The value type used by column definitions.
+ */
+interface DataTableProps<TData, TValue> extends Omit<ComponentProps<'div'>, 'children'> {
+    /**
+     * Column definitions for the table, as expected by `@tanstack/react-table`.
+     *
+     * These control how each field in {@link data} is rendered and interacted with.
+     */
+    columns: ColumnDef<TData, TValue>[];
+    /**
+     * Array of data items to render as table rows.
+     */
+    data: TData[];
+    /**
+     * Enables client-side pagination when `true`.
+     *
+     * Defaults to `true`. When set to `false`, all rows are rendered in a single
+     * page and the pagination controls are disabled. In that case, the
+     * {@link pageSize} value is effectively ignored.
+     */
+    pagination?: boolean;
+    /**
+     * Number of rows to display per page when pagination is enabled.
+     *
+     * Defaults to `10`. This value is used to initialize the internal pagination
+     * state and only has an effect when {@link pagination} is `true`.
+     */
+    pageSize?: number;
+    /**
+     * Array of page size options to display in the page size selector.
+     * When provided, a dropdown will be rendered in the pagination footer allowing
+     * users to change the number of rows per page.
+     *
+     * @default [10, 20, 50, 100]
+     * @example
+     * ```tsx
+     * <DataTable columns={columns} data={data} pageSizeOptions={[5, 10, 25]} />
+     * ```
+     */
+    pageSizeOptions?: number[];
+    /**
+     * When `true`, displays the count of selected rows.
+     *
+     * This is useful when row selection is enabled to give users feedback on how
+     * many rows are currently selected.
+     */
+    showSelectedCount?: boolean;
+    /**
+     * Optional callback invoked when a table row is clicked.
+     *
+     * The callback receives the corresponding data item for the clicked row.
+     */
+    onRowClick?: (row: TData) => void;
+    /**
+     * React node to render when there are no rows to display.
+     *
+     * If not provided, the table will render without rows and without a custom
+     * empty state message or placeholder.
+     */
+    emptyState?: React.ReactNode;
+    /**
+     * Controlled column visibility state.
+     *
+     * When provided, the table will use this state to control which columns are visible.
+     * The keys should match the column IDs or accessor keys.
+     */
+    columnVisibility?: VisibilityState;
+    /**
+     * Callback invoked when column visibility changes.
+     *
+     * This is only used when {@link columnVisibility} is provided as a controlled prop.
+     */
+    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+}
+export declare function DataTable<TData, TValue>({ columns, data, pagination, pageSize, pageSizeOptions, showSelectedCount, onRowClick, emptyState, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, className, ...props }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=data-table.d.ts.map

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

@@ -0,0 +1,164 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { Checkbox } from '../../components/checkbox/index.js';
+import { Icon } from '../../components/icon/index.js';
+import { Text } from '../../components/typography/index.js';
+import { useEffect, useMemo, useState } from 'react';
+import { cn } from '../../utils/cn.js';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table.js';
+import { TablePagination } from './table-pagination.js';
+export function DataTable({ columns, data, pagination = true, pageSize = 10, pageSizeOptions, showSelectedCount = false, onRowClick, emptyState, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, className, ...props }) {
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [internalColumnVisibility, setInternalColumnVisibility] = useState({});
+    const [rowSelection, setRowSelection] = useState({});
+    const [paginationState, setPaginationState] = useState({
+        pageIndex: 0,
+        pageSize
+    });
+    const columnVisibility = controlledColumnVisibility ?? internalColumnVisibility;
+    const setColumnVisibility = onColumnVisibilityChange ? (visibility)=>{
+        const newVisibility = typeof visibility === 'function' ? visibility(columnVisibility) : visibility;
+        onColumnVisibilityChange(newVisibility);
+    } : setInternalColumnVisibility;
+    useEffect(()=>{
+        setPaginationState((prev)=>({
+                ...prev,
+                pageSize,
+                pageIndex: 0
+            }));
+    }, [
+        pageSize
+    ]);
+    // Add selection column if showSelectedCount is enabled
+    const columnsWithSelection = useMemo(()=>{
+        if (!showSelectedCount) {
+            return columns;
+        }
+        const selectionColumn = {
+            id: 'select',
+            header: ({ table })=>{
+                const isAllSelected = table.getIsAllPageRowsSelected();
+                const isSomeSelected = table.getIsSomePageRowsSelected();
+                return /*#__PURE__*/ _jsx(Checkbox, {
+                    checked: isAllSelected ? true : isSomeSelected ? 'indeterminate' : false,
+                    onCheckedChange: (checked)=>table.toggleAllPageRowsSelected(!!checked),
+                    onClick: (e)=>e.stopPropagation(),
+                    "aria-label": "Select all"
+                });
+            },
+            cell: ({ row })=>/*#__PURE__*/ _jsx(Checkbox, {
+                    checked: row.getIsSelected(),
+                    onCheckedChange: (checked)=>row.toggleSelected(!!checked),
+                    onClick: (e)=>e.stopPropagation(),
+                    "aria-label": "Select row"
+                }),
+            enableSorting: false,
+            enableHiding: false
+        };
+        return [
+            selectionColumn,
+            ...columns
+        ];
+    }, [
+        columns,
+        showSelectedCount
+    ]);
+    const table = useReactTable({
+        data,
+        columns: columnsWithSelection,
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getPaginationRowModel: pagination ? getPaginationRowModel() : undefined,
+        enableRowSelection: showSelectedCount,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        onRowSelectionChange: setRowSelection,
+        onPaginationChange: setPaginationState,
+        state: {
+            sorting,
+            columnFilters,
+            columnVisibility,
+            rowSelection,
+            pagination: pagination ? paginationState : undefined
+        }
+    });
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn('rounded-8 border border-border-neutral-base overflow-hidden', className),
+        ...props,
+        children: /*#__PURE__*/ _jsxs(Table, {
+            children: [
+                table.getRowModel().rows.length > 0 ? /*#__PURE__*/ _jsx(TableHeader, {
+                    children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ _jsx(TableRow, {
+                            className: "hover:bg-transparent border-b",
+                            children: headerGroup.headers.map((header)=>/*#__PURE__*/ _jsx(TableHead, {
+                                    children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+                                }, header.id))
+                        }, headerGroup.id))
+                }) : null,
+                /*#__PURE__*/ _jsx(TableBody, {
+                    children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row)=>/*#__PURE__*/ _jsx(TableRow, {
+                            onClick: ()=>onRowClick?.(row.original),
+                            "data-selected": row.getIsSelected(),
+                            className: onRowClick ? 'cursor-pointer' : '',
+                            tabIndex: onRowClick ? 0 : undefined,
+                            role: onRowClick ? 'button' : undefined,
+                            onKeyDown: (event)=>{
+                                if (!onRowClick) return;
+                                if (event.key === 'Enter' || event.key === ' ') {
+                                    event.preventDefault();
+                                    onRowClick(row.original);
+                                }
+                            },
+                            children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ _jsx(TableCell, {
+                                    children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                }, cell.id))
+                        }, row.id)) : /*#__PURE__*/ _jsx(TableRow, {
+                        className: "hover:bg-transparent",
+                        children: /*#__PURE__*/ _jsx(TableCell, {
+                            colSpan: table.getAllColumns().length,
+                            className: "h-240 text-center",
+                            children: emptyState || /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col items-center justify-center gap-12 py-48",
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "size-32 rounded-6 bg-transparent border border-border-neutral-strong flex items-center justify-center",
+                                        children: /*#__PURE__*/ _jsx(Icon, {
+                                            name: "fileDamageLine",
+                                            className: "size-16 text-foreground-neutral-subtle",
+                                            color: "var(--foreground-neutral-subtle, #a1a1aa)"
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "text-center space-y-4",
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                size: "sm",
+                                                className: "text-foreground-neutral-base",
+                                                children: "No results"
+                                            }),
+                                            /*#__PURE__*/ _jsx(Text, {
+                                                size: "xs",
+                                                className: "text-foreground-neutral-muted",
+                                                children: "Looks like there are no results."
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                }),
+                pagination && table.getRowModel().rows?.length > 0 && /*#__PURE__*/ _jsx(TablePagination, {
+                    table: table,
+                    pageSizeOptions: pageSizeOptions,
+                    showSelectedCount: showSelectedCount
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=data-table.js.map

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

@@ -0,0 +1,6 @@
+export type { ColumnDef } from '@tanstack/react-table';
+export * from './data-table';
+export * from './table';
+export * from './table-column-header';
+export * from './table-pagination';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.js

@@ -0,0 +1,6 @@
+export * from './data-table.js';
+export * from './table.js';
+export * from './table-column-header.js';
+export * from './table-pagination.js';
+
+//# sourceMappingURL=index.js.map