@shipfox/react-ui 0.16.0 → 0.17.0

package/dist/components/empty-state/empty-state.stories.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { EmptyState } from './empty-state.js';
+const meta = {
+    title: 'Components/EmptyState',
+    component: EmptyState,
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const Default = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(EmptyState, {
+                ...args
+            })
+        }),
+    args: {}
+};
+export const CustomContent = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(EmptyState, {
+                ...args
+            })
+        }),
+    args: {
+        icon: 'shipfox',
+        title: 'No jobs yet',
+        description: 'Import past runs or start a runner.'
+    }
+};
+export const Compact = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400 h-200 relative",
+            children: /*#__PURE__*/ _jsx(EmptyState, {
+                ...args
+            })
+        }),
+    args: {
+        icon: 'lineChartLine',
+        title: 'Nothing here yet.',
+        variant: 'compact'
+    }
+};
+export const NoDescription = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(EmptyState, {
+                ...args
+            })
+        }),
+    args: {
+        title: 'No data available',
+        description: undefined
+    }
+};
+export const NoTitle = {
+    render: (args)=>/*#__PURE__*/ _jsx("div", {
+            className: "w-400",
+            children: /*#__PURE__*/ _jsx(EmptyState, {
+                ...args
+            })
+        }),
+    args: {
+        title: undefined,
+        description: 'This is a description without a title.'
+    }
+};
+
+//# sourceMappingURL=empty-state.stories.js.map

package/dist/components/empty-state/index.d.ts

@@ -0,0 +1,2 @@
+export * from './empty-state';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/empty-state/index.js

@@ -0,0 +1,3 @@
+export * from './empty-state.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/index.d.ts

@@ -4,15 +4,18 @@ export * from './badge';
 export * from './button';
 export * from './button-group';
 export * from './calendar';
+export * from './card';
 export * from './checkbox';
 export * from './code-block';
 export * from './command';
 export * from './confetti';
+export * from './dashboard';
 export * from './date-picker';
 export * from './date-time-range-picker';
 export * from './dot-grid';
 export * from './dropdown-menu';
 export * from './dynamic-item';
+export * from './empty-state';
 export * from './form';
 export * from './icon';
 export * from './inline-tips';

package/dist/components/index.js

@@ -4,15 +4,18 @@ export * from './badge/index.js';
 export * from './button/index.js';
 export * from './button-group/index.js';
 export * from './calendar/index.js';
+export * from './card/index.js';
 export * from './checkbox/index.js';
 export * from './code-block/index.js';
 export * from './command/index.js';
 export * from './confetti/index.js';
+export * from './dashboard/index.js';
 export * from './date-picker/index.js';
 export * from './date-time-range-picker/index.js';
 export * from './dot-grid/index.js';
 export * from './dropdown-menu/index.js';
 export * from './dynamic-item/index.js';
+export * from './empty-state/index.js';
 export * from './form/index.js';
 export * from './icon/index.js';
 export * from './inline-tips/index.js';

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

@@ -77,7 +77,11 @@ interface DataTableProps<TData, TValue> extends Omit<ComponentProps<'div'>, 'chi
      * This is only used when {@link columnVisibility} is provided as a controlled prop.
      */
     onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+    /**
+     * When `true`, displays a loading skeleton instead of the table.
+     */
+    isLoading?: boolean;
 }
-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 declare function DataTable<TData, TValue>({ columns, data, pagination, pageSize, pageSizeOptions, showSelectedCount, onRowClick, emptyState, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, isLoading, 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

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { Card, CardContent } from '../../components/card/index.js';
 import { Checkbox } from '../../components/checkbox/index.js';
-import { Icon } from '../../components/icon/index.js';
-import { Text } from '../../components/typography/index.js';
+import { EmptyState } from '../../components/empty-state/index.js';
+import { Skeleton } from '../../components/skeleton/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 }) {
+export function DataTable({ columns, data, pagination = true, pageSize = 10, pageSizeOptions, showSelectedCount = false, onRowClick, emptyState, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, isLoading, className, ...props }) {
     const [sorting, setSorting] = useState([]);
     const [columnFilters, setColumnFilters] = useState([]);
     const [internalColumnVisibility, setInternalColumnVisibility] = useState({});
@@ -30,7 +31,6 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
     }, [
         pageSize
     ]);
-    // Add selection column if showSelectedCount is enabled
     const columnsWithSelection = useMemo(()=>{
         if (!showSelectedCount) {
             return columns;
@@ -85,78 +85,90 @@ export function DataTable({ columns, data, pagination = true, pageSize = 10, pag
             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)"
+    const skeletonRowCount = pageSize > 5 ? 5 : pageSize;
+    if (isLoading) {
+        return /*#__PURE__*/ _jsx(Card, {
+            className: cn('p-0 gap-0', className),
+            ...props,
+            children: /*#__PURE__*/ _jsx(CardContent, {
+                className: "rounded-8 overflow-hidden p-0",
+                children: /*#__PURE__*/ _jsxs(Table, {
+                    children: [
+                        /*#__PURE__*/ _jsx(TableHeader, {
+                            children: /*#__PURE__*/ _jsx(TableRow, {
+                                className: "hover:bg-transparent border-b",
+                                children: columns.map((_, idx)=>/*#__PURE__*/ _jsx(TableHead, {
+                                        children: /*#__PURE__*/ _jsx(Skeleton, {
+                                            className: "h-16 w-24"
                                         })
-                                    }),
-                                    /*#__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."
+                                    }, idx.toString()))
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(TableBody, {
+                            children: Array.from({
+                                length: skeletonRowCount
+                            }).map((_, rowIdx)=>/*#__PURE__*/ _jsx(TableRow, {
+                                    className: "hover:bg-transparent",
+                                    children: columns.map((_, colIdx)=>/*#__PURE__*/ _jsx(TableCell, {
+                                            children: /*#__PURE__*/ _jsx(Skeleton, {
+                                                className: "h-16 w-full"
                                             })
-                                        ]
-                                    })
-                                ]
+                                        }, colIdx.toString()))
+                                }, rowIdx.toString()))
+                        })
+                    ]
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(Card, {
+        className: cn('p-0 gap-0', className),
+        ...props,
+        children: /*#__PURE__*/ _jsx(CardContent, {
+            className: "rounded-b-8 overflow-hidden p-0",
+            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 rounded-t-8",
+                                children: emptyState || /*#__PURE__*/ _jsx(EmptyState, {})
                             })
                         })
+                    }),
+                    pagination && table.getRowModel().rows?.length > 0 && /*#__PURE__*/ _jsx(TablePagination, {
+                        table: table,
+                        pageSizeOptions: pageSizeOptions,
+                        showSelectedCount: showSelectedCount
                     })
-                }),
-                pagination && table.getRowModel().rows?.length > 0 && /*#__PURE__*/ _jsx(TablePagination, {
-                    table: table,
-                    pageSizeOptions: pageSizeOptions,
-                    showSelectedCount: showSelectedCount
-                })
-            ]
+                ]
+            })
         })
     });
 }

package/dist/components/table/table.js

@@ -34,7 +34,7 @@ function TableFooter({ className, ...props }) {
 function TableRow({ className, ...props }) {
     return /*#__PURE__*/ _jsx("tr", {
         "data-slot": "table-row",
-        className: cn('group/row border-b border-border-neutral-base transition-colors', 'last:border-b-0', 'hover:bg-background-neutral-hover', 'data-[selected=true]:bg-background-neutral-pressed data-[selected=true]:hover:bg-background-neutral-pressed', className),
+        className: cn('group/row border-b border-border-neutral-base transition-colors', 'last:border-b-0 last:rounded-b-8', 'hover:bg-background-neutral-hover', 'data-[selected=true]:bg-background-neutral-pressed data-[selected=true]:hover:bg-background-neutral-pressed', className),
         ...props
     });
 }

package/dist/components/table/table.stories.components.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * Shared components for Table stories
- */ import { Icon } from '../../components/icon/index.js';
+ */ import { EmptyState } from '../../components/empty-state/index.js';
+import { Icon } from '../../components/icon/index.js';
 import { useSearchContext } from '../../components/search/search-context.js';
 import { SearchEmpty, SearchFooter, SearchGroup, SearchInput, SearchItem, SearchList } from '../../components/search/search-modal.js';
 import { Text } from '../../components/typography/index.js';
@@ -10,33 +11,10 @@ import { searchJobsData } from './table.stories.data.js';
 /**
  * Empty state component for job tables
  */ export function JobsEmptyState() {
-    return /*#__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: "shipfox",
-                    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 jobs yet"
-                    }),
-                    /*#__PURE__*/ _jsx(Text, {
-                        size: "xs",
-                        className: "text-foreground-neutral-muted",
-                        children: "Import past runs or start a runner."
-                    })
-                ]
-            })
-        ]
+    return /*#__PURE__*/ _jsx(EmptyState, {
+        icon: "shipfox",
+        title: "No jobs yet",
+        description: "Import past runs or start a runner."
     });
 }
 /**