@gv-tech/design-system 2.3.0 → 2.5.0

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

@@ -0,0 +1,263 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  cn,
+  navigationMenuTriggerStyle,
+} from '@gv-tech/ui-web';
+import React from 'react';
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' as string;
+
+const ListItem = React.forwardRef<React.ElementRef<'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 (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A standard navigation menu."
+        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 and
+                  Tailwind CSS.
+                </p>
+              </a>
+            </NavigationMenuLink>
+          </li>
+          <ListItem href="/docs" title="Introduction">
+            Re-usable components built using Radix UI and Tailwind CSS.
+          </ListItem>
+          <ListItem href="/docs/installation" title="Installation">
+            How to install dependencies and structure your app.
+          </ListItem>
+          <ListItem href="/docs/primitives/typography" 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 lg:w-[600px] ">
+          <ListItem title="Alert Dialog" href="/docs/primitives/alert-dialog">
+            A modal dialog that interrupts the user with important content.
+          </ListItem>
+          <ListItem title="Hover Card" href="/docs/primitives/hover-card">
+            For sighted users to preview content available behind a link.
+          </ListItem>
+          <ListItem title="Progress" href="/docs/primitives/progress">
+            Displays an indicator showing the completion progress of a task.
+          </ListItem>
+          <ListItem title="Scroll-area" href="/docs/primitives/scroll-area">
+            Visually or semantically separates content.
+          </ListItem>
+          <ListItem title="Tabs" href="/docs/primitives/tabs">
+            A set of layered sections of content—known as tab panels.
+          </ListItem>
+          <ListItem title="Tooltip" href="/docs/primitives/tooltip">
+            A popup that displays information related to an element.
+          </ListItem>
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+    <NavigationMenuItem>
+      <a href="/docs" legacyBehavior passHref>
+        <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+          Documentation
+        </NavigationMenuLink>
+      </a>
+    </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="/docs" title="Introduction">
+                    Re-usable components built using Radix UI and Tailwind CSS.
+                  </ListItem>
+                  <ListItem href="/docs/installation" title="Installation">
+                    How to install dependencies and structure your app.
+                  </ListItem>
+                  <ListItem href="/docs/primitives/typography" 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 lg:w-[600px] ">
+                  <ListItem title="Alert Dialog" href="/docs/primitives/alert-dialog">
+                    A modal dialog that interrupts the user with important content.
+                  </ListItem>
+                  <ListItem title="Hover Card" href="/docs/primitives/hover-card">
+                    For sighted users to preview content available behind a link.
+                  </ListItem>
+                  <ListItem title="Progress" href="/docs/primitives/progress">
+                    Displays an indicator showing the completion progress of a task.
+                  </ListItem>
+                  <ListItem title="Scroll-area" href="/docs/primitives/scroll-area">
+                    Visually or semantically separates content.
+                  </ListItem>
+                  <ListItem title="Tabs" href="/docs/primitives/tabs">
+                    A set of layered sections of content—known as tab panels.
+                  </ListItem>
+                  <ListItem title="Tooltip" href="/docs/primitives/tooltip">
+                    A popup that displays information related to an element.
+                  </ListItem>
+                </ul>
+              </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+              <NavigationMenuLink className={navigationMenuTriggerStyle()} href="/docs">
+                Documentation
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          </NavigationMenuList>
+        </NavigationMenu>
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Navigation Menu component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/navigation-menu"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Navigation Menu
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">NavigationMenu (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultValue',
+              type: 'string',
+              description: 'The value of the menu item that should be active when initially rendered.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'The controlled value of the active menu item.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when the value changes.',
+            },
+            {
+              name: 'delayDuration',
+              type: 'number',
+              defaultValue: '200',
+              description: 'The duration from when the mouse enters the trigger until the content opens.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">NavigationMenuContent</h4>
+        <PropsTable
+          props={[
+            {
+              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.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">NavigationMenuLink</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'active',
+              type: 'boolean',
+              description: 'Used to identify the link as the currently active page.',
+            },
+            {
+              name: 'onSelect',
+              type: '(event: Event) => void',
+              description: 'Event handler called when the link is selected.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,102 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@gv-tech/ui-web';
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' as string;
+
+export function PaginationDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A standard pagination."
+        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>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">The Pagination component is built using standard HTML elements.</p>
+
+        <h4 className="text-lg font-medium mt-6">PaginationLink</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'isActive',
+              type: 'boolean',
+              description: 'Whether the link is active.',
+            },
+            {
+              name: 'size',
+              type: '"default" | "sm" | "icon"',
+              defaultValue: '"icon"',
+              description: 'The size of the button.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,189 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { Button, Input, Label, Popover, PopoverContent, PopoverTrigger } from '@gv-tech/ui-web';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' as string;
+
+export function PopoverDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A default 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 className="grid grid-cols-3 items-center gap-4">
+          <Label htmlFor="maxWidth">Max. width</Label>
+          <Input
+            id="maxWidth"
+            defaultValue="300px"
+            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 className="grid grid-cols-3 items-center gap-4">
+          <Label htmlFor="maxHeight">Max. height</Label>
+          <Input
+            id="maxHeight"
+            defaultValue="none"
+            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="maxWidth">Max. width</Label>
+                  <Input id="maxWidth" defaultValue="300px" 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 className="grid grid-cols-3 items-center gap-4">
+                  <Label htmlFor="maxHeight">Max. height</Label>
+                  <Input id="maxHeight" defaultValue="none" className="col-span-2 h-8" />
+                </div>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Popover component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/popover"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Popover
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">Popover (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultOpen',
+              type: 'boolean',
+              description: 'The open state of the popover when it is initially rendered.',
+            },
+            {
+              name: 'open',
+              type: 'boolean',
+              description: 'The controlled open state of the popover.',
+            },
+            {
+              name: 'onOpenChange',
+              type: '(open: boolean) => void',
+              description: 'Event handler called when the open state changes.',
+            },
+            {
+              name: 'modal',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'The modality of the popover.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">PopoverContent</h4>
+        <PropsTable
+          props={[
+            {
+              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: 'onFocusOutside',
+              type: '(event: FocusOutsideEvent) => void',
+              description: 'Event handler called when focus moves 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>
+    </>
+  );
+}

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

@@ -0,0 +1,70 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { Progress } from '@gv-tech/ui-web';
+import { useEffect, useState } from 'react';
+/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' as string;
+
+export function ProgressDocs() {
+  const [progress, setProgress] = useState(13);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setProgress(66), 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <>
+      <ComponentShowcase title="Default" description="A default progress bar." code={`<Progress value={33} />`}>
+        <Progress value={progress} className="w-[60%]" />
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Progress component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/progress"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Progress
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">Progress (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'number | null',
+              description: 'The progress value.',
+            },
+            {
+              name: 'max',
+              type: 'number',
+              defaultValue: '100',
+              description: 'The maximum progress value.',
+            },
+            {
+              name: 'getValueLabel',
+              type: '(value: number, max: number) => string',
+              defaultValue: '"${value}%"',
+              description:
+                'A function to get the accessible label text representing the current value in a human-readable format.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}