feat: add commonUI API

alibaba · Jan 5, 2024 · 381ebbb · 381ebbb
1 parent 173978f
commit 381ebbb
Show file tree

Hide file tree

Showing 15 changed files with 281 additions and 12 deletions.
diff --git a/docs/docs/api/commonUI.md b/docs/docs/api/commonUI.md
@@ -0,0 +1,118 @@
+---
+title: commonUI - UI 组件库
+sidebar_position: 11
+---
+
+## 简介
+CommonUI API 是一个专为低代码引擎设计的组件 UI 库，使用它开发的插件，可以保证在不同项目和主题切换中能够保持一致性和兼容性。
+
+## 组件列表
+
+### Tip
+
+提示组件
+
+| 参数      | 说明         | 类型                                  | 默认值 |
+|-----------|--------------|---------------------------------------|--------|
+| className | className    | string (optional)                     |        |
+| children  | tip 的内容   | IPublicTypeI18nData \| ReactNode      |        |
+| direction | tip 的方向   | 'top' \| 'bottom' \| 'left' \| 'right' |        |
+
+
+### Title
+
+标题组件
+
+| 参数      | 说明       | 类型                        | 默认值 |
+|-----------|------------|-----------------------------|--------|
+| title     | 标题内容   | IPublicTypeTitleContent     |        |
+| className | className  | string (optional)           |        |
+| onClick   | 点击事件   | () => void (optional)       |        |
+
+### Balloon
+详细文档: [Balloon Documentation](https://fusion.design/pc/component/balloon)
+
+### Breadcrumb
+详细文档: [Breadcrumb Documentation](https://fusion.design/pc/component/breadcrumb)
+
+### Button
+详细文档: [Button Documentation](https://fusion.design/pc/component/button)
+
+### Card
+详细文档: [Card Documentation](https://fusion.design/pc/component/card)
+
+### Checkbox
+详细文档: [Checkbox Documentation](https://fusion.design/pc/component/checkbox)
+
+### DatePicker
+详细文档: [DatePicker Documentation](https://fusion.design/pc/component/datepicker)
+
+### Dialog
+详细文档: [Dialog Documentation](https://fusion.design/pc/component/dialog)
+
+### Dropdown
+详细文档: [Dropdown Documentation](https://fusion.design/pc/component/dropdown)
+
+### Form
+详细文档: [Form Documentation](https://fusion.design/pc/component/form)
+
+### Icon
+详细文档: [Icon Documentation](https://fusion.design/pc/component/icon)
+
+引擎默认主题支持的 icon 列表：https://fusion.design/64063/component/icon?themeid=20133
+
+
+### Input
+详细文档: [Input Documentation](https://fusion.design/pc/component/input)
+
+### Loading
+详细文档: [Loading Documentation](https://fusion.design/pc/component/loading)
+
+### Message
+详细文档: [Message Documentation](https://fusion.design/pc/component/message)
+
+### Overlay
+详细文档: [Overlay Documentation](https://fusion.design/pc/component/overlay)
+
+### Pagination
+详细文档: [Pagination Documentation](https://fusion.design/pc/component/pagination)
+
+### Radio
+详细文档: [Radio Documentation](https://fusion.design/pc/component/radio)
+
+### Search
+详细文档: [Search Documentation](https://fusion.design/pc/component/search)
+
+### Select
+详细文档: [Select Documentation](https://fusion.design/pc/component/select)
+
+### SplitButton
+详细文档: [SplitButton Documentation](https://fusion.design/pc/component/splitbutton)
+
+### Step
+详细文档: [Step Documentation](https://fusion.design/pc/component/step)
+
+### Switch
+详细文档: [Switch Documentation](https://fusion.design/pc/component/switch)
+
+### Tab
+详细文档: [Tab Documentation](https://fusion.design/pc/component/tab)
+
+### Table
+详细文档: [Table Documentation](https://fusion.design/pc/component/table)
+
+### Tree
+详细文档: [Tree Documentation](https://fusion.design/pc/component/tree)
+
+### TreeSelect
+详细文档: [TreeSelect Documentation](https://fusion.design/pc/component/treeselect)
+
+### Upload
+详细文档: [Upload Documentation](https://fusion.design/pc/component/upload)
+
+### Divider
+详细文档: [Divider Documentation](https://fusion.design/pc/component/divider)
+
+## 说明
+
+如果需要其他组件，可以提issue给我们
diff --git a/packages/designer/src/component-meta.ts b/packages/designer/src/component-meta.ts
@@ -48,13 +48,17 @@ export function buildFilter(rule?: string | string[] | RegExp | IPublicTypeNesti
     return rule;
   }
   if (isRegExp(rule)) {
-    return (testNode: Node | IPublicTypeNodeSchema) => rule.test(testNode.componentName);
+    return (testNode: Node | IPublicTypeNodeSchema) => {
+      return rule.test(testNode.componentName);
+    };
   }
   const list = ensureAList(rule);
   if (!list) {
     return null;
   }
-  return (testNode: Node | IPublicTypeNodeSchema) => list.includes(testNode.componentName);
+  return (testNode: Node | IPublicTypeNodeSchema) => {
+    return list.includes(testNode.componentName);
+  };
 }
 
 export interface IComponentMeta extends IPublicModelComponentMeta<INode> {

diff --git a/packages/designer/src/plugin/plugin-context.ts b/packages/designer/src/plugin/plugin-context.ts
@@ -19,6 +19,7 @@ import {
   IPublicApiWorkspace,
   IPublicEnumPluginRegisterLevel,
   IPublicModelWindow,
+  IPublicApiCommonUI,
 } from '@alilc/lowcode-types';
 import {
   IPluginContextOptions,
@@ -45,6 +46,8 @@ export default class PluginContext implements
   workspace: IPublicApiWorkspace;
   registerLevel: IPublicEnumPluginRegisterLevel;
   editorWindow: IPublicModelWindow;
+  commonUI: IPublicApiCommonUI;
+  isPluginRegisteredInWorkspace: false;
 
   constructor(
       options: IPluginContextOptions,

diff --git a/packages/designer/src/plugin/plugin-types.ts b/packages/designer/src/plugin/plugin-types.ts
@@ -18,6 +18,7 @@ import {
   IPublicTypePluginRegisterOptions,
   IPublicModelWindow,
   IPublicEnumPluginRegisterLevel,
+  IPublicApiCommonUI,
 } from '@alilc/lowcode-types';
 import PluginContext from './plugin-context';
 
@@ -61,6 +62,7 @@ export interface ILowCodePluginContextPrivate {
   set editorWindow(window: IPublicModelWindow);
   set registerLevel(level: IPublicEnumPluginRegisterLevel);
   set isPluginRegisteredInWorkspace(flag: boolean);
+  set commonUI(commonUI: IPublicApiCommonUI);
 }
 export interface ILowCodePluginContextApiAssembler {
   assembleApis(

diff --git a/packages/editor-core/src/widgets/title/index.tsx b/packages/editor-core/src/widgets/title/index.tsx
@@ -1,7 +1,7 @@
 import { Component, isValidElement, ReactNode } from 'react';
 import classNames from 'classnames';
 import { createIcon, isI18nData, isTitleConfig } from '@alilc/lowcode-utils';
-import { IPublicTypeTitleContent, IPublicTypeI18nData, IPublicTypeTitleConfig } from '@alilc/lowcode-types';
+import { IPublicTypeI18nData, IPublicTypeTitleConfig, IPublicTypeTitleProps } from '@alilc/lowcode-types';
 import { intl } from '../../intl';
 import { Tip } from '../tip';
 import './title.less';
@@ -36,13 +36,7 @@ import './title.less';
   return fragments;
 }
 
-export class Title extends Component<{
-  title: IPublicTypeTitleContent;
-  className?: string;
-  onClick?: () => void;
-  match?: boolean;
-  keywords?: string;
-}> {
+export class Title extends Component<IPublicTypeTitleProps> {
   constructor(props: any) {
     super(props);
     this.handleClick = this.handleClick.bind(this);

diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts
@@ -51,6 +51,7 @@ import {
   Canvas,
   Workspace,
   Config,
+  CommonUI,
 } from '@alilc/lowcode-shell';
 import { isPlainObject } from '@alilc/lowcode-utils';
 import './modules/live-editing';
@@ -111,10 +112,12 @@ const innerSetters = new InnerSetters();
 const setters = new Setters(innerSetters);
 
 const material = new Material(editor);
+const commonUI = new CommonUI();
 editor.set('project', project);
 editor.set('setters' as any, setters);
 editor.set('material', material);
 editor.set('innerHotkey', innerHotkey);
+editor.set('commonUI' as any, commonUI);
 const config = new Config(engineConfig);
 const event = new Event(commonEvent, { prefix: 'common' });
 const logger = new Logger({ level: 'warn', bizName: 'common' });
@@ -138,6 +141,7 @@ const pluginContextApiAssembler: ILowCodePluginContextApiAssembler = {
     context.plugins = plugins;
     context.logger = new Logger({ level: 'warn', bizName: `plugin:${pluginName}` });
     context.workspace = workspace;
+    context.commonUI = commonUI;
     context.registerLevel = IPublicEnumPluginRegisterLevel.Default;
     context.isPluginRegisteredInWorkspace = false;
   },
@@ -161,6 +165,7 @@ export {
   common,
   workspace,
   canvas,
+  commonUI,
 };
 // declare this is open-source version
 export const isOpenSource = true;

diff --git a/packages/shell/src/api/commonUI.ts b/packages/shell/src/api/commonUI.ts
@@ -0,0 +1,43 @@
+import { IPublicApiCommonUI } from '@alilc/lowcode-types';
+import {
+  Tip as InnerTip,
+  Title as InnerTitle,
+ } from '@alilc/lowcode-editor-core';
+import { Balloon, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Dropdown, Form, Icon, Input, Loading, Message, Overlay, Pagination, Radio, Search, Select, SplitButton, Step, Switch, Tab, Table, Tree, TreeSelect, Upload, Divider } from '@alifd/next';
+
+export class CommonUI implements IPublicApiCommonUI {
+  Balloon = Balloon;
+  Breadcrumb = Breadcrumb;
+  Button = Button;
+  Card = Card;
+  Checkbox = Checkbox;
+  DatePicker = DatePicker;
+  Dialog = Dialog;
+  Dropdown = Dropdown;
+  Form = Form;
+  Icon = Icon;
+  Input = Input;
+  Loading = Loading;
+  Message = Message;
+  Overlay = Overlay;
+  Pagination = Pagination;
+  Radio = Radio;
+  Search = Search;
+  Select = Select;
+  SplitButton = SplitButton;
+  Step = Step;
+  Switch = Switch;
+  Tab = Tab;
+  Table = Table;
+  Tree = Tree;
+  TreeSelect = TreeSelect;
+  Upload = Upload;
+  Divider = Divider;
+
+  get Tip() {
+    return InnerTip;
+  }
+  get Title() {
+    return InnerTitle;
+  }
+}
diff --git a/packages/shell/src/api/index.ts b/packages/shell/src/api/index.ts
@@ -10,4 +10,5 @@ export * from './simulator-host';
 export * from './skeleton';
 export * from './canvas';
 export * from './workspace';
-export * from './config';
+export * from './config';
+export * from './commonUI';
diff --git a/packages/shell/src/index.ts b/packages/shell/src/index.ts
@@ -28,6 +28,7 @@ import {
   Workspace,
   SimulatorHost,
   Config,
+  CommonUI,
 } from './api';
 
 export * from './symbols';
@@ -68,4 +69,5 @@ export {
   Config,
   SettingField,
   SkeletonItem,
+  CommonUI,
 };
diff --git a/packages/types/src/shell/api/commonUI.ts b/packages/types/src/shell/api/commonUI.ts
@@ -0,0 +1,48 @@
+import { IPublicTypeTitleContent } from '../type';
+import { Balloon, Breadcrumb, Button, Card, Checkbox, DatePicker, Dialog, Dropdown, Form, Icon, Input, Loading, Message, Overlay, Pagination, Radio, Search, Select, SplitButton, Step, Switch, Tab, Table, Tree, TreeSelect, Upload, Divider } from '@alifd/next';
+
+export interface IPublicApiCommonUI {
+  Balloon: typeof Balloon;
+  Breadcrumb: typeof Breadcrumb;
+  Button: typeof Button;
+  Card: typeof Card;
+  Checkbox: typeof Checkbox;
+  DatePicker: typeof DatePicker;
+  Dialog: typeof Dialog;
+  Dropdown: typeof Dropdown;
+  Form: typeof Form;
+  Icon: typeof Icon;
+  Input: typeof Input;
+  Loading: typeof Loading;
+  Message: typeof Message;
+  Overlay: typeof Overlay;
+  Pagination: typeof Pagination;
+  Radio: typeof Radio;
+  Search: typeof Search;
+  Select: typeof Select;
+  SplitButton: typeof SplitButton;
+  Step: typeof Step;
+  Switch: typeof Switch;
+  Tab: typeof Tab;
+  Table: typeof Table;
+  Tree: typeof Tree;
+  TreeSelect: typeof TreeSelect;
+  Upload: typeof Upload;
+  Divider: typeof Divider;
+
+  /**
+   * Title 组件
+   * @experimental unstable API, pay extra caution when trying to use this
+   */
+  get Tip(): React.ComponentClass<{}>;
+
+  /**
+   * Tip 组件
+   * @experimental unstable API, pay extra caution when trying to use this
+   */
+  get Title(): React.ComponentClass<{
+    title: IPublicTypeTitleContent | undefined;
+    match?: boolean;
+    keywords?: string | null;
+  }>;
+}
diff --git a/packages/types/src/shell/api/index.ts b/packages/types/src/shell/api/index.ts
@@ -10,3 +10,4 @@ export * from './plugins';
 export * from './logger';
 export * from './canvas';
 export * from './workspace';
+export * from './commonUI';
diff --git a/packages/types/src/shell/model/plugin-context.ts b/packages/types/src/shell/model/plugin-context.ts
@@ -11,6 +11,7 @@ import {
   IPluginPreferenceMananger,
   IPublicApiPlugins,
   IPublicApiWorkspace,
+  IPublicApiCommonUI,
 } from '../api';
 import { IPublicEnumPluginRegisterLevel } from '../enum';
 import { IPublicModelEngineConfig, IPublicModelWindow } from './';
@@ -102,6 +103,12 @@ export interface IPublicModelPluginContext {
    */
   get workspace(): IPublicApiWorkspace;
 
+  /**
+   * commonUI API
+   * @tutorial https://lowcode-engine.cn/site/docs/api/commonUI
+   */
+  get commonUI(): IPublicApiCommonUI;
+
   /**
    * 插件注册层级
    * @since v1.1.7

diff --git a/packages/types/src/shell/type/tip-config.ts b/packages/types/src/shell/type/tip-config.ts
@@ -2,8 +2,20 @@ import { IPublicTypeI18nData } from '..';
 import { ReactNode } from 'react';
 
 export interface IPublicTypeTipConfig {
+
+  /**
+   * className
+   */
   className?: string;
+
+  /**
+   * tip 的内容
+   */
   children?: IPublicTypeI18nData | ReactNode;
   theme?: string;
+
+  /**
+   * tip 的方向
+   */
   direction?: 'top' | 'bottom' | 'left' | 'right';
 }