@shipfox/react-ui 0.14.0 → 0.15.0

package/src/components/search/search.stories.tsx

@@ -0,0 +1,392 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {useState} from 'react';
+import {Icon} from '../icon';
+import {
+  Search,
+  SearchContent,
+  SearchEmpty,
+  SearchFooter,
+  SearchGroup,
+  SearchInline,
+  SearchInput,
+  SearchItem,
+  SearchList,
+  SearchSeparator,
+  SearchTrigger,
+} from './index';
+
+const meta: 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;
+
+type Story = StoryObj;
+
+export const Inline: Story = {
+  render: () => {
+    function InlineDemo() {
+      const [value, setValue] = useState('');
+
+      return (
+        <div className="flex flex-col gap-16 max-w-400">
+          <SearchInline
+            placeholder="Search..."
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onClear={() => setValue('')}
+          />
+          {value && (
+            <p className="text-sm text-foreground-neutral-muted">Searching for: "{value}"</p>
+          )}
+        </div>
+      );
+    }
+    return <InlineDemo />;
+  },
+};
+
+export const InlineVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      <div className="flex flex-col gap-8">
+        <span className="text-xs text-foreground-neutral-muted">Primary (default)</span>
+        <div className="flex gap-8">
+          <SearchInline
+            variant="primary"
+            radius="squared"
+            placeholder="Search..."
+            defaultValue="random"
+            className="w-200"
+          />
+          <SearchInline
+            variant="primary"
+            radius="rounded"
+            placeholder="Search..."
+            defaultValue="random"
+            className="w-200"
+          />
+        </div>
+      </div>
+      <div className="flex flex-col gap-8">
+        <span className="text-xs text-foreground-neutral-muted">Secondary</span>
+        <div className="flex gap-8">
+          <SearchInline
+            variant="secondary"
+            radius="squared"
+            placeholder="Search..."
+            defaultValue="random"
+            className="w-200"
+          />
+          <SearchInline
+            variant="secondary"
+            radius="rounded"
+            placeholder="Search..."
+            defaultValue="random"
+            className="w-200"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const InlineSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      <div className="flex flex-col gap-8">
+        <span className="text-xs text-foreground-neutral-muted">Base (32px)</span>
+        <div className="flex gap-8">
+          <SearchInline
+            size="base"
+            placeholder="Search..."
+            defaultValue="random"
+            className="w-200"
+          />
+        </div>
+      </div>
+      <div className="flex flex-col gap-8">
+        <span className="text-xs text-foreground-neutral-muted">Small (28px)</span>
+        <div className="flex gap-8">
+          <SearchInline
+            size="small"
+            placeholder="Search..."
+            defaultValue="random"
+            className="w-200"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+function ModalSearchDemo() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Search open={open} onOpenChange={setOpen} shortcutKey="meta+k">
+      <SearchTrigger placeholder="Find..." className="w-full max-w-280" />
+      <SearchContent aria-describedby={undefined}>
+        <SearchInput placeholder="Search for anything..." />
+        <SearchList>
+          <SearchEmpty>No results found.</SearchEmpty>
+          <SearchGroup heading="Recent">
+            <SearchItem
+              icon={
+                <Icon name="gitBranchLine" className="size-16 text-foreground-neutral-subtle" />
+              }
+              description="qr-attendance"
+            >
+              feat/data-processing
+            </SearchItem>
+            <SearchItem
+              icon={
+                <Icon name="gitBranchLine" className="size-16 text-foreground-neutral-subtle" />
+              }
+              description="qr-attendance"
+            >
+              feat/pagination-polling
+            </SearchItem>
+          </SearchGroup>
+          <SearchSeparator />
+          <SearchGroup heading="Team">
+            <SearchItem
+              icon={<Icon name="rocketLine" className="size-16 text-foreground-neutral-subtle" />}
+              description="Team"
+            >
+              Deployments
+            </SearchItem>
+            <SearchItem
+              icon={<Icon name="linksLine" className="size-16 text-foreground-neutral-subtle" />}
+              description="Team"
+            >
+              Integrations
+            </SearchItem>
+          </SearchGroup>
+        </SearchList>
+        <SearchFooter />
+      </SearchContent>
+    </Search>
+  );
+}
+
+export const Modal: Story = {
+  render: () => <ModalSearchDemo />,
+};
+
+function TriggerPreview({
+  variant,
+  size,
+  radius,
+  className,
+}: {
+  variant?: 'primary' | 'secondary';
+  size?: 'base' | 'small';
+  radius?: 'squared' | 'rounded';
+  className?: string;
+}) {
+  return (
+    <Search>
+      <SearchTrigger variant={variant} size={size} radius={radius} className={className} />
+    </Search>
+  );
+}
+
+export const ModalTriggerVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      <div className="flex flex-col gap-8">
+        <span className="text-xs text-foreground-neutral-muted">Primary (default)</span>
+        <div className="flex gap-8">
+          <TriggerPreview variant="primary" radius="squared" className="w-200" />
+          <TriggerPreview variant="primary" radius="rounded" className="w-200" />
+        </div>
+      </div>
+      <div className="flex flex-col gap-8">
+        <span className="text-xs text-foreground-neutral-muted">Secondary</span>
+        <div className="flex gap-8">
+          <TriggerPreview variant="secondary" radius="squared" className="w-200" />
+          <TriggerPreview variant="secondary" radius="rounded" className="w-200" />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const ModalTriggerSizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-16">
+      <div className="flex flex-col gap-8">
+        <span className="text-xs text-foreground-neutral-muted">Base (32px)</span>
+        <div className="flex gap-8">
+          <TriggerPreview size="base" variant="primary" className="w-200" />
+          <TriggerPreview size="base" variant="secondary" className="w-200" />
+        </div>
+      </div>
+      <div className="flex flex-col gap-8">
+        <span className="text-xs text-foreground-neutral-muted">Small (28px)</span>
+        <div className="flex gap-8">
+          <TriggerPreview size="small" variant="primary" className="w-200" />
+          <TriggerPreview size="small" variant="secondary" className="w-200" />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const AllCombinations: Story = {
+  render: () => (
+    <div className="flex flex-col gap-24">
+      <div>
+        <h3 className="text-sm font-medium text-foreground-neutral-base mb-12">Inline Search</h3>
+        <div className="grid grid-cols-4 gap-12">
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">Primary / Squared / Base</span>
+            <SearchInline
+              variant="primary"
+              radius="squared"
+              size="base"
+              placeholder="Search..."
+              className="w-full"
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">Primary / Squared / Small</span>
+            <SearchInline
+              variant="primary"
+              radius="squared"
+              size="small"
+              placeholder="Search..."
+              className="w-full"
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">Primary / Rounded / Base</span>
+            <SearchInline
+              variant="primary"
+              radius="rounded"
+              size="base"
+              placeholder="Search..."
+              className="w-full"
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">Primary / Rounded / Small</span>
+            <SearchInline
+              variant="primary"
+              radius="rounded"
+              size="small"
+              placeholder="Search..."
+              className="w-full"
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">
+              Secondary / Squared / Base
+            </span>
+            <SearchInline
+              variant="secondary"
+              radius="squared"
+              size="base"
+              placeholder="Search..."
+              className="w-full"
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">
+              Secondary / Squared / Small
+            </span>
+            <SearchInline
+              variant="secondary"
+              radius="squared"
+              size="small"
+              placeholder="Search..."
+              className="w-full"
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">
+              Secondary / Rounded / Base
+            </span>
+            <SearchInline
+              variant="secondary"
+              radius="rounded"
+              size="base"
+              placeholder="Search..."
+              className="w-full"
+            />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">
+              Secondary / Rounded / Small
+            </span>
+            <SearchInline
+              variant="secondary"
+              radius="rounded"
+              size="small"
+              placeholder="Search..."
+              className="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-medium text-foreground-neutral-base mb-12">
+          Modal Search Triggers
+        </h3>
+        <div className="grid grid-cols-4 gap-12">
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">Primary / Squared / Base</span>
+            <TriggerPreview variant="primary" radius="squared" size="base" className="w-full" />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">Primary / Squared / Small</span>
+            <TriggerPreview variant="primary" radius="squared" size="small" className="w-full" />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">Primary / Rounded / Base</span>
+            <TriggerPreview variant="primary" radius="rounded" size="base" className="w-full" />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">Primary / Rounded / Small</span>
+            <TriggerPreview variant="primary" radius="rounded" size="small" className="w-full" />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">
+              Secondary / Squared / Base
+            </span>
+            <TriggerPreview variant="secondary" radius="squared" size="base" className="w-full" />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">
+              Secondary / Squared / Small
+            </span>
+            <TriggerPreview variant="secondary" radius="squared" size="small" className="w-full" />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">
+              Secondary / Rounded / Base
+            </span>
+            <TriggerPreview variant="secondary" radius="rounded" size="base" className="w-full" />
+          </div>
+          <div className="flex flex-col gap-4">
+            <span className="text-xs text-foreground-neutral-muted">
+              Secondary / Rounded / Small
+            </span>
+            <TriggerPreview variant="secondary" radius="rounded" size="small" className="w-full" />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};

package/src/components/search/search.tsx

@@ -0,0 +1,47 @@
+import {Command as CommandPrimitive} from 'cmdk';
+import type {ReactNode} from 'react';
+import {useCallback, useState} from 'react';
+import {SearchContext, useControllableState, useKeyboardShortcut} from './search-context';
+
+export type SearchProps = {
+  children: ReactNode;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  shortcutKey?: string;
+  shouldFilter?: boolean;
+};
+
+export function Search({
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  defaultOpen = false,
+  shortcutKey,
+  shouldFilter = true,
+}: SearchProps) {
+  const [open, setOpen] = useControllableState(controlledOpen, defaultOpen, onOpenChange);
+  const [searchValue, setSearchValue] = useState('');
+
+  const handleOpen = useCallback(() => setOpen(true), [setOpen]);
+
+  useKeyboardShortcut(shortcutKey, handleOpen);
+
+  const handleSetOpen = useCallback(
+    (newOpen: boolean) => {
+      if (!newOpen) {
+        setSearchValue('');
+      }
+      setOpen(newOpen);
+    },
+    [setOpen],
+  );
+
+  return (
+    <SearchContext.Provider value={{open, setOpen: handleSetOpen, searchValue, setSearchValue}}>
+      <CommandPrimitive data-slot="search" shouldFilter={shouldFilter}>
+        {children}
+      </CommandPrimitive>
+    </SearchContext.Provider>
+  );
+}

package/src/components/select/index.ts

@@ -0,0 +1 @@
+export * from './select';

package/src/components/select/select.stories.tsx

@@ -0,0 +1,207 @@
+import type {Meta, StoryObj} from '@storybook/react';
+import {Kbd} from '../kbd';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from './select';
+
+const meta = {
+  title: 'Components/Select',
+  component: Select,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-200">
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option1">Option 1</SelectItem>
+        <SelectItem value="option2">Option 2</SelectItem>
+        <SelectItem value="option3">Option 3</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithGroups: Story = {
+  render: () => (
+    <Select defaultValue="typescript">
+      <SelectTrigger className="w-280">
+        <SelectValue placeholder="Select a technology" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Frontend</SelectLabel>
+          <SelectItem value="react">React</SelectItem>
+          <SelectItem value="vue">Vue</SelectItem>
+          <SelectItem value="angular">Angular</SelectItem>
+          <SelectItem value="svelte">Svelte</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Backend</SelectLabel>
+          <SelectItem value="nodejs">Node.js</SelectItem>
+          <SelectItem value="python">Python</SelectItem>
+          <SelectItem value="ruby">Ruby</SelectItem>
+          <SelectItem value="go">Go</SelectItem>
+        </SelectGroup>
+        <SelectSeparator />
+        <SelectGroup>
+          <SelectLabel>Languages</SelectLabel>
+          <SelectItem value="typescript">TypeScript</SelectItem>
+          <SelectItem value="javascript">JavaScript</SelectItem>
+          <SelectItem value="rust">Rust</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+};
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex flex-col gap-12">
+      <Select defaultValue="active">
+        <SelectTrigger className="w-200">
+          <SelectValue placeholder="Select status" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="active" icon="checkboxCircleLine">
+            Active
+          </SelectItem>
+          <SelectItem value="pending" icon="timeLine">
+            Pending
+          </SelectItem>
+          <SelectItem value="inactive" icon="closeLine">
+            Inactive
+          </SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Select defaultValue="medium">
+        <SelectTrigger className="w-200">
+          <SelectValue placeholder="Select priority" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="high" icon="arrowUpLine">
+            High
+          </SelectItem>
+          <SelectItem value="medium" icon="equalLine">
+            Medium
+          </SelectItem>
+          <SelectItem value="low" icon="arrowDownLine">
+            Low
+          </SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-12">
+      <Select>
+        <SelectTrigger size="small" className="w-200">
+          <SelectValue placeholder="Small" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Select>
+        <SelectTrigger size="base" className="w-200">
+          <SelectValue placeholder="Base (default)" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-12">
+      <Select>
+        <SelectTrigger variant="base" className="w-200">
+          <SelectValue placeholder="Base variant" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Select>
+        <SelectTrigger variant="component" className="w-200">
+          <SelectValue placeholder="Component variant" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="option1">Option 1</SelectItem>
+          <SelectItem value="option2">Option 2</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  ),
+};
+
+export const TimeSelector: Story = {
+  render: () => (
+    <Select defaultValue="2days">
+      <SelectTrigger className="w-280">
+        <div className="flex items-center gap-8 flex-1 min-w-0">
+          <SelectValue placeholder="Select time range" />
+        </div>
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="1hour">
+          <div className="flex items-center gap-8">
+            <Kbd className="h-16">1h</Kbd>
+            <span>Past 1 Hour</span>
+          </div>
+        </SelectItem>
+        <SelectItem value="1day">
+          <div className="flex items-center gap-8">
+            <Kbd className="h-16">1d</Kbd>
+            <span>Past 1 Day</span>
+          </div>
+        </SelectItem>
+        <SelectItem value="2days">
+          <div className="flex items-center gap-8">
+            <Kbd className="h-16">2d</Kbd>
+            <span>Past 2 Days</span>
+          </div>
+        </SelectItem>
+        <SelectItem value="7days">
+          <div className="flex items-center gap-8">
+            <Kbd className="h-16">7d</Kbd>
+            <span>Past 7 Days</span>
+          </div>
+        </SelectItem>
+        <SelectItem value="30days">
+          <div className="flex items-center gap-8">
+            <Kbd className="h-16">30d</Kbd>
+            <span>Past 30 Days</span>
+          </div>
+        </SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+};