@neynar/ui 0.4.0 → 1.0.0

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

@@ -1,279 +0,0 @@
-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.",
-      },
-    },
-  },
-  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/theme-toggle.stories.tsx

@@ -1,274 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ThemeToggle } from "../theme-toggle";
-
-/**
- * ThemeToggle component stories for design system documentation
- *
- * This story file demonstrates the ThemeToggle component's capabilities through three focused stories:
- * - Interactive: Playground for testing all props and custom theme configurations
- * - Variants: Systematic showcase of all available styles, sizes, and theme combinations
- * - InContext: Real-world usage examples for business and design teams
- */
-const meta = {
-  title: "Theme/ThemeToggle",
-  component: ThemeToggle,
-  parameters: {
-    layout: "centered",
-    docs: {
-      description: {
-        component:
-          "An advanced theme toggle component that supports custom themes, visual styling, and color-coded indicators. Built on top of the framework-agnostic useTheme hook for maximum compatibility across different React environments.",
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: { type: "select" },
-      options: [
-        "default",
-        "destructive",
-        "outline",
-        "secondary",
-        "ghost",
-        "link",
-      ],
-      description: "Visual style variant for the toggle button",
-    },
-    size: {
-      control: { type: "select" },
-      options: ["default", "sm", "lg", "icon"],
-      description:
-        "Size of the toggle button - icon shows only icon, others include text",
-    },
-    className: {
-      control: "text",
-      description: "Additional CSS classes to apply to the button",
-    },
-  },
-  args: {
-    variant: "outline",
-    size: "icon",
-  },
-} satisfies Meta<typeof ThemeToggle>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/**
- * Interactive Playground Story
- *
- * Use this story to test all ThemeToggle props and configurations through Storybook controls.
- * Perfect for designers and developers to experiment with custom themes and styling options.
- */
-export const Interactive: Story = {
-  args: {
-    variant: "outline",
-    size: "icon",
-    showLabel: false,
-    align: "end",
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          "Interactive playground for testing all ThemeToggle properties. Use the controls panel to experiment with custom themes, colors, variants, and visual options. The component will persist theme changes using cookies.",
-      },
-    },
-  },
-};
-
-/**
- * Variants Showcase Story
- *
- * Systematic display of all available ThemeToggle variants, sizes, and custom theme configurations.
- * Helps design teams understand the full range of available options and styling capabilities.
- */
-export const Variants: Story = {
-  render: () => (
-    <div className="space-y-8">
-      {/* Size Variants */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Size Variants</h3>
-        <div className="flex items-center gap-4">
-          <div className="space-y-2">
-            <div className="text-sm text-muted-foreground">Icon</div>
-            <ThemeToggle size="icon" />
-          </div>
-          <div className="space-y-2">
-            <div className="text-sm text-muted-foreground">Small</div>
-            <ThemeToggle size="sm" />
-          </div>
-          <div className="space-y-2">
-            <div className="text-sm text-muted-foreground">Default</div>
-            <ThemeToggle size="default" />
-          </div>
-          <div className="space-y-2">
-            <div className="text-sm text-muted-foreground">Large</div>
-            <ThemeToggle size="lg" />
-          </div>
-        </div>
-      </div>
-
-      {/* Visual Variants */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Visual Variants</h3>
-        <div className="flex flex-wrap gap-3">
-          <ThemeToggle variant="default" size="sm" />
-          <ThemeToggle variant="outline" size="sm" />
-          <ThemeToggle variant="secondary" size="sm" />
-          <ThemeToggle variant="ghost" size="sm" />
-          <ThemeToggle variant="link" size="sm" />
-        </div>
-      </div>
-
-      {/* Custom Themes */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Custom Themes</h3>
-        <div className="space-y-3">
-          <div className="space-y-2">
-            <div className="text-sm text-muted-foreground">
-              Basic Custom Themes
-            </div>
-            <ThemeToggle size="default" />
-          </div>
-
-          <div className="space-y-2">
-            <div className="text-sm text-muted-foreground">
-              With Color Indicators
-            </div>
-            <ThemeToggle size="default" />
-          </div>
-
-          <div className="space-y-2">
-            <div className="text-sm text-muted-foreground">
-              System-Respecting Theme
-            </div>
-            <ThemeToggle size="default" />
-          </div>
-        </div>
-      </div>
-
-      {/* Advanced Styling */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Advanced Styling</h3>
-        <div className="flex flex-wrap gap-3">
-          <ThemeToggle variant="outline" size="default" className="border-2" />
-
-          <ThemeToggle variant="secondary" size="lg" className="border-2" />
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        story:
-          "Complete showcase of all ThemeToggle variants, sizes, custom theme configurations, and styling options. Use this as a reference for what's available in the design system and how custom themes work.",
-      },
-    },
-  },
-};
-
-/**
- * Real-world Context Story
- *
- * Demonstrates the ThemeToggle component in realistic UI scenarios.
- * Helps business teams and designers understand practical usage patterns and integration approaches.
- */
-export const InContext: Story = {
-  render: () => (
-    <div className="space-y-8 max-w-2xl">
-      {/* Application Header */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Application Header</h3>
-        <div className="flex items-center justify-between p-4 border rounded-lg bg-card">
-          <div className="flex items-center gap-3">
-            <div className="h-8 w-8 rounded-full bg-primary" />
-            <h2 className="font-semibold">My Application</h2>
-          </div>
-          <div className="flex items-center gap-2">
-            <button className="px-3 py-1.5 text-sm rounded-md hover:bg-muted">
-              Profile
-            </button>
-            <ThemeToggle variant="ghost" size="icon" />
-          </div>
-        </div>
-      </div>
-
-      {/* Settings Panel */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Settings Panel</h3>
-        <div className="p-6 border rounded-lg bg-card space-y-4">
-          <h4 className="font-medium">Appearance</h4>
-          <div className="space-y-3">
-            <div className="flex items-center justify-between">
-              <div>
-                <div className="font-medium">Theme</div>
-                <div className="text-sm text-muted-foreground">
-                  Choose your preferred color scheme
-                </div>
-              </div>
-              <ThemeToggle size="default" variant="outline" />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Design System Demo */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Design System Customization</h3>
-        <div className="p-6 border rounded-lg bg-card space-y-4">
-          <h4 className="font-medium">Brand Themes</h4>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            <div className="space-y-2">
-              <div className="text-sm font-medium">Marketing Site</div>
-              <ThemeToggle size="sm" variant="secondary" />
-            </div>
-
-            <div className="space-y-2">
-              <div className="text-sm font-medium">Creative Tools</div>
-              <ThemeToggle size="sm" variant="outline" />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile Layout */}
-      <div className="space-y-4">
-        <h3 className="text-lg font-semibold">Mobile Navigation</h3>
-        <div className="max-w-sm mx-auto border rounded-lg bg-card">
-          <div className="p-4 border-b">
-            <div className="flex items-center justify-between">
-              <h4 className="font-medium">Settings</h4>
-              <ThemeToggle size="icon" variant="ghost" />
-            </div>
-          </div>
-          <div className="p-4 space-y-3">
-            <div className="flex items-center justify-between py-2">
-              <span>Notifications</span>
-              <div className="w-10 h-6 bg-primary rounded-full" />
-            </div>
-            <div className="flex items-center justify-between py-2">
-              <span>Theme</span>
-              <ThemeToggle size="sm" variant="outline" />
-            </div>
-            <div className="flex items-center justify-between py-2">
-              <span>Language</span>
-              <span className="text-sm text-muted-foreground">English</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  ),
-  parameters: {
-    layout: "padded",
-    docs: {
-      description: {
-        story:
-          "Real-world usage examples showing how ThemeToggle integrates into common UI patterns like application headers, settings panels, and mobile layouts. These patterns demonstrate practical implementation approaches for different use cases.",
-      },
-    },
-  },
-};