@gv-tech/design-system 2.3.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

@@ -0,0 +1,86 @@
+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 '@gv-tech/design-tokens';
+
+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) {
+  if (value.includes('hsl')) {
+    return value.replace(/hsl\((.*)\)/, '$1').replace(/,/g, '');
+  }
+  return value;
+}
+
+/** Converts camelCase to kebab-case */
+function toKebabCase(str: string) {
+  return str.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
+function generateCssVariables() {
+  let css = '  :root {\n';
+
+  // Light theme
+  for (const [key, value] of Object.entries(theme.light)) {
+    const cssVarName = `--${toKebabCase(key)}`;
+    css += `    ${cssVarName}: ${formatTokenValue(value as string)};\n`;
+  }
+
+  css += '\n    /* Brand Tokens */\n';
+  for (const [category, tokens] of Object.entries(palette)) {
+    for (const [key, value] of Object.entries(tokens)) {
+      const cssVarName = `--${toKebabCase(category)}-${toKebabCase(key)}`;
+      css += `    ${cssVarName}: ${formatTokenValue(value as string)};\n`;
+    }
+  }
+
+  css += '  }\n\n  .dark {\n';
+
+  // Dark theme
+  for (const [key, value] of Object.entries(theme.dark)) {
+    const cssVarName = `--${toKebabCase(key)}`;
+    css += `    ${cssVarName}: ${formatTokenValue(value as string)};\n`;
+  }
+
+  css += '  }';
+  return css;
+}
+
+function syncTokens() {
+  const variables = generateCssVariables();
+  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;
+      }
+
+      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 */`,
+      );
+
+      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.
+    }
+  }
+}
+
+syncTokens();

package/scripts/validate.ts

@@ -0,0 +1,74 @@
+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: fix ? 'Prettier fix' : 'Prettier check',
+    cmd: fix ? 'yarn format' : 'yarn format:ci',
+  },
+  {
+    name: fix ? 'Lint fix (eslint)' : 'Lint (eslint)',
+    cmd: fix ? 'yarn lint:fix' : 'yarn lint',
+  },
+  {
+    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 = '------------------------------------------------------------';
+const green = (s: string) => `\x1b[32m${s}\x1b[0m`;
+const red = (s: string) => `\x1b[31m${s}\x1b[0m`;
+const yellow = (s: string) => `\x1b[33m${s}\x1b[0m`;
+
+console.log(SEP);
+console.log('\x1b[1mRunning validate steps (sequential)\x1b[0m');
+console.log(SEP);
+
+for (const step of steps) {
+  console.log(yellow(`\n> ${step.name}`));
+  console.log(yellow(`> ${step.cmd}\n`));
+
+  const result = spawnSync(step.cmd, { stdio: 'inherit', shell: true });
+
+  if (result.error) {
+    console.error(red(`\nFailed to run: ${step.cmd}`));
+    console.error(red(result.error.message));
+    process.exit(1);
+  }
+
+  if (result.status !== 0) {
+    console.error(red(`\n${step.name} failed with exit code ${result.status}.`));
+    console.error(red('Stopping further steps.'));
+    process.exit(result.status || 1);
+  }
+
+  console.log(green(`\n${step.name} succeeded.`));
+}
+
+console.log('\n' + SEP);
+console.log(green('All validate steps completed successfully ✅'));
+console.log(SEP + '\n');
+process.exit(0);

package/src/globals.css

@@ -33,6 +33,7 @@
 }
 
 @layer base {
+  /* @tokens-start */
   :root {
     --background: 0 0% 96%;
     --foreground: 222 47% 11%;
@@ -59,6 +60,25 @@
     --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 {
@@ -81,7 +101,9 @@
     --border: 0 0% 18%;
     --input: 0 0% 18%;
     --ring: 0 0% 90%;
+    --radius: 0.5rem;
   }
+  /* @tokens-end */
 }
 
 @layer base {

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" }]
 }