@flowgram.ai/form-materials 0.2.4 → 0.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,30 +1,31 @@
1
- #!/usr/bin/env node
1
+ #!/usr/bin/env -S npx tsx@latest
2
2
 
3
- import chalk from 'chalk';
4
- import { Command } from 'commander';
5
3
  import inquirer from 'inquirer';
4
+ import { Command } from 'commander';
5
+ import chalk from 'chalk';
6
6
 
7
- import { bfsMaterials, copyMaterial, listAllMaterials } from './materials.js';
8
- import { getProjectInfo, installDependencies } from './project.js';
7
+ import { getProjectInfo, installDependencies, ProjectInfo } from './project.js';
8
+ import { bfsMaterials, copyMaterial, listAllMaterials, Material } from './materials.js';
9
9
 
10
10
  const program = new Command();
11
11
 
12
12
  program
13
- .version('1.0.0')
13
+ .version('1.0.1')
14
14
  .description('Add official materials to your project')
15
15
  .argument('[materialName]', 'Optional material name to skip selection (format: type/name)')
16
- .action(async (materialName) => {
16
+ .action(async (materialName?: string) => {
17
+ // materialName can be undefined
17
18
  console.log(chalk.bgGreenBright('Welcome to @flowgram.ai/form-materials CLI!'));
18
19
 
19
- const projectInfo = getProjectInfo();
20
+ const projectInfo: ProjectInfo = getProjectInfo();
20
21
 
21
22
  console.log(chalk.bold('Project Info:'));
22
23
  console.log(chalk.black(` - Flowgram Version: ${projectInfo.flowgramVersion}`));
23
24
  console.log(chalk.black(` - Project Path: ${projectInfo.projectPath}`));
24
25
 
25
- const materials = listAllMaterials();
26
+ const materials: Material[] = listAllMaterials();
26
27
 
27
- let material;
28
+ let material: Material | undefined; // material can be undefined
28
29
 
29
30
  // Check if materialName is provided and exists in materials
30
31
  if (materialName) {
@@ -42,7 +43,9 @@ program
42
43
  // If material not found or materialName not provided, prompt user to select
43
44
  if (!material) {
44
45
  // User select one component
45
- const result = await inquirer.prompt([
46
+ const result = await inquirer.prompt<{
47
+ material: Material; // Specify type for prompt result
48
+ }>([
46
49
  {
47
50
  type: 'list',
48
51
  name: 'material',
@@ -57,18 +60,23 @@ program
57
60
  ]);
58
61
  material = result.material;
59
62
  }
63
+ // Ensure material is defined before proceeding
64
+ if (!material) {
65
+ console.error(chalk.red('No material selected. Exiting.'));
66
+ process.exit(1);
67
+ }
60
68
 
61
69
  console.log(material);
62
70
 
63
71
  // 3. Get the component dependencies by BFS (include depMaterials and depPackages)
64
- const { allMaterials, allPackages } = bfsMaterials(material, materials);
72
+ const { allMaterials, allPackages } = bfsMaterials(material!, materials);
65
73
 
66
74
  // 4. Install the dependencies
67
75
  let flowgramPackage = `@flowgram.ai/editor`;
68
76
  if (projectInfo.flowgramVersion !== 'workspace:*') {
69
77
  flowgramPackage = `@flowgram.ai/editor@${projectInfo.flowgramVersion}`;
70
78
  }
71
- const packagesToInstall = [flowgramPackage, ...allPackages];
79
+ const packagesToInstall: string[] = [flowgramPackage, ...allPackages];
72
80
 
73
81
  console.log(chalk.bold('These npm dependencies will be added to your project'));
74
82
  console.log(packagesToInstall);
@@ -77,8 +85,9 @@ program
77
85
  // 5. Copy the materials to the project
78
86
  console.log(chalk.bold('These Materials will be added to your project'));
79
87
  console.log(allMaterials);
80
- allMaterials.forEach((material) => {
81
- copyMaterial(material, projectInfo);
88
+ allMaterials.forEach((mat: Material) => {
89
+ // Add type for mat
90
+ copyMaterial(mat, projectInfo);
82
91
  });
83
92
  });
84
93
 
@@ -0,0 +1,137 @@
1
+ import { fileURLToPath } from 'url';
2
+ import path from 'path';
3
+ import fs from 'fs';
4
+
5
+ import { ProjectInfo } from './project'; // Import ProjectInfo
6
+
7
+ const __filename = fileURLToPath(import.meta.url);
8
+ const __dirname = path.dirname(__filename);
9
+
10
+ // Added type definitions
11
+ export interface Material {
12
+ name: string;
13
+ type: string;
14
+ path: string;
15
+ depPackages?: string[];
16
+ depMaterials?: string[];
17
+ [key: string]: any; // For other properties from config.json
18
+ }
19
+
20
+ const _types: string[] = ['components', 'effects', 'utils', 'typings'];
21
+
22
+ export function listAllMaterials(): Material[] {
23
+ const _materials: Material[] = [];
24
+
25
+ for (const _type of _types) {
26
+ // 在 Node.js 中,import.meta.dirname 不可用,可使用 import.meta.url 结合 url 模块来获取目录路径
27
+
28
+ const materialsPath: string = path.join(__dirname, '..', 'src', _type);
29
+ _materials.push(
30
+ ...fs
31
+ .readdirSync(materialsPath)
32
+ .map((_path: string) => {
33
+ if (_path === 'index.ts') {
34
+ return null;
35
+ }
36
+
37
+ const configPath = path.join(materialsPath, _path, 'config.json');
38
+ // Check if config.json exists before reading
39
+ if (!fs.existsSync(configPath)) {
40
+ console.warn(
41
+ `Warning: config.json not found for material at ${path.join(materialsPath, _path)}`
42
+ );
43
+ return null;
44
+ }
45
+ const configContent = fs.readFileSync(configPath, 'utf8');
46
+ const config = JSON.parse(configContent);
47
+
48
+ return {
49
+ ...config,
50
+ name: _path, // Assuming the folder name is the material name
51
+ type: _type,
52
+ path: path.join(materialsPath, _path),
53
+ } as Material;
54
+ })
55
+ .filter((material): material is Material => material !== null)
56
+ );
57
+ }
58
+
59
+ return _materials;
60
+ }
61
+
62
+ interface BfsResult {
63
+ allMaterials: Material[];
64
+ allPackages: string[];
65
+ }
66
+
67
+ export function bfsMaterials(material: Material, _materials: Material[] = []): BfsResult {
68
+ function findConfigByName(name: string): Material | undefined {
69
+ return _materials.find(
70
+ (_config) => _config.name === name || `${_config.type}/${_config.name}` === name
71
+ );
72
+ }
73
+
74
+ const queue: (Material | undefined)[] = [material]; // Queue can hold undefined if findConfigByName returns undefined
75
+ const allMaterials = new Set<Material>();
76
+ const allPackages = new Set<string>();
77
+
78
+ while (queue.length > 0) {
79
+ const _material = queue.shift();
80
+ if (!_material || allMaterials.has(_material)) {
81
+ // Check if _material is defined
82
+ continue;
83
+ }
84
+ allMaterials.add(_material);
85
+
86
+ if (_material.depPackages) {
87
+ for (const _package of _material.depPackages) {
88
+ allPackages.add(_package);
89
+ }
90
+ }
91
+
92
+ if (_material.depMaterials) {
93
+ for (const _materialName of _material.depMaterials) {
94
+ const depMaterial = findConfigByName(_materialName);
95
+ if (depMaterial) {
96
+ // Ensure dependent material is found before adding to queue
97
+ queue.push(depMaterial);
98
+ } else {
99
+ console.warn(
100
+ `Warning: Dependent material "${_materialName}" not found for material "${_material.name}".`
101
+ );
102
+ }
103
+ }
104
+ }
105
+ }
106
+
107
+ return {
108
+ allMaterials: Array.from(allMaterials),
109
+ allPackages: Array.from(allPackages),
110
+ };
111
+ }
112
+
113
+ export const copyMaterial = (material: Material, projectInfo: ProjectInfo): void => {
114
+ const sourceDir: string = material.path;
115
+ const materialRoot: string = path.join(
116
+ projectInfo.projectPath,
117
+ 'src',
118
+ 'form-materials',
119
+ `${material.type}`
120
+ );
121
+ const targetDir = path.join(materialRoot, material.name);
122
+ fs.cpSync(sourceDir, targetDir, { recursive: true });
123
+
124
+ let materialRootIndexTs: string = '';
125
+ const indexTsPath = path.join(materialRoot, 'index.ts');
126
+ if (fs.existsSync(indexTsPath)) {
127
+ materialRootIndexTs = fs.readFileSync(indexTsPath, 'utf8');
128
+ }
129
+ if (!materialRootIndexTs.includes(material.name)) {
130
+ fs.writeFileSync(
131
+ indexTsPath,
132
+ `${materialRootIndexTs}${materialRootIndexTs.endsWith('\n') ? '' : '\n'}export * from './${
133
+ material.name
134
+ }';\n`
135
+ );
136
+ }
137
+ };
@@ -1,10 +1,25 @@
1
- import { execSync } from 'child_process';
2
- import fs from 'fs';
3
1
  import path from 'path';
2
+ import fs from 'fs';
3
+ import { execSync } from 'child_process';
4
4
 
5
- export function getProjectInfo() {
5
+ // Added type definitions
6
+ interface PackageJson {
7
+ dependencies: { [key: string]: string };
8
+ devDependencies?: { [key: string]: string };
9
+ peerDependencies?: { [key: string]: string };
10
+ [key: string]: any;
11
+ }
12
+
13
+ export interface ProjectInfo {
14
+ projectPath: string;
15
+ packageJsonPath: string;
16
+ packageJson: PackageJson;
17
+ flowgramVersion: string;
18
+ }
19
+
20
+ export function getProjectInfo(): ProjectInfo {
6
21
  // get nearest package.json
7
- let projectPath = process.cwd();
22
+ let projectPath: string = process.cwd();
8
23
 
9
24
  while (projectPath !== '/' && !fs.existsSync(path.join(projectPath, 'package.json'))) {
10
25
  projectPath = path.join(projectPath, '..');
@@ -14,12 +29,11 @@ export function getProjectInfo() {
14
29
  throw new Error('Please run this command in a valid project');
15
30
  }
16
31
 
17
- const packageJsonPath = path.join(projectPath, 'package.json');
18
-
19
- const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
32
+ const packageJsonPath: string = path.join(projectPath, 'package.json');
33
+ const packageJson: PackageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
20
34
 
21
35
  // fixed layout or free layout
22
- const flowgramVersion =
36
+ const flowgramVersion: string | undefined =
23
37
  packageJson.dependencies['@flowgram.ai/fixed-layout-editor'] ||
24
38
  packageJson.dependencies['@flowgram.ai/free-layout-editor'] ||
25
39
  packageJson.dependencies['@flowgram.ai/editor'];
@@ -34,12 +48,12 @@ export function getProjectInfo() {
34
48
  projectPath,
35
49
  packageJsonPath,
36
50
  packageJson,
37
- flowgramVersion,
51
+ flowgramVersion, // TypeScript will ensure this is string due to the check above
38
52
  };
39
53
  }
40
54
 
41
- export function findRushJson(startPath) {
42
- let currentPath = startPath;
55
+ export function findRushJson(startPath: string): string | null {
56
+ let currentPath: string = startPath;
43
57
  while (currentPath !== '/' && !fs.existsSync(path.join(currentPath, 'rush.json'))) {
44
58
  currentPath = path.join(currentPath, '..');
45
59
  }
@@ -49,7 +63,7 @@ export function findRushJson(startPath) {
49
63
  return null;
50
64
  }
51
65
 
52
- export function installDependencies(packages, projectInfo) {
66
+ export function installDependencies(packages: string[], projectInfo: ProjectInfo): void {
53
67
  if (fs.existsSync(path.join(projectInfo.projectPath, 'yarn.lock'))) {
54
68
  execSync(`yarn add ${packages.join(' ')}`, { stdio: 'inherit' });
55
69
  return;
package/dist/index.js CHANGED
@@ -56,17 +56,17 @@ __export(src_exports, {
56
56
  module.exports = __toCommonJS(src_exports);
57
57
 
58
58
  // src/components/variable-selector/index.tsx
59
- var import_react3 = __toESM(require("react"), 1);
59
+ var import_react3 = __toESM(require("react"));
60
60
  var import_semi_icons2 = require("@douyinfe/semi-icons");
61
61
 
62
62
  // src/components/variable-selector/use-variable-tree.tsx
63
- var import_react2 = __toESM(require("react"), 1);
63
+ var import_react2 = __toESM(require("react"));
64
64
  var import_editor2 = require("@flowgram.ai/editor");
65
65
  var import_semi_ui = require("@douyinfe/semi-ui");
66
66
 
67
67
  // src/components/type-selector/constants.tsx
68
- var import_react = __toESM(require("react"), 1);
69
- var import_semi_icons = __toESM(require("@douyinfe/semi-icons"), 1);
68
+ var import_react = __toESM(require("react"));
69
+ var import_semi_icons = __toESM(require("@douyinfe/semi-icons"));
70
70
  var VariableTypeIcons = {
71
71
  custom: /* @__PURE__ */ import_react.default.createElement(
72
72
  "svg",
@@ -627,7 +627,7 @@ function useVariableTree(params) {
627
627
  }
628
628
 
629
629
  // src/components/variable-selector/styles.tsx
630
- var import_styled_components = __toESM(require("styled-components"), 1);
630
+ var import_styled_components = __toESM(require("styled-components"));
631
631
  var import_semi_ui2 = require("@douyinfe/semi-ui");
632
632
  var UIRootTitle = import_styled_components.default.span`
633
633
  margin-right: 4px;
@@ -745,7 +745,7 @@ var VariableSelector = ({
745
745
  };
746
746
 
747
747
  // src/components/type-selector/index.tsx
748
- var import_react4 = __toESM(require("react"), 1);
748
+ var import_react4 = __toESM(require("react"));
749
749
  var import_semi_ui3 = require("@douyinfe/semi-ui");
750
750
  var getTypeSelectValue = (value) => {
751
751
  if (value?.type === "array" && value?.items) {
@@ -780,14 +780,14 @@ function TypeSelector(props) {
780
780
  }
781
781
 
782
782
  // src/components/json-schema-editor/index.tsx
783
- var import_react8 = __toESM(require("react"), 1);
783
+ var import_react8 = __toESM(require("react"));
784
784
  var import_semi_ui4 = require("@douyinfe/semi-ui");
785
785
  var import_semi_icons4 = require("@douyinfe/semi-icons");
786
786
 
787
787
  // src/components/json-schema-editor/styles.tsx
788
- var import_react5 = __toESM(require("react"), 1);
789
- var import_styled_components2 = __toESM(require("styled-components"), 1);
790
- var import_semi_icons3 = __toESM(require("@douyinfe/semi-icons"), 1);
788
+ var import_react5 = __toESM(require("react"));
789
+ var import_styled_components2 = __toESM(require("styled-components"));
790
+ var import_semi_icons3 = __toESM(require("@douyinfe/semi-icons"));
791
791
  var UIContainer = import_styled_components2.default.div`
792
792
  /* & .semi-input {
793
793
  background-color: #fff;
@@ -1027,8 +1027,8 @@ function usePropertiesEdit(value, onChange) {
1027
1027
  }
1028
1028
 
1029
1029
  // src/components/json-schema-editor/components/blur-input.tsx
1030
- var import_react7 = __toESM(require("react"), 1);
1031
- var import_input = __toESM(require("@douyinfe/semi-ui/lib/es/input"), 1);
1030
+ var import_react7 = __toESM(require("react"));
1031
+ var import_input = __toESM(require("@douyinfe/semi-ui/lib/es/input"));
1032
1032
  function BlurInput(props) {
1033
1033
  const [value, setValue] = (0, import_react7.useState)("");
1034
1034
  (0, import_react7.useEffect)(() => {
@@ -1162,7 +1162,7 @@ function PropertyEdit(props) {
1162
1162
  }
1163
1163
 
1164
1164
  // src/components/batch-variable-selector/index.tsx
1165
- var import_react9 = __toESM(require("react"), 1);
1165
+ var import_react9 = __toESM(require("react"));
1166
1166
  var import_editor3 = require("@flowgram.ai/editor");
1167
1167
  var batchVariableSchema = {
1168
1168
  type: "array",
@@ -1173,7 +1173,7 @@ function BatchVariableSelector(props) {
1173
1173
  }
1174
1174
 
1175
1175
  // src/components/constant-input/index.tsx
1176
- var import_react10 = __toESM(require("react"), 1);
1176
+ var import_react10 = __toESM(require("react"));
1177
1177
  var import_semi_ui5 = require("@douyinfe/semi-ui");
1178
1178
  var defaultStrategies = [
1179
1179
  {
@@ -1246,12 +1246,12 @@ function ConstantInput(props) {
1246
1246
  }
1247
1247
 
1248
1248
  // src/components/dynamic-value-input/index.tsx
1249
- var import_react11 = __toESM(require("react"), 1);
1249
+ var import_react11 = __toESM(require("react"));
1250
1250
  var import_semi_ui6 = require("@douyinfe/semi-ui");
1251
1251
  var import_semi_icons5 = require("@douyinfe/semi-icons");
1252
1252
 
1253
1253
  // src/components/dynamic-value-input/styles.tsx
1254
- var import_styled_components3 = __toESM(require("styled-components"), 1);
1254
+ var import_styled_components3 = __toESM(require("styled-components"));
1255
1255
  var UIContainer2 = import_styled_components3.default.div`
1256
1256
  display: flex;
1257
1257
  align-items: center;
@@ -1321,11 +1321,11 @@ function DynamicValueInput({
1321
1321
  }
1322
1322
 
1323
1323
  // src/components/condition-row/index.tsx
1324
- var import_react14 = __toESM(require("react"), 1);
1324
+ var import_react14 = __toESM(require("react"));
1325
1325
  var import_semi_ui8 = require("@douyinfe/semi-ui");
1326
1326
 
1327
1327
  // src/components/condition-row/styles.tsx
1328
- var import_styled_components4 = __toESM(require("styled-components"), 1);
1328
+ var import_styled_components4 = __toESM(require("styled-components"));
1329
1329
  var UIContainer3 = import_styled_components4.default.div`
1330
1330
  display: flex;
1331
1331
  align-items: center;
@@ -1550,7 +1550,7 @@ function useRule(left) {
1550
1550
  }
1551
1551
 
1552
1552
  // src/components/condition-row/hooks/useOp.tsx
1553
- var import_react13 = __toESM(require("react"), 1);
1553
+ var import_react13 = __toESM(require("react"));
1554
1554
  var import_semi_ui7 = require("@douyinfe/semi-ui");
1555
1555
  var import_semi_icons6 = require("@douyinfe/semi-icons");
1556
1556
  function useOp({ rule, op, onChange }) {
package/package.json CHANGED
@@ -1,10 +1,9 @@
1
1
  {
2
2
  "name": "@flowgram.ai/form-materials",
3
- "version": "0.2.4",
3
+ "version": "0.2.5",
4
4
  "homepage": "https://flowgram.ai/",
5
5
  "repository": "https://github.com/bytedance/flowgram.ai",
6
6
  "license": "MIT",
7
- "type": "module",
8
7
  "exports": {
9
8
  "types": "./dist/index.d.ts",
10
9
  "import": "./dist/esm/index.js",
@@ -14,7 +13,7 @@
14
13
  "module": "./dist/esm/index.js",
15
14
  "types": "./dist/index.d.ts",
16
15
  "bin": {
17
- "flowgram-form-materials": "./bin/index.js"
16
+ "flowgram-form-materials": "./bin/index.ts"
18
17
  },
19
18
  "files": [
20
19
  "dist",
@@ -31,12 +30,14 @@
31
30
  "chalk": "^5.3.0",
32
31
  "inquirer": "^9.2.7",
33
32
  "immer": "~10.1.1",
34
- "@flowgram.ai/editor": "0.2.4"
33
+ "@flowgram.ai/editor": "0.2.5"
35
34
  },
36
35
  "devDependencies": {
37
36
  "@types/lodash": "^4.14.137",
37
+ "@types/node": "^18",
38
38
  "@types/react": "^18",
39
39
  "@types/react-dom": "^18",
40
+ "@types/inquirer": "9.0.7",
40
41
  "@types/styled-components": "^5",
41
42
  "eslint": "^8.54.0",
42
43
  "react": "^18",
@@ -45,8 +46,8 @@
45
46
  "tsup": "^8.0.1",
46
47
  "typescript": "^5.0.4",
47
48
  "vitest": "^0.34.6",
48
- "@flowgram.ai/eslint-config": "0.2.4",
49
- "@flowgram.ai/ts-config": "0.2.4"
49
+ "@flowgram.ai/eslint-config": "0.2.5",
50
+ "@flowgram.ai/ts-config": "0.2.5"
50
51
  },
51
52
  "peerDependencies": {
52
53
  "react": ">=16.8",
package/bin/materials.js DELETED
@@ -1,93 +0,0 @@
1
- import fs from 'fs';
2
- import path from 'path';
3
-
4
- const _types = ['components', 'effects', 'utils', 'typings'];
5
-
6
- export function listAllMaterials() {
7
- const _materials = [];
8
-
9
- for (const _type of _types) {
10
- const materialsPath = path.join(import.meta.dirname, '..', 'src', _type);
11
- _materials.push(
12
- ...fs
13
- .readdirSync(materialsPath)
14
- .map((_path) => {
15
- if (_path === 'index.ts') {
16
- return null;
17
- }
18
-
19
- const config = fs.readFileSync(path.join(materialsPath, _path, 'config.json'), 'utf8');
20
- return {
21
- ...JSON.parse(config),
22
- type: _type,
23
- path: path.join(materialsPath, _path),
24
- };
25
- })
26
- .filter(Boolean)
27
- );
28
- }
29
-
30
- return _materials;
31
- }
32
-
33
- export function bfsMaterials(material, _materials = []) {
34
- function findConfigByName(name) {
35
- return _materials.find(
36
- (_config) => _config.name === name || `${_config.type}/${_config.name}` === name
37
- );
38
- }
39
-
40
- const queue = [material];
41
- const allMaterials = new Set();
42
- const allPackages = new Set();
43
-
44
- while (queue.length > 0) {
45
- const _material = queue.shift();
46
- if (allMaterials.has(_material)) {
47
- continue;
48
- }
49
- allMaterials.add(_material);
50
-
51
- if (_material.depPackages) {
52
- for (const _package of _material.depPackages) {
53
- allPackages.add(_package);
54
- }
55
- }
56
-
57
- if (_material.depMaterials) {
58
- for (const _materialName of _material.depMaterials) {
59
- queue.push(findConfigByName(_materialName));
60
- }
61
- }
62
- }
63
-
64
- return {
65
- allMaterials: Array.from(allMaterials),
66
- allPackages: Array.from(allPackages),
67
- };
68
- }
69
-
70
- export const copyMaterial = (material, projectInfo) => {
71
- const sourceDir = material.path;
72
- const materialRoot = path.join(
73
- projectInfo.projectPath,
74
- 'src',
75
- 'form-materials',
76
- `${material.type}`
77
- );
78
- const targetDir = path.join(materialRoot, material.name);
79
- fs.cpSync(sourceDir, targetDir, { recursive: true });
80
-
81
- let materialRootIndexTs = '';
82
- if (fs.existsSync(path.join(materialRoot, 'index.ts'))) {
83
- materialRootIndexTs = fs.readFileSync(path.join(materialRoot, 'index.ts'), 'utf8');
84
- }
85
- if (!materialRootIndexTs.includes(material.name)) {
86
- fs.writeFileSync(
87
- path.join(materialRoot, 'index.ts'),
88
- `${materialRootIndexTs}${materialRootIndexTs.endsWith('\n') ? '' : '\n'}export * from './${
89
- material.name
90
- }';\n`
91
- );
92
- }
93
- };
File without changes