@gv-tech/design-system 2.4.0 → 2.5.1

package/src/pages/components/FormDocs.tsx

@@ -1,163 +0,0 @@
-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 { 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.">
-      <ComponentShowcase
-        title="Default"
-        description="A simple form with validation."
-        code={`"use client"
-
-import { zodResolver } from "@hookform/resolvers/zod"
-import { useForm } from "react-hook-form"
-import { z } from "zod"
-
-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 {...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,136 +0,0 @@
-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';
-import { CalendarDays } from 'lucide-react';
-
-export function HoverCardDocs() {
-  return (
-    <ComponentSection title="Hover Card" description="For sighted users to preview content available behind a link.">
-      <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>
-    </ComponentSection>
-  );
-}

package/src/pages/components/InputDocs.tsx

@@ -1,99 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
-import { Label } from '@/components/ui/label';
-
-export function InputDocs() {
-  return (
-    <ComponentSection
-      title="Input"
-      description="Displays a form input field or a component that looks like an input field."
-    >
-      <ComponentShowcase
-        title="Default"
-        description="A default input field."
-        code={`<Input type="email" placeholder="Email" />`}
-      >
-        <div className="grid w-full max-w-sm items-center gap-1.5">
-          <Label htmlFor="email">Email</Label>
-          <Input type="email" id="email" placeholder="Email" />
-        </div>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="File"
-        description="A file input field."
-        code={`<div className="grid w-full max-w-sm items-center gap-1.5">
-  <Label htmlFor="picture">Picture</Label>
-  <Input id="picture" type="file" />
-</div>`}
-      >
-        <div className="grid w-full max-w-sm items-center gap-1.5">
-          <Label htmlFor="picture">Picture</Label>
-          <Input id="picture" type="file" />
-        </div>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Disabled"
-        description="A disabled input field."
-        code={`<Input disabled type="email" placeholder="Email" />`}
-      >
-        <div className="grid w-full max-w-sm items-center gap-1.5">
-          <Label htmlFor="email-disabled">Email</Label>
-          <Input disabled type="email" id="email-disabled" placeholder="Email" />
-        </div>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="With Button"
-        description="An input field with a button."
-        code={`<div className="flex w-full max-w-sm items-center space-x-2">
-  <Input type="email" placeholder="Email" />
-  <Button type="submit">Subscribe</Button>
-</div>`}
-      >
-        <div className="flex w-full max-w-sm items-center space-x-2">
-          <Input type="email" placeholder="Email" />
-          <Button type="submit">Subscribe</Button>
-        </div>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">The Input component extends the standard HTML input element.</p>
-        <PropsTable
-          props={[
-            {
-              name: 'type',
-              type: 'string',
-              defaultValue: '"text"',
-              description: 'The type of input to render.',
-            },
-            {
-              name: 'placeholder',
-              type: 'string',
-              description: 'The placeholder text for the input.',
-            },
-            {
-              name: 'value',
-              type: 'string | number | readonly string[]',
-              description: 'The value of the input.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'Whether the input is disabled.',
-            },
-            {
-              name: 'onChange',
-              type: '(event: React.ChangeEvent<HTMLInputElement>) => void',
-              description: 'Event handler called when the value changes.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/LabelDocs.tsx

@@ -1,54 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Checkbox } from '@/components/ui/checkbox';
-import { Label } from '@/components/ui/label';
-
-export function LabelDocs() {
-  return (
-    <ComponentSection title="Label" description="Renders an accessible label associated with controls.">
-      <ComponentShowcase
-        title="Default"
-        description="A default label."
-        code={`<div className="flex items-center space-x-2">
-  <Checkbox id="terms" />
-  <Label htmlFor="terms">Accept terms and conditions</Label>
-</div>`}
-      >
-        <div className="flex items-center space-x-2">
-          <Checkbox id="terms" />
-          <Label htmlFor="terms">Accept terms and conditions</Label>
-        </div>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Label component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/label"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Label
-          </a>
-          .
-        </p>
-        <PropsTable
-          props={[
-            {
-              name: 'htmlFor',
-              type: 'string',
-              description: 'The id of the element the label is associated with.',
-            },
-            {
-              name: 'asChild',
-              type: 'boolean',
-              description: 'Change the default rendered element for the one passed as a child.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}