@gv-tech/design-system 0.9.0 → 1.1.0

package/src/pages/components/ButtonDocs.tsx

@@ -0,0 +1,77 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Button } from '@/components/ui/button';
+import { ChevronRight, Loader2, Mail } from 'lucide-react';
+
+export function ButtonDocs() {
+  return (
+    <ComponentSection title="Button" description="Displays a button or a component that looks like a button.">
+      <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>
+    </ComponentSection>
+  );
+}

package/src/pages/components/CalendarDocs.tsx

@@ -0,0 +1,29 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Calendar } from '@/components/ui/calendar';
+import * as React from 'react';
+
+export function CalendarDocs() {
+  const [date, setDate] = React.useState<Date | undefined>(new Date());
+
+  return (
+    <ComponentSection
+      title="Calendar"
+      description="A date picker component with support for single and range selection."
+    >
+      <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>
+    </ComponentSection>
+  );
+}

package/src/pages/components/CardDocs.tsx

@@ -0,0 +1,81 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+
+export function CardDocs() {
+  return (
+    <ComponentSection title="Card" description="Displays a card with header, content, and footer sections.">
+      <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>
+            <p>Card Content goes here.</p>
+          </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>
+    </ComponentSection>
+  );
+}

package/src/pages/components/CarouselDocs.tsx

@@ -0,0 +1,132 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Card, CardContent } from '@/components/ui/card';
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
+
+export function CarouselDocs() {
+  return (
+    <ComponentSection
+      title="Carousel"
+      description="A carousel with motion and swipe gestures built on top of Embla Carousel."
+    >
+      <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>
+    </ComponentSection>
+  );
+}

package/src/pages/components/ChartDocs.tsx

@@ -0,0 +1,115 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { TrendingUp } from 'lucide-react';
+
+export function ChartDocs() {
+  return (
+    <ComponentSection title="Chart" description="Beautiful charts built using Recharts and styled with CSS variables.">
+      <ComponentShowcase
+        title="Overview"
+        description="Charts are built using Recharts. The chart components use CSS variables for theming."
+        code={`// Install recharts
+npm install recharts
+
+// Import and use
+import { Bar, BarChart, XAxis, YAxis, ResponsiveContainer } from "recharts";
+
+const data = [
+  { name: "Jan", total: 1200 },
+  { name: "Feb", total: 2100 },
+  { name: "Mar", total: 800 },
+  { name: "Apr", total: 1600 },
+  { name: "May", total: 900 },
+  { name: "Jun", total: 1700 },
+];
+
+<ResponsiveContainer width="100%" height={350}>
+  <BarChart data={data}>
+    <XAxis dataKey="name" />
+    <YAxis />
+    <Bar dataKey="total" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
+  </BarChart>
+</ResponsiveContainer>`}
+      >
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle>Chart Example</CardTitle>
+            <CardDescription>A preview of chart styling</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                <TrendingUp className="h-4 w-4" />
+                <span>Charts use CSS variables for consistent theming</span>
+              </div>
+              <div className="grid grid-cols-6 gap-2 h-32 items-end">
+                {[40, 70, 30, 60, 35, 65].map((height, i) => (
+                  <div
+                    key={i}
+                    className="bg-primary rounded-t-sm transition-all hover:bg-primary/80"
+                    style={{ height: `${height}%` }}
+                  />
+                ))}
+              </div>
+              <div className="grid grid-cols-6 gap-2 text-xs text-center text-muted-foreground">
+                {['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'].map((month) => (
+                  <span key={month}>{month}</span>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="CSS Variables"
+        description="Use CSS variables to theme your charts."
+        code={`/* In your CSS */
+:root {
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+}
+
+.dark {
+  --chart-1: 220 70% 50%;
+  --chart-2: 160 60% 45%;
+  --chart-3: 30 80% 55%;
+  --chart-4: 280 65% 60%;
+  --chart-5: 340 75% 55%;
+}
+
+/* Use in your chart */
+<Bar fill="hsl(var(--chart-1))" />
+<Line stroke="hsl(var(--chart-2))" />`}
+      >
+        <div className="flex gap-4 items-center">
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 rounded bg-[hsl(12,76%,61%)]" />
+              <span className="text-sm">--chart-1</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 rounded bg-[hsl(173,58%,39%)]" />
+              <span className="text-sm">--chart-2</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 rounded bg-[hsl(197,37%,24%)]" />
+              <span className="text-sm">--chart-3</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 rounded bg-[hsl(43,74%,66%)]" />
+              <span className="text-sm">--chart-4</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <div className="w-4 h-4 rounded bg-[hsl(27,87%,67%)]" />
+              <span className="text-sm">--chart-5</span>
+            </div>
+          </div>
+        </div>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/CheckboxDocs.tsx

@@ -0,0 +1,49 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+export function CheckboxDocs() {
+  return (
+    <ComponentSection
+      title="Checkbox"
+      description="A control that allows the user to toggle between checked and not checked."
+    >
+      <ComponentShowcase title="Default" description="A basic checkbox." code={`<Checkbox id="terms" />`}>
+        <div className="flex items-center space-x-2">
+          <Checkbox id="terms" />
+          <Label htmlFor="terms">Accept terms and conditions</Label>
+        </div>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="With Label"
+        description="A checkbox with a label."
+        code={`<div className="flex items-center space-x-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">Accept terms and conditions</Label>
+</div>`}
+      >
+        <div className="flex items-center space-x-2">
+          <Checkbox id="terms2" />
+          <Label htmlFor="terms2">Accept terms and conditions</Label>
+        </div>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Disabled"
+        description="A disabled checkbox."
+        code={`<div className="flex items-center space-x-2">
+  <Checkbox id="terms-disabled" disabled />
+  <Label htmlFor="terms-disabled">Accept terms and conditions</Label>
+</div>`}
+      >
+        <div className="flex items-center space-x-2">
+          <Checkbox id="terms-disabled" disabled />
+          <Label htmlFor="terms-disabled" className="text-muted-foreground">
+            Accept terms and conditions
+          </Label>
+        </div>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/CollapsibleDocs.tsx

@@ -0,0 +1,52 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Button } from '@/components/ui/button';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
+import { ChevronsUpDown } from 'lucide-react';
+import * as React from 'react';
+
+export function CollapsibleDocs() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <ComponentSection title="Collapsible" description="An interactive component which expands/collapses a panel.">
+      <ComponentShowcase
+        title="Default"
+        description="A collapsible panel with animation."
+        code={`const [isOpen, setIsOpen] = React.useState(false);
+
+<Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
+  <div className="flex items-center justify-between space-x-4 px-4">
+    <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
+    <CollapsibleTrigger asChild>
+      <Button variant="ghost" size="sm" className="w-9 p-0">
+        <ChevronsUpDown className="h-4 w-4" />
+      </Button>
+    </CollapsibleTrigger>
+  </div>
+  <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
+  <CollapsibleContent className="space-y-2">
+    <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
+    <div className="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
+  </CollapsibleContent>
+</Collapsible>`}
+      >
+        <Collapsible open={isOpen} onOpenChange={setIsOpen} className="w-[350px] space-y-2">
+          <div className="flex items-center justify-between space-x-4 px-4">
+            <h4 className="text-sm font-semibold">@peduarte starred 3 repositories</h4>
+            <CollapsibleTrigger asChild>
+              <Button variant="ghost" size="sm" className="w-9 p-0">
+                <ChevronsUpDown className="h-4 w-4" />
+                <span className="sr-only">Toggle</span>
+              </Button>
+            </CollapsibleTrigger>
+          </div>
+          <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
+          <CollapsibleContent className="space-y-2">
+            <div className="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
+            <div className="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
+          </CollapsibleContent>
+        </Collapsible>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/CommandDocs.tsx

@@ -0,0 +1,100 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from '@/components/ui/command';
+import { Calculator, Calendar, CreditCard, Settings, Smile, User } from 'lucide-react';
+
+export function CommandDocs() {
+  return (
+    <ComponentSection title="Command" description="A fast, composable command menu for React.">
+      <ComponentShowcase
+        title="Default"
+        description="A command palette with search and groups."
+        code={`<Command className="rounded-lg border shadow-md md:min-w-[450px]">
+  <CommandInput placeholder="Type a command or search..." />
+  <CommandList>
+    <CommandEmpty>No results found.</CommandEmpty>
+    <CommandGroup heading="Suggestions">
+      <CommandItem>
+        <Calendar className="mr-2 h-4 w-4" />
+        <span>Calendar</span>
+      </CommandItem>
+      <CommandItem>
+        <Smile className="mr-2 h-4 w-4" />
+        <span>Search Emoji</span>
+      </CommandItem>
+      <CommandItem>
+        <Calculator className="mr-2 h-4 w-4" />
+        <span>Calculator</span>
+      </CommandItem>
+    </CommandGroup>
+    <CommandSeparator />
+    <CommandGroup heading="Settings">
+      <CommandItem>
+        <User className="mr-2 h-4 w-4" />
+        <span>Profile</span>
+        <CommandShortcut>⌘P</CommandShortcut>
+      </CommandItem>
+      <CommandItem>
+        <CreditCard className="mr-2 h-4 w-4" />
+        <span>Billing</span>
+        <CommandShortcut>⌘B</CommandShortcut>
+      </CommandItem>
+      <CommandItem>
+        <Settings className="mr-2 h-4 w-4" />
+        <span>Settings</span>
+        <CommandShortcut>⌘S</CommandShortcut>
+      </CommandItem>
+    </CommandGroup>
+  </CommandList>
+</Command>`}
+      >
+        <Command className="rounded-lg border shadow-md md:min-w-[450px]">
+          <CommandInput placeholder="Type a command or search..." />
+          <CommandList>
+            <CommandEmpty>No results found.</CommandEmpty>
+            <CommandGroup heading="Suggestions">
+              <CommandItem>
+                <Calendar className="mr-2 h-4 w-4" />
+                <span>Calendar</span>
+              </CommandItem>
+              <CommandItem>
+                <Smile className="mr-2 h-4 w-4" />
+                <span>Search Emoji</span>
+              </CommandItem>
+              <CommandItem>
+                <Calculator className="mr-2 h-4 w-4" />
+                <span>Calculator</span>
+              </CommandItem>
+            </CommandGroup>
+            <CommandSeparator />
+            <CommandGroup heading="Settings">
+              <CommandItem>
+                <User className="mr-2 h-4 w-4" />
+                <span>Profile</span>
+                <CommandShortcut>⌘P</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <CreditCard className="mr-2 h-4 w-4" />
+                <span>Billing</span>
+                <CommandShortcut>⌘B</CommandShortcut>
+              </CommandItem>
+              <CommandItem>
+                <Settings className="mr-2 h-4 w-4" />
+                <span>Settings</span>
+                <CommandShortcut>⌘S</CommandShortcut>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}