@gv-tech/design-system 2.4.0 → 2.5.0

package/apps/native-playground/src/global.css

@@ -0,0 +1,49 @@
+@tailwind components;
+@tailwind utilities;
+
+@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%;
+  }
+}

package/apps/native-playground/tailwind.config.js

@@ -0,0 +1,49 @@
+const { theme: designTokens } = require('../../packages/design-tokens/src/theme');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  // NOTE: NativeWind v4 uses the same content pattern as Tailwind
+  content: ['./src/**/*.{js,ts,jsx,tsx}', '../../packages/ui-native/src/**/*.{js,ts,jsx,tsx}'],
+  presets: [require('nativewind/preset')],
+  theme: {
+    extend: {
+      colors: {
+        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))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+      },
+      borderRadius: designTokens.light.radius,
+    },
+  },
+  plugins: [],
+};

package/apps/native-playground/tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node", "nativewind/types"]
+  },
+  "files": ["../../node_modules/@nx/expo/typings/svg.d.ts"],
+  "exclude": [
+    "**/*.test.ts",
+    "**/*.spec.ts",
+    "**/*.test.tsx",
+    "**/*.spec.tsx",
+    "**/*.test.js",
+    "**/*.spec.js",
+    "**/*.test.jsx",
+    "**/*.spec.jsx",
+    "src/test-setup.ts",
+    "jest.config.ts",
+    "jest.config.cts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts"
+  ],
+  "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}

package/apps/native-playground/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react-native",
+    "lib": ["dom", "esnext"],
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    "declaration": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}

package/apps/native-playground/tsconfig.spec.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "moduleResolution": "node10",
+    "jsx": "react-jsx",
+    "types": ["jest", "node"]
+  },
+  "files": ["src/test-setup.ts"],
+  "include": [
+    "jest.config.ts",
+    "jest.config.cts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}

package/apps/playground-web/CHANGELOG.md

@@ -0,0 +1,8 @@
+# Changelog
+
+## [0.1.0](https://github.com/Garcia-Ventures/gvtech-design/compare/playground-web-v0.0.1...playground-web-v0.1.0) (2026-02-20)
+
+
+### Features
+
+* **universal:** pivot to monorepo architecture and stabilize react native support ([#63](https://github.com/Garcia-Ventures/gvtech-design/issues/63)) ([3458938](https://github.com/Garcia-Ventures/gvtech-design/commit/3458938c17bdfc7a7f5eea0053b7bf1786a571fa))

package/apps/playground-web/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "playground-web",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview",
+    "typecheck": "yarn tsc --noEmit"
+  },
+  "dependencies": {
+    "@gv-tech/design-tokens": "workspace:*",
+    "@gv-tech/ui-core": "workspace:*",
+    "@gv-tech/ui-web": "workspace:*",
+    "lucide-react": "^0.563.0",
+    "next-themes": "^0.4.6",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-router-dom": "^7.13.0",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.7"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react-swc": "^4.2.3",
+    "autoprefixer": "^10.4.18",
+    "postcss": "^8.5.6",
+    "tailwindcss": "4.1.18",
+    "typescript": "^5.9.3",
+    "vite": "7.3.1"
+  }
+}

package/apps/playground-web/src/App.tsx

@@ -0,0 +1,179 @@
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Button,
+  ScrollArea,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SonnerToaster,
+  ThemeProvider,
+  ThemeToggle,
+  Toaster,
+  TooltipProvider,
+} from '@gv-tech/ui-web';
+import { Loader2, Menu } from 'lucide-react';
+import * as React from 'react';
+import { BrowserRouter, Link, Navigate, Route, Routes, useLocation, useNavigate } from 'react-router-dom';
+import { CombinedDocsLayout, DocSearch, DocSearchProvider, ErrorBoundary, Footer, Sidebar } from './components/docs';
+import { docConfig } from './config/docs';
+
+import { docRoutes } from './routes/doc-routes';
+
+// Lazy load docs pages
+import { PackageManagerProvider } from './hooks/usePackageManager';
+
+const ColorTokensDocs = React.lazy(() => import('./pages').then((m) => ({ default: m.ColorTokensDocs })));
+const GettingStartedPage = React.lazy(() => import('./pages').then((m) => ({ default: m.GettingStartedPage })));
+const InstallationPage = React.lazy(() => import('./pages').then((m) => ({ default: m.InstallationPage })));
+
+function PageLoader() {
+  return (
+    <div className="flex h-[400px] w-full items-center justify-center">
+      <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+    </div>
+  );
+}
+
+function DocumentationLayout() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(false);
+
+  // Find current doc based on URL path
+  const pathParts = location.pathname.split('/');
+  const docSlug = pathParts[2] || 'getting-started';
+
+  const currentDoc = React.useMemo(() => {
+    for (const category of docConfig) {
+      const found = category.items.find((item) => item.href === docSlug);
+      if (found) return found;
+    }
+    return null;
+  }, [docSlug]);
+
+  React.useEffect(() => {
+    if (!location.pathname.startsWith('/docs')) {
+      navigate('/docs/getting-started', { replace: true });
+    }
+  }, [location.pathname, navigate]);
+
+  return (
+    <DocSearchProvider>
+      <PackageManagerProvider>
+        <div className="flex h-screen bg-background text-foreground">
+          {/* Desktop Sidebar */}
+          <div className="hidden lg:flex h-full shrink-0">
+            <Sidebar />
+          </div>
+
+          <div className="flex-1 flex flex-col overflow-hidden">
+            <header className="h-14 border-b flex items-center justify-between px-4 md:px-6 shrink-0 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-50">
+              <div className="flex items-center gap-2 min-w-0">
+                {/* Mobile Menu Toggle */}
+                <Sheet open={isSidebarOpen} onOpenChange={setIsSidebarOpen}>
+                  <SheetTrigger asChild>
+                    <Button variant="ghost" size="icon" className="lg:hidden shrink-0">
+                      <Menu className="h-5 w-5" />
+                      <span className="sr-only">Toggle menu</span>
+                    </Button>
+                  </SheetTrigger>
+                  <SheetContent side="left" className="p-0 w-72">
+                    <SheetHeader className="sr-only">
+                      <SheetTitle>Navigation Menu</SheetTitle>
+                      <SheetDescription>
+                        Explore the components and documentation for GV Tech Design System.
+                      </SheetDescription>
+                    </SheetHeader>
+                    <Sidebar className="w-full border-none" onLinkClick={() => setIsSidebarOpen(false)} />
+                  </SheetContent>
+                </Sheet>
+
+                <Breadcrumb className="hidden md:flex min-w-0">
+                  <BreadcrumbList>
+                    <BreadcrumbItem>
+                      <BreadcrumbLink asChild>
+                        <Link to="/docs/getting-started">Docs</Link>
+                      </BreadcrumbLink>
+                    </BreadcrumbItem>
+                    <BreadcrumbSeparator />
+                    <BreadcrumbItem>
+                      <BreadcrumbPage>{currentDoc?.title || 'Documentation'}</BreadcrumbPage>
+                    </BreadcrumbItem>
+                  </BreadcrumbList>
+                </Breadcrumb>
+              </div>
+
+              <div className="flex items-center gap-2 md:gap-4 shrink-0">
+                <DocSearch variant="compact" />
+                <ThemeToggle variant="ternary" />
+              </div>
+            </header>
+            <ScrollArea className="flex-1">
+              <main className="flex-1 flex flex-col p-4 md:p-8 max-w-4xl mx-auto w-full">
+                <div className="flex-1">
+                  <ErrorBoundary>
+                    <React.Suspense fallback={<PageLoader />}>
+                      <Routes>
+                        {/* Getting Started */}
+                        <Route path="getting-started" element={<GettingStartedPage />} />
+                        <Route path="installation" element={<InstallationPage />} />
+                        <Route path="theming" element={<ColorTokensDocs />} />
+                        <Route path="color-tokens" element={<Navigate to="/docs/theming" replace />} />
+
+                        {/* Dynamic Component Routes */}
+                        {docRoutes.map((route) => (
+                          <Route
+                            key={route.path}
+                            path={route.path}
+                            element={
+                              <CombinedDocsLayout
+                                title={route.title}
+                                description={route.description}
+                                web={route.web ? <route.web /> : undefined}
+                                native={route.native ? <route.native /> : undefined}
+                              />
+                            }
+                          />
+                        ))}
+
+                        <Route path="*" element={<Navigate to="/docs/getting-started" replace />} />
+                      </Routes>
+                    </React.Suspense>
+                  </ErrorBoundary>
+                </div>
+                <Footer />
+              </main>
+            </ScrollArea>
+          </div>
+        </div>
+      </PackageManagerProvider>
+    </DocSearchProvider>
+  );
+}
+
+function App() {
+  return (
+    <ThemeProvider>
+      <TooltipProvider>
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<Navigate to="/docs/getting-started" replace />} />
+            <Route path="/docs/*" element={<DocumentationLayout />} />
+          </Routes>
+        </BrowserRouter>
+        <Toaster />
+        <SonnerToaster />
+      </TooltipProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;

package/apps/playground-web/src/components/docs/CodeBlock.tsx

@@ -0,0 +1,34 @@
+import { cn } from '@gv-tech/ui-web';
+import { Check, Copy } from 'lucide-react';
+import * as React from 'react';
+
+interface CodeBlockProps {
+  code: string;
+  language?: string;
+  className?: string;
+}
+
+export function CodeBlock({ code, language = 'tsx', className }: CodeBlockProps) {
+  const [copied, setCopied] = React.useState(false);
+
+  const copyToClipboard = async () => {
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={cn('relative group', className)}>
+      <pre className="bg-zinc-950 text-zinc-100 rounded-lg p-4 overflow-x-auto text-sm font-mono">
+        <code className={`language-${language}`}>{code.trim()}</code>
+      </pre>
+      <button
+        onClick={copyToClipboard}
+        className="absolute top-3 right-3 p-2 rounded-md bg-zinc-800 text-zinc-400 hover:text-zinc-100 hover:bg-zinc-700 transition-colors opacity-0 group-hover:opacity-100"
+        aria-label="Copy code"
+      >
+        {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+      </button>
+    </div>
+  );
+}

package/apps/playground-web/src/components/docs/CombinedDocsLayout.tsx

@@ -0,0 +1,103 @@
+import { useDocMetadata } from '@/hooks/useDocMetadata';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@gv-tech/ui-web';
+import { Info } from 'lucide-react';
+import React from 'react';
+
+interface CombinedDocsLayoutProps {
+  title?: string;
+  description?: string;
+  web?: React.ReactNode;
+  native?: React.ReactNode;
+}
+
+export const PlatformContext = React.createContext<'web' | 'native'>('web');
+
+export function CombinedDocsLayout({ title, description, web, native }: CombinedDocsLayoutProps) {
+  useDocMetadata({
+    title: title || 'Documentation',
+    description: description || 'GV Tech Design System documentation.',
+  });
+  // Use localStorage to persist platform preference
+  const [activeTab, setActiveTab] = React.useState<'web' | 'native'>(() => {
+    // Check if there is a saved preference
+    const saved = typeof window !== 'undefined' ? localStorage.getItem('gv-docs-platform') : null;
+    if (saved === 'web' || saved === 'native') {
+      // Ensure the saved preference is actually available for this component
+      if (saved === 'web' && web) return 'web';
+      if (saved === 'native' && native) return 'native';
+    }
+    // Default to web if available, otherwise native
+    return web ? 'web' : 'native';
+  });
+
+  // When navigating between pages, React Router reuses this component without
+  // remounting, so the useState initializer won't re-run. Sync activeTab
+  // whenever the set of available platforms changes to avoid showing a blank tab.
+  React.useEffect(() => {
+    if (activeTab === 'native' && !native) {
+      setActiveTab(web ? 'web' : 'native');
+    } else if (activeTab === 'web' && !web && native) {
+      setActiveTab('native');
+    }
+  }, [web, native, activeTab]);
+
+  const onTabChange = (value: string) => {
+    const newTab = value as 'web' | 'native';
+    setActiveTab(newTab);
+    localStorage.setItem('gv-docs-platform', newTab);
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">{title}</h1>
+        {description && <p className="text-base md:text-lg text-muted-foreground">{description}</p>}
+      </div>
+
+      <Tabs value={activeTab} onValueChange={onTabChange} className="w-full">
+        <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
+          {web && (
+            <TabsTrigger
+              value="web"
+              className="relative h-9 rounded-none border-b-2 border-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              Web
+            </TabsTrigger>
+          )}
+          {native && (
+            <TabsTrigger
+              value="native"
+              className="relative h-9 rounded-none border-b-2 border-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              Native
+            </TabsTrigger>
+          )}
+        </TabsList>
+        {web && (
+          <TabsContent value="web" className="mt-8 md:mt-10 border-none p-0 outline-none">
+            <PlatformContext.Provider value="web">
+              <div className="space-y-10 md:space-y-12">{web}</div>
+            </PlatformContext.Provider>
+          </TabsContent>
+        )}
+        {native && (
+          <TabsContent value="native" className="mt-8 md:mt-10 border-none p-0 outline-none">
+            <PlatformContext.Provider value="native">
+              <div className="rounded-lg bg-blue-500/10 border border-blue-500/20 p-4 mb-6 flex gap-3 text-blue-500">
+                <Info className="h-5 w-5 shrink-0" />
+                <div className="text-sm">
+                  <p className="font-semibold">Native Implementation</p>
+                  <p className="opacity-90">
+                    These components are built for React Native environments. Previews below show implementation details
+                    and code samples.
+                  </p>
+                </div>
+              </div>
+              <div className="space-y-10 md:space-y-12">{native}</div>
+            </PlatformContext.Provider>
+          </TabsContent>
+        )}
+      </Tabs>
+    </div>
+  );
+}

package/apps/playground-web/src/components/docs/ComponentShowcase.tsx

@@ -0,0 +1,96 @@
+import {
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  cn,
+} from '@gv-tech/ui-web';
+import { Info } from 'lucide-react';
+import * as React from 'react';
+import { CodeBlock } from './CodeBlock';
+import { PlatformContext } from './CombinedDocsLayout';
+
+interface ComponentShowcaseProps {
+  title: string;
+  description?: string;
+  code: string;
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export function ComponentShowcase({ title, description, code, children, className }: ComponentShowcaseProps) {
+  const platform = React.useContext(PlatformContext);
+  const isNative = platform === 'native';
+
+  return (
+    <Card className={cn('overflow-hidden', className)}>
+      <CardHeader>
+        <CardTitle className="text-lg">{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent className="p-0">
+        <Tabs defaultValue={isNative && !children ? 'code' : 'preview'} className="w-full">
+          <div className="border-b px-4 md:px-6">
+            <TabsList className="h-10 bg-transparent p-0">
+              <TabsTrigger
+                value="preview"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+              >
+                Preview
+              </TabsTrigger>
+              <TabsTrigger
+                value="code"
+                className="rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent"
+              >
+                Code
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <TabsContent value="preview" className="p-4 md:p-6 mt-0">
+            {isNative && !children ? (
+              <Alert variant="info" className="bg-muted/50 border-none shadow-none">
+                <Info className="h-4 w-4" />
+                <AlertTitle>Native Preview Unavailable</AlertTitle>
+                <AlertDescription>
+                  This is a React Native component. Interactive previews are currently only available for web
+                  components. Please switch to the <strong>Code</strong> tab to see the implementation.
+                </AlertDescription>
+              </Alert>
+            ) : (
+              <div className="flex flex-wrap gap-4 items-center overflow-x-auto">{children}</div>
+            )}
+          </TabsContent>
+          <TabsContent value="code" className="mt-0">
+            <CodeBlock code={code} className="rounded-none border-0" />
+          </TabsContent>
+        </Tabs>
+      </CardContent>
+    </Card>
+  );
+}
+
+interface ComponentSectionProps {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}
+
+export function ComponentSection({ title, description, children }: ComponentSectionProps) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <h1 className="text-2xl md:text-3xl font-bold tracking-tight">{title}</h1>
+        {description && <p className="text-base md:text-lg text-muted-foreground">{description}</p>}
+      </div>
+      <div className="space-y-6">{children}</div>
+    </div>
+  );
+}