@flowgram.ai/form-materials 0.4.2 → 0.4.4

package/bin/index.ts

@@ -72,17 +72,6 @@ program
     let { packagesToInstall } = copyMaterial(material, projectInfo);
 
     // 4. Install the dependencies
-    packagesToInstall = packagesToInstall.map((_pkg) => {
-      if (
-        _pkg.startsWith(`@flowgram.ai/`) &&
-        projectInfo.flowgramVersion !== 'workspace:*' &&
-        !_pkg.endsWith(`@${projectInfo.flowgramVersion}`)
-      ) {
-        return `${_pkg}@${projectInfo.flowgramVersion}`;
-      }
-      return _pkg;
-    });
-
     console.log(chalk.bold('These npm dependencies will be added to your project'));
     console.log(packagesToInstall);
     installDependencies(packagesToInstall, projectInfo);

package/bin/materials.ts

@@ -61,12 +61,21 @@ export function listAllMaterials(): Material[] {
   return _materials;
 }
 
+export const getFormMaterialDependencies = (): Record<string, string> => {
+  const packageJsonPath: string = path.join(__dirname, '..', 'package.json');
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+  return packageJson.dependencies;
+};
+
 export const copyMaterial = (
   material: Material,
   projectInfo: ProjectInfo
 ): {
   packagesToInstall: string[];
 } => {
+  const formMaterialDependencies = getFormMaterialDependencies();
+
   const sourceDir: string = material.path;
   const materialRoot: string = path.join(
     projectInfo.projectPath,
@@ -92,10 +101,28 @@ export const copyMaterial = (
               { ...importDeclaration, source: '@flowgram.ai/form-materials' },
             ])
           );
+          if (projectInfo.flowgramVersion !== 'workspace:*') {
+            packagesToInstall.add(`@flowgram.ai/form-materials@${projectInfo.flowgramVersion}`);
+            continue;
+          }
           packagesToInstall.add('@flowgram.ai/form-materials');
         } else if (!source.startsWith('.') && !source.startsWith('react')) {
-          // check if is third party npm packages
-          packagesToInstall.add(source);
+          // check if is in form material dependencies
+          const [dep, version] =
+            Object.entries(formMaterialDependencies).find(([_key]) => source.startsWith(_key)) ||
+            [];
+          if (!dep) {
+            continue;
+          }
+          if (version === 'workspace:*') {
+            if (projectInfo.flowgramVersion !== 'workspace:*') {
+              packagesToInstall.add(`${dep}@${projectInfo.flowgramVersion}`);
+            } else {
+              packagesToInstall.add(dep);
+            }
+          } else {
+            packagesToInstall.add(`${dep}@${version}`);
+          }
         }
       }
     }

package/dist/esm/index.js

@@ -183,13 +183,13 @@ var FlowValueUtils;
     return;
   }
   FlowValueUtils2.traverse = traverse;
-  function getTemplateKeyPaths2(value) {
-    const keyPathReg = /{{(.*?)}}/g;
+  function getTemplateKeyPaths(value) {
+    const keyPathReg = /\{\{([^\}\{]+)\}\}/g;
     return uniq(value.content?.match(keyPathReg) || []).map(
       (_keyPath) => _keyPath.slice(2, -2).split(".")
     );
   }
-  FlowValueUtils2.getTemplateKeyPaths = getTemplateKeyPaths2;
+  FlowValueUtils2.getTemplateKeyPaths = getTemplateKeyPaths;
   function inferConstantJsonSchema(value) {
     if (value?.schema) {
       return value.schema;
@@ -1052,12 +1052,24 @@ function TypeSelector(props) {
     }),
     []
   );
+  const isDisabled = readonly || disabled;
   return /* @__PURE__ */ React13.createElement(
     Cascader,
     {
-      disabled: readonly || disabled,
+      disabled: isDisabled,
       size: "small",
-      triggerRender: () => /* @__PURE__ */ React13.createElement(IconButton, { size: "small", style, disabled: readonly || disabled, icon }),
+      triggerRender: () => /* @__PURE__ */ React13.createElement(
+        IconButton,
+        {
+          size: "small",
+          style: {
+            ...isDisabled ? { pointerEvents: "none" } : {},
+            ...style || {}
+          },
+          disabled: isDisabled,
+          icon
+        }
+      ),
       treeData: options,
       value: selectValue,
       leafOnly: true,
@@ -1436,7 +1448,7 @@ function PropertyEdit(props) {
     BlurInput,
     {
       disabled: readonly,
-      placeholder: config?.placeholder ?? "Input Variable Name",
+      placeholder: config?.placeholder ?? I18n9.t("Input Variable Name"),
       size: "small",
       value: name,
       onChange: (value2) => onChange("name", value2)
@@ -1541,7 +1553,10 @@ function BatchVariableSelector(props) {
 
 // src/components/dynamic-value-input/index.tsx
 import React20 from "react";
-import { JsonSchemaUtils as JsonSchemaUtils4 } from "@flowgram.ai/json-schema";
+import {
+  JsonSchemaUtils as JsonSchemaUtils4,
+  useTypeManager as useTypeManager3
+} from "@flowgram.ai/json-schema";
 import { IconButton as IconButton3 } from "@douyinfe/semi-ui";
 import { IconSetting } from "@douyinfe/semi-icons";
 
@@ -1651,6 +1666,11 @@ function useIncludeSchema(schemaFromProps) {
 }
 
 // src/components/dynamic-value-input/index.tsx
+var DEFAULT_VALUE = {
+  type: "constant",
+  content: "",
+  schema: { type: "string" }
+};
 function DynamicValueInput({
   value,
   onChange,
@@ -1662,6 +1682,7 @@ function DynamicValueInput({
   const refVariable = useRefVariable(value);
   const [selectSchema, setSelectSchema] = useSelectSchema(schemaFromProps, constantProps, value);
   const includeSchema = useIncludeSchema(schemaFromProps);
+  const typeManager = useTypeManager3();
   const renderTypeSelector = () => {
     if (schemaFromProps) {
       return /* @__PURE__ */ React20.createElement(TypeSelector, { value: schemaFromProps, readonly: true });
@@ -1676,20 +1697,18 @@ function DynamicValueInput({
         value: selectSchema,
         onChange: (_v) => {
           setSelectSchema(_v || { type: "string" });
-          let content;
+          const schema = _v || { type: "string" };
+          let content = typeManager.getDefaultValue(schema);
           if (_v?.type === "object") {
             content = "{}";
           }
           if (_v?.type === "array") {
             content = "[]";
           }
-          if (_v?.type === "boolean") {
-            content = false;
-          }
           onChange({
             type: "constant",
             content,
-            schema: _v || { type: "string" }
+            schema
           });
         },
         readonly
@@ -1703,7 +1722,7 @@ function DynamicValueInput({
         {
           style: { width: "100%" },
           value: value?.content,
-          onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+          onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : DEFAULT_VALUE),
           includeSchema,
           readonly
         }
@@ -1721,7 +1740,7 @@ function DynamicValueInput({
           InjectVariableSelector,
           {
             style: { width: "100%" },
-            onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : void 0),
+            onChange: (_v) => onChange(_v ? { type: "ref", content: _v } : DEFAULT_VALUE),
             includeSchema,
             readonly
           }
@@ -2367,8 +2386,16 @@ function VariableTree() {
     if (!range) {
       return;
     }
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === "{") {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === "}") {
+      to++;
+    }
     editor.replaceText({
-      ...range,
+      from,
+      to,
       text: "{{" + variablePath + "}}"
     });
     setVisible(false);
@@ -2540,7 +2567,7 @@ function VariableTagInject() {
   const scope = useCurrentScope();
   useLayoutEffect4(() => {
     const atMatcher = new MatchDecorator({
-      regexp: /\{\{([^\}]+)\}\}/g,
+      regexp: /\{\{([^\}\{]+)\}\}/g,
       decoration: (match) => Decoration.replace({
         widget: new VariableTagWidget({
           keyPath: match[1]?.split(".") ?? [],
@@ -2593,7 +2620,7 @@ import {
 
 // src/components/prompt-editor-with-inputs/inputs-picker.tsx
 import React28, { useMemo as useMemo9 } from "react";
-import { last as last2 } from "lodash";
+import { isPlainObject as isPlainObject2, last as last2 } from "lodash";
 import {
   ASTMatch as ASTMatch3,
   useScopeAvailable as useScopeAvailable3
@@ -2636,20 +2663,32 @@ function InputsPicker({
       children
     };
   };
-  const treeData = useMemo9(
-    () => Object.entries(inputsValues).map(([key, value]) => {
-      if (value?.type === "ref") {
+  const getTreeData = (value, keyPath) => {
+    const currKey = keyPath.join(".");
+    if (FlowValueUtils.isFlowValue(value)) {
+      if (FlowValueUtils.isRef(value)) {
         const variable = available.getByKeyPath(value.content || []);
         if (variable) {
-          return renderVariable(variable, [key]);
+          return renderVariable(variable, keyPath);
         }
       }
       return {
-        key,
-        value: key,
-        label: key
+        key: currKey,
+        value: currKey,
+        label: last2(keyPath)
       };
-    }),
+    }
+    if (isPlainObject2(value)) {
+      return {
+        key: currKey,
+        value: currKey,
+        label: last2(keyPath),
+        children: Object.entries(value).map(([key, value2]) => getTreeData(value2, [...keyPath, key])).filter(Boolean)
+      };
+    }
+  };
+  const treeData = useMemo9(
+    () => Object.entries(inputsValues).map(([key, value]) => getTreeData(value, [key])).filter(Boolean),
     []
   );
   return /* @__PURE__ */ React28.createElement(Tree2, { treeData, onSelect: (v) => onSelect(v) });
@@ -2666,6 +2705,13 @@ function InputsTree({ inputsValues }) {
     if (!range) {
       return;
     }
+    let { from, to } = range;
+    while (editor.$view.state.doc.sliceString(from - 1, from) === "{") {
+      from--;
+    }
+    while (editor.$view.state.doc.sliceString(to, to + 1) === "}") {
+      to++;
+    }
     editor.replaceText({
       ...range,
       text: "{{" + variablePath + "}}"
@@ -2905,7 +2951,7 @@ function VariableTagInject2() {
   const scope = useCurrentScope2();
   useLayoutEffect5(() => {
     const atMatcher = new MatchDecorator2({
-      regexp: /\{\{([^\}]+)\}\}/g,
+      regexp: /\{\{([^\}\{]+)\}\}/g,
       decoration: (match) => Decoration2.replace({
         widget: new VariableTagWidget2({
           keyPath: match[1]?.split(".") ?? [],
@@ -2939,6 +2985,7 @@ function VariableTagInject2() {
 }
 
 // src/components/json-editor-with-variables/index.tsx
+import { I18n as I18n13 } from "@flowgram.ai/editor";
 function findAllMatches(inputString, regex) {
   const globalRegex = new RegExp(
     regex,
@@ -2972,7 +3019,7 @@ function JsonEditorWithVariables(props) {
     CodeEditor,
     {
       languageId: "json",
-      activeLinePlaceholder: "Press '@' to Select variable",
+      activeLinePlaceholder: I18n13.t("Press '@' to Select variable"),
       ...props,
       options: {
         transformer,
@@ -2986,7 +3033,7 @@ function JsonEditorWithVariables(props) {
 
 // src/components/inputs-values/index.tsx
 import React34 from "react";
-import { I18n as I18n13 } from "@flowgram.ai/editor";
+import { I18n as I18n14 } from "@flowgram.ai/editor";
 import { Button as Button4, IconButton as IconButton4 } from "@douyinfe/semi-ui";
 import { IconDelete as IconDelete2, IconPlus as IconPlus3 } from "@douyinfe/semi-icons";
 
@@ -3027,7 +3074,7 @@ function InputsValues({
       size: "small",
       value: item.key,
       onChange: (v) => updateKey(item.id, v),
-      placeholder: I18n13.t("Input Key")
+      placeholder: I18n14.t("Input Key")
     }
   ), /* @__PURE__ */ React34.createElement(
     InjectDynamicValueInput,
@@ -3052,7 +3099,20 @@ function InputsValues({
       size: "small",
       onClick: () => remove(item.id)
     }
-  )))), /* @__PURE__ */ React34.createElement(Button4, { disabled: readonly, icon: /* @__PURE__ */ React34.createElement(IconPlus3, null), size: "small", onClick: () => add() }, I18n13.t("Add")));
+  )))), /* @__PURE__ */ React34.createElement(
+    Button4,
+    {
+      disabled: readonly,
+      icon: /* @__PURE__ */ React34.createElement(IconPlus3, null),
+      size: "small",
+      onClick: () => add({
+        type: "constant",
+        content: "",
+        schema: { type: "string" }
+      })
+    },
+    I18n14.t("Add")
+  ));
 }
 
 // src/components/display-schema-tree/index.tsx
@@ -3282,7 +3342,7 @@ function DisplayFlowValue({ value, title, showIconInTree }) {
 
 // src/components/display-inputs-values/index.tsx
 import React39, { useMemo as useMemo11 } from "react";
-import { isPlainObject as isPlainObject2 } from "lodash";
+import { isPlainObject as isPlainObject3 } from "lodash";
 import { useScopeAvailable as useScopeAvailable5 } from "@flowgram.ai/editor";
 
 // src/components/display-inputs-values/styles.ts
@@ -3300,7 +3360,7 @@ function DisplayInputsValues({ value, showIconInTree }) {
     if (FlowValueUtils.isFlowValue(value2)) {
       return /* @__PURE__ */ React39.createElement(DisplayFlowValue, { key, title: key, value: value2, showIconInTree });
     }
-    if (isPlainObject2(value2)) {
+    if (isPlainObject3(value2)) {
       return /* @__PURE__ */ React39.createElement(
         DisplayInputsValueAllInTag,
         {
@@ -3450,7 +3510,7 @@ function AssignRows(props) {
 
 // src/components/inputs-values-tree/index.tsx
 import React45 from "react";
-import { I18n as I18n15 } from "@flowgram.ai/editor";
+import { I18n as I18n16 } from "@flowgram.ai/editor";
 import { Button as Button6 } from "@douyinfe/semi-ui";
 import { IconPlus as IconPlus5 } from "@douyinfe/semi-icons";
 
@@ -3560,16 +3620,16 @@ var IconAddChildren2 = () => /* @__PURE__ */ React43.createElement(Icon4, { size
 
 // src/components/inputs-values-tree/row.tsx
 import React44, { useMemo as useMemo13, useState as useState10 } from "react";
-import { I18n as I18n14 } from "@flowgram.ai/editor";
+import { I18n as I18n15 } from "@flowgram.ai/editor";
 import { IconButton as IconButton6, Input as Input7 } from "@douyinfe/semi-ui";
 import { IconChevronDown as IconChevronDown2, IconChevronRight as IconChevronRight2, IconDelete as IconDelete3 } from "@douyinfe/semi-icons";
 
 // src/components/inputs-values-tree/hooks/use-child-list.tsx
 import { useMemo as useMemo12 } from "react";
-import { isPlainObject as isPlainObject3 } from "lodash";
+import { isPlainObject as isPlainObject4 } from "lodash";
 function useChildList(value, onChange) {
   const canAddField = useMemo12(() => {
-    if (!isPlainObject3(value)) {
+    if (!isPlainObject4(value)) {
       return false;
     }
     if (FlowValueUtils.isFlowValue(value)) {
@@ -3578,7 +3638,7 @@ function useChildList(value, onChange) {
     return true;
   }, [value]);
   const objectListValue = useMemo12(() => {
-    if (isPlainObject3(value)) {
+    if (isPlainObject4(value)) {
       if (FlowValueUtils.isFlowValue(value)) {
         return void 0;
       }
@@ -3617,7 +3677,7 @@ var AddObjectChildStrategy = {
       size: "small",
       disabled: true,
       style: { pointerEvents: "none" },
-      value: I18n14.t("Configure via child fields")
+      value: I18n15.t("Configure via child fields")
     }
   )
 };
@@ -3658,7 +3718,7 @@ function InputValueRow(props) {
       size: "small",
       value: keyName,
       onChange: (v) => onUpdateKey?.(v),
-      placeholder: I18n14.t("Input Key")
+      placeholder: I18n15.t("Input Key")
     }
   ), /* @__PURE__ */ React44.createElement(
     InjectDynamicValueInput,
@@ -3681,7 +3741,11 @@ function InputValueRow(props) {
       theme: "borderless",
       icon: /* @__PURE__ */ React44.createElement(IconAddChildren2, null),
       onClick: () => {
-        add();
+        add({
+          type: "constant",
+          content: "",
+          schema: { type: "string" }
+        });
         setCollapse(true);
       }
     }
@@ -3746,9 +3810,15 @@ function InputsValuesTree(props) {
       disabled: readonly,
       icon: /* @__PURE__ */ React45.createElement(IconPlus5, null),
       size: "small",
-      onClick: add
+      onClick: () => {
+        add({
+          type: "constant",
+          content: "",
+          schema: { type: "string" }
+        });
+      }
     },
-    I18n15.t("Add")
+    I18n16.t("Add")
   ));
 }
 
@@ -4129,7 +4199,7 @@ var createInferAssignPlugin = defineFormPluginCreator3({
 });
 
 // src/validate/validate-flow-value/index.tsx
-import { isNil, uniq as uniq2 } from "lodash";
+import { isNil } from "lodash";
 import { FeedbackLevel, getNodeScope as getNodeScope7 } from "@flowgram.ai/editor";
 function validateFlowValue(value, ctx) {
   const { node, required, errorMessages } = ctx;
@@ -4153,7 +4223,7 @@ function validateFlowValue(value, ctx) {
     }
   }
   if (value?.type === "template") {
-    const allRefs = getTemplateKeyPaths(value);
+    const allRefs = FlowValueUtils.getTemplateKeyPaths(value);
     for (const ref of allRefs) {
       const variable = getNodeScope7(node).available.getByKeyPath(ref);
       if (!variable) {
@@ -4166,12 +4236,6 @@ function validateFlowValue(value, ctx) {
   }
   return void 0;
 }
-function getTemplateKeyPaths(value) {
-  const keyPathReg = /{{(.*?)}}/g;
-  return uniq2(value.content?.match(keyPathReg) || []).map(
-    (_keyPath) => _keyPath.slice(2, -2).split(".")
-  );
-}
 export {
   AssignRow,
   AssignRows,
@@ -4225,6 +4289,7 @@ export {
   provideBatchOutputsEffect,
   provideJsonSchemaOutputs,
   syncVariableTitle,
+  useObjectList,
   useTypeManager,
   useVariableTree,
   validateFlowValue,