chore(release): publish

- @music163/tango-designer@1.0.0-alpha.11

apps/playground/src/helpers/index.tsx

@@ -3,12 +3,12 @@ import { Box, Group } from 'coral-system';
 import { Avatar, Space, Switch } from 'antd';
 import { BranchesOutlined, MenuOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { registerSetter } from '@music163/tango-designer';
-import type { ComponentPrototypeType } from '@music163/tango-helpers';
+import type { ComponentPrototypeType, IVariableTreeNode } from '@music163/tango-helpers';
 import { FooSetter } from '../components';
 
 export * from './mock-files';
 
-export const bootHelperVariables = [
+export const bootHelperVariables: IVariableTreeNode[] = [
   {
     key: '$helpers',
     title: '工具函数',

apps/playground/src/pages/index.tsx

@@ -22,6 +22,7 @@ import {
   BuildOutlined,
   ClusterOutlined,
   FunctionOutlined,
+  createFromIconfontCN,
 } from '@ant-design/icons';
 
 // 1. 实例化工作区
@@ -38,12 +39,18 @@ const engine = createEngine({
 // @ts-ignore
 window.__workspace__ = workspace;
 
+// 3. 沙箱初始化
 const sandboxQuery = new DndQuery({
   context: 'iframe',
 });
 
+// 4. 图标库初始化（物料面板和组件树使用了 iconfont 里的图标）
+createFromIconfontCN({
+  scriptUrl: '//at.alicdn.com/t/c/font_2891794_lzc7rtwuzf.js',
+});
+
 /**
- * 3. 平台初始化，访问 https://local.netease.com:6006/
+ * 5. 平台初始化，访问 https://local.netease.com:6006/
  */
 export default function App() {
   const [menuLoading, setMenuLoading] = useState(true);
@@ -126,6 +133,7 @@ export default function App() {
                   setMenuLoading(false);
                 }
               }}
+              navigatorExtra={<Button size="small">hello world</Button>}
             />
           </WorkspaceView>
           <WorkspaceView mode="code">

apps/storybook/src/setting-form.stories.tsx

@@ -1,12 +1,18 @@
 import React from 'react';
-import { FormModel, SettingForm } from '@music163/tango-setting-form';
+import { FormModel, SettingForm, register } from '@music163/tango-setting-form';
 import { ComponentPrototypeType } from '@music163/tango-helpers';
+import { BorderSetter } from '@music163/tango-designer/src/setters/style-setter';
 import { Box } from 'coral-system';
 import { JsonView } from '@music163/tango-ui';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import { Card } from 'antd';
 
+register({
+  name: 'borderSetter',
+  component: BorderSetter,
+});
+
 export default {
   title: 'SettingForm',
 };
@@ -26,6 +32,11 @@ const prototype: ComponentPrototypeType = {
       title: 'textSetter',
       setter: 'textSetter',
     },
+    {
+      name: 'border',
+      title: 'borderSetter',
+      setter: 'borderSetter',
+    },
     {
       name: 'router',
       title: 'routerSetter',
@@ -251,7 +262,13 @@ export function Basic() {
 export function Lite() {
   return (
     <Box width={320} border="solid">
-      <SettingForm showSearch={false} showGroups={false} prototype={prototype} />
+      <SettingForm
+        showSearch={false}
+        showGroups={false}
+        showItemSubtitle={false}
+        prototype={prototype}
+        disableSwitchExpressionSetter
+      />
     </Box>
   );
 }

apps/storybook/src/ui/var-tree.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VariableTree } from '@music163/tango-designer';
+import { VariableTree } from '@music163/tango-designer/src/components';
 import { Box } from 'coral-system';
 
 export default {

packages/designer/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-alpha.11](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.10...@music163/tango-designer@1.0.0-alpha.11) (2024-02-02)
+
+### Features
+
+- allow add extra node to sandbox navigator ([#100](https://github.com/netease/tango/issues/100)) ([5b12193](https://github.com/netease/tango/commit/5b121939e6712c912610014f7bbad3074403fc3f))
+
+# [1.0.0-alpha.10](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.9...@music163/tango-designer@1.0.0-alpha.10) (2024-01-29)
+
+### Bug Fixes
+
+- remove load iconfont ([#97](https://github.com/netease/tango/issues/97)) ([d5e42c9](https://github.com/netease/tango/commit/d5e42c93bb79362dd5f15d5cd2147952dee681bf))
+
+# [1.0.0-alpha.9](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.8...@music163/tango-designer@1.0.0-alpha.9) (2024-01-24)
+
+### Bug Fixes
+
+- update service preview panel ([#94](https://github.com/netease/tango/issues/94)) ([d6a08ee](https://github.com/netease/tango/commit/d6a08eecd2521e9699bee1ff3ffebb651a2a620d))
+
+# [1.0.0-alpha.8](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.7...@music163/tango-designer@1.0.0-alpha.8) (2024-01-23)
+
+**Note:** Version bump only for package @music163/tango-designer
+
 # [1.0.0-alpha.7](https://github.com/netease/tango/compare/@music163/tango-designer@1.0.0-alpha.6...@music163/tango-designer@1.0.0-alpha.7) (2024-01-16)
 
 ### Bug Fixes

packages/designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-designer",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.11",
   "description": "lowcode designer",
   "keywords": [
     "react"
@@ -37,8 +37,8 @@
     "@music163/tango-core": "^1.0.0-alpha.6",
     "@music163/tango-helpers": "^1.0.0-alpha.2",
     "@music163/tango-sandbox": "^1.0.0-alpha.6",
-    "@music163/tango-setting-form": "^1.0.0-alpha.6",
-    "@music163/tango-ui": "^1.0.0-alpha.4",
+    "@music163/tango-setting-form": "^1.0.0-alpha.9",
+    "@music163/tango-ui": "^1.0.0-alpha.7",
     "antd": "^4.24.2",
     "cash-dom": "^8.1.2",
     "classnames": "^2.3.2",

packages/designer/src/components/variable-tree/add-service.tsx

@@ -33,6 +33,7 @@ export function AddServiceForm({
       layout="horizontal"
       initialValues={initialValues}
       onFinish={(values) => {
+        setDisabled(true);
         onSubmit(values);
       }}
       {...formProps}

packages/designer/src/components/variable-tree/index.tsx

@@ -349,7 +349,6 @@ export function VariableTree(props: VariableTreeProps) {
                     onCancel={clear}
                     onSubmit={(values) => {
                       onUpdateService(values);
-                      clear();
                     }}
                   />
                 </Panel>

packages/designer/src/designer.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { SystemProvider, extendTheme } from 'coral-system';
 import { ConfigProvider } from 'antd';
 import { TangoEngineProvider, ITangoEngineContext } from '@music163/tango-context';
-import { createFromIconfontCN } from '@ant-design/icons';
 import zhCN from 'antd/lib/locale/zh_CN';
 import { DesignerProvider, IDesignerContext } from './context';
 import defaultTheme from './themes/default';
@@ -12,10 +11,6 @@ export interface DesignerProps extends IDesignerContext, ITangoEngineContext {
    * 主题包
    */
   theme?: any;
-  /**
-   * 自定义图表库svg脚本地址
-   */
-  iconfontScriptUrl?: string;
   children?: React.ReactNode;
 }
 
@@ -25,21 +20,8 @@ export interface DesignerProps extends IDesignerContext, ITangoEngineContext {
  * @returns
  */
 export function Designer(props: DesignerProps) {
-  const {
-    engine,
-    config,
-    theme: themeProp,
-    sandboxQuery,
-    remoteServices = {},
-    iconfontScriptUrl = '//at.alicdn.com/t/c/font_2891794_lzc7rtwuzf.js',
-    children,
-  } = props;
+  const { engine, config, theme: themeProp, sandboxQuery, remoteServices = {}, children } = props;
   const theme = useMemo(() => extendTheme(themeProp, defaultTheme), [themeProp]);
-  useEffect(() => {
-    createFromIconfontCN({
-      scriptUrl: iconfontScriptUrl,
-    });
-  }, [iconfontScriptUrl]);
   return (
     <SystemProvider theme={theme} prefix="--tango">
       <ConfigProvider locale={zhCN}>

packages/designer/src/sandbox/navigator.tsx

@@ -33,6 +33,10 @@ interface NavigatorProps {
   onForward?: () => void;
   onRefresh?: () => void;
   onInputEnter?: (text: string, e: React.KeyboardEvent<HTMLInputElement>) => void;
+  /**
+   * 附加信息
+   */
+  extra?: React.ReactNode;
 }
 
 interface NavigatorState {
@@ -68,7 +72,7 @@ export class Navigator extends React.Component<NavigatorProps, NavigatorState> {
   };
 
   render() {
-    const { disabled, onBack, onForward, onRefresh } = this.props;
+    const { disabled, onBack, onForward, onRefresh, extra } = this.props;
     return (
       <Box
         className="navigator"
@@ -93,6 +97,7 @@ export class Navigator extends React.Component<NavigatorProps, NavigatorState> {
           disabled={disabled}
         />
         <ViewportSwitch />
+        {extra}
       </Box>
     );
   }

packages/designer/src/sandbox/sandbox.tsx

@@ -35,6 +35,10 @@ export type SandboxProps = Omit<CodeSandboxProps, 'files' | 'eventHandlers' | 'o
   onViewChange?: (data: any, config?: ISandboxEventHandlerConfig) => void;
   onMessage?: (data: any, config?: ISandboxEventHandlerConfig) => void;
   onLoad?: (config?: ISandboxEventHandlerConfig) => void;
+  /**
+   * 沙箱导航栏扩展
+   */
+  navigatorExtra?: React.ReactNode;
 };
 
 export interface CombinedSandboxRef {
@@ -296,6 +300,7 @@ export const Sandbox = observer(
     selectionTools,
     bundlerURL,
     mode = 'combined',
+    navigatorExtra,
     ...props
   }: SandboxProps) => {
     const bundlerUrl = bundlerURL ?? 'https://codesandbox.fn.netease.com';
@@ -362,6 +367,7 @@ export const Sandbox = observer(
             }
             workspace.selectSource.clear();
           }}
+          extra={navigatorExtra}
         />
         <Simulator>
           <Viewport selectionTools={selectionTools}>

packages/designer/src/setters/choice-setter.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Radio, RadioProps, Tooltip } from 'antd';
-import { IconFont } from '@music163/tango-ui';
 import type { OptionType } from '@music163/tango-helpers';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 
@@ -11,15 +10,9 @@ interface ChoiceSetterProps {
 
 export function ChoiceSetter({
   options,
-  mode = 'text',
   onChange,
   ...props
 }: FormItemComponentProps<string> & ChoiceSetterProps) {
-  const renderLabel =
-    mode === 'text'
-      ? (item: OptionType) => item.label
-      : (item: OptionType) => <IconFont type={item.icon} />;
-
   return (
     <Radio.Group
       optionType="button"
@@ -31,7 +24,7 @@ export function ChoiceSetter({
     >
       {options.map((item) => (
         <RadioButton tip={item.tip} key={item.value} value={item.value}>
-          {renderLabel(item)}
+          {item.label}
         </RadioButton>
       ))}
     </Radio.Group>

packages/designer/src/setters/style-setter.tsx

@@ -3,8 +3,8 @@ import { Box, Grid, HTMLCoralProps } from 'coral-system';
 import { InputNumber, Dropdown, Input, Radio, Popover, Button } from 'antd';
 import { SketchPicker } from 'react-color';
 import Color from 'color';
-import { BgColorsOutlined, FileImageOutlined } from '@ant-design/icons';
-import { SingleMonacoEditor, IconFont } from '@music163/tango-ui';
+import { BgColorsOutlined, EyeInvisibleOutlined, FileImageOutlined } from '@ant-design/icons';
+import { SingleMonacoEditor, LineSolidOutlined, LineDashedOutlined } from '@music163/tango-ui';
 import { FormItemComponentProps } from '@music163/tango-setting-form';
 import { ChoiceSetter } from './choice-setter';
 import { TextSetter } from './text-setter';
@@ -34,7 +34,7 @@ export function CssCodeSetter({ value, onChange }: FormItemComponentProps<string
             value={contentValue}
             onBlur={(newCode) => {
               if (newCode != contentValue) {
-                onChange('{css`' + newCode + '`}', {
+                onChange(`{css\`${newCode}\`}`, {
                   // relatedImports: ['']
                 });
               }
@@ -258,7 +258,7 @@ export function SpacingSetter({ value, onChange }: FormItemComponentProps<string
     return (val: string) => {
       tempRef.current[index] = `${val}`;
       const str2px = tempRef.current.map((it) => {
-        return it + 'px';
+        return `${it}px`;
       });
       onChange(str2px.join(' '));
     };
@@ -388,15 +388,16 @@ export function BorderSetter({ value, onChange }: FormItemComponentProps<string>
             setStyle(e.target.value);
             handleChange('style', e.target.value);
           }}
+          buttonStyle="solid"
         >
           <Radio.Button value="none">
-            <IconFont type="icon-display-none" title="none" />
+            <EyeInvisibleOutlined />
           </Radio.Button>
           <Radio.Button value="solid">
-            <IconFont type="icon-fengexian" title="solid" />
+            <LineSolidOutlined />
           </Radio.Button>
           <Radio.Button value="dashed">
-            <IconFont type="icon-line-dashed" title="dashed" />
+            <LineDashedOutlined />
           </Radio.Button>
         </Radio.Group>
       </Label>

packages/setting-form/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-alpha.9](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.0.0-alpha.8...@music163/tango-setting-form@1.0.0-alpha.9) (2024-01-29)
+
+### Features
+
+- add showItemSubtitle and renderItemExtra to SettingForm ([#99](https://github.com/netease/tango/issues/99)) ([32962d4](https://github.com/netease/tango/commit/32962d47fbef4a5cd59df0431eb4df951c36f521))
+
+# [1.0.0-alpha.8](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.0.0-alpha.7...@music163/tango-setting-form@1.0.0-alpha.8) (2024-01-24)
+
+### Bug Fixes
+
+- update service preview panel ([#94](https://github.com/netease/tango/issues/94)) ([d6a08ee](https://github.com/netease/tango/commit/d6a08eecd2521e9699bee1ff3ffebb651a2a620d))
+
+# [1.0.0-alpha.7](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.0.0-alpha.6...@music163/tango-setting-form@1.0.0-alpha.7) (2024-01-23)
+
+### Bug Fixes
+
+- update FormObject style ([#91](https://github.com/netease/tango/issues/91)) ([8fd085d](https://github.com/netease/tango/commit/8fd085d4fd41e588a5d3657add736a1e56088e4a))
+
 # [1.0.0-alpha.6](https://github.com/netease/tango/compare/@music163/tango-setting-form@1.0.0-alpha.5...@music163/tango-setting-form@1.0.0-alpha.6) (2024-01-16)
 
 **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": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.9",
   "description": "setting form of tango-apps",
   "author": "wwsun <ww.sun@outlook.com>",
   "homepage": "",
@@ -30,7 +30,7 @@
     "@ant-design/icons": "^4.8.0",
     "@music163/tango-core": "^1.0.0-alpha.6",
     "@music163/tango-helpers": "^1.0.0-alpha.2",
-    "@music163/tango-ui": "^1.0.0-alpha.4",
+    "@music163/tango-ui": "^1.0.0-alpha.7",
     "antd": "^4.24.2",
     "coral-system": "^1.0.5",
     "mobx": "6.12.0",

packages/setting-form/src/context.tsx

@@ -15,6 +15,10 @@ export interface FormVariableContextType {
    * 是否允许表单项切换到表达式设置器
    */
   disableSwitchExpressionSetter?: boolean;
+  /**
+   * 是否展示表单项的副标题
+   */
+  showItemSubtitle?: boolean;
 }
 
 const FormVariableContext = createContext<FormVariableContextType>(null);

packages/setting-form/src/form-item.tsx

@@ -79,7 +79,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
     extra,
     footer,
   }: FormItemProps) {
-    const { disableSwitchExpressionSetter } = useFormVariable();
+    const { disableSwitchExpressionSetter, showItemSubtitle } = useFormVariable();
     const model = useFormModel();
     const field = model.getField(name);
     const value = toJS(field.value ?? defaultValue);
@@ -141,7 +141,7 @@ export function createFormItem(options: IFormItemCreateOptions) {
       <FormControl
         visible={getVisible(model)}
         label={title}
-        note={name}
+        note={showItemSubtitle ? name : null}
         tip={tip}
         docs={docs}
         error={field.error}

packages/setting-form/src/form-ui.tsx

@@ -103,9 +103,11 @@ export function FormControlGroup({
           {extra}
         </Box>
       }
-      borderTop="solid"
-      borderBottom="solid"
+      border="solid"
       borderColor="line.normal"
+      headerProps={{
+        bg: 'fill1',
+      }}
     >
       <Box
         p="m"

packages/setting-form/src/form.tsx

@@ -51,6 +51,11 @@ const formStyle = css`
     margin-left: var(--tango-space-m);
     margin-right: var(--tango-space-m);
   }
+
+  > .SettingFormMain > .FormObject {
+    margin-left: var(--tango-space-m);
+    margin-right: var(--tango-space-m);
+  }
 `;
 
 interface IFormTabsGroupOption {
@@ -90,6 +95,14 @@ export interface SettingFormProps {
    * 是否显示分组导航
    */
   showGroups?: boolean;
+  /**
+   * 是否显示表单项的副标题
+   */
+  showItemSubtitle?: boolean;
+  /**
+   * 自定义渲染表单项的额外内容（标签右侧）
+   */
+  renderItemExtra?: (props: ComponentPropType) => React.ReactNode;
   /**
    * 选项分组信息，用于对表单项进行分组展示，如未提供，则使用内置的分组信息
    */
@@ -108,6 +121,8 @@ export function SettingForm({
   onChange = noop,
   showSearch = true,
   showGroups = true,
+  showItemSubtitle = true,
+  renderItemExtra,
   groupOptions = internalGroups,
 }: SettingFormProps) {
   const [keyword, setKeyword] = useState('');
@@ -144,14 +159,19 @@ export function SettingForm({
     (props: ComponentPropType[]) =>
       props.map((item) => {
         const { getProp, ...rest } = item;
-        const childProto = {
+        const childProp = {
           ...rest,
           ...getProp?.(model),
         };
-        const FormChild = isValidNestProps(childProto.props) ? SettingFormObject : SettingFormItem;
-        return <FormChild key={item.name} {...childProto} />;
+        if (isValidNestProps(childProp.props)) {
+          return <SettingFormObject key={item.name} {...childProp} />;
+        } else {
+          return (
+            <SettingFormItem key={item.name} extra={renderItemExtra?.(childProp)} {...childProp} />
+          );
+        }
       }),
-    [model],
+    [model, renderItemExtra],
   );
 
   useEffect(() => {
@@ -162,7 +182,7 @@ export function SettingForm({
   }, [modelProp]);
 
   return (
-    <FormVariableProvider value={{ disableSwitchExpressionSetter }}>
+    <FormVariableProvider value={{ disableSwitchExpressionSetter, showItemSubtitle }}>
       <FormModelProvider value={model}>
         <Box className="SettingForm" mb="xl" css={formStyle}>
           <Box className="SettingFormHeader" position="sticky" top="0" bg="white" zIndex="2">

packages/ui/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.0.0-alpha.7](https://github.com/netease/tango/compare/@music163/tango-ui@1.0.0-alpha.6...@music163/tango-ui@1.0.0-alpha.7) (2024-01-29)
+
+### Bug Fixes
+
+- remove load iconfont ([#97](https://github.com/netease/tango/issues/97)) ([d5e42c9](https://github.com/netease/tango/commit/d5e42c93bb79362dd5f15d5cd2147952dee681bf))
+
+# [1.0.0-alpha.6](https://github.com/netease/tango/compare/@music163/tango-ui@1.0.0-alpha.5...@music163/tango-ui@1.0.0-alpha.6) (2024-01-24)
+
+### Bug Fixes
+
+- update service preview panel ([#94](https://github.com/netease/tango/issues/94)) ([d6a08ee](https://github.com/netease/tango/commit/d6a08eecd2521e9699bee1ff3ffebb651a2a620d))
+
+# [1.0.0-alpha.5](https://github.com/netease/tango/compare/@music163/tango-ui@1.0.0-alpha.4...@music163/tango-ui@1.0.0-alpha.5) (2024-01-23)
+
+### Bug Fixes
+
+- update FormObject style ([#91](https://github.com/netease/tango/issues/91)) ([8fd085d](https://github.com/netease/tango/commit/8fd085d4fd41e588a5d3657add736a1e56088e4a))
+
 # [1.0.0-alpha.4](https://github.com/netease/tango/compare/@music163/tango-ui@1.0.0-alpha.3...@music163/tango-ui@1.0.0-alpha.4) (2024-01-16)
 
 **Note:** Version bump only for package @music163/tango-ui

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@music163/tango-ui",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.7",
   "description": "ui widgets of tango",
   "keywords": [
     "react",
@@ -44,7 +44,7 @@
     "coral-system": "^1.0.5",
     "eslint-linter-browserify": "^8.51.0",
     "react-json-view": "^1.21.3",
-    "react-monaco-editor-lite": "^1.2.3"
+    "react-monaco-editor-lite": "^1.2.4"
   },
   "publishConfig": {
     "access": "public",

packages/ui/src/collapse-panel.tsx

@@ -32,6 +32,8 @@ export interface CollapsePanelProps extends Omit<HTMLCoralProps<'div'>, 'title'>
    * 是否显示底部边框线
    */
   showBottomBorder?: boolean;
+  headerProps?: HTMLCoralProps<'div'>;
+  bodyProps?: HTMLCoralProps<'div'>;
 }
 
 const headerStyle = css`
@@ -54,6 +56,8 @@ export function CollapsePanel(props: CollapsePanelProps) {
     onCollapse,
     stickyHeader,
     showBottomBorder = true,
+    headerProps,
+    bodyProps,
     ...rest
   } = props;
   const [collapsed, setCollapsed] = useControllableState({
@@ -92,6 +96,7 @@ export function CollapsePanel(props: CollapsePanelProps) {
         onClick={() => setCollapsed(!collapsed)}
         p="m"
         {...stickHeaderProps}
+        {...headerProps}
         css={headerStyle}
       >
         <Box display="flex" alignItems="center" fontSize="14px" fontWeight="500">
@@ -100,7 +105,7 @@ export function CollapsePanel(props: CollapsePanelProps) {
         </Box>
         <Box>{extra}</Box>
       </Box>
-      <Box className="CollapsePanelBody" display={collapsed ? 'none' : 'block'}>
+      <Box className="CollapsePanelBody" display={collapsed ? 'none' : 'block'} {...bodyProps}>
         {children}
       </Box>
     </Box>

packages/ui/src/icons/index.ts

@@ -1,5 +1,7 @@
 export * from './create-icon';
 export * from './code-outlined';
+export * from './line-dashed-outlined';
+export * from './line-solid-outlined';
 export * from './open-panel-filled-left-outlined';
 export * from './open-panel-filled-right-outlined';
 export * from './open-panel-left-outlined';

packages/ui/src/icons/line-dashed-outlined.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const LineDashedOutlinedSvg = () => (
+  <svg
+    viewBox="0 0 1025 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+  >
+    <path d="M212.8 468.8H43.2C17.6 468.8 0 486.4 0 512s17.6 43.2 43.2 43.2h171.2c25.6 0 43.2-17.6 43.2-43.2-1.6-25.6-19.2-43.2-44.8-43.2zM980.8 468.8H811.2c-25.6 0-43.2 17.6-43.2 43.2s17.6 43.2 43.2 43.2h171.2c25.6 0 43.2-17.6 43.2-43.2-1.6-25.6-19.2-43.2-44.8-43.2zM596.8 468.8H427.2c-25.6 0-43.2 17.6-43.2 43.2s17.6 43.2 43.2 43.2h171.2c25.6 0 43.2-17.6 43.2-43.2-1.6-25.6-19.2-43.2-44.8-43.2z" />
+  </svg>
+);
+
+export const LineDashedOutlined = createIcon(LineDashedOutlinedSvg, 'LineSolidOutlined');

packages/ui/src/icons/line-solid-outlined.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { createIcon } from './create-icon';
+
+const LineSolidOutlinedSvg = () => (
+  <svg
+    viewBox="0 0 1024 1024"
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+  >
+    <path d="M141.21142578 496.55047632h741.57714844v30.89904736H141.21142578z" />
+  </svg>
+);
+
+export const LineSolidOutlined = createIcon(LineSolidOutlinedSvg, 'LineSolidOutlined');

yarn.lock

@@ -17779,6 +17779,16 @@ react-monaco-editor-lite@^1.2.3:
     monaco-textmate "^3.0.1"
     onigasm "^2.2.5"
 
+react-monaco-editor-lite@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.npmmirror.com/react-monaco-editor-lite/-/react-monaco-editor-lite-1.2.4.tgz#d8616c137a1fb35456a703dc0c140dc43fe777ff"
+  integrity sha512-Hr4ozGVgv/zsWU0Lre8+S4khv1dLKHz/CGDSyNyvqEG323avkKyJ0ez4DG39wHGQ+Ax/bpgMb6b87UODeLq91w==
+  dependencies:
+    monaco-editor "^0.38.0"
+    monaco-editor-textmate "^4.0.0"
+    monaco-textmate "^3.0.1"
+    onigasm "^2.2.5"
+
 react-refresh@0.14.0, react-refresh@^0.14.0:
   version "0.14.0"
   resolved "https://registry.npmmirror.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"