@pie-element/cli 0.1.1

package/src/commands/packages/create-react-elements.ts

@@ -0,0 +1,306 @@
+import { Command, Flags } from '@oclif/core';
+import { Logger } from '../../utils/logger.js';
+import { existsSync } from 'node:fs';
+import { readdir, readFile, writeFile, stat as fsStat } from 'node:fs/promises';
+import { join } from 'node:path';
+
+const ELEMENTS_REACT_DIR = 'packages/elements-react';
+
+interface ElementDeps {
+  deps: Set<string>;
+  peerDeps: Set<string>;
+}
+
+export default class CreateReactElements extends Command {
+  static override description = 'Create package.json files for synced React elements';
+
+  static override examples = ['<%= config.bin %> <%= command.id %>'];
+
+  static override flags = {
+    verbose: Flags.boolean({
+      char: 'v',
+      description: 'Show detailed output',
+      default: false,
+    }),
+  };
+
+  private logger = new Logger();
+
+  public async run(): Promise<void> {
+    const { flags } = await this.parse(CreateReactElements);
+
+    this.logger = new Logger(flags.verbose);
+
+    this.logger.section('📦 Creating package.json files for React elements');
+
+    const elements = await readdir(ELEMENTS_REACT_DIR);
+    let created = 0;
+    let skipped = 0;
+
+    for (const element of elements) {
+      const elementDir = join(ELEMENTS_REACT_DIR, element);
+      const packageJsonPath = join(elementDir, 'package.json');
+
+      // Skip if not a directory
+      const statResult = await fsStat(elementDir).catch(() => null);
+      if (!statResult?.isDirectory()) {
+        continue;
+      }
+
+      // Skip if package.json already exists
+      if (existsSync(packageJsonPath)) {
+        this.logger.info(`  ⏭️  ${element}: package.json already exists`);
+        skipped++;
+        continue;
+      }
+
+      // Scan for dependencies
+      const { deps, peerDeps } = await this.scanElement(elementDir);
+
+      // Add controller package as a dependency
+      const controllerPkg = `@pie-element/${element}-controller`;
+      deps.add(controllerPkg);
+
+      // Generate package.json
+      const packageContent = this.generatePackageJson(
+        element,
+        Array.from(deps),
+        Array.from(peerDeps)
+      );
+
+      // Write package.json
+      await writeFile(packageJsonPath, packageContent, 'utf-8');
+
+      // Generate vite.config.ts
+      const viteConfigPath = join(elementDir, 'vite.config.ts');
+      if (!existsSync(viteConfigPath)) {
+        await writeFile(viteConfigPath, this.generateViteConfig(), 'utf-8');
+      }
+
+      // Generate tsconfig.json
+      const tsconfigPath = join(elementDir, 'tsconfig.json');
+      if (!existsSync(tsconfigPath)) {
+        await writeFile(tsconfigPath, this.generateTsConfig(), 'utf-8');
+      }
+
+      this.logger.success(
+        `  ✅ ${element}: Created package.json (${deps.size} deps, ${peerDeps.size} peer deps)`
+      );
+      created++;
+    }
+
+    this.logger.section(`\n📊 Summary: ${created} created, ${skipped} skipped`);
+  }
+
+  private async scanElement(elementDir: string): Promise<ElementDeps> {
+    const srcDir = join(elementDir, 'src');
+    const deps = new Set<string>();
+    const peerDeps = new Set<string>();
+
+    if (!existsSync(srcDir)) {
+      return { deps, peerDeps };
+    }
+
+    // Recursively scan all .ts and .tsx files
+    const scanDir = async (dir: string): Promise<void> => {
+      const items = await readdir(dir, { withFileTypes: true });
+
+      for (const item of items) {
+        const itemPath = join(dir, item.name);
+
+        if (item.isDirectory()) {
+          await scanDir(itemPath);
+        } else if (item.name.endsWith('.ts') || item.name.endsWith('.tsx')) {
+          const content = await readFile(itemPath, 'utf-8');
+          const fileDeps = this.extractDeps(content);
+
+          for (const dep of fileDeps.deps) deps.add(dep);
+          for (const dep of fileDeps.peerDeps) peerDeps.add(dep);
+        }
+      }
+    };
+
+    await scanDir(srcDir);
+
+    return { deps, peerDeps };
+  }
+
+  private extractDeps(content: string): { deps: string[]; peerDeps: string[] } {
+    const deps = new Set<string>();
+    const peerDeps = new Set<string>();
+
+    // Match import statements
+    const importRegex = /^import .* from ['"]([^'"]+)['"]/gm;
+    const matches = content.matchAll(importRegex);
+
+    for (const match of matches) {
+      const dep = match[1];
+
+      // Skip relative imports
+      if (dep.startsWith('.')) continue;
+
+      // React is a peer dependency
+      if (dep === 'react' || dep.startsWith('react/')) {
+        peerDeps.add('react');
+        continue;
+      }
+      if (dep === 'react-dom' || dep.startsWith('react-dom/')) {
+        peerDeps.add('react-dom');
+        continue;
+      }
+
+      // Add @pie-lib packages
+      if (dep.startsWith('@pie-lib/')) {
+        deps.add(dep.split('/').slice(0, 2).join('/'));
+      }
+      // Add @pie-element packages (controller packages)
+      else if (dep.startsWith('@pie-element/')) {
+        deps.add(dep.split('/').slice(0, 2).join('/'));
+      }
+      // Add other scoped packages
+      else if (dep.startsWith('@')) {
+        deps.add(dep.split('/').slice(0, 2).join('/'));
+      }
+      // Add non-scoped packages
+      else if (!dep.includes('/')) {
+        deps.add(dep);
+      } else {
+        // Package with sub-path (e.g., lodash/get)
+        deps.add(dep.split('/')[0]);
+      }
+    }
+
+    return {
+      deps: Array.from(deps).sort(),
+      peerDeps: Array.from(peerDeps).sort(),
+    };
+  }
+
+  private generatePackageJson(name: string, deps: string[], peerDeps: string[]): string {
+    const dependencies: Record<string, string> = {};
+    const peerDependencies: Record<string, string> = {};
+
+    // Add dependencies (use * for external deps, they're in root package.json)
+    for (const dep of deps) {
+      // Use workspace protocol for internal packages
+      if (dep.startsWith('@pie-element/')) {
+        dependencies[dep] = 'workspace:*';
+      } else {
+        dependencies[dep] = '*';
+      }
+    }
+
+    // Add peer dependencies
+    for (const dep of peerDeps) {
+      peerDependencies[dep] = '^18.0.0';
+    }
+
+    const pkg = {
+      name: `@pie-element/${name}`,
+      version: '0.1.0',
+      description: `React implementation of ${name} element synced from pie-elements`,
+      type: 'module',
+      main: './dist/index.js',
+      types: './dist/index.d.ts',
+      exports: {
+        '.': {
+          types: './dist/index.d.ts',
+          default: './dist/index.js',
+        },
+        './delivery': {
+          types: './dist/delivery/index.d.ts',
+          default: './dist/delivery/index.js',
+        },
+        './configure': {
+          types: './dist/configure/index.d.ts',
+          default: './dist/configure/index.js',
+        },
+        './controller': {
+          types: './dist/controller/index.d.ts',
+          default: './dist/controller/index.js',
+        },
+      },
+      files: ['dist', 'src'],
+      scripts: {
+        dev: 'vite',
+        build: 'vite build && tsc --emitDeclarationOnly',
+        test: 'vitest run',
+        lint: 'biome check .',
+        'lint:fix': 'biome check --write .',
+      },
+      dependencies: Object.keys(dependencies).length > 0 ? dependencies : undefined,
+      peerDependencies: Object.keys(peerDependencies).length > 0 ? peerDependencies : undefined,
+      devDependencies: {
+        '@types/react': '^18.2.0',
+        '@types/react-dom': '^18.2.0',
+        '@vitejs/plugin-react': '^4.2.0',
+        typescript: '^5.9.3',
+        vite: '^6.0.0',
+        vitest: '^2.1.0',
+      },
+      keywords: ['pie', 'pie-element', 'react', name, 'assessment'],
+      license: 'ISC',
+      repository: {
+        type: 'git',
+        url: 'https://github.com/pie-framework/pie-elements-ng.git',
+        directory: `packages/elements-react/${name}`,
+      },
+    };
+
+    // Remove undefined fields
+    const cleaned = JSON.parse(JSON.stringify(pkg));
+
+    return `${JSON.stringify(cleaned, null, 2)}\n`;
+  }
+
+  private generateViteConfig(): string {
+    return `import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: {
+        index: resolve(__dirname, 'src/index.ts'),
+        'delivery/index': resolve(__dirname, 'src/index.ts'),
+        'configure/index': resolve(__dirname, 'src/configure/index.ts'),
+      },
+      formats: ['es'],
+    },
+    rollupOptions: {
+      external: [
+        /^react($|\\/)/,
+        /^react-dom($|\\/)/,
+        /^@pie-lib/,
+        /^@pie-element/,
+        /^@pie-framework/,
+        /^@mui/,
+      ],
+      output: {
+        preserveModules: true,
+        preserveModulesRoot: 'src',
+      },
+    },
+  },
+});
+`;
+  }
+
+  private generateTsConfig(): string {
+    return `{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx",
+    "declaration": true,
+    "emitDeclarationOnly": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts", "**/*.test.tsx"]
+}
+`;
+  }
+}

package/src/commands/packages/enable-publishing.ts

@@ -0,0 +1,161 @@
+import { Command, Flags } from '@oclif/core';
+import { Logger } from '../../utils/logger.js';
+import { loadPackageJson, writePackageJson } from '../../utils/package-json.js';
+import { glob } from 'glob';
+import { readFile } from 'node:fs/promises';
+
+interface ChangesetConfig {
+  $schema?: string;
+  changelog: string;
+  commit: boolean;
+  fixed: string[];
+  linked: string[];
+  access: string;
+  baseBranch: string;
+  updateInternalDependencies: string;
+  ignore: string[];
+}
+
+const REACT_PACKAGE_PATTERNS = [
+  'packages/elements-react/*/package.json',
+  'packages/lib-react/*/package.json',
+];
+
+const CHANGESET_CONFIG_PATH = '.changeset/config.json';
+
+export default class EnablePublishing extends Command {
+  static override description = 'Enable React package publishing by removing private flags';
+
+  static override examples = [
+    '<%= config.bin %> <%= command.id %> --dry-run',
+    '<%= config.bin %> <%= command.id %>',
+  ];
+
+  static override flags = {
+    'dry-run': Flags.boolean({
+      description: 'Show what would be changed without making any changes',
+      default: false,
+    }),
+  };
+
+  private logger = new Logger();
+
+  public async run(): Promise<void> {
+    const { flags } = await this.parse(EnablePublishing);
+
+    this.logger.section('🔄 React Package Publishing Migration');
+
+    if (flags['dry-run']) {
+      this.logger.info('🔍 DRY RUN MODE - No changes will be made\n');
+    }
+
+    const changes: string[] = [];
+    let totalPackages = 0;
+
+    // Step 1: Find all React packages
+    this.logger.info('📦 Finding React packages...');
+    const packagePaths: string[] = [];
+    for (const pattern of REACT_PACKAGE_PATTERNS) {
+      const matches = await glob(pattern);
+      packagePaths.push(...matches);
+    }
+
+    this.logger.info(`   Found ${packagePaths.length} React packages\n`);
+
+    // Step 2: Remove "private": true from package.json files
+    this.logger.info('🔓 Removing private flag from React packages...');
+    const packageNames: string[] = [];
+
+    for (const pkgPath of packagePaths) {
+      const pkg = await loadPackageJson(pkgPath);
+
+      packageNames.push(pkg.name);
+
+      if (pkg.private === true) {
+        totalPackages++;
+        this.logger.info(`   ✓ ${pkg.name}`);
+        changes.push(`Remove private flag from ${pkg.name}`);
+
+        if (!flags['dry-run']) {
+          // Remove the private field
+          delete pkg.private;
+
+          // Write back with proper formatting
+          await writePackageJson(pkgPath, pkg);
+        }
+      }
+    }
+
+    this.logger.info(`   Modified ${totalPackages} package.json files\n`);
+
+    // Step 3: Update .changeset/config.json
+    this.logger.info('⚙️  Updating changeset configuration...');
+    const changesetContent = await readFile(CHANGESET_CONFIG_PATH, 'utf-8');
+    const changesetConfig = JSON.parse(changesetContent) as ChangesetConfig;
+
+    // Filter out React packages from ignore list
+    const reactPackageSet = new Set(packageNames);
+    const originalIgnoreCount = changesetConfig.ignore.length;
+    const newIgnore = changesetConfig.ignore.filter((name) => !reactPackageSet.has(name));
+
+    const removedCount = originalIgnoreCount - newIgnore.length;
+    this.logger.info(`   Removing ${removedCount} packages from ignore list`);
+    changes.push(`Remove ${removedCount} React packages from changeset ignore list`);
+
+    if (!flags['dry-run']) {
+      changesetConfig.ignore = newIgnore;
+      await writePackageJson(CHANGESET_CONFIG_PATH, changesetConfig as any);
+    }
+
+    this.logger.info(`   Updated ${CHANGESET_CONFIG_PATH}\n`);
+
+    // Summary
+    this.logger.section('📋 Summary of Changes');
+
+    for (const change of changes) {
+      this.logger.info(`   • ${change}`);
+    }
+
+    this.logger.info(`\n   Total packages enabled for publishing: ${totalPackages}`);
+
+    if (flags['dry-run']) {
+      this.logger.warn('\n⚠️  This was a dry run. No files were modified.');
+      this.logger.info(
+        '   Run without --dry-run to apply these changes:\n   bun run cli packages:enable-publishing\n'
+      );
+    } else {
+      this.logger.success('\n✅ Migration complete!');
+      this.logger.info('\nNext steps:');
+      this.logger.info('1. Review the changes with: git diff');
+      this.logger.info('2. Create changesets for the React packages you want to publish:');
+      this.logger.info('   bun run changeset');
+      this.logger.info('3. Commit and push the changes:');
+      this.logger.info('   git add .');
+      this.logger.info('   git commit -m "chore: enable React package publishing"');
+      this.logger.info('   git push');
+      this.logger.info('4. Wait for the automated Version Packages PR and merge it to publish\n');
+    }
+
+    // Provide package list
+    this.logger.section('\n📦 Packages that will now be published');
+
+    const elementPackages = packageNames.filter((name) => name.startsWith('@pie-element/'));
+    const libPackages = packageNames.filter((name) => name.startsWith('@pie-lib/'));
+
+    if (elementPackages.length > 0) {
+      this.logger.info('React Elements:');
+      for (const name of elementPackages.sort()) {
+        this.logger.info(`   • ${name}`);
+      }
+      this.log();
+    }
+
+    if (libPackages.length > 0) {
+      this.logger.info('React Libraries:');
+      for (const name of libPackages.sort()) {
+        this.logger.info(`   • ${name}`);
+      }
+      this.log();
+    }
+  }
+}