@gv-tech/design-system 0.9.0 → 1.1.0

package/src/pages/GettingStarted.tsx

@@ -0,0 +1,251 @@
+import { CodeBlock } from '@/components/docs/CodeBlock';
+
+export function GettingStartedPage() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-2">
+        <h1 className="text-4xl font-bold tracking-tight">GV Tech Design System</h1>
+        <p className="text-xl text-muted-foreground">
+          A comprehensive React component library built with shadcn/ui and Tailwind CSS.
+        </p>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-3">
+        <div className="rounded-lg border p-4 space-y-2">
+          <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center">
+            <span className="text-2xl">🎨</span>
+          </div>
+          <h3 className="font-semibold">Consistent Design</h3>
+          <p className="text-sm text-muted-foreground">Built on a unified design language with customizable themes.</p>
+        </div>
+        <div className="rounded-lg border p-4 space-y-2">
+          <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center">
+            <span className="text-2xl">⚡</span>
+          </div>
+          <h3 className="font-semibold">Fully Typed</h3>
+          <p className="text-sm text-muted-foreground">
+            Complete TypeScript support with comprehensive type definitions.
+          </p>
+        </div>
+        <div className="rounded-lg border p-4 space-y-2">
+          <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center">
+            <span className="text-2xl">♿</span>
+          </div>
+          <h3 className="font-semibold">Accessible</h3>
+          <p className="text-sm text-muted-foreground">WAI-ARIA compliant components with keyboard navigation.</p>
+        </div>
+      </div>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">Quick Example</h2>
+        <CodeBlock
+          code={`import { Button, Card, CardContent, CardHeader, CardTitle } from '@gv-tech/design-system';
+
+function MyComponent() {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Welcome</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <Button>Get Started</Button>
+      </CardContent>
+    </Card>
+  );
+}`}
+        />
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">Features</h2>
+        <ul className="space-y-2 text-muted-foreground">
+          <li className="flex items-center gap-2">
+            <span className="text-green-500">✓</span> 46+ ready-to-use components
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-green-500">✓</span> Dark and light mode support
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-green-500">✓</span> Fully customizable with CSS variables
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-green-500">✓</span> Tree-shakeable for optimal bundle size
+          </li>
+          <li className="flex items-center gap-2">
+            <span className="text-green-500">✓</span> React 18/19 compatible
+          </li>
+        </ul>
+      </section>
+    </div>
+  );
+}
+
+export function InstallationPage() {
+  return (
+    <div className="space-y-8">
+      <div className="space-y-2">
+        <h1 className="text-3xl font-bold tracking-tight">Installation</h1>
+        <p className="text-lg text-muted-foreground">
+          Get started with the GV Tech Design System in your React project.
+        </p>
+      </div>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">Install the package</h2>
+        <p className="text-muted-foreground">Install the design system package using your preferred package manager:</p>
+        <div className="space-y-2">
+          <p className="text-sm font-medium">npm</p>
+          <CodeBlock code="npm install @gv-tech/design-system" language="bash" />
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm font-medium">yarn</p>
+          <CodeBlock code="yarn add @gv-tech/design-system" language="bash" />
+        </div>
+        <div className="space-y-2">
+          <p className="text-sm font-medium">pnpm</p>
+          <CodeBlock code="pnpm add @gv-tech/design-system" language="bash" />
+        </div>
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">Peer Dependencies</h2>
+        <p className="text-muted-foreground">Make sure you have the required peer dependencies installed:</p>
+        <CodeBlock
+          code={`{
+  "react": "^18 || ^19",
+  "react-dom": "^18 || ^19"
+}`}
+          language="json"
+        />
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">Configure Tailwind CSS</h2>
+        <p className="text-muted-foreground">
+          The design system uses Tailwind CSS for styling. Add the following to your{' '}
+          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">tailwind.config.js</code>:
+        </p>
+        <CodeBlock
+          code={`/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: 'class',
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@gv-tech/design-system/dist/**/*.js',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+}`}
+        />
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">Add CSS Variables</h2>
+        <p className="text-muted-foreground">Add the following CSS variables to your global stylesheet:</p>
+        <CodeBlock
+          code={`@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}`}
+          language="css"
+        />
+      </section>
+
+      <section className="space-y-4">
+        <h2 className="text-2xl font-semibold tracking-tight">Start Using Components</h2>
+        <p className="text-muted-foreground">Now you can import and use components from the design system:</p>
+        <CodeBlock
+          code={`import { Button } from '@gv-tech/design-system';
+
+export default function App() {
+  return (
+    <Button variant="default">
+      Click me
+    </Button>
+  );
+}`}
+        />
+      </section>
+    </div>
+  );
+}

package/src/pages/components/AccordionDocs.tsx

@@ -0,0 +1,55 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
+
+export function AccordionDocs() {
+  return (
+    <ComponentSection
+      title="Accordion"
+      description="A vertically stacked set of interactive headings that each reveal a section of content."
+    >
+      <ComponentShowcase
+        title="Default"
+        description="A basic accordion component."
+        code={`<Accordion type="single" collapsible className="w-full">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>Is it accessible?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It adheres to the WAI-ARIA design pattern.
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Is it styled?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It comes with default styles.
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-3">
+    <AccordionTrigger>Is it animated?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It's animated by default.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>`}
+      >
+        <Accordion type="single" collapsible className="w-full max-w-md">
+          <AccordionItem value="item-1">
+            <AccordionTrigger>Is it accessible?</AccordionTrigger>
+            <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-2">
+            <AccordionTrigger>Is it styled?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It comes with default styles that matches the other components&apos; aesthetic.
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="item-3">
+            <AccordionTrigger>Is it animated?</AccordionTrigger>
+            <AccordionContent>
+              Yes. It&apos;s animated by default, but you can disable it if you prefer.
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/AlertDialogDocs.tsx

@@ -0,0 +1,63 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+import { Button } from '@/components/ui/button';
+
+export function AlertDialogDocs() {
+  return (
+    <ComponentSection
+      title="Alert Dialog"
+      description="A modal dialog that interrupts the user with important content and expects a response."
+    >
+      <ComponentShowcase
+        title="Default"
+        description="An alert dialog for confirming destructive actions."
+        code={`<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Button variant="destructive">Delete Account</Button>
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+      <AlertDialogDescription>
+        This action cannot be undone. This will permanently delete your account.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <AlertDialogCancel>Cancel</AlertDialogCancel>
+      <AlertDialogAction>Continue</AlertDialogAction>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>`}
+      >
+        <AlertDialog>
+          <AlertDialogTrigger asChild>
+            <Button variant="destructive">Delete Account</Button>
+          </AlertDialogTrigger>
+          <AlertDialogContent>
+            <AlertDialogHeader>
+              <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+              <AlertDialogDescription>
+                This action cannot be undone. This will permanently delete your account and remove your data from our
+                servers.
+              </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+              <AlertDialogCancel>Cancel</AlertDialogCancel>
+              <AlertDialogAction>Continue</AlertDialogAction>
+            </AlertDialogFooter>
+          </AlertDialogContent>
+        </AlertDialog>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/AlertDocs.tsx

@@ -0,0 +1,45 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { AlertCircle, Terminal } from 'lucide-react';
+
+export function AlertDocs() {
+  return (
+    <ComponentSection title="Alert" description="Displays a callout for user attention.">
+      <ComponentShowcase
+        title="Default"
+        description="The default alert style."
+        code={`<Alert>
+  <Terminal className="h-4 w-4" />
+  <AlertTitle>Heads up!</AlertTitle>
+  <AlertDescription>
+    You can add components to your app using the cli.
+  </AlertDescription>
+</Alert>`}
+      >
+        <Alert className="max-w-lg">
+          <Terminal className="h-4 w-4" />
+          <AlertTitle>Heads up!</AlertTitle>
+          <AlertDescription>You can add components to your app using the cli.</AlertDescription>
+        </Alert>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Destructive"
+        description="Use the destructive variant for error messages."
+        code={`<Alert variant="destructive">
+  <AlertCircle className="h-4 w-4" />
+  <AlertTitle>Error</AlertTitle>
+  <AlertDescription>
+    Your session has expired. Please log in again.
+  </AlertDescription>
+</Alert>`}
+      >
+        <Alert variant="destructive" className="max-w-lg">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>Your session has expired. Please log in again.</AlertDescription>
+        </Alert>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/AspectRatioDocs.tsx

@@ -0,0 +1,64 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { AspectRatio } from '@/components/ui/aspect-ratio';
+
+export function AspectRatioDocs() {
+  return (
+    <ComponentSection title="Aspect Ratio" description="Displays content within a desired ratio.">
+      <ComponentShowcase
+        title="16:9"
+        description="A 16:9 aspect ratio container."
+        code={`<div className="w-[450px]">
+  <AspectRatio ratio={16 / 9} className="bg-muted">
+    <img
+      src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800"
+      alt="Photo by Drew Beamer"
+      className="h-full w-full rounded-md object-cover"
+    />
+  </AspectRatio>
+</div>`}
+      >
+        <div className="w-[450px]">
+          <AspectRatio ratio={16 / 9} className="bg-muted">
+            <img
+              src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800"
+              alt="Photo by Drew Beamer"
+              className="h-full w-full rounded-md object-cover"
+            />
+          </AspectRatio>
+        </div>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Square (1:1)"
+        description="A square aspect ratio container."
+        code={`<div className="w-[200px]">
+  <AspectRatio ratio={1 / 1} className="bg-muted rounded-md flex items-center justify-center">
+    <span className="text-muted-foreground">1:1</span>
+  </AspectRatio>
+</div>`}
+      >
+        <div className="w-[200px]">
+          <AspectRatio ratio={1 / 1} className="bg-muted rounded-md flex items-center justify-center">
+            <span className="text-muted-foreground">1:1</span>
+          </AspectRatio>
+        </div>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="4:3"
+        description="A 4:3 aspect ratio container."
+        code={`<div className="w-[300px]">
+  <AspectRatio ratio={4 / 3} className="bg-muted rounded-md flex items-center justify-center">
+    <span className="text-muted-foreground">4:3</span>
+  </AspectRatio>
+</div>`}
+      >
+        <div className="w-[300px]">
+          <AspectRatio ratio={4 / 3} className="bg-muted rounded-md flex items-center justify-center">
+            <span className="text-muted-foreground">4:3</span>
+          </AspectRatio>
+        </div>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/AvatarDocs.tsx

@@ -0,0 +1,34 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+
+export function AvatarDocs() {
+  return (
+    <ComponentSection title="Avatar" description="An image element with a fallback for representing the user.">
+      <ComponentShowcase
+        title="Default"
+        description="An avatar with an image."
+        code={`<Avatar>
+  <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+  <AvatarFallback>CN</AvatarFallback>
+</Avatar>`}
+      >
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>CN</AvatarFallback>
+        </Avatar>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Fallback"
+        description="When no image is available, the fallback is displayed."
+        code={`<Avatar>
+  <AvatarFallback>JD</AvatarFallback>
+</Avatar>`}
+      >
+        <Avatar>
+          <AvatarFallback>JD</AvatarFallback>
+        </Avatar>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/BadgeDocs.tsx

@@ -0,0 +1,36 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { Badge } from '@/components/ui/badge';
+
+export function BadgeDocs() {
+  return (
+    <ComponentSection title="Badge" description="Displays a badge or a component that looks like a badge.">
+      <ComponentShowcase
+        title="Variants"
+        description="Badges come in 4 different variants."
+        code={`<Badge>Default</Badge>
+<Badge variant="secondary">Secondary</Badge>
+<Badge variant="destructive">Destructive</Badge>
+<Badge variant="outline">Outline</Badge>`}
+      >
+        <Badge>Default</Badge>
+        <Badge variant="secondary">Secondary</Badge>
+        <Badge variant="destructive">Destructive</Badge>
+        <Badge variant="outline">Outline</Badge>
+      </ComponentShowcase>
+
+      <ComponentShowcase
+        title="Use Cases"
+        description="Common use cases for badges."
+        code={`<Badge>New</Badge>
+<Badge variant="secondary">Beta</Badge>
+<Badge variant="destructive">Error</Badge>
+<Badge variant="outline">v1.0.0</Badge>`}
+      >
+        <Badge>New</Badge>
+        <Badge variant="secondary">Beta</Badge>
+        <Badge variant="destructive">Error</Badge>
+        <Badge variant="outline">v1.0.0</Badge>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}

package/src/pages/components/BreadcrumbDocs.tsx

@@ -0,0 +1,54 @@
+import { ComponentSection, ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/components/ui/breadcrumb';
+
+export function BreadcrumbDocs() {
+  return (
+    <ComponentSection
+      title="Breadcrumb"
+      description="Displays the path to the current resource using a hierarchy of links."
+    >
+      <ComponentShowcase
+        title="Default"
+        description="A basic breadcrumb navigation."
+        code={`<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/">Home</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>`}
+      >
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/">Home</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbLink href="/components">Components</BreadcrumbLink>
+            </BreadcrumbItem>
+            <BreadcrumbSeparator />
+            <BreadcrumbItem>
+              <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
+            </BreadcrumbItem>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </ComponentShowcase>
+    </ComponentSection>
+  );
+}