@gv-tech/design-system 1.0.0 → 1.2.0

package/src/pages/components/DropdownMenuDocs.tsx

@@ -1,15 +1,47 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Button } from '@/components/ui/button';
 import {
   DropdownMenu,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
+import {
+  Cloud,
+  CreditCard,
+  Keyboard,
+  LifeBuoy,
+  LogOut,
+  Mail,
+  MessageSquare,
+  Plus,
+  PlusCircle,
+  Settings,
+  User,
+  UserPlus,
+  Users,
+} from 'lucide-react';
+import * as React from 'react';
+import { SiGithub } from 'react-icons/si';
 
 export function DropdownMenuDocs() {
+  const [showStatusBar, setShowStatusBar] = React.useState(true);
+  const [showActivityBar, setShowActivityBar] = React.useState(false);
+  const [showPanel, setShowPanel] = React.useState(false);
+  const [position, setPosition] = React.useState('bottom');
+
   return (
     <ComponentSection
       title="Dropdown Menu"
@@ -17,18 +49,28 @@ export function DropdownMenuDocs() {
     >
       <ComponentShowcase
         title="Default"
-        description="A basic dropdown menu."
+        description="A simple dropdown menu."
         code={`<DropdownMenu>
   <DropdownMenuTrigger asChild>
     <Button variant="outline">Open</Button>
   </DropdownMenuTrigger>
-  <DropdownMenuContent>
+  <DropdownMenuContent className="w-56">
     <DropdownMenuLabel>My Account</DropdownMenuLabel>
     <DropdownMenuSeparator />
-    <DropdownMenuItem>Profile</DropdownMenuItem>
-    <DropdownMenuItem>Billing</DropdownMenuItem>
-    <DropdownMenuItem>Team</DropdownMenuItem>
-    <DropdownMenuItem>Subscription</DropdownMenuItem>
+    <DropdownMenuGroup>
+      <DropdownMenuItem>
+        <User className="mr-2 h-4 w-4" />
+        <span>Profile</span>
+        <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+      </DropdownMenuItem>
+      ...
+    </DropdownMenuGroup>
+    ...
+    <DropdownMenuItem>
+      <SiGithub className="mr-2 h-4 w-4" />
+      <span>GitHub</span>
+    </DropdownMenuItem>
+    ...
   </DropdownMenuContent>
 </DropdownMenu>`}
       >
@@ -36,16 +78,236 @@ export function DropdownMenuDocs() {
           <DropdownMenuTrigger asChild>
             <Button variant="outline">Open</Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent>
+          <DropdownMenuContent className="w-56">
             <DropdownMenuLabel>My Account</DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <DropdownMenuItem>Profile</DropdownMenuItem>
-            <DropdownMenuItem>Billing</DropdownMenuItem>
-            <DropdownMenuItem>Team</DropdownMenuItem>
-            <DropdownMenuItem>Subscription</DropdownMenuItem>
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <User className="mr-2 h-4 w-4" />
+                <span>Profile</span>
+                <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <CreditCard className="mr-2 h-4 w-4" />
+                <span>Billing</span>
+                <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Settings className="mr-2 h-4 w-4" />
+                <span>Settings</span>
+                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <Keyboard className="mr-2 h-4 w-4" />
+                <span>Keyboard shortcuts</span>
+                <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem>
+                <Users className="mr-2 h-4 w-4" />
+                <span>Team</span>
+              </DropdownMenuItem>
+              <DropdownMenuSub>
+                <DropdownMenuSubTrigger>
+                  <UserPlus className="mr-2 h-4 w-4" />
+                  <span>Invite users</span>
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                  <DropdownMenuSubContent>
+                    <DropdownMenuItem>
+                      <Mail className="mr-2 h-4 w-4" />
+                      <span>Email</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem>
+                      <MessageSquare className="mr-2 h-4 w-4" />
+                      <span>Message</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem>
+                      <PlusCircle className="mr-2 h-4 w-4" />
+                      <span>More...</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+              </DropdownMenuSub>
+              <DropdownMenuItem>
+                <Plus className="mr-2 h-4 w-4" />
+                <span>New Team</span>
+                <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <SiGithub className="mr-2 h-4 w-4" />
+              <span>GitHub</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem>
+              <LifeBuoy className="mr-2 h-4 w-4" />
+              <span>Support</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem disabled>
+              <Cloud className="mr-2 h-4 w-4" />
+              <span>API</span>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem>
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>Log out</span>
+              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Checkboxes and Radios"
+        description="A dropdown menu with checkboxes and radio items."
+        code={`<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Open</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent className="w-56">
+    <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuCheckboxItem
+      checked={showStatusBar}
+      onCheckedChange={setShowStatusBar}
+    >
+      Status Bar
+    </DropdownMenuCheckboxItem>
+    <DropdownMenuCheckboxItem
+      checked={showActivityBar}
+      onCheckedChange={setShowActivityBar}
+      disabled
+    >
+      Activity Bar
+    </DropdownMenuCheckboxItem>
+    <DropdownMenuCheckboxItem
+      checked={showPanel}
+      onCheckedChange={setShowPanel}
+    >
+      Panel
+    </DropdownMenuCheckboxItem>
+    <DropdownMenuSeparator />
+    <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+      <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+      <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+      <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+    </DropdownMenuRadioGroup>
+  </DropdownMenuContent>
+</DropdownMenu>`}
+      >
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel>Appearance</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
+              Status Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked={showActivityBar} onCheckedChange={setShowActivityBar} disabled>
+              Activity Bar
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
+              Panel
+            </DropdownMenuCheckboxItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
+              <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
+              <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
           </DropdownMenuContent>
         </DropdownMenu>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The DropdownMenu component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/dropdown-menu"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Dropdown Menu
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">DropdownMenu (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'open',
+              type: 'boolean',
+              description: 'The controlled open state of the dropdown menu.',
+            },
+            {
+              name: 'defaultOpen',
+              type: 'boolean',
+              description: 'The default open state when uncontrolled.',
+            },
+            {
+              name: 'onOpenChange',
+              type: '(open: boolean) => void',
+              description: 'Event handler called when the open state changes.',
+            },
+            {
+              name: 'modal',
+              type: 'boolean',
+              defaultValue: 'true',
+              description: 'The modality of the dropdown menu.',
+            },
+            {
+              name: 'dir',
+              type: '"ltr" | "rtl"',
+              description: 'The reading direction of the dropdown menu.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">DropdownMenuCheckboxItem</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'checked',
+              type: 'boolean | "indeterminate"',
+              description: 'The controlled checked state of the item.',
+            },
+            {
+              name: 'onCheckedChange',
+              type: '(checked: boolean) => void',
+              description: 'Event handler called when the checked state changes.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">DropdownMenuRadioGroup</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'string',
+              description: 'The value of the selected item in the group.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when the value changes.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/FormDocs.tsx

@@ -1,84 +1,163 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Button } from '@/components/ui/button';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
 import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: 'Username must be at least 2 characters.',
+  }),
+});
 
 export function FormDocs() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: '',
+    },
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values);
+  }
+
   return (
-    <ComponentSection title="Form" description="Building forms with React Hook Form and Zod validation.">
+    <ComponentSection title="Form" description="Building forms with React Hook Form and Zod.">
       <ComponentShowcase
-        title="Basic Form"
-        description="A simple form layout with labels and inputs."
-        code={`<form className="space-y-4 w-full max-w-sm">
-  <div className="space-y-2">
-    <Label htmlFor="email">Email</Label>
-    <Input type="email" id="email" placeholder="Enter your email" />
-  </div>
-  <div className="space-y-2">
-    <Label htmlFor="password">Password</Label>
-    <Input type="password" id="password" placeholder="Enter your password" />
-  </div>
-  <Button type="submit" className="w-full">Submit</Button>
-</form>`}
-      >
-        <form className="space-y-4 w-full max-w-sm">
-          <div className="space-y-2">
-            <Label htmlFor="email">Email</Label>
-            <Input type="email" id="email" placeholder="Enter your email" />
-          </div>
-          <div className="space-y-2">
-            <Label htmlFor="password">Password</Label>
-            <Input type="password" id="password" placeholder="Enter your password" />
-          </div>
-          <Button type="submit" className="w-full">
-            Submit
-          </Button>
-        </form>
-      </ComponentShowcase>
+        title="Default"
+        description="A simple form with validation."
+        code={`"use client"
 
-      <ComponentShowcase
-        title="Inline Form"
-        description="A horizontal form layout for compact displays."
-        code={`<form className="flex gap-2 items-end w-full max-w-md">
-  <div className="flex-1 space-y-2">
-    <Label htmlFor="inline-email">Email</Label>
-    <Input type="email" id="inline-email" placeholder="Enter your email" />
-  </div>
-  <Button type="submit">Subscribe</Button>
-</form>`}
-      >
-        <form className="flex gap-2 items-end w-full max-w-md">
-          <div className="flex-1 space-y-2">
-            <Label htmlFor="inline-email">Email</Label>
-            <Input type="email" id="inline-email" placeholder="Enter your email" />
-          </div>
-          <Button type="submit">Subscribe</Button>
-        </form>
-      </ComponentShowcase>
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
 
-      <ComponentShowcase
-        title="Form with Description"
-        description="Form fields with helper text below."
-        code={`<form className="space-y-4 w-full max-w-sm">
-  <div className="space-y-2">
-    <Label htmlFor="username">Username</Label>
-    <Input id="username" placeholder="johndoe" />
-    <p className="text-sm text-muted-foreground">
-      This is your public display name.
-    </p>
-  </div>
-  <Button type="submit">Save changes</Button>
-</form>`}
+import { Button } from "@/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form"
+import { Input } from "@/components/ui/input"
+
+const formSchema = z.object({
+  username: z.string().min(2, {
+    message: "Username must be at least 2 characters.",
+  }),
+})
+
+export function ProfileForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: "",
+    },
+  })
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="username"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Username</FormLabel>
+              <FormControl>
+                <Input placeholder="shadcn" {...field} />
+              </FormControl>
+              <FormDescription>
+                This is your public display name.
+              </FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}`}
       >
-        <form className="space-y-4 w-full max-w-sm">
-          <div className="space-y-2">
-            <Label htmlFor="username">Username</Label>
-            <Input id="username" placeholder="johndoe" />
-            <p className="text-sm text-muted-foreground">This is your public display name.</p>
-          </div>
-          <Button type="submit">Save changes</Button>
-        </form>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+            <FormField
+              control={form.control}
+              name="username"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Username</FormLabel>
+                  <FormControl>
+                    <Input placeholder="shadcn" {...field} />
+                  </FormControl>
+                  <FormDescription>This is your public display name.</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <Button type="submit">Submit</Button>
+          </form>
+        </Form>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Form component is built on top of{' '}
+          <a href="https://react-hook-form.com/" className="underline" target="_blank" rel="noreferrer">
+            React Hook Form
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">FormField</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'control',
+              type: 'Control<TFieldValues>',
+              description: 'The control object from useForm.',
+            },
+            {
+              name: 'name',
+              type: 'FieldPath<TFieldValues>',
+              description: 'The name of the field.',
+            },
+            {
+              name: 'render',
+              type: '({ field }) => React.ReactElement',
+              description: 'Render prop for the field.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">FormItem</h4>
+        <p className="text-sm text-muted-foreground">Context provider for form fields.</p>
+
+        <h4 className="text-lg font-medium mt-6">FormLabel</h4>
+        <p className="text-sm text-muted-foreground">Wrapper around Label with error state handling.</p>
+
+        <h4 className="text-lg font-medium mt-6">FormControl</h4>
+        <p className="text-sm text-muted-foreground">Wrapper around the input element to handle accessibility.</p>
+
+        <h4 className="text-lg font-medium mt-6">FormDescription</h4>
+        <p className="text-sm text-muted-foreground">Helper text for the field.</p>
+
+        <h4 className="text-lg font-medium mt-6">FormMessage</h4>
+        <p className="text-sm text-muted-foreground">Displays error messages.</p>
+      </div>
     </ComponentSection>
   );
 }

package/src/pages/components/HoverCardDocs.tsx

@@ -1,4 +1,5 @@
 import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
@@ -9,7 +10,7 @@ export function HoverCardDocs() {
     <ComponentSection title="Hover Card" description="For sighted users to preview content available behind a link.">
       <ComponentShowcase
         title="Default"
-        description="A hover card showing user profile information."
+        description="A hover card showing user details."
         code={`<HoverCard>
   <HoverCardTrigger asChild>
     <Button variant="link">@nextjs</Button>
@@ -22,10 +23,14 @@ export function HoverCardDocs() {
       </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>
+        <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>
+          <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{" "}
+          <span className="text-xs text-muted-foreground">
+            Joined December 2021
+          </span>
         </div>
       </div>
     </div>
@@ -46,7 +51,7 @@ export function HoverCardDocs() {
                 <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" />
+                  <CalendarDays className="mr-2 h-4 w-4 opacity-70" />{' '}
                   <span className="text-xs text-muted-foreground">Joined December 2021</span>
                 </div>
               </div>
@@ -54,6 +59,78 @@ export function HoverCardDocs() {
           </HoverCardContent>
         </HoverCard>
       </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Hover Card component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/hover-card"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Hover Card
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">HoverCard (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'open',
+              type: 'boolean',
+              description: 'The controlled open state of the hover card.',
+            },
+            {
+              name: 'defaultOpen',
+              type: 'boolean',
+              description: 'The default open state when uncontrolled.',
+            },
+            {
+              name: 'onOpenChange',
+              type: '(open: boolean) => void',
+              description: 'Event handler called when the open state changes.',
+            },
+            {
+              name: 'openDelay',
+              type: 'number',
+              defaultValue: '700',
+              description: 'The duration from when the mouse enters the trigger until the hover card opens.',
+            },
+            {
+              name: 'closeDelay',
+              type: 'number',
+              defaultValue: '300',
+              description: 'The duration from when the mouse leaves the trigger until the hover card closes.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">HoverCardContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'forceMount',
+              type: 'boolean',
+              description: 'Used to force mounting when more control is needed.',
+            },
+            {
+              name: 'sideOffset',
+              type: 'number',
+              defaultValue: '4',
+              description: 'The distance in pixels from the trigger.',
+            },
+            {
+              name: 'align',
+              type: '"start" | "center" | "end"',
+              defaultValue: '"center"',
+              description: 'The preferred alignment against the trigger.',
+            },
+          ]}
+        />
+      </div>
     </ComponentSection>
   );
 }