@gv-tech/design-system 2.3.0 → 2.5.0

package/apps/playground-web/src/pages/web/DropdownMenuDocs.tsx

@@ -0,0 +1,319 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { SiGithub } from 'react-icons/si';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@gv-tech/ui-web';
+import {
+  Cloud,
+  CreditCard,
+  Keyboard,
+  LifeBuoy,
+  LogOut,
+  Mail,
+  MessageSquare,
+  Plus,
+  PlusCircle,
+  Settings,
+  User,
+  UserPlus,
+  Users,
+} from 'lucide-react';
+import * as React from 'react';
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' as string;
+
+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 (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A simple dropdown menu."
+        code={`<DropdownMenu>
+  <DropdownMenuTrigger asChild>
+    <Button variant="outline">Open</Button>
+  </DropdownMenuTrigger>
+  <DropdownMenuContent className="w-56">
+    <DropdownMenuLabel>My Account</DropdownMenuLabel>
+    <DropdownMenuSeparator />
+    <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>`}
+      >
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="outline">Open</Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56">
+            <DropdownMenuLabel>My Account</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <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>
+    </>
+  );
+}

package/apps/playground-web/src/pages/web/FormDocs.tsx

@@ -0,0 +1,175 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+import {
+  Button,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@gv-tech/ui-web';
+
+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 (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A simple form with validation."
+        code={`"use client"
+
+
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@gv-tech/ui-web"
+
+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 {...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>
+    </>
+  );
+
+  // @ts-ignore
+
+  const isNative = false as boolean;
+
+  // @ts-ignore
+
+  const platform = 'web' as string;
+}

package/apps/playground-web/src/pages/web/HoverCardDocs.tsx

@@ -0,0 +1,151 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { CalendarDays } from 'lucide-react';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Button,
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '@gv-tech/ui-web';
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' as string;
+
+export function HoverCardDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A hover card showing user details."
+        code={`<HoverCard>
+  <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>`}
+      >
+        <HoverCard>
+          <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>
+      </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>
+    </>
+  );
+}