@gv-tech/design-system 2.5.0 → 2.5.2

package/apps/playground-web/src/pages/shared/GettingStarted.tsx

@@ -1,413 +0,0 @@
-import { CodeBlock } from '@/components/docs/CodeBlock';
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from '@gv-tech/ui-web';
-import { AlertCircle, Info } from 'lucide-react';
-
-import { useDocMetadata } from '@/hooks/useDocMetadata';
-import { usePackageManager, type PackageManager } from '@/hooks/usePackageManager';
-
-export function GettingStartedPage() {
-  useDocMetadata({
-    title: 'Getting Started',
-    description: 'Learn how to get started with the GV Tech Design System.',
-  });
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-3xl md:text-4xl font-bold tracking-tight text-center md:text-left">
-          GV Tech Design System
-        </h1>
-        <p className="text-lg md:text-xl text-muted-foreground text-center md:text-left">
-          A comprehensive React component library built with shadcn/ui and Tailwind CSS.
-        </p>
-      </div>
-
-      <div className="grid gap-4 md:grid-cols-3">
-        <Card>
-          <CardHeader className="p-4 pb-2">
-            <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center mb-2">
-              <span className="text-2xl">🎨</span>
-            </div>
-            <CardTitle className="text-lg">Consistent Design</CardTitle>
-          </CardHeader>
-          <CardContent className="p-4 pt-0">
-            <p className="text-sm text-muted-foreground">
-              Built on a unified design language with customizable themes.
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="p-4 pb-2">
-            <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center mb-2">
-              <span className="text-2xl">⚡</span>
-            </div>
-            <CardTitle className="text-lg">Fully Typed</CardTitle>
-          </CardHeader>
-          <CardContent className="p-4 pt-0">
-            <p className="text-sm text-muted-foreground">
-              Complete TypeScript support with comprehensive type definitions.
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="p-4 pb-2">
-            <div className="h-10 w-10 rounded-md bg-primary/10 flex items-center justify-center mb-2">
-              <span className="text-2xl">♿</span>
-            </div>
-            <CardTitle className="text-lg">Accessible</CardTitle>
-          </CardHeader>
-          <CardContent className="p-4 pt-0">
-            <p className="text-sm text-muted-foreground">WAI-ARIA compliant components with keyboard navigation.</p>
-          </CardContent>
-        </Card>
-      </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">Platform Support</h2>
-        <div className="grid gap-4 md:grid-cols-2">
-          <Card>
-            <CardHeader className="p-4 pb-2">
-              <CardTitle className="text-lg">Web</CardTitle>
-            </CardHeader>
-            <CardContent className="p-4 pt-0">
-              <p className="text-sm text-muted-foreground">Optimized for React with Radix UI and Tailwind CSS 4.0.</p>
-            </CardContent>
-          </Card>
-          <Card>
-            <CardHeader className="p-4 pb-2">
-              <CardTitle className="text-lg">React Native</CardTitle>
-            </CardHeader>
-            <CardContent className="p-4 pt-0">
-              <p className="text-sm text-muted-foreground">
-                Built with NativeWind for a consistent styling experience on iOS and Android.
-              </p>
-            </CardContent>
-          </Card>
-        </div>
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Documentation Note</h2>
-        <Alert variant="info">
-          <Info className="h-4 w-4" />
-          <AlertTitle>Native Previews</AlertTitle>
-          <AlertDescription>
-            On this documentation site, <strong>React Native</strong> components are shown as code snippets only. Live
-            rendering of native components on the web is disabled to ensure stability. To view native components in
-            action, run the project on an iOS or Android simulator.
-          </AlertDescription>
-        </Alert>
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Universal Components</h2>
-        <div className="flex items-start gap-4 p-4 rounded-lg border bg-muted/30">
-          <div className="mt-1 shrink-0">
-            <div className="h-3 w-3 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]" />
-          </div>
-          <div className="space-y-1">
-            <p className="font-medium text-sm">Universal Support Indicator</p>
-            <p className="text-sm text-muted-foreground">
-              Components marked with this green dot in the sidebar have both <strong>Web</strong> and{' '}
-              <strong>Native</strong> implementations. You can use them seamlessly across platforms with a unified API.
-            </p>
-          </div>
-        </div>
-      </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> Universal support (Web + React Native) for core 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 (Web) and Tailwind (Native)
-          </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() {
-  useDocMetadata({
-    title: 'Installation',
-    description: 'Install the GV Tech Design System in your project.',
-  });
-  const { packageManager, setPackageManager } = usePackageManager();
-
-  return (
-    <div className="space-y-8">
-      <div className="space-y-2">
-        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">Installation</h1>
-        <p className="text-base md: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>
-        <Tabs value={packageManager} onValueChange={(v) => setPackageManager(v as PackageManager)} className="w-full">
-          <TabsList>
-            <TabsTrigger value="npm">npm</TabsTrigger>
-            <TabsTrigger value="yarn">yarn</TabsTrigger>
-            <TabsTrigger value="pnpm">pnpm</TabsTrigger>
-          </TabsList>
-          <TabsContent value="npm" className="mt-4">
-            <CodeBlock code="npm install @gv-tech/design-system" language="bash" />
-          </TabsContent>
-          <TabsContent value="yarn" className="mt-4">
-            <CodeBlock code="yarn add @gv-tech/design-system" language="bash" />
-          </TabsContent>
-          <TabsContent value="pnpm" className="mt-4">
-            <CodeBlock code="pnpm add @gv-tech/design-system" language="bash" />
-          </TabsContent>
-        </Tabs>
-      </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",
-  "next-themes": "^0.4.0"
-}`}
-          language="json"
-        />
-        <p className="text-sm text-muted-foreground">
-          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">next-themes</code> is required for the design
-          system's <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code>,{' '}
-          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeToggle</code>, and{' '}
-          <code className="text-sm bg-muted px-1.5 py-0.5 rounded">useTheme</code> to work. Install it alongside the
-          design system:
-        </p>
-        <Tabs value={packageManager} onValueChange={(v) => setPackageManager(v as PackageManager)} className="w-full">
-          <TabsList>
-            <TabsTrigger value="npm">npm</TabsTrigger>
-            <TabsTrigger value="yarn">yarn</TabsTrigger>
-            <TabsTrigger value="pnpm">pnpm</TabsTrigger>
-          </TabsList>
-          <TabsContent value="npm" className="mt-4">
-            <CodeBlock code="npm install next-themes" language="bash" />
-          </TabsContent>
-          <TabsContent value="yarn" className="mt-4">
-            <CodeBlock code="yarn add next-themes" language="bash" />
-          </TabsContent>
-          <TabsContent value="pnpm" className="mt-4">
-            <CodeBlock code="pnpm add next-themes" language="bash" />
-          </TabsContent>
-        </Tabs>
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Configure Tailwind CSS (v4.0)</h2>
-        <p className="text-muted-foreground">
-          The design system is optimized for Tailwind CSS 4.0. In your global CSS file, import Tailwind and add the
-          theme variables:
-        </p>
-        <CodeBlock
-          language="css"
-          code={`@import "tailwindcss";
-
-@theme {
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 4px);
-
-  /* Map design system tokens to Tailwind colors */
-  --color-background: hsl(var(--background));
-  --color-foreground: hsl(var(--foreground));
-  --color-primary: hsl(var(--primary));
-  --color-primary-foreground: hsl(var(--primary-foreground));
-  --color-accent: hsl(var(--accent));
-  --color-accent-foreground: hsl(var(--accent-foreground));
-  --color-border: hsl(var(--border));
-}`}
-        />
-      </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">React Native Setup</h2>
-        <p className="text-muted-foreground">
-          For React Native projects, you'll need to configure NativeWind and ensure correct platform resolution.
-        </p>
-        <Alert variant="warning">
-          <AlertCircle className="h-4 w-4" />
-          <AlertTitle>Important Native Resolution</AlertTitle>
-          <AlertDescription>
-            The design system uses <code className="bg-background px-1 rounded">.native.tsx</code> extensions. Ensure
-            your Metro bundler is configured to prefer these extensions.
-          </AlertDescription>
-        </Alert>
-        <Tabs value={packageManager} onValueChange={(v) => setPackageManager(v as PackageManager)} className="w-full">
-          <TabsList>
-            <TabsTrigger value="npm">npm</TabsTrigger>
-            <TabsTrigger value="yarn">yarn</TabsTrigger>
-            <TabsTrigger value="pnpm">pnpm</TabsTrigger>
-          </TabsList>
-          <TabsContent value="npm" className="mt-4 text-sm">
-            <CodeBlock code="npm install @gv-tech/design-system lucide-react-native nativewind" language="bash" />
-          </TabsContent>
-          <TabsContent value="yarn" className="mt-4 text-sm">
-            <CodeBlock code="yarn add @gv-tech/design-system lucide-react-native nativewind" language="bash" />
-          </TabsContent>
-          <TabsContent value="pnpm" className="mt-4 text-sm">
-            <CodeBlock code="pnpm add @gv-tech/design-system lucide-react-native nativewind" language="bash" />
-          </TabsContent>
-        </Tabs>
-      </section>
-
-      <section className="space-y-4">
-        <h2 className="text-2xl font-semibold tracking-tight">Start Using Components</h2>
-        <p className="text-muted-foreground">
-          Wrap your app with the <code className="text-sm bg-muted px-1.5 py-0.5 rounded">ThemeProvider</code> to enable
-          consistent styling and theme switching.
-        </p>
-        <Tabs defaultValue="web" className="w-full">
-          <TabsList>
-            <TabsTrigger value="web">Web</TabsTrigger>
-            <TabsTrigger value="native">React Native</TabsTrigger>
-          </TabsList>
-          <TabsContent value="web" className="mt-4">
-            <CodeBlock
-              code={`import { ThemeProvider, ThemeToggle, Button } from '@gv-tech/design-system';
-import '@gv-tech/design-system/style.css';
-
-export default function App() {
-  return (
-    <ThemeProvider>
-      <div className="p-8">
-        <ThemeToggle />
-        <Button className="mt-4">Welcome to GV Tech</Button>
-      </div>
-    </ThemeProvider>
-  );
-}`}
-            />
-          </TabsContent>
-          <TabsContent value="native" className="mt-4">
-            <CodeBlock
-              code={`import { ThemeProvider, Button, Input, Label, Text } from '@gv-tech/design-system';
-import { View } from 'react-native';
-
-export default function MyScreen() {
-  return (
-    <ThemeProvider>
-      <View className="flex-1 items-center justify-center p-6 bg-background">
-        <Label className="mb-2">Your Name</Label>
-        <Input placeholder="Enter your name" className="mb-4" />
-        <Button onPress={() => alert('Hello!')}>
-          <Text>Submit</Text>
-        </Button>
-      </View>
-    </ThemeProvider>
-  );
-}`}
-            />
-          </TabsContent>
-        </Tabs>
-      </section>
-    </div>
-  );
-}

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

@@ -1,194 +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 {
-  Accordion as WebAccordion,
-  AccordionContent as WebAccordionContent,
-  AccordionItem as WebAccordionItem,
-  AccordionTrigger as WebAccordionTrigger,
-} from '@gv-tech/ui-web';
-
-// @ts-ignore
-
-const isNative = false as boolean;
-
-// @ts-ignore
-
-const platform = 'web' as string;
-
-export function AccordionDocs() {
-  const Accordion = WebAccordion;
-  const AccordionContent = WebAccordionContent;
-  const AccordionItem = WebAccordionItem;
-  const AccordionTrigger = WebAccordionTrigger;
-
-  return (
-    <>
-      {null}
-      <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>
-
-      <div className="space-y-4">
-        <h3 className="text-xl font-semibold">Props</h3>
-
-        <h4 className="text-lg font-medium mt-6">Accordion (Root)</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'type',
-              type: '"single" | "multiple"',
-              description: 'Determines whether one or multiple items can be opened at the same time.',
-              required: true,
-            },
-            {
-              name: 'collapsible',
-              type: 'boolean',
-              defaultValue: 'false check',
-              description: 'When type is "single", allows closing content when clicking trigger for an open item.',
-            },
-            {
-              name: 'value',
-              type: 'string | string[]',
-              description: 'The controlled value of the item(s) to expand.',
-            },
-            {
-              name: 'defaultValue',
-              type: 'string | string[]',
-              description: 'The default value of the item(s) to expand.',
-            },
-            {
-              name: 'onValueChange',
-              type: '(value: string | string[]) => void',
-              description: 'Event handler called when the expanded state of an item changes.',
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'When true, prevents the user from interacting with the accordion.',
-            },
-            {
-              name: 'dir',
-              type: '"ltr" | "rtl"',
-              defaultValue: '"ltr"',
-              description: 'The reading direction of the accordion.',
-            },
-            {
-              name: 'orientation',
-              type: '"vertical" | "horizontal"',
-              defaultValue: '"vertical"',
-              description: 'The orientation of the accordion.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AccordionItem</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'value',
-              type: 'string',
-              description: 'A unique value for the item.',
-              required: true,
-            },
-            {
-              name: 'disabled',
-              type: 'boolean',
-              defaultValue: 'false',
-              description: 'When true, prevents the user from interacting with the item.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AccordionTrigger</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'children',
-              type: 'ReactNode',
-              description: 'The content of the trigger.',
-            },
-            ...(!isNative
-              ? [
-                  {
-                    name: 'asChild',
-                    type: 'boolean',
-                    defaultValue: 'false',
-                    description:
-                      'Change the default rendered element for the one passed as a child, merging their props and behavior.',
-                  },
-                ]
-              : []),
-            {
-              name: 'className',
-              type: 'string',
-              description: isNative ? 'Tailwind (NativeWind) classes.' : 'Additional CSS classes to apply.',
-            },
-          ]}
-        />
-
-        <h4 className="text-lg font-medium mt-6">AccordionContent</h4>
-        <PropsTable
-          props={[
-            {
-              name: 'children',
-              type: 'ReactNode',
-              description: 'The content of the item.',
-            },
-            ...(!isNative
-              ? [
-                  {
-                    name: 'forceMount',
-                    type: 'boolean',
-                    description:
-                      'Used to force mounting when more control is needed. Useful when controlling animation with React libraries.',
-                  },
-                ]
-              : []),
-          ]}
-        />
-      </div>
-    </>
-  );
-}