@gv-tech/design-system 2.4.0 → 2.5.1

package/docs/MIGRATE_TO_GVTECH_SCOPE.md

@@ -1,74 +0,0 @@
-# Migration: Rename package to @gvtech/\* (scope migration) 🚚
-
-This document outlines recommended steps to rename and publish the package under the `@gvtech` scope (example: `@gvtech/ui`). Follow the checklist to reduce downtime and prevent publish/pipeline surprises.
-
-## Summary
-
-- Current package: `ge-design-system` (published previously on npm)
-- Goal: Publish as `@gvtech/<name>` (e.g., `@gvtech/ui` or `@gvtech/design`) and provide migration guidance & deprecate old package.
-
-## Preconditions
-
-- You or your org must own the `@gvtech` scope on npm (create an org if needed).
-- Decide on final package name (e.g., `@gvtech/ui`) and confirm no conflicts on npm.
-- Decide whether to reuse versioning or start at a specific semver for the new package.
-
-## Checklist & Steps
-
-1. **Choose final package name & confirm npm org**
-   - Confirm that `@gvtech` org exists on npm and that you have admin access to publish packages under it.
-
-2. **Prepare repository updates**
-   - Update `package.json`:
-     - `"name": "@gvtech/ui"` (replace with agreed name)
-     - Optionally add `"publishConfig": { "access": "public" }` if you want public scoped package.
-   - Update docs, README, and badges to reference the new package name and npm URL.
-   - Update any internal docs/imports that reference the old package name.
-
-3. **Prepare CI / Tokens**
-   - Create or generate an **Automation token** on npm (Profile → Access Tokens → Generate New Token → type: Automation or Read & write) and add it as `NPM_TOKEN` in GitHub Secrets.
-   - If planning to use OIDC, set up the npm registry trust (if available) and keep `NPM_TOKEN` as fallback until OIDC works.
-   - Update release workflow (`.github/workflows/release-please.yml`) to include `package-name: @gvtech/ui` or add a manifest if you will support multiple packages.
-
-4. **Dry-run & tests**
-   - Run `npm publish --dry-run` locally to validate package contents.
-   - Publish to a `next` tag first (e.g., `npm publish --tag next --access public`) to smoke test without affecting `latest`.
-
-5. **Publish new package**
-   - Create a branch `feat/rename-to-gvtech` with changes and open a PR. Ensure CI passes.
-   - Merge and allow release process to publish the package (via release-please or manual publish step).
-   - Verify the package appears at `https://www.npmjs.com/package/@gvtech/ui`.
-
-6. **Deprecate the old package**
-   - Deprecate old package to guide users to the new package:
-     - `npm deprecate ge-design-system@"*" "This package has moved to @gvtech/ui. Please migrate: npm install @gvtech/ui"`
-   - Update the old package README to point to the new package if you prefer.
-
-7. **Communicate & Migration support**
-   - Add a migration note to README and a `MIGRATION.md` (or link to this doc).
-   - Consider a blog/Slack/Email announcement for major consumers.
-
-8. **Post-migration cleanup**
-   - Optionally remove legacy publish access or tokens from the old package and update dependency graphs.
-   - Update `release-please` configuration to target the new package-name or add a manifest for per-package releases.
-
-## Example `package.json` changes
-
-```json
-{
-  "name": "@gvtech/ui",
-  "version": "0.0.0",
-  "publishConfig": {
-    "access": "public"
-  }
-}
-```
-
-## Rollback plan
-
-- If a publish fails or has issues, unpublish within the npm grace window (if applicable) or publish a new patch that fixes the issue and continue to support the old package until users migrate.
-
-## Notes & References
-
-- npm Access Tokens: <https://docs.npmjs.com/creating-and-viewing-access-tokens>
-- GitHub OIDC for npm: <https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages>

package/eslint.config.mjs

@@ -1,13 +0,0 @@
-import { recommended } from '@gv-tech/eslint-config';
-
-/**
- * ESLint configuration for TypeScript projects. Uses @gv-tech/eslint-config for sensible defaults. For more information
- * on configuration options, see: https://github.com/Garcia-Ventures/eslint-config
- */
-export default [
-  ...recommended,
-  // Add project-specific overrides here
-  {
-    ignores: ['**/eslint.config.mjs', '**/.yarn/**', 'dist-site/**'],
-  },
-];

package/index.html

@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/favicon.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>GV Tech Design System Playground</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/postcss.config.mjs

@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-};

package/public/index.demo.html

@@ -1,40 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta name="description" content="Garcia Ventures design system" />
-    <link rel="apple-touch-icon" href="logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>GV Tech Design System</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

package/public/manifest.json

@@ -1,25 +0,0 @@
-{
-  "short_name": "GV Design",
-  "name": "GV Tech Design System",
-  "icons": [
-    {
-      "src": "favicon.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

package/public/robots.txt

@@ -1,2 +0,0 @@
-# https://www.robotstxt.org/robotstxt.html
-User-agent: *

package/release-please-config.json

@@ -1,36 +0,0 @@
-{
-  "packages": {
-    ".": {
-      "release-type": "node",
-      "changelog-sections": [
-        {
-          "type": "feat",
-          "section": "Features"
-        },
-        {
-          "type": "fix",
-          "section": "Bug Fixes"
-        },
-        {
-          "type": "docs",
-          "section": "Documentation",
-          "hidden": false
-        },
-        {
-          "type": "perf",
-          "section": "Performance Improvements"
-        },
-        {
-          "type": "refactor",
-          "section": "Code Refactoring",
-          "hidden": true
-        },
-        {
-          "type": "chore",
-          "section": "Miscellaneous Chores",
-          "hidden": true
-        }
-      ]
-    }
-  }
-}

package/scripts/build-registry.ts

@@ -1,47 +0,0 @@
-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');
-
-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}`,
-          content,
-          type: 'registry:ui',
-        },
-      ],
-    };
-
-    fs.writeFileSync(path.join(REGISTRY_PATH, `${name}.json`), JSON.stringify(componentJson, null, 2));
-
-    return {
-      name,
-      files: [`ui/${file}`],
-      type: 'registry:ui',
-    };
-  });
-
-  fs.writeFileSync(path.join(REGISTRY_PATH, 'index.json'), JSON.stringify(registryIndex, null, 2));
-  console.log('✅ Registry built successfully in public/registry');
-}
-
-buildRegistry();

package/scripts/import-all-shadcn.ts

@@ -1,68 +0,0 @@
-import { execSync } from 'child_process';
-
-const components = [
-  // Layout
-  'accordion',
-  'collapsible',
-  'scroll-area',
-  'separator',
-  'tabs',
-  // Inputs
-  'input',
-  'textarea',
-  'checkbox',
-  'radio-group',
-  'select',
-  'switch',
-  'slider',
-  'toggle',
-  'date-picker', // Note: This might require multiple (calendar, popover, etc.)
-  'form',
-  // Feedback
-  'alert',
-  'badge',
-  'progress',
-  'skeleton',
-  'toast',
-  'tooltip',
-  'sonner',
-  // Overlay
-  'dialog',
-  'popover',
-  'drawer',
-  'sheet',
-  'command',
-  'alert-dialog',
-  'hover-card',
-  // Content
-  'card',
-  'table',
-  'carousel',
-  'calendar',
-  'chart',
-  'aspect-ratio',
-  'avatar',
-  'breadcrumb',
-  'context-menu',
-  'dropdown-menu',
-  'menubar',
-  'navigation-menu',
-  'pagination',
-  'resizable',
-  'label',
-  'menubar',
-  'toggle-group',
-];
-
-console.log(`🚀 Starting batch import of ${components.length} components...`);
-
-for (const component of components) {
-  try {
-    console.log(`📦 Adding ${component}...`);
-    execSync(`npx shadcn@latest add ${component} --yes --overwrite`, { stdio: 'inherit' });
-  } catch (error) {
-    console.error(`❌ Failed to add ${component}:`, error);
-  }
-}
-
-console.log('✅ All components processed!');

package/scripts/sync-exports.ts

@@ -1,52 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-const PACKAGE_JSON_PATH = path.join(process.cwd(), 'package.json');
-const COMPONENTS_UI_PATH = path.join(process.cwd(), 'src/components/ui');
-
-function syncExports() {
-  try {
-    const packageJson = JSON.parse(fs.readFileSync(PACKAGE_JSON_PATH, 'utf8'));
-    const components = fs
-      .readdirSync(COMPONENTS_UI_PATH)
-      .filter((file) => file.endsWith('.tsx') && !file.includes('.test.') && !file.includes('.stories.'));
-
-    // Base exports that should always be present
-    const newExports: Record<string, unknown> = {
-      '.': {
-        types: './dist/index.d.ts',
-        import: './dist/index.es.js',
-        require: './dist/index.cjs.js',
-        default: './dist/index.es.js',
-      },
-      './style.css': {
-        style: './dist/design-system.css',
-        import: './dist/design-system.css',
-        default: './dist/design-system.css',
-      },
-      './package.json': './package.json',
-    };
-
-    // Add component exports
-    // Note: We assume the build flattens or maintains structure based on Vite config
-    // For now, we'll map them to where they will be in dist
-    components.sort().forEach((file) => {
-      const name = path.basename(file, '.tsx');
-      newExports[`./${name}`] = {
-        types: `./dist/components/ui/${name}.d.ts`,
-        import: `./dist/index.es.js`, // Temporary: default to main bundle if not individual build
-        default: `./dist/index.es.js`,
-      };
-    });
-
-    packageJson.exports = newExports;
-
-    fs.writeFileSync(PACKAGE_JSON_PATH, JSON.stringify(packageJson, null, 2) + '\n');
-    console.log(`✅ package.json exports synchronized with ${components.length} components`);
-  } catch (error) {
-    console.error('❌ Error synchronizing exports:', error);
-    process.exit(1);
-  }
-}
-
-syncExports();

package/scripts/sync-tokens.ts

@@ -1,73 +0,0 @@
-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';
-
-const GLOBALS_CSS_PATH = path.join(process.cwd(), '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() {
-  try {
-    const globalsContent = fs.readFileSync(GLOBALS_CSS_PATH, 'utf8');
-    const variables = generateCssVariables();
-
-    const tokenRegex = /\/\* @tokens-start \*\/[\s\S]*\/\* @tokens-end \*\//;
-
-    if (!tokenRegex.test(globalsContent)) {
-      console.error('❌ Error: Could not find @tokens markers in src/globals.css');
-      process.exit(1);
-    }
-
-    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);
-  }
-}
-
-syncTokens();

package/scripts/validate.ts

@@ -1,61 +0,0 @@
-import { spawnSync } from 'child_process';
-
-const args = process.argv.slice(2);
-const fix = args.includes('--fix');
-
-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',
-  },
-  {
-    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' },
-];
-
-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);