sonance-brand-mcp 1.1.3 → 1.1.7

package/dist/assets/components/form.stories.tsx

@@ -0,0 +1,372 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { Form, FormField, FormLabel, FormDescription, FormMessage, FormSubmit } from './form';
+import { Input } from './input';
+import { Textarea } from './textarea';
+import { Select } from './select';
+import { Checkbox } from './checkbox';
+
+const meta: Meta<typeof Form> = {
+  title: 'Components/Forms/Form',
+  component: Form,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A form component with built-in validation, error handling, and submission state management. Provides context for FormField components.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default Simple Form
+export const Default: Story = {
+  render: () => {
+    const handleSubmit = (data: FormData) => {
+      alert(`Submitted: ${data.get('email')}`);
+    };
+
+    return (
+      <Form onSubmit={handleSubmit} className="w-80 space-y-4">
+        <FormField name="email">
+          <FormLabel>Email</FormLabel>
+          <Input name="email" type="email" placeholder="Enter your email" />
+        </FormField>
+        <FormSubmit>Subscribe</FormSubmit>
+      </Form>
+    );
+  },
+};
+
+// With Validation
+export const WithValidation: Story = {
+  render: () => {
+    const handleValidate = (data: FormData) => {
+      const errors: Record<string, string> = {};
+      const email = data.get('email') as string;
+      const password = data.get('password') as string;
+
+      if (!email) {
+        errors.email = 'Email is required';
+      } else if (!email.includes('@')) {
+        errors.email = 'Please enter a valid email';
+      }
+
+      if (!password) {
+        errors.password = 'Password is required';
+      } else if (password.length < 8) {
+        errors.password = 'Password must be at least 8 characters';
+      }
+
+      return errors;
+    };
+
+    const handleSubmit = (data: FormData) => {
+      alert('Form submitted successfully!');
+    };
+
+    return (
+      <Form
+        onSubmit={handleSubmit}
+        onValidate={handleValidate}
+        className="w-80 space-y-4"
+      >
+        <FormField name="email">
+          <FormLabel required>Email</FormLabel>
+          <Input name="email" type="email" placeholder="you@example.com" />
+          <FormMessage />
+        </FormField>
+
+        <FormField name="password">
+          <FormLabel required>Password</FormLabel>
+          <Input name="password" type="password" placeholder="Enter password" />
+          <FormDescription>Must be at least 8 characters</FormDescription>
+          <FormMessage />
+        </FormField>
+
+        <FormSubmit>Sign In</FormSubmit>
+      </Form>
+    );
+  },
+};
+
+// Contact Form
+export const ContactForm: Story = {
+  render: () => {
+    const handleValidate = (data: FormData) => {
+      const errors: Record<string, string> = {};
+
+      if (!data.get('name')) errors.name = 'Name is required';
+      if (!data.get('email')) errors.email = 'Email is required';
+      if (!data.get('subject')) errors.subject = 'Please select a subject';
+      if (!data.get('message')) errors.message = 'Message is required';
+
+      return errors;
+    };
+
+    const handleSubmit = async (data: FormData) => {
+      // Simulate API call
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      alert('Message sent!');
+    };
+
+    return (
+      <Form
+        onSubmit={handleSubmit}
+        onValidate={handleValidate}
+        className="w-96 space-y-4"
+      >
+        <div className="grid grid-cols-2 gap-4">
+          <FormField name="name">
+            <FormLabel required>Name</FormLabel>
+            <Input name="name" placeholder="Your name" />
+            <FormMessage />
+          </FormField>
+
+          <FormField name="email">
+            <FormLabel required>Email</FormLabel>
+            <Input name="email" type="email" placeholder="you@example.com" />
+            <FormMessage />
+          </FormField>
+        </div>
+
+        <FormField name="subject">
+          <FormLabel required>Subject</FormLabel>
+          <Select
+            placeholder="Select a topic"
+            options={[
+              { value: 'sales', label: 'Sales Inquiry' },
+              { value: 'support', label: 'Technical Support' },
+              { value: 'partnership', label: 'Partnership' },
+              { value: 'other', label: 'Other' },
+            ]}
+          />
+          <FormMessage />
+        </FormField>
+
+        <FormField name="message">
+          <FormLabel required>Message</FormLabel>
+          <Textarea name="message" placeholder="How can we help?" rows={4} />
+          <FormMessage />
+        </FormField>
+
+        <FormSubmit className="w-full">Send Message</FormSubmit>
+      </Form>
+    );
+  },
+};
+
+// Registration Form
+export const RegistrationForm: Story = {
+  render: () => {
+    const handleValidate = (data: FormData) => {
+      const errors: Record<string, string> = {};
+      const password = data.get('password') as string;
+      const confirmPassword = data.get('confirmPassword') as string;
+
+      if (!data.get('firstName')) errors.firstName = 'First name is required';
+      if (!data.get('lastName')) errors.lastName = 'Last name is required';
+      if (!data.get('email')) errors.email = 'Email is required';
+
+      if (!password) {
+        errors.password = 'Password is required';
+      } else if (password.length < 8) {
+        errors.password = 'Password must be at least 8 characters';
+      }
+
+      if (password !== confirmPassword) {
+        errors.confirmPassword = 'Passwords do not match';
+      }
+
+      if (!data.get('terms')) {
+        errors.terms = 'You must accept the terms';
+      }
+
+      return errors;
+    };
+
+    const handleSubmit = async (data: FormData) => {
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      alert('Account created!');
+    };
+
+    return (
+      <Form
+        onSubmit={handleSubmit}
+        onValidate={handleValidate}
+        className="w-96 space-y-4"
+      >
+        <div className="grid grid-cols-2 gap-4">
+          <FormField name="firstName">
+            <FormLabel required>First Name</FormLabel>
+            <Input name="firstName" placeholder="John" />
+            <FormMessage />
+          </FormField>
+
+          <FormField name="lastName">
+            <FormLabel required>Last Name</FormLabel>
+            <Input name="lastName" placeholder="Doe" />
+            <FormMessage />
+          </FormField>
+        </div>
+
+        <FormField name="email">
+          <FormLabel required>Email</FormLabel>
+          <Input name="email" type="email" placeholder="john@example.com" />
+          <FormMessage />
+        </FormField>
+
+        <FormField name="password">
+          <FormLabel required>Password</FormLabel>
+          <Input name="password" type="password" />
+          <FormDescription>Minimum 8 characters</FormDescription>
+          <FormMessage />
+        </FormField>
+
+        <FormField name="confirmPassword">
+          <FormLabel required>Confirm Password</FormLabel>
+          <Input name="confirmPassword" type="password" />
+          <FormMessage />
+        </FormField>
+
+        <FormField name="terms">
+          <Checkbox name="terms" value="accepted" label="I accept the terms and conditions" />
+          <FormMessage />
+        </FormField>
+
+        <FormSubmit className="w-full">Create Account</FormSubmit>
+      </Form>
+    );
+  },
+};
+
+// Form Components Showcase
+export const ComponentsShowcase: Story = {
+  render: () => (
+    <div className="w-80 space-y-6">
+      <div>
+        <h4 className="text-sm font-medium mb-2">FormLabel</h4>
+        <FormLabel>Regular Label</FormLabel>
+        <FormLabel required>Required Label</FormLabel>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium mb-2">FormDescription</h4>
+        <FormDescription>
+          This is helper text that provides additional context for the field.
+        </FormDescription>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium mb-2">FormMessage (Error)</h4>
+        <FormMessage>This field is required</FormMessage>
+      </div>
+
+      <div>
+        <h4 className="text-sm font-medium mb-2">FormSubmit</h4>
+        <FormSubmit>Submit Button</FormSubmit>
+      </div>
+    </div>
+  ),
+};
+
+// Async Submission
+export const AsyncSubmission: Story = {
+  render: () => {
+    const handleSubmit = async (data: FormData) => {
+      // Simulate slow API call
+      await new Promise(resolve => setTimeout(resolve, 3000));
+      alert('Submitted!');
+    };
+
+    return (
+      <Form onSubmit={handleSubmit} className="w-80 space-y-4">
+        <FormField name="data">
+          <FormLabel>Data</FormLabel>
+          <Input name="data" placeholder="Enter something" />
+          <FormDescription>
+            The submit button shows loading state during submission
+          </FormDescription>
+        </FormField>
+        <FormSubmit>Submit (3s delay)</FormSubmit>
+      </Form>
+    );
+  },
+};
+
+// Responsive Matrix - Mobile, Tablet, Desktop
+export const ResponsiveMatrix: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Mobile */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Mobile (375px)</h4>
+        <div className="w-[375px] border border-dashed border-border p-4">
+          <Form className="space-y-4">
+            <FormField name="email">
+              <FormLabel>Email</FormLabel>
+              <Input name="email" type="email" placeholder="you@example.com" />
+            </FormField>
+            <FormSubmit className="w-full">Subscribe</FormSubmit>
+          </Form>
+        </div>
+      </div>
+      {/* Tablet */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Tablet (768px)</h4>
+        <div className="w-[768px] border border-dashed border-border p-4">
+          <Form className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <FormField name="firstName">
+                <FormLabel>First Name</FormLabel>
+                <Input name="firstName" placeholder="John" />
+              </FormField>
+              <FormField name="lastName">
+                <FormLabel>Last Name</FormLabel>
+                <Input name="lastName" placeholder="Doe" />
+              </FormField>
+            </div>
+            <FormField name="email">
+              <FormLabel>Email</FormLabel>
+              <Input name="email" type="email" placeholder="john@example.com" />
+            </FormField>
+            <FormSubmit>Submit</FormSubmit>
+          </Form>
+        </div>
+      </div>
+      {/* Desktop */}
+      <div>
+        <h4 className="text-xs uppercase text-foreground-muted mb-2">Desktop (1280px)</h4>
+        <div className="w-[1280px] border border-dashed border-border p-4">
+          <Form className="space-y-4 max-w-2xl">
+            <div className="grid grid-cols-3 gap-4">
+              <FormField name="firstName">
+                <FormLabel required>First Name</FormLabel>
+                <Input name="firstName" placeholder="John" />
+                <FormMessage />
+              </FormField>
+              <FormField name="lastName">
+                <FormLabel required>Last Name</FormLabel>
+                <Input name="lastName" placeholder="Doe" />
+                <FormMessage />
+              </FormField>
+              <FormField name="email">
+                <FormLabel required>Email</FormLabel>
+                <Input name="email" type="email" placeholder="john@example.com" />
+                <FormMessage />
+              </FormField>
+            </div>
+            <FormField name="message">
+              <FormLabel>Message</FormLabel>
+              <Textarea name="message" placeholder="How can we help?" rows={3} />
+              <FormDescription>Optional message</FormDescription>
+            </FormField>
+            <FormSubmit>Send Message</FormSubmit>
+          </Form>
+        </div>
+      </div>
+    </div>
+  ),
+};