@shipfox/react-ui 0.15.0 → 0.16.0

package/dist/components/dashboard/index.js

@@ -1,3 +1,24 @@
-export * from './dashboard.js';
+/**
+ * Dashboard Component Exports
+ *
+ * Comprehensive export file for all dashboard-related components and utilities.
+ */ // Chart Components
+export { BarChart, LineChart } from './components/charts/index.js';
+// Shared Components
+export { DashboardAlert } from './components/dashboard-alert.js';
+export { KpiCard, KpiCardsGroup } from './components/kpi-card.js';
+export { MobileSidebar } from './components/mobile-sidebar.js';
+export { defaultSidebarItems, Sidebar } from './components/sidebar.js';
+// Context API
+export { DashboardProvider, DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, useDashboardContext, viewColumnsToVisibilityState } from './context/index.js';
+// Main Dashboard Component
+export { Dashboard } from './dashboard.js';
+// Filter Components
+export { ExpressionFilterBar } from './filters/index.js';
+// Page Components
+export { AnalyticsPage, JobsPage } from './pages/index.js';
+export { TableWrapper } from './table/index.js';
+// Generic Reusable Components
+export { FilterButton, PageToolbar, ToolbarActions, ToolbarSearch, ViewDropdown } from './toolbar/index.js';
 
 //# sourceMappingURL=index.js.map

package/dist/components/dashboard/pages/analytics-page.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Analytics Page Component
+ *
+ * Refactored analytics page using DashboardContext and generic components.
+ */
+/**
+ * Analytics Page
+ *
+ * Main analytics page with KPI cards, charts, and jobs table.
+ * Uses DashboardContext for state management and generic reusable components.
+ *
+ * @example
+ * ```tsx
+ * <DashboardProvider>
+ *   <AnalyticsPage />
+ * </DashboardProvider>
+ * ```
+ */
+export declare function AnalyticsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=analytics-page.d.ts.map

package/dist/components/dashboard/pages/analytics-page.js

@@ -0,0 +1,258 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Analytics Page Component
+ *
+ * Refactored analytics page using DashboardContext and generic components.
+ */ import { jobColumns } from '../../../components/table/table.stories.columns.js';
+import { jobsData } from '../../../components/table/table.stories.data.js';
+import { useMediaQuery } from '../../../hooks/useMediaQuery.js';
+import { useMemo } from 'react';
+import { BarChart } from '../components/charts/bar-chart.js';
+import { LineChart } from '../components/charts/line-chart.js';
+import { DashboardAlert } from '../components/dashboard-alert.js';
+import { KpiCardsGroup } from '../components/kpi-card.js';
+import { MobileSidebar } from '../components/mobile-sidebar.js';
+import { defaultSidebarItems, Sidebar } from '../components/sidebar.js';
+import { useDashboardContext } from '../context/index.js';
+import { ExpressionFilterBar } from '../filters/index.js';
+import { TableWrapper } from '../table/index.js';
+import { PageToolbar, ToolbarActions } from '../toolbar/index.js';
+// Sample data for the performance chart
+const performanceData = [
+    {
+        label: '1',
+        dataA: 150,
+        dataB: 200,
+        dataC: 280,
+        dataD: 180
+    },
+    {
+        label: '2',
+        dataA: 250,
+        dataB: 180,
+        dataC: 320,
+        dataD: 220
+    },
+    {
+        label: '3',
+        dataA: 380,
+        dataB: 320,
+        dataC: 410,
+        dataD: 280
+    },
+    {
+        label: '4',
+        dataA: 320,
+        dataB: 280,
+        dataC: 350,
+        dataD: 240
+    },
+    {
+        label: '5',
+        dataA: 280,
+        dataB: 220,
+        dataC: 180,
+        dataD: 200
+    },
+    {
+        label: '6',
+        dataA: 180,
+        dataB: 250,
+        dataC: 220,
+        dataD: 160
+    }
+];
+// Generate sample data for duration distribution
+function generateDurationData() {
+    const count = 40;
+    const data = [];
+    for(let i = 0; i < count; i++){
+        const baseValue = 80 + Math.random() * 120;
+        const spike = i % 8 === 0 ? Math.random() * 300 : 0;
+        data.push({
+            label: String(i + 1),
+            value: Math.round(baseValue + spike)
+        });
+    }
+    return data;
+}
+const durationData = generateDurationData();
+/**
+ * KPI Cards configuration
+ */ const kpiCards = [
+    {
+        label: 'Total',
+        value: '1211',
+        variant: 'neutral'
+    },
+    {
+        label: 'Success',
+        value: '1200',
+        variant: 'success'
+    },
+    {
+        label: 'Neutral',
+        value: '11',
+        variant: 'neutral'
+    },
+    {
+        label: 'Failure rate',
+        value: '0%',
+        variant: 'success'
+    }
+];
+/**
+ * Analytics Page
+ *
+ * Main analytics page with KPI cards, charts, and jobs table.
+ * Uses DashboardContext for state management and generic reusable components.
+ *
+ * @example
+ * ```tsx
+ * <DashboardProvider>
+ *   <AnalyticsPage />
+ * </DashboardProvider>
+ * ```
+ */ export function AnalyticsPage() {
+    const { searchQuery, setSearchQuery, timePeriod, setTimePeriod, lastUpdated, columnVisibility, updateColumnVisibility, activeSidebarItem, setActiveSidebarItem, resourceType, setResourceType } = useDashboardContext();
+    // Responsive breakpoints
+    const isDesktop = useMediaQuery('(min-width: 1024px)');
+    // Get the active sidebar item label for the title
+    const pageTitle = useMemo(()=>{
+        const activeItem = defaultSidebarItems.find((item)=>item.id === activeSidebarItem);
+        return activeItem?.label || 'Reliability'; // Default to Reliability
+    }, [
+        activeSidebarItem
+    ]);
+    // Filter data based on search query
+    const filteredData = useMemo(()=>jobsData.filter((job)=>job.name.toLowerCase().includes(searchQuery.toLowerCase())), [
+        searchQuery
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex h-full flex-col",
+        children: [
+            /*#__PURE__*/ _jsx(PageToolbar, {
+                title: pageTitle,
+                timePeriod: timePeriod,
+                onTimePeriodChange: setTimePeriod,
+                lastUpdated: lastUpdated,
+                children: !isDesktop && /*#__PURE__*/ _jsx(MobileSidebar, {
+                    items: defaultSidebarItems,
+                    activeItemId: activeSidebarItem,
+                    onItemClick: (item)=>setActiveSidebarItem(item.id)
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-1 overflow-hidden bg-background-neutral-base",
+                children: [
+                    isDesktop && /*#__PURE__*/ _jsx(Sidebar, {
+                        items: defaultSidebarItems,
+                        activeItemId: activeSidebarItem,
+                        onItemClick: (item)=>setActiveSidebarItem(item.id)
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex-1 px-12 pb-12 pt-4 md:px-24 md:pb-24 space-y-12 md:space-y-16 lg:space-y-20 overflow-auto",
+                        children: [
+                            /*#__PURE__*/ _jsx(DashboardAlert, {}),
+                            /*#__PURE__*/ _jsx(ExpressionFilterBar, {
+                                value: resourceType,
+                                onValueChange: setResourceType
+                            }),
+                            /*#__PURE__*/ _jsx(ToolbarActions, {}),
+                            /*#__PURE__*/ _jsx(KpiCardsGroup, {
+                                cards: kpiCards
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                className: "flex flex-col lg:flex-row gap-12 md:gap-16 lg:gap-20",
+                                children: [
+                                    /*#__PURE__*/ _jsx(LineChart, {
+                                        data: performanceData,
+                                        lines: [
+                                            {
+                                                dataKey: 'dataA',
+                                                name: 'Data A',
+                                                color: 'blue'
+                                            },
+                                            {
+                                                dataKey: 'dataB',
+                                                name: 'Data B',
+                                                color: 'green'
+                                            },
+                                            {
+                                                dataKey: 'dataC',
+                                                name: 'Data C',
+                                                color: 'orange'
+                                            },
+                                            {
+                                                dataKey: 'dataD',
+                                                name: 'Data D',
+                                                color: 'purple'
+                                            }
+                                        ],
+                                        title: "Performance over time",
+                                        className: "flex-1 min-h-300",
+                                        yAxis: {
+                                            domain: [
+                                                0,
+                                                500
+                                            ],
+                                            ticks: [
+                                                0,
+                                                100,
+                                                200,
+                                                300,
+                                                400,
+                                                500
+                                            ]
+                                        },
+                                        tooltip: {
+                                            labelFormatter: ()=>`Jul 22, 2025`
+                                        }
+                                    }),
+                                    /*#__PURE__*/ _jsx(BarChart, {
+                                        data: durationData,
+                                        bars: [
+                                            {
+                                                dataKey: 'value',
+                                                name: 'Duration',
+                                                color: 'orange'
+                                            }
+                                        ],
+                                        title: "Duration distribution",
+                                        className: "flex-1 min-h-300",
+                                        yAxis: {
+                                            domain: [
+                                                0,
+                                                500
+                                            ],
+                                            ticks: [
+                                                0,
+                                                100,
+                                                200,
+                                                300,
+                                                400,
+                                                500
+                                            ]
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(TableWrapper, {
+                                title: "Analytics breakdown",
+                                columns: jobColumns,
+                                data: filteredData,
+                                searchQuery: searchQuery,
+                                onSearchChange: setSearchQuery,
+                                onSearchClear: ()=>setSearchQuery(''),
+                                columnVisibility: columnVisibility,
+                                onColumnVisibilityChange: updateColumnVisibility
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=analytics-page.js.map

package/dist/components/dashboard/pages/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Dashboard pages exports
+ */
+export { AnalyticsPage } from './analytics-page';
+export { JobsPage } from './jobs-page';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dashboard/pages/index.js

@@ -0,0 +1,6 @@
+/**
+ * Dashboard pages exports
+ */ export { AnalyticsPage } from './analytics-page.js';
+export { JobsPage } from './jobs-page.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/dashboard/pages/jobs-page.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Jobs Page Component
+ *
+ * Refactored jobs page using DashboardContext and generic components.
+ */
+/**
+ * Jobs Page
+ *
+ * Simple jobs page with table showing job breakdown.
+ * Uses DashboardContext for state management and generic reusable components.
+ *
+ * @example
+ * ```tsx
+ * <DashboardProvider>
+ *   <JobsPage />
+ * </DashboardProvider>
+ * ```
+ */
+export declare function JobsPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=jobs-page.d.ts.map

package/dist/components/dashboard/pages/jobs-page.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Jobs Page Component
+ *
+ * Refactored jobs page using DashboardContext and generic components.
+ */ import { jobColumns } from '../../../components/table/table.stories.columns.js';
+import { jobsData } from '../../../components/table/table.stories.data.js';
+import { useMemo } from 'react';
+import { useDashboardContext } from '../context/index.js';
+import { TableWrapper } from '../table/index.js';
+import { PageToolbar } from '../toolbar/index.js';
+/**
+ * Jobs Page
+ *
+ * Simple jobs page with table showing job breakdown.
+ * Uses DashboardContext for state management and generic reusable components.
+ *
+ * @example
+ * ```tsx
+ * <DashboardProvider>
+ *   <JobsPage />
+ * </DashboardProvider>
+ * ```
+ */ export function JobsPage() {
+    const { searchQuery, setSearchQuery, timePeriod, setTimePeriod, lastUpdated, columnVisibility, updateColumnVisibility } = useDashboardContext();
+    // Filter data based on search query
+    const filteredData = useMemo(()=>jobsData.filter((job)=>job.name.toLowerCase().includes(searchQuery.toLowerCase())), [
+        searchQuery
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "flex h-full flex-col",
+        children: [
+            /*#__PURE__*/ _jsx(PageToolbar, {
+                title: "Jobs",
+                timePeriod: timePeriod,
+                onTimePeriodChange: setTimePeriod,
+                lastUpdated: lastUpdated
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                className: "flex-1 px-12 pb-12 pt-4 md:px-24 md:pb-24 bg-background-neutral-base overflow-auto",
+                children: /*#__PURE__*/ _jsx(TableWrapper, {
+                    title: "Jobs breakdown",
+                    columns: jobColumns,
+                    data: filteredData,
+                    searchQuery: searchQuery,
+                    onSearchChange: setSearchQuery,
+                    onSearchClear: ()=>setSearchQuery(''),
+                    columnVisibility: columnVisibility,
+                    onColumnVisibilityChange: updateColumnVisibility
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=jobs-page.js.map

package/dist/components/dashboard/table/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Table components exports
+ */
+export type { TableWrapperProps } from './table-wrapper';
+export { TableWrapper } from './table-wrapper';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/dashboard/table/index.js

@@ -0,0 +1,5 @@
+/**
+ * Table components exports
+ */ export { TableWrapper } from './table-wrapper.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/dashboard/table/table-wrapper.d.ts

@@ -0,0 +1,104 @@
+/**
+ * Generic Table Wrapper Component
+ *
+ * A reusable wrapper for dashboard tables with header, search, and actions.
+ */
+import type { ColumnDef, VisibilityState } from '@tanstack/react-table';
+import type { ComponentProps, ReactNode } from 'react';
+export interface TableWrapperProps<TData, TValue> extends Omit<ComponentProps<'div'>, 'title'> {
+    /**
+     * Table title
+     */
+    title: ReactNode;
+    /**
+     * Column definitions for the table
+     */
+    columns: ColumnDef<TData, TValue>[];
+    /**
+     * Data to display in the table
+     */
+    data: TData[];
+    /**
+     * Search query value
+     */
+    searchQuery?: string;
+    /**
+     * Search input change handler
+     */
+    onSearchChange?: (value: string) => void;
+    /**
+     * Search clear handler
+     */
+    onSearchClear?: () => void;
+    /**
+     * Search placeholder text
+     * @default 'Search...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Column visibility state
+     */
+    columnVisibility?: VisibilityState;
+    /**
+     * Column visibility change handler
+     */
+    onColumnVisibilityChange?: (visibility: VisibilityState) => void;
+    /**
+     * Enable pagination
+     * @default true
+     */
+    pagination?: boolean;
+    /**
+     * Page size
+     * @default 10
+     */
+    pageSize?: number;
+    /**
+     * Page size options
+     * @default [10, 20, 50, 100]
+     */
+    pageSizeOptions?: number[];
+    /**
+     * Show selected count checkbox
+     * @default false
+     */
+    showSelectedCount?: boolean;
+    /**
+     * Row click handler
+     */
+    onRowClick?: (row: TData) => void;
+    /**
+     * Empty state to display when no data
+     */
+    emptyState?: ReactNode;
+    /**
+     * Additional header actions
+     */
+    headerActions?: ReactNode;
+    /**
+     * Show default search and column action
+     * @default true
+     */
+    showDefaultActions?: boolean;
+}
+/**
+ * Generic Table Wrapper
+ *
+ * Provides a consistent table layout with header, search, and actions.
+ * Can be used for any table in the dashboard.
+ *
+ * @example
+ * ```tsx
+ * <TableWrapper
+ *   title="Jobs breakdown"
+ *   columns={jobColumns}
+ *   data={jobsData}
+ *   searchQuery={searchQuery}
+ *   onSearchChange={setSearchQuery}
+ *   columnVisibility={columnVisibility}
+ *   onColumnVisibilityChange={updateColumnVisibility}
+ * />
+ * ```
+ */
+export declare function TableWrapper<TData, TValue>({ title, columns, data, searchQuery, onSearchChange, onSearchClear, searchPlaceholder, columnVisibility, onColumnVisibilityChange, pagination, pageSize, pageSizeOptions, showSelectedCount, onRowClick, emptyState, headerActions, showDefaultActions, className, ...props }: TableWrapperProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=table-wrapper.d.ts.map

package/dist/components/dashboard/table/table-wrapper.js

@@ -0,0 +1,93 @@
+/**
+ * Generic Table Wrapper Component
+ *
+ * A reusable wrapper for dashboard tables with header, search, and actions.
+ */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { SearchInline } from '../../../components/search/search-inline.js';
+import { DataTable } from '../../../components/table/data-table.js';
+import { Header as TypographyHeader } from '../../../components/typography/index.js';
+import { cn } from '../../../utils/cn.js';
+/**
+ * Generic Table Wrapper
+ *
+ * Provides a consistent table layout with header, search, and actions.
+ * Can be used for any table in the dashboard.
+ *
+ * @example
+ * ```tsx
+ * <TableWrapper
+ *   title="Jobs breakdown"
+ *   columns={jobColumns}
+ *   data={jobsData}
+ *   searchQuery={searchQuery}
+ *   onSearchChange={setSearchQuery}
+ *   columnVisibility={columnVisibility}
+ *   onColumnVisibilityChange={updateColumnVisibility}
+ * />
+ * ```
+ */ export function TableWrapper({ title, columns, data, searchQuery = '', onSearchChange, onSearchClear, searchPlaceholder = 'Search...', columnVisibility, onColumnVisibilityChange, pagination = true, pageSize = 10, pageSizeOptions = [
+    10,
+    20,
+    50,
+    100
+], showSelectedCount = false, onRowClick, emptyState, headerActions, showDefaultActions = true, className, ...props }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('rounded-t-8 overflow-hidden', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col md:flex-row md:items-center md:justify-between gap-12 md:gap-0 p-12 border-t border-x border-border-neutral-base rounded-t-8 bg-background-neutral-base",
+                children: [
+                    typeof title === 'string' ? /*#__PURE__*/ _jsx(TypographyHeader, {
+                        variant: "h3",
+                        className: "text-foreground-neutral-base",
+                        children: title
+                    }) : title,
+                    (showDefaultActions || headerActions) && /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center gap-8 md:gap-16 w-full md:w-auto",
+                        children: [
+                            showDefaultActions && /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(SearchInline, {
+                                        placeholder: searchPlaceholder,
+                                        value: searchQuery,
+                                        onChange: (e)=>onSearchChange?.(e.target.value),
+                                        onClear: ()=>onSearchClear?.(),
+                                        className: "flex-1 md: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"
+                                        })
+                                    })
+                                ]
+                            }),
+                            headerActions
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(DataTable, {
+                columns: columns,
+                data: data,
+                pagination: pagination,
+                pageSize: pageSize,
+                pageSizeOptions: pageSizeOptions,
+                showSelectedCount: showSelectedCount,
+                onRowClick: onRowClick,
+                emptyState: emptyState,
+                columnVisibility: columnVisibility,
+                onColumnVisibilityChange: onColumnVisibilityChange,
+                className: "rounded-t-none"
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=table-wrapper.js.map

package/dist/components/dashboard/toolbar/filter-button.d.ts

@@ -0,0 +1,12 @@
+export interface FilterOption {
+    id: string;
+    label: string;
+    checked: boolean;
+}
+export interface FilterButtonProps {
+    filters?: FilterOption[];
+    onFiltersChange?: (filters: FilterOption[]) => void;
+    className?: string;
+}
+export declare function FilterButton({ filters: controlledFilters, onFiltersChange, className, }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=filter-button.d.ts.map