@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/form/Form.stories.tsx

@@ -0,0 +1,413 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from './index'
+import { Input } from '../input'
+import { Button } from '../button'
+import { Textarea } from '../textarea'
+import { Checkbox } from '../checkbox'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select'
+import * as React from 'react'
+import { useForm } from 'react-hook-form'
+
+const meta: Meta<typeof Form> = {
+  title: 'Components/Forms/Form',
+  component: Form,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'Form components for building accessible forms with React Hook Form.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Form>
+
+interface LoginFormData {
+  email: string
+  password: string
+}
+
+export const LoginForm: Story = {
+  render: function LoginFormDemo() {
+    const form = useForm<LoginFormData>({
+      defaultValues: {
+        email: '',
+        password: '',
+      },
+    })
+
+    const onSubmit = (data: LoginFormData) => {
+      console.log('Form submitted:', data)
+      alert(`Login: ${data.email}`)
+    }
+
+    return (
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 w-[350px]">
+          <FormField
+            control={form.control}
+            name="email"
+            rules={{ required: 'Email is required' }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Email</FormLabel>
+                <FormControl>
+                  <Input type="email" placeholder="email@example.com" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="password"
+            rules={{ required: 'Password is required', minLength: { value: 8, message: 'Minimum 8 characters' } }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Password</FormLabel>
+                <FormControl>
+                  <Input type="password" placeholder="********" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit" className="w-full">
+            Sign In
+          </Button>
+        </form>
+      </Form>
+    )
+  },
+}
+
+interface ContactFormData {
+  name: string
+  email: string
+  subject: string
+  message: string
+}
+
+export const ContactForm: Story = {
+  render: function ContactFormDemo() {
+    const form = useForm<ContactFormData>({
+      defaultValues: {
+        name: '',
+        email: '',
+        subject: '',
+        message: '',
+      },
+    })
+
+    const onSubmit = (data: ContactFormData) => {
+      console.log('Contact form:', data)
+      alert('Message sent!')
+    }
+
+    return (
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4 w-[400px]">
+          <div className="grid grid-cols-2 gap-4">
+            <FormField
+              control={form.control}
+              name="name"
+              rules={{ required: 'Name is required' }}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Your name" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              rules={{ required: 'Email is required' }}
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input type="email" placeholder="email@example.com" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <FormField
+            control={form.control}
+            name="subject"
+            rules={{ required: 'Subject is required' }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Subject</FormLabel>
+                <FormControl>
+                  <Input placeholder="Subject" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="message"
+            rules={{ required: 'Message is required' }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Message</FormLabel>
+                <FormControl>
+                  <Textarea placeholder="Your message..." rows={4} {...field} />
+                </FormControl>
+                <FormDescription>
+                  Please provide as much detail as possible.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit" className="w-full">
+            Send Message
+          </Button>
+        </form>
+      </Form>
+    )
+  },
+}
+
+interface ProfileFormData {
+  username: string
+  bio: string
+  role: string
+  notifications: boolean
+}
+
+export const ProfileForm: Story = {
+  render: function ProfileFormDemo() {
+    const form = useForm<ProfileFormData>({
+      defaultValues: {
+        username: '',
+        bio: '',
+        role: '',
+        notifications: true,
+      },
+    })
+
+    const onSubmit = (data: ProfileFormData) => {
+      console.log('Profile:', data)
+      alert('Profile updated!')
+    }
+
+    return (
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 w-[400px]">
+          <FormField
+            control={form.control}
+            name="username"
+            rules={{ required: 'Username is required' }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input placeholder="username" {...field} />
+                </FormControl>
+                <FormDescription>
+                  This is your public display name.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="bio"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Bio</FormLabel>
+                <FormControl>
+                  <Textarea placeholder="Tell us about yourself" rows={3} {...field} />
+                </FormControl>
+                <FormDescription>
+                  Brief description for your profile.
+                </FormDescription>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="role"
+            rules={{ required: 'Please select a role' }}
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Role</FormLabel>
+                <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <FormControl>
+                    <SelectTrigger>
+                      <SelectValue placeholder="Select your role" />
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent>
+                    <SelectItem value="developer">Developer</SelectItem>
+                    <SelectItem value="designer">Designer</SelectItem>
+                    <SelectItem value="manager">Manager</SelectItem>
+                    <SelectItem value="other">Other</SelectItem>
+                  </SelectContent>
+                </Select>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <FormField
+            control={form.control}
+            name="notifications"
+            render={({ field }) => (
+              <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+                <FormControl>
+                  <Checkbox
+                    checked={field.value}
+                    onCheckedChange={field.onChange}
+                  />
+                </FormControl>
+                <div className="space-y-1 leading-none">
+                  <FormLabel>Email notifications</FormLabel>
+                  <FormDescription>
+                    Receive emails about account activity.
+                  </FormDescription>
+                </div>
+              </FormItem>
+            )}
+          />
+          <Button type="submit" className="w-full">
+            Save Profile
+          </Button>
+        </form>
+      </Form>
+    )
+  },
+}
+
+interface SettingsFormData {
+  displayName: string
+  email: string
+  marketing: boolean
+  security: boolean
+}
+
+export const SettingsForm: Story = {
+  render: function SettingsFormDemo() {
+    const form = useForm<SettingsFormData>({
+      defaultValues: {
+        displayName: 'John Doe',
+        email: 'john@example.com',
+        marketing: false,
+        security: true,
+      },
+    })
+
+    const onSubmit = (data: SettingsFormData) => {
+      console.log('Settings:', data)
+      alert('Settings saved!')
+    }
+
+    return (
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 w-[400px]">
+          <div>
+            <h3 className="text-lg font-medium">Account Settings</h3>
+            <p className="text-sm text-muted-foreground">
+              Manage your account preferences
+            </p>
+          </div>
+          <div className="space-y-4">
+            <FormField
+              control={form.control}
+              name="displayName"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Display Name</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input type="email" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+          <div>
+            <h4 className="text-sm font-medium mb-3">Email Preferences</h4>
+            <div className="space-y-3">
+              <FormField
+                control={form.control}
+                name="marketing"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">Marketing emails</FormLabel>
+                      <FormDescription>
+                        Receive product updates and promotions.
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Checkbox
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="security"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-3">
+                    <div className="space-y-0.5">
+                      <FormLabel className="text-base">Security alerts</FormLabel>
+                      <FormDescription>
+                        Get notified about security events.
+                      </FormDescription>
+                    </div>
+                    <FormControl>
+                      <Checkbox
+                        checked={field.value}
+                        onCheckedChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            </div>
+          </div>
+          <Button type="submit">Save Changes</Button>
+        </form>
+      </Form>
+    )
+  },
+}

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

@@ -0,0 +1,148 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from './index'
+import { Avatar, AvatarFallback, AvatarImage } from '../avatar'
+import { Button } from '../button'
+import { CalendarDays } from 'lucide-react'
+
+const meta: Meta<typeof HoverCard> = {
+  title: 'Components/HoverCard',
+  component: HoverCard,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'For sighted users to preview content available behind a link.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof HoverCard>
+
+export const Default: Story = {
+  args: {},
+  render: (args) => (
+    <HoverCard {...args}>
+      <HoverCardTrigger asChild>
+        <Button variant="link">@nextjs</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage src="https://github.com/vercel.png" />
+            <AvatarFallback>VC</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@nextjs</h4>
+            <p className="text-sm">
+              The React Framework – created and maintained by @vercel.
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{' '}
+              <span className="text-xs text-muted-foreground">
+                Joined December 2021
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+}
+
+export const UserProfile: Story = {
+  render: () => (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <a href="#" className="text-sm font-medium hover:underline">John Doe</a>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="flex space-x-4">
+          <Avatar className="h-12 w-12">
+            <AvatarImage src="https://github.com/shadcn.png" />
+            <AvatarFallback>JD</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">John Doe</h4>
+            <p className="text-sm text-muted-foreground">
+              Software Engineer at Acme Inc.
+            </p>
+            <div className="flex items-center gap-4 pt-2 text-xs text-muted-foreground">
+              <span><strong className="text-foreground">1.2k</strong> followers</span>
+              <span><strong className="text-foreground">342</strong> following</span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+}
+
+export const ProductPreview: Story = {
+  render: () => (
+    <HoverCard>
+      <HoverCardTrigger asChild>
+        <Button variant="outline">View Product</Button>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-80">
+        <div className="space-y-3">
+          <div className="h-32 bg-muted rounded-md" />
+          <div>
+            <h4 className="font-semibold">Premium Headphones</h4>
+            <p className="text-sm text-muted-foreground">
+              High-quality wireless headphones with active noise cancellation.
+            </p>
+          </div>
+          <div className="flex items-center justify-between">
+            <span className="text-lg font-bold">$299.00</span>
+            <span className="text-sm text-green-600">In Stock</span>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+  ),
+}
+
+export const Positions: Story = {
+  render: () => (
+    <div className="flex gap-8 items-center">
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button variant="outline">Top</Button>
+        </HoverCardTrigger>
+        <HoverCardContent side="top">
+          <p className="text-sm">This appears on top</p>
+        </HoverCardContent>
+      </HoverCard>
+
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button variant="outline">Right</Button>
+        </HoverCardTrigger>
+        <HoverCardContent side="right">
+          <p className="text-sm">This appears on the right</p>
+        </HoverCardContent>
+      </HoverCard>
+
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button variant="outline">Bottom</Button>
+        </HoverCardTrigger>
+        <HoverCardContent side="bottom">
+          <p className="text-sm">This appears on bottom</p>
+        </HoverCardContent>
+      </HoverCard>
+
+      <HoverCard>
+        <HoverCardTrigger asChild>
+          <Button variant="outline">Left</Button>
+        </HoverCardTrigger>
+        <HoverCardContent side="left">
+          <p className="text-sm">This appears on the left</p>
+        </HoverCardContent>
+      </HoverCard>
+    </div>
+  ),
+}