@flowgram.ai/form-materials 0.1.0-alpha.18 → 0.1.0-alpha.20

package/src/components/json-schema-editor/styles.tsx

@@ -1,168 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import React from 'react';
-
-import styled, { css } from 'styled-components';
-import Icon from '@douyinfe/semi-icons';
-
-export const UIContainer = styled.div`
-  /* & .semi-input {
-    background-color: #fff;
-    border-radius: 6px;
-    height: 24px;
-  } */
-`;
-
-export const UIRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-`;
-
-export const UICollapseTrigger = styled.div`
-  cursor: pointer;
-  margin-right: 5px;
-`;
-
-export const UIExpandDetail = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-export const UILabel = styled.div`
-  font-size: 12px;
-  color: #999;
-  font-weight: 400;
-  margin-bottom: 2px;
-`;
-
-export const UITreeItems = styled.div<{ $shrink?: boolean }>`
-  display: grid;
-  grid-template-columns: auto 1fr;
-
-  ${({ $shrink }) =>
-    $shrink &&
-    css`
-      padding-left: 3px;
-      margin-top: 10px;
-    `}
-`;
-
-export const UITreeItemLeft = styled.div<{
-  $isLast?: boolean;
-  $showLine?: boolean;
-  $showCollapse?: boolean;
-}>`
-  grid-column: 1;
-  position: relative;
-  width: 16px;
-
-  ${({ $showLine, $isLast, $showCollapse }) => {
-    let height = $isLast ? '24px' : '100%';
-    let width = $showCollapse ? '12px' : '30px';
-
-    return (
-      $showLine &&
-      css`
-        &::before {
-          /* 竖线 */
-          content: '';
-          height: ${height};
-          position: absolute;
-          left: -14px;
-          top: -16px;
-          width: 1px;
-          background: #d9d9d9;
-          display: block;
-        }
-
-        &::after {
-          /* 横线 */
-          content: '';
-          position: absolute;
-          left: -14px; // 横线起点和竖线对齐
-          top: 8px; // 跟随你的行高调整
-          width: ${width}; // 横线长度
-          height: 1px;
-          background: #d9d9d9;
-          display: block;
-        }
-      `
-    );
-  }}
-`;
-
-export const UITreeItemRight = styled.div`
-  grid-column: 2;
-  margin-bottom: 10px;
-
-  &:last-child {
-    margin-bottom: 0px;
-  }
-`;
-
-export const UITreeItemMain = styled.div<{}>`
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  position: relative;
-`;
-
-export const UICollapsible = styled.div<{ $collapse?: boolean }>`
-  display: none;
-
-  ${({ $collapse }) =>
-    $collapse &&
-    css`
-      display: block;
-    `}
-`;
-
-export const UIName = styled.div`
-  flex-grow: 1;
-`;
-
-export const UIType = styled.div``;
-
-export const UIRequired = styled.div``;
-
-export const UIActions = styled.div`
-  white-space: nowrap;
-`;
-
-const iconAddChildrenSvg = (
-  <svg
-    className="icon-icon icon-icon-coz_add_node "
-    width="1em"
-    height="1em"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M11 6.49988C11 8.64148 9.50397 10.4337 7.49995 10.8884V15.4998C7.49995 16.0521 7.94767 16.4998 8.49995 16.4998H11.208C11.0742 16.8061 11 17.1443 11 17.4998C11 17.8554 11.0742 18.1936 11.208 18.4998H8.49995C6.8431 18.4998 5.49995 17.1567 5.49995 15.4998V10.8884C3.49599 10.4336 2 8.64145 2 6.49988C2 4.0146 4.01472 1.99988 6.5 1.99988C8.98528 1.99988 11 4.0146 11 6.49988ZM6.5 8.99988C7.88071 8.99988 9 7.88059 9 6.49988C9 5.11917 7.88071 3.99988 6.5 3.99988C5.11929 3.99988 4 5.11917 4 6.49988C4 7.88059 5.11929 8.99988 6.5 8.99988Z"
-    ></path>
-    <path d="M17.5 12.4999C18.0523 12.4999 18.5 12.9476 18.5 13.4999V16.4999H21.5C22.0523 16.4999 22.5 16.9476 22.5 17.4999C22.5 18.0522 22.0523 18.4999 21.5 18.4999H18.5V21.4999C18.5 22.0522 18.0523 22.4999 17.5 22.4999C16.9477 22.4999 16.5 22.0522 16.5 21.4999V18.4999H13.5C12.9477 18.4999 12.5 18.0522 12.5 17.4999C12.5 16.9476 12.9477 16.4999 13.5 16.4999H16.5V13.4999C16.5 12.9476 16.9477 12.4999 17.5 12.4999Z"></path>
-  </svg>
-);
-
-export const IconAddChildren = () => <Icon size="small" svg={iconAddChildrenSvg} />;
-
-export const DefaultValueWrapper = styled.div`
-  margin: 0;
-`;
-
-export const ConstantInputWrapper = styled.div`
-  flex-grow: 1;
-
-  & .semi-tree-select,
-  & .semi-input-number,
-  & .semi-select {
-    width: 100%;
-  }
-`;

package/src/components/prompt-editor/styles.tsx

@@ -1,18 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import styled, { css } from 'styled-components';
-
-export const UIContainer = styled.div<{ $hasError?: boolean }>`
-  background-color: var(--semi-color-fill-0);
-  padding-left: 10px;
-  padding-right: 6px;
-
-  ${({ $hasError }) =>
-    $hasError &&
-    css`
-      border: 1px solid var(--semi-color-danger-6);
-    `}
-`;

package/src/components/prompt-editor-with-inputs/editor.tsx

@@ -1,24 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import React from 'react';
-
-import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
-import { EditorInputsTree } from '@/components/coze-editor-extensions';
-
-export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
-  inputsValues: any;
-}
-
-export function PromptEditorWithInputs({
-  inputsValues,
-  ...restProps
-}: PromptEditorWithInputsProps) {
-  return (
-    <PromptEditor {...restProps}>
-      <EditorInputsTree inputsValues={inputsValues} />
-    </PromptEditor>
-  );
-}

package/src/components/prompt-editor-with-variables/editor.tsx

@@ -1,20 +0,0 @@
-/**
- * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
- * SPDX-License-Identifier: MIT
- */
-
-import React from 'react';
-
-import { PromptEditor, PromptEditorPropsType } from '@/components/prompt-editor';
-import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
-
-export interface PromptEditorWithVariablesProps extends PromptEditorPropsType {}
-
-export function PromptEditorWithVariables(props: PromptEditorWithVariablesProps) {
-  return (
-    <PromptEditor {...props}>
-      <EditorVariableTree />
-      <EditorVariableTagInject />
-    </PromptEditor>
-  );
-}

package/src/shared/inject-material/README.md

@@ -1,170 +0,0 @@
-# InjectMaterial Component
-
-A material component wrapper with dependency injection support for implementing dynamic component replacement mechanisms.
-
-## Why Dependency Injection Matters
-
-### ❌ Tight Coupling: Traditional Dependency Issues
-
-```mermaid
-graph TD
-    A[Material A] --> B[Material B]
-    B --> D[Material D]
-    C[Material C] --> D
-
-    style D fill:#ff4757
-    style A fill:#ffa502
-    style B fill:#ffa502
-    style C fill:#ffa502
-
-    note["💥 Problem: D changes require modifications to A, B, C"]
-```
-
-**Issues:** Chain reactions, high maintenance costs
-
-### ✅ Decoupling: Dependency Injection Solution
-
-```mermaid
-graph TD
-    A[Material A] --> RenderKey[Material D RenderKey]
-    B[Material B] --> RenderKey
-    C[Material C] --> RenderKey
-
-    RenderKey -.-> BaseD[Origin D]
-    CustomD[Custom D] -.-> RenderKey
-
-    style RenderKey fill:#5f27cd
-    style BaseD fill:#2ed573
-    style CustomD fill:#26d0ce
-    style A fill:#a55eea
-    style B fill:#a55eea
-    style C fill:#a55eea
-
-    note2["✅ A, B, C depend on abstract interface, decoupled from D"]
-```
-
-**Benefits:** Hot-swapping, parallel development, version compatibility
-
-## Features
-
-- 🔧 **Dependency Injection**: Support dynamic component replacement via FlowRendererRegistry
-- 🔄 **Smart Fallback**: Automatically use default component when no custom component is registered
-- 🎯 **Type Safety**: Full TypeScript type inference support
-- 📦 **Zero Configuration**: Works out of the box without additional setup
-
-## Usage
-
-### 1. Create Injectable Material Component
-
-```tsx
-import { createInjectMaterial } from '@flowgram.ai/form-materials';
-import { VariableSelector } from './VariableSelector';
-
-// Create injectable material wrapper component
-const InjectVariableSelector = createInjectMaterial(VariableSelector);
-
-// Now you can use it like a regular component
-function MyComponent() {
-  return <InjectVariableSelector value={value} onChange={handleChange} />;
-}
-```
-
-### 2. Register Custom Components
-
-Configure custom renderer in `use-editor-props.tsx`:
-
-```tsx
-import { useEditorProps } from '@flowgram.ai/editor';
-import { YourCustomVariableSelector } from './YourCustomVariableSelector';
-import { VariableSelector } from '@flowgram.ai/form-materials';
-
-function useCustomEditorProps() {
-  const editorProps = useEditorProps({
-    materials: {
-      components: {
-        // Use component's renderKey or component name as key
-        [VariableSelector.renderKey]: YourCustomVariableSelector,
-        [TypeSelector.renderKey]: YourCustomTypeSelector,
-      }
-    }
-  });
-
-  return editorProps;
-}
-```
-
-### 3. Use Custom renderKey
-
-If your component requires a specific renderKey:
-
-```tsx
-const InjectCustomComponent = createInjectMaterial(MyComponent, {
-  renderKey: 'my-custom-key'
-});
-
-// When registering
-{
-  materials: {
-    components: {
-      'my-custom-key': MyCustomRenderer
-    }
-  }
-}
-```
-
-## Sequence Diagram
-
-Complete component registration and rendering sequence diagram:
-
-```mermaid
-sequenceDiagram
-    participant App as Application
-    participant Editor as use-editor-props
-    participant Registry as FlowRendererRegistry
-    participant Inject as InjectMaterial
-    participant Default as Default Component
-    participant Custom as Custom Component
-
-    Note over App,Custom: Component Registration Phase
-    App->>Editor: Call use-editor-props()
-    Editor->>Editor: Configure materials.components
-    Editor->>Registry: Register component to FlowRendererRegistry
-    Registry->>Registry: Store mapping relationship
-    Registry-->>App: Registration complete
-
-    Note over App,Custom: Component Rendering Phase
-    App->>Inject: Render InjectMaterial component
-    Inject->>Registry: Query renderer (getRendererComponent)
-
-    alt Custom renderer exists
-        Registry-->>Inject: Return custom React component
-        Inject->>Custom: Render with custom component
-        Custom-->>App: Render custom UI
-    else No custom renderer
-        Registry-->>Inject: Return null or type mismatch
-        Inject->>Default: Render with default component
-        Default-->>App: Render default UI
-    end
-```
-
-## Render Key Priority
-
-Component render key determination follows this priority order:
-
-1. `params.renderKey` (second parameter of createInjectMaterial)
-2. `Component.renderKey` (component's own renderKey property)
-3. `Component.name` (component's display name)
-4. Empty string (final fallback)
-
-## Type Definition
-
-```typescript
-interface CreateInjectMaterialOptions {
-  renderKey?: string;
-}
-
-function createInjectMaterial<Props>(
-  Component: React.FC<Props> & { renderKey?: string },
-  params?: CreateInjectMaterialOptions
-): React.FC<Props>
-```

package/src/shared/inject-material/README.zh.md

@@ -1,174 +0,0 @@
-# InjectMaterial 组件
-
-一个支持依赖注入的 Material 组件包装器，用于实现动态组件替换机制。
-
-## 为什么需要依赖注入
-
-### ❌ 紧耦合：传统依赖问题
-
-```mermaid
-graph TD
-    A[Material A] --> B[Material B]
-    B --> D[Material D]
-    C[Material C] --> D
-
-    style D fill:#ff4757
-    style A fill:#ffa502
-    style B fill:#ffa502
-    style C fill:#ffa502
-
-    note["💥 问题：D变更导致A、B、C全部需要修改"]
-```
-
-**问题：** 连锁反应、高维护成本
-
-### ✅ 解耦：依赖注入方案
-
-```mermaid
-graph TD
-    A[Material A] --> RenderKey[Material D RenderKey]
-    B[Material B] --> RenderKey
-    C[Material C] --> RenderKey
-
-    RenderKey -.-> BaseD[Origin D]
-    CustomD[Custom D] -.-> RenderKey
-
-    style RenderKey fill:#5f27cd
-    style BaseD fill:#2ed573
-    style CustomD fill:#26d0ce
-    style A fill:#a55eea
-    style B fill:#a55eea
-    style C fill:#a55eea
-
-    note2["✅ A、B、C依赖抽象接口，与D实现解耦"]
-```
-
-**优势：** 热插拔、并行开发、版本兼容
-
-## 特性
-
-- 🔧 **依赖注入**：通过 FlowRendererRegistry 支持动态组件替换
-- 🔄 **智能回退**：当没有注册自定义组件时自动使用默认组件
-- 🎯 **类型安全**：完整的 TypeScript 类型推断支持
-- 📦 **零配置**：开箱即用，无需额外设置
-
-## 安装
-
-该组件是 `@flowgram.ai/form-materials` 包的一部分，无需单独安装。
-
-## 使用
-
-### 1. 创建可注入的 Material 组件件
-
-```tsx
-import { createInjectMaterial } from '@flowgram.ai/form-materials';
-import { VariableSelector } from './VariableSelector';
-
-// 创建可注入的Material包装组件
-const InjectVariableSelector = createInjectMaterial(VariableSelector);
-
-// 现在你可以像使用普通组件一样使用它
-function MyComponent() {
-  return <InjectVariableSelector value={value} onChange={handleChange} />;
-}
-```
-
-### 2. 注册自定义组件
-
-在 `use-editor-props.tsx` 中配置自定义渲染器：
-
-```tsx
-import { useEditorProps } from '@flowgram.ai/editor';
-import { YourCustomVariableSelector } from './YourCustomVariableSelector';
-import { VariableSelector } from '@flowgram.ai/form-materials';
-
-function useCustomEditorProps() {
-  const editorProps = useEditorProps({
-    materials: {
-      components: {
-        // 使用组件的 renderKey 或组件名称作为键
-        [VariableSelector.renderKey]: YourCustomVariableSelector,
-        [TypeSelector.renderKey]: YourCustomTypeSelector,
-      }
-    }
-  });
-
-  return editorProps;
-}
-```
-
-### 3. 使用自定义 renderKey
-
-如果你的组件需要特定的 renderKey：
-
-```tsx
-const InjectCustomComponent = createInjectMaterial(MyComponent, {
-  renderKey: 'my-custom-key'
-});
-
-// 注册时
-{
-  materials: {
-    components: {
-      'my-custom-key': MyCustomRenderer
-    }
-  }
-}
-```
-
-## 时序图
-
-完整的组件注册和渲染时序图：
-
-```mermaid
-sequenceDiagram
-    participant App as 应用程序
-    participant Editor as use-editor-props
-    participant Registry as FlowRendererRegistry
-    participant Inject as InjectMaterial
-    participant Default as 默认组件
-    participant Custom as 自定义组件
-
-    Note over App,Custom: 组件注册阶段
-    App->>Editor: 调用 use-editor-props()
-    Editor->>Editor: 配置 materials.components
-    Editor->>Registry: 向 FlowRendererRegistry 注册组件
-    Registry->>Registry: 存储映射关系
-    Registry-->>App: 注册完成
-
-    Note over App,Custom: 组件渲染阶段
-    App->>Inject: 渲染 InjectMaterial 组件
-    Inject->>Registry: 查询渲染器 (getRendererComponent)
-
-    alt 存在自定义渲染器
-        Registry-->>Inject: 返回自定义 React 组件
-        Inject->>Custom: 使用自定义组件渲染
-        Custom-->>App: 渲染自定义 UI
-    else 无自定义渲染器
-        Registry-->>Inject: 返回 null 或类型不匹配
-        Inject->>Default: 使用默认组件渲染
-        Default-->>App: 渲染默认 UI
-    end
-```
-
-## 渲染键优先级
-
-组件渲染键的确定遵循以下优先级顺序：
-
-1. `params.renderKey` (createInjectMaterial 的第二个参数)
-2. `Component.renderKey` (组件自身的 renderKey 属性)
-3. `Component.name` (组件的显示名称)
-4. 空字符串 (最终回退)
-
-## 类型定义
-
-```typescript
-interface CreateInjectMaterialOptions {
-  renderKey?: string;
-}
-
-function createInjectMaterial<Props>(
-  Component: React.FC<Props> & { renderKey?: string },
-  params?: CreateInjectMaterialOptions
-): React.FC<Props>
-```