@shipfox/react-ui 0.13.0 → 0.15.0

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

@@ -0,0 +1,310 @@
+/**
+ * Column definitions for Table stories
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Badge } from '../../components/badge/index.js';
+import { Icon } from '../../components/icon/index.js';
+import { TableColumnHeader } from './table-column-header.js';
+/**
+ * Create column definitions for JobData
+ */ export const createJobColumns = ()=>[
+        {
+            accessorKey: 'name',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Name"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsx("div", {
+                    className: "font-medium text-foreground-neutral-base",
+                    children: row.getValue('name')
+                })
+        },
+        {
+            accessorKey: 'total',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Total"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-6",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "size-6 rounded-full bg-foreground-neutral-muted"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "tabular-nums",
+                            children: row.getValue('total')
+                        })
+                    ]
+                })
+        },
+        {
+            accessorKey: 'success',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Success"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-6",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "size-6 rounded-full bg-tag-success-icon"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "tabular-nums",
+                            children: row.getValue('success')
+                        })
+                    ]
+                })
+        },
+        {
+            accessorKey: 'failed',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Failed"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-6",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "size-6 rounded-full bg-tag-error-icon"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "tabular-nums",
+                            children: row.getValue('failed')
+                        })
+                    ]
+                })
+        },
+        {
+            accessorKey: 'neutral',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Neutral"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-6",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "size-6 rounded-full bg-foreground-neutral-muted"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "tabular-nums",
+                            children: row.getValue('neutral')
+                        })
+                    ]
+                })
+        },
+        {
+            accessorKey: 'flaked',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Flaked"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-6",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "size-6 rounded-full bg-tag-warning-icon"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "tabular-nums",
+                            children: row.getValue('flaked')
+                        })
+                    ]
+                })
+        },
+        {
+            accessorKey: 'failureRate',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Failure rate"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsx("span", {
+                    className: "tabular-nums",
+                    children: row.getValue('failureRate')
+                })
+        },
+        {
+            accessorKey: 'flakeRate',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Flake rate"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsx("span", {
+                    className: "tabular-nums",
+                    children: row.getValue('flakeRate')
+                })
+        }
+    ];
+/**
+ * Create column definitions for User data
+ */ export const createUserColumns = ()=>[
+        {
+            accessorKey: 'name',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Name"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsx("div", {
+                    className: "font-medium text-foreground-neutral-base",
+                    children: row.getValue('name')
+                })
+        },
+        {
+            accessorKey: 'email',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Email"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsx("div", {
+                    className: "text-foreground-neutral-subtle",
+                    children: row.getValue('email')
+                })
+        },
+        {
+            accessorKey: 'role',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Role"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsx(Badge, {
+                    variant: "neutral",
+                    children: row.getValue('role')
+                })
+        },
+        {
+            accessorKey: 'status',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Status"
+                }),
+            cell: ({ row })=>{
+                const status = row.getValue('status');
+                return /*#__PURE__*/ _jsx(Badge, {
+                    variant: status === 'active' ? 'success' : 'neutral',
+                    children: status.charAt(0).toUpperCase() + status.slice(1)
+                });
+            }
+        }
+    ];
+/**
+ * Create column definitions for SearchJobData
+ */ export const createSearchJobColumns = ()=>[
+        {
+            accessorKey: 'name',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Job Name"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsx("div", {
+                    className: "font-medium text-foreground-neutral-base",
+                    children: row.getValue('name')
+                })
+        },
+        {
+            accessorKey: 'repository',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Repository"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsx("div", {
+                    className: "text-foreground-neutral-subtle font-mono text-xs",
+                    children: row.getValue('repository')
+                })
+        },
+        {
+            accessorKey: 'branch',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Branch"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-6",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            name: "gitBranchLine",
+                            className: "size-14 text-foreground-neutral-muted"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "font-mono text-xs",
+                            children: row.getValue('branch')
+                        })
+                    ]
+                })
+        },
+        {
+            accessorKey: 'total',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Total"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsx("span", {
+                    className: "tabular-nums",
+                    children: row.getValue('total')
+                })
+        },
+        {
+            accessorKey: 'success',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Success"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-6",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "size-6 rounded-full bg-tag-success-icon"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "tabular-nums",
+                            children: row.getValue('success')
+                        })
+                    ]
+                })
+        },
+        {
+            accessorKey: 'failed',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Failed"
+                }),
+            cell: ({ row })=>/*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center gap-6",
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "size-6 rounded-full bg-tag-error-icon"
+                        }),
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "tabular-nums",
+                            children: row.getValue('failed')
+                        })
+                    ]
+                })
+        },
+        {
+            accessorKey: 'status',
+            header: ({ column })=>/*#__PURE__*/ _jsx(TableColumnHeader, {
+                    column: column,
+                    title: "Status"
+                }),
+            cell: ({ row })=>{
+                const status = row.getValue('status');
+                const variantMap = {
+                    active: 'info',
+                    completed: 'success',
+                    failed: 'error'
+                };
+                return /*#__PURE__*/ _jsx(Badge, {
+                    variant: variantMap[status],
+                    children: status.charAt(0).toUpperCase() + status.slice(1)
+                });
+            }
+        }
+    ];
+/**
+ * Column instances for reuse in stories
+ */ export const jobColumns = createJobColumns();
+export const userColumns = createUserColumns();
+export const searchJobColumns = createSearchJobColumns();
+
+//# sourceMappingURL=table.stories.columns.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table/table.stories.columns.tsx"],"sourcesContent":["/**\n * Column definitions for Table stories\n */\n\nimport type {ColumnDef} from '@tanstack/react-table';\nimport {Badge} from 'components/badge';\nimport {Icon} from 'components/icon';\nimport type {JobData, SearchJobData, User} from './table.stories.data';\nimport {TableColumnHeader} from './table-column-header';\n\n/**\n * Create column definitions for JobData\n */\nexport const createJobColumns = (): ColumnDef<JobData>[] => [\n  {\n    accessorKey: 'name',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Name\" />,\n    cell: ({row}) => (\n      <div className=\"font-medium text-foreground-neutral-base\">{row.getValue('name')}</div>\n    ),\n  },\n  {\n    accessorKey: 'total',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Total\" />,\n    cell: ({row}) => (\n      <div className=\"flex items-center gap-6\">\n        <div className=\"size-6 rounded-full bg-foreground-neutral-muted\" />\n        <span className=\"tabular-nums\">{row.getValue('total')}</span>\n      </div>\n    ),\n  },\n  {\n    accessorKey: 'success',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Success\" />,\n    cell: ({row}) => (\n      <div className=\"flex items-center gap-6\">\n        <div className=\"size-6 rounded-full bg-tag-success-icon\" />\n        <span className=\"tabular-nums\">{row.getValue('success')}</span>\n      </div>\n    ),\n  },\n  {\n    accessorKey: 'failed',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Failed\" />,\n    cell: ({row}) => (\n      <div className=\"flex items-center gap-6\">\n        <div className=\"size-6 rounded-full bg-tag-error-icon\" />\n        <span className=\"tabular-nums\">{row.getValue('failed')}</span>\n      </div>\n    ),\n  },\n  {\n    accessorKey: 'neutral',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Neutral\" />,\n    cell: ({row}) => (\n      <div className=\"flex items-center gap-6\">\n        <div className=\"size-6 rounded-full bg-foreground-neutral-muted\" />\n        <span className=\"tabular-nums\">{row.getValue('neutral')}</span>\n      </div>\n    ),\n  },\n  {\n    accessorKey: 'flaked',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Flaked\" />,\n    cell: ({row}) => (\n      <div className=\"flex items-center gap-6\">\n        <div className=\"size-6 rounded-full bg-tag-warning-icon\" />\n        <span className=\"tabular-nums\">{row.getValue('flaked')}</span>\n      </div>\n    ),\n  },\n  {\n    accessorKey: 'failureRate',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Failure rate\" />,\n    cell: ({row}) => <span className=\"tabular-nums\">{row.getValue('failureRate')}</span>,\n  },\n  {\n    accessorKey: 'flakeRate',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Flake rate\" />,\n    cell: ({row}) => <span className=\"tabular-nums\">{row.getValue('flakeRate')}</span>,\n  },\n];\n\n/**\n * Create column definitions for User data\n */\nexport const createUserColumns = (): ColumnDef<User>[] => [\n  {\n    accessorKey: 'name',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Name\" />,\n    cell: ({row}) => (\n      <div className=\"font-medium text-foreground-neutral-base\">{row.getValue('name')}</div>\n    ),\n  },\n  {\n    accessorKey: 'email',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Email\" />,\n    cell: ({row}) => <div className=\"text-foreground-neutral-subtle\">{row.getValue('email')}</div>,\n  },\n  {\n    accessorKey: 'role',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Role\" />,\n    cell: ({row}) => <Badge variant=\"neutral\">{row.getValue('role')}</Badge>,\n  },\n  {\n    accessorKey: 'status',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Status\" />,\n    cell: ({row}) => {\n      const status = row.getValue('status') as string;\n      return (\n        <Badge variant={status === 'active' ? 'success' : 'neutral'}>\n          {status.charAt(0).toUpperCase() + status.slice(1)}\n        </Badge>\n      );\n    },\n  },\n];\n\n/**\n * Create column definitions for SearchJobData\n */\nexport const createSearchJobColumns = (): ColumnDef<SearchJobData>[] => [\n  {\n    accessorKey: 'name',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Job Name\" />,\n    cell: ({row}) => (\n      <div className=\"font-medium text-foreground-neutral-base\">{row.getValue('name')}</div>\n    ),\n  },\n  {\n    accessorKey: 'repository',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Repository\" />,\n    cell: ({row}) => (\n      <div className=\"text-foreground-neutral-subtle font-mono text-xs\">\n        {row.getValue('repository')}\n      </div>\n    ),\n  },\n  {\n    accessorKey: 'branch',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Branch\" />,\n    cell: ({row}) => (\n      <div className=\"flex items-center gap-6\">\n        <Icon name=\"gitBranchLine\" className=\"size-14 text-foreground-neutral-muted\" />\n        <span className=\"font-mono text-xs\">{row.getValue('branch')}</span>\n      </div>\n    ),\n  },\n  {\n    accessorKey: 'total',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Total\" />,\n    cell: ({row}) => <span className=\"tabular-nums\">{row.getValue('total')}</span>,\n  },\n  {\n    accessorKey: 'success',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Success\" />,\n    cell: ({row}) => (\n      <div className=\"flex items-center gap-6\">\n        <div className=\"size-6 rounded-full bg-tag-success-icon\" />\n        <span className=\"tabular-nums\">{row.getValue('success')}</span>\n      </div>\n    ),\n  },\n  {\n    accessorKey: 'failed',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Failed\" />,\n    cell: ({row}) => (\n      <div className=\"flex items-center gap-6\">\n        <div className=\"size-6 rounded-full bg-tag-error-icon\" />\n        <span className=\"tabular-nums\">{row.getValue('failed')}</span>\n      </div>\n    ),\n  },\n  {\n    accessorKey: 'status',\n    header: ({column}) => <TableColumnHeader column={column} title=\"Status\" />,\n    cell: ({row}) => {\n      const status = row.getValue('status') as string;\n      const variantMap = {\n        active: 'info',\n        completed: 'success',\n        failed: 'error',\n      } as const;\n      return (\n        <Badge variant={variantMap[status as keyof typeof variantMap]}>\n          {status.charAt(0).toUpperCase() + status.slice(1)}\n        </Badge>\n      );\n    },\n  },\n];\n\n/**\n * Column instances for reuse in stories\n */\nexport const jobColumns = createJobColumns();\nexport const userColumns = createUserColumns();\nexport const searchJobColumns = createSearchJobColumns();\n"],"names":["Badge","Icon","TableColumnHeader","createJobColumns","accessorKey","header","column","title","cell","row","div","className","getValue","span","createUserColumns","variant","status","charAt","toUpperCase","slice","createSearchJobColumns","name","variantMap","active","completed","failed","jobColumns","userColumns","searchJobColumns"],"mappings":"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"}

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

@@ -0,0 +1,14 @@
+/**
+ * Shared components for Table stories
+ */
+/**
+ * Empty state component for job tables
+ */
+export declare function JobsEmptyState(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Search modal content component with job filtering
+ */
+export declare function SearchModalContent({ onSelectJob }: {
+    onSelectJob: (jobId: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=table.stories.components.d.ts.map

package/dist/components/table/table.stories.components.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.stories.components.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.stories.components.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAgBH;;GAEG;AACH,wBAAgB,cAAc,4CAoB7B;AAED;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAC,WAAW,EAAC,EAAE;IAAC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAAC,2CAyDvF"}

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

@@ -0,0 +1,107 @@
+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 { 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';
+import { useMemo } from 'react';
+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."
+                    })
+                ]
+            })
+        ]
+    });
+}
+/**
+ * Search modal content component with job filtering
+ */ export function SearchModalContent({ onSelectJob }) {
+    const { searchValue } = useSearchContext();
+    const modalFilteredData = useMemo(()=>{
+        if (!searchValue) {
+            return searchJobsData;
+        }
+        const query = searchValue.toLowerCase();
+        return searchJobsData.filter((job)=>job.name.toLowerCase().includes(query) || job.repository.toLowerCase().includes(query) || job.branch.toLowerCase().includes(query));
+    }, [
+        searchValue
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(SearchInput, {
+                placeholder: "Search by job name, repository, or branch..."
+            }),
+            /*#__PURE__*/ _jsx(SearchList, {
+                children: modalFilteredData.length === 0 ? /*#__PURE__*/ _jsx(SearchEmpty, {
+                    children: /*#__PURE__*/ _jsx(JobsEmptyState, {})
+                }) : /*#__PURE__*/ _jsx(SearchGroup, {
+                    heading: searchValue ? `Results (${modalFilteredData.length})` : 'All Jobs',
+                    children: modalFilteredData.map((job)=>/*#__PURE__*/ _jsx(SearchItem, {
+                            value: `${job.id}-${job.name}-${job.repository}-${job.branch}`,
+                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                name: "gitBranchLine",
+                                className: "size-16 text-foreground-neutral-subtle"
+                            }),
+                            description: `${job.repository} • ${job.branch}`,
+                            onSelect: ()=>onSelectJob(job.id),
+                            children: job.name
+                        }, job.id))
+                })
+            }),
+            /*#__PURE__*/ _jsx(SearchFooter, {
+                children: /*#__PURE__*/ _jsxs("div", {
+                    className: "flex items-center justify-between px-8 py-6",
+                    children: [
+                        /*#__PURE__*/ _jsx(Text, {
+                            size: "xs",
+                            className: "text-foreground-neutral-muted",
+                            children: "Select a job to filter the table"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex items-center gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(Icon, {
+                                    name: "cornerDownLeft",
+                                    className: "size-14 text-foreground-neutral-muted"
+                                }),
+                                /*#__PURE__*/ _jsx(Text, {
+                                    size: "xs",
+                                    className: "text-foreground-neutral-muted",
+                                    children: "to select"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=table.stories.components.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/table/table.stories.components.tsx"],"sourcesContent":["/**\n * Shared components for Table stories\n */\n\nimport {Icon} from 'components/icon';\nimport {useSearchContext} from 'components/search/search-context';\nimport {\n  SearchEmpty,\n  SearchFooter,\n  SearchGroup,\n  SearchInput,\n  SearchItem,\n  SearchList,\n} from 'components/search/search-modal';\nimport {Text} from 'components/typography';\nimport {useMemo} from 'react';\nimport {searchJobsData} from './table.stories.data';\n\n/**\n * Empty state component for job tables\n */\nexport function JobsEmptyState() {\n  return (\n    <div className=\"flex flex-col items-center justify-center gap-12 py-48\">\n      <div className=\"size-32 rounded-6 bg-transparent border border-border-neutral-strong flex items-center justify-center\">\n        <Icon\n          name=\"shipfox\"\n          className=\"size-16 text-foreground-neutral-subtle\"\n          color=\"var(--foreground-neutral-subtle, #a1a1aa)\"\n        />\n      </div>\n      <div className=\"text-center space-y-4\">\n        <Text size=\"sm\" className=\"text-foreground-neutral-base\">\n          No jobs yet\n        </Text>\n        <Text size=\"xs\" className=\"text-foreground-neutral-muted\">\n          Import past runs or start a runner.\n        </Text>\n      </div>\n    </div>\n  );\n}\n\n/**\n * Search modal content component with job filtering\n */\nexport function SearchModalContent({onSelectJob}: {onSelectJob: (jobId: string) => void}) {\n  const {searchValue} = useSearchContext();\n\n  const modalFilteredData = useMemo(() => {\n    if (!searchValue) {\n      return searchJobsData;\n    }\n    const query = searchValue.toLowerCase();\n    return searchJobsData.filter(\n      (job) =>\n        job.name.toLowerCase().includes(query) ||\n        job.repository.toLowerCase().includes(query) ||\n        job.branch.toLowerCase().includes(query),\n    );\n  }, [searchValue]);\n\n  return (\n    <>\n      <SearchInput placeholder=\"Search by job name, repository, or branch...\" />\n      <SearchList>\n        {modalFilteredData.length === 0 ? (\n          <SearchEmpty>\n            <JobsEmptyState />\n          </SearchEmpty>\n        ) : (\n          <SearchGroup heading={searchValue ? `Results (${modalFilteredData.length})` : 'All Jobs'}>\n            {modalFilteredData.map((job) => (\n              <SearchItem\n                key={job.id}\n                value={`${job.id}-${job.name}-${job.repository}-${job.branch}`}\n                icon={\n                  <Icon name=\"gitBranchLine\" className=\"size-16 text-foreground-neutral-subtle\" />\n                }\n                description={`${job.repository} • ${job.branch}`}\n                onSelect={() => onSelectJob(job.id)}\n              >\n                {job.name}\n              </SearchItem>\n            ))}\n          </SearchGroup>\n        )}\n      </SearchList>\n      <SearchFooter>\n        <div className=\"flex items-center justify-between px-8 py-6\">\n          <Text size=\"xs\" className=\"text-foreground-neutral-muted\">\n            Select a job to filter the table\n          </Text>\n          <div className=\"flex items-center gap-8\">\n            <Icon name=\"cornerDownLeft\" className=\"size-14 text-foreground-neutral-muted\" />\n            <Text size=\"xs\" className=\"text-foreground-neutral-muted\">\n              to select\n            </Text>\n          </div>\n        </div>\n      </SearchFooter>\n    </>\n  );\n}\n"],"names":["Icon","useSearchContext","SearchEmpty","SearchFooter","SearchGroup","SearchInput","SearchItem","SearchList","Text","useMemo","searchJobsData","JobsEmptyState","div","className","name","color","size","SearchModalContent","onSelectJob","searchValue","modalFilteredData","query","toLowerCase","filter","job","includes","repository","branch","placeholder","length","heading","map","value","id","icon","description","onSelect"],"mappings":";AAAA;;CAEC,GAED,SAAQA,IAAI,QAAO,kBAAkB;AACrC,SAAQC,gBAAgB,QAAO,mCAAmC;AAClE,SACEC,WAAW,EACXC,YAAY,EACZC,WAAW,EACXC,WAAW,EACXC,UAAU,EACVC,UAAU,QACL,iCAAiC;AACxC,SAAQC,IAAI,QAAO,wBAAwB;AAC3C,SAAQC,OAAO,QAAO,QAAQ;AAC9B,SAAQC,cAAc,QAAO,uBAAuB;AAEpD;;CAEC,GACD,OAAO,SAASC;IACd,qBACE,MAACC;QAAIC,WAAU;;0BACb,KAACD;gBAAIC,WAAU;0BACb,cAAA,KAACb;oBACCc,MAAK;oBACLD,WAAU;oBACVE,OAAM;;;0BAGV,MAACH;gBAAIC,WAAU;;kCACb,KAACL;wBAAKQ,MAAK;wBAAKH,WAAU;kCAA+B;;kCAGzD,KAACL;wBAAKQ,MAAK;wBAAKH,WAAU;kCAAgC;;;;;;AAMlE;AAEA;;CAEC,GACD,OAAO,SAASI,mBAAmB,EAACC,WAAW,EAAyC;IACtF,MAAM,EAACC,WAAW,EAAC,GAAGlB;IAEtB,MAAMmB,oBAAoBX,QAAQ;QAChC,IAAI,CAACU,aAAa;YAChB,OAAOT;QACT;QACA,MAAMW,QAAQF,YAAYG,WAAW;QACrC,OAAOZ,eAAea,MAAM,CAC1B,CAACC,MACCA,IAAIV,IAAI,CAACQ,WAAW,GAAGG,QAAQ,CAACJ,UAChCG,IAAIE,UAAU,CAACJ,WAAW,GAAGG,QAAQ,CAACJ,UACtCG,IAAIG,MAAM,CAACL,WAAW,GAAGG,QAAQ,CAACJ;IAExC,GAAG;QAACF;KAAY;IAEhB,qBACE;;0BACE,KAACd;gBAAYuB,aAAY;;0BACzB,KAACrB;0BACEa,kBAAkBS,MAAM,KAAK,kBAC5B,KAAC3B;8BACC,cAAA,KAACS;mCAGH,KAACP;oBAAY0B,SAASX,cAAc,CAAC,SAAS,EAAEC,kBAAkBS,MAAM,CAAC,CAAC,CAAC,GAAG;8BAC3ET,kBAAkBW,GAAG,CAAC,CAACP,oBACtB,KAAClB;4BAEC0B,OAAO,GAAGR,IAAIS,EAAE,CAAC,CAAC,EAAET,IAAIV,IAAI,CAAC,CAAC,EAAEU,IAAIE,UAAU,CAAC,CAAC,EAAEF,IAAIG,MAAM,EAAE;4BAC9DO,oBACE,KAAClC;gCAAKc,MAAK;gCAAgBD,WAAU;;4BAEvCsB,aAAa,GAAGX,IAAIE,UAAU,CAAC,GAAG,EAAEF,IAAIG,MAAM,EAAE;4BAChDS,UAAU,IAAMlB,YAAYM,IAAIS,EAAE;sCAEjCT,IAAIV,IAAI;2BARJU,IAAIS,EAAE;;;0BAcrB,KAAC9B;0BACC,cAAA,MAACS;oBAAIC,WAAU;;sCACb,KAACL;4BAAKQ,MAAK;4BAAKH,WAAU;sCAAgC;;sCAG1D,MAACD;4BAAIC,WAAU;;8CACb,KAACb;oCAAKc,MAAK;oCAAiBD,WAAU;;8CACtC,KAACL;oCAAKQ,MAAK;oCAAKH,WAAU;8CAAgC;;;;;;;;;AAQtE"}

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

@@ -0,0 +1,54 @@
+/**
+ * Data types, generation functions, and sample data for Table stories
+ */
+export type JobData = {
+    id: string;
+    name: string;
+    total: number;
+    success: number;
+    failed: number;
+    neutral: number;
+    flaked: number;
+    failureRate: string;
+    flakeRate: string;
+    repository?: string;
+    branch?: string;
+};
+export type SearchJobData = {
+    id: string;
+    name: string;
+    total: number;
+    success: number;
+    failed: number;
+    status: 'active' | 'completed' | 'failed';
+    repository: string;
+    branch: string;
+};
+export type User = {
+    id: string;
+    name: string;
+    email: string;
+    role: string;
+    status: 'active' | 'inactive';
+};
+/**
+ * Generate mock job data
+ */
+export declare const generateJobData: (count: number) => JobData[];
+/**
+ * Generate mock search job data with varied properties
+ */
+export declare const generateSearchJobData: (count: number) => SearchJobData[];
+/**
+ * Sample job data
+ */
+export declare const jobsData: JobData[];
+/**
+ * Sample search job data
+ */
+export declare const searchJobsData: SearchJobData[];
+/**
+ * Sample user data
+ */
+export declare const users: User[];
+//# sourceMappingURL=table.stories.data.d.ts.map

package/dist/components/table/table.stories.data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.stories.data.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.stories.data.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,QAAQ,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,GAAG,UAAU,CAAC;CAC/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,eAAe,GAAI,OAAO,MAAM,KAAG,OAAO,EAuBtD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,GAAI,OAAO,MAAM,KAAG,aAAa,EA2BlE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,QAAQ,WAAuB,CAAC;AAE7C;;GAEG;AACH,eAAO,MAAM,cAAc,iBAA4B,CAAC;AAExD;;GAEG;AACH,eAAO,MAAM,KAAK,EAAE,IAAI,EAMvB,CAAC"}

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

@@ -0,0 +1,122 @@
+/**
+ * Data types, generation functions, and sample data for Table stories
+ */ /**
+ * Generate mock job data
+ */ export const generateJobData = (count)=>{
+    return Array.from({
+        length: count
+    }, (_, i)=>{
+        const total = 40 + i % 20; // keeps totals in a reasonable range
+        const failed = i % 7;
+        const flaked = i % 5;
+        const neutral = i % 3;
+        const success = total - failed - flaked - neutral;
+        const failureRate = `${Math.round(failed / total * 100)}%`;
+        const flakeRate = `${Math.round(flaked / total * 100)}%`;
+        return {
+            id: `job-${i + 1}`,
+            name: 'Dependabot updates',
+            total,
+            success,
+            failed,
+            neutral,
+            flaked,
+            failureRate,
+            flakeRate,
+            repository: 'shipfox/tooling',
+            branch: 'main'
+        };
+    });
+};
+/**
+ * Generate mock search job data with varied properties
+ */ export const generateSearchJobData = (count)=>{
+    const jobNames = [
+        'Build & Deploy',
+        'Run Tests',
+        'Code Quality Check',
+        'Security Scan',
+        'Integration Tests',
+        'Performance Tests',
+        'Deploy to Staging',
+        'Deploy to Production',
+        'Database Migration',
+        'Cache Warm-up'
+    ];
+    const repositories = [
+        'shipfox/tooling',
+        'shipfox/web',
+        'shipfox/api',
+        'shipfox/mobile'
+    ];
+    const branches = [
+        'main',
+        'develop',
+        'staging',
+        'feat/new-feature'
+    ];
+    const statuses = [
+        'active',
+        'completed',
+        'failed'
+    ];
+    return Array.from({
+        length: count
+    }, (_, i)=>({
+            id: `job-${i + 1}`,
+            name: jobNames[i % jobNames.length],
+            total: Math.floor(Math.random() * 100) + 20,
+            success: Math.floor(Math.random() * 80) + 10,
+            failed: Math.floor(Math.random() * 20),
+            status: statuses[i % statuses.length],
+            repository: repositories[i % repositories.length],
+            branch: branches[i % branches.length]
+        }));
+};
+/**
+ * Sample job data
+ */ export const jobsData = generateJobData(100);
+/**
+ * Sample search job data
+ */ export const searchJobsData = generateSearchJobData(50);
+/**
+ * Sample user data
+ */ export const users = [
+    {
+        id: '1',
+        name: 'John Doe',
+        email: 'john@example.com',
+        role: 'Admin',
+        status: 'active'
+    },
+    {
+        id: '2',
+        name: 'Jane Smith',
+        email: 'jane@example.com',
+        role: 'User',
+        status: 'active'
+    },
+    {
+        id: '3',
+        name: 'Bob Johnson',
+        email: 'bob@example.com',
+        role: 'User',
+        status: 'inactive'
+    },
+    {
+        id: '4',
+        name: 'Alice Williams',
+        email: 'alice@example.com',
+        role: 'Editor',
+        status: 'active'
+    },
+    {
+        id: '5',
+        name: 'Charlie Brown',
+        email: 'charlie@example.com',
+        role: 'User',
+        status: 'active'
+    }
+];
+
+//# sourceMappingURL=table.stories.data.js.map