@gv-tech/design-system 2.4.0 → 2.5.0

package/packages/ui-web/src/toggle.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { ToggleBaseProps, toggleVariants } from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+export interface ToggleProps
+  extends
+    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>,
+    Omit<VariantProps<typeof toggleVariants>, 'size' | 'variant'>,
+    ToggleBaseProps {}
+
+const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(
+  ({ className, variant, size, ...props }, ref) => (
+    <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
+  ),
+);
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };

package/packages/ui-web/src/tooltip.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as React from 'react';
+
+import {
+  TooltipBaseProps,
+  TooltipContentBaseProps,
+  TooltipProviderBaseProps,
+  TooltipTriggerBaseProps,
+} from '@gv-tech/ui-core';
+import { cn } from './lib/utils';
+
+export type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> &
+  TooltipProviderBaseProps;
+
+const TooltipProvider = ({ delayDuration = 0, ...props }: TooltipProviderProps) => (
+  <TooltipPrimitive.Provider delayDuration={delayDuration} {...props} />
+);
+
+export type TooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root> & TooltipBaseProps;
+
+const Tooltip = ({ ...props }: TooltipProps) => <TooltipPrimitive.Root {...props} />;
+
+export type TooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger> &
+  TooltipTriggerBaseProps;
+
+const TooltipTrigger = React.forwardRef<React.ElementRef<typeof TooltipPrimitive.Trigger>, TooltipTriggerProps>(
+  ({ className, ...props }, ref) => <TooltipPrimitive.Trigger ref={ref} className={className} {...props} />,
+);
+TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
+
+export type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> &
+  TooltipContentBaseProps;
+
+const TooltipContent = React.forwardRef<React.ElementRef<typeof TooltipPrimitive.Content>, TooltipContentProps>(
+  ({ className, sideOffset = 4, ...props }, ref) => (
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        'z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/packages/ui-web/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "rootDir": "../..",
+    "types": ["node", "vitest/globals", "@testing-library/jest-dom"],
+    "paths": {
+      "@gv-tech/design-tokens": ["../design-tokens/src"],
+      "@gv-tech/ui-core": ["../ui-core/src"],
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/packages/ui-web/vite.config.ts

@@ -0,0 +1,21 @@
+/// <reference types="vitest" />
+import react from '@vitejs/plugin-react-swc';
+import path from 'path';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/setupTests.ts'],
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});

package/release-please-config.json

@@ -23,7 +23,7 @@
         {
           "type": "refactor",
           "section": "Code Refactoring",
-          "hidden": true
+          "hidden": false
         },
         {
           "type": "chore",
@@ -31,6 +31,30 @@
           "hidden": true
         }
       ]
+    },
+    "packages/ui-web": {
+      "release-type": "node",
+      "package-name": "@gv-tech/ui-web"
+    },
+    "packages/ui-native": {
+      "release-type": "node",
+      "package-name": "@gv-tech/ui-native"
+    },
+    "packages/ui-core": {
+      "release-type": "node",
+      "package-name": "@gv-tech/ui-core"
+    },
+    "packages/design-tokens": {
+      "release-type": "node",
+      "package-name": "@gv-tech/design-tokens"
+    },
+    "apps/playground-web": {
+      "release-type": "node",
+      "package-name": "playground-web"
+    },
+    "apps/native-playground": {
+      "release-type": "node",
+      "package-name": "native-playground"
     }
   }
 }

package/scripts/build-registry.ts

@@ -1,43 +1,76 @@
 import fs from 'fs';
 import path from 'path';
 
-const REGISTRY_PATH = path.join(process.cwd(), 'public/registry');
-const COMPONENTS_UI_PATH = path.join(process.cwd(), 'src/components/ui');
+const REGISTRY_PATH = path.join(process.cwd(), 'apps/playground-web/public/registry');
+const COMPONENTS_UI_PATH = path.join(process.cwd(), 'packages/ui-web/src');
 
 if (!fs.existsSync(REGISTRY_PATH)) {
   fs.mkdirSync(REGISTRY_PATH, { recursive: true });
 }
 
 function buildRegistry() {
-  const components = fs
-    .readdirSync(COMPONENTS_UI_PATH)
-    .filter((file) => file.endsWith('.tsx') && !file.includes('.stories.'));
-
-  const registryIndex = components.map((file) => {
-    const name = path.basename(file, '.tsx');
-    const content = fs.readFileSync(path.join(COMPONENTS_UI_PATH, file), 'utf8');
-
-    const componentJson = {
-      name,
-      type: 'registry:ui',
-      dependencies: [], // You can manually add dependencies here if needed
-      registryDependencies: [],
-      files: [
-        {
-          path: `ui/${file}`,
+  const entries = fs.readdirSync(COMPONENTS_UI_PATH, { withFileTypes: true });
+
+  const registryIndex: { name: string; files: string[]; type: string }[] = [];
+
+  entries.forEach((entry) => {
+    let name = '';
+    const componentFiles: { path: string; content: string; type: string }[] = [];
+    const filePaths: string[] = [];
+
+    // Ignore index.ts, hooks, lib, and tests
+    if (
+      entry.name === 'index.ts' ||
+      entry.name === 'hooks' ||
+      entry.name === 'lib' ||
+      entry.name.includes('.test.') ||
+      entry.name === 'sonner.tsx' // sonner is often handled uniquely or as a wrapper
+    ) {
+      return;
+    }
+
+    if (entry.isDirectory()) {
+      name = entry.name;
+      const dirPath = path.join(COMPONENTS_UI_PATH, name);
+      const dirFiles = fs.readdirSync(dirPath).filter((f) => f.endsWith('.ts') || f.endsWith('.tsx'));
+
+      dirFiles.forEach((file) => {
+        const content = fs.readFileSync(path.join(dirPath, file), 'utf8');
+        componentFiles.push({
+          path: `ui/${name}/${file}`,
           content,
           type: 'registry:ui',
-        },
-      ],
-    };
+        });
+        filePaths.push(`ui/${name}/${file}`);
+      });
+    } else if (entry.isFile() && entry.name.endsWith('.tsx')) {
+      name = path.basename(entry.name, '.tsx');
+      const content = fs.readFileSync(path.join(COMPONENTS_UI_PATH, entry.name), 'utf8');
+      componentFiles.push({
+        path: `ui/${entry.name}`,
+        content,
+        type: 'registry:ui',
+      });
+      filePaths.push(`ui/${entry.name}`);
+    }
+
+    if (name) {
+      const componentJson = {
+        name,
+        type: 'registry:ui',
+        dependencies: [],
+        registryDependencies: [],
+        files: componentFiles,
+      };
 
-    fs.writeFileSync(path.join(REGISTRY_PATH, `${name}.json`), JSON.stringify(componentJson, null, 2));
+      fs.writeFileSync(path.join(REGISTRY_PATH, `${name}.json`), JSON.stringify(componentJson, null, 2));
 
-    return {
-      name,
-      files: [`ui/${file}`],
-      type: 'registry:ui',
-    };
+      registryIndex.push({
+        name,
+        files: filePaths,
+        type: 'registry:ui',
+      });
+    }
   });
 
   fs.writeFileSync(path.join(REGISTRY_PATH, 'index.json'), JSON.stringify(registryIndex, null, 2));

package/scripts/sync-tokens.ts

@@ -2,9 +2,12 @@ import fs from 'fs';
 import path from 'path';
 // We use a dynamic import or relative require because we are running with tsx
 // and want to avoid complex tsconfig path issues for a simple script.
-import { palette, theme } from '../src/theme/tokens';
+import { palette, theme } from '@gv-tech/design-tokens';
 
-const GLOBALS_CSS_PATH = path.join(process.cwd(), 'src/globals.css');
+const GLOBALS_CSS_PATHS = [
+  path.join(process.cwd(), 'src/globals.css'),
+  path.join(process.cwd(), 'apps/playground-web/src/globals.css'),
+];
 
 /** Strips hsl() wrapper and commas to match Tailwind/shadcn expectation of "H S L" */
 function formatTokenValue(value: string) {
@@ -49,24 +52,34 @@ function generateCssVariables() {
 }
 
 function syncTokens() {
-  try {
-    const globalsContent = fs.readFileSync(GLOBALS_CSS_PATH, 'utf8');
-    const variables = generateCssVariables();
+  const variables = generateCssVariables();
+  const tokenRegex = /\/\* @tokens-start \*\/[\s\S]*\/\* @tokens-end \*\//;
 
-    const tokenRegex = /\/\* @tokens-start \*\/[\s\S]*\/\* @tokens-end \*\//;
+  for (const cssPath of GLOBALS_CSS_PATHS) {
+    try {
+      if (!fs.existsSync(cssPath)) {
+        console.log(`⚠️ Skipping ${cssPath} (not found)`);
+        continue;
+      }
 
-    if (!tokenRegex.test(globalsContent)) {
-      console.error('❌ Error: Could not find @tokens markers in src/globals.css');
-      process.exit(1);
-    }
+      const globalsContent = fs.readFileSync(cssPath, 'utf8');
+
+      if (!tokenRegex.test(globalsContent)) {
+        console.warn(`⚠️ Warning: Could not find @tokens markers in ${cssPath}`);
+        continue;
+      }
 
-    const updatedContent = globalsContent.replace(tokenRegex, `/* @tokens-start */\n${variables}\n  /* @tokens-end */`);
+      const updatedContent = globalsContent.replace(
+        tokenRegex,
+        `/* @tokens-start */\n${variables}\n  /* @tokens-end */`,
+      );
 
-    fs.writeFileSync(GLOBALS_CSS_PATH, updatedContent);
-    console.log('✅ Tokens synchronized successfully');
-  } catch (error) {
-    console.error('❌ Error synchronizing tokens:', error);
-    process.exit(1);
+      fs.writeFileSync(cssPath, updatedContent);
+      console.log(`✅ Tokens synchronized successfully for ${path.relative(process.cwd(), cssPath)}`);
+    } catch (error) {
+      console.error(`❌ Error synchronizing tokens for ${cssPath}:`, error);
+      // We don't exit here to allow other files to be synced, but we might want to flag failure.
+    }
   }
 }
 

package/scripts/validate.ts

@@ -2,16 +2,15 @@ import { spawnSync } from 'child_process';
 
 const args = process.argv.slice(2);
 const fix = args.includes('--fix');
+const noCache = args.includes('--no-cache');
+
+const nxFlags = noCache ? ' --skipNxCache' : '';
 
 const steps = [
   {
     name: 'Sync Tokens',
     cmd: 'yarn tsx scripts/sync-tokens.ts',
   },
-  {
-    name: 'Sync Exports',
-    cmd: 'yarn tsx scripts/sync-exports.ts',
-  },
   {
     name: fix ? 'Prettier fix' : 'Prettier check',
     cmd: fix ? 'yarn format' : 'yarn format:ci',
@@ -20,9 +19,23 @@ const steps = [
     name: fix ? 'Lint fix (eslint)' : 'Lint (eslint)',
     cmd: fix ? 'yarn lint:fix' : 'yarn lint',
   },
-  { name: 'TypeScript type check', cmd: 'yarn tsc --noEmit' },
-  { name: 'Test (vitest)', cmd: 'yarn test:ci' },
-  { name: 'Build (vite)', cmd: 'yarn build' },
+  {
+    name: 'TypeScript type check',
+    // Using nx run-many for per-project type checking
+    cmd: `nx run-many -t typecheck --parallel${nxFlags}`,
+  },
+  {
+    name: 'Test (vitest)',
+    cmd: `nx run-many -t test --parallel --run --reporter=dot${nxFlags}`,
+  },
+  {
+    name: 'Build Sub-packages & Apps',
+    cmd: `nx run-many -t build --parallel${nxFlags}`,
+  },
+  {
+    name: 'Build Root Package (Library)',
+    cmd: 'yarn build',
+  },
 ];
 
 const SEP = '------------------------------------------------------------';

package/src/index.ts

@@ -1,58 +1,4 @@
 import './globals.css';
 
-export * from './lib/utils';
-export * from './theme/tokens';
-
-// UI Components
-export * from './components/ui/accordion';
-export * from './components/ui/alert';
-export * from './components/ui/alert-dialog';
-export * from './components/ui/aspect-ratio';
-export * from './components/ui/avatar';
-export * from './components/ui/badge';
-export * from './components/ui/breadcrumb';
-export * from './components/ui/button';
-export * from './components/ui/calendar';
-export * from './components/ui/card';
-export * from './components/ui/carousel';
-export * from './components/ui/chart';
-export * from './components/ui/checkbox';
-export * from './components/ui/collapsible';
-export * from './components/ui/command';
-export * from './components/ui/context-menu';
-export * from './components/ui/dialog';
-export * from './components/ui/drawer';
-export * from './components/ui/dropdown-menu';
-export * from './components/ui/form';
-export * from './components/ui/hover-card';
-export * from './components/ui/input';
-export * from './components/ui/label';
-export * from './components/ui/menubar';
-export * from './components/ui/navigation-menu';
-export * from './components/ui/pagination';
-export * from './components/ui/popover';
-export * from './components/ui/progress';
-export * from './components/ui/radio-group';
-export * from './components/ui/resizable';
-export * from './components/ui/scroll-area';
-export * from './components/ui/select';
-export * from './components/ui/separator';
-export * from './components/ui/sheet';
-export * from './components/ui/skeleton';
-export * from './components/ui/slider';
-export * from './components/ui/sonner';
-export * from './components/ui/switch';
-export * from './components/ui/table';
-export * from './components/ui/tabs';
-export * from './components/ui/textarea';
-export * from './components/ui/theme-provider';
-export * from './components/ui/theme-toggle';
-export * from './components/ui/toast';
-export { Toaster as ToasterToast } from './components/ui/toaster';
-export * from './components/ui/toggle';
-export * from './components/ui/toggle-group';
-export * from './components/ui/tooltip';
-
-// Hooks
-export * from './hooks/use-theme';
-export * from './hooks/use-toast';
+export * from '@gv-tech/design-tokens';
+export * from '@gv-tech/ui-web';

package/src/types/nativewind.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="nativewind/types" />
+
+import 'react-native';
+
+declare module 'react-native' {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+    placeholderClassName?: string;
+  }
+}

package/tailwind.config.js

@@ -0,0 +1,48 @@
+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: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  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/tsconfig.build.json

@@ -3,10 +3,20 @@
   "compilerOptions": {
     "noEmit": false,
     "declaration": true,
-    "emitDeclarationOnly": true,
+    "emitDeclarationOnly": false,
     "declarationMap": true,
     "outDir": "dist",
-    "rootDir": "src"
+    "rootDir": ".",
+    "allowImportingTsExtensions": false
   },
-  "include": ["src"]
+  "include": ["src", "packages"],
+  "exclude": [
+    "src/**/*.test.tsx",
+    "src/**/*.test.ts",
+    "src/setupTests.ts",
+    "packages/**/*.test.tsx",
+    "packages/**/*.test.ts",
+    "packages/**/vite.config.ts",
+    "packages/**/src/setupTests.ts"
+  ]
 }

package/tsconfig.json

@@ -8,6 +8,8 @@
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
     "noEmit": true,
     "jsx": "react-jsx",
     "strict": true,
@@ -16,9 +18,13 @@
     "noFallthroughCasesInSwitch": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@gv-tech/design-tokens": ["./packages/design-tokens/src"],
+      "@gv-tech/ui-core": ["./packages/ui-core/src"],
+      "@gv-tech/ui-web": ["./packages/ui-web/src"],
+      "@gv-tech/ui-native": ["./packages/ui-native/src"]
     }
   },
-  "include": ["src"],
+  "include": ["src", "packages"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

package/vite.config.ts

@@ -12,12 +12,25 @@ const getEntries = () => {
   };
 
   if (isLibrary) {
-    const uiPath = resolve(__dirname, 'src/components/ui');
-    const files = fs.readdirSync(uiPath);
-    files.forEach((file) => {
-      if (file.endsWith('.tsx') && !file.includes('.test.') && !file.includes('.stories.')) {
-        const name = file.replace('.tsx', '');
-        entries[name] = resolve(uiPath, file);
+    const uiPath = resolve(__dirname, 'packages/ui-web/src');
+    const items = fs.readdirSync(uiPath, { withFileTypes: true });
+
+    items.forEach((item) => {
+      if (item.isDirectory()) {
+        if (item.name === 'hooks' || item.name === 'lib') return;
+        const entryPath = resolve(uiPath, item.name, 'index.ts');
+        if (fs.existsSync(entryPath)) {
+          entries[item.name] = entryPath;
+        }
+      } else if (
+        item.isFile() &&
+        item.name.endsWith('.tsx') &&
+        !item.name.includes('.test.') &&
+        !item.name.includes('.stories.')
+      ) {
+        // File component (legacy)
+        const name = item.name.replace('.tsx', '');
+        entries[name] = resolve(uiPath, item.name);
       }
     });
   }
@@ -26,9 +39,30 @@ const getEntries = () => {
 
 export default defineConfig({
   plugins: [react()],
+  define: {
+    global: 'window',
+    __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
+    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+  },
   resolve: {
-    alias: {
-      '@': resolve(__dirname, './src'),
+    alias: [
+      {
+        find: /^react-native$/,
+        replacement: resolve(__dirname, 'src/lib/react-native-shim.js'),
+      },
+      {
+        find: /^react-native\/(.*)$/,
+        replacement: resolve(__dirname, 'src/lib/react-native-shim.js'),
+      },
+      { find: '@', replacement: resolve(__dirname, './src') },
+    ],
+    extensions: ['.web.tsx', '.tsx', '.ts', '.js'],
+  },
+  optimizeDeps: {
+    esbuildOptions: {
+      loader: {
+        '.js': 'jsx',
+      },
     },
   },
   build: {

package/vitest.config.ts

@@ -5,13 +5,19 @@ export default defineConfig({
   test: {
     environment: 'jsdom',
     globals: true,
-    setupFiles: './src/setupTests.ts',
+    setupFiles: [resolve(__dirname, './src/setupTests.ts')],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'lcov'],
     },
     alias: {
       '@': resolve(__dirname, './src'),
+      '@gv-tech/design-tokens': resolve(__dirname, './packages/design-tokens/src'),
+      '@gv-tech/ui-core': resolve(__dirname, './packages/ui-core/src'),
+      '@gv-tech/ui-web': resolve(__dirname, './packages/ui-web/src'),
+      '@gv-tech/ui-native': resolve(__dirname, './packages/ui-native/src'),
+      'react-native': resolve(__dirname, 'apps/playground-web/src/lib/react-native-shim.js'),
     },
+    exclude: ['**/node_modules/**', '**/dist/**', '**/cypress/**', '**/.{idea,git,cache,output,temp}/**'],
   },
 });

package/wrangler.toml

@@ -1,7 +1,7 @@
 name = "gvtech-design"
 compatibility_date = "2024-11-01"
 compatibility_flags = ["nodejs_compat"]
-pages_build_output_dir = "dist-site"
+pages_build_output_dir = "apps/playground-web/dist-site"
 
 [vars]
 NODE_VERSION = "24"