@shipfox/react-ui 0.15.0 → 0.16.0

package/dist/components/dashboard/context/dashboard-context.js

@@ -0,0 +1,175 @@
+/**
+ * Dashboard Context Provider
+ *
+ * Provides centralized state management for dashboard components including
+ * search, filters, column visibility, time period, and sidebar navigation.
+ */ import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { updateViewColumnsFromVisibility, viewColumnsToVisibilityState } from './utils.js';
+const DashboardContext = /*#__PURE__*/ createContext(undefined);
+/**
+ * Default columns configuration
+ */ const DEFAULT_COLUMNS = [
+    {
+        id: 'total',
+        label: 'Total',
+        visible: true
+    },
+    {
+        id: 'success',
+        label: 'Success',
+        visible: true
+    },
+    {
+        id: 'failed',
+        label: 'Failed',
+        visible: true
+    },
+    {
+        id: 'neutral',
+        label: 'Neutral',
+        visible: true
+    },
+    {
+        id: 'flaked',
+        label: 'Flaked',
+        visible: true
+    },
+    {
+        id: 'failure-rate',
+        label: 'Failure rate',
+        visible: true
+    },
+    {
+        id: 'flake-rate',
+        label: 'Flake rate',
+        visible: true
+    },
+    {
+        id: 'repository',
+        label: 'Repository',
+        visible: false
+    },
+    {
+        id: 'branch',
+        label: 'Branch',
+        visible: false
+    }
+];
+/**
+ * Default filters configuration
+ */ const DEFAULT_FILTERS = [
+    {
+        id: 'success',
+        label: 'Success',
+        checked: false
+    },
+    {
+        id: 'failed',
+        label: 'Failed',
+        checked: false
+    },
+    {
+        id: 'neutral',
+        label: 'Neutral',
+        checked: false
+    },
+    {
+        id: 'flaked',
+        label: 'Flaked',
+        checked: false
+    },
+    {
+        id: 'running',
+        label: 'Running',
+        checked: false
+    }
+];
+/**
+ * Dashboard Provider Component
+ *
+ * Wraps dashboard components to provide shared state management.
+ *
+ * @example
+ * ```tsx
+ * <DashboardProvider initialTimePeriod="7days">
+ *   <AnalyticsContent />
+ * </DashboardProvider>
+ * ```
+ */ export function DashboardProvider({ children, initialColumns = DEFAULT_COLUMNS, initialFilters = DEFAULT_FILTERS, initialTimePeriod = '2days', initialActiveSidebarItem = 'reliability', initialResourceType = 'ci-pipeline', columnMapping }) {
+    // State management
+    const [searchQuery, setSearchQuery] = useState('');
+    const [timePeriod, setTimePeriod] = useState(initialTimePeriod);
+    const [lastUpdated, setLastUpdated] = useState('13s ago');
+    const [columns, setColumns] = useState(initialColumns);
+    const [filters, setFilters] = useState(initialFilters);
+    const [activeSidebarItem, setActiveSidebarItem] = useState(initialActiveSidebarItem);
+    const [resourceType, setResourceType] = useState(initialResourceType);
+    // Compute column visibility state
+    const columnVisibility = useMemo(()=>viewColumnsToVisibilityState(columns, columnMapping), [
+        columns,
+        columnMapping
+    ]);
+    // Handle column visibility updates from table
+    const updateColumnVisibility = useCallback((visibility)=>{
+        const updatedColumns = updateViewColumnsFromVisibility(columns, visibility, columnMapping);
+        setColumns(updatedColumns);
+    }, [
+        columns,
+        columnMapping
+    ]);
+    const value = useMemo(()=>({
+            searchQuery,
+            setSearchQuery,
+            timePeriod,
+            setTimePeriod,
+            lastUpdated,
+            setLastUpdated,
+            columns,
+            setColumns,
+            columnVisibility,
+            updateColumnVisibility,
+            filters,
+            setFilters,
+            activeSidebarItem,
+            setActiveSidebarItem,
+            resourceType,
+            setResourceType
+        }), [
+        searchQuery,
+        timePeriod,
+        lastUpdated,
+        columns,
+        columnVisibility,
+        updateColumnVisibility,
+        filters,
+        activeSidebarItem,
+        resourceType
+    ]);
+    return /*#__PURE__*/ _jsx(DashboardContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+/**
+ * Hook to access dashboard context
+ *
+ * @throws Error if used outside of DashboardProvider
+ * @returns Dashboard state and setters
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { searchQuery, setSearchQuery } = useDashboardContext();
+ *   return <input value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} />;
+ * }
+ * ```
+ */ export function useDashboardContext() {
+    const context = useContext(DashboardContext);
+    if (!context) {
+        throw new Error('useDashboardContext must be used within a DashboardProvider');
+    }
+    return context;
+}
+
+//# sourceMappingURL=dashboard-context.js.map

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

@@ -0,0 +1,8 @@
+/**
+ * Dashboard Context exports
+ */
+export type { DashboardProviderProps } from './dashboard-context';
+export { DashboardProvider, useDashboardContext } from './dashboard-context';
+export type { DashboardState, FilterOption, ResourceType, TimePeriod, ViewColumn } from './types';
+export { DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, viewColumnsToVisibilityState, } from './utils';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,6 @@
+/**
+ * Dashboard Context exports
+ */ export { DashboardProvider, useDashboardContext } from './dashboard-context.js';
+export { DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, viewColumnsToVisibilityState } from './utils.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/dashboard/context/types.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Shared types for dashboard components
+ */
+import type { VisibilityState } from '@tanstack/react-table';
+/**
+ * View column configuration for table visibility control
+ */
+export interface ViewColumn {
+    id: string;
+    label: string;
+    visible: boolean;
+}
+/**
+ * Filter option configuration
+ */
+export interface FilterOption {
+    id: string;
+    label: string;
+    checked: boolean;
+}
+/**
+ * Time period option
+ */
+export type TimePeriod = '1hour' | '1day' | '2days' | '7days' | '30days';
+/**
+ * Resource type option
+ */
+export type ResourceType = 'ci-pipeline' | 'ci-jobs' | 'ci-steps' | 'runners' | 'suite' | 'cases';
+/**
+ * Dashboard context state
+ */
+export interface DashboardState {
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    timePeriod: TimePeriod;
+    setTimePeriod: (period: TimePeriod) => void;
+    lastUpdated: string;
+    setLastUpdated: (timestamp: string) => void;
+    columns: ViewColumn[];
+    setColumns: (columns: ViewColumn[]) => void;
+    columnVisibility: VisibilityState;
+    updateColumnVisibility: (visibility: VisibilityState) => void;
+    filters: FilterOption[];
+    setFilters: (filters: FilterOption[]) => void;
+    activeSidebarItem: string;
+    setActiveSidebarItem: (itemId: string) => void;
+    resourceType: ResourceType;
+    setResourceType: (type: ResourceType) => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/components/dashboard/context/types.js

@@ -0,0 +1,7 @@
+/**
+ * Shared types for dashboard components
+ */ /**
+ * Dashboard context state
+ */ export { };
+
+//# sourceMappingURL=types.js.map

package/dist/components/dashboard/context/utils.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Utility functions for dashboard state management
+ */
+import type { VisibilityState } from '@tanstack/react-table';
+import type { ViewColumn } from './types';
+/**
+ * Default column ID to accessor key mapping
+ * Maps ViewColumn IDs (kebab-case) to table column accessorKeys (camelCase)
+ */
+export declare const DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY: Record<string, string>;
+/**
+ * Converts ViewColumn[] to VisibilityState format for DataTable
+ *
+ * @param columns - Array of ViewColumn configurations
+ * @param columnMapping - Optional custom column ID to accessor key mapping
+ * @returns VisibilityState object for TanStack Table
+ */
+export declare function viewColumnsToVisibilityState(columns: ViewColumn[], columnMapping?: Record<string, string>): VisibilityState;
+/**
+ * Updates ViewColumn[] based on VisibilityState changes
+ *
+ * @param columns - Current ViewColumn array
+ * @param visibility - New VisibilityState from table
+ * @param columnMapping - Optional custom column ID to accessor key mapping
+ * @returns Updated ViewColumn array
+ */
+export declare function updateViewColumnsFromVisibility(columns: ViewColumn[], visibility: VisibilityState, columnMapping?: Record<string, string>): ViewColumn[];
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/dashboard/context/utils.js

@@ -0,0 +1,53 @@
+/**
+ * Utility functions for dashboard state management
+ */ /**
+ * Default column ID to accessor key mapping
+ * Maps ViewColumn IDs (kebab-case) to table column accessorKeys (camelCase)
+ */ export const DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY = {
+    total: 'total',
+    success: 'success',
+    failed: 'failed',
+    neutral: 'neutral',
+    flaked: 'flaked',
+    'failure-rate': 'failureRate',
+    'flake-rate': 'flakeRate',
+    repository: 'repository',
+    branch: 'branch'
+};
+/**
+ * Converts ViewColumn[] to VisibilityState format for DataTable
+ *
+ * @param columns - Array of ViewColumn configurations
+ * @param columnMapping - Optional custom column ID to accessor key mapping
+ * @returns VisibilityState object for TanStack Table
+ */ export function viewColumnsToVisibilityState(columns, columnMapping = DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY) {
+    const visibility = {};
+    for (const column of columns){
+        const accessorKey = columnMapping[column.id];
+        if (accessorKey) {
+            visibility[accessorKey] = column.visible;
+        }
+    }
+    return visibility;
+}
+/**
+ * Updates ViewColumn[] based on VisibilityState changes
+ *
+ * @param columns - Current ViewColumn array
+ * @param visibility - New VisibilityState from table
+ * @param columnMapping - Optional custom column ID to accessor key mapping
+ * @returns Updated ViewColumn array
+ */ export function updateViewColumnsFromVisibility(columns, visibility, columnMapping = DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY) {
+    return columns.map((col)=>{
+        const accessorKey = columnMapping[col.id];
+        if (accessorKey && visibility[accessorKey] !== undefined) {
+            return {
+                ...col,
+                visible: visibility[accessorKey]
+            };
+        }
+        return col;
+    });
+}
+
+//# sourceMappingURL=utils.js.map

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

@@ -1,2 +1,28 @@
-export declare function Dashboard(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Dashboard Component
+ *
+ * Main dashboard with context provider and page routing.
+ */
+export interface DashboardProps {
+    /**
+     * Default active tab
+     * @default 'analytics'
+     */
+    defaultActiveTab?: string;
+}
+/**
+ * Dashboard
+ *
+ * Main dashboard component with improved architecture:
+ * - Uses DashboardProvider for centralized state management
+ * - Generic reusable components (PageToolbar, TableWrapper)
+ * - Better separation of concerns
+ * - Cleaner, more maintainable code
+ *
+ * @example
+ * ```tsx
+ * <Dashboard defaultActiveTab="analytics" />
+ * ```
+ */
+export declare function Dashboard({ defaultActiveTab }: DashboardProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=dashboard.d.ts.map

package/dist/components/dashboard/dashboard.js

@@ -1,18 +1,37 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Dashboard Component
+ *
+ * Main dashboard with context provider and page routing.
+ */ import { Tabs, TabsContent, TabsContents } from '../../components/tabs/index.js';
 import { useMotionValueEvent, useScroll } from 'framer-motion';
 import { useCallback, useRef, useState } from 'react';
-import { AnalyticsContent } from './components/analytics-content.js';
 import { AnimatedLogo } from './components/animated-logo.js';
-import { JobsContent } from './components/jobs-content.js';
 import { TopMenu } from './components/top-menu.js';
 import { Topbar } from './components/topbar.js';
+import { DashboardProvider } from './context/index.js';
+import { AnalyticsPage } from './pages/analytics-page.js';
+import { JobsPage } from './pages/jobs-page.js';
 const LOGO_HEIGHT = 48;
 const TOPBAR_HEIGHT = 41;
-export function Dashboard() {
+/**
+ * Dashboard
+ *
+ * Main dashboard component with improved architecture:
+ * - Uses DashboardProvider for centralized state management
+ * - Generic reusable components (PageToolbar, TableWrapper)
+ * - Better separation of concerns
+ * - Cleaner, more maintainable code
+ *
+ * @example
+ * ```tsx
+ * <Dashboard defaultActiveTab="analytics" />
+ * ```
+ */ export function Dashboard({ defaultActiveTab = 'analytics' }) {
     const containerRef = useRef(null);
     const topbarRef = useRef(null);
     const [scrollProgress, setScrollProgress] = useState(0);
-    const [activeTab, setActiveTab] = useState('analytics');
+    const [activeTab, setActiveTab] = useState(defaultActiveTab);
     const { scrollY } = useScroll({
         container: containerRef
     });
@@ -31,39 +50,60 @@ export function Dashboard() {
         setScrollProgress(0);
     }, []);
     const isTopbarHidden = scrollProgress >= 1;
-    return /*#__PURE__*/ _jsxs("div", {
-        className: "flex flex-col w-full h-full",
-        children: [
-            /*#__PURE__*/ _jsx(AnimatedLogo, {
-                scrollProgress: scrollProgress
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                ref: containerRef,
-                className: "flex flex-col w-full h-full overflow-auto",
-                children: [
-                    /*#__PURE__*/ _jsx("div", {
-                        ref: topbarRef,
-                        children: /*#__PURE__*/ _jsx(Topbar, {
-                            hideLogo: isTopbarHidden
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx("div", {
-                        className: "sticky top-0 z-40 border-b border-border-neutral-strong bg-background-neutral-base",
-                        children: /*#__PURE__*/ _jsx("div", {
-                            style: {
-                                paddingLeft: `${(1 - (1 - scrollProgress) ** 3) * (LOGO_HEIGHT - 8)}px`
-                            },
-                            children: /*#__PURE__*/ _jsx(TopMenu, {
-                                activeTab: activeTab,
-                                onTabChange: handleTabChange
+    return /*#__PURE__*/ _jsx(DashboardProvider, {
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col w-full h-full",
+            children: [
+                /*#__PURE__*/ _jsx(AnimatedLogo, {
+                    scrollProgress: scrollProgress
+                }),
+                /*#__PURE__*/ _jsx("div", {
+                    className: "flex flex-1 w-full h-full overflow-hidden",
+                    children: /*#__PURE__*/ _jsxs("div", {
+                        ref: containerRef,
+                        className: "flex flex-col flex-1 w-full h-full overflow-auto",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                ref: topbarRef,
+                                children: /*#__PURE__*/ _jsx(Topbar, {
+                                    hideLogo: isTopbarHidden
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(Tabs, {
+                                value: activeTab,
+                                onValueChange: handleTabChange,
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "sticky top-0 z-40 border-b border-border-neutral-strong bg-background-neutral-base",
+                                        children: /*#__PURE__*/ _jsx("div", {
+                                            style: {
+                                                paddingLeft: `${(1 - (1 - scrollProgress) ** 3) * (LOGO_HEIGHT - 8)}px`
+                                            },
+                                            children: /*#__PURE__*/ _jsx(TopMenu, {
+                                                activeTab: activeTab,
+                                                onTabChange: handleTabChange
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs(TabsContents, {
+                                        children: [
+                                            /*#__PURE__*/ _jsx(TabsContent, {
+                                                value: "analytics",
+                                                children: /*#__PURE__*/ _jsx(AnalyticsPage, {})
+                                            }),
+                                            /*#__PURE__*/ _jsx(TabsContent, {
+                                                value: "jobs",
+                                                children: /*#__PURE__*/ _jsx(JobsPage, {})
+                                            })
+                                        ]
+                                    })
+                                ]
                             })
-                        })
-                    }),
-                    activeTab === 'analytics' && /*#__PURE__*/ _jsx(AnalyticsContent, {}),
-                    activeTab === 'jobs' && /*#__PURE__*/ _jsx(JobsContent, {})
-                ]
-            })
-        ]
+                        ]
+                    })
+                })
+            ]
+        })
     });
 }
 

package/dist/components/dashboard/filters/expression-filter-bar.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Expression Filter Bar Component
+ *
+ * A horizontal button group for filtering by resource type.
+ */
+import type { ComponentProps } from 'react';
+import type { ResourceType } from '../context';
+export interface ResourceTypeOption {
+    id: ResourceType;
+    label: string;
+    disabled?: boolean;
+}
+export interface ExpressionFilterBarProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /**
+     * Available resource type options
+     */
+    options?: ResourceTypeOption[];
+    /**
+     * Currently selected resource type
+     */
+    value?: ResourceType;
+    /**
+     * Callback when resource type changes
+     */
+    onValueChange?: (value: ResourceType) => void;
+}
+/**
+ * Expression Filter Bar
+ *
+ * Displays a horizontal button group for selecting resource types.
+ * Integrates with the dashboard context for state management.
+ *
+ * @example
+ * ```tsx
+ * <ExpressionFilterBar
+ *   value="ci-pipeline"
+ *   onValueChange={setResourceType}
+ * />
+ * ```
+ */
+export declare function ExpressionFilterBar({ options, value, onValueChange, className, ...props }: ExpressionFilterBarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=expression-filter-bar.d.ts.map

package/dist/components/dashboard/filters/expression-filter-bar.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Expression Filter Bar Component
+ *
+ * A horizontal button group for filtering by resource type.
+ */ import { Button } from '../../../components/button/index.js';
+import { cn } from '../../../utils/cn.js';
+/**
+ * Default resource type options
+ */ const DEFAULT_OPTIONS = [
+    {
+        id: 'ci-pipeline',
+        label: 'CI Pipeline'
+    },
+    {
+        id: 'ci-jobs',
+        label: 'CI Jobs'
+    },
+    {
+        id: 'ci-steps',
+        label: 'CI Steps'
+    },
+    {
+        id: 'runners',
+        label: 'Runners',
+        disabled: true
+    },
+    {
+        id: 'suite',
+        label: 'Suite',
+        disabled: true
+    },
+    {
+        id: 'cases',
+        label: 'Cases',
+        disabled: true
+    }
+];
+/**
+ * Expression Filter Bar
+ *
+ * Displays a horizontal button group for selecting resource types.
+ * Integrates with the dashboard context for state management.
+ *
+ * @example
+ * ```tsx
+ * <ExpressionFilterBar
+ *   value="ci-pipeline"
+ *   onValueChange={setResourceType}
+ * />
+ * ```
+ */ export function ExpressionFilterBar({ options = DEFAULT_OPTIONS, value = 'ci-pipeline', onValueChange, className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: cn(// Desktop: Normal flex layout
+        'md:flex md:gap-4 md:items-start', // Mobile: Swipeable with scroll-snap
+        'overflow-x-auto scrollbar-none', // Scroll snap for smooth swiping
+        'snap-x snap-mandatory', // Hide scrollbar but allow scrolling
+        '[&::-webkit-scrollbar]:hidden', className),
+        ...props,
+        children: /*#__PURE__*/ _jsx("div", {
+            className: "flex gap-4 items-start px-0",
+            children: options.map((option)=>{
+                const isActive = value === option.id;
+                return /*#__PURE__*/ _jsx(Button, {
+                    variant: isActive ? 'secondary' : 'transparent',
+                    size: "md",
+                    disabled: option.disabled,
+                    onClick: ()=>!option.disabled && onValueChange?.(option.id),
+                    className: cn('flex items-center justify-center gap-8 px-10 py-6 rounded-6', 'text-sm font-medium leading-20 tracking-0', 'transition-colors', // Mobile: Prevent shrinking, snap alignment
+                    'shrink-0 snap-start', // Active state
+                    isActive && 'shadow-none bg-background-button-neutral-pressed', // Inactive state
+                    !isActive && !option.disabled && 'bg-transparent text-foreground-neutral-subtle hover:text-foreground-neutral-base'),
+                    children: option.label
+                }, option.id);
+            })
+        })
+    });
+}
+
+//# sourceMappingURL=expression-filter-bar.js.map

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

@@ -0,0 +1,6 @@
+/**
+ * Filter components exports
+ */
+export type { ExpressionFilterBarProps, ResourceTypeOption } from './expression-filter-bar';
+export { ExpressionFilterBar } from './expression-filter-bar';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,5 @@
+/**
+ * Filter components exports
+ */ export { ExpressionFilterBar } from './expression-filter-bar.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -1,2 +1,26 @@
-export * from './dashboard';
+/**
+ * Dashboard Component Exports
+ *
+ * Comprehensive export file for all dashboard-related components and utilities.
+ */
+export type { BarChartProps, LineChartProps } from './components/charts';
+export { BarChart, LineChart } from './components/charts';
+export { DashboardAlert } from './components/dashboard-alert';
+export type { KpiCardProps } from './components/kpi-card';
+export { KpiCard, KpiCardsGroup } from './components/kpi-card';
+export type { MobileSidebarProps } from './components/mobile-sidebar';
+export { MobileSidebar } from './components/mobile-sidebar';
+export type { SidebarNavItem, SidebarProps } from './components/sidebar';
+export { defaultSidebarItems, Sidebar } from './components/sidebar';
+export type { DashboardProviderProps, DashboardState, FilterOption, ResourceType, TimePeriod, ViewColumn, } from './context';
+export { DashboardProvider, DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY, updateViewColumnsFromVisibility, useDashboardContext, viewColumnsToVisibilityState, } from './context';
+export type { DashboardProps } from './dashboard';
+export { Dashboard } from './dashboard';
+export type { ExpressionFilterBarProps, ResourceTypeOption } from './filters';
+export { ExpressionFilterBar } from './filters';
+export { AnalyticsPage, JobsPage } from './pages';
+export type { TableWrapperProps } from './table';
+export { TableWrapper } from './table';
+export type { FilterButtonProps, PageToolbarProps, ToolbarActionsProps, ViewDropdownProps, } from './toolbar';
+export { FilterButton, PageToolbar, ToolbarActions, ToolbarSearch, ViewDropdown } from './toolbar';
 //# sourceMappingURL=index.d.ts.map