@flowgram.ai/form-materials 0.1.0-alpha.10

package/bin/index.ts

@@ -0,0 +1,99 @@
+#!/usr/bin/env -S npx tsx@latest
+
+import inquirer from 'inquirer';
+import { Command } from 'commander';
+import chalk from 'chalk';
+
+import { getProjectInfo, installDependencies, ProjectInfo } from './project.js';
+import { bfsMaterials, copyMaterial, listAllMaterials, Material } from './materials.js';
+
+const program = new Command();
+
+program
+  .version('1.0.1')
+  .description('Add official materials to your project')
+  .argument('[materialName]', 'Optional material name to skip selection (format: type/name)')
+  .action(async (materialName?: string) => {
+    // materialName can be undefined
+    console.log(chalk.bgGreenBright('Welcome to @flowgram.ai/form-materials CLI!'));
+
+    const projectInfo: ProjectInfo = getProjectInfo();
+
+    console.log(chalk.bold('Project Info:'));
+    console.log(chalk.black(`  - Flowgram Version: ${projectInfo.flowgramVersion}`));
+    console.log(chalk.black(`  - Project Path: ${projectInfo.projectPath}`));
+
+    const materials: Material[] = listAllMaterials();
+
+    let material: Material | undefined; // material can be undefined
+
+    // Check if materialName is provided and exists in materials
+    if (materialName) {
+      const selectedMaterial = materials.find((m) => `${m.type}/${m.name}` === materialName);
+      if (selectedMaterial) {
+        material = selectedMaterial;
+        console.log(chalk.green(`Using material: ${materialName}`));
+      } else {
+        console.log(
+          chalk.yellow(`Material "${materialName}" not found. Please select from the list:`)
+        );
+      }
+    }
+
+    // If material not found or materialName not provided, prompt user to select
+    if (!material) {
+      // User select one component
+      const result = await inquirer.prompt<{
+        material: Material; // Specify type for prompt result
+      }>([
+        {
+          type: 'list',
+          name: 'material',
+          message: 'Select one material to add:',
+          choices: [
+            ...materials.map((_material) => ({
+              name: `${_material.type}/${_material.name}`,
+              value: _material,
+            })),
+          ],
+        },
+      ]);
+      material = result.material;
+    }
+    // Ensure material is defined before proceeding
+    if (!material) {
+      console.error(chalk.red('No material selected. Exiting.'));
+      process.exit(1);
+    }
+
+    console.log(material);
+
+    // 3. Get the component dependencies by BFS (include depMaterials and depPackages)
+    const { allMaterials, allPackages } = bfsMaterials(material!, materials);
+
+    // 4. Install the dependencies
+    let flowgramPackage = `@flowgram.ai/editor`;
+    if (projectInfo.flowgramVersion !== 'workspace:*') {
+      flowgramPackage = `@flowgram.ai/editor@${projectInfo.flowgramVersion}`;
+    }
+    const packagesToInstall: string[] = [flowgramPackage, ...allPackages];
+
+    console.log(chalk.bold('These npm dependencies will be added to your project'));
+    console.log(packagesToInstall);
+    installDependencies(packagesToInstall, projectInfo);
+
+    // 5. Copy the materials to the project
+    console.log(chalk.bold('These Materials will be added to your project'));
+    console.log(allMaterials);
+    copyMaterial(material, projectInfo, { overwrite: true });
+
+    allMaterials.forEach((mat: Material) => {
+      if (mat === material) {
+        return;
+      }
+      // Add type for mat
+      copyMaterial(mat, projectInfo, { overwrite: false });
+    });
+  });
+
+program.parse(process.argv);

package/bin/materials.ts

@@ -0,0 +1,156 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { fileURLToPath } from 'url';
+import path from 'path';
+import fs from 'fs';
+
+import { ProjectInfo } from './project'; // Import ProjectInfo
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Added type definitions
+export interface Material {
+  name: string;
+  type: string;
+  path: string;
+  depPackages?: string[];
+  depMaterials?: string[];
+  [key: string]: any; // For other properties from config.json
+}
+
+const _types: string[] = ['components', 'effects', 'utils', 'typings', 'form-plugins'];
+
+export function listAllMaterials(): Material[] {
+  const _materials: Material[] = [];
+
+  for (const _type of _types) {
+    // 在 Node.js 中，import.meta.dirname 不可用，可使用 import.meta.url 结合 url 模块来获取目录路径
+
+    const materialsPath: string = path.join(__dirname, '..', 'src', _type);
+    _materials.push(
+      ...fs
+        .readdirSync(materialsPath)
+        .map((_path: string) => {
+          if (_path === 'index.ts') {
+            return null;
+          }
+
+          const configPath = path.join(materialsPath, _path, 'config.json');
+          // Check if config.json exists before reading
+          if (!fs.existsSync(configPath)) {
+            console.warn(
+              `Warning: config.json not found for material at ${path.join(materialsPath, _path)}`
+            );
+            return null;
+          }
+          const configContent = fs.readFileSync(configPath, 'utf8');
+          const config = JSON.parse(configContent);
+
+          return {
+            ...config,
+            name: _path, // Assuming the folder name is the material name
+            type: _type,
+            path: path.join(materialsPath, _path),
+          } as Material;
+        })
+        .filter((material): material is Material => material !== null)
+    );
+  }
+
+  return _materials;
+}
+
+interface BfsResult {
+  allMaterials: Material[];
+  allPackages: string[];
+}
+
+export function bfsMaterials(material: Material, _materials: Material[] = []): BfsResult {
+  function findConfigByName(name: string): Material | undefined {
+    return _materials.find(
+      (_config) => _config.name === name || `${_config.type}/${_config.name}` === name
+    );
+  }
+
+  const queue: (Material | undefined)[] = [material]; // Queue can hold undefined if findConfigByName returns undefined
+  const allMaterials = new Set<Material>();
+  const allPackages = new Set<string>();
+
+  while (queue.length > 0) {
+    const _material = queue.shift();
+    if (!_material || allMaterials.has(_material)) {
+      // Check if _material is defined
+      continue;
+    }
+    allMaterials.add(_material);
+
+    if (_material.depPackages) {
+      for (const _package of _material.depPackages) {
+        allPackages.add(_package);
+      }
+    }
+
+    if (_material.depMaterials) {
+      for (const _materialName of _material.depMaterials) {
+        const depMaterial = findConfigByName(_materialName);
+        if (depMaterial) {
+          // Ensure dependent material is found before adding to queue
+          queue.push(depMaterial);
+        } else {
+          console.warn(
+            `Warning: Dependent material "${_materialName}" not found for material "${_material.name}".`
+          );
+        }
+      }
+    }
+  }
+
+  return {
+    allMaterials: Array.from(allMaterials),
+    allPackages: Array.from(allPackages),
+  };
+}
+
+export const copyMaterial = (
+  material: Material,
+  projectInfo: ProjectInfo,
+  {
+    overwrite,
+  }: {
+    overwrite?: boolean;
+  } = {}
+): void => {
+  const sourceDir: string = material.path;
+  const materialRoot: string = path.join(
+    projectInfo.projectPath,
+    'src',
+    'form-materials',
+    `${material.type}`
+  );
+  const targetDir = path.join(materialRoot, material.name);
+
+  if (!overwrite && fs.readdirSync(targetDir)?.length > 0) {
+    console.log(`Material ${material.name} already exists in ${materialRoot}, skip copying.`);
+    return;
+  }
+
+  fs.cpSync(sourceDir, targetDir, { recursive: true });
+
+  let materialRootIndexTs: string = '';
+  const indexTsPath = path.join(materialRoot, 'index.ts');
+  if (fs.existsSync(indexTsPath)) {
+    materialRootIndexTs = fs.readFileSync(indexTsPath, 'utf8');
+  }
+  if (!materialRootIndexTs.includes(material.name)) {
+    fs.writeFileSync(
+      indexTsPath,
+      `${materialRootIndexTs}${materialRootIndexTs.endsWith('\n') ? '' : '\n'}export * from './${
+        material.name
+      }';\n`
+    );
+  }
+};

package/bin/project.ts

@@ -0,0 +1,91 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import path from 'path';
+import fs from 'fs';
+import { execSync } from 'child_process';
+
+// Added type definitions
+interface PackageJson {
+  dependencies: { [key: string]: string };
+  devDependencies?: { [key: string]: string };
+  peerDependencies?: { [key: string]: string };
+  [key: string]: any;
+}
+
+export interface ProjectInfo {
+  projectPath: string;
+  packageJsonPath: string;
+  packageJson: PackageJson;
+  flowgramVersion: string;
+}
+
+export function getProjectInfo(): ProjectInfo {
+  // get nearest package.json
+  let projectPath: string = process.cwd();
+
+  while (projectPath !== '/' && !fs.existsSync(path.join(projectPath, 'package.json'))) {
+    projectPath = path.join(projectPath, '..');
+  }
+
+  if (projectPath === '/') {
+    throw new Error('Please run this command in a valid project');
+  }
+
+  const packageJsonPath: string = path.join(projectPath, 'package.json');
+  const packageJson: PackageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+  // fixed layout or free layout
+  const flowgramVersion: string | undefined =
+    packageJson.dependencies['@flowgram.ai/fixed-layout-editor'] ||
+    packageJson.dependencies['@flowgram.ai/free-layout-editor'] ||
+    packageJson.dependencies['@flowgram.ai/editor'];
+
+  if (!flowgramVersion) {
+    throw new Error(
+      'Please install @flowgram.ai/fixed-layout-editor or @flowgram.ai/free-layout-editor'
+    );
+  }
+
+  return {
+    projectPath,
+    packageJsonPath,
+    packageJson,
+    flowgramVersion, // TypeScript will ensure this is string due to the check above
+  };
+}
+
+export function findRushJson(startPath: string): string | null {
+  let currentPath: string = startPath;
+  while (currentPath !== '/' && !fs.existsSync(path.join(currentPath, 'rush.json'))) {
+    currentPath = path.join(currentPath, '..');
+  }
+  if (fs.existsSync(path.join(currentPath, 'rush.json'))) {
+    return path.join(currentPath, 'rush.json');
+  }
+  return null;
+}
+
+export function installDependencies(packages: string[], projectInfo: ProjectInfo): void {
+  if (fs.existsSync(path.join(projectInfo.projectPath, 'yarn.lock'))) {
+    execSync(`yarn add ${packages.join(' ')}`, { stdio: 'inherit' });
+    return;
+  }
+
+  if (fs.existsSync(path.join(projectInfo.projectPath, 'pnpm-lock.yaml'))) {
+    execSync(`pnpm add ${packages.join(' ')}`, { stdio: 'inherit' });
+    return;
+  }
+
+  //  rush monorepo
+  if (findRushJson(projectInfo.projectPath)) {
+    execSync(`rush add ${packages.map((pkg) => `--package ${pkg}`).join(' ')}`, {
+      stdio: 'inherit',
+    });
+    return;
+  }
+
+  execSync(`npm install ${packages.join(' ')}`, { stdio: 'inherit' });
+}