@neynar/ui 0.1.1

package/src/components/ui/stories/combobox.stories.tsx

@@ -0,0 +1,301 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Combobox } from "../combobox";
+import { Label } from "../label";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../card";
+
+const meta = {
+  title: "Form & Input/Combobox",
+  component: Combobox,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A searchable dropdown component that combines Command and Popover primitives. Perfect for selecting from moderate to large lists where search functionality improves user experience.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    options: {
+      control: { type: "object" },
+      description: "Array of options to display in the combobox",
+    },
+    value: {
+      control: { type: "text" },
+      description: "The selected value",
+    },
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text for the trigger button",
+    },
+    emptyText: {
+      control: { type: "text" },
+      description: "Text to display when no options match the search",
+    },
+    searchPlaceholder: {
+      control: { type: "text" },
+      description: "Placeholder text for the search input",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the combobox is disabled",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes for the container",
+    },
+    buttonClassName: {
+      control: { type: "text" },
+      description: "Additional CSS classes for the trigger button",
+    },
+    popoverClassName: {
+      control: { type: "text" },
+      description: "Additional CSS classes for the popover content",
+    },
+  },
+} satisfies Meta<typeof Combobox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample data for stories
+const frameworkOptions = [
+  { value: "next.js", label: "Next.js" },
+  { value: "sveltekit", label: "SvelteKit" },
+  { value: "nuxt.js", label: "Nuxt.js" },
+  { value: "remix", label: "Remix" },
+  { value: "astro", label: "Astro" },
+  { value: "gatsby", label: "Gatsby" },
+  { value: "vite", label: "Vite" },
+];
+
+const statusOptions = [
+  { value: "active", label: "Active" },
+  { value: "pending", label: "Pending" },
+  { value: "draft", label: "Draft" },
+  { value: "archived", label: "Archived (Read Only)", disabled: true },
+  { value: "deleted", label: "Deleted (Unavailable)", disabled: true },
+];
+
+const clientOptions = [
+  { value: "warpcast", label: "Warpcast" },
+  { value: "supercast", label: "Supercast" },
+  { value: "yup", label: "Yup" },
+  { value: "launchcaster", label: "Launchcaster" },
+  { value: "paragraph", label: "Paragraph" },
+  { value: "neynar", label: "Neynar SDK" },
+];
+
+/**
+ * Interactive playground showcasing all combobox props and variants.
+ * Use the controls panel to experiment with different configurations.
+ */
+export const Interactive: Story = {
+  args: {
+    options: frameworkOptions,
+    placeholder: "Select framework...",
+    searchPlaceholder: "Search frameworks...",
+    emptyText: "No framework found.",
+    buttonClassName: "w-[250px]",
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Explore all combobox properties using the controls panel. This story demonstrates the basic functionality with framework selection.",
+      },
+    },
+  },
+};
+
+/**
+ * Systematic display of all combobox variants and states.
+ * Shows different configurations, disabled options, and styling variations.
+ */
+export const Variants: Story = {
+  args: {
+    options: frameworkOptions,
+    placeholder: "Select framework...",
+    searchPlaceholder: "Search frameworks...",
+    emptyText: "No framework found.",
+    buttonClassName: "w-[250px]",
+  },
+  render: () => (
+    <div className="grid gap-8 max-w-4xl">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Basic Variants</h3>
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label>Default State</Label>
+            <Combobox
+              options={frameworkOptions}
+              placeholder="Select framework..."
+              buttonClassName="w-full"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>With Selected Value</Label>
+            <Combobox
+              options={frameworkOptions}
+              value="next.js"
+              placeholder="Select framework..."
+              buttonClassName="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Disabled States</h3>
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label>Disabled Combobox</Label>
+            <Combobox
+              options={frameworkOptions}
+              placeholder="Select framework..."
+              disabled
+              buttonClassName="w-full"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Disabled Options</Label>
+            <Combobox
+              options={statusOptions}
+              placeholder="Select status..."
+              buttonClassName="w-full"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Custom Styling</h3>
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label>Custom Button Styling</Label>
+            <Combobox
+              options={clientOptions}
+              placeholder="Select client..."
+              buttonClassName="w-full border-primary/50 bg-primary/5"
+              popoverClassName="border-primary/50"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Compact Size</Label>
+            <Combobox
+              options={frameworkOptions.slice(0, 4)}
+              placeholder="Framework..."
+              searchPlaceholder="Search..."
+              buttonClassName="w-[180px] text-sm"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Comprehensive overview of combobox variants including default states, disabled options, and custom styling examples.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage examples showing combobox in practical UI contexts.
+ * Demonstrates form integration, configuration panels, and user selection flows.
+ */
+export const InContext: Story = {
+  args: {
+    options: frameworkOptions,
+    placeholder: "Select framework...",
+    searchPlaceholder: "Search frameworks...",
+    emptyText: "No framework found.",
+    buttonClassName: "w-[250px]",
+  },
+  render: () => (
+    <div className="grid gap-8 max-w-4xl">
+      <Card className="w-[400px]">
+        <CardHeader>
+          <CardTitle>Project Configuration</CardTitle>
+          <CardDescription>
+            Configure your new Farcaster application
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label>Framework</Label>
+            <Combobox
+              options={frameworkOptions}
+              placeholder="Choose a framework..."
+              searchPlaceholder="Search frameworks..."
+              emptyText="Framework not found."
+              buttonClassName="w-full"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Farcaster Client</Label>
+            <Combobox
+              options={clientOptions}
+              placeholder="Select client..."
+              searchPlaceholder="Search clients..."
+              emptyText="Client not found."
+              buttonClassName="w-full"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label>Project Status</Label>
+            <Combobox
+              options={statusOptions}
+              placeholder="Set initial status..."
+              searchPlaceholder="Search status..."
+              emptyText="Status not found."
+              buttonClassName="w-full"
+            />
+          </div>
+        </CardContent>
+      </Card>
+
+      <div className="space-y-4 w-[350px]">
+        <div className="space-y-2">
+          <Label>Webhook Events</Label>
+          <Combobox
+            options={[
+              { value: "cast.created", label: "Cast Created" },
+              { value: "cast.deleted", label: "Cast Deleted" },
+              { value: "user.updated", label: "User Updated" },
+              { value: "follow.created", label: "Follow Created" },
+              { value: "frame.interaction", label: "Frame Interaction" },
+            ]}
+            placeholder="Subscribe to events..."
+            searchPlaceholder="Search events..."
+            emptyText="No events found."
+            buttonClassName="w-full"
+          />
+        </div>
+        <p className="text-xs text-muted-foreground">
+          Select webhook events to monitor for real-time Farcaster network
+          updates
+        </p>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Practical examples showing combobox in real application contexts including form configuration and event subscription interfaces.",
+      },
+    },
+  },
+};