@gv-tech/design-system 2.3.0 → 2.5.0

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

@@ -0,0 +1,126 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { Button } from '@gv-tech/ui-web';
+import { toast } from 'sonner';
+/* 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 SonnerDocs() {
+  return (
+    <>
+      <div className="bg-muted/50 border rounded-lg p-6 space-y-4 mb-8">
+        <h3 className="text-lg font-semibold">Which to use?</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div className="space-y-2">
+            <h4 className="font-medium text-primary">Sonner</h4>
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              Designed for modern applications. It stacks automatically, looks great by default, and uses a very simple
+              function call (<code>toast()</code>) that can be used anywhere—no hooks required.
+            </p>
+          </div>
+          <div className="space-y-2">
+            <h4 className="font-medium text-primary">Toast (Radix UI)</h4>
+            <p className="text-sm text-muted-foreground leading-relaxed">
+              Traditional Radix UI based toasts. Use this if you need deep programmatic control over the toast lifecycle
+              or if you require specific accessibility patterns not covered by Sonner.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <ComponentShowcase
+        title="Default"
+        description="A default toast."
+        code={`<Button
+  variant="outline"
+  onClick={() =>
+    toast("Event has been created", {
+      description: "Sunday, December 03, 2023 at 9:00 AM",
+      action: {
+        label: "Undo",
+        onClick: () => console.log("Undo"),
+      },
+    })
+  }
+>
+  Show Toast
+</Button>`}
+      >
+        <Button
+          variant="outline"
+          onClick={() =>
+            toast('Event has been created', {
+              description: 'Sunday, December 03, 2023 at 9:00 AM',
+              action: {
+                label: 'Undo',
+                onClick: () => console.log('Undo'),
+              },
+            })
+          }
+        >
+          Show Toast
+        </Button>
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Sonner component is based on{' '}
+          <a href="https://sonner.emilkowal.ski/" className="underline" target="_blank" rel="noreferrer">
+            Sonner
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">Toaster</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'theme',
+              type: '"light" | "dark" | "system"',
+              description: 'The theme of the toast.',
+            },
+            {
+              name: 'richColors',
+              type: 'boolean',
+              description: 'Makes the toast colorful based on the type.',
+            },
+            {
+              name: 'expand',
+              type: 'boolean',
+              description: 'Expands the toast to show the full content.',
+            },
+            {
+              name: 'duration',
+              type: 'number',
+              description: 'Duration in milliseconds.',
+            },
+            {
+              name: 'visibleToasts',
+              type: 'number',
+              description: 'Number of visible toasts.',
+            },
+            {
+              name: 'closeButton',
+              type: 'boolean',
+              description: 'Shows a close button.',
+            },
+            {
+              name: 'position',
+              type: '"top-left" | "top-right" | "bottom-left" | "bottom-right" | "top-center" | "bottom-center"',
+              defaultValue: '"bottom-right"',
+              description: 'Position of the toast.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { Label, Switch } 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 SwitchDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A default switch."
+        code={`<div className="flex items-center space-x-2">
+  <Switch id="airplane-mode" />
+  <Label htmlFor="airplane-mode">Airplane Mode</Label>
+</div>`}
+      >
+        <div className="flex items-center space-x-2">
+          <Switch id="airplane-mode" />
+          <Label htmlFor="airplane-mode">Airplane Mode</Label>
+        </div>
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Switch component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/switch"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Switch
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">Switch (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultChecked',
+              type: 'boolean',
+              description: 'The value of the switch when initially rendered.',
+            },
+            {
+              name: 'checked',
+              type: 'boolean',
+              description: 'The controlled value of the switch.',
+            },
+            {
+              name: 'onCheckedChange',
+              type: '(checked: boolean) => void',
+              description: 'Event handler called when the value changes.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the switch.',
+            },
+            {
+              name: 'required',
+              type: 'boolean',
+              description:
+                'When true, indicates that the user must toggle the switch before the owning form can be submitted.',
+            },
+            {
+              name: 'name',
+              type: 'string',
+              description: 'The name of the switch. Submitted with its owning form as part of a name/value pair.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              defaultValue: '"on"',
+              description: 'The value given as data when submitted with a name.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,148 @@
+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 {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@gv-tech/ui-web';
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' as string;
+
+const invoices = [
+  {
+    invoice: 'INV001',
+    paymentStatus: 'Paid',
+    totalAmount: '$250.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV002',
+    paymentStatus: 'Pending',
+    totalAmount: '$150.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV003',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$350.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV004',
+    paymentStatus: 'Paid',
+    totalAmount: '$450.00',
+    paymentMethod: 'Credit Card',
+  },
+  {
+    invoice: 'INV005',
+    paymentStatus: 'Paid',
+    totalAmount: '$550.00',
+    paymentMethod: 'PayPal',
+  },
+  {
+    invoice: 'INV006',
+    paymentStatus: 'Pending',
+    totalAmount: '$200.00',
+    paymentMethod: 'Bank Transfer',
+  },
+  {
+    invoice: 'INV007',
+    paymentStatus: 'Unpaid',
+    totalAmount: '$300.00',
+    paymentMethod: 'Credit Card',
+  },
+];
+
+export function TableDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A list of recent invoices."
+        code={`<Table>
+  <TableCaption>A list of your recent invoices.</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead className="w-[100px]">Invoice</TableHead>
+      <TableHead>Status</TableHead>
+      <TableHead>Method</TableHead>
+      <TableHead className="text-right">Amount</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    {invoices.map((invoice) => (
+      <TableRow key={invoice.invoice}>
+        <TableCell className="font-medium">{invoice.invoice}</TableCell>
+        <TableCell>{invoice.paymentStatus}</TableCell>
+        <TableCell>{invoice.paymentMethod}</TableCell>
+        <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+      </TableRow>
+    ))}
+  </TableBody>
+  <TableFooter>
+    <TableRow>
+      <TableCell colSpan={3}>Total</TableCell>
+      <TableCell className="text-right">$2,500.00</TableCell>
+    </TableRow>
+  </TableFooter>
+</Table>`}
+      >
+        <Table>
+          <TableCaption>A list of your recent invoices.</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Invoice</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead>Method</TableHead>
+              <TableHead className="text-right">Amount</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {invoices.map((invoice) => (
+              <TableRow key={invoice.invoice}>
+                <TableCell className="font-medium">{invoice.invoice}</TableCell>
+                <TableCell>{invoice.paymentStatus}</TableCell>
+                <TableCell>{invoice.paymentMethod}</TableCell>
+                <TableCell className="text-right">{invoice.totalAmount}</TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={3}>Total</TableCell>
+              <TableCell className="text-right">$2,500.00</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">The Table component uses standard HTML table elements.</p>
+
+        <h4 className="text-lg font-medium mt-6">Table</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional class names to apply.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,241 @@
+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 {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@gv-tech/ui-web';
+
+// @ts-ignore
+
+const isNative = false as boolean;
+
+// @ts-ignore
+
+const platform = 'web' as string;
+
+export function TabsDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A default tabs component."
+        code={`<Tabs defaultValue="account" className="w-[400px]">
+  <TabsList className="grid w-full grid-cols-2">
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">
+    <Card>
+      <CardHeader>
+        <CardTitle>Account</CardTitle>
+        <CardDescription>
+          Make changes to your account here. Click save when you're done.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <div className="space-y-1">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" defaultValue="Pedro Duarte" />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="username">Username</Label>
+          <Input id="username" defaultValue="@peduarte" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button>Save changes</Button>
+      </CardFooter>
+    </Card>
+  </TabsContent>
+  <TabsContent value="password">
+    <Card>
+      <CardHeader>
+        <CardTitle>Password</CardTitle>
+        <CardDescription>
+          Change your password here. After saving, you'll be logged out.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <div className="space-y-1">
+          <Label htmlFor="current">Current password</Label>
+          <Input id="current" type="password" />
+        </div>
+        <div className="space-y-1">
+          <Label htmlFor="new">New password</Label>
+          <Input id="new" type="password" />
+        </div>
+      </CardContent>
+      <CardFooter>
+        <Button>Save password</Button>
+      </CardFooter>
+    </Card>
+  </TabsContent>
+</Tabs>`}
+      >
+        <Tabs defaultValue="account" className="w-[400px]">
+          <TabsList className="grid w-full grid-cols-2">
+            <TabsTrigger value="account">Account</TabsTrigger>
+            <TabsTrigger value="password">Password</TabsTrigger>
+          </TabsList>
+          <TabsContent value="account">
+            <Card>
+              <CardHeader>
+                <CardTitle>Account</CardTitle>
+                <CardDescription>Make changes to your account here. Click save when you're done.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                <div className="space-y-1">
+                  <Label htmlFor="name">Name</Label>
+                  <Input id="name" defaultValue="Pedro Duarte" />
+                </div>
+
+                <div className="space-y-1">
+                  <Label htmlFor="username">Username</Label>
+                  <Input id="username" defaultValue="@peduarte" />
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button>Save changes</Button>
+              </CardFooter>
+            </Card>
+          </TabsContent>
+          <TabsContent value="password">
+            <Card>
+              <CardHeader>
+                <CardTitle>Password</CardTitle>
+                <CardDescription>Change your password here. After saving, you'll be logged out.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-2">
+                <div className="space-y-1">
+                  <Label htmlFor="current">Current password</Label>
+                  <Input id="current" type="password" />
+                </div>
+
+                <div className="space-y-1">
+                  <Label htmlFor="new">New password</Label>
+                  <Input id="new" type="password" />
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button>Save password</Button>
+              </CardFooter>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Tabs component is built on top of{' '}
+          <a
+            href="https://www.radix-ui.com/primitives/docs/components/tabs"
+            className="underline"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Radix UI Tabs
+          </a>
+          .
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">Tabs (Root)</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'defaultValue',
+              type: 'string',
+              description: 'The value of the tab that should be active when initially rendered.',
+            },
+            {
+              name: 'value',
+              type: 'string',
+              description: 'The controlled value of the tab to activate.',
+            },
+            {
+              name: 'onValueChange',
+              type: '(value: string) => void',
+              description: 'Event handler called when the value changes.',
+            },
+            {
+              name: 'orientation',
+              type: '"horizontal" | "vertical"',
+              defaultValue: '"horizontal"',
+              description: 'The orientation of the tabs.',
+            },
+            {
+              name: 'dir',
+              type: '"ltr" | "rtl"',
+              description: 'The reading direction of the tabs.',
+            },
+            {
+              name: 'activationMode',
+              type: '"automatic" | "manual"',
+              defaultValue: '"automatic"',
+              description:
+                'When automatic, tabs are activated when receiving focus. When manual, tabs are activated when clicked.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">TabsList</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'loop',
+              type: 'boolean',
+              defaultValue: 'true',
+              description: 'When true, keyboard navigation will loop from last tab to first, and vice versa.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">TabsTrigger</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'string',
+              required: true,
+              description: 'A unique value for the trigger.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'When true, prevents the user from interacting with the tab.',
+            },
+          ]}
+        />
+
+        <h4 className="text-lg font-medium mt-6">TabsContent</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'value',
+              type: 'string',
+              required: true,
+              description: 'A unique value for the content.',
+            },
+            {
+              name: 'forceMount',
+              type: 'boolean',
+              description: 'Used to force mounting when more control is needed.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+import { Label, Textarea } 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 TextareaDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Default"
+        description="A default textarea."
+        code={`<div className="grid w-full gap-1.5">
+  <Label htmlFor="message">Your message</Label>
+  <Textarea placeholder="Type your message here." id="message" />
+</div>`}
+      >
+        <div className="grid w-full gap-1.5">
+          <Label htmlFor="message">Your message</Label>
+          <Textarea placeholder="Type your message here." id="message" />
+        </div>
+      </ComponentShowcase>
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <p className="text-sm text-muted-foreground">
+          The Textarea component accepts all standard HTML textarea attributes.
+        </p>
+
+        <h4 className="text-lg font-medium mt-6">Textarea</h4>
+        <PropsTable
+          props={[
+            {
+              name: 'className',
+              type: 'string',
+              description: 'Additional class names to apply.',
+            },
+            {
+              name: 'placeholder',
+              type: 'string',
+              description: 'The placeholder object.',
+            },
+            {
+              name: 'disabled',
+              type: 'boolean',
+              description: 'Whether the textarea is disabled.',
+            },
+            {
+              name: 'required',
+              type: 'boolean',
+              description: 'Whether the textarea is required.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}