@shipfox/react-ui 0.15.0 → 0.17.0

package/dist/components/dashboard/toolbar/filter-button.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from '../../../components/button/index.js';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '../../../components/dropdown-menu/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { Kbd } from '../../../components/kbd/index.js';
+import { useEffect, useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+const defaultFilters = [
+    {
+        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
+    }
+];
+export function FilterButton({ filters: controlledFilters, onFiltersChange, className }) {
+    const [internalFilters, setInternalFilters] = useState(defaultFilters);
+    const [open, setOpen] = useState(false);
+    const filters = controlledFilters ?? internalFilters;
+    const handleFilterChange = (filterId, checked)=>{
+        const updatedFilters = filters.map((f)=>f.id === filterId ? {
+                ...f,
+                checked
+            } : f);
+        if (onFiltersChange) {
+            onFiltersChange(updatedFilters);
+        } else {
+            setInternalFilters(updatedFilters);
+        }
+    };
+    const activeCount = filters.filter((f)=>f.checked).length;
+    // Keyboard shortcut handler for "F" key
+    useEffect(()=>{
+        const handleKeyDown = (event)=>{
+            // Check if key is 'f' or 'F'
+            if (event.key !== 'f' && event.key !== 'F') {
+                return;
+            }
+            // Ignore if event is from input, textarea, or contentEditable
+            const target = event.target;
+            if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+                return;
+            }
+            // Open the dropdown
+            event.preventDefault();
+            setOpen(true);
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        return ()=>{
+            window.removeEventListener('keydown', handleKeyDown);
+        };
+    }, []);
+    return /*#__PURE__*/ _jsxs(DropdownMenu, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsxs(Button, {
+                    variant: "secondary",
+                    size: "sm",
+                    className: cn(className),
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            name: "filterLine",
+                            className: "size-16 text-foreground-neutral-subtle block md:hidden"
+                        }),
+                        /*#__PURE__*/ _jsxs("span", {
+                            className: "hidden md:inline-flex items-center gap-6",
+                            children: [
+                                "Filter ",
+                                /*#__PURE__*/ _jsx(Kbd, {
+                                    className: "h-16 min-w-16 px-4 text-[10px]",
+                                    children: "F"
+                                })
+                            ]
+                        }),
+                        activeCount > 0 && /*#__PURE__*/ _jsx("span", {
+                            className: "size-16 rounded-full bg-foreground-highlight-interactive text-[10px] font-medium text-foreground-neutral-on-color flex items-center justify-center",
+                            children: activeCount
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                align: "start",
+                className: "w-200",
+                children: [
+                    /*#__PURE__*/ _jsx(DropdownMenuLabel, {
+                        children: "Status"
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                    filters.map((filter)=>/*#__PURE__*/ _jsx(DropdownMenuCheckboxItem, {
+                            checked: filter.checked,
+                            onCheckedChange: (checked)=>handleFilterChange(filter.id, checked),
+                            closeOnSelect: false,
+                            children: filter.label
+                        }, filter.id))
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=filter-button.js.map

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

@@ -0,0 +1,13 @@
+/**
+ * Toolbar components exports
+ */
+export type { FilterButtonProps } from './filter-button';
+export { FilterButton } from './filter-button';
+export type { PageToolbarProps } from './page-toolbar';
+export { PageToolbar } from './page-toolbar';
+export type { ToolbarActionsProps } from './toolbar-actions';
+export { ToolbarActions } from './toolbar-actions';
+export { ToolbarSearch } from './toolbar-search';
+export type { ViewDropdownProps } from './view-dropdown';
+export { ViewDropdown } from './view-dropdown';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,10 @@
+/**
+ * Toolbar components exports
+ */ // Toolbar sub-components
+export { FilterButton } from './filter-button.js';
+export { PageToolbar } from './page-toolbar.js';
+export { ToolbarActions } from './toolbar-actions.js';
+export { ToolbarSearch } from './toolbar-search.js';
+export { ViewDropdown } from './view-dropdown.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/dashboard/toolbar/page-toolbar.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Generic Page Toolbar Component
+ *
+ * A reusable toolbar for dashboard pages with title, refresh indicator,
+ * time period selector, and playback controls.
+ */
+import type { ComponentProps, ReactNode } from 'react';
+import type { TimePeriod } from '../context';
+export interface PageToolbarProps extends Omit<ComponentProps<'div'>, 'title' | 'children'> {
+    /**
+     * The title to display in the toolbar header
+     */
+    title: ReactNode;
+    /**
+     * Last updated timestamp text
+     * @default '13s ago'
+     */
+    lastUpdated?: string;
+    /**
+     * Current time period value
+     * @default '2days'
+     */
+    timePeriod?: TimePeriod;
+    /**
+     * Callback when time period changes
+     */
+    onTimePeriodChange?: (value: TimePeriod) => void;
+    /**
+     * Callback when refresh button is clicked
+     */
+    onRefresh?: () => void;
+    /**
+     * Show playback controls
+     * @default true
+     */
+    showPlaybackControls?: boolean;
+    /**
+     * Callback when rewind button is clicked
+     */
+    onRewind?: () => void;
+    /**
+     * Callback when play button is clicked
+     */
+    onPlay?: () => void;
+    /**
+     * Callback when speed button is clicked
+     */
+    onSpeed?: () => void;
+    /**
+     * Additional actions to render on the right side
+     */
+    actions?: ReactNode;
+    /**
+     * Children to render (e.g., mobile menu button)
+     */
+    children?: ReactNode;
+}
+/**
+ * Generic Page Toolbar
+ *
+ * A flexible toolbar component that can be used across different dashboard pages.
+ * Supports title customization, time period selection, refresh indicator, and playback controls.
+ *
+ * @example
+ * ```tsx
+ * <PageToolbar
+ *   title="Analytics"
+ *   timePeriod="2days"
+ *   onTimePeriodChange={setTimePeriod}
+ *   onRefresh={handleRefresh}
+ * />
+ * ```
+ */
+export declare function PageToolbar({ title, lastUpdated, timePeriod, onTimePeriodChange, onRefresh, showPlaybackControls, onRewind, onPlay, onSpeed, actions, children, className, ...props }: PageToolbarProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=page-toolbar.d.ts.map

package/dist/components/dashboard/toolbar/page-toolbar.js

@@ -0,0 +1,208 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Generic Page Toolbar Component
+ *
+ * A reusable toolbar for dashboard pages with title, refresh indicator,
+ * time period selector, and playback controls.
+ */ import { Button } from '../../../components/button/index.js';
+import { ButtonGroup, ButtonGroupSeparator } from '../../../components/button-group/index.js';
+import { Icon } from '../../../components/icon/index.js';
+import { Kbd } from '../../../components/kbd/index.js';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../components/select/index.js';
+import { Header, Text } from '../../../components/typography/index.js';
+import { cn } from '../../../utils/cn.js';
+/**
+ * Generic Page Toolbar
+ *
+ * A flexible toolbar component that can be used across different dashboard pages.
+ * Supports title customization, time period selection, refresh indicator, and playback controls.
+ *
+ * @example
+ * ```tsx
+ * <PageToolbar
+ *   title="Analytics"
+ *   timePeriod="2days"
+ *   onTimePeriodChange={setTimePeriod}
+ *   onRefresh={handleRefresh}
+ * />
+ * ```
+ */ export function PageToolbar({ title, lastUpdated = '13s ago', timePeriod = '2days', onTimePeriodChange, onRefresh, showPlaybackControls = true, onRewind, onPlay, onSpeed, actions, children, className, ...props }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex flex-wrap gap-12 items-center justify-between px-12 py-20 md:px-24 md:py-40', className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-4",
+                children: [
+                    children,
+                    typeof title === 'string' ? /*#__PURE__*/ _jsx(Header, {
+                        variant: "h1",
+                        className: "text-foreground-neutral-base text-xl md:text-2xl",
+                        children: title
+                    }) : title
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center gap-8 md:gap-12",
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex items-center gap-8",
+                        children: /*#__PURE__*/ _jsxs(Button, {
+                            variant: "transparent",
+                            size: "md",
+                            className: "w-full group text-foreground-neutral-muted",
+                            "aria-label": "Refresh",
+                            onClick: onRefresh,
+                            children: [
+                                /*#__PURE__*/ _jsx(Text, {
+                                    size: "xs",
+                                    className: "hidden md:flex group-hover:text-foreground-neutral-subtle",
+                                    children: lastUpdated
+                                }),
+                                /*#__PURE__*/ _jsx(Icon, {
+                                    name: "loopRightLine",
+                                    className: "size-14 group-hover:text-foreground-neutral-subtle"
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs(Select, {
+                        value: timePeriod,
+                        onValueChange: onTimePeriodChange,
+                        children: [
+                            /*#__PURE__*/ _jsx(SelectTrigger, {
+                                className: "w-full md:w-280",
+                                children: /*#__PURE__*/ _jsx("div", {
+                                    className: "flex items-center gap-8 flex-1 min-w-0",
+                                    children: /*#__PURE__*/ _jsx(SelectValue, {
+                                        placeholder: "Select time range"
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs(SelectContent, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(SelectItem, {
+                                        value: "1hour",
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center gap-8",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Kbd, {
+                                                    className: "h-16",
+                                                    children: "1h"
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    children: "Past 1 Hour"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(SelectItem, {
+                                        value: "1day",
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center gap-8",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Kbd, {
+                                                    className: "h-16",
+                                                    children: "1d"
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    children: "Past 1 Day"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(SelectItem, {
+                                        value: "2days",
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center gap-8",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Kbd, {
+                                                    className: "h-16",
+                                                    children: "2d"
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    children: "Past 2 Days"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(SelectItem, {
+                                        value: "7days",
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center gap-8",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Kbd, {
+                                                    className: "h-16",
+                                                    children: "7d"
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    children: "Past 7 Days"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(SelectItem, {
+                                        value: "30days",
+                                        children: /*#__PURE__*/ _jsxs("div", {
+                                            className: "flex items-center gap-8",
+                                            children: [
+                                                /*#__PURE__*/ _jsx(Kbd, {
+                                                    className: "h-16",
+                                                    children: "30d"
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    children: "Past 30 Days"
+                                                })
+                                            ]
+                                        })
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    showPlaybackControls && /*#__PURE__*/ _jsxs(ButtonGroup, {
+                        "aria-label": "Playback controls",
+                        className: "hidden lg:flex",
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                size: "md",
+                                "aria-label": "Rewind",
+                                onClick: onRewind,
+                                children: /*#__PURE__*/ _jsx(Icon, {
+                                    name: "rewindFill",
+                                    className: "size-16 text-foreground-neutral-subtle"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                size: "md",
+                                "aria-label": "Play",
+                                onClick: onPlay,
+                                children: /*#__PURE__*/ _jsx(Icon, {
+                                    name: "playFill",
+                                    className: "size-16 text-foreground-neutral-subtle"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(ButtonGroupSeparator, {}),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "secondary",
+                                size: "md",
+                                "aria-label": "Speed",
+                                onClick: onSpeed,
+                                children: /*#__PURE__*/ _jsx(Icon, {
+                                    name: "speedFill",
+                                    className: "size-16 text-foreground-neutral-subtle"
+                                })
+                            })
+                        ]
+                    }),
+                    actions
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=page-toolbar.js.map

package/dist/components/dashboard/toolbar/toolbar-actions.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Toolbar Actions Component
+ *
+ * Contains filter, search, and view controls for dashboard tables.
+ */
+import type { ComponentProps, ReactNode } from 'react';
+export interface ToolbarActionsProps extends Omit<ComponentProps<'div'>, 'children'> {
+    /**
+     * Show filter button
+     * @default true
+     */
+    showFilter?: boolean;
+    /**
+     * Show search input
+     * @default true
+     */
+    showSearch?: boolean;
+    /**
+     * Show view dropdown
+     * @default true
+     */
+    showView?: boolean;
+    /**
+     * Search placeholder text
+     * @default 'Search...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Additional custom actions
+     */
+    children?: ReactNode;
+}
+/**
+ * Toolbar Actions
+ *
+ * Provides filter, search, and column visibility controls.
+ * Automatically connects to DashboardContext for state management.
+ *
+ * @example
+ * ```tsx
+ * <ToolbarActions />
+ * ```
+ *
+ * @example With custom actions
+ * ```tsx
+ * <ToolbarActions>
+ *   <Button>Custom Action</Button>
+ * </ToolbarActions>
+ * ```
+ */
+export declare function ToolbarActions({ showFilter, showSearch, showView, searchPlaceholder, className, children, ...props }: ToolbarActionsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toolbar-actions.d.ts.map

package/dist/components/dashboard/toolbar/toolbar-actions.js

@@ -0,0 +1,51 @@
+/**
+ * Toolbar Actions Component
+ *
+ * Contains filter, search, and view controls for dashboard tables.
+ */ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../../utils/cn.js';
+import { useDashboardContext } from '../context/index.js';
+import { FilterButton } from './filter-button.js';
+import { ToolbarSearch } from './toolbar-search.js';
+import { ViewDropdown } from './view-dropdown.js';
+/**
+ * Toolbar Actions
+ *
+ * Provides filter, search, and column visibility controls.
+ * Automatically connects to DashboardContext for state management.
+ *
+ * @example
+ * ```tsx
+ * <ToolbarActions />
+ * ```
+ *
+ * @example With custom actions
+ * ```tsx
+ * <ToolbarActions>
+ *   <Button>Custom Action</Button>
+ * </ToolbarActions>
+ * ```
+ */ export function ToolbarActions({ showFilter = true, showSearch = true, showView = true, searchPlaceholder = 'Try: job name, status, pipeline...', className, children, ...props }) {
+    const { setSearchQuery, filters, setFilters, columns, setColumns } = useDashboardContext();
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn('flex items-start md:items-center gap-8 md:gap-12', className),
+        ...props,
+        children: [
+            showFilter && /*#__PURE__*/ _jsx(FilterButton, {
+                filters: filters,
+                onFiltersChange: setFilters
+            }),
+            showSearch && /*#__PURE__*/ _jsx(ToolbarSearch, {
+                placeholder: searchPlaceholder,
+                onSelect: setSearchQuery
+            }),
+            showView && /*#__PURE__*/ _jsx(ViewDropdown, {
+                columns: columns,
+                onColumnsChange: setColumns
+            }),
+            children
+        ]
+    });
+}
+
+//# sourceMappingURL=toolbar-actions.js.map

package/dist/components/dashboard/toolbar/toolbar-search.d.ts

@@ -0,0 +1,21 @@
+export interface ToolbarSearchProps {
+    /**
+     * Placeholder text for the search trigger
+     */
+    placeholder?: string;
+    /**
+     * Keyboard shortcut to open the search modal
+     * @default 'meta+k'
+     */
+    shortcutKey?: string;
+    /**
+     * Callback when a search item is selected
+     */
+    onSelect?: (value: string) => void;
+    /**
+     * Additional class name for the trigger
+     */
+    className?: string;
+}
+export declare function ToolbarSearch({ placeholder, shortcutKey, onSelect, className, }: ToolbarSearchProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toolbar-search.d.ts.map