@neynar/ui 0.1.1

package/src/components/ui/stories/text-field.stories.tsx

@@ -0,0 +1,280 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { TextField } from "../text-field";
+import { Button } from "../button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card";
+
+const meta = {
+  title: "Form & Input/TextField",
+  component: TextField,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A complete form field component that combines input, label, helper text, and error handling. Built on top of the Input component with enhanced accessibility and UX features.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      control: { type: "text" },
+      description: "The label for the input field",
+    },
+    helperText: {
+      control: { type: "text" },
+      description: "Helper text displayed below the input",
+    },
+    error: {
+      control: { type: "text" },
+      description: "Error message to display (takes precedence over helperText)",
+    },
+    required: {
+      control: { type: "boolean" },
+      description: "Whether the field is required",
+    },
+    type: {
+      control: { type: "select" },
+      options: ["text", "email", "password", "number", "tel", "url", "search"],
+      description: "The input type",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the field is disabled",
+    },
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text for the input",
+    },
+  },
+} satisfies Meta<typeof TextField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all TextField props and variants.
+ * Use the controls below to experiment with different configurations.
+ */
+export const Interactive: Story = {
+  args: {
+    label: "Username",
+    placeholder: "Enter your username",
+    helperText: "Choose a unique username (3-20 characters)",
+    required: false,
+    disabled: false,
+    type: "text",
+  },
+  render: (args) => (
+    <div className="w-[350px]">
+      <TextField {...args} />
+    </div>
+  ),
+};
+
+/**
+ * Showcase of all TextField variants and states.
+ * Demonstrates the component in different configurations for design reference.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8 w-[400px]">
+      {/* Basic States */}
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Basic States</h3>
+        <div className="space-y-4">
+          <TextField
+            label="Default Field"
+            placeholder="Default state"
+          />
+          <TextField
+            label="With Helper Text"
+            placeholder="Enter value"
+            helperText="This is helpful information"
+          />
+          <TextField
+            label="Required Field"
+            placeholder="Required input"
+            required
+          />
+          <TextField
+            label="Disabled Field"
+            placeholder="Cannot edit"
+            disabled
+            defaultValue="Disabled value"
+          />
+        </div>
+      </div>
+
+      {/* Error State */}
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Error State</h3>
+        <div className="space-y-4">
+          <TextField
+            label="Field with Error"
+            placeholder="Invalid input"
+            error="This field contains an error"
+            defaultValue="invalid@"
+          />
+          <TextField
+            label="Required Field Error"
+            placeholder="Required field"
+            required
+            error="This field is required"
+          />
+        </div>
+      </div>
+
+      {/* Input Types */}
+      <div>
+        <h3 className="mb-4 text-lg font-semibold">Input Types</h3>
+        <div className="space-y-4">
+          <TextField
+            label="Email"
+            type="email"
+            placeholder="user@example.com"
+            helperText="We'll never share your email"
+          />
+          <TextField
+            label="Password"
+            type="password"
+            placeholder="Enter password"
+            helperText="Must be at least 8 characters"
+          />
+          <TextField
+            label="Number"
+            type="number"
+            placeholder="123"
+            helperText="Numeric values only"
+          />
+          <TextField
+            label="URL"
+            type="url"
+            placeholder="https://example.com"
+            helperText="Must be a valid URL"
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Real-world example showing TextField in a Farcaster profile form context.
+ * Demonstrates how the component works in practical applications.
+ */
+export const InContext: Story = {
+  render: function ProfileFormExample() {
+    const [formData, setFormData] = React.useState({
+      username: "",
+      displayName: "",
+      bio: "",
+      website: "",
+    });
+    const [errors, setErrors] = React.useState<Record<string, string>>({});
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      const newErrors: Record<string, string> = {};
+      
+      if (!formData.username) {
+        newErrors.username = "Username is required";
+      } else if (formData.username.length < 3) {
+        newErrors.username = "Username must be at least 3 characters";
+      }
+      
+      if (!formData.displayName) {
+        newErrors.displayName = "Display name is required";
+      }
+      
+      if (formData.website && !formData.website.startsWith("http")) {
+        newErrors.website = "Website must be a valid URL";
+      }
+      
+      setErrors(newErrors);
+      
+      if (Object.keys(newErrors).length === 0) {
+        console.log("Profile updated:", formData);
+        // In a real app, this would make an API call
+      }
+    };
+
+    const updateField = (field: string, value: string) => {
+      setFormData(prev => ({ ...prev, [field]: value }));
+      // Clear error when user starts typing
+      if (errors[field]) {
+        setErrors(prev => ({ ...prev, [field]: "" }));
+      }
+    };
+
+    return (
+      <Card className="w-[450px]">
+        <CardHeader>
+          <CardTitle>Edit Farcaster Profile</CardTitle>
+          <CardDescription>
+            Update your profile information to customize how you appear to others
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <TextField
+              label="Username"
+              placeholder="@username"
+              required
+              value={formData.username}
+              onChange={(e) => updateField("username", e.target.value)}
+              error={errors.username}
+              helperText="3-20 characters, letters and numbers only"
+            />
+            
+            <TextField
+              label="Display Name"
+              placeholder="Your full name"
+              required
+              value={formData.displayName}
+              onChange={(e) => updateField("displayName", e.target.value)}
+              error={errors.displayName}
+              helperText="How your name appears in the app"
+            />
+            
+            <TextField
+              label="Bio"
+              placeholder="Tell others about yourself..."
+              value={formData.bio}
+              onChange={(e) => updateField("bio", e.target.value)}
+              helperText={`${formData.bio.length}/160 characters`}
+              maxLength={160}
+            />
+            
+            <TextField
+              label="Website"
+              type="url"
+              placeholder="https://yourwebsite.com"
+              value={formData.website}
+              onChange={(e) => updateField("website", e.target.value)}
+              error={errors.website}
+              helperText="Optional: Link to your personal website or portfolio"
+            />
+            
+            <div className="flex gap-3 pt-2">
+              <Button type="submit" className="flex-1">
+                Save Changes
+              </Button>
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={() => {
+                  setFormData({username: "", displayName: "", bio: "", website: ""});
+                  setErrors({});
+                }}
+              >
+                Reset
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    );
+  },
+};

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

@@ -0,0 +1,245 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Textarea } from "../textarea";
+import { Label } from "../label";
+import { Button } from "../button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../card";
+import { Avatar, AvatarFallback } from "../avatar";
+
+const meta = {
+  title: "Form & Input/Textarea",
+  component: Textarea,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A multi-line text input control for entering longer pieces of text. Features automatic content-based resizing and consistent styling with other form elements.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    placeholder: {
+      control: { type: "text" },
+      description: "Placeholder text displayed when empty",
+    },
+    disabled: {
+      control: { type: "boolean" },
+      description: "Whether the textarea is disabled",
+    },
+    rows: {
+      control: { type: "number", min: 1, max: 10 },
+      description: "Number of visible text lines for initial height",
+    },
+    readOnly: {
+      control: { type: "boolean" },
+      description: "Whether the textarea is read-only",
+    },
+    maxLength: {
+      control: { type: "number", min: 0, max: 1000 },
+      description: "Maximum number of characters allowed",
+    },
+  },
+} satisfies Meta<typeof Textarea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  args: {
+    placeholder: "Type your message here...",
+    rows: 4,
+    disabled: false,
+    readOnly: false,
+  },
+  render: (args) => (
+    <div className="w-[400px] space-y-2">
+      <Label htmlFor="interactive-textarea">Interactive Textarea</Label>
+      <Textarea id="interactive-textarea" {...args} />
+      <p className="text-sm text-muted-foreground">
+        Adjust the controls to see different states and configurations
+      </p>
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-6 w-[500px]">
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">States</h3>
+
+        <div className="space-y-2">
+          <Label>Default</Label>
+          <Textarea placeholder="Default textarea" />
+        </div>
+
+        <div className="space-y-2">
+          <Label>With content</Label>
+          <Textarea defaultValue="This textarea has some content already filled in." />
+        </div>
+
+        <div className="space-y-2">
+          <Label>Disabled</Label>
+          <Textarea disabled placeholder="This textarea is disabled" />
+        </div>
+
+        <div className="space-y-2">
+          <Label>Read-only</Label>
+          <Textarea readOnly defaultValue="This content cannot be modified." />
+        </div>
+
+        <div className="space-y-2">
+          <Label className="text-destructive">Error state</Label>
+          <Textarea
+            placeholder="Enter your feedback"
+            aria-invalid="true"
+            aria-describedby="error-message"
+          />
+          <p id="error-message" className="text-sm text-destructive">
+            This field is required
+          </p>
+        </div>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Sizes</h3>
+
+        <div className="space-y-2">
+          <Label>Small (2 rows)</Label>
+          <Textarea placeholder="Small textarea" rows={2} />
+        </div>
+
+        <div className="space-y-2">
+          <Label>Default (auto-sizing)</Label>
+          <Textarea placeholder="Auto-sizing textarea" />
+        </div>
+
+        <div className="space-y-2">
+          <Label>Large (6 rows)</Label>
+          <Textarea placeholder="Large textarea" rows={6} />
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const InContext: Story = {
+  render: function CastComposerExample() {
+    const [content, setContent] = React.useState("");
+    const [reply, setReply] = React.useState("");
+    const [isReplying, setIsReplying] = React.useState(false);
+    const maxLength = 320;
+
+    return (
+      <div className="space-y-6 w-[600px]">
+        <Card>
+          <CardHeader>
+            <CardTitle>Create New Cast</CardTitle>
+            <CardDescription>
+              Share an update with your followers on Farcaster
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex gap-3">
+              <Avatar>
+                <AvatarFallback>ME</AvatarFallback>
+              </Avatar>
+              <div className="flex-1 space-y-2">
+                <Textarea
+                  placeholder="What's happening?"
+                  value={content}
+                  onChange={(e) =>
+                    setContent(e.target.value.slice(0, maxLength))
+                  }
+                  className="min-h-[100px]"
+                />
+                <div className="flex justify-between items-center">
+                  <div className="flex gap-2 text-sm text-muted-foreground">
+                    <span>📷 Image</span>
+                    <span>🔗 Link</span>
+                    <span>📊 Poll</span>
+                  </div>
+                  <span className="text-sm text-muted-foreground">
+                    {content.length}/{maxLength}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div className="flex justify-end">
+              <Button disabled={!content.trim()}>Cast</Button>
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardContent className="pt-4">
+            <div className="space-y-4">
+              {/* Original cast */}
+              <div className="flex gap-3">
+                <Avatar>
+                  <AvatarFallback>VB</AvatarFallback>
+                </Avatar>
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="font-semibold">vitalik.eth</span>
+                    <span className="text-sm text-muted-foreground">· 2h</span>
+                  </div>
+                  <p className="text-sm mt-1">
+                    What are your thoughts on the future of decentralized social
+                    networks? I believe we&apos;re just getting started with
+                    protocols like Farcaster.
+                  </p>
+                </div>
+              </div>
+
+              {/* Reply section */}
+              {!isReplying ? (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setIsReplying(true)}
+                  className="ml-12"
+                >
+                  💬 Reply
+                </Button>
+              ) : (
+                <div className="ml-12 space-y-3">
+                  <Textarea
+                    placeholder="Share your thoughts..."
+                    value={reply}
+                    onChange={(e) => setReply(e.target.value)}
+                    className="min-h-[80px]"
+                    autoFocus
+                  />
+                  <div className="flex justify-between items-center">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => {
+                        setIsReplying(false);
+                        setReply("");
+                      }}
+                    >
+                      Cancel
+                    </Button>
+                    <Button size="sm" disabled={!reply.trim()}>
+                      Reply
+                    </Button>
+                  </div>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  },
+};