@shipfox/react-ui 0.14.0 → 0.15.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table/table.stories.data.ts"],"sourcesContent":["/**\n * Data types, generation functions, and sample data for Table stories\n */\n\nexport type JobData = {\n  id: string;\n  name: string;\n  total: number;\n  success: number;\n  failed: number;\n  neutral: number;\n  flaked: number;\n  failureRate: string;\n  flakeRate: string;\n  repository?: string;\n  branch?: string;\n};\n\nexport type SearchJobData = {\n  id: string;\n  name: string;\n  total: number;\n  success: number;\n  failed: number;\n  status: 'active' | 'completed' | 'failed';\n  repository: string;\n  branch: string;\n};\n\nexport type User = {\n  id: string;\n  name: string;\n  email: string;\n  role: string;\n  status: 'active' | 'inactive';\n};\n\n/**\n * Generate mock job data\n */\nexport const generateJobData = (count: number): JobData[] => {\n  return Array.from({length: count}, (_, i) => {\n    const total = 40 + (i % 20); // keeps totals in a reasonable range\n    const failed = i % 7;\n    const flaked = i % 5;\n    const neutral = i % 3;\n    const success = total - failed - flaked - neutral;\n    const failureRate = `${Math.round((failed / total) * 100)}%`;\n    const flakeRate = `${Math.round((flaked / total) * 100)}%`;\n    return {\n      id: `job-${i + 1}`,\n      name: 'Dependabot updates',\n      total,\n      success,\n      failed,\n      neutral,\n      flaked,\n      failureRate,\n      flakeRate,\n      repository: 'shipfox/tooling',\n      branch: 'main',\n    };\n  });\n};\n\n/**\n * Generate mock search job data with varied properties\n */\nexport const generateSearchJobData = (count: number): SearchJobData[] => {\n  const jobNames = [\n    'Build & Deploy',\n    'Run Tests',\n    'Code Quality Check',\n    'Security Scan',\n    'Integration Tests',\n    'Performance Tests',\n    'Deploy to Staging',\n    'Deploy to Production',\n    'Database Migration',\n    'Cache Warm-up',\n  ];\n  const repositories = ['shipfox/tooling', 'shipfox/web', 'shipfox/api', 'shipfox/mobile'];\n  const branches = ['main', 'develop', 'staging', 'feat/new-feature'];\n  const statuses: Array<'active' | 'completed' | 'failed'> = ['active', 'completed', 'failed'];\n\n  return Array.from({length: count}, (_, i) => ({\n    id: `job-${i + 1}`,\n    name: jobNames[i % jobNames.length],\n    total: Math.floor(Math.random() * 100) + 20,\n    success: Math.floor(Math.random() * 80) + 10,\n    failed: Math.floor(Math.random() * 20),\n    status: statuses[i % statuses.length],\n    repository: repositories[i % repositories.length],\n    branch: branches[i % branches.length],\n  }));\n};\n\n/**\n * Sample job data\n */\nexport const jobsData = generateJobData(100);\n\n/**\n * Sample search job data\n */\nexport const searchJobsData = generateSearchJobData(50);\n\n/**\n * Sample user data\n */\nexport const users: User[] = [\n  {id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active'},\n  {id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active'},\n  {id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive'},\n  {id: '4', name: 'Alice Williams', email: 'alice@example.com', role: 'Editor', status: 'active'},\n  {id: '5', name: 'Charlie Brown', email: 'charlie@example.com', role: 'User', status: 'active'},\n];\n"],"names":["generateJobData","count","Array","from","length","_","i","total","failed","flaked","neutral","success","failureRate","Math","round","flakeRate","id","name","repository","branch","generateSearchJobData","jobNames","repositories","branches","statuses","floor","random","status","jobsData","searchJobsData","users","email","role"],"mappings":"AAAA;;CAEC,GAmCD;;CAEC,GACD,OAAO,MAAMA,kBAAkB,CAACC;IAC9B,OAAOC,MAAMC,IAAI,CAAC;QAACC,QAAQH;IAAK,GAAG,CAACI,GAAGC;QACrC,MAAMC,QAAQ,KAAMD,IAAI,IAAK,qCAAqC;QAClE,MAAME,SAASF,IAAI;QACnB,MAAMG,SAASH,IAAI;QACnB,MAAMI,UAAUJ,IAAI;QACpB,MAAMK,UAAUJ,QAAQC,SAASC,SAASC;QAC1C,MAAME,cAAc,GAAGC,KAAKC,KAAK,CAAC,AAACN,SAASD,QAAS,KAAK,CAAC,CAAC;QAC5D,MAAMQ,YAAY,GAAGF,KAAKC,KAAK,CAAC,AAACL,SAASF,QAAS,KAAK,CAAC,CAAC;QAC1D,OAAO;YACLS,IAAI,CAAC,IAAI,EAAEV,IAAI,GAAG;YAClBW,MAAM;YACNV;YACAI;YACAH;YACAE;YACAD;YACAG;YACAG;YACAG,YAAY;YACZC,QAAQ;QACV;IACF;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACnB;IACpC,MAAMoB,WAAW;QACf;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;QACA;KACD;IACD,MAAMC,eAAe;QAAC;QAAmB;QAAe;QAAe;KAAiB;IACxF,MAAMC,WAAW;QAAC;QAAQ;QAAW;QAAW;KAAmB;IACnE,MAAMC,WAAqD;QAAC;QAAU;QAAa;KAAS;IAE5F,OAAOtB,MAAMC,IAAI,CAAC;QAACC,QAAQH;IAAK,GAAG,CAACI,GAAGC,IAAO,CAAA;YAC5CU,IAAI,CAAC,IAAI,EAAEV,IAAI,GAAG;YAClBW,MAAMI,QAAQ,CAACf,IAAIe,SAASjB,MAAM,CAAC;YACnCG,OAAOM,KAAKY,KAAK,CAACZ,KAAKa,MAAM,KAAK,OAAO;YACzCf,SAASE,KAAKY,KAAK,CAACZ,KAAKa,MAAM,KAAK,MAAM;YAC1ClB,QAAQK,KAAKY,KAAK,CAACZ,KAAKa,MAAM,KAAK;YACnCC,QAAQH,QAAQ,CAAClB,IAAIkB,SAASpB,MAAM,CAAC;YACrCc,YAAYI,YAAY,CAAChB,IAAIgB,aAAalB,MAAM,CAAC;YACjDe,QAAQI,QAAQ,CAACjB,IAAIiB,SAASnB,MAAM,CAAC;QACvC,CAAA;AACF,EAAE;AAEF;;CAEC,GACD,OAAO,MAAMwB,WAAW5B,gBAAgB,KAAK;AAE7C;;CAEC,GACD,OAAO,MAAM6B,iBAAiBT,sBAAsB,IAAI;AAExD;;CAEC,GACD,OAAO,MAAMU,QAAgB;IAC3B;QAACd,IAAI;QAAKC,MAAM;QAAYc,OAAO;QAAoBC,MAAM;QAASL,QAAQ;IAAQ;IACtF;QAACX,IAAI;QAAKC,MAAM;QAAcc,OAAO;QAAoBC,MAAM;QAAQL,QAAQ;IAAQ;IACvF;QAACX,IAAI;QAAKC,MAAM;QAAec,OAAO;QAAmBC,MAAM;QAAQL,QAAQ;IAAU;IACzF;QAACX,IAAI;QAAKC,MAAM;QAAkBc,OAAO;QAAqBC,MAAM;QAAUL,QAAQ;IAAQ;IAC9F;QAACX,IAAI;QAAKC,MAAM;QAAiBc,OAAO;QAAuBC,MAAM;QAAQL,QAAQ;IAAQ;CAC9F,CAAC"}

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table/table.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from '@storybook/react';\nimport type {ColumnDef} from '@tanstack/react-table';\nimport {Search, SearchContent, SearchTrigger} from 'components/search';\nimport {Header, Text} from 'components/typography';\nimport {useMemo, useState} from 'react';\nimport {Button} from '../button';\nimport {Icon} from '../icon';\nimport {SearchInline} from '../search/search-inline';\nimport {DataTable} from './data-table';\nimport {jobColumns, searchJobColumns, userColumns} from './table.stories.columns';\nimport {JobsEmptyState, SearchModalContent} from './table.stories.components';\nimport {type JobData, jobsData, searchJobsData, users} from './table.stories.data';\n\nconst meta = {\n  title: 'Components/Table',\n  parameters: {\n    layout: 'padded',\n  },\n  tags: ['autodocs'],\n} satisfies Meta;\n\nexport default meta;\ntype Story = StoryObj;\n\nexport const Simple: Story = {\n  parameters: {\n    viewport: {\n      defaultViewport: 'extraLarge',\n    },\n  },\n  render: () => (\n    <div className=\"w-full min-h-screen bg-background-neutral-background p-24\">\n      <DataTable columns={jobColumns.slice(0, 4)} data={jobsData.slice(0, 5)} pagination={false} />\n    </div>\n  ),\n};\n\nexport const WithPagination: Story = {\n  parameters: {\n    viewport: {\n      defaultViewport: 'extraLarge',\n    },\n  },\n  render: () => (\n    <div className=\"w-full min-h-screen bg-background-neutral-background p-24\">\n      <DataTable\n        columns={jobColumns}\n        data={jobsData}\n        pagination={true}\n        pageSize={10}\n        pageSizeOptions={[5, 10, 20, 50]}\n      />\n    </div>\n  ),\n};\n\nexport const EmptyState: Story = {\n  parameters: {\n    viewport: {\n      defaultViewport: 'extraLarge',\n    },\n  },\n  render: () => (\n    <div className=\"w-full min-h-screen bg-background-neutral-background p-24\">\n      <DataTable columns={jobColumns} data={[]} pagination={true} emptyState={<JobsEmptyState />} />\n    </div>\n  ),\n};\n\nexport const UserTable: Story = {\n  parameters: {\n    viewport: {\n      defaultViewport: 'extraLarge',\n    },\n  },\n  render: () => (\n    <div className=\"w-full min-h-screen bg-background-neutral-background p-24\">\n      <DataTable columns={userColumns} data={users} pagination={false} />\n    </div>\n  ),\n};\n\nexport const CompactTable: Story = {\n  parameters: {\n    viewport: {\n      defaultViewport: 'extraLarge',\n    },\n  },\n  render: () => {\n    const compactColumns: ColumnDef<JobData>[] = [\n      jobColumns[0], // name\n      jobColumns[1], // total\n      jobColumns[6], // failureRate\n    ];\n\n    return (\n      <div className=\"w-full min-h-screen bg-background-neutral-background p-24\">\n        <DataTable columns={compactColumns} data={jobsData.slice(0, 5)} pagination={false} />\n      </div>\n    );\n  },\n};\n\nexport const JobsOverview: Story = {\n  parameters: {\n    viewport: {\n      defaultViewport: 'extraLarge',\n    },\n  },\n  render: () => {\n    const [searchQuery, setSearchQuery] = useState('');\n\n    const filteredData = useMemo(\n      () => jobsData.filter((job) => job.name.toLowerCase().includes(searchQuery.toLowerCase())),\n      [searchQuery],\n    );\n\n    return (\n      <div className=\"w-full min-h-screen bg-background-neutral-background p-24\">\n        <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\">\n          <Header variant=\"h3\" className=\"text-foreground-neutral-base\">\n            Jobs overview\n          </Header>\n\n          <div className=\"flex items-center gap-12 sm:gap-16 w-full sm:w-auto\">\n            <SearchInline\n              placeholder=\"Search...\"\n              value={searchQuery}\n              onChange={(e) => setSearchQuery(e.target.value)}\n              onClear={() => setSearchQuery('')}\n              className=\"flex-1 sm:w-240\"\n            />\n            <Button variant=\"secondary\" aria-label=\"Insert column left\" className=\"shrink-0\">\n              <Icon name=\"insertColumnLeft\" className=\"size-16 text-foreground-neutral-subtle\" />\n            </Button>\n          </div>\n        </div>\n\n        <DataTable\n          columns={jobColumns}\n          data={filteredData}\n          pagination={true}\n          pageSize={10}\n          pageSizeOptions={[10, 20, 50, 100]}\n          className=\"rounded-t-none\"\n        />\n      </div>\n    );\n  },\n};\n\nexport const WithSearchModal: Story = {\n  parameters: {\n    viewport: {\n      defaultViewport: 'extraLarge',\n    },\n  },\n  render: () => {\n    function SearchModalDemo() {\n      const [open, setOpen] = useState(false);\n      const [selectedJobId, setSelectedJobId] = useState<string | null>(null);\n\n      const filteredData = useMemo(\n        () =>\n          selectedJobId ? searchJobsData.filter((job) => job.id === selectedJobId) : searchJobsData,\n        [selectedJobId],\n      );\n\n      const selectedJob = useMemo(\n        () => (selectedJobId ? searchJobsData.find((job) => job.id === selectedJobId) : null),\n        [selectedJobId],\n      );\n\n      const handleSelectJob = (jobId: string) => {\n        setSelectedJobId(jobId);\n        setOpen(false);\n      };\n\n      const handleClearSelection = () => {\n        setSelectedJobId(null);\n      };\n\n      return (\n        <div className=\"w-full min-h-screen bg-background-neutral-background p-24\">\n          <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\">\n            <Header variant=\"h3\" className=\"text-foreground-neutral-base\">\n              Jobs Breakdown\n            </Header>\n\n            <div className=\"flex flex-col sm:flex-row items-stretch sm:items-center gap-12 sm:gap-16 w-full sm:w-auto\">\n              {selectedJob && (\n                <Button\n                  variant=\"transparentMuted\"\n                  size=\"sm\"\n                  onClick={handleClearSelection}\n                  className=\"text-foreground-neutral-muted gap-4 w-full sm:w-auto justify-center sm:justify-start\"\n                  iconRight=\"closeLine\"\n                >\n                  Clear filter\n                </Button>\n              )}\n              <Search open={open} onOpenChange={setOpen} shortcutKey=\"meta+k\" shouldFilter={false}>\n                <SearchTrigger placeholder=\"Filter jobs...\" className=\"w-full sm:w-280\" />\n                <SearchContent aria-describedby={undefined}>\n                  <SearchModalContent onSelectJob={handleSelectJob} />\n                </SearchContent>\n              </Search>\n            </div>\n          </div>\n\n          <DataTable\n            columns={searchJobColumns}\n            data={filteredData}\n            pagination={true}\n            pageSize={10}\n            pageSizeOptions={[10, 25, 50]}\n            className=\"rounded-t-none\"\n          />\n        </div>\n      );\n    }\n\n    return <SearchModalDemo />;\n  },\n};\n\nexport const WithRowSelection: Story = {\n  parameters: {\n    viewport: {\n      defaultViewport: 'extraLarge',\n    },\n  },\n  render: () => (\n    <div className=\"w-full min-h-screen bg-background-neutral-background p-24\">\n      <div className=\"space-y-16\">\n        <div>\n          <Header variant=\"h3\" className=\"text-foreground-neutral-base mb-8\">\n            Selectable Rows\n          </Header>\n          <Text size=\"sm\" className=\"text-foreground-neutral-muted\">\n            Use the checkboxes to select rows. The pagination footer shows the count of selected\n            rows.\n          </Text>\n        </div>\n        <DataTable\n          columns={jobColumns}\n          data={jobsData}\n          pagination={true}\n          pageSize={10}\n          pageSizeOptions={[5, 10, 20, 50]}\n          showSelectedCount={true}\n        />\n      </div>\n    </div>\n  ),\n};\n"],"names":["Search","SearchContent","SearchTrigger","Header","Text","useMemo","useState","Button","Icon","SearchInline","DataTable","jobColumns","searchJobColumns","userColumns","JobsEmptyState","SearchModalContent","jobsData","searchJobsData","users","meta","title","parameters","layout","tags","Simple","viewport","defaultViewport","render","div","className","columns","slice","data","pagination","WithPagination","pageSize","pageSizeOptions","EmptyState","emptyState","UserTable","CompactTable","compactColumns","JobsOverview","searchQuery","setSearchQuery","filteredData","filter","job","name","toLowerCase","includes","variant","placeholder","value","onChange","e","target","onClear","aria-label","WithSearchModal","SearchModalDemo","open","setOpen","selectedJobId","setSelectedJobId","id","selectedJob","find","handleSelectJob","jobId","handleClearSelection","size","onClick","iconRight","onOpenChange","shortcutKey","shouldFilter","aria-describedby","undefined","onSelectJob","WithRowSelection","showSelectedCount"],"mappings":"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"}