@shipfox/react-ui 0.14.0 → 0.15.0

package/dist/components/search/search.stories.js

@@ -0,0 +1,630 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Icon } from '../icon/index.js';
+import { Search, SearchContent, SearchEmpty, SearchFooter, SearchGroup, SearchInline, SearchInput, SearchItem, SearchList, SearchSeparator, SearchTrigger } from './index.js';
+const meta = {
+    title: 'Components/Search',
+    tags: [
+        'autodocs'
+    ],
+    parameters: {
+        docs: {
+            description: {
+                component: 'A search component with two types: inline (input-style) and modal (trigger + overlay). Supports primary/secondary variants, base/small sizes, and squared/rounded radius options.'
+            }
+        }
+    }
+};
+export default meta;
+export const Inline = {
+    render: ()=>{
+        function InlineDemo() {
+            const [value, setValue] = useState('');
+            return /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-16 max-w-400",
+                children: [
+                    /*#__PURE__*/ _jsx(SearchInline, {
+                        placeholder: "Search...",
+                        value: value,
+                        onChange: (e)=>setValue(e.target.value),
+                        onClear: ()=>setValue('')
+                    }),
+                    value && /*#__PURE__*/ _jsxs("p", {
+                        className: "text-sm text-foreground-neutral-muted",
+                        children: [
+                            'Searching for: "',
+                            value,
+                            '"'
+                        ]
+                    })
+                ]
+            });
+        }
+        return /*#__PURE__*/ _jsx(InlineDemo, {});
+    }
+};
+export const InlineVariants = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text-xs text-foreground-neutral-muted",
+                            children: "Primary (default)"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(SearchInline, {
+                                    variant: "primary",
+                                    radius: "squared",
+                                    placeholder: "Search...",
+                                    defaultValue: "random",
+                                    className: "w-200"
+                                }),
+                                /*#__PURE__*/ _jsx(SearchInline, {
+                                    variant: "primary",
+                                    radius: "rounded",
+                                    placeholder: "Search...",
+                                    defaultValue: "random",
+                                    className: "w-200"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text-xs text-foreground-neutral-muted",
+                            children: "Secondary"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(SearchInline, {
+                                    variant: "secondary",
+                                    radius: "squared",
+                                    placeholder: "Search...",
+                                    defaultValue: "random",
+                                    className: "w-200"
+                                }),
+                                /*#__PURE__*/ _jsx(SearchInline, {
+                                    variant: "secondary",
+                                    radius: "rounded",
+                                    placeholder: "Search...",
+                                    defaultValue: "random",
+                                    className: "w-200"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const InlineSizes = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text-xs text-foreground-neutral-muted",
+                            children: "Base (32px)"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex gap-8",
+                            children: /*#__PURE__*/ _jsx(SearchInline, {
+                                size: "base",
+                                placeholder: "Search...",
+                                defaultValue: "random",
+                                className: "w-200"
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text-xs text-foreground-neutral-muted",
+                            children: "Small (28px)"
+                        }),
+                        /*#__PURE__*/ _jsx("div", {
+                            className: "flex gap-8",
+                            children: /*#__PURE__*/ _jsx(SearchInline, {
+                                size: "small",
+                                placeholder: "Search...",
+                                defaultValue: "random",
+                                className: "w-200"
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+};
+function ModalSearchDemo() {
+    const [open, setOpen] = useState(false);
+    return /*#__PURE__*/ _jsxs(Search, {
+        open: open,
+        onOpenChange: setOpen,
+        shortcutKey: "meta+k",
+        children: [
+            /*#__PURE__*/ _jsx(SearchTrigger, {
+                placeholder: "Find...",
+                className: "w-full max-w-280"
+            }),
+            /*#__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: "qr-attendance",
+                                        children: "feat/data-processing"
+                                    }),
+                                    /*#__PURE__*/ _jsx(SearchItem, {
+                                        icon: /*#__PURE__*/ _jsx(Icon, {
+                                            name: "gitBranchLine",
+                                            className: "size-16 text-foreground-neutral-subtle"
+                                        }),
+                                        description: "qr-attendance",
+                                        children: "feat/pagination-polling"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(SearchSeparator, {}),
+                            /*#__PURE__*/ _jsxs(SearchGroup, {
+                                heading: "Team",
+                                children: [
+                                    /*#__PURE__*/ _jsx(SearchItem, {
+                                        icon: /*#__PURE__*/ _jsx(Icon, {
+                                            name: "rocketLine",
+                                            className: "size-16 text-foreground-neutral-subtle"
+                                        }),
+                                        description: "Team",
+                                        children: "Deployments"
+                                    }),
+                                    /*#__PURE__*/ _jsx(SearchItem, {
+                                        icon: /*#__PURE__*/ _jsx(Icon, {
+                                            name: "linksLine",
+                                            className: "size-16 text-foreground-neutral-subtle"
+                                        }),
+                                        description: "Team",
+                                        children: "Integrations"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(SearchFooter, {})
+                ]
+            })
+        ]
+    });
+}
+export const Modal = {
+    render: ()=>/*#__PURE__*/ _jsx(ModalSearchDemo, {})
+};
+function TriggerPreview({ variant, size, radius, className }) {
+    return /*#__PURE__*/ _jsx(Search, {
+        children: /*#__PURE__*/ _jsx(SearchTrigger, {
+            variant: variant,
+            size: size,
+            radius: radius,
+            className: className
+        })
+    });
+}
+export const ModalTriggerVariants = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text-xs text-foreground-neutral-muted",
+                            children: "Primary (default)"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(TriggerPreview, {
+                                    variant: "primary",
+                                    radius: "squared",
+                                    className: "w-200"
+                                }),
+                                /*#__PURE__*/ _jsx(TriggerPreview, {
+                                    variant: "primary",
+                                    radius: "rounded",
+                                    className: "w-200"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text-xs text-foreground-neutral-muted",
+                            children: "Secondary"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(TriggerPreview, {
+                                    variant: "secondary",
+                                    radius: "squared",
+                                    className: "w-200"
+                                }),
+                                /*#__PURE__*/ _jsx(TriggerPreview, {
+                                    variant: "secondary",
+                                    radius: "rounded",
+                                    className: "w-200"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const ModalTriggerSizes = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-16",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text-xs text-foreground-neutral-muted",
+                            children: "Base (32px)"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(TriggerPreview, {
+                                    size: "base",
+                                    variant: "primary",
+                                    className: "w-200"
+                                }),
+                                /*#__PURE__*/ _jsx(TriggerPreview, {
+                                    size: "base",
+                                    variant: "secondary",
+                                    className: "w-200"
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "flex flex-col gap-8",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            className: "text-xs text-foreground-neutral-muted",
+                            children: "Small (28px)"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "flex gap-8",
+                            children: [
+                                /*#__PURE__*/ _jsx(TriggerPreview, {
+                                    size: "small",
+                                    variant: "primary",
+                                    className: "w-200"
+                                }),
+                                /*#__PURE__*/ _jsx(TriggerPreview, {
+                                    size: "small",
+                                    variant: "secondary",
+                                    className: "w-200"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+export const AllCombinations = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "flex flex-col gap-24",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "text-sm font-medium text-foreground-neutral-base mb-12",
+                            children: "Inline Search"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "grid grid-cols-4 gap-12",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Primary / Squared / Base"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchInline, {
+                                            variant: "primary",
+                                            radius: "squared",
+                                            size: "base",
+                                            placeholder: "Search...",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Primary / Squared / Small"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchInline, {
+                                            variant: "primary",
+                                            radius: "squared",
+                                            size: "small",
+                                            placeholder: "Search...",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Primary / Rounded / Base"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchInline, {
+                                            variant: "primary",
+                                            radius: "rounded",
+                                            size: "base",
+                                            placeholder: "Search...",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Primary / Rounded / Small"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchInline, {
+                                            variant: "primary",
+                                            radius: "rounded",
+                                            size: "small",
+                                            placeholder: "Search...",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Secondary / Squared / Base"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchInline, {
+                                            variant: "secondary",
+                                            radius: "squared",
+                                            size: "base",
+                                            placeholder: "Search...",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Secondary / Squared / Small"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchInline, {
+                                            variant: "secondary",
+                                            radius: "squared",
+                                            size: "small",
+                                            placeholder: "Search...",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Secondary / Rounded / Base"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchInline, {
+                                            variant: "secondary",
+                                            radius: "rounded",
+                                            size: "base",
+                                            placeholder: "Search...",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Secondary / Rounded / Small"
+                                        }),
+                                        /*#__PURE__*/ _jsx(SearchInline, {
+                                            variant: "secondary",
+                                            radius: "rounded",
+                                            size: "small",
+                                            placeholder: "Search...",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("h3", {
+                            className: "text-sm font-medium text-foreground-neutral-base mb-12",
+                            children: "Modal Search Triggers"
+                        }),
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "grid grid-cols-4 gap-12",
+                            children: [
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Primary / Squared / Base"
+                                        }),
+                                        /*#__PURE__*/ _jsx(TriggerPreview, {
+                                            variant: "primary",
+                                            radius: "squared",
+                                            size: "base",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Primary / Squared / Small"
+                                        }),
+                                        /*#__PURE__*/ _jsx(TriggerPreview, {
+                                            variant: "primary",
+                                            radius: "squared",
+                                            size: "small",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Primary / Rounded / Base"
+                                        }),
+                                        /*#__PURE__*/ _jsx(TriggerPreview, {
+                                            variant: "primary",
+                                            radius: "rounded",
+                                            size: "base",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Primary / Rounded / Small"
+                                        }),
+                                        /*#__PURE__*/ _jsx(TriggerPreview, {
+                                            variant: "primary",
+                                            radius: "rounded",
+                                            size: "small",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Secondary / Squared / Base"
+                                        }),
+                                        /*#__PURE__*/ _jsx(TriggerPreview, {
+                                            variant: "secondary",
+                                            radius: "squared",
+                                            size: "base",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Secondary / Squared / Small"
+                                        }),
+                                        /*#__PURE__*/ _jsx(TriggerPreview, {
+                                            variant: "secondary",
+                                            radius: "squared",
+                                            size: "small",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Secondary / Rounded / Base"
+                                        }),
+                                        /*#__PURE__*/ _jsx(TriggerPreview, {
+                                            variant: "secondary",
+                                            radius: "rounded",
+                                            size: "base",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    className: "flex flex-col gap-4",
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            className: "text-xs text-foreground-neutral-muted",
+                                            children: "Secondary / Rounded / Small"
+                                        }),
+                                        /*#__PURE__*/ _jsx(TriggerPreview, {
+                                            variant: "secondary",
+                                            radius: "rounded",
+                                            size: "small",
+                                            className: "w-full"
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=search.stories.js.map