Merge pull request #77 from ant-design/refacotr/pro-builder

refactor: ProEditor 改名为 ProBuilder

.github/workflows/release.yml

@@ -13,6 +13,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.CI_GITHUB_TOKEN }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2
@@ -36,6 +38,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
+        with:
+          token: ${{ secrets.CI_GITHUB_TOKEN }}
 
       - name: Install pnpm
         uses: pnpm/action-setup@v2

docs/pro-editor/demos/buttonAsset/_Component.tsx

@@ -1,10 +1,10 @@
-import { useProEditorStore } from '@ant-design/pro-editor';
+import { useProBuilderStore } from '@ant-design/pro-editor';
 import { Button } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
 export const ButtonComponent = memo(() => {
-  const data = useProEditorStore((s) => s.config, isEqual);
+  const data = useProBuilderStore((s) => s.config, isEqual);
 
   console.log(data);
   return <Button {...data} />;

docs/pro-editor/demos/buttonAsset/_Panel.tsx

@@ -1,5 +1,5 @@
 import { RedoOutlined, UndoOutlined } from '@ant-design/icons';
-import { LevaPanel, useProEditorStore } from '@ant-design/pro-editor';
+import { LevaPanel, useProBuilderStore } from '@ant-design/pro-editor';
 import { Button, Divider } from 'antd';
 import isEqual from 'fast-deep-equal';
 import { FC, memo } from 'react';
@@ -9,8 +9,8 @@ import { shallow } from 'zustand/shallow';
 import { ButtonConfig, buttonModel } from './models';
 
 export const ButtonPanel: FC = memo(() => {
-  const data = useProEditorStore((s) => s.config, isEqual);
-  const [updateConfig, undo, redo, undoStack, redoStack] = useProEditorStore(
+  const data = useProBuilderStore((s) => s.config, isEqual);
+  const [updateConfig, undo, redo, undoStack, redoStack] = useProBuilderStore(
     (s) => [s.setConfig, s.undo, s.redo, s.undoStack().length, s.redoStack().length],
     shallow,
   );

docs/pro-editor/demos/buttonAssets.tsx

@@ -1,14 +1,14 @@
 /**
  * iframe: 600
  */
-import { ComponentAsset, ProEditor } from '@ant-design/pro-editor';
+import { ComponentAsset, ProBuilder } from '@ant-design/pro-editor';
 
 import { buttonAssetParams } from './buttonAsset';
 
 const ButtonComponentAsset = new ComponentAsset(buttonAssetParams);
 
 export default () => (
-  <ProEditor
+  <ProBuilder
     componentAsset={ButtonComponentAsset}
     style={{ height: '100vh' }}
     __EDITOR_STORE_DEVTOOLS__={{ name: 'ButtonEditor' }}

docs/pro-editor/demos/controlledPresence.tsx

@@ -1,7 +1,7 @@
 /**
  * iframe: 800
  */
-import { AwarenessEditor, ComponentAsset, ProEditor } from '@/index';
+import { AwarenessEditor, ComponentAsset, ProBuilder } from '@/index';
 import { JsonViewer } from '@textea/json-viewer';
 import { useLocalStorageState } from 'ahooks';
 import { Flexbox } from 'react-layout-kit';
@@ -15,7 +15,7 @@ export default () => {
 
   return (
     <Flexbox>
-      <ProEditor
+      <ProBuilder
         componentAsset={assets}
         editorAwareness={presence}
         onEditorAwarenessChange={setPresence}

docs/pro-editor/demos/defaultAssets.tsx

@@ -2,10 +2,10 @@
  * iframe: 600
  */
 import { demoAssets } from '@/ComponentAsset/demoAssets';
-import { ComponentAsset, ProEditor } from '@ant-design/pro-editor';
+import { ComponentAsset, ProBuilder } from '@ant-design/pro-editor';
 
 export default () => (
-  <ProEditor
+  <ProBuilder
     componentAsset={
       new ComponentAsset({
         ...demoAssets,

docs/pro-editor/demos/empty.tsx

@@ -1,6 +1,6 @@
 /**
  * iframe: 300
  */
-import { ProEditor } from '@ant-design/pro-editor';
+import { ProBuilder } from '@ant-design/pro-editor';
 
-export default () => <ProEditor style={{ height: '100vh' }} />;
+export default () => <ProBuilder style={{ height: '100vh' }} />;

docs/pro-editor/index.md

@@ -1,15 +1,15 @@
 ---
-title: ProEditor 配置容器
-atomId: ProEditor
+title: ProBuilder 配置容器
+atomId: ProBuilder
 group: 组件
 nav:
   title: 装配器
   order: 3
 ---
 
-# ProEditor 装配器容器
+# ProBuilder 装配器容器
 
-使用 ProEditor 可以快速构建出组件的配置界面。
+使用 ProBuilder 可以快速构建出组件的配置界面。
 
 ## 以 Button 示例
 

docs/pro-editor/provider.md

@@ -1,14 +1,14 @@
 ---
-title: ProEditorProvider
+title: ProBuilderProvider
 group: 组件
 ---
 
-# ProEditorProvider
+# ProBuilderProvider
 
 如果：
 
 - 希望在不是 ProEditor 组件子元素的组件中使用 `useProEditor`、useConfig、`useViewport` 等 ProEditor 钩子；
 - 在页面上有多个 ProEditor 实例；
 - 需要在不是 ProEditor 组件子元素的组件中访问内部状态，或使用 ProEditor 所提供的数据方法。
 
-那么你就需要用 `ProEditorProvider` 包裹相应的应用组件。
+那么你就需要用 `ProBuilderProvider` 包裹相应的应用组件。

docs/pro-editor/usePresenceAsset.md

@@ -22,6 +22,6 @@ const getPresenceAsset = () => {
 
 :::warning
 
-注：该 hook 只能在被 `ProEditorProvider` 包裹的组件中使用，或者在 `<ProEditor />` 组件的子组件中使用。
+注：该 hook 只能在被 `ProBuilderProvider` 包裹的组件中使用，或者在 `<ProEditor />` 组件的子组件中使用。
 
 :::

docs/pro-editor/useProEditor.md

@@ -28,7 +28,7 @@ const MyComponent = () => {
 
 :::warning
 
-注：该 hook 只能在被 `ProEditorProvider` 包裹的组件中使用，或者在 `<ProEditor />` 组件的子组件中使用。
+注：该 hook 只能在被 `ProBuilderProvider` 包裹的组件中使用，或者在 `<ProEditor />` 组件的子组件中使用。
 
 :::
 

src/ComponentAsset/ComponentAsset.tsx

@@ -4,7 +4,7 @@ import { StoreApi } from 'zustand';
 import type { UseBoundStore } from 'zustand/react';
 import { getDefaultValueFromSchema } from '../utils';
 
-import type { EditorMode } from '../ProEditor';
+import type { EditorMode } from '../ProBuilder';
 import type { AssetModels, CanvasRule, CodeEmitter, ComponentAssetParams } from './types';
 import { DataProvider, EmitterEnv } from './types';
 

src/ComponentAsset/store/createAssetStore.ts

@@ -5,7 +5,7 @@ import { UseContextStore, createContext, optionalDevtools } from 'zustand-utils'
 import { DevtoolsOptions } from 'zustand/middleware';
 import { createWithEqualityFn } from 'zustand/traditional';
 
-import type { ProEditorInstance } from '@/ProEditor';
+import type { ProBuilderInstance } from '@/ProBuilder';
 
 export interface AssetStoreOptions<T = any> {
   devtools?: boolean | DevtoolsOptions;
@@ -14,7 +14,7 @@ export interface AssetStoreOptions<T = any> {
 }
 
 export type CreateAssetStore<T> = StateCreator<
-  T & ProEditorInstance,
+  T & ProBuilderInstance,
   [['zustand/devtools', never]],
   [],
   T
@@ -47,8 +47,8 @@ export type WithoutCallSignature<T> = {
 };
 
 export const createUseAssetStore = <T>(): {
-  useStore: UseContextStore<StoreApi<T & ProEditorInstance>>;
-  useStoreApi: () => WithoutCallSignature<StoreApi<T & ProEditorInstance>>;
+  useStore: UseContextStore<StoreApi<T & ProBuilderInstance>>;
+  useStoreApi: () => WithoutCallSignature<StoreApi<T & ProBuilderInstance>>;
   AssetProvider: ({
     createStore,
     children,

src/ComponentAsset/types/model.ts

@@ -1,5 +1,5 @@
 import type { EmitterEnv } from '@ant-design/pro-editor';
-import type { EditorMode } from '../../ProEditor';
+import type { EditorMode } from '../../ProBuilder';
 import type { JSONSchema } from '../types';
 
 export type FuncAssetSchema<C> = (mode?: EditorMode) => JSONSchema<C>;

src/ProEditor/components/AssetStoreUpdater/index.tsx → src/ProBuilder/components/AssetStoreUpdater/index.tsx

@@ -3,11 +3,11 @@ import { memo, useEffect } from 'react';
 import { storeApiSetState } from 'zustand-utils';
 import { shallow } from 'zustand/shallow';
 
-import { useProEditor } from '../../hooks/useProEditor';
+import { useProBuilder } from '../../hooks/useProBuilder';
 import { useStore, useStoreApi } from '../../store';
 
 const AssetStoreUpdater = memo(() => {
-  const instance = useProEditor();
+  const instance = useProBuilder();
 
   const [useAssetStoreApi, configSelector, setConfig, config] = useStore(
     (s) => [
@@ -44,24 +44,24 @@ const AssetStoreUpdater = memo(() => {
     return config;
   }, isEqual);
 
-  const proEditorStoreApi = useStoreApi();
+  const proBuilderStoreApi = useStoreApi();
 
   // 用 defaultConfig 更新 config
   useEffect(() => {
     if (!!config) return;
     const state = { config: defaultConfig };
-    storeApiSetState(proEditorStoreApi, state, false, {
+    storeApiSetState(proBuilderStoreApi, state, false, {
       type: '⏬ 注入初始化 config',
       payload: state,
     });
-    proEditorStoreApi.getState().yjsDoc.updateHistoryData(state);
+    proBuilderStoreApi.getState().yjsDoc.updateHistoryData(state);
 
     setConfig(defaultConfig, (state) => {
       storeApiSetState(assetStoreApi, state, false, { type: '🔄 初始化状态', payload: state });
     });
   }, [defaultConfig]);
 
-  // 将 proEditorStore 的 config 自动同步到  assetStore
+  // 将 proBuilderStore 的 config 自动同步到  assetStore
   useEffect(() => {
     if (!!config) {
       const assetConfig = configSelector(assetStoreApi.getState());

src/ProEditor/components/NavBar/index.tsx → src/ProBuilder/components/NavBar/index.tsx

@@ -22,10 +22,10 @@ const NavBar: FC<NavBarProps> = memo(({ logo }) => {
     <Space>
       <img
         src="https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg"
-        alt="ProEditor"
+        alt="ProBuilder"
         className={styles.img}
       />
-      <div style={{ fontSize: 16 }}>ProEditor</div>
+      <div style={{ fontSize: 16 }}>ProBuilder</div>
     </Space>
   );
 

src/ProBuilder/components/NavBar/style.ts

@@ -0,0 +1,22 @@
+import { createStyles } from '../../../theme';
+
+export const useStyle = createStyles(({ token, css, cx }, prefixCls: string) => ({
+  container: cx(
+    prefixCls,
+    css`
+      background-color: ${token.colorBgContainer};
+    `,
+  ),
+  logo: cx(
+    `${prefixCls}-logo`,
+    css`
+      font-size: 16px;
+    `,
+  ),
+  img: cx(
+    `${prefixCls}-logo-img`,
+    css`
+      height: 24px;
+    `,
+  ),
+}));

src/ProEditor/components/Stage/Empty.tsx → src/ProBuilder/components/Stage/Empty.tsx

@@ -19,9 +19,7 @@ const Starter: FC = memo(() => {
         <componentAsset.CanvasStarter />
       ) : (
         <Empty
-          image={
-            <img src="https://gw.alipayobjects.com/zos/antfincdn/rxat8ds3j/empty.svg" />
-          }
+          image={<img src="https://gw.alipayobjects.com/zos/antfincdn/rxat8ds3j/empty.svg" />}
           imageStyle={{
             height: 210,
             marginBottom: 32,

src/ProEditor/container/App.tsx → src/ProBuilder/container/App.tsx

@@ -9,12 +9,12 @@ import AssetStoreUpdater from '../components/AssetStoreUpdater';
 import ConfigPanel from '../components/ConfigPanel';
 import Stage from '../components/Stage';
 
-import { useHotkeyManager } from '@/ProEditor/hooks/useHotkeyManager';
+import { useHotkeyManager } from '@/ProBuilder/hooks/useHotkeyManager';
 import DefaultErrorBoundary from '../../ErrorBoundary';
 import { useStore } from '../store';
 import { useStyle } from './style';
 
-export interface ProEditorAppProps {
+export interface ProBuilderAppProps {
   /**
    * 替换logo
    */
@@ -32,7 +32,7 @@ export interface ProEditorAppProps {
   onCopy?: (children: any) => void;
 }
 
-export const ProEditor: FC<ProEditorAppProps> = memo((props) => {
+export const ProBuilder: FC<ProBuilderAppProps> = memo((props) => {
   const { logo, hideNavbar = true, style, ErrorBoundary = DefaultErrorBoundary, onCopy } = props;
 
   const [prefixCls, exportConfig, componentAsset, width, panelExpand] = useStore(
@@ -80,4 +80,4 @@ export const ProEditor: FC<ProEditorAppProps> = memo((props) => {
   );
 });
 
-export default ProEditor;
+export default ProBuilder;

src/ProEditor/container/Provider.tsx → src/ProBuilder/container/Provider.tsx

@@ -3,7 +3,7 @@ import { DevtoolsOptions } from 'zustand/middleware';
 
 import { createStore, Provider, useStoreApi } from '../store';
 
-export const ProEditorProvider: FC<{
+export const ProBuilderProvider: FC<{
   children: ReactNode;
   devtoolOptions?: boolean | DevtoolsOptions;
 }> = ({ children, devtoolOptions }) => {
@@ -24,4 +24,4 @@ export const ProEditorProvider: FC<{
   return <Provider createStore={() => createStore(devtoolOptions)}>{Content}</Provider>;
 };
 
-export default ProEditorProvider;
+export default ProBuilderProvider;

src/ProEditor/container/StoreUpdater.tsx → src/ProBuilder/container/StoreUpdater.tsx

@@ -2,15 +2,15 @@ import isEqual from 'fast-deep-equal';
 import { memo, MutableRefObject, useImperativeHandle } from 'react';
 import { createStoreUpdater, storeApiSetState } from 'zustand-utils';
 
-import { ProEditorInstance, useProEditor } from '../hooks/useProEditor';
-import type { ProEditorState } from '../store';
+import { ProBuilderInstance, useProBuilder } from '../hooks/useProBuilder';
+import type { ProBuilderState } from '../store';
 import { useStoreApi } from '../store';
 
 /**
  * 传入StoreUpdater 的值
  */
-export interface StoreUpdaterProps extends Partial<ProEditorState> {
-  editorRef?: MutableRefObject<ProEditorInstance>;
+export interface StoreUpdaterProps extends Partial<ProBuilderState> {
+  editorRef?: MutableRefObject<ProBuilderInstance>;
 }
 
 const StoreUpdater = memo(
@@ -57,7 +57,7 @@ const StoreUpdater = memo(
     useStoreUpdater('onConfigChange', onConfigChange, []);
     useStoreUpdater('onCanvasError', onCanvasError, []);
 
-    const instance = useProEditor();
+    const instance = useProBuilder();
     useImperativeHandle(editorRef, () => instance);
 
     return null;