@shipfox/react-ui 0.14.0 → 0.16.0

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

@@ -0,0 +1,70 @@
+/**
+ * Dashboard Context Provider
+ *
+ * Provides centralized state management for dashboard components including
+ * search, filters, column visibility, time period, and sidebar navigation.
+ */
+import { type ReactNode } from 'react';
+import type { DashboardState, FilterOption, ResourceType, TimePeriod, ViewColumn } from './types';
+export interface DashboardProviderProps {
+    children: ReactNode;
+    /**
+     * Initial columns configuration
+     * @default DEFAULT_COLUMNS
+     */
+    initialColumns?: ViewColumn[];
+    /**
+     * Initial filters configuration
+     * @default DEFAULT_FILTERS
+     */
+    initialFilters?: FilterOption[];
+    /**
+     * Initial time period
+     * @default '2days'
+     */
+    initialTimePeriod?: TimePeriod;
+    /**
+     * Initial active sidebar item
+     * @default 'reliability'
+     */
+    initialActiveSidebarItem?: string;
+    /**
+     * Initial resource type
+     * @default 'ci-pipeline'
+     */
+    initialResourceType?: ResourceType;
+    /**
+     * Custom column ID to accessor key mapping
+     * @default DEFAULT_COLUMN_ID_TO_ACCESSOR_KEY from utils
+     */
+    columnMapping?: Record<string, string>;
+}
+/**
+ * Dashboard Provider Component
+ *
+ * Wraps dashboard components to provide shared state management.
+ *
+ * @example
+ * ```tsx
+ * <DashboardProvider initialTimePeriod="7days">
+ *   <AnalyticsContent />
+ * </DashboardProvider>
+ * ```
+ */
+export declare function DashboardProvider({ children, initialColumns, initialFilters, initialTimePeriod, initialActiveSidebarItem, initialResourceType, columnMapping, }: DashboardProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * 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 declare function useDashboardContext(): DashboardState;
+//# sourceMappingURL=dashboard-context.d.ts.map

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

@@ -0,0 +1,28 @@
+/**
+ * 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

@@ -0,0 +1,110 @@
+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 { AnimatedLogo } from './components/animated-logo.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;
+/**
+ * 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(defaultActiveTab);
+    const { scrollY } = useScroll({
+        container: containerRef
+    });
+    useMotionValueEvent(scrollY, 'change', (latest)=>{
+        const progress = Math.min(latest / TOPBAR_HEIGHT, 1);
+        setScrollProgress(progress);
+    });
+    const handleTabChange = useCallback((tab)=>{
+        setActiveTab(tab);
+        if (containerRef.current) {
+            containerRef.current.scrollTo({
+                top: 0,
+                behavior: 'instant'
+            });
+        }
+        setScrollProgress(0);
+    }, []);
+    const isTopbarHidden = scrollProgress >= 1;
+    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, {})
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=dashboard.js.map

package/dist/components/dashboard/dashboard.stories.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dashboard } from './dashboard.js';
+const meta = {
+    title: 'Dashboard/Example',
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        layout: 'fullscreen',
+        viewport: {
+            defaultViewport: 'extraLarge'
+        }
+    }
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "h-screen w-full",
+            children: /*#__PURE__*/ _jsx(Dashboard, {})
+        })
+};
+
+//# sourceMappingURL=dashboard.stories.js.map

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