@shipfox/react-ui 0.14.0 → 0.16.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.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.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.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.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