@gv-tech/design-system 2.4.0 → 2.5.0

package/apps/playground-web/src/config/docs.ts

@@ -0,0 +1,293 @@
+export type DocPlatform = 'web' | 'native';
+
+export interface DocItem {
+  title: string;
+  href: string; // URL path segment (e.g., 'button')
+  platforms: DocPlatform[];
+  description?: string;
+  component?: React.ComponentType<{ platform: DocPlatform }>; // The docs component
+}
+
+export interface DocCategory {
+  title: string;
+  items: DocItem[];
+}
+
+// We'll import the actual components in App.tsx to keep the config lightweight if we want
+// but for now, to make the loop work, we might need to reference them differently
+// or just export the structure and map it in App.tsx.
+// Let's stick to a pure config structure and map in App.tsx to avoid circular deps if configs grow.
+// Actually, mapping in App.tsx is safer.
+
+export const docConfig: DocCategory[] = [
+  {
+    title: 'Getting Started',
+    items: [
+      {
+        title: 'Introduction',
+        href: 'getting-started',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Installation',
+        href: 'installation',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Theming',
+        href: 'theming',
+        platforms: ['web', 'native'],
+      },
+    ],
+  },
+  {
+    title: 'Layout',
+    items: [
+      {
+        title: 'Aspect Ratio',
+        href: 'aspect-ratio',
+        platforms: ['web'],
+      },
+      {
+        title: 'Resizable',
+        href: 'resizable',
+        platforms: ['web'],
+      },
+      {
+        title: 'Scroll Area',
+        href: 'scroll-area',
+        platforms: ['web'],
+      },
+      {
+        title: 'Separator',
+        href: 'separator',
+        platforms: ['web', 'native'],
+      },
+    ],
+  },
+  {
+    title: 'Forms',
+    items: [
+      {
+        title: 'Button',
+        href: 'button',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Checkbox',
+        href: 'checkbox',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Form',
+        href: 'form',
+        platforms: ['web'],
+      },
+      {
+        title: 'Input',
+        href: 'input',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Label',
+        href: 'label',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Radio Group',
+        href: 'radio-group',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Select',
+        href: 'select',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Slider',
+        href: 'slider',
+        platforms: ['web'],
+      },
+      {
+        title: 'Switch',
+        href: 'switch',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Textarea',
+        href: 'textarea',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Toggle',
+        href: 'toggle',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Toggle Group',
+        href: 'toggle-group',
+        platforms: ['web', 'native'],
+      },
+    ],
+  },
+  {
+    title: 'Data Display',
+    items: [
+      {
+        title: 'Accordion',
+        href: 'accordion',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Alert',
+        href: 'alert',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Avatar',
+        href: 'avatar',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Badge',
+        href: 'badge',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Calendar',
+        href: 'calendar',
+        platforms: ['web'],
+      },
+      {
+        title: 'Card',
+        href: 'card',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Carousel',
+        href: 'carousel',
+        platforms: ['web'],
+      },
+      {
+        title: 'Chart',
+        href: 'chart',
+        platforms: ['web'],
+      },
+      {
+        title: 'Collapsible',
+        href: 'collapsible',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Table',
+        href: 'table',
+        platforms: ['web', 'native'],
+      },
+    ],
+  },
+  {
+    title: 'Feedback',
+    items: [
+      {
+        title: 'Alert Dialog',
+        href: 'alert-dialog',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Dialog',
+        href: 'dialog',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Hover Card',
+        href: 'hover-card',
+        platforms: ['web'],
+      },
+      {
+        title: 'Popover',
+        href: 'popover',
+        platforms: ['web'],
+      },
+      {
+        title: 'Progress',
+        href: 'progress',
+        platforms: ['web'],
+      },
+      {
+        title: 'Skeleton',
+        href: 'skeleton',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Sonner',
+        href: 'sonner',
+        platforms: ['web'],
+      },
+      {
+        title: 'Toast',
+        href: 'toast',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Tooltip',
+        href: 'tooltip',
+        platforms: ['web', 'native'],
+      },
+    ],
+  },
+  {
+    title: 'Navigation',
+    items: [
+      {
+        title: 'Breadcrumb',
+        href: 'breadcrumb',
+        platforms: ['web'],
+      },
+      {
+        title: 'Command',
+        href: 'command',
+        platforms: ['web'],
+      },
+      {
+        title: 'Context Menu',
+        href: 'context-menu',
+        platforms: ['web'],
+      },
+      {
+        title: 'Drawer',
+        href: 'drawer',
+        platforms: ['web'],
+      },
+      {
+        title: 'Dropdown Menu',
+        href: 'dropdown-menu',
+        platforms: ['web'],
+      },
+      {
+        title: 'Menubar',
+        href: 'menubar',
+        platforms: ['web'],
+      },
+      {
+        title: 'Navigation Menu',
+        href: 'navigation-menu',
+        platforms: ['web'],
+      },
+      {
+        title: 'Pagination',
+        href: 'pagination',
+        platforms: ['web'],
+      },
+      {
+        title: 'Sheet',
+        href: 'sheet',
+        platforms: ['web', 'native'],
+      },
+      {
+        title: 'Tabs',
+        href: 'tabs',
+        platforms: ['web', 'native'],
+      },
+    ],
+  },
+];

package/apps/playground-web/src/globals.css

@@ -0,0 +1,148 @@
+@import 'tailwindcss';
+@source "../../../packages/ui-web/src/**/*.{js,ts,jsx,tsx}";
+@source "../../../packages/ui-core/src/**/*.{js,ts,jsx,tsx}";
+
+@theme {
+  /* Border radius */
+  --radius-lg: 0.5rem;
+  --radius-md: calc(var(--radius-lg) - 2px);
+  --radius-sm: calc(var(--radius-lg) - 4px);
+
+  /* Container */
+  --container-2xl: 1400px;
+
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@layer base {
+  /* @tokens-start */
+  :root {
+    --background: 0 0% 96%;
+    --foreground: 222 47% 11%;
+    --card: 0 0% 100%;
+    --card-foreground: 222 47% 11%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222 47% 11%;
+    --primary: 225 73% 57%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 93 28% 54%;
+    --secondary-foreground: 0 0% 100%;
+    --muted: 0 0% 92%;
+    --muted-foreground: 215 16% 47%;
+    --accent: 0 0% 88%;
+    --accent-foreground: 222 47% 11%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 89%;
+    --input: 0 0% 89%;
+    --ring: 222 47% 11%;
+    --radius: 0.5rem;
+
+    /* Brand Tokens */
+    --brand-blue: 225 73% 57%;
+    --brand-green: 151 66% 27%;
+    --brand-floral-white: 40 100% 97%;
+    --neutral-white: 0 0% 100%;
+    --neutral-black: 0 0% 0%;
+    --neutral-gray50: 0 0% 96%;
+    --neutral-gray100: 0 0% 92%;
+    --neutral-gray200: 0 0% 89%;
+    --neutral-gray300: 0 0% 88%;
+    --neutral-gray400: 0 0% 70%;
+    --neutral-gray500: 215 16% 47%;
+    --neutral-gray600: 222 47% 11%;
+    --neutral-gray700: 0 0% 18%;
+    --neutral-gray800: 0 0% 15%;
+    --neutral-gray900: 0 0% 14%;
+    --neutral-gray950: 0 0% 11%;
+    --neutral-gray975: 0 0% 9%;
+    --neutral-gray990: 0 0% 6%;
+    --semantic-success: 93 28% 54%;
+    --semantic-success-dark: 96 44% 61%;
+    --semantic-destructive: 0 84.2% 60.2%;
+    --semantic-destructive-dark: 0 62.8% 30.6%;
+  }
+
+  .dark {
+    --background: 0 0% 9%;
+    --foreground: 0 0% 100%;
+    --card: 0 0% 14%;
+    --card-foreground: 0 0% 100%;
+    --popover: 0 0% 11%;
+    --popover-foreground: 0 0% 100%;
+    --primary: 227 96% 71%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 96 44% 61%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 6%;
+    --muted-foreground: 0 0% 70%;
+    --accent: 0 0% 15%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 18%;
+    --input: 0 0% 18%;
+    --ring: 0 0% 90%;
+    --radius: 0.5rem;
+  }
+  /* @tokens-end */
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Tailwind v4 color utilities - map CSS vars to theme */
+@theme {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+}
+
+/* Sticky footer support for ScrollArea */
+[data-radix-scroll-area-viewport] > div {
+  min-height: 100%;
+  display: flex !important;
+  flex-direction: column;
+}

package/apps/playground-web/src/hooks/useDocMetadata.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+export interface DocMetadata {
+  title: string;
+  description?: string;
+}
+
+export function useDocMetadata({ title, description }: DocMetadata) {
+  React.useEffect(() => {
+    const previousTitle = document.title;
+    const previousDescription = document.querySelector('meta[name="description"]')?.getAttribute('content');
+
+    // Update title
+    document.title = `${title} | GV Tech Design System`;
+
+    // Update description
+    if (description) {
+      let metaDescription = document.querySelector('meta[name="description"]');
+      if (!metaDescription) {
+        metaDescription = document.createElement('meta');
+        metaDescription.setAttribute('name', 'description');
+        document.head.appendChild(metaDescription);
+      }
+      metaDescription.setAttribute('content', description);
+    }
+
+    return () => {
+      document.title = previousTitle;
+      if (previousDescription) {
+        document.querySelector('meta[name="description"]')?.setAttribute('content', previousDescription);
+      }
+    };
+  }, [title, description]);
+}

package/apps/playground-web/src/hooks/usePackageManager.tsx

@@ -0,0 +1,42 @@
+import React, { createContext, ReactNode, useCallback, useContext, useState } from 'react';
+
+export const PACKAGEMANAGERS = ['npm', 'yarn', 'pnpm'] as const;
+export type PackageManager = (typeof PACKAGEMANAGERS)[number];
+
+interface PackageManagerContextType {
+  packageManager: PackageManager;
+  setPackageManager: (pm: PackageManager) => void;
+}
+
+const PackageManagerContext = createContext<PackageManagerContextType | undefined>(undefined);
+
+export function PackageManagerProvider({ children }: { children: ReactNode }): React.ReactElement {
+  const [packageManager, setPackageManagerState] = useState<PackageManager>(() => {
+    if (typeof window !== 'undefined') {
+      const saved = localStorage.getItem('gv-docs-package-manager');
+      if (saved === 'npm' || saved === 'yarn' || saved === 'pnpm') {
+        return saved;
+      }
+    }
+    return 'yarn';
+  });
+
+  const setPackageManager = useCallback((pm: PackageManager) => {
+    setPackageManagerState(pm);
+    localStorage.setItem('gv-docs-package-manager', pm);
+  }, []);
+
+  return (
+    <PackageManagerContext.Provider value={{ packageManager, setPackageManager }}>
+      {children}
+    </PackageManagerContext.Provider>
+  );
+}
+
+export function usePackageManager() {
+  const context = useContext(PackageManagerContext);
+  if (context === undefined) {
+    throw new Error('usePackageManager must be used within a PackageManagerProvider');
+  }
+  return context;
+}

package/apps/playground-web/src/lib/react-native-shim.js

@@ -0,0 +1,34 @@
+import * as ReactNativeWeb from 'react-native-web';
+
+// Export everything from react-native-web
+export * from 'react-native-web';
+
+// Add missing exports that some native packages expect
+export const TurboModuleRegistry = {
+  get: () => null,
+};
+
+// Some versions/exports of react-native-web might not include these
+export const UnimplementedView = ReactNativeWeb.UnimplementedView || (() => null);
+export const ViewPropTypes = ReactNativeWeb.ViewPropTypes || {};
+
+// Default export
+// Create a default export that functions as both the module object and a callable function
+// This is necessary because some libraries (like lucide-react-native) might be transpiled in a way
+// that attempts to call the default import as a function.
+const ReactNative = () => {
+  return null;
+};
+
+// Copy all properties from react-native-web to our function
+Object.assign(ReactNative, ReactNativeWeb);
+
+// Add our custom/missing exports
+Object.assign(ReactNative, {
+  TurboModuleRegistry,
+  UnimplementedView,
+  ViewPropTypes,
+});
+
+// Default export
+export default ReactNative;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+import './globals.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/apps/playground-web/src/pages/index.ts

@@ -0,0 +1,4 @@
+export * from './native';
+export * from './shared/ColorTokensDocs';
+export * from './shared/GettingStarted';
+export * from './web';

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

@@ -0,0 +1,85 @@
+import { ComponentShowcase } from '@/components/docs/ComponentShowcase';
+import { PropsTable } from '@/components/docs/PropsTable';
+// @ts-nocheck
+
+export function AccordionDocs() {
+  return (
+    <>
+      <ComponentShowcase
+        title="Example"
+        description="A simple accordion with three items."
+        code={`import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@gv-tech/design-system";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const isNative = true as boolean;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const platform = 'native' as string;
+
+<Accordion type="multiple" collapsible defaultValue={["item-1"]}>
+  <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' aesthetic.
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-3">
+    <AccordionTrigger>Is it animated?</AccordionTrigger>
+    <AccordionContent>
+      Yes. It's animated by default, but you can disable it if you prefer.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>`}
+      />
+
+      <div className="space-y-4">
+        <h3 className="text-xl font-semibold">Props</h3>
+        <PropsTable
+          props={[
+            {
+              name: 'type',
+              type: '"single" | "multiple"',
+              defaultValue: '"single"',
+              description: 'Whether one or multiple items can be opened at the same time.',
+            },
+            {
+              name: 'collapsible',
+              type: 'boolean',
+              defaultValue: 'false',
+              description: 'When type is "single", allows closing content when clicking trigger for an open item.',
+            },
+            {
+              name: 'defaultValue',
+              type: 'string | string[]',
+              description: 'The value of the item to expand by default.',
+            },
+            {
+              name: 'value',
+              type: 'string | string[]',
+              description: 'The controlled 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.',
+            },
+          ]}
+        />
+      </div>
+    </>
+  );
+}