@gv-tech/design-system 0.9.0 → 1.1.0

package/src/pages/components/NavigationMenuDocs.tsx

@@ -0,0 +1,156 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu';
+import { cn } from '@/lib/utils';
+import * as React from 'react';
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: 'Alert Dialog',
+    href: '#',
+    description: 'A modal dialog that interrupts the user with important content.',
+  },
+  {
+    title: 'Hover Card',
+    href: '#',
+    description: 'For sighted users to preview content available behind a link.',
+  },
+  {
+    title: 'Progress',
+    href: '#',
+    description: 'Displays an indicator showing the completion progress of a task.',
+  },
+];
+
+const ListItem = React.forwardRef<React.ComponentRef<'a'>, React.ComponentPropsWithoutRef<'a'>>(
+  ({ className, title, children, ...props }, ref) => {
+    return (
+      <li>
+        <NavigationMenuLink asChild>
+          <a
+            ref={ref}
+            className={cn(
+              'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',
+              className,
+            )}
+            {...props}
+          >
+            <div className="text-sm font-medium leading-none">{title}</div>
+            <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">{children}</p>
+          </a>
+        </NavigationMenuLink>
+      </li>
+    );
+  },
+);
+ListItem.displayName = 'ListItem';
+
+export function NavigationMenuDocs() {
+  return (
+    <ComponentSection title="Navigation Menu" description="A collection of links for navigating websites.">
+      <ComponentShowcase
+        title="Default"
+        description="A navigation menu with dropdown content."
+        code={`<NavigationMenu>
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+          <li className="row-span-3">
+            <NavigationMenuLink asChild>
+              <a className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md" href="#">
+                <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
+                <p className="text-sm leading-tight text-muted-foreground">
+                  Beautifully designed components built with Radix UI.
+                </p>
+              </a>
+            </NavigationMenuLink>
+          </li>
+          <ListItem href="#" title="Introduction">Re-usable components.</ListItem>
+          <ListItem href="#" title="Installation">How to install dependencies.</ListItem>
+          <ListItem href="#" title="Typography">Styles for headings.</ListItem>
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
+          {components.map((component) => (
+            <ListItem key={component.title} title={component.title} href={component.href}>
+              {component.description}
+            </ListItem>
+          ))}
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+    <NavigationMenuItem>
+      <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+        Documentation
+      </NavigationMenuLink>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>`}
+      >
+        <NavigationMenu>
+          <NavigationMenuList>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                  <li className="row-span-3">
+                    <NavigationMenuLink asChild>
+                      <a
+                        className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                        href="#"
+                      >
+                        <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
+                        <p className="text-sm leading-tight text-muted-foreground">
+                          Beautifully designed components built with Radix UI and Tailwind CSS.
+                        </p>
+                      </a>
+                    </NavigationMenuLink>
+                  </li>
+                  <ListItem href="#" title="Introduction">
+                    Re-usable components built using Radix UI.
+                  </ListItem>
+                  <ListItem href="#" title="Installation">
+                    How to install dependencies and structure your app.
+                  </ListItem>
+                  <ListItem href="#" title="Typography">
+                    Styles for headings, paragraphs, lists...etc.
+                  </ListItem>
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+              <NavigationMenuContent>
+                <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
+                  {components.map((component) => (
+                    <ListItem key={component.title} title={component.title} href={component.href}>
+                      {component.description}
+                    </ListItem>
+                  ))}
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink className={navigationMenuTriggerStyle()} href="#">
+                Documentation
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/PaginationDocs.tsx

@@ -0,0 +1,68 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination';
+
+export function PaginationDocs() {
+  return (
+    <ComponentSection title="Pagination" description="Pagination with page navigation, next and previous links.">
+      <ComponentShowcase
+        title="Default"
+        description="Standard pagination component."
+        code={`<Pagination>
+  <PaginationContent>
+    <PaginationItem>
+      <PaginationPrevious href="#" />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#">1</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#" isActive>2</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationLink href="#">3</PaginationLink>
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationEllipsis />
+    </PaginationItem>
+    <PaginationItem>
+      <PaginationNext href="#" />
+    </PaginationItem>
+  </PaginationContent>
+</Pagination>`}
+      >
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#" />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" isActive>
+                2
+              </PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">3</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#" />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/PopoverDocs.tsx

@@ -0,0 +1,61 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+
+export function PopoverDocs() {
+  return (
+    <ComponentSection title="Popover" description="Displays rich content in a portal, triggered by a button.">
+      <ComponentShowcase
+        title="Default"
+        description="A basic popover."
+        code={`<Popover>
+  <PopoverTrigger asChild>
+    <Button variant="outline">Open popover</Button>
+  </PopoverTrigger>
+  <PopoverContent className="w-80">
+    <div className="grid gap-4">
+      <div className="space-y-2">
+        <h4 className="font-medium leading-none">Dimensions</h4>
+        <p className="text-sm text-muted-foreground">
+          Set the dimensions for the layer.
+        </p>
+      </div>
+      <div className="grid gap-2">
+        <div className="grid grid-cols-3 items-center gap-4">
+          <Label htmlFor="width">Width</Label>
+          <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
+        </div>
+      </div>
+    </div>
+  </PopoverContent>
+</Popover>`}
+      >
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button variant="outline">Open popover</Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-80">
+            <div className="grid gap-4">
+              <div className="space-y-2">
+                <h4 className="font-medium leading-none">Dimensions</h4>
+                <p className="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
+              </div>
+              <div className="grid gap-2">
+                <div className="grid grid-cols-3 items-center gap-4">
+                  <Label htmlFor="width">Width</Label>
+                  <Input id="width" defaultValue="100%" className="col-span-2 h-8" />
+                </div>
+                <div className="grid grid-cols-3 items-center gap-4">
+                  <Label htmlFor="height">Height</Label>
+                  <Input id="height" defaultValue="25px" className="col-span-2 h-8" />
+                </div>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/ProgressDocs.tsx

@@ -0,0 +1,34 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Progress } from '@/components/ui/progress';
+
+export function ProgressDocs() {
+  return (
+    <ComponentSection title="Progress" description="Displays an indicator showing the completion progress of a task.">
+      <ComponentShowcase
+        title="Default"
+        description="A basic progress bar."
+        code={`<Progress value={33} className="w-[60%]" />`}
+      >
+        <Progress value={33} className="w-full max-w-md" />
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Various Values"
+        description="Progress bars with different completion values."
+        code={`<Progress value={0} />
+<Progress value={25} />
+<Progress value={50} />
+<Progress value={75} />
+<Progress value={100} />`}
+      >
+        <div className="space-y-4 w-full max-w-md">
+          <Progress value={0} />
+          <Progress value={25} />
+          <Progress value={50} />
+          <Progress value={75} />
+          <Progress value={100} />
+        </div>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/RadioGroupDocs.tsx

@@ -0,0 +1,38 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Label } from '@/components/ui/label';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+
+export function RadioGroupDocs() {
+  return (
+    <ComponentSection
+      title="Radio Group"
+      description="A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time."
+    >
+      <ComponentShowcase
+        title="Default"
+        description="A basic radio group."
+        code={`<RadioGroup defaultValue="option-one">
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-one" id="option-one" />
+    <Label htmlFor="option-one">Option One</Label>
+  </div>
+  <div className="flex items-center space-x-2">
+    <RadioGroupItem value="option-two" id="option-two" />
+    <Label htmlFor="option-two">Option Two</Label>
+  </div>
+</RadioGroup>`}
+      >
+        <RadioGroup defaultValue="option-one">
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="option-one" id="option-one" />
+            <Label htmlFor="option-one">Option One</Label>
+          </div>
+          <div className="flex items-center space-x-2">
+            <RadioGroupItem value="option-two" id="option-two" />
+            <Label htmlFor="option-two">Option Two</Label>
+          </div>
+        </RadioGroup>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/ResizableDocs.tsx

@@ -0,0 +1,110 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable';
+
+export function ResizableDocs() {
+  return (
+    <ComponentSection
+      title="Resizable"
+      description="Accessible resizable panel groups and layouts with keyboard support."
+    >
+      <ComponentShowcase
+        title="Horizontal"
+        description="A horizontally resizable panel group."
+        code={`<ResizablePanelGroup direction="horizontal" className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]">
+  <ResizablePanel defaultSize={50}>
+    <div className="flex h-[200px] items-center justify-center p-6">
+      <span className="font-semibold">One</span>
+    </div>
+  </ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel defaultSize={50}>
+    <div className="flex h-[200px] items-center justify-center p-6">
+      <span className="font-semibold">Two</span>
+    </div>
+  </ResizablePanel>
+</ResizablePanelGroup>`}
+      >
+        <ResizablePanelGroup
+          direction="horizontal"
+          className="min-h-[200px] max-w-md rounded-lg border md:min-w-[450px]"
+        >
+          <ResizablePanel defaultSize={50}>
+            <div className="flex h-[200px] items-center justify-center p-6">
+              <span className="font-semibold">One</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={50}>
+            <div className="flex h-[200px] items-center justify-center p-6">
+              <span className="font-semibold">Two</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Vertical"
+        description="A vertically resizable panel group."
+        code={`<ResizablePanelGroup direction="vertical" className="min-h-[300px] max-w-md rounded-lg border">
+  <ResizablePanel defaultSize={25}>
+    <div className="flex h-full items-center justify-center p-6">
+      <span className="font-semibold">Header</span>
+    </div>
+  </ResizablePanel>
+  <ResizableHandle />
+  <ResizablePanel defaultSize={75}>
+    <div className="flex h-full items-center justify-center p-6">
+      <span className="font-semibold">Content</span>
+    </div>
+  </ResizablePanel>
+</ResizablePanelGroup>`}
+      >
+        <ResizablePanelGroup direction="vertical" className="min-h-[300px] max-w-md rounded-lg border">
+          <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Header</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Content</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="With Handle"
+        description="Resizable panels with a visible handle."
+        code={`<ResizablePanelGroup direction="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
+  <ResizablePanel defaultSize={25}>
+    <div className="flex h-full items-center justify-center p-6">
+      <span className="font-semibold">Sidebar</span>
+    </div>
+  </ResizablePanel>
+  <ResizableHandle withHandle />
+  <ResizablePanel defaultSize={75}>
+    <div className="flex h-full items-center justify-center p-6">
+      <span className="font-semibold">Content</span>
+    </div>
+  </ResizablePanel>
+</ResizablePanelGroup>`}
+      >
+        <ResizablePanelGroup direction="horizontal" className="min-h-[200px] max-w-md rounded-lg border">
+          <ResizablePanel defaultSize={25}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Sidebar</span>
+            </div>
+          </ResizablePanel>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={75}>
+            <div className="flex h-full items-center justify-center p-6">
+              <span className="font-semibold">Content</span>
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/ScrollAreaDocs.tsx

@@ -0,0 +1,89 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+
+const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
+
+const works = [
+  { artist: 'Ornella Binni', art: 'Reflection' },
+  { artist: 'Tom Byrom', art: 'Mountain View' },
+  { artist: 'Vladimir Malyavko', art: 'Harmony' },
+  { artist: 'Magicle', art: 'Dreams' },
+];
+
+export function ScrollAreaDocs() {
+  return (
+    <ComponentSection
+      title="Scroll Area"
+      description="Augments native scroll functionality for custom, cross-browser styling."
+    >
+      <ComponentShowcase
+        title="Vertical"
+        description="A vertically scrolling area."
+        code={`<ScrollArea className="h-72 w-48 rounded-md border">
+  <div className="p-4">
+    <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+    {tags.map((tag) => (
+      <>
+        <div key={tag} className="text-sm">{tag}</div>
+        <Separator className="my-2" />
+      </>
+    ))}
+  </div>
+</ScrollArea>`}
+      >
+        <ScrollArea className="h-72 w-48 rounded-md border">
+          <div className="p-4">
+            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
+            {tags.map((tag) => (
+              <div key={tag}>
+                <div className="text-sm">{tag}</div>
+                <Separator className="my-2" />
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Horizontal"
+        description="A horizontally scrolling area."
+        code={`<ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+  <div className="flex w-max space-x-4 p-4">
+    {works.map((work) => (
+      <figure key={work.artist} className="shrink-0">
+        <div className="overflow-hidden rounded-md">
+          <div className="h-[150px] w-[150px] bg-muted flex items-center justify-center">
+            {work.art}
+          </div>
+        </div>
+        <figcaption className="pt-2 text-xs text-muted-foreground">
+          Photo by <span className="font-semibold text-foreground">{work.artist}</span>
+        </figcaption>
+      </figure>
+    ))}
+  </div>
+  <ScrollBar orientation="horizontal" />
+</ScrollArea>`}
+      >
+        <ScrollArea className="w-96 whitespace-nowrap rounded-md border">
+          <div className="flex w-max space-x-4 p-4">
+            {works.map((work) => (
+              <figure key={work.artist} className="shrink-0">
+                <div className="overflow-hidden rounded-md">
+                  <div className="h-[150px] w-[150px] bg-muted flex items-center justify-center text-sm">
+                    {work.art}
+                  </div>
+                </div>
+                <figcaption className="pt-2 text-xs text-muted-foreground">
+                  Photo by <span className="font-semibold text-foreground">{work.artist}</span>
+                </figcaption>
+              </figure>
+            ))}
+          </div>
+          <ScrollBar orientation="horizontal" />
+        </ScrollArea>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/SelectDocs.tsx

@@ -0,0 +1,87 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+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 basic select component."
+        code={`<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Select a fruit" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="apple">Apple</SelectItem>
+    <SelectItem value="banana">Banana</SelectItem>
+    <SelectItem value="orange">Orange</SelectItem>
+  </SelectContent>
+</Select>`}
+      >
+        <Select>
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Select a fruit" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="apple">Apple</SelectItem>
+            <SelectItem value="banana">Banana</SelectItem>
+            <SelectItem value="orange">Orange</SelectItem>
+          </SelectContent>
+        </Select>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="With Groups"
+        description="Options can be organized into groups with labels."
+        code={`<Select>
+  <SelectTrigger className="w-[180px]">
+    <SelectValue placeholder="Select a timezone" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>North America</SelectLabel>
+      <SelectItem value="est">Eastern Time (EST)</SelectItem>
+      <SelectItem value="cst">Central Time (CST)</SelectItem>
+      <SelectItem value="pst">Pacific Time (PST)</SelectItem>
+    </SelectGroup>
+    <SelectGroup>
+      <SelectLabel>Europe</SelectLabel>
+      <SelectItem value="gmt">GMT</SelectItem>
+      <SelectItem value="cet">Central European Time (CET)</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>`}
+      >
+        <Select>
+          <SelectTrigger className="w-[220px]">
+            <SelectValue placeholder="Select a timezone" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>North America</SelectLabel>
+              <SelectItem value="est">Eastern Time (EST)</SelectItem>
+              <SelectItem value="cst">Central Time (CST)</SelectItem>
+              <SelectItem value="pst">Pacific Time (PST)</SelectItem>
+            </SelectGroup>
+            <SelectGroup>
+              <SelectLabel>Europe</SelectLabel>
+              <SelectItem value="gmt">GMT</SelectItem>
+              <SelectItem value="cet">Central European Time (CET)</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}