Merge pull request #48 from Pivot-Studio/featue-editor

线上ide组件

.vscode/settings.json

@@ -6,7 +6,7 @@
   "editor.formatOnSaveMode": "file",
   "files.eol": "\n",
   "[typescriptreact]": {
-    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+    "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
   },
   "[scss]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"

package.json

@@ -16,11 +16,13 @@
     "@babel/parser": "^7.21.2",
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
+    "@types/babel__core": "^7.20.2",
+    "@typescript-eslint/parser": "^6.4.1",
     "babel-plugin-jsx": "^1.2.0",
     "es-dirname": "^0.1.0",
     "eslint-config-psfe": "1.0.5",
-    "@typescript-eslint/parser": "^6.4.1",
-    "husky": "^8.0.2"
+    "husky": "^8.0.2",
+    "prettier": "^2.8.8"
   },
   "dependencies": {
     "core-js": "^3.25.1",

packages/demo/package.json

@@ -39,6 +39,7 @@
     "@mdx-js/loader": "^2.1.5",
     "babel-plugin-prismjs": "^2.1.0",
     "gsap": "^3.11.5",
+    "node-polyfill-webpack-plugin": "^2.0.1",
     "pivot-design": "workspace:*",
     "pivot-design-icon": "workspace:*",
     "prismjs": "^1.29.0",

packages/demo/src/components/Editor/.catalog.ts

@@ -1 +1 @@
-export const list = []
+export const list = [{"h2":"基本用法","h3":[]},{"h2":"多文件模型","h3":[]}]

packages/demo/src/components/Editor/demo/Base.tsx

@@ -1,10 +1,10 @@
-import { Editor } from 'pivot-design';
+import { MonacoEditor } from 'pivot-design';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
   return (
     <>
-      <Editor />
+      <MonacoEditor />
     </>
   );
 };

packages/demo/src/components/Editor/demo/Multiple.tsx

@@ -0,0 +1,11 @@
+import { MultipleEditor } from 'pivot-design';
+import React, { useState } from 'react';
+
+const App: React.FC = () => {
+  return (
+    <>
+      <MultipleEditor style={{ marginTop: 24 }} />
+    </>
+  );
+};
+export default App;

packages/demo/src/components/Editor/index.mdx

@@ -4,8 +4,15 @@ import Props from './props.mdx';
 
 ## 基本用法
 
-<CodeBlock id="基本示例">
+{/* <CodeBlock id="基本示例" style={{ padding: 0 }}>
   <Base />
+</CodeBlock> */}
+
+
+## 多文件模型
+
+<CodeBlock id="多文件模型" style={{ padding: 0 }}>
+  <Multiple />
 </CodeBlock>
 
 <Props />

packages/demo/src/components/Editor/props.mdx

@@ -1,7 +1,4 @@
-import Table from '../table.tsx';
-
-export const params = [];
-
-## API 列表
-
-<Table name="input" params={params} />
+import Table from '../table.tsx'
+export const params = []
+## API 列表
+<Table name='editor' params={params}/>

packages/demo/src/components/Tabs/.catalog.ts

@@ -0,0 +1 @@
+export const list = [{"h2":"基本用法","h3":[]},{"h2":"卡片样式","h3":[]}]

packages/demo/src/components/Tabs/demo/Base.tsx

@@ -0,0 +1,28 @@
+import { Tabs } from 'pivot-design';
+import React, { useState } from 'react';
+
+const App: React.FC = () => {
+  const items = [
+    {
+      key: '1',
+      label: 'Tab 1',
+      children: 'Content of Tab Pane 1',
+    },
+    {
+      key: '2',
+      label: 'Tab Second',
+      children: 'Content of Tab Pane 2',
+    },
+    {
+      key: '3',
+      label: 'Tab 3',
+      children: 'Content of Tab Pane 3',
+    },
+  ];
+  return (
+    <>
+      <Tabs items={items} />
+    </>
+  );
+};
+export default App;

packages/demo/src/components/Tabs/demo/CardType.tsx

@@ -0,0 +1,28 @@
+import { Tabs } from 'pivot-design';
+import React, { useState } from 'react';
+
+const App: React.FC = () => {
+  const items = [
+    {
+      key: '1',
+      label: 'Tab 1',
+      children: 'Content of Tab Pane 1',
+    },
+    {
+      key: '2',
+      label: 'Tab Second',
+      children: 'Content of Tab Pane 2',
+    },
+    {
+      key: '3',
+      label: 'Tab 3',
+      children: 'Content of Tab Pane 3',
+    },
+  ];
+  return (
+    <>
+      <Tabs items={items} type="card" />
+    </>
+  );
+};
+export default App;

packages/demo/src/components/Tabs/index.mdx

@@ -0,0 +1,17 @@
+import Props from './props.mdx';
+
+# Tabs
+
+## 基本用法
+
+<CodeBlock id="基本示例">
+  <Base />
+</CodeBlock>
+
+## 卡片样式 type = `'card'`
+
+<CodeBlock id="基本示例">
+  <CardType />
+</CodeBlock>
+
+<Props />

packages/demo/src/components/Tabs/props.mdx

@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"contentStyle","value":": CSSProperties","optional":true,"version":"1.0.0","description":"自定义Tabs内容容器样式"},{"key":"renderCommonContent","value":": (item: TabsItemProps) => ReactNode","optional":true,"version":"1.0.0","description":"自定义渲染Tabs公共内容"},{"key":"items","value":": TabsItemProps[]","version":"1.0.0","description":"标签页项最主要的数据，用于渲染标签页","default":"[]"},{"key":"type","value":": 'default' | 'card'","optional":true,"version":"1.0.0","description":"标签种类样式","default":"\"default\""},{"key":"value","value":": UniqueId","optional":true,"version":"1.0.0","description":"当前激活的标签页索引","default":"0"},{"key":"onChange","value":": (tab: UniqueId) => void","optional":true,"version":"1.0.0","description":"标签页发生改变时触发的监听函数","default":"undefined"}]
+## API 列表
+<Table name='tabs' params={params}/>

packages/demo/src/components/_CodeBlock/index.scss

@@ -1,5 +1,5 @@
 .pivot-code-box {
-  max-width: 900px;
+  max-width: 1000px;
   position: relative;
   margin: 30px 0;
   overflow: hidden;
@@ -20,10 +20,7 @@
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-    background-color: var(--semi-color-fill-0);
-    > :not(.PIVOT-draggable-item) {
-      margin: 0 24px;
-    }
+    background-color: var(--semi-color-bg-2);
   }
 
   .line-numbers {

packages/demo/src/pages/components/index.scss

@@ -12,7 +12,6 @@
 
   @media only screen and (min-width: 1900px) {
     &-content {
-      justify-content: center;
       padding: 50px 12vw;
     }
   }
@@ -30,7 +29,7 @@
       padding: 8px 0.6rem;
       padding-top: 50px;
       min-width: 240px;
-      background: var(--semi-color-bg-1);
+      background: var(--semi-color-bg-2);
       font-size: 14px;
 
       .demo-item {

packages/demo/src/pages/components/tabs.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Tabs } from 'pivot-design';
+import TabsMdx from '@/components/Tabs/index.mdx';
+import CodeBlock from '@/components/_CodeBlock/codeBlock';
+import { list } from '@/components/Input/.catalog';
+import { renderCatalog } from '@/utils';
+const TabsPage: React.FC = () => {
+  return (
+    <>
+      <TabsMdx components={{ Tabs, CodeBlock }} />
+      <div className="demo-component-catalogue">{renderCatalog(list)}</div>
+    </>
+  );
+};
+export default TabsPage;

packages/demo/src/routers/index.tsx

@@ -13,6 +13,7 @@ import Transition from '@/pages/components/transition';
 import Skeleton from '@/pages/components/skeleton';
 import Modal from '@/pages/components/modal';
 import Editor from '@/pages/components/editor';
+import Tabs from '@/pages/components/tabs';
 import { generateComponentRouter } from '@/utils';
 
 const router: RouteObject[] = [
@@ -39,6 +40,7 @@ const router: RouteObject[] = [
           skeleton: <Skeleton />,
           modal: <Modal />,
           editor: <Editor />,
+          tabs: <Tabs />,
         }),
       },
     ],

packages/demo/src/utils/path.ts

@@ -11,10 +11,6 @@ export const ComponentPath = [
     path: 'card',
     title: 'Card 卡片',
   },
-  {
-    path: 'button',
-    title: 'Card 卡片',
-  },
   {
     path: 'draggable',
     title: 'Draggable 拖拽列表',
@@ -43,6 +39,10 @@ export const ComponentPath = [
     path: 'transition',
     title: 'Transition 元素动画',
   },
+  {
+    path: 'tabs',
+    title: 'Tabs 标签页',
+  },
   {
     path: 'editor',
     title: 'Editor 代码编辑器',

packages/demo/webpack.config.js

@@ -1,5 +1,6 @@
 const path = require('path'); //node环境当前路径
 const HtmlWebpackPlugin = require('html-webpack-plugin'); //模板文件插件，能够自动将打包的css和js加入到模板文件中
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
 module.exports = {
   entry: {
     app: './index.tsx', //找到咱们刚才在src下面的入口文件
@@ -14,6 +15,11 @@ module.exports = {
     alias: {
       '@': path.resolve(__dirname, './src'),
     },
+    fallback: {
+      fs: false,
+      assert: require.resolve('assert'),
+      path: require.resolve('path-browserify'),
+    },
   },
   devServer: {
     port: 8080,
@@ -86,5 +92,6 @@ module.exports = {
         removeComments: true, // 移除注释
       },
     }),
+    new NodePolyfillPlugin(),
   ],
 };

packages/design-props/components/editor.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { PivotDesignProps } from './';
+export interface MultipleEditorProps extends PivotDesignProps {
+
+}

packages/design-props/components/tabs.ts

@@ -0,0 +1,47 @@
+import { CSSProperties, ReactNode } from 'react';
+import { PivotDesignProps } from './';
+
+type UniqueId = string | number;
+
+export interface TabsItemProps {
+  label: UniqueId;
+  key: UniqueId;
+  children?: ReactNode;
+  [x: string]: any;
+}
+export interface TabsProps extends PivotDesignProps {
+  /**
+   * @version 1.0.0
+   * @description 自定义Tabs内容容器样式
+   */
+  contentStyle?: CSSProperties;
+  /**
+   * @version 1.0.0
+   * @description 自定义渲染Tabs公共内容
+   */
+  renderCommonContent?: (item: TabsItemProps) => ReactNode;
+  /**
+   * @version 1.0.0
+   * @description 标签页项最主要的数据，用于渲染标签页
+   * @default []
+   */
+  items: TabsItemProps[];
+  /**
+   * @version 1.0.0
+   * @description 标签种类样式
+   * @default "default"
+   */
+  type?: 'default' | 'card';
+  /**
+   * @version 1.0.0
+   * @description 当前激活的标签页索引
+   * @default 0
+   */
+  value?: UniqueId;
+  /**
+   * @version 1.0.0
+   * @description 标签页发生改变时触发的监听函数
+   * @default undefined
+   */
+  onChange?: (tab: UniqueId) => void;
+}

packages/design-props/index.ts

@@ -7,3 +7,5 @@ export * from './components/skeleton';
 export * from './components/popover';
 export * from './components/modal';
 export * from './components/transition';
+export * from './components/tabs';
+export * from './components/editor';

packages/design/.prettierrc

@@ -1,4 +1,4 @@
 {
   "singleQuote": true,
-  "printWidth": 120
+  "printWidth": 80
 }

packages/design/babel.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  // 执行顺序由右往左,所以先处理ts,再处理jsx,最后再试一下babel转换为低版本语法
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        // 设置兼容目标浏览器版本,这里可以不写,babel-loader会自动寻找上面配置好的文件.browserslistrc
+        // "targets": {
+        //  "chrome": 35,
+        //  "ie": 9
+        // },
+        useBuiltIns: 'usage', // 根据配置的浏览器兼容,以及代码中使用到的api进行引入polyfill按需添加
+        corejs: 3, // 配置使用core-js低版本
+      },
+    ],
+    ['@babel/preset-react', { runtime: 'automatic' }],
+    '@babel/preset-typescript',
+  ],
+};

packages/design/components/Modal/index.scss

@@ -31,7 +31,7 @@
     width: 448px;
     border-radius: 16px;
     color: var(--semi-color-text-0);
-    background-color: var(--semi-color-bg-3);
+    background-color: var(--semi-color-bg-4);
 
     .#{$prefix}-modal-cancel {
     }