@gv-tech/design-system 2.5.0 → 2.5.2

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

@@ -1,293 +0,0 @@
-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

@@ -1,148 +0,0 @@
-@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

@@ -1,34 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

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

@@ -1,85 +0,0 @@
-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>
-    </>
-  );
-}