@shipfox/react-ui 0.14.0 → 0.16.0

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

@@ -0,0 +1,302 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Search, SearchContent, SearchTrigger } from '../../components/search/index.js';
+import { Header, Text } from '../../components/typography/index.js';
+import { useMemo, useState } from 'react';
+import { Button } from '../button/index.js';
+import { Icon } from '../icon/index.js';
+import { SearchInline } from '../search/search-inline.js';
+import { DataTable } from './data-table.js';
+import { jobColumns, searchJobColumns, userColumns } from './table.stories.columns.js';
+import { JobsEmptyState, SearchModalContent } from './table.stories.components.js';
+import { jobsData, searchJobsData, users } from './table.stories.data.js';
+const meta = {
+    title: 'Components/Table',
+    parameters: {
+        layout: 'padded'
+    },
+    tags: [
+        'autodocs'
+    ]
+};
+export default meta;
+export const Simple = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'extraLarge'
+        }
+    },
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-full min-h-screen bg-background-neutral-background p-24",
+            children: /*#__PURE__*/ _jsx(DataTable, {
+                columns: jobColumns.slice(0, 4),
+                data: jobsData.slice(0, 5),
+                pagination: false
+            })
+        })
+};
+export const WithPagination = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'extraLarge'
+        }
+    },
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-full min-h-screen bg-background-neutral-background p-24",
+            children: /*#__PURE__*/ _jsx(DataTable, {
+                columns: jobColumns,
+                data: jobsData,
+                pagination: true,
+                pageSize: 10,
+                pageSizeOptions: [
+                    5,
+                    10,
+                    20,
+                    50
+                ]
+            })
+        })
+};
+export const EmptyState = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'extraLarge'
+        }
+    },
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-full min-h-screen bg-background-neutral-background p-24",
+            children: /*#__PURE__*/ _jsx(DataTable, {
+                columns: jobColumns,
+                data: [],
+                pagination: true,
+                emptyState: /*#__PURE__*/ _jsx(JobsEmptyState, {})
+            })
+        })
+};
+export const UserTable = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'extraLarge'
+        }
+    },
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-full min-h-screen bg-background-neutral-background p-24",
+            children: /*#__PURE__*/ _jsx(DataTable, {
+                columns: userColumns,
+                data: users,
+                pagination: false
+            })
+        })
+};
+export const CompactTable = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'extraLarge'
+        }
+    },
+    render: ()=>{
+        const compactColumns = [
+            jobColumns[0],
+            jobColumns[1],
+            jobColumns[6]
+        ];
+        return /*#__PURE__*/ _jsx("div", {
+            className: "w-full min-h-screen bg-background-neutral-background p-24",
+            children: /*#__PURE__*/ _jsx(DataTable, {
+                columns: compactColumns,
+                data: jobsData.slice(0, 5),
+                pagination: false
+            })
+        });
+    }
+};
+export const JobsOverview = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'extraLarge'
+        }
+    },
+    render: ()=>{
+        const [searchQuery, setSearchQuery] = useState('');
+        const filteredData = useMemo(()=>jobsData.filter((job)=>job.name.toLowerCase().includes(searchQuery.toLowerCase())), [
+            searchQuery
+        ]);
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "w-full min-h-screen bg-background-neutral-background p-24",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-12 sm:gap-0 p-12 border-t border-x border-border-neutral-base rounded-t-8 rounded-b-none bg-background-neutral-base",
+                    children: [
+                        /*#__PURE__*/ _jsx(Header, {
+                            variant: "h3",
+                            className: "text-foreground-neutral-base",
+                            children: "Jobs overview"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center gap-12 sm:gap-16 w-full sm:w-auto",
+                            children: [
+                                /*#__PURE__*/ _jsx(SearchInline, {
+                                    placeholder: "Search...",
+                                    value: searchQuery,
+                                    onChange: (e)=>setSearchQuery(e.target.value),
+                                    onClear: ()=>setSearchQuery(''),
+                                    className: "flex-1 sm:w-240"
+                                }),
+                                /*#__PURE__*/ _jsx(Button, {
+                                    variant: "secondary",
+                                    "aria-label": "Insert column left",
+                                    className: "shrink-0",
+                                    children: /*#__PURE__*/ _jsx(Icon, {
+                                        name: "insertColumnLeft",
+                                        className: "size-16 text-foreground-neutral-subtle"
+                                    })
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsx(DataTable, {
+                    columns: jobColumns,
+                    data: filteredData,
+                    pagination: true,
+                    pageSize: 10,
+                    pageSizeOptions: [
+                        10,
+                        20,
+                        50,
+                        100
+                    ],
+                    className: "rounded-t-none"
+                })
+            ]
+        });
+    }
+};
+export const WithSearchModal = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'extraLarge'
+        }
+    },
+    render: ()=>{
+        function SearchModalDemo() {
+            const [open, setOpen] = useState(false);
+            const [selectedJobId, setSelectedJobId] = useState(null);
+            const filteredData = useMemo(()=>selectedJobId ? searchJobsData.filter((job)=>job.id === selectedJobId) : searchJobsData, [
+                selectedJobId
+            ]);
+            const selectedJob = useMemo(()=>selectedJobId ? searchJobsData.find((job)=>job.id === selectedJobId) : null, [
+                selectedJobId
+            ]);
+            const handleSelectJob = (jobId)=>{
+                setSelectedJobId(jobId);
+                setOpen(false);
+            };
+            const handleClearSelection = ()=>{
+                setSelectedJobId(null);
+            };
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "w-full min-h-screen bg-background-neutral-background p-24",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-12 sm:gap-0 p-12 border-t border-x border-border-neutral-base rounded-t-8 rounded-b-none bg-background-neutral-base",
+                        children: [
+                            /*#__PURE__*/ _jsx(Header, {
+                                variant: "h3",
+                                className: "text-foreground-neutral-base",
+                                children: "Jobs Breakdown"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col sm:flex-row items-stretch sm:items-center gap-12 sm:gap-16 w-full sm:w-auto",
+                                children: [
+                                    selectedJob && /*#__PURE__*/ _jsx(Button, {
+                                        variant: "transparentMuted",
+                                        size: "sm",
+                                        onClick: handleClearSelection,
+                                        className: "text-foreground-neutral-muted gap-4 w-full sm:w-auto justify-center sm:justify-start",
+                                        iconRight: "closeLine",
+                                        children: "Clear filter"
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Search, {
+                                        open: open,
+                                        onOpenChange: setOpen,
+                                        shortcutKey: "meta+k",
+                                        shouldFilter: false,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(SearchTrigger, {
+                                                placeholder: "Filter jobs...",
+                                                className: "w-full sm:w-280"
+                                            }),
+                                            /*#__PURE__*/ _jsx(SearchContent, {
+                                                "aria-describedby": undefined,
+                                                children: /*#__PURE__*/ _jsx(SearchModalContent, {
+                                                    onSelectJob: handleSelectJob
+                                                })
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(DataTable, {
+                        columns: searchJobColumns,
+                        data: filteredData,
+                        pagination: true,
+                        pageSize: 10,
+                        pageSizeOptions: [
+                            10,
+                            25,
+                            50
+                        ],
+                        className: "rounded-t-none"
+                    })
+                ]
+            });
+        }
+        return /*#__PURE__*/ _jsx(SearchModalDemo, {});
+    }
+};
+export const WithRowSelection = {
+    parameters: {
+        viewport: {
+            defaultViewport: 'extraLarge'
+        }
+    },
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "w-full min-h-screen bg-background-neutral-background p-24",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "space-y-16",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx(Header, {
+                                variant: "h3",
+                                className: "text-foreground-neutral-base mb-8",
+                                children: "Selectable Rows"
+                            }),
+                            /*#__PURE__*/ _jsx(Text, {
+                                size: "sm",
+                                className: "text-foreground-neutral-muted",
+                                children: "Use the checkboxes to select rows. The pagination footer shows the count of selected rows."
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(DataTable, {
+                        columns: jobColumns,
+                        data: jobsData,
+                        pagination: true,
+                        pageSize: 10,
+                        pageSizeOptions: [
+                            5,
+                            10,
+                            20,
+                            50
+                        ],
+                        showSelectedCount: true
+                    })
+                ]
+            })
+        })
+};
+
+//# sourceMappingURL=table.stories.js.map