@shipfox/react-ui 0.14.0 → 0.16.0

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

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from '../../../components/icon/index.js';
+import { Search, SearchContent, SearchEmpty, SearchFooter, SearchGroup, SearchInput, SearchItem, SearchList, SearchSeparator, SearchTrigger } from '../../../components/search/index.js';
+import { useState } from 'react';
+import { cn } from '../../../utils/cn.js';
+export function ToolbarSearch({ placeholder = 'Try: job name, status, pipeline...', shortcutKey = 'meta+k', onSelect, className }) {
+    const [open, setOpen] = useState(false);
+    const handleSelect = (value)=>{
+        onSelect?.(value);
+        setOpen(false);
+    };
+    return /*#__PURE__*/ _jsx("div", {
+        className: "flex-1",
+        children: /*#__PURE__*/ _jsxs(Search, {
+            open: open,
+            onOpenChange: setOpen,
+            shortcutKey: shortcutKey,
+            children: [
+                /*#__PURE__*/ _jsx(SearchTrigger, {
+                    placeholder: placeholder,
+                    size: "small",
+                    variant: "primary",
+                    className: cn('w-full', className)
+                }),
+                /*#__PURE__*/ _jsxs(SearchContent, {
+                    "aria-describedby": undefined,
+                    children: [
+                        /*#__PURE__*/ _jsx(SearchInput, {
+                            placeholder: "Search for anything..."
+                        }),
+                        /*#__PURE__*/ _jsxs(SearchList, {
+                            children: [
+                                /*#__PURE__*/ _jsx(SearchEmpty, {
+                                    children: "No results found."
+                                }),
+                                /*#__PURE__*/ _jsxs(SearchGroup, {
+                                    heading: "Recent",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "gitBranchLine",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            }),
+                                            description: "CI Pipeline",
+                                            onSelect: ()=>handleSelect('feat/data-processing'),
+                                            children: "feat/data-processing"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "gitBranchLine",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            }),
+                                            description: "CI Pipeline",
+                                            onSelect: ()=>handleSelect('feat/pagination-polling'),
+                                            children: "feat/pagination-polling"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(SearchSeparator, {}),
+                                /*#__PURE__*/ _jsxs(SearchGroup, {
+                                    heading: "Jobs",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "settings3Line",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            }),
+                                            description: "Running",
+                                            onSelect: ()=>handleSelect('build-docker-image'),
+                                            children: "build-docker-image"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "settings3Line",
+                                                className: "size-16 text-foreground-neutral-subtle"
+                                            }),
+                                            description: "Completed",
+                                            onSelect: ()=>handleSelect('run-tests'),
+                                            children: "run-tests"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(SearchSeparator, {}),
+                                /*#__PURE__*/ _jsxs(SearchGroup, {
+                                    heading: "Status",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "checkboxCircleLine",
+                                                className: "size-16 text-foreground-success-base"
+                                            }),
+                                            onSelect: ()=>handleSelect('status:success'),
+                                            children: "Success"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "errorWarningLine",
+                                                className: "size-16 text-foreground-danger-base"
+                                            }),
+                                            onSelect: ()=>handleSelect('status:failed'),
+                                            children: "Failed"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchItem, {
+                                            icon: /*#__PURE__*/ _jsx(Icon, {
+                                                name: "loopRightLine",
+                                                className: "size-16 text-foreground-warning-base"
+                                            }),
+                                            onSelect: ()=>handleSelect('status:running'),
+                                            children: "Running"
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ _jsx(SearchFooter, {})
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+//# sourceMappingURL=toolbar-search.js.map

package/dist/components/dashboard/toolbar/view-dropdown.d.ts

@@ -0,0 +1,11 @@
+export interface ViewColumn {
+    id: string;
+    label: string;
+    visible: boolean;
+}
+export interface ViewDropdownProps {
+    columns?: ViewColumn[];
+    onColumnsChange?: (columns: ViewColumn[]) => void;
+}
+export declare function ViewDropdown({ columns: controlledColumns, onColumnsChange }: ViewDropdownProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=view-dropdown.d.ts.map

package/dist/components/dashboard/toolbar/view-dropdown.js

@@ -0,0 +1,113 @@
+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 { useState } from 'react';
+const defaultColumns = [
+    {
+        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
+    }
+];
+export function ViewDropdown({ columns: controlledColumns, onColumnsChange }) {
+    const [internalColumns, setInternalColumns] = useState(defaultColumns);
+    const columns = controlledColumns ?? internalColumns;
+    const handleColumnChange = (columnId, visible)=>{
+        const updatedColumns = columns.map((col)=>col.id === columnId ? {
+                ...col,
+                visible
+            } : col);
+        if (onColumnsChange) {
+            onColumnsChange(updatedColumns);
+        } else {
+            setInternalColumns(updatedColumns);
+        }
+    };
+    return /*#__PURE__*/ _jsxs(DropdownMenu, {
+        children: [
+            /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ _jsxs(Button, {
+                    variant: "secondary",
+                    size: "sm",
+                    "aria-label": "Customize columns",
+                    children: [
+                        /*#__PURE__*/ _jsx(Icon, {
+                            name: "stackedView",
+                            className: "size-16 text-foreground-neutral-subtle block md:hidden"
+                        }),
+                        /*#__PURE__*/ _jsxs("span", {
+                            className: "hidden md:inline-flex items-center gap-6",
+                            children: [
+                                "View ",
+                                /*#__PURE__*/ _jsx(Icon, {
+                                    name: "stackedView",
+                                    className: "size-16 text-foreground-neutral-subtle"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs(DropdownMenuContent, {
+                align: "end",
+                className: "w-180",
+                children: [
+                    /*#__PURE__*/ _jsx(DropdownMenuLabel, {
+                        children: "Custom display"
+                    }),
+                    /*#__PURE__*/ _jsx(DropdownMenuSeparator, {}),
+                    columns.map((column)=>/*#__PURE__*/ _jsx(DropdownMenuCheckboxItem, {
+                            checked: column.visible,
+                            onCheckedChange: (visible)=>handleColumnChange(column.id, visible),
+                            closeOnSelect: false,
+                            children: column.label
+                        }, column.id))
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=view-dropdown.js.map

package/dist/components/form/form.stories.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { argosScreenshot } from '@argos-ci/storybook/vitest';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Button } from '../../components/button/index.js';
 import { Checkbox, CheckboxLabel, CheckboxLinks } from '../../components/checkbox/index.js';
@@ -89,7 +90,11 @@ function BasicFormExample() {
     });
 }
 export const Basic = {
-    render: ()=>/*#__PURE__*/ _jsx(BasicFormExample, {})
+    render: ()=>/*#__PURE__*/ _jsx(BasicFormExample, {}),
+    play: async (context)=>{
+        await new Promise((resolve)=>setTimeout(resolve, 100));
+        await argosScreenshot(context, 'Form Basic');
+    }
 };
 const componentsFormSchema = z.object({
     example: z.string().min(1, 'This field is required'),

package/dist/components/index.d.ts

@@ -2,9 +2,11 @@ export * from './alert';
 export * from './avatar';
 export * from './badge';
 export * from './button';
+export * from './button-group';
 export * from './calendar';
 export * from './checkbox';
 export * from './code-block';
+export * from './command';
 export * from './confetti';
 export * from './date-picker';
 export * from './date-time-range-picker';
@@ -16,11 +18,17 @@ export * from './icon';
 export * from './inline-tips';
 export * from './input';
 export * from './item';
+export * from './kbd';
 export * from './label';
 export * from './modal';
 export * from './moving-border';
 export * from './popover';
+export * from './search';
+export * from './select';
+export * from './sheet';
 export * from './shiny-text';
+export * from './skeleton';
+export * from './table';
 export * from './tabs';
 export * from './textarea';
 export * from './theme';

package/dist/components/index.js

@@ -2,9 +2,11 @@ export * from './alert/index.js';
 export * from './avatar/index.js';
 export * from './badge/index.js';
 export * from './button/index.js';
+export * from './button-group/index.js';
 export * from './calendar/index.js';
 export * from './checkbox/index.js';
 export * from './code-block/index.js';
+export * from './command/index.js';
 export * from './confetti/index.js';
 export * from './date-picker/index.js';
 export * from './date-time-range-picker/index.js';
@@ -16,11 +18,17 @@ export * from './icon/index.js';
 export * from './inline-tips/index.js';
 export * from './input/index.js';
 export * from './item/index.js';
+export * from './kbd/index.js';
 export * from './label/index.js';
 export * from './modal/index.js';
 export * from './moving-border/index.js';
 export * from './popover/index.js';
+export * from './search/index.js';
+export * from './select/index.js';
+export * from './sheet/index.js';
 export * from './shiny-text/index.js';
+export * from './skeleton/index.js';
+export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './textarea/index.js';
 export * from './theme/index.js';

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

@@ -0,0 +1,2 @@
+export * from './kbd';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/kbd/index.js

@@ -0,0 +1,3 @@
+export * from './kbd.js';
+
+//# sourceMappingURL=index.js.map

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentProps } from 'react';
+type KbdProps = ComponentProps<'kbd'>;
+export declare function Kbd({ className, ...props }: KbdProps): import("react/jsx-runtime").JSX.Element;
+type KbdGroupProps = ComponentProps<'div'>;
+export declare function KbdGroup({ className, ...props }: KbdGroupProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=kbd.d.ts.map

package/dist/components/kbd/kbd.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../utils/cn.js';
+export function Kbd({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("kbd", {
+        "data-slot": "kbd",
+        className: cn('pointer-events-none inline-flex h-20 w-fit min-w-20 items-center justify-center gap-1 rounded-4 px-4 font-display text-xs font-medium select-none', 'bg-background-components-base text-foreground-neutral-subtle border border-border-neutral-base shadow-button-neutral', '[&_svg:not([class*="size-"])]:size-12', 'in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10', className),
+        ...props
+    });
+}
+export function KbdGroup({ className, ...props }) {
+    return /*#__PURE__*/ _jsx("div", {
+        "data-slot": "kbd-group",
+        className: cn('inline-flex items-center gap-4', className),
+        ...props
+    });
+}
+
+//# sourceMappingURL=kbd.js.map

package/dist/components/kbd/kbd.stories.js

@@ -0,0 +1,119 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Kbd, KbdGroup } from './kbd.js';
+const meta = {
+    title: 'Components/Kbd',
+    component: Kbd,
+    tags: [
+        'autodocs'
+    ]
+};
+export default meta;
+export const Default = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-wrap gap-8",
+            children: [
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "Ctrl"
+                }),
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "Alt"
+                }),
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "Shift"
+                }),
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "⌘"
+                }),
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "⌥"
+                }),
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "⇧"
+                })
+            ]
+        })
+};
+export const KeyCombination = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-wrap items-center gap-12",
+            children: [
+                /*#__PURE__*/ _jsx(Kbd, {
+                    children: "⌘K"
+                }),
+                /*#__PURE__*/ _jsxs(KbdGroup, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Kbd, {
+                            children: "Ctrl"
+                        }),
+                        /*#__PURE__*/ _jsx(Kbd, {
+                            children: "Shift"
+                        }),
+                        /*#__PURE__*/ _jsx(Kbd, {
+                            children: "P"
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(KbdGroup, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Kbd, {
+                            children: "Alt"
+                        }),
+                        /*#__PURE__*/ _jsx(Kbd, {
+                            children: "Enter"
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const InMenu = {
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "max-w-400 rounded-10 border border-border-neutral-base p-8",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-4",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-sm text-foreground-neutral-subtle",
+                                children: "Copy"
+                            }),
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                children: "⌘C"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-sm text-foreground-neutral-subtle",
+                                children: "Paste"
+                            }),
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                children: "⌘V"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "h-px bg-border-neutral-base my-4"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center justify-between p-8 rounded-6 hover:bg-background-components-hover transition-colors",
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                className: "text-sm text-foreground-neutral-subtle",
+                                children: "Command Palette"
+                            }),
+                            /*#__PURE__*/ _jsx(Kbd, {
+                                children: "⌘K"
+                            })
+                        ]
+                    })
+                ]
+            })
+        })
+};
+
+//# sourceMappingURL=kbd.stories.js.map

package/dist/components/modal/modal.js

@@ -3,6 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { cva } from 'class-variance-authority';
 import { Button } from '../../components/button/index.js';
 import { Icon } from '../../components/icon/index.js';
+import { Kbd } from '../../components/kbd/index.js';
 import { Text } from '../../components/typography/index.js';
 import { motion } from 'framer-motion';
 import { useMediaQuery } from '../../hooks/useMediaQuery.js';
@@ -180,9 +181,8 @@ function ModalHeader({ className, title, showEscIndicator = true, showClose = tr
                     /*#__PURE__*/ _jsxs("div", {
                         className: "flex items-center gap-8",
                         children: [
-                            isDesktop && showEscIndicator && /*#__PURE__*/ _jsx("kbd", {
-                                className: "flex items-center justify-center rounded-8 border border-border-neutral-base shadow-button-neutral bg-background-field-base text-xs text-foreground-neutral-subtle px-4",
-                                children: "esc"
+                            isDesktop && showEscIndicator && /*#__PURE__*/ _jsx(Kbd, {
+                                children: "Esc"
                             }),
                             showClose && /*#__PURE__*/ _jsx(ModalClose, {
                                 asChild: true,

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

@@ -0,0 +1,7 @@
+export { Search, type SearchProps } from './search';
+export { useSearchContext } from './search-context';
+export { SearchInline, type SearchInlineProps } from './search-inline';
+export { SearchContent, type SearchContentProps, SearchEmpty, type SearchEmptyProps, SearchFooter, type SearchFooterProps, SearchGroup, type SearchGroupProps, SearchInput, type SearchInputProps, SearchItem, type SearchItemProps, SearchList, type SearchListProps, SearchSeparator, type SearchSeparatorProps, } from './search-modal';
+export { SearchTrigger, type SearchTriggerProps } from './search-trigger';
+export { searchDefaultTransition, searchInputVariants, searchTriggerVariants, } from './search-variants';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/search/index.js

@@ -0,0 +1,8 @@
+export { Search } from './search.js';
+export { useSearchContext } from './search-context.js';
+export { SearchInline } from './search-inline.js';
+export { SearchContent, SearchEmpty, SearchFooter, SearchGroup, SearchInput, SearchItem, SearchList, SearchSeparator } from './search-modal.js';
+export { SearchTrigger } from './search-trigger.js';
+export { searchDefaultTransition, searchInputVariants, searchTriggerVariants } from './search-variants.js';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,11 @@
+export type SearchContextValue = {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    searchValue: string;
+    setSearchValue: (value: string) => void;
+};
+export declare const SearchContext: import("react").Context<SearchContextValue | null>;
+export declare function useSearchContext(): SearchContextValue;
+export declare function useControllableState<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (value: T) => void];
+export declare function useKeyboardShortcut(shortcutKey: string | undefined, onTrigger: () => void): void;
+//# sourceMappingURL=search-context.d.ts.map

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

@@ -0,0 +1,56 @@
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import { SHORTCUT_KEY_REGEX } from './search-variants.js';
+export const SearchContext = /*#__PURE__*/ createContext(null);
+export function useSearchContext() {
+    const context = useContext(SearchContext);
+    if (!context) {
+        throw new Error('Search components must be used within a Search component');
+    }
+    return context;
+}
+export function useControllableState(controlledValue, defaultValue, onChange) {
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const isControlled = controlledValue !== undefined;
+    const value = isControlled ? controlledValue : internalValue;
+    const setValue = useCallback((newValue)=>{
+        if (!isControlled) {
+            setInternalValue(newValue);
+        }
+        onChange?.(newValue);
+    }, [
+        isControlled,
+        onChange
+    ]);
+    return [
+        value,
+        setValue
+    ];
+}
+export function useKeyboardShortcut(shortcutKey, onTrigger) {
+    useEffect(()=>{
+        if (!shortcutKey) return;
+        const handleKeyDown = (e)=>{
+            const key = shortcutKey.toLowerCase();
+            const isMetaKey = key.startsWith('meta+') || key.startsWith('cmd+') || key.startsWith('⌘');
+            const isCtrlKey = key.startsWith('ctrl+');
+            const targetKey = key.replace(SHORTCUT_KEY_REGEX, '');
+            const shouldTrigger = isMetaKey && e.metaKey && e.key.toLowerCase() === targetKey || isCtrlKey && e.ctrlKey && e.key.toLowerCase() === targetKey || !isMetaKey && !isCtrlKey && e.key.toLowerCase() === targetKey && !e.metaKey && !e.ctrlKey;
+            if (!shouldTrigger) return;
+            if (!isMetaKey && !isCtrlKey) {
+                const target = e.target;
+                if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
+                    return;
+                }
+            }
+            e.preventDefault();
+            onTrigger();
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return ()=>document.removeEventListener('keydown', handleKeyDown);
+    }, [
+        shortcutKey,
+        onTrigger
+    ]);
+}
+
+//# sourceMappingURL=search-context.js.map

package/dist/components/search/search-inline.d.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { ComponentProps } from 'react';
+import { searchInputVariants } from './search-variants';
+export type SearchInlineProps = Omit<ComponentProps<'input'>, 'size'> & VariantProps<typeof searchInputVariants> & {
+    showClearButton?: boolean;
+    onClear?: () => void;
+};
+export declare function SearchInline({ className, variant, size, radius, value, onChange, onClear, showClearButton, ...props }: SearchInlineProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=search-inline.d.ts.map