chore(release): publish

- @music163/tango-designer@0.1.3
 - @music163/tango-setting-form@0.1.3

apps/playground/src/mock/project.ts

@@ -2,7 +2,7 @@ const packageJson = {
   name: 'demo',
   private: true,
   dependencies: {
-    '@music163/antd': '0.1.5',
+    '@music163/antd': '0.1.6',
     '@music163/tango-boot': '0.1.3',
     react: '17.0.2',
     'react-dom': '17.0.2',
@@ -52,7 +52,7 @@ const tangoJson = {
       description: '云音乐低代码运行时框架',
     },
     '@music163/antd': {
-      version: '0.1.5',
+      version: '0.1.7',
       library: 'TangoAntd',
       type: 'baseDependency',
       resources: [
@@ -148,7 +148,7 @@ import {
 class App extends React.Component {
   render() {
     return (
-      <Page title="页面标题">
+      <Page title={tango.stores.app.title}>
        <Section>
        </Section>
        <Section>
@@ -167,7 +167,7 @@ import { defineStore } from '@music163/tango-boot';
 
 export default defineStore({
 
-  title: 'hello world',
+  title: 'Page Title',
 
   array: [1, 2, 3],
 }, 'app');

apps/playground/src/pages/index.tsx

@@ -1,4 +1,6 @@
 import React, { useState } from 'react';
+import { Box } from 'coral-system';
+import { Button, Space } from 'antd';
 import {
   Designer,
   DesignerPanel,
@@ -6,8 +8,8 @@ import {
   Sidebar,
   Toolbar,
   WorkspacePanel,
+  WorkspaceView,
   ComponentsPanel,
-  ViewPanel,
   CodeEditor,
   Sandbox,
   DndQuery,
@@ -16,8 +18,6 @@ import { createEngine, Workspace } from '@music163/tango-core';
 import { Logo, ProjectDetail } from './share';
 import { sampleFiles } from '../mock/project';
 import './index.less';
-import { Box } from 'coral-system';
-import { Button, Space } from 'antd';
 
 // 1. 实例化工作区
 const workspace = new Workspace({
@@ -74,7 +74,7 @@ export default function App() {
           <Sidebar.Item key="dependency" isFloat width={800} />
         </Sidebar>
         <WorkspacePanel>
-          <ViewPanel mode="design">
+          <WorkspaceView mode="design">
             <Sandbox
               onMessage={(e) => {
                 if (e.type === 'done') {
@@ -91,10 +91,10 @@ export default function App() {
                 }
               }}
             />
-          </ViewPanel>
-          <ViewPanel mode="code">
+          </WorkspaceView>
+          <WorkspaceView mode="code">
             <CodeEditor />
-          </ViewPanel>
+          </WorkspaceView>
         </WorkspacePanel>
         <SettingPanel />
       </DesignerPanel>

packages/designer/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.3](https://github.com/netease/tango/compare/@music163/tango-designer@0.1.2...@music163/tango-designer@0.1.3) (2023-09-07)
+
+### Bug Fixes
+
+- add WorkspaceView ([5ecf444](https://github.com/netease/tango/commit/5ecf444fc3563a1bf8e533136e93c1a1355d39dc))
+
 ## 0.1.2 (2023-09-06)
 
 ### Bug Fixes

packages/designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-designer",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "lowcode designer",
   "keywords": [
     "react"
@@ -37,7 +37,7 @@
     "@music163/tango-core": "^0.1.2",
     "@music163/tango-helpers": "^0.1.2",
     "@music163/tango-sandbox": "^0.1.2",
-    "@music163/tango-setting-form": "^0.1.2",
+    "@music163/tango-setting-form": "^0.1.3",
     "@music163/tango-ui": "^0.1.2",
     "antd": "^4.24.2",
     "cash-dom": "^8.1.2",

packages/designer/src/context.ts

@@ -1,9 +1,6 @@
-import { createContext, TangoRemoteServicesType } from '@music163/tango-helpers';
+import { createContext } from '@music163/tango-helpers';
 import type { DndQuery } from './dnd';
 
-/**
- * TODO: 是不是直接合并到 Context 中
- */
 export interface IDesignerContext {
   /**
    * 沙箱查询实例
@@ -12,7 +9,7 @@ export interface IDesignerContext {
   /**
    * 远程服务
    */
-  remoteServices?: TangoRemoteServicesType;
+  remoteServices?: Record<string, object>;
 }
 
 const [DesignerProvider, useDesigner] = createContext<IDesignerContext>({

packages/designer/src/designer.tsx

@@ -1,11 +1,11 @@
-import React, { useEffect } from 'react';
-import { SystemProvider } from 'coral-system';
+import React, { useEffect, useMemo } from 'react';
+import { SystemProvider, extendTheme } from 'coral-system';
 import { ConfigProvider } from 'antd';
-import zhCN from 'antd/lib/locale/zh_CN';
 import { TangoEngineProvider, ITangoEngineContext } from '@music163/tango-context';
+import { createFromIconfontCN } from '@ant-design/icons';
 import { DesignerProvider, IDesignerContext } from './context';
 import { theme as baseTheme } from './theme';
-import { createFromIconfontCN } from '@ant-design/icons';
+import zhCN from 'antd/lib/locale/zh_CN';
 
 export interface DesignerProps extends IDesignerContext, ITangoEngineContext {
   /**
@@ -33,7 +33,7 @@ export function Designer(props: DesignerProps) {
     iconfontScriptUrl = '//at.alicdn.com/t/c/font_2891794_lzc7rtwuzf.js',
     children,
   } = props;
-  const theme = themeProp ?? baseTheme;
+  const theme = useMemo(() => extendTheme(themeProp, baseTheme), [themeProp]);
   useEffect(() => {
     createFromIconfontCN({
       scriptUrl: iconfontScriptUrl,

packages/designer/src/index.ts

@@ -3,7 +3,7 @@ export * from './designer';
 export * from './designer-panel';
 export * from './workspace-panel';
 export * from './setting-panel';
-export * from './view-panel';
+export * from './workspace-view';
 export * from './editor';
 export * from './sandbox';
 export * from './sidebar';
@@ -11,6 +11,4 @@ export * from './toolbar';
 export * from './dnd';
 
 export { INTERNAL_SELECTION_TOOLS } from './simulator/selection';
-
-export { useWorkspace, useDesigner, observer } from '@music163/tango-context';
 export { register as registerSetter } from '@music163/tango-setting-form';

packages/designer/src/workspace-view.tsx

@@ -3,7 +3,7 @@ import { Box } from 'coral-system';
 import { observer, useDesigner } from '@music163/tango-context';
 import { DesignerViewType } from '@music163/tango-core';
 
-export interface ViewPanelProps {
+export interface WorkspaceViewProps {
   /**
    * 视图面板模式，对应 Workspace 的模式
    */
@@ -11,7 +11,7 @@ export interface ViewPanelProps {
   children: React.ReactNode;
 }
 
-export const ViewPanel = observer((props: ViewPanelProps) => {
+export const WorkspaceView = observer((props: WorkspaceViewProps) => {
   const { mode = 'design', children } = props;
   const designer = useDesigner();
   const display = mode !== designer.activeView ? 'none' : 'block';

packages/setting-form/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.3](https://github.com/netease/tango/compare/@music163/tango-setting-form@0.1.2...@music163/tango-setting-form@0.1.3) (2023-09-07)
+
+### Bug Fixes
+
+- fix lint errors ([f9e6537](https://github.com/netease/tango/commit/f9e6537dd6569f4196b2799d51dbaab9838fd7f2))
+
 ## 0.1.2 (2023-09-06)
 
 **Note:** Version bump only for package @music163/tango-setting-form

packages/setting-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-setting-form",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "setting form of tango-apps",
   "author": "wwsun <ww.sun@outlook.com>",
   "homepage": "",

packages/setting-form/src/components/input-kv.tsx

@@ -99,25 +99,25 @@ const OneInputKV = (props: any) => {
     !newData.length && setValidate(false);
   };
 
-  const handleInput = (name: string, index: number, value: string) => {
+  const handleInput = (name: string, index: number, val: string) => {
     const newData = [...data];
 
     if (!newData[index]) return;
 
     // 更新值
-    newData[index][name] = value;
+    newData[index][name] = val;
 
     _updateData(newData);
   };
 
   const _updateData = (values: Array<Record<string, string>>) => {
     const omit = ({ index, ...rest }: any) => rest;
-    let value = formatValue({ data: values, format });
+    let nextValue = formatValue({ data: values, format });
 
-    Array.isArray(value) && (value = value.map((item) => omit(item)));
+    Array.isArray(nextValue) && (nextValue = nextValue .map((item) => omit(item)));
 
     setData(values);
-    onChange?.(value);
+    onChange?.(nextValue);
   };
 
   // render

packages/setting-form/src/components/variable-tree.tsx

@@ -184,17 +184,17 @@ export function EditableVariableTree({
         </Box>
         <VariableTree
           dataSource={treeData}
-          onSelect={(node) => {
-            setNode(node);
+          onSelect={(item) => {
+            setNode(item);
             mode === 'add' && setMode(defaultMode);
-            onSelect(node);
+            onSelect(item);
           }}
-          onAdd={(node) => {
-            setNode(node);
+          onAdd={(item) => {
+            setNode(item);
             setMode('add');
           }}
-          onRemove={(node) => {
-            const [type, storeName] = node.key.split('.');
+          onRemove={(item) => {
+            const [type, storeName] = item.key.split('.');
             setNode(null);
             onDeleteStore(storeName);
           }}
@@ -257,8 +257,8 @@ export function EditableVariableTree({
             <NodeDefineForm
               node={node}
               onSave={onSave}
-              onDelete={(node) => {
-                const [type, storeName, stateName] = node.key.split('.');
+              onDelete={(item) => {
+                const [type, storeName, stateName] = item.key.split('.');
                 onDeleteVariable(storeName, stateName);
                 setNode(null);
               }}
@@ -470,7 +470,7 @@ function NodeDefineForm({ node, onSave = noop, onDelete = noop }: NodeDefineProp
       <InputCode
         shape="inset"
         value={node.raw}
-        onChange={(value) => setValue(value)}
+        onChange={(nextValue) => setValue(nextValue)}
         editable={editable}
         onBlur={() => {
           if (!isValidExpressionCode(value)) {

packages/setting-form/src/setters/event-setter.tsx

@@ -80,9 +80,9 @@ export function EventSetter(props: EventSetterProps) {
         defaultValue={inputValue}
         visible={expModalVisible}
         onCancel={() => setExpModalVisible(false)}
-        onOk={(value) => {
+        onOk={(nextValue) => {
           setExpModalVisible(false);
-          handleChange(value);
+          handleChange(nextValue);
         }}
         dataSource={actionVariables}
       />

packages/setting-form/src/setters/expression-setter.tsx

@@ -231,13 +231,13 @@ export function ExpressionModal({
               // height={400}
               dataSource={dataSource || expressionVariables}
               onUse={(node) => {
-                let exp;
+                let str;
                 if (/^(stores|services)\./.test(node.key)) {
-                  exp = `{tango.${node.key.replaceAll('.', '?.')}}`;
+                  str = `{tango.${node.key.replaceAll('.', '?.')}}`;
                 } else {
-                  exp = `{${node.key}}`;
+                  str = `{${node.key}}`;
                 }
-                setExp(exp);
+                setExp(str);
               }}
               onAddVariable={(storeName, data) => {
                 onAction('addStoreState', [storeName, data.name, data.initialValue]);

packages/setting-form/src/setters/style-setter.tsx

@@ -175,8 +175,8 @@ export function ColorSetter(props: FormItemComponentProps<string>) {
   const colorPanel = (
     <SketchPicker
       color={color}
-      onChangeComplete={(color: any) => {
-        const nextValue = color.rgb.a === 1 ? color.hex : rgbaObjectToString(color.rgb);
+      onChangeComplete={(newColor: any) => {
+        const nextValue = newColor.rgb.a === 1 ? newColor.hex : rgbaObjectToString(newColor.rgb);
         if (typeof onChange === 'function') {
           onChange(nextValue);
         }
@@ -353,19 +353,19 @@ export function BorderSetter({ value, onChange }: FormItemComponentProps<string>
   const [width, setWidth] = useState<number>(Number(getPxValue(valueParts[0])) || 0);
   const [color, setColor] = useState<string>(valueParts[2] || '#000');
 
-  const handleChange = (key: string, value: any) => {
+  const handleChange = (key: string, val: any) => {
     let ret: any[];
     switch (key) {
       case 'style': {
-        ret = [width, value, color];
+        ret = [width, val, color];
         break;
       }
       case 'width': {
-        ret = [`${value}px`, style, color];
+        ret = [`${val}px`, style, color];
         break;
       }
       case 'color': {
-        ret = [width, style, value];
+        ret = [width, style, val];
         break;
       }
       default: