chore: import upstream snapshot with attribution

2026-07-13 13:09:51 +08:00
commit 0232b4e2bb
3528 changed files with 291404 additions and 0 deletions
@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  Field,
+  FieldRenderProps,
+  FormMeta,
+  WorkflowNodeRegistry,
+  FormRenderProps,
+} from '@flowgram.ai/free-layout-editor';
+import { FieldWrapper } from '@flowgram.ai/demo-node-form';
+import { Input } from '@douyinfe/semi-ui';
+import '../index.css';
+
+interface FormData {
+  country: string;
+  city: string;
+}
+
+const render = ({ form }: FormRenderProps<FormData>) => (
+  <div className="demo-node-content">
+    <div className="demo-node-title">Visibility Examples</div>
+    <Field name="country">
+      {({ field }: FieldRenderProps<string>) => (
+        <FieldWrapper title="Country">
+          <Input size={'small'} {...field} />
+        </FieldWrapper>
+      )}
+    </Field>
+
+    <Field name="city" deps={['country']}>
+      {({ field }: FieldRenderProps<string>) =>
+        form.getValueIn('country') ? (
+          <FieldWrapper title="City">
+            <Input size={'small'} {...field} />
+          </FieldWrapper>
+        ) : (
+          <></>
+        )
+      }
+    </Field>
+  </div>
+);
+
+const formMeta: FormMeta<FormData> = {
+  render,
+};
+
+export const nodeRegistry: WorkflowNodeRegistry = {
+  type: 'custom',
+  meta: {},
+  defaultPorts: [{ type: 'output' }, { type: 'input' }],
+  formMeta,
+};
@@ -0,0 +1,85 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  DEFAULT_INITIAL_DATA,
+  defaultInitialDataTs,
+  fieldWrapperCss,
+  fieldWrapperTs,
+} from '@flowgram.ai/demo-node-form';
+
+import { Editor } from '../editor.tsx';
+import { PreviewEditor } from '../../preview-editor.tsx';
+import { nodeRegistry } from './node-registry.tsx';
+
+const nodeRegistryFile = {
+  code: `import {
+  Field,
+  FieldRenderProps,
+  FormMeta,
+  WorkflowNodeRegistry,
+  FormRenderProps,
+} from '@flowgram.ai/free-layout-editor';
+import { FieldWrapper } from '@flowgram.ai/demo-node-form';
+import { Input } from '@douyinfe/semi-ui';
+import '../index.css';
+
+interface FormData {
+  country: string;
+  city: string;
+}
+
+const render = ({ form }: FormRenderProps<FormData>) => (
+  <div className="demo-node-content">
+    <div className="demo-node-title">Visibility Examples</div>
+    <Field name="country">
+      {({ field }: FieldRenderProps<string>) => (
+        <FieldWrapper title="Country">
+          <Input size={'small'} {...field} />
+        </FieldWrapper>
+      )}
+    </Field>
+
+    <Field name="city" deps={['country']}>
+      {({ field }: FieldRenderProps<string>) =>
+        form.getValueIn('country') ? (
+          <FieldWrapper title="City">
+            <Input size={'small'} {...field} />
+          </FieldWrapper>
+        ) : (
+          <></>
+        )
+      }
+    </Field>
+  </div>
+);
+
+const formMeta: FormMeta<FormData> = {
+  render,
+};
+
+export const nodeRegistry: WorkflowNodeRegistry = {
+  type: 'custom',
+  meta: {},
+  defaultPorts: [{ type: 'output' }, { type: 'input' }],
+  formMeta,
+};
+`,
+  active: true,
+};
+
+export const NodeFormDynamicPreview = () => {
+  const files = {
+    'node-registry.tsx': nodeRegistryFile,
+    'initial-data.ts': { code: defaultInitialDataTs, active: true },
+    'field-wrapper.tsx': { code: fieldWrapperTs, active: true },
+    'field-wrapper.css': { code: fieldWrapperCss, active: true },
+  };
+  return (
+    <PreviewEditor files={files} previewStyle={{ height: 500 }} editorStyle={{ height: 500 }}>
+      <Editor registries={[nodeRegistry]} initialData={DEFAULT_INITIAL_DATA} />
+    </PreviewEditor>
+  );
+};