@gv-tech/design-system 2.3.0 → 2.5.0

package/src/pages/components/SearchDocs.tsx

@@ -1,194 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import {
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  Search,
-  SearchTrigger,
-} from '@/components/ui/search';
-import * as React from 'react';
-import { toast } from 'sonner';
-
-export function SearchDocs() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <ComponentSection title="Search" description="A searchable command palette for navigation and actions.">
-      <ComponentShowcase
-        title="Quick Search"
-        description="A shortcut-ready search trigger for headers. Press Cmd+K or Ctrl+K to open."
-        code={`<Search>
-  <CommandInput placeholder="Type a command or search..." />
-  <CommandList>
-    <CommandEmpty>No results found.</CommandEmpty>
-    <CommandGroup heading="Suggestions">
-      <CommandItem>Calendar</CommandItem>
-      <CommandItem>Search Emoji</CommandItem>
-      <CommandItem>Calculator</CommandItem>
-    </CommandGroup>
-  </CommandList>
-</Search>
-<SearchTrigger onClick={() => setOpen(true)} placeholder="Search documentation..." />`}
-      >
-        <div className="flex items-center gap-4">
-          <Search open={open} onOpenChange={setOpen}>
-            <CommandInput placeholder="Type a command or search..." />
-            <CommandList>
-              <CommandEmpty>No results found.</CommandEmpty>
-              <CommandGroup heading="Suggestions">
-                <CommandItem
-                  onSelect={() => {
-                    toast.success('Selected Calendar');
-                    setOpen(false);
-                  }}
-                >
-                  Calendar
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => {
-                    toast.success('Selected Search Emoji');
-                    setOpen(false);
-                  }}
-                >
-                  Search Emoji
-                </CommandItem>
-                <CommandItem
-                  onSelect={() => {
-                    toast.success('Selected Calculator');
-                    setOpen(false);
-                  }}
-                >
-                  Calculator
-                </CommandItem>
-              </CommandGroup>
-            </CommandList>
-          </Search>
-          <SearchTrigger onClick={() => setOpen(true)} placeholder="Search documentation..." />
-          <p className="text-sm text-muted-foreground">Try clicking the trigger or pressing ⌘K</p>
-        </div>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Compact Variant"
-        description="A smaller version of the trigger, ideal for dense headers or mobile-first layouts."
-        code={`<SearchTrigger variant="compact" />`}
-      >
-        <div className="flex items-center gap-4">
-          <SearchTrigger variant="compact" onClick={() => setOpen(true)} />
-          <p className="text-sm text-muted-foreground">Compact trigger showing only icon and shortcut</p>
-        </div>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Search Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              required: false,
-              description: 'Whether the search dialog is open.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              required: false,
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'children',
-              type: 'ReactNode',
-              required: false,
-              description: 'The search content (CommandInput, CommandList, etc.).',
-            },
-          ]}
-        />
-      </div>
-
-      <div className="mt-8 space-y-4">
-        <h3 className="text-xl font-semibold">SearchTrigger Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'className',
-              type: 'string',
-              required: false,
-              description: 'Additional CSS classes to apply.',
-            },
-            {
-              name: 'onClick',
-              type: 'MouseEventHandler',
-              required: false,
-              description: 'Click event handler to trigger the search.',
-            },
-            {
-              name: 'placeholder',
-              type: 'string',
-              defaultValue: '"Search docs..."',
-              required: false,
-              description: 'The placeholder text to display in the trigger.',
-            },
-            {
-              name: 'variant',
-              type: '"default" | "compact"',
-              defaultValue: '"default"',
-              required: false,
-              description: 'The visual style of the trigger.',
-            },
-          ]}
-        />
-      </div>
-
-      <div className="mt-12 space-y-6">
-        <div>
-          <h3 className="text-xl font-semibold">Integrations</h3>
-          <p className="mt-2 text-muted-foreground">
-            The Search component is designed to be highly composable, making it easy to integrate with external search
-            providers like Algolia, ElasticSearch, or custom APIs.
-          </p>
-        </div>
-
-        <div className="rounded-lg border bg-muted/50 p-6">
-          <h4 className="font-medium">External Provider Pattern</h4>
-          <p className="mt-1 text-sm text-muted-foreground">
-            You can use the `onValueChange` prop of `CommandInput` to trigger external searches and dynamically render
-            `CommandGroup` and `CommandItem` components with the results.
-          </p>
-          <pre className="mt-4 overflow-x-auto rounded-md bg-background p-4 text-xs">
-            <code>{`const [results, setResults] = React.useState([]);
-
-const handleSearch = async (query) => {
-  const data = await algoliaIndex.search(query);
-  setResults(data.hits);
-};
-
-return (
-  <Search>
-    <CommandInput 
-      placeholder="Search docs..." 
-      onValueChange={handleSearch} 
-    />
-    <CommandList>
-      {results.length > 0 ? (
-        <CommandGroup heading="Results">
-          {results.map((hit) => (
-            <CommandItem key={hit.objectID}>
-              {hit.title}
-            </CommandItem>
-          ))}
-        </CommandGroup>
-      ) : (
-        <CommandEmpty>No results found.</CommandEmpty>
-      )}
-    </CommandList>
-  </Search>
-);`}</code>
-          </pre>
-        </div>
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/SelectDocs.tsx

@@ -1,158 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-
-export function SelectDocs() {
-  return (
-    <ComponentSection
-      title="Select"
-      description="Displays a list of options for the user to pick from—triggered by a button."
-    >
-      <ComponentShowcase
-        title="Default"
-        description="A default select component."
-        code={`<Select>
-  <SelectTrigger className="w-[180px]">
-    <SelectValue placeholder="Select a fruit" />
-  </SelectTrigger>
-  <SelectContent>
-    <SelectGroup>
-      <SelectLabel>Fruits</SelectLabel>
-      <SelectItem value="apple">Apple</SelectItem>
-      <SelectItem value="banana">Banana</SelectItem>
-      <SelectItem value="blueberry">Blueberry</SelectItem>
-      <SelectItem value="grapes">Grapes</SelectItem>
-      <SelectItem value="pineapple">Pineapple</SelectItem>
-    </SelectGroup>
-  </SelectContent>
-</Select>`}
-      >
-        <Select>
-          <SelectTrigger className="w-[180px]">
-            <SelectValue placeholder="Select a fruit" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectLabel>Fruits</SelectLabel>
-              <SelectItem value="apple">Apple</SelectItem>
-              <SelectItem value="banana">Banana</SelectItem>
-              <SelectItem value="blueberry">Blueberry</SelectItem>
-              <SelectItem value="grapes">Grapes</SelectItem>
-              <SelectItem value="pineapple">Pineapple</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Select component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/select"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Select
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Select (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'defaultValue',
-              type: 'string',
-              description: 'The value of the select when initially rendered.',
-            },
-            {
-              name: 'value',
-              type: 'string',
-              description: 'The controlled value of the select.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: string) => void',
-              description: 'Event handler called when the value changes.',
-            },
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the select.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              description: 'The reading direction of the select.',
-            },
-            {
-              name: 'name',
-              type: 'string',
-              description: 'The name of the select. Submitted with its owning form as part of a name/value pair.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'When true, prevents the user from interacting with select.',
-            },
-            {
-              name: 'required',
-              type: 'boolean',
-              description:
-                'When true, indicates that the user must select a value before the owning form can be submitted.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">SelectTrigger</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'asChild',
-              type: 'boolean',
-              description: 'Change the default rendered element for the one passed as a child.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">SelectItem</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'value',
-              type: 'string',
-              required: true,
-              description: 'The value given as data when submitted with a name.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              description: 'When true, prevents the user from interacting with the item.',
-            },
-            {
-              name: 'textValue',
-              type: 'string',
-              description:
-                'Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the Item.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/SeparatorDocs.tsx

@@ -1,79 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Separator } from '@/components/ui/separator';
-
-export function SeparatorDocs() {
-  return (
-    <ComponentSection title="Separator" description="Visually or semantically separates content.">
-      <ComponentShowcase
-        title="Default"
-        description="A horizontal separator."
-        code={`<div>
-  <div className="space-y-1">
-    <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-    <p className="text-sm text-muted-foreground">
-      An open-source UI component library.
-    </p>
-  </div>
-  <Separator className="my-4" />
-  <div className="flex h-5 items-center space-x-4 text-sm">
-    <div>Blog</div>
-    <Separator orientation="vertical" />
-    <div>Docs</div>
-    <Separator orientation="vertical" />
-    <div>Source</div>
-  </div>
-</div>`}
-      >
-        <div>
-          <div className="space-y-1">
-            <h4 className="text-sm font-medium leading-none">Radix Primitives</h4>
-            <p className="text-sm text-muted-foreground">An open-source UI component library.</p>
-          </div>
-          <Separator className="my-4" />
-          <div className="flex h-5 items-center space-x-4 text-sm">
-            <div>Blog</div>
-            <Separator orientation="vertical" />
-            <div>Docs</div>
-            <Separator orientation="vertical" />
-            <div>Source</div>
-          </div>
-        </div>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Separator component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/separator"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Separator
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Separator (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'orientation',
-              type: '"horizontal" | "vertical"',
-              defaultValue: '"horizontal"',
-              description: 'The orientation of the separator.',
-            },
-            {
-              name: 'decorative',
-              type: 'boolean',
-              description:
-                'When true, signifies that it is purely visual, covers it from the accessibility tree. When false, signifies that it is a semantic separator.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/SheetDocs.tsx

@@ -1,178 +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';
-import {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from '@/components/ui/sheet';
-
-export function SheetDocs() {
-  return (
-    <ComponentSection
-      title="Sheet"
-      description="Extends the Dialog component to display content that complements the main screen."
-    >
-      <ComponentShowcase
-        title="Default"
-        description="A default sheet."
-        code={`<Sheet>
-  <SheetTrigger asChild>
-    <Button variant="outline">Open</Button>
-  </SheetTrigger>
-  <SheetContent>
-    <SheetHeader>
-      <SheetTitle>Edit profile</SheetTitle>
-      <SheetDescription>
-        Make changes to your profile here. Click save when you're done.
-      </SheetDescription>
-    </SheetHeader>
-    <div className="grid gap-4 py-4">
-      <div className="grid grid-cols-4 items-center gap-4">
-        <Label htmlFor="name" className="text-right">
-          Name
-        </Label>
-        <Input id="name" value="Pedro Duarte" className="col-span-3" />
-      </div>
-      <div className="grid grid-cols-4 items-center gap-4">
-        <Label htmlFor="username" className="text-right">
-          Username
-        </Label>
-        <Input id="username" value="@peduarte" className="col-span-3" />
-      </div>
-    </div>
-    <SheetFooter>
-      <SheetClose asChild>
-        <Button type="submit">Save changes</Button>
-      </SheetClose>
-    </SheetFooter>
-  </SheetContent>
-</Sheet>`}
-      >
-        <Sheet>
-          <SheetTrigger asChild>
-            <Button variant="outline">Open</Button>
-          </SheetTrigger>
-          <SheetContent>
-            <SheetHeader>
-              <SheetTitle>Edit profile</SheetTitle>
-              <SheetDescription>Make changes to your profile here. Click save when you're done.</SheetDescription>
-            </SheetHeader>
-            <div className="grid gap-4 py-4">
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="name" className="text-right">
-                  Name
-                </Label>
-                <Input id="name" defaultValue="Pedro Duarte" className="col-span-3" />
-              </div>
-              <div className="grid grid-cols-4 items-center gap-4">
-                <Label htmlFor="username" className="text-right">
-                  Username
-                </Label>
-                <Input id="username" defaultValue="@peduarte" className="col-span-3" />
-              </div>
-            </div>
-            <SheetFooter>
-              <SheetClose asChild>
-                <Button type="submit">Save changes</Button>
-              </SheetClose>
-            </SheetFooter>
-          </SheetContent>
-        </Sheet>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Sheet component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/dialog"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Dialog
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Sheet (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'open',
-              type: 'boolean',
-              description: 'The controlled open state of the sheet.',
-            },
-            {
-              name: 'onOpenChange',
-              type: '(open: boolean) => void',
-              description: 'Event handler called when the open state changes.',
-            },
-            {
-              name: 'defaultOpen',
-              type: 'boolean',
-              description: 'The open state of the sheet when it is initially rendered.',
-            },
-            {
-              name: 'modal',
-              type: 'boolean',
-              defaultValue: 'true',
-              description: 'The modality of the sheet.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">SheetContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'side',
-              type: '"top" | "bottom" | "left" | "right"',
-              defaultValue: '"right"',
-              description: 'The side of the screen where the sheet appears.',
-            },
-            {
-              name: 'onOpenAutoFocus',
-              type: '(event: Event) => void',
-              description: 'Event handler called when focus moves into the component after opening.',
-            },
-            {
-              name: 'onCloseAutoFocus',
-              type: '(event: Event) => void',
-              description: 'Event handler called when focus moves to the trigger after closing.',
-            },
-            {
-              name: 'onEscapeKeyDown',
-              type: '(event: KeyboardEvent) => void',
-              description: 'Event handler called when the escape key is down.',
-            },
-            {
-              name: 'onPointerDownOutside',
-              type: '(event: PointerDownOutsideEvent) => void',
-              description: 'Event handler called when a pointer event occurs outside the bounds of the component.',
-            },
-            {
-              name: 'onInteractOutside',
-              type: '(event: PointerDownOutsideEvent | FocusOutsideEvent) => void',
-              description:
-                'Event handler called when an interaction (pointer or focus) happens outside the bounds of the component.',
-            },
-            {
-              name: 'forceMount',
-              type: 'boolean',
-              description: 'Used to force mounting when more control is needed.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}

package/src/pages/components/SkeletonDocs.tsx

@@ -1,44 +0,0 @@
-import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Skeleton } from '@/components/ui/skeleton';
-
-export function SkeletonDocs() {
-  return (
-    <ComponentSection title="Skeleton" description="Use to show a placeholder while content is loading.">
-      <ComponentShowcase
-        title="Default"
-        description="A default skeleton."
-        code={`<div className="flex items-center space-x-4">
-  <Skeleton className="h-12 w-12 rounded-full" />
-  <div className="space-y-2">
-    <Skeleton className="h-4 w-[250px]" />
-    <Skeleton className="h-4 w-[200px]" />
-  </div>
-</div>`}
-      >
-        <div className="flex items-center space-x-4">
-          <Skeleton className="h-12 w-12 rounded-full" />
-          <div className="space-y-2">
-            <Skeleton className="h-4 w-[250px]" />
-            <Skeleton className="h-4 w-[200px]" />
-          </div>
-        </div>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-
-        <h4 className="text-lg font-medium mt-6">Skeleton</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional class names to apply.',
-            },
-          ]}
-        />
-      </div>
-    </ComponentSection>
-  );
-}