@gv-tech/design-system 2.5.0 → 2.5.2

package/apps/playground-web/src/pages/native/InputDocs.tsx

@@ -1,86 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function InputDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default input field."
-        code={`<Input type="email" placeholder="Email" />`}
-      />
-      <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>`}
-      />
-
-      <ComponentShowcase
-        title="Disabled"
-        description="A disabled input field."
-        code={`<Input disabled type="email" placeholder="Email" />`}
-      />
-
-      <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: 'className',
-              type: 'string',
-              description: isNative ? 'Tailwind (NativeWind) classes.' : 'Additional CSS classes to apply.',
-            },
-            ...[
-              {
-                name: 'placeholderClassName',
-                type: 'string',
-                description: 'Styling for the placeholder text (NativeWind).',
-              },
-            ],
-            {
-              name: 'value',
-              type: 'string | number | readonly string[]',
-              description: 'The value of the input.',
-            },
-            {
-              name: 'placeholder',
-              type: 'string',
-              description: 'The placeholder text for 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>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/LabelDocs.tsx

@@ -1,55 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function LabelDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A default label."
-        code={`<Label htmlFor="terms">Accept terms and conditions</Label>`}
-      />
-
-      <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>
-    </>
-  );
-}

package/apps/playground-web/src/pages/native/MenubarDocs.tsx

@@ -1,197 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' as string;
-
-export function MenubarDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A standard menubar."
-        code={`<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>File</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>
-        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
-      </MenubarItem>
-      <MenubarItem>
-        New Window <MenubarShortcut>⌘N</MenubarShortcut>
-      </MenubarItem>
-      <MenubarItem disabled>New Incognito Window</MenubarItem>
-      <MenubarSeparator />
-      <MenubarSub>
-        <MenubarSubTrigger>Share</MenubarSubTrigger>
-        <MenubarSubContent>
-          <MenubarItem>Email link</MenubarItem>
-          <MenubarItem>Messages</MenubarItem>
-          <MenubarItem>Notes</MenubarItem>
-        </MenubarSubContent>
-      </MenubarSub>
-      <MenubarSeparator />
-      <MenubarItem>
-        Print... <MenubarShortcut>⌘P</MenubarShortcut>
-      </MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-  <MenubarMenu>
-    <MenubarTrigger>Edit</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>
-        Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-      </MenubarItem>
-      <MenubarItem>
-        Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-      </MenubarItem>
-      <MenubarSeparator />
-      <MenubarSub>
-        <MenubarSubTrigger>Find</MenubarSubTrigger>
-        <MenubarSubContent>
-          <MenubarItem>Search the web</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>Find...</MenubarItem>
-          <MenubarItem>Find Next</MenubarItem>
-          <MenubarItem>Find Previous</MenubarItem>
-        </MenubarSubContent>
-      </MenubarSub>
-      <MenubarSeparator />
-      <MenubarItem>Cut</MenubarItem>
-      <MenubarItem>Copy</MenubarItem>
-      <MenubarItem>Paste</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-  <MenubarMenu>
-    <MenubarTrigger>View</MenubarTrigger>
-    <MenubarContent>
-      <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
-      <MenubarCheckboxItem checked>
-        Always Show Full URLs
-      </MenubarCheckboxItem>
-      <MenubarSeparator />
-      <MenubarItem inset>
-        Reload <MenubarShortcut>⌘R</MenubarShortcut>
-      </MenubarItem>
-      <MenubarItem disabled inset>
-        Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
-      </MenubarItem>
-      <MenubarSeparator />
-      <MenubarItem inset>Toggle Fullscreen</MenubarItem>
-      <MenubarSeparator />
-      <MenubarItem inset>Hide Sidebar</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-  <MenubarMenu>
-    <MenubarTrigger>Profiles</MenubarTrigger>
-    <MenubarContent>
-      <MenubarRadioGroup value="benoit">
-        <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
-        <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-        <MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
-      </MenubarRadioGroup>
-      <MenubarSeparator />
-      <MenubarItem inset>Edit...</MenubarItem>
-      <MenubarSeparator />
-      <MenubarItem inset>Add Profile...</MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>`}
-      />
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Menubar component is built on top of{' '}
-          <a
-            href="https://www.radix-ui.com/primitives/docs/components/menubar"
-            className="underline"
-            target="_blank"
-            rel="noreferrer"
-          >
-            Radix UI Menubar
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">Menubar (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: 'loop',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Whether keyboard navigation should loop from last item to first, and vice versa.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">MenubarMenu</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'value',
-              type: 'string',
-              description: 'A unique value that identifies the menu.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">MenubarCheckboxItem</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">MenubarRadioGroup</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/native/NavigationMenuDocs.tsx

@@ -1,190 +0,0 @@
-import { PropsTable } from '@/components/docs/PropsTable';
-import { NavigationMenuLink, cn } from '@gv-tech/ui-web';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import React from 'react';
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' 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>`}
-      />
-
-      <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/native/PaginationDocs.tsx

@@ -1,70 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-/* eslint-disable @typescript-eslint/ban-ts-comment */
-// @ts-nocheck
-/* eslint-disable @typescript-eslint/no-unused-vars */
-
-// @ts-ignore
-
-const isNative = true as boolean;
-
-// @ts-ignore
-
-const platform = 'native' 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>`}
-      />
-
-      <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>
-    </>
-  );
-}