@neynar/ui 0.2.1 → 0.3.0

package/src/components/ui/stories/input-group.stories.tsx

@@ -0,0 +1,444 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Copy, DollarSign, Mail, Search, Send, X } from "lucide-react";
+import { useState } from "react";
+import { Button } from "../button";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupText,
+  InputGroupTextarea,
+} from "../input-group";
+import { Kbd } from "../kbd";
+
+const meta = {
+  title: "Form & Input/InputGroup",
+  component: InputGroup,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "An input group component that combines inputs with addons, buttons, and text. Supports inline and block alignment for flexible layouts.",
+      },
+    },
+  },
+  argTypes: {
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+  },
+} satisfies Meta<typeof InputGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with input group properties.
+ */
+export const Interactive: Story = {
+  render: () => (
+    <div className="w-96">
+      <InputGroup>
+        <InputGroupAddon align="inline-start">
+          <Search className="size-4" />
+        </InputGroupAddon>
+        <InputGroupInput placeholder="Search..." />
+      </InputGroup>
+    </div>
+  ),
+};
+
+/**
+ * Showcase of all available input group variants and addon positions.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-12 w-full max-w-2xl">
+      {/* Inline Start Addons */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Inline Start Addons
+        </h3>
+        <div className="space-y-3">
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <Search className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput placeholder="Search..." />
+          </InputGroup>
+
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <Mail className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput type="email" placeholder="Email address" />
+          </InputGroup>
+
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <InputGroupText>https://</InputGroupText>
+            </InputGroupAddon>
+            <InputGroupInput placeholder="example.com" />
+          </InputGroup>
+
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <DollarSign className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput type="number" placeholder="0.00" />
+          </InputGroup>
+        </div>
+      </div>
+
+      {/* Inline End Addons */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Inline End Addons
+        </h3>
+        <div className="space-y-3">
+          <InputGroup>
+            <InputGroupInput placeholder="Search..." />
+            <InputGroupAddon align="inline-end">
+              <Kbd>⌘K</Kbd>
+            </InputGroupAddon>
+          </InputGroup>
+
+          <InputGroup>
+            <InputGroupInput placeholder="Enter amount" />
+            <InputGroupAddon align="inline-end">
+              <InputGroupText>USD</InputGroupText>
+            </InputGroupAddon>
+          </InputGroup>
+
+          <InputGroup>
+            <InputGroupInput placeholder="Enter text to copy" />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton size="icon-xs">
+                <Copy className="size-4" />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </div>
+      </div>
+
+      {/* Both Sides */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Both Sides
+        </h3>
+        <div className="space-y-3">
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <Search className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput placeholder="Search..." />
+            <InputGroupAddon align="inline-end">
+              <Kbd>⌘K</Kbd>
+            </InputGroupAddon>
+          </InputGroup>
+
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <DollarSign className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput type="number" placeholder="0.00" />
+            <InputGroupAddon align="inline-end">
+              <InputGroupText>USD</InputGroupText>
+            </InputGroupAddon>
+          </InputGroup>
+
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <Mail className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput type="email" placeholder="you@example.com" />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton size="icon-xs">
+                <Send className="size-4" />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </div>
+      </div>
+
+      {/* Block Addons */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Block Addons (Top/Bottom)
+        </h3>
+        <div className="space-y-3">
+          <InputGroup>
+            <InputGroupAddon align="block-start">
+              <InputGroupText>Message</InputGroupText>
+            </InputGroupAddon>
+            <InputGroupTextarea placeholder="Type your message here..." />
+          </InputGroup>
+
+          <InputGroup>
+            <InputGroupTextarea placeholder="Compose your message..." />
+            <InputGroupAddon align="block-end">
+              <InputGroupButton size="sm">
+                <Send className="size-4" />
+                Send
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+
+          <InputGroup>
+            <InputGroupAddon align="block-start">
+              <InputGroupText>Comment</InputGroupText>
+              <InputGroupButton size="icon-xs">
+                <X className="size-4" />
+              </InputGroupButton>
+            </InputGroupAddon>
+            <InputGroupTextarea placeholder="Add a comment..." />
+            <InputGroupAddon align="block-end">
+              <InputGroupButton size="sm" variant="default">
+                Post Comment
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </div>
+      </div>
+
+      {/* With Buttons */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Action Buttons
+        </h3>
+        <div className="space-y-3">
+          <InputGroup>
+            <InputGroupInput placeholder="Enter coupon code" />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton size="sm">Apply</InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <Search className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput placeholder="Search repositories..." />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton size="sm">Search</InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+
+          <InputGroup>
+            <InputGroupInput placeholder="Enter newsletter email" />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton size="sm">
+                <Mail className="size-4" />
+                Subscribe
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </div>
+      </div>
+
+      {/* Error State */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Error State
+        </h3>
+        <InputGroup>
+          <InputGroupAddon align="inline-start">
+            <Mail className="size-4" />
+          </InputGroupAddon>
+          <InputGroupInput
+            type="email"
+            placeholder="Email"
+            aria-invalid="true"
+            defaultValue="invalid-email"
+          />
+        </InputGroup>
+      </div>
+
+      {/* Disabled State */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Disabled State
+        </h3>
+        <InputGroup data-disabled="true">
+          <InputGroupAddon align="inline-start">
+            <Search className="size-4" />
+          </InputGroupAddon>
+          <InputGroupInput disabled placeholder="Disabled input" />
+        </InputGroup>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Complete showcase of input groups with various addon positions, buttons, icons, and states.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage examples showing input groups in practical scenarios.
+ */
+export const InContext: Story = {
+  render: () => {
+    const [searchQuery, setSearchQuery] = useState("");
+    const [email, setEmail] = useState("");
+    const [amount, setAmount] = useState("");
+    const [message, setMessage] = useState("");
+
+    return (
+      <div className="space-y-8 w-full max-w-2xl">
+        {/* Search Bar */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Search</h3>
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <Search className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput
+              placeholder="Search for anything..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+            <InputGroupAddon align="inline-end">
+              <Kbd>⌘K</Kbd>
+            </InputGroupAddon>
+          </InputGroup>
+          {searchQuery && (
+            <p className="text-sm text-muted-foreground">
+              Searching for: "{searchQuery}"
+            </p>
+          )}
+        </div>
+
+        {/* Newsletter Subscription */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Subscribe to Newsletter</h3>
+          <p className="text-sm text-muted-foreground">
+            Get the latest updates delivered to your inbox.
+          </p>
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <Mail className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput
+              type="email"
+              placeholder="Enter your email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton size="sm">Subscribe</InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </div>
+
+        {/* Price Input */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Set Product Price</h3>
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <DollarSign className="size-4" />
+            </InputGroupAddon>
+            <InputGroupInput
+              type="number"
+              placeholder="0.00"
+              value={amount}
+              onChange={(e) => setAmount(e.target.value)}
+            />
+            <InputGroupAddon align="inline-end">
+              <InputGroupText>USD</InputGroupText>
+            </InputGroupAddon>
+          </InputGroup>
+        </div>
+
+        {/* URL Builder */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Custom Domain</h3>
+          <InputGroup>
+            <InputGroupAddon align="inline-start">
+              <InputGroupText>https://</InputGroupText>
+            </InputGroupAddon>
+            <InputGroupInput placeholder="yourdomain.com" />
+          </InputGroup>
+        </div>
+
+        {/* Comment Box */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Add a Comment</h3>
+          <InputGroup>
+            <InputGroupAddon align="block-start">
+              <InputGroupText>Your Comment</InputGroupText>
+            </InputGroupAddon>
+            <InputGroupTextarea
+              placeholder="Write your comment here..."
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              rows={4}
+            />
+            <InputGroupAddon align="block-end">
+              <div className="flex gap-2 w-full justify-between">
+                <InputGroupText className="text-xs">
+                  {message.length} characters
+                </InputGroupText>
+                <InputGroupButton size="sm">
+                  <Send className="size-4" />
+                  Post
+                </InputGroupButton>
+              </div>
+            </InputGroupAddon>
+          </InputGroup>
+        </div>
+
+        {/* Coupon Code */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Apply Discount Code</h3>
+          <InputGroup>
+            <InputGroupInput placeholder="Enter coupon code" />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton size="sm">Apply</InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </div>
+
+        {/* Copy to Clipboard */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">API Key</h3>
+          <InputGroup>
+            <InputGroupInput
+              readOnly
+              value="sk_live_51J3jH8SD3jH8SD3jH8SD3jH8SD3jH8SD"
+            />
+            <InputGroupAddon align="inline-end">
+              <InputGroupButton
+                size="icon-sm"
+                onClick={() => {
+                  navigator.clipboard.writeText(
+                    "sk_live_51J3jH8SD3jH8SD3jH8SD3jH8SD3jH8SD"
+                  );
+                }}
+              >
+                <Copy className="size-4" />
+              </InputGroupButton>
+            </InputGroupAddon>
+          </InputGroup>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world examples showing input groups in search bars, forms, price inputs, comments, and more.",
+      },
+    },
+  },
+};

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

@@ -15,7 +15,6 @@ const meta = {
       },
     },
   },
-  tags: ["autodocs"],
   argTypes: {
     type: {
       control: { type: "select" },