@flowgram.ai/form-materials 0.1.0-alpha.14 → 0.1.0-alpha.16

package/dist/esm/components/code-editor/editor-sql.mjs

@@ -0,0 +1,16 @@
+import { languages } from "@flowgram.ai/coze-editor/preset-code";
+import { mixLanguages } from "@flowgram.ai/coze-editor";
+import { CodeEditorFactory } from "./factory.mjs";
+const loadSqlLanguage = ()=>import("@flowgram.ai/coze-editor/language-sql").then((module)=>{
+        languages.register('sql', {
+            ...module.sql,
+            language: mixLanguages({
+                outerLanguage: module.sql.language
+            })
+        });
+    });
+const SQLCodeEditor = CodeEditorFactory(loadSqlLanguage, {
+    displayName: 'SQLCodeEditor',
+    fixLanguageId: 'sql'
+});
+export { SQLCodeEditor, loadSqlLanguage };

package/dist/esm/components/code-editor/editor-ts.mjs

@@ -0,0 +1,22 @@
+import { languages } from "@flowgram.ai/coze-editor/preset-code";
+import { CodeEditorFactory } from "./factory.mjs";
+const loadTypescriptLanguage = ()=>import("@flowgram.ai/coze-editor/language-typescript").then((module)=>{
+        languages.register("typescript", module.typescript);
+        const tsWorker = new Worker(new URL("@flowgram.ai/coze-editor/language-typescript/worker", import.meta.url), {
+            type: 'module'
+        });
+        module.typescript.languageService.initialize(tsWorker, {
+            compilerOptions: {
+                lib: [
+                    'es2015',
+                    'dom'
+                ],
+                noImplicitAny: false
+            }
+        });
+    });
+const TypeScriptCodeEditor = CodeEditorFactory(loadTypescriptLanguage, {
+    displayName: 'TypeScriptCodeEditor',
+    fixLanguageId: "typescript"
+});
+export { TypeScriptCodeEditor, loadTypescriptLanguage };

package/dist/esm/components/code-editor/editor.mjs

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import styled_components, { css } from "styled-components";
+import { ActiveLinePlaceholder, EditorProvider, createRenderer } from "@flowgram.ai/coze-editor/react";
+import preset_code from "@flowgram.ai/coze-editor/preset-code";
+import { EditorView } from "@codemirror/view";
+import { getSuffixByLanguageId } from "./utils.mjs";
+const OriginCodeEditor = createRenderer(preset_code, [
+    EditorView.theme({
+        '&.cm-focused': {
+            outline: 'none'
+        }
+    })
+]);
+const UIContainer = styled_components.div`
+  ${({ $mini })=>$mini && css`
+      height: 24px;
+    `}
+`;
+function BaseCodeEditor({ value, onChange, languageId = 'python', theme = 'light', children, placeholder, activeLinePlaceholder, options, readonly, mini }) {
+    const editorRef = useRef(null);
+    useEffect(()=>{
+        if (editorRef.current?.getValue() !== value) editorRef.current?.setValue(String(value || ''));
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ jsx(UIContainer, {
+        $mini: mini,
+        children: /*#__PURE__*/ jsx(EditorProvider, {
+            children: /*#__PURE__*/ jsxs(OriginCodeEditor, {
+                defaultValue: String(value || ''),
+                options: {
+                    uri: `file:///untitled${getSuffixByLanguageId(languageId)}`,
+                    languageId,
+                    theme,
+                    placeholder,
+                    readOnly: readonly,
+                    editable: !readonly,
+                    ...mini ? {
+                        lineNumbersGutter: false,
+                        foldGutter: false,
+                        minHeight: 24
+                    } : {},
+                    ...options || {}
+                },
+                didMount: (editor)=>{
+                    editorRef.current = editor;
+                },
+                onChange: (e)=>onChange?.(e.value),
+                children: [
+                    activeLinePlaceholder && /*#__PURE__*/ jsx(ActiveLinePlaceholder, {
+                        children: activeLinePlaceholder
+                    }),
+                    children
+                ]
+            })
+        })
+    });
+}
+export { BaseCodeEditor };

package/dist/esm/components/code-editor/factory.mjs

@@ -0,0 +1,36 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { languages } from "@flowgram.ai/coze-editor/preset-code";
+import { Skeleton } from "@douyinfe/semi-ui";
+import { lazySuspense } from "../../shared/index.mjs";
+const BaseCodeEditor = lazySuspense(()=>Promise.all([
+        import("./editor.mjs"),
+        import("./theme/index.mjs")
+    ]).then(([editorModule])=>({
+            default: editorModule.BaseCodeEditor
+        })));
+const CodeEditorFactory = (loadLanguage, { displayName, fixLanguageId })=>{
+    const EditorWithLoad = (props)=>{
+        const { languageId = fixLanguageId } = props;
+        if (!languageId) throw new Error('CodeEditorFactory: languageId is required');
+        const [loaded, setLoaded] = useState(useMemo(()=>!!languages.get(languageId), [
+            languageId
+        ]));
+        useEffect(()=>{
+            if (!loaded && loadLanguage) loadLanguage(languageId).then(()=>{
+                setLoaded(true);
+            });
+        }, [
+            languageId,
+            loaded
+        ]);
+        if (!loaded) return /*#__PURE__*/ jsx(Skeleton, {});
+        return /*#__PURE__*/ jsx(BaseCodeEditor, {
+            ...props,
+            languageId: fixLanguageId || languageId
+        });
+    };
+    EditorWithLoad.displayName = displayName;
+    return EditorWithLoad;
+};
+export { BaseCodeEditor, CodeEditorFactory };

package/dist/esm/components/code-editor/index.mjs

@@ -0,0 +1,8 @@
+import { CodeEditor } from "./editor-all.mjs";
+import { TypeScriptCodeEditor } from "./editor-ts.mjs";
+import { ShellCodeEditor } from "./editor-shell.mjs";
+import { JsonCodeEditor } from "./editor-json.mjs";
+import { SQLCodeEditor } from "./editor-sql.mjs";
+import { PythonCodeEditor } from "./editor-python.mjs";
+import { BaseCodeEditor } from "./editor.mjs";
+export { BaseCodeEditor, CodeEditor, JsonCodeEditor, PythonCodeEditor, SQLCodeEditor, ShellCodeEditor, TypeScriptCodeEditor };

package/dist/esm/components/code-editor/theme/dark.mjs

@@ -0,0 +1,221 @@
+import { createTheme, tags } from "@flowgram.ai/coze-editor/preset-code";
+const colors = {
+    background: '#24292e',
+    foreground: '#d1d5da',
+    selection: '#3392FF44',
+    cursor: '#c8e1ff',
+    dropdownBackground: '#24292e',
+    dropdownBorder: '#1b1f23',
+    activeLine: '#4d566022',
+    matchingBracket: '#888892',
+    keyword: '#9197F1',
+    storage: '#f97583',
+    variable: '#ffab70',
+    variableName: '#D9DCFA',
+    parameter: '#e1e4e8',
+    function: '#FFCA66',
+    string: '#FF9878',
+    constant: '#79b8ff',
+    type: '#79b8ff',
+    class: '#b392f0',
+    number: '#2EC7D9',
+    comment: '#568B2A',
+    heading: '#79b8ff',
+    invalid: '#f97583',
+    regexp: '#9ecbff',
+    propertyName: '#9197F1',
+    separator: '#888892',
+    gutters: '#888892',
+    moduleKeyword: '#CC4FD4'
+};
+const darkTheme = createTheme({
+    variant: 'dark',
+    settings: {
+        background: colors.background,
+        foreground: colors.foreground,
+        caret: colors.cursor,
+        selection: colors.selection,
+        gutterBackground: colors.background,
+        gutterForeground: colors.foreground,
+        gutterBorderColor: 'transparent',
+        gutterBorderWidth: 0,
+        lineHighlight: '#21262D',
+        bracketColors: [
+            '#FBBF24',
+            '#A78BFA',
+            '#7DD3FC'
+        ],
+        tooltip: {
+            backgroundColor: '#21262D',
+            color: '#E6EDF3',
+            border: '1px solid #30363D'
+        },
+        link: {
+            color: '#58A6FF'
+        },
+        completionItemHover: {
+            backgroundColor: '#21262D'
+        },
+        completionItemSelected: {
+            backgroundColor: colors.selection,
+            color: colors.foreground
+        },
+        completionItemIcon: {
+            color: '#8B949E'
+        },
+        completionItemLabel: {
+            color: '#E6EDF3'
+        },
+        completionItemInfo: {
+            color: '#8B949E'
+        },
+        completionItemDetail: {
+            color: '#6E7681'
+        }
+    },
+    styles: [
+        {
+            tag: tags.keyword,
+            color: colors.keyword
+        },
+        {
+            tag: tags.variableName,
+            color: colors.variableName
+        },
+        {
+            tag: [
+                tags.name,
+                tags.deleted,
+                tags.character,
+                tags.macroName
+            ],
+            color: colors.variable
+        },
+        {
+            tag: [
+                tags.propertyName
+            ],
+            color: colors.propertyName
+        },
+        {
+            tag: [
+                tags.processingInstruction,
+                tags.string,
+                tags.inserted,
+                tags.special(tags.string)
+            ],
+            color: colors.string
+        },
+        {
+            tag: [
+                tags["function"](tags.variableName),
+                tags["function"](tags.propertyName),
+                tags.labelName
+            ],
+            color: colors.function
+        },
+        {
+            tag: [
+                tags.moduleKeyword,
+                tags.controlKeyword
+            ],
+            color: colors.moduleKeyword
+        },
+        {
+            tag: [
+                tags.color,
+                tags.constant(tags.name),
+                tags.standard(tags.name)
+            ],
+            color: colors.constant
+        },
+        {
+            tag: tags.definition(tags.name),
+            color: colors.variable
+        },
+        {
+            tag: [
+                tags.className
+            ],
+            color: colors.class
+        },
+        {
+            tag: [
+                tags.number,
+                tags.changed,
+                tags.annotation,
+                tags.modifier,
+                tags.self,
+                tags.namespace
+            ],
+            color: colors.number
+        },
+        {
+            tag: [
+                tags.typeName
+            ],
+            color: colors.type,
+            fontStyle: colors.type
+        },
+        {
+            tag: [
+                tags.operatorKeyword
+            ],
+            color: colors.keyword
+        },
+        {
+            tag: [
+                tags.url,
+                tags.escape,
+                tags.regexp,
+                tags.link
+            ],
+            color: colors.regexp
+        },
+        {
+            tag: [
+                tags.meta,
+                tags.comment
+            ],
+            color: colors.comment
+        },
+        {
+            tag: tags.strong,
+            fontWeight: 'bold'
+        },
+        {
+            tag: tags.emphasis,
+            fontStyle: 'italic'
+        },
+        {
+            tag: tags.link,
+            textDecoration: 'underline'
+        },
+        {
+            tag: tags.heading,
+            fontWeight: 'bold',
+            color: colors.heading
+        },
+        {
+            tag: [
+                tags.atom,
+                tags.bool,
+                tags.special(tags.variableName)
+            ],
+            color: colors.variable
+        },
+        {
+            tag: tags.invalid,
+            color: colors.invalid
+        },
+        {
+            tag: tags.strikethrough,
+            textDecoration: 'line-through'
+        },
+        {
+            tag: tags.separator,
+            color: colors.separator
+        }
+    ]
+});
+export { colors, darkTheme };

package/dist/esm/components/code-editor/theme/index.mjs

@@ -0,0 +1,5 @@
+import { themes } from "@flowgram.ai/coze-editor/preset-code";
+import { lightTheme } from "./light.mjs";
+import { darkTheme } from "./dark.mjs";
+themes.register('dark', darkTheme);
+themes.register('light', lightTheme);

package/dist/esm/components/code-editor/theme/light.mjs

@@ -0,0 +1,207 @@
+import { createTheme, tags } from "@flowgram.ai/coze-editor/preset-code";
+const colors = {
+    background: '#f4f5f5',
+    foreground: '#444d56',
+    selection: '#0366d625',
+    cursor: '#044289',
+    dropdownBackground: '#fff',
+    dropdownBorder: '#e1e4e8',
+    activeLine: '#c6c6c622',
+    matchingBracket: '#34d05840',
+    keyword: '#d73a49',
+    storage: '#d73a49',
+    variable: '#e36209',
+    parameter: '#24292e',
+    function: '#005cc5',
+    string: '#032f62',
+    constant: '#005cc5',
+    type: '#005cc5',
+    class: '#6f42c1',
+    number: '#005cc5',
+    comment: '#6a737d',
+    heading: '#005cc5',
+    invalid: '#cb2431',
+    regexp: '#032f62'
+};
+const lightTheme = createTheme({
+    variant: 'light',
+    settings: {
+        background: colors.background,
+        foreground: colors.foreground,
+        caret: colors.cursor,
+        selection: colors.selection,
+        gutterBackground: colors.background,
+        gutterForeground: colors.foreground,
+        gutterBorderColor: 'transparent',
+        gutterBorderWidth: 0,
+        lineHighlight: colors.background,
+        bracketColors: [
+            '#F59E0B',
+            '#8B5CF6',
+            '#06B6D4'
+        ],
+        tooltip: {
+            backgroundColor: colors.dropdownBackground,
+            color: colors.foreground,
+            border: 'none',
+            boxShadow: '0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1)!important',
+            maxWidth: '400px'
+        },
+        link: {
+            color: '#2563EB',
+            caret: colors.cursor
+        },
+        completionItemHover: {
+            backgroundColor: '#F3F4F6'
+        },
+        completionItemSelected: {
+            backgroundColor: colors.selection,
+            color: colors.foreground
+        },
+        completionItemIcon: {
+            color: '#4B5563'
+        },
+        completionItemLabel: {
+            color: '#1F2937'
+        },
+        completionItemInfo: {
+            color: '#4B5563'
+        },
+        completionItemDetail: {
+            color: '#6B7280'
+        }
+    },
+    styles: [
+        {
+            tag: tags.keyword,
+            color: colors.keyword
+        },
+        {
+            tag: [
+                tags.name,
+                tags.deleted,
+                tags.character,
+                tags.macroName
+            ],
+            color: colors.variable
+        },
+        {
+            tag: [
+                tags.propertyName
+            ],
+            color: colors.function
+        },
+        {
+            tag: [
+                tags.processingInstruction,
+                tags.string,
+                tags.inserted,
+                tags.special(tags.string)
+            ],
+            color: colors.string
+        },
+        {
+            tag: [
+                tags["function"](tags.variableName),
+                tags.labelName
+            ],
+            color: colors.function
+        },
+        {
+            tag: [
+                tags.color,
+                tags.constant(tags.name),
+                tags.standard(tags.name)
+            ],
+            color: colors.constant
+        },
+        {
+            tag: [
+                tags.definition(tags.name),
+                tags.separator
+            ],
+            color: colors.variable
+        },
+        {
+            tag: [
+                tags.className
+            ],
+            color: colors.class
+        },
+        {
+            tag: [
+                tags.number,
+                tags.changed,
+                tags.annotation,
+                tags.modifier,
+                tags.self,
+                tags.namespace
+            ],
+            color: colors.number
+        },
+        {
+            tag: [
+                tags.typeName
+            ],
+            color: colors.type,
+            fontStyle: colors.type
+        },
+        {
+            tag: [
+                tags.operator,
+                tags.operatorKeyword
+            ],
+            color: colors.keyword
+        },
+        {
+            tag: [
+                tags.url,
+                tags.escape,
+                tags.regexp,
+                tags.link
+            ],
+            color: colors.regexp
+        },
+        {
+            tag: [
+                tags.meta,
+                tags.comment
+            ],
+            color: colors.comment
+        },
+        {
+            tag: tags.strong,
+            fontWeight: 'bold'
+        },
+        {
+            tag: tags.emphasis,
+            fontStyle: 'italic'
+        },
+        {
+            tag: tags.link,
+            textDecoration: 'underline'
+        },
+        {
+            tag: tags.heading,
+            fontWeight: 'bold',
+            color: colors.heading
+        },
+        {
+            tag: [
+                tags.atom,
+                tags.bool,
+                tags.special(tags.variableName)
+            ],
+            color: colors.variable
+        },
+        {
+            tag: tags.invalid,
+            color: colors.invalid
+        },
+        {
+            tag: tags.strikethrough,
+            textDecoration: 'line-through'
+        }
+    ]
+});
+export { colors, lightTheme };

package/dist/esm/components/code-editor/utils.mjs

@@ -0,0 +1,9 @@
+function getSuffixByLanguageId(languageId) {
+    if ('python' === languageId) return '.py';
+    if ("typescript" === languageId) return '.ts';
+    if ('shell' === languageId) return '.sh';
+    if ('json' === languageId) return '.json';
+    if ('sql' === languageId) return '.sql';
+    return '';
+}
+export { getSuffixByLanguageId };

package/dist/esm/components/code-editor-mini/index.mjs

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import styled_components from "styled-components";
+import { CodeEditor } from "../code-editor/index.mjs";
+const UIMini = styled_components.div`
+  .ͼ1 .cm-content {
+  }
+`;
+function CodeEditorMini(props) {
+    return /*#__PURE__*/ jsx(UIMini, {
+        children: /*#__PURE__*/ jsx(CodeEditor, {
+            ...props,
+            options: {
+                lineNumbersGutter: false,
+                foldGutter: false,
+                minHeight: 24,
+                ...props.options || {}
+            }
+        })
+    });
+}
+export { CodeEditorMini };

package/dist/esm/components/condition-context/context.mjs

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+import { defaultConditionOpConfigs } from "./op.mjs";
+const ConditionContext = /*#__PURE__*/ createContext({
+    rules: {},
+    ops: defaultConditionOpConfigs
+});
+const ConditionProvider = (props)=>{
+    const { rules, ops } = props;
+    return /*#__PURE__*/ jsx(ConditionContext.Provider, {
+        value: {
+            rules,
+            ops
+        },
+        children: props.children
+    });
+};
+const useConditionContext = ()=>useContext(ConditionContext);
+export { ConditionContext, ConditionProvider, useConditionContext };

package/dist/esm/components/condition-context/hooks/use-condition.mjs

@@ -0,0 +1,63 @@
+import { useMemo } from "react";
+import { I18n } from "@flowgram.ai/editor";
+import { useTypeManager } from "../../../plugins/index.mjs";
+import { useConditionContext } from "../context.mjs";
+function useCondition({ leftSchema, operator, ruleConfig }) {
+    const typeManager = useTypeManager();
+    const { rules: contextRules, ops: contextOps } = useConditionContext();
+    const userRules = useMemo(()=>ruleConfig?.rules || contextRules || {}, [
+        contextRules,
+        ruleConfig?.rules
+    ]);
+    const allOps = useMemo(()=>ruleConfig?.ops || contextOps || {}, [
+        contextOps,
+        ruleConfig?.ops
+    ]);
+    const config = useMemo(()=>leftSchema ? typeManager.getTypeBySchema(leftSchema) : void 0, [
+        leftSchema,
+        typeManager
+    ]);
+    const rule = useMemo(()=>{
+        if (!config) return;
+        if (userRules[config.type]) return userRules[config.type];
+        if ('function' == typeof config.conditionRule) return config.conditionRule(leftSchema);
+        return config.conditionRule;
+    }, [
+        userRules,
+        leftSchema,
+        config
+    ]);
+    const opOptionList = useMemo(()=>Object.keys(rule || {}).filter((_op)=>allOps[_op]).map((_op)=>({
+                ...allOps?.[_op] || {},
+                value: _op,
+                label: I18n.t(allOps?.[_op]?.label || _op)
+            })), [
+        rule,
+        allOps
+    ]);
+    const targetSchema = useMemo(()=>{
+        const targetType = rule?.[operator || ''] || null;
+        if (!targetType) return;
+        if ('string' == typeof targetType) return {
+            type: targetType,
+            extra: {
+                weak: true
+            }
+        };
+        return targetType;
+    }, [
+        rule,
+        operator
+    ]);
+    const opConfig = useMemo(()=>allOps[operator || ''], [
+        operator,
+        allOps
+    ]);
+    return {
+        rule,
+        opConfig,
+        opOptionList,
+        targetSchema
+    };
+}
+export { useCondition };