@gv-tech/design-system 2.5.0 → 2.5.2

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

@@ -1,129 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Button } from '@gv-tech/ui-web';
-import { ChevronRight, Loader2, Mail } from 'lucide-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 ButtonDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Variants"
-        description="The button comes in 6 different variants."
-        code={`<Button variant="default">Default</Button>
-<Button variant="secondary">Secondary</Button>
-<Button variant="destructive">Destructive</Button>
-<Button variant="outline">Outline</Button>
-<Button variant="ghost">Ghost</Button>
-<Button variant="link">Link</Button>`}
-      >
-        <Button variant="default">Default</Button>
-        <Button variant="secondary">Secondary</Button>
-        <Button variant="destructive">Destructive</Button>
-        <Button variant="outline">Outline</Button>
-        <Button variant="ghost">Ghost</Button>
-        <Button variant="link">Link</Button>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Sizes"
-        description="Buttons come in default, small, large, and icon sizes."
-        code={`<Button size="default">Default</Button>
-<Button size="sm">Small</Button>
-<Button size="lg">Large</Button>
-<Button size="icon"><ChevronRight className="h-4 w-4" /></Button>`}
-      >
-        <Button size="default">Default</Button>
-        <Button size="sm">Small</Button>
-        <Button size="lg">Large</Button>
-        <Button size="icon">
-          <ChevronRight className="h-4 w-4" />
-        </Button>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="With Icon"
-        description="You can add icons to buttons for additional context."
-        code={`<Button>
-  <Mail className="mr-2 h-4 w-4" /> Login with Email
-</Button>`}
-      >
-        <Button>
-          <Mail className="mr-2 h-4 w-4" /> Login with Email
-        </Button>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Loading State"
-        description="Use the disabled attribute with a spinner for loading states."
-        code={`<Button disabled>
-  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-  Please wait
-</Button>`}
-      >
-        <Button disabled>
-          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-          Please wait
-        </Button>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Disabled"
-        description="Buttons can be disabled to prevent interaction."
-        code={`<Button disabled>Disabled</Button>`}
-      >
-        <Button disabled>Disabled</Button>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <PropsTable
-          props={[
-            {
-              name: 'variant',
-              type: '"default" | "destructive" | "outline" | "secondary" | "ghost" | "link"',
-              defaultValue: '"default"',
-              description: 'The visual style of the button.',
-            },
-            {
-              name: 'size',
-              type: '"default" | "sm" | "lg" | "icon"',
-              defaultValue: '"default"',
-              description: 'The size of the button.',
-            },
-            {
-              name: 'asChild',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Whether to render as a child component (delegation).',
-            },
-            {
-              name: 'onClick',
-              type: 'MouseEventHandler',
-              description: 'Web click event handler.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional CSS classes to apply.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'Whether the button is disabled.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,78 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { Calendar } from '@gv-tech/ui-web';
-/* eslint-disable @typescript-eslint/ban-ts-comment, @typescript-eslint/no-unused-vars */
-import * as React from 'react';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function CalendarDocs() {
-  const [date, setDate] = React.useState<Date | undefined>(new Date());
-
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A basic calendar for date selection."
-        code={`const [date, setDate] = React.useState<Date | undefined>(new Date());
-
-<Calendar
-  mode="single"
-  selected={date}
-  onSelect={setDate}
-  className="rounded-md border"
-/>`}
-      >
-        <Calendar mode="single" selected={date} onSelect={setDate} className="rounded-md border" />
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Calendar component is built on top of{' '}
-          <a href="https://react-day-picker.js.org/" className="underline" target="_blank" rel="noreferrer">
-            React Day Picker
-          </a>
-          .
-        </p>
-        <PropsTable
-          props={[
-            {
-              name: 'mode',
-              type: '"single" | "multiple" | "range" | "default"',
-              defaultValue: '"default"',
-              description: 'The selection mode of the calendar.',
-            },
-            {
-              name: 'selected',
-              type: 'Date | Date[] | DateRange | undefined',
-              description: 'The selected date(s).',
-            },
-            {
-              name: 'onSelect',
-              type: '(date: any) => void',
-              description: 'Event handler called when a date is selected.',
-            },
-            {
-              name: 'showOutsideDays',
-              type: 'boolean',
-              defaultValue: 'true',
-              description: 'Whether to show days from the previous and next months.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional CSS classes to apply.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,115 +0,0 @@
-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,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function CardDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Basic Card"
-        description="A simple card with header and content."
-        code={`<Card className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Card Title</CardTitle>
-    <CardDescription>Card Description</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <p>Card Content goes here.</p>
-  </CardContent>
-</Card>`}
-      >
-        <Card className="w-[350px]">
-          <CardHeader>
-            <CardTitle>Card Title</CardTitle>
-            <CardDescription>Card Description</CardDescription>
-          </CardHeader>
-          <CardContent>Card Content goes here.</CardContent>
-        </Card>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Card with Footer"
-        description="Cards can include a footer for actions."
-        code={`<Card className="w-[350px]">
-  <CardHeader>
-    <CardTitle>Create Project</CardTitle>
-    <CardDescription>Deploy your new project in one-click.</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <form>
-      <div className="grid w-full items-center gap-4">
-        <div className="flex flex-col space-y-1.5">
-          <Label htmlFor="name">Name</Label>
-          <Input id="name" placeholder="Name of your project" />
-        </div>
-      </div>
-    </form>
-  </CardContent>
-  <CardFooter className="flex justify-between">
-    <Button variant="outline">Cancel</Button>
-    <Button>Deploy</Button>
-  </CardFooter>
-</Card>`}
-      >
-        <Card className="w-[350px]">
-          <CardHeader>
-            <CardTitle>Create Project</CardTitle>
-            <CardDescription>Deploy your new project in one-click.</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <form>
-              <div className="grid w-full items-center gap-4">
-                <div className="flex flex-col space-y-1.5">
-                  <Label htmlFor="name">Name</Label>
-                  <Input id="name" placeholder="Name of your project" />
-                </div>
-              </div>
-            </form>
-          </CardContent>
-          <CardFooter className={'flex justify-between'}>
-            <Button variant="outline">Cancel</Button>
-            <Button>Deploy</Button>
-          </CardFooter>
-        </Card>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <h4 className="text-lg font-medium mt-6">Card (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'className',
-              type: 'string',
-              description: isNative ? 'Tailwind (NativeWind) classes.' : 'Additional CSS classes.',
-            },
-          ]}
-        />
-
-        <p className="text-sm text-muted-foreground mt-4">
-          CardHeader, CardTitle, CardDescription, CardContent, and CardFooter also accept <code>className</code> and
-          other standard {'HTML attributes'}.
-        </p>
-      </div>
-    </>
-  );
-}

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

@@ -1,176 +0,0 @@
-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 {
-  Card,
-  CardContent,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function CarouselDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Default"
-        description="A basic carousel with numbered cards."
-        code={`<Carousel className="w-full max-w-xs">
-  <CarouselContent>
-    {Array.from({ length: 5 }).map((_, index) => (
-      <CarouselItem key={index}>
-        <div className="p-1">
-          <Card>
-            <CardContent className="flex aspect-square items-center justify-center p-6">
-              <span className="text-4xl font-semibold">{index + 1}</span>
-            </CardContent>
-          </Card>
-        </div>
-      </CarouselItem>
-    ))}
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>`}
-      >
-        <Carousel className="w-full max-w-xs">
-          <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-              <CarouselItem key={index}>
-                <div className="p-1">
-                  <Card>
-                    <CardContent className="flex aspect-square items-center justify-center p-6">
-                      <span className="text-4xl font-semibold">{index + 1}</span>
-                    </CardContent>
-                  </Card>
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
-        </Carousel>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Partial Visible Items"
-        description="A carousel showing partial items using basis classes."
-        code={`<Carousel className="w-full max-w-sm" opts={{ align: "start" }}>
-  <CarouselContent>
-    {Array.from({ length: 5 }).map((_, index) => (
-      <CarouselItem key={index} className="basis-1/3">
-        <div className="p-1">
-          <Card>
-            <CardContent className="flex aspect-square items-center justify-center p-6">
-              <span className="text-2xl font-semibold">{index + 1}</span>
-            </CardContent>
-          </Card>
-        </div>
-      </CarouselItem>
-    ))}
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>`}
-      >
-        <Carousel className="w-full max-w-sm" opts={{ align: 'start' }}>
-          <CarouselContent>
-            {Array.from({ length: 5 }).map((_, index) => (
-              <CarouselItem key={index} className="basis-1/3">
-                <div className="p-1">
-                  <Card>
-                    <CardContent className="flex aspect-square items-center justify-center p-6">
-                      <span className="text-2xl font-semibold">{index + 1}</span>
-                    </CardContent>
-                  </Card>
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
-        </Carousel>
-      </ComponentShowcase>
-
-      <ComponentShowcase
-        title="Orientation"
-        description="A vertically oriented carousel."
-        code={`<Carousel orientation="vertical" className="w-full max-w-xs" opts={{ align: "start" }}>
-  <CarouselContent className="-mt-1 h-[200px]">
-    {Array.from({ length: 5 }).map((_, index) => (
-      <CarouselItem key={index} className="pt-1 md:basis-1/2">
-        <div className="p-1">
-          <Card>
-            <CardContent className="flex items-center justify-center p-6">
-              <span className="text-3xl font-semibold">{index + 1}</span>
-            </CardContent>
-          </Card>
-        </div>
-      </CarouselItem>
-    ))}
-  </CarouselContent>
-  <CarouselPrevious />
-  <CarouselNext />
-</Carousel>`}
-      >
-        <Carousel orientation="vertical" className="w-full max-w-xs" opts={{ align: 'start' }}>
-          <CarouselContent className="-mt-1 h-[200px]">
-            {Array.from({ length: 5 }).map((_, index) => (
-              <CarouselItem key={index} className="pt-1 md:basis-1/2">
-                <div className="p-1">
-                  <Card>
-                    <CardContent className="flex items-center justify-center p-6">
-                      <span className="text-3xl font-semibold">{index + 1}</span>
-                    </CardContent>
-                  </Card>
-                </div>
-              </CarouselItem>
-            ))}
-          </CarouselContent>
-          <CarouselPrevious />
-          <CarouselNext />
-        </Carousel>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <h4 className="text-lg font-medium mt-6">Carousel (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'opts',
-              type: 'CarouselOptions',
-              description: 'Options passed to the Embla Carousel instance.',
-            },
-            {
-              name: 'plugins',
-              type: 'CarouselPlugin',
-              description: 'Plugins passed to the Embla Carousel instance.',
-            },
-            {
-              name: 'orientation',
-              type: '"horizontal" | "vertical"',
-              defaultValue: '"horizontal"',
-              description: 'The orientation of the carousel.',
-            },
-            {
-              name: 'setApi',
-              type: '(api: CarouselApi) => void',
-              description: 'Callback to get the Embla Carousel API instance.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}

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

@@ -1,151 +0,0 @@
-import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
-import { PropsTable } from '@/components/docs/PropsTable';
-import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@gv-tech/ui-web';
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
-/* 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;
-
-const chartData = [
-  { month: 'January', desktop: 186, mobile: 80 },
-  { month: 'February', desktop: 305, mobile: 200 },
-  { month: 'March', desktop: 237, mobile: 120 },
-  { month: 'April', desktop: 73, mobile: 190 },
-  { month: 'May', desktop: 209, mobile: 130 },
-  { month: 'June', desktop: 214, mobile: 140 },
-];
-
-const chartConfig = {
-  desktop: {
-    label: 'Desktop',
-    color: '#2563eb',
-  },
-  mobile: {
-    label: 'Mobile',
-    color: '#60a5fa',
-  },
-};
-
-export function ChartDocs() {
-  return (
-    <>
-      <ComponentShowcase
-        title="Bar Chart"
-        description="A simple bar chart."
-        code={`<ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-  <BarChart accessibilityLayer data={chartData}>
-    <CartesianGrid vertical={false} />
-    <XAxis
-      dataKey="month"
-      tickLine={false}
-      tickMargin={10}
-      axisLine={false}
-      tickFormatter={(value) => value.slice(0, 3)}
-    />
-    <ChartTooltip content={<ChartTooltipContent />} />
-    <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-    <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-  </BarChart>
-</ChartContainer>`}
-      >
-        <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
-          <BarChart accessibilityLayer data={chartData}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip content={<ChartTooltipContent />} />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-          </BarChart>
-        </ChartContainer>
-      </ComponentShowcase>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-        <p className="text-sm text-muted-foreground">
-          The Chart component is a wrapper around{' '}
-          <a href="https://recharts.org/" className="underline" target="_blank" rel="noreferrer">
-            Recharts
-          </a>
-          .
-        </p>
-
-        <h4 className="text-lg font-medium mt-6">ChartContainer</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'config',
-              type: 'ChartConfig',
-              required: true,
-              description: 'The configuration for the chart themes and labels.',
-            },
-            {
-              name: 'className',
-              type: 'string',
-              description: 'Additional class names to apply.',
-            },
-            {
-              name: 'children',
-              type: 'ReactNode',
-              description: 'The Recharts component to render.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">ChartTooltip</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'content',
-              type: 'ReactNode',
-              description: 'The content to render in the tooltip.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">ChartTooltipContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'hideLabel',
-              type: 'boolean',
-              description: 'Whether to hide the label in the tooltip.',
-            },
-            {
-              name: 'hideIndicator',
-              type: 'boolean',
-              description: 'Whether to hide the indicator in the tooltip.',
-            },
-            {
-              name: 'indicator',
-              type: '"line" | "dot" | "dashed"',
-              defaultValue: '"dot"',
-              description: 'The style of the indicator.',
-            },
-            {
-              name: 'nameKey',
-              type: 'string',
-              description: 'The key to use for the name in the tooltip.',
-            },
-            {
-              name: 'labelKey',
-              type: 'string',
-              description: 'The key to use for the label in the tooltip.',
-            },
-          ]}
-        />
-      </div>
-    </>
-  );
-}