@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-color-picker/WakaColorPicker.stories.tsx

@@ -0,0 +1,200 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaColorPicker } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaColorPicker> = {
+  title: 'Components/Forms/WakaColorPicker',
+  component: WakaColorPicker,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A color picker component with presets, EyeDropper support, and multiple formats.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    format: {
+      control: 'select',
+      options: ['hex', 'rgb', 'hsl'],
+      description: 'Color format',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the trigger button',
+    },
+    showPresets: {
+      control: 'boolean',
+      description: 'Show preset colors',
+    },
+    showEyeDropper: {
+      control: 'boolean',
+      description: 'Show EyeDropper tool (if supported)',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the picker',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaColorPicker>
+
+export const Default: Story = {
+  render: function ColorPickerDemo() {
+    const [color, setColor] = React.useState('#3b82f6')
+
+    return (
+      <div className="flex items-center gap-4">
+        <WakaColorPicker value={color} onChange={setColor} />
+        <span className="text-sm font-mono">{color}</span>
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: function SizesDemo() {
+    const [color, setColor] = React.useState('#ef4444')
+
+    return (
+      <div className="flex items-center gap-4">
+        <div className="text-center">
+          <WakaColorPicker value={color} onChange={setColor} size="sm" />
+          <p className="text-xs text-muted-foreground mt-1">Small</p>
+        </div>
+        <div className="text-center">
+          <WakaColorPicker value={color} onChange={setColor} size="md" />
+          <p className="text-xs text-muted-foreground mt-1">Medium</p>
+        </div>
+        <div className="text-center">
+          <WakaColorPicker value={color} onChange={setColor} size="lg" />
+          <p className="text-xs text-muted-foreground mt-1">Large</p>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const Formats: Story = {
+  render: function FormatsDemo() {
+    const [hexColor, setHexColor] = React.useState('#22c55e')
+    const [rgbColor, setRgbColor] = React.useState('rgb(34, 197, 94)')
+    const [hslColor, setHslColor] = React.useState('hsl(142, 71%, 45%)')
+
+    return (
+      <div className="space-y-4">
+        <div className="flex items-center gap-4">
+          <WakaColorPicker value={hexColor} onChange={setHexColor} format="hex" />
+          <span className="text-sm font-mono">HEX: {hexColor}</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <WakaColorPicker value={rgbColor} onChange={setRgbColor} format="rgb" />
+          <span className="text-sm font-mono">RGB: {rgbColor}</span>
+        </div>
+        <div className="flex items-center gap-4">
+          <WakaColorPicker value={hslColor} onChange={setHslColor} format="hsl" />
+          <span className="text-sm font-mono">HSL: {hslColor}</span>
+        </div>
+      </div>
+    )
+  },
+}
+
+export const CustomPresets: Story = {
+  render: function CustomPresetsDemo() {
+    const [color, setColor] = React.useState('#8b5cf6')
+
+    const customPresets = [
+      '#000000', '#ffffff',
+      '#ef4444', '#f97316', '#f59e0b',
+      '#22c55e', '#14b8a6', '#3b82f6',
+      '#8b5cf6', '#ec4899',
+    ]
+
+    return (
+      <div className="flex items-center gap-4">
+        <WakaColorPicker
+          value={color}
+          onChange={setColor}
+          presets={customPresets}
+        />
+        <span className="text-sm font-mono">{color}</span>
+      </div>
+    )
+  },
+}
+
+export const NoPresets: Story = {
+  render: function NoPresetsDemo() {
+    const [color, setColor] = React.useState('#0ea5e9')
+
+    return (
+      <div className="flex items-center gap-4">
+        <WakaColorPicker
+          value={color}
+          onChange={setColor}
+          showPresets={false}
+        />
+        <span className="text-sm font-mono">{color}</span>
+      </div>
+    )
+  },
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <WakaColorPicker value="#6b7280" disabled />
+  ),
+}
+
+export const InForm: Story = {
+  render: function InFormDemo() {
+    const [bgColor, setBgColor] = React.useState('#ffffff')
+    const [textColor, setTextColor] = React.useState('#000000')
+    const [accentColor, setAccentColor] = React.useState('#3b82f6')
+
+    return (
+      <div className="space-y-4 w-[300px]">
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Background Color</label>
+          <div className="flex items-center gap-2">
+            <WakaColorPicker value={bgColor} onChange={setBgColor} />
+            <span className="text-sm font-mono flex-1">{bgColor}</span>
+          </div>
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Text Color</label>
+          <div className="flex items-center gap-2">
+            <WakaColorPicker value={textColor} onChange={setTextColor} />
+            <span className="text-sm font-mono flex-1">{textColor}</span>
+          </div>
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Accent Color</label>
+          <div className="flex items-center gap-2">
+            <WakaColorPicker value={accentColor} onChange={setAccentColor} />
+            <span className="text-sm font-mono flex-1">{accentColor}</span>
+          </div>
+        </div>
+
+        <div
+          className="p-4 rounded-lg mt-4"
+          style={{ backgroundColor: bgColor, color: textColor }}
+        >
+          <p className="font-semibold">Preview</p>
+          <p className="text-sm mt-1">This is how your colors look together.</p>
+          <button
+            className="mt-2 px-3 py-1 rounded text-white text-sm"
+            style={{ backgroundColor: accentColor }}
+          >
+            Accent Button
+          </button>
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/waka-combobox/WakaCombobox.stories.tsx

@@ -0,0 +1,250 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCombobox, type ComboboxOption } from './index'
+import * as React from 'react'
+import { User, Building, Globe } from 'lucide-react'
+
+const meta: Meta<typeof WakaCombobox> = {
+  title: 'Components/Forms/WakaCombobox',
+  component: WakaCombobox,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A combobox component with single/multi-select, async search, and option creation.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    multiple: {
+      control: 'boolean',
+      description: 'Enable multi-select mode',
+    },
+    creatable: {
+      control: 'boolean',
+      description: 'Allow creating new options',
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+      description: 'Size of the component',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the component',
+    },
+    clearable: {
+      control: 'boolean',
+      description: 'Allow clearing the selection',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCombobox>
+
+const frameworks: ComboboxOption[] = [
+  { value: 'nextjs', label: 'Next.js', description: 'The React Framework' },
+  { value: 'sveltekit', label: 'SvelteKit', description: 'Web development, streamlined' },
+  { value: 'nuxt', label: 'Nuxt', description: 'The Intuitive Vue Framework' },
+  { value: 'remix', label: 'Remix', description: 'Build better websites' },
+  { value: 'astro', label: 'Astro', description: 'The web framework for content' },
+]
+
+const groupedOptions: ComboboxOption[] = [
+  { value: 'john', label: 'John Doe', group: 'Users', icon: <User className="h-4 w-4" /> },
+  { value: 'jane', label: 'Jane Smith', group: 'Users', icon: <User className="h-4 w-4" /> },
+  { value: 'acme', label: 'Acme Inc', group: 'Organizations', icon: <Building className="h-4 w-4" /> },
+  { value: 'globex', label: 'Globex Corp', group: 'Organizations', icon: <Building className="h-4 w-4" /> },
+  { value: 'us', label: 'United States', group: 'Countries', icon: <Globe className="h-4 w-4" /> },
+  { value: 'uk', label: 'United Kingdom', group: 'Countries', icon: <Globe className="h-4 w-4" /> },
+]
+
+export const Default: Story = {
+  render: function ComboboxDemo() {
+    const [value, setValue] = React.useState<string | string[] | undefined>()
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={frameworks}
+          value={value as string}
+          onChange={(v) => setValue(v as string)}
+          placeholder="Select a framework..."
+        />
+      </div>
+    )
+  },
+}
+
+export const Multiple: Story = {
+  render: function MultipleDemo() {
+    const [value, setValue] = React.useState<string[] | undefined>()
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={frameworks}
+          value={value}
+          onChange={(v) => setValue(v as string[])}
+          multiple
+          placeholder="Select frameworks..."
+        />
+      </div>
+    )
+  },
+}
+
+export const WithGroups: Story = {
+  render: function GroupsDemo() {
+    const [value, setValue] = React.useState<string | undefined>()
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={groupedOptions}
+          value={value}
+          onChange={(v) => setValue(v as string)}
+          placeholder="Search..."
+        />
+      </div>
+    )
+  },
+}
+
+export const Creatable: Story = {
+  render: function CreatableDemo() {
+    const [value, setValue] = React.useState<string | undefined>()
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={frameworks}
+          value={value}
+          onChange={(v) => setValue(v as string)}
+          creatable
+          createLabel="Add"
+          placeholder="Select or create..."
+        />
+      </div>
+    )
+  },
+}
+
+export const AsyncSearch: Story = {
+  render: function AsyncDemo() {
+    const [value, setValue] = React.useState<string | undefined>()
+    const [loading, setLoading] = React.useState(false)
+
+    const searchFn = async (query: string): Promise<ComboboxOption[]> => {
+      setLoading(true)
+      await new Promise((resolve) => setTimeout(resolve, 500))
+      setLoading(false)
+      return frameworks.filter((f) =>
+        f.label.toLowerCase().includes(query.toLowerCase())
+      )
+    }
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={frameworks}
+          value={value}
+          onChange={(v) => setValue(v as string)}
+          onSearch={searchFn}
+          loading={loading}
+          placeholder="Search frameworks..."
+        />
+      </div>
+    )
+  },
+}
+
+export const WithMaxSelections: Story = {
+  render: function MaxSelectionsDemo() {
+    const [value, setValue] = React.useState<string[]>([])
+
+    return (
+      <div className="w-[300px]">
+        <WakaCombobox
+          options={frameworks}
+          value={value}
+          onChange={(v) => setValue((v as string[]) || [])}
+          multiple
+          maxSelections={3}
+          placeholder="Select up to 3..."
+        />
+        <p className="text-xs text-muted-foreground mt-2">
+          Selected: {value.length}/3
+        </p>
+      </div>
+    )
+  },
+}
+
+export const Sizes: Story = {
+  render: function SizesDemo() {
+    const [value, setValue] = React.useState<string | undefined>()
+
+    return (
+      <div className="space-y-4 w-[300px]">
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Small</p>
+          <WakaCombobox
+            options={frameworks}
+            value={value}
+            onChange={(v) => setValue(v as string)}
+            size="sm"
+            placeholder="Select..."
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Medium</p>
+          <WakaCombobox
+            options={frameworks}
+            value={value}
+            onChange={(v) => setValue(v as string)}
+            size="md"
+            placeholder="Select..."
+          />
+        </div>
+        <div>
+          <p className="text-sm text-muted-foreground mb-1">Large</p>
+          <WakaCombobox
+            options={frameworks}
+            value={value}
+            onChange={(v) => setValue(v as string)}
+            size="lg"
+            placeholder="Select..."
+          />
+        </div>
+      </div>
+    )
+  },
+}
+
+export const WithError: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaCombobox
+        options={frameworks}
+        error
+        placeholder="Required field..."
+      />
+      <p className="text-sm text-destructive mt-1">This field is required</p>
+    </div>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <WakaCombobox
+        options={frameworks}
+        value="nextjs"
+        disabled
+        placeholder="Disabled..."
+      />
+    </div>
+  ),
+}