@neynar/ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,470 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Info } from "lucide-react";
+import { useState } from "react";
+import { Checkbox } from "../checkbox";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+} from "../field";
+import { Input } from "../input";
+import { RadioGroup, RadioGroupItem } from "../radio-group";
+import { Switch } from "../switch";
+
+const meta = {
+  title: "Form & Input/Field",
+  component: Field,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A comprehensive form field component that provides proper labeling, description, error handling, and layout options. Supports vertical, horizontal, and responsive orientations.",
+      },
+    },
+  },
+  argTypes: {
+    orientation: {
+      control: { type: "select" },
+      options: ["vertical", "horizontal", "responsive"],
+      description: "The orientation of the field layout",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+  },
+  args: {
+    orientation: "vertical",
+  },
+} satisfies Meta<typeof Field>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with all field properties.
+ * Use the controls panel to test different combinations of props.
+ */
+export const Interactive: Story = {
+  render: (args) => (
+    <div className="w-96">
+      <Field {...args}>
+        <FieldLabel htmlFor="email">Email Address</FieldLabel>
+        <Input id="email" type="email" placeholder="Enter your email" />
+        <FieldDescription>We'll never share your email.</FieldDescription>
+      </Field>
+    </div>
+  ),
+};
+
+/**
+ * Showcase of all available field orientations and compositions.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-12 w-full max-w-2xl">
+      {/* Vertical Orientation */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Vertical Layout
+        </h3>
+        <div className="space-y-6">
+          <Field>
+            <FieldLabel htmlFor="name-v">Full Name</FieldLabel>
+            <Input id="name-v" placeholder="John Doe" />
+            <FieldDescription>Enter your full legal name.</FieldDescription>
+          </Field>
+
+          <Field>
+            <FieldLabel htmlFor="bio-v">Bio</FieldLabel>
+            <textarea
+              id="bio-v"
+              className="w-full min-h-24 px-3 py-2 border rounded-md"
+              placeholder="Tell us about yourself"
+            />
+            <FieldDescription>
+              Write a short bio about yourself (max 500 characters).
+            </FieldDescription>
+          </Field>
+        </div>
+      </div>
+
+      {/* Horizontal Orientation */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Horizontal Layout
+        </h3>
+        <FieldGroup>
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldTitle>Email Notifications</FieldTitle>
+              <FieldDescription>
+                Receive email updates about your account.
+              </FieldDescription>
+            </FieldContent>
+            <Switch />
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldTitle>Marketing Emails</FieldTitle>
+              <FieldDescription>
+                Get updates about new features and products.
+              </FieldDescription>
+            </FieldContent>
+            <Switch />
+          </Field>
+        </FieldGroup>
+      </div>
+
+      {/* Responsive Orientation */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Responsive Layout (vertical on mobile, horizontal on larger screens)
+        </h3>
+        <FieldGroup>
+          <Field orientation="responsive">
+            <FieldContent>
+              <FieldTitle>Two-Factor Auth</FieldTitle>
+              <FieldDescription>
+                Add an extra layer of security to your account.
+              </FieldDescription>
+            </FieldContent>
+            <Switch />
+          </Field>
+        </FieldGroup>
+      </div>
+
+      {/* With Error State */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Error States
+        </h3>
+        <div className="space-y-6">
+          <Field data-invalid="true">
+            <FieldLabel htmlFor="email-error">Email</FieldLabel>
+            <Input
+              id="email-error"
+              type="email"
+              placeholder="email@example.com"
+              aria-invalid="true"
+              defaultValue="invalid-email"
+            />
+            <FieldError>Please enter a valid email address.</FieldError>
+          </Field>
+
+          <Field data-invalid="true">
+            <FieldLabel htmlFor="password-error">Password</FieldLabel>
+            <Input
+              id="password-error"
+              type="password"
+              aria-invalid="true"
+              defaultValue="123"
+            />
+            <FieldError
+              errors={[
+                { message: "Password must be at least 8 characters" },
+                { message: "Password must contain a number" },
+                { message: "Password must contain a special character" },
+              ]}
+            />
+          </Field>
+        </div>
+      </div>
+
+      {/* Field Groups */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Field Groups with Separators
+        </h3>
+        <FieldGroup>
+          <Field>
+            <FieldLabel htmlFor="first-name">First Name</FieldLabel>
+            <Input id="first-name" placeholder="John" />
+          </Field>
+
+          <Field>
+            <FieldLabel htmlFor="last-name">Last Name</FieldLabel>
+            <Input id="last-name" placeholder="Doe" />
+          </Field>
+
+          <FieldSeparator>Contact Information</FieldSeparator>
+
+          <Field>
+            <FieldLabel htmlFor="email-group">Email</FieldLabel>
+            <Input id="email-group" type="email" placeholder="john@example.com" />
+          </Field>
+
+          <Field>
+            <FieldLabel htmlFor="phone-group">Phone</FieldLabel>
+            <Input id="phone-group" type="tel" placeholder="+1 (555) 000-0000" />
+          </Field>
+        </FieldGroup>
+      </div>
+
+      {/* With Checkboxes and Radio */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Checkboxes and Radio Buttons
+        </h3>
+        <div className="space-y-6">
+          <FieldSet>
+            <FieldLegend>Preferences</FieldLegend>
+            <FieldGroup>
+              <Field orientation="horizontal">
+                <Checkbox id="newsletter" />
+                <FieldLabel htmlFor="newsletter">
+                  Subscribe to newsletter
+                </FieldLabel>
+              </Field>
+
+              <Field orientation="horizontal">
+                <Checkbox id="updates" />
+                <FieldLabel htmlFor="updates">Receive product updates</FieldLabel>
+              </Field>
+            </FieldGroup>
+          </FieldSet>
+
+          <FieldSet>
+            <FieldLegend>Notification Method</FieldLegend>
+            <RadioGroup defaultValue="email">
+              <Field orientation="horizontal">
+                <RadioGroupItem value="email" id="radio-email" />
+                <FieldLabel htmlFor="radio-email">Email</FieldLabel>
+              </Field>
+
+              <Field orientation="horizontal">
+                <RadioGroupItem value="sms" id="radio-sms" />
+                <FieldLabel htmlFor="radio-sms">SMS</FieldLabel>
+              </Field>
+
+              <Field orientation="horizontal">
+                <RadioGroupItem value="push" id="radio-push" />
+                <FieldLabel htmlFor="radio-push">Push Notification</FieldLabel>
+              </Field>
+            </RadioGroup>
+          </FieldSet>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Complete showcase of field orientations, error states, groups, and integration with various form controls.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage examples showing fields in practical form scenarios.
+ */
+export const InContext: Story = {
+  render: () => {
+    const [formErrors, setFormErrors] = useState({
+      email: "",
+      password: "",
+    });
+
+    const handleSubmit = (e: React.FormEvent) => {
+      e.preventDefault();
+      const formData = new FormData(e.target as HTMLFormElement);
+      const email = formData.get("email") as string;
+      const password = formData.get("password") as string;
+
+      const errors = { email: "", password: "" };
+      if (!email.includes("@")) {
+        errors.email = "Please enter a valid email address";
+      }
+      if (password.length < 8) {
+        errors.password = "Password must be at least 8 characters";
+      }
+      setFormErrors(errors);
+    };
+
+    return (
+      <div className="space-y-8 w-full max-w-2xl">
+        {/* Registration Form */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Create Account</h3>
+          <form onSubmit={handleSubmit} className="space-y-6">
+            <FieldGroup>
+              <Field data-invalid={!!formErrors.email}>
+                <FieldLabel htmlFor="reg-email">
+                  Email Address
+                  <span className="text-destructive ml-1">*</span>
+                </FieldLabel>
+                <Input
+                  id="reg-email"
+                  name="email"
+                  type="email"
+                  placeholder="you@example.com"
+                  aria-invalid={!!formErrors.email}
+                  required
+                />
+                {formErrors.email && (
+                  <FieldError>{formErrors.email}</FieldError>
+                )}
+              </Field>
+
+              <Field data-invalid={!!formErrors.password}>
+                <FieldLabel htmlFor="reg-password">
+                  Password
+                  <span className="text-destructive ml-1">*</span>
+                </FieldLabel>
+                <Input
+                  id="reg-password"
+                  name="password"
+                  type="password"
+                  placeholder="Min. 8 characters"
+                  aria-invalid={!!formErrors.password}
+                  required
+                />
+                <FieldDescription>
+                  Must be at least 8 characters with a number and special
+                  character.
+                </FieldDescription>
+                {formErrors.password && (
+                  <FieldError>{formErrors.password}</FieldError>
+                )}
+              </Field>
+
+              <Field orientation="horizontal">
+                <Checkbox id="reg-terms" required />
+                <FieldLabel htmlFor="reg-terms">
+                  I agree to the{" "}
+                  <a href="#" className="underline">
+                    Terms of Service
+                  </a>{" "}
+                  and{" "}
+                  <a href="#" className="underline">
+                    Privacy Policy
+                  </a>
+                </FieldLabel>
+              </Field>
+            </FieldGroup>
+
+            <button
+              type="submit"
+              className="w-full px-4 py-2 bg-primary text-primary-foreground rounded-md font-medium hover:bg-primary/90"
+            >
+              Create Account
+            </button>
+          </form>
+        </div>
+
+        {/* Settings Form */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Notification Settings</h3>
+          <FieldGroup>
+            <Field orientation="horizontal">
+              <FieldContent>
+                <FieldTitle>
+                  Email Notifications
+                  <Info className="size-4 text-muted-foreground ml-1" />
+                </FieldTitle>
+                <FieldDescription>
+                  Receive email updates about your account activity.
+                </FieldDescription>
+              </FieldContent>
+              <Switch defaultChecked />
+            </Field>
+
+            <Field orientation="horizontal">
+              <FieldContent>
+                <FieldTitle>Push Notifications</FieldTitle>
+                <FieldDescription>
+                  Get push notifications on your devices.
+                </FieldDescription>
+              </FieldContent>
+              <Switch />
+            </Field>
+
+            <FieldSeparator />
+
+            <Field orientation="horizontal">
+              <FieldContent>
+                <FieldTitle>Marketing Communications</FieldTitle>
+                <FieldDescription>
+                  Receive news, announcements, and product updates.
+                </FieldDescription>
+              </FieldContent>
+              <Switch />
+            </Field>
+          </FieldGroup>
+        </div>
+
+        {/* Profile Form */}
+        <div className="space-y-4 p-6 border rounded-lg">
+          <h3 className="text-lg font-semibold">Profile Information</h3>
+          <FieldGroup>
+            <Field>
+              <FieldLabel htmlFor="profile-name">Display Name</FieldLabel>
+              <Input
+                id="profile-name"
+                placeholder="How you'd like to be called"
+              />
+              <FieldDescription>
+                This is how your name will appear to others.
+              </FieldDescription>
+            </Field>
+
+            <Field>
+              <FieldLabel htmlFor="profile-bio">Bio</FieldLabel>
+              <textarea
+                id="profile-bio"
+                className="w-full min-h-24 px-3 py-2 border rounded-md"
+                placeholder="Tell us about yourself"
+              />
+              <FieldDescription>
+                Brief description for your profile (max 500 characters).
+              </FieldDescription>
+            </Field>
+
+            <FieldSeparator>Visibility</FieldSeparator>
+
+            <FieldSet>
+              <FieldLegend variant="label">Who can see your profile?</FieldLegend>
+              <RadioGroup defaultValue="public">
+                <Field orientation="horizontal">
+                  <RadioGroupItem value="public" id="vis-public" />
+                  <FieldLabel htmlFor="vis-public">Public</FieldLabel>
+                </Field>
+
+                <Field orientation="horizontal">
+                  <RadioGroupItem value="private" id="vis-private" />
+                  <FieldLabel htmlFor="vis-private">Private</FieldLabel>
+                </Field>
+
+                <Field orientation="horizontal">
+                  <RadioGroupItem value="friends" id="vis-friends" />
+                  <FieldLabel htmlFor="vis-friends">Friends Only</FieldLabel>
+                </Field>
+              </RadioGroup>
+            </FieldSet>
+          </FieldGroup>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world examples showing fields in registration forms, settings panels, and profile editors with proper validation and layout.",
+      },
+    },
+  },
+};

package/src/components/ui/stories/hover-card.stories.tsx

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