chore: add LevaPanel demo

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

@@ -6,7 +6,7 @@ import { FC, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
-import { ButtonConfig, buttonSchema } from './models';
+import { ButtonConfig, buttonModel } from './models';
 
 export const ButtonPanel: FC = memo(() => {
   const data = useProEditorStore((s) => s.config, isEqual);
@@ -18,7 +18,7 @@ export const ButtonPanel: FC = memo(() => {
   return (
     <>
       <LevaPanel<ButtonConfig>
-        schema={buttonSchema}
+        schema={buttonModel.schema()}
         onChange={(data, item) => {
           updateConfig(item, { replace: true });
         }}

package.json

@@ -57,105 +57,103 @@
     ]
   },
   "dependencies": {
-    "@ant-design/icons": "^5",
-    "@ant-design/pro-components": "^2",
-    "@antv/dw-random": "^1",
-    "@babel/runtime": "^7.21.5",
-    "@c2d2c/types": "^1",
-    "@c2d2c/utils": "^1",
-    "@dnd-kit/core": "^6",
-    "@dnd-kit/modifiers": "^6",
-    "@dnd-kit/sortable": "^7",
-    "@dnd-kit/utilities": "^3",
-    "@emotion/react": "^11",
-    "@emotion/styled": "^11",
-    "@faker-js/faker": "^7",
-    "@floating-ui/react": "^0.24",
-    "@handsontable/react": "^12",
-    "@mui/material": "^5",
-    "@textea/json-viewer": "^3",
-    "ahooks": "^3",
+    "@ant-design/icons": "^5.1.4",
+    "@ant-design/pro-components": "^2.6.7",
+    "@antv/dw-random": "^1.1.7",
+    "@babel/runtime": "^7.22.6",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@faker-js/faker": "^7.6.0",
+    "@floating-ui/react": "^0.24.8",
+    "@handsontable/react": "^12.4.0",
+    "@mui/material": "^5.14.1",
+    "@textea/json-viewer": "^3.1.1",
+    "ahooks": "^3.7.8",
     "classnames": "^2.3.2",
-    "color": "^4",
-    "copy-to-clipboard": "^3",
-    "diff": "^5",
+    "color": "^4.2.3",
+    "copy-to-clipboard": "^3.3.3",
+    "diff": "^5.1.0",
     "fast-deep-equal": "^3.1.3",
-    "handsontable": "^12",
+    "handsontable": "^12.4.0",
     "highlight.js": "~10.5.0",
-    "immer": "^9.0.7",
+    "immer": "^9.0.21",
     "leva": "^0.9.35",
-    "lodash-es": "^4",
+    "lodash-es": "^4.17.21",
     "lodash.flatten": "^4.4.0",
     "lodash.get": "^4.4.2",
     "lodash.isempty": "^4.4.0",
     "lodash.isequal": "^4.5.0",
-    "lodash.merge": "^4",
+    "lodash.merge": "^4.6.2",
     "lodash.template": "^4.5.0",
     "lodash.union": "^4.6.0",
     "lodash.unionby": "^4.8.0",
     "mockjs": "^1.1.0",
-    "polished": "^4",
-    "prettier": "^2.6.1",
-    "re-resizable": "^6.9.1",
-    "react-colorful": "^5",
-    "react-copy-to-clipboard": "^5.0.4",
-    "react-hotkeys-hook": "^4",
-    "react-layout-kit": "^1",
-    "react-rnd": "^10.3.5",
-    "reactflow": "^11",
-    "rxjs": "^7.5.5",
+    "polished": "^4.2.2",
+    "prettier": "^2.8.8",
+    "re-resizable": "^6.9.9",
+    "react-colorful": "^5.6.1",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-hotkeys-hook": "^4.4.1",
+    "react-layout-kit": "^1.7.0",
+    "react-rnd": "^10.4.1",
+    "reactflow": "^11.7.4",
+    "rxjs": "^7.8.1",
     "shiki-es": "~0.2.0",
-    "type-fest": "^3",
-    "umi-request": "^1.3.9",
-    "use-merge-value": "^1",
-    "yjs": "^13",
-    "zustand": "^4",
+    "type-fest": "^3.13.1",
+    "umi-request": "^1.4.0",
+    "use-merge-value": "^1.2.0",
+    "yjs": "^13.6.7",
+    "zustand": "^4.3.9",
     "zustand-middleware-yjs": "^1.3.1",
-    "zustand-utils": "^1"
+    "zustand-utils": "^1.3.0"
   },
   "devDependencies": {
-    "@emotion/jest": "^11",
-    "@testing-library/jest-dom": "^5.16.5",
+    "@emotion/jest": "^11.11.0",
+    "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/color": "^3",
-    "@types/json-schema": "^7.0.11",
-    "@types/lodash-es": "^4",
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
-    "@umijs/lint": "^4.0.0",
+    "@types/color": "^3.0.3",
+    "@types/json-schema": "^7.0.12",
+    "@types/lodash-es": "^4.17.8",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@umijs/lint": "^4.0.72",
     "@vitest/coverage-v8": "latest",
-    "antd": "^5",
-    "antd-style": "^3",
+    "antd": "^5.7.2",
+    "antd-style": "^3.4.3",
     "babel-plugin-antd-style": "^1.0.4",
-    "commitlint": "^17",
-    "commitlint-config-gitmoji": "^2",
+    "commitlint": "^17.6.7",
+    "commitlint-config-gitmoji": "^2.3.1",
     "conventional-changelog-gitmoji-config": "^1.5.2",
-    "dumi": "^2",
+    "dumi": "^2.2.1",
     "dumi-theme-antd-style": "latest",
-    "eslint": "^8.23.0",
-    "father": "^4.1.0",
+    "eslint": "^8.45.0",
+    "father": "^4.2.3",
     "gh-pages": "^5.0.0",
-    "glob": "^10.2.6",
-    "husky": "^8.0.1",
-    "jsdom": "^22",
-    "lint-staged": "^13.0.3",
+    "glob": "^10.3.3",
+    "husky": "^8.0.3",
+    "jsdom": "^22.1.0",
+    "lint-staged": "^13.2.3",
     "lucide-react": "latest",
     "prettier": "^2.7.1",
-    "prettier-plugin-organize-imports": "^3.0.0",
-    "prettier-plugin-packagejson": "^2.2.18",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "rxjs-spy": "^8",
-    "semantic-release": "^21",
-    "semantic-release-config-gitmoji": "^1",
-    "stylelint": "^15",
-    "typescript": "^5.0.4",
+    "prettier-plugin-organize-imports": "^3.2.3",
+    "prettier-plugin-packagejson": "^2.4.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rxjs-spy": "^8.0.2",
+    "semantic-release": "^21.0.7",
+    "semantic-release-config-gitmoji": "^1.5.3",
+    "stylelint": "^15.10.2",
+    "typescript": "^5.1.6",
     "vitest": "latest",
     "wait-on": "^6.0.1",
-    "y-protocols": "^1",
-    "y-webrtc": "^10",
-    "y-websocket": "^1",
+    "y-protocols": "^1.0.5",
+    "y-webrtc": "^10.2.5",
+    "y-websocket": "^1.5.0",
     "zundo": "beta"
   },
   "peerDependencies": {
@@ -171,5 +169,8 @@
   "authors": [
     "[email protected]",
     "[email protected]"
-  ]
+  ],
+  "gitmoji": {
+    "capitalizeTitle": false
+  }
 }

src/ComponentAsset/ComponentAsset.tsx

@@ -1,8 +1,8 @@
 /*eslint no-invalid-this: "error"*/
-import { getDefaultValueFromSchema } from '@c2d2c/utils';
 import { FC, ReactNode } from 'react';
 import { StoreApi } from 'zustand';
 import type { UseBoundStore } from 'zustand/react';
+import { getDefaultValueFromSchema } from '../utils';
 
 import type { EditorMode } from '../ProEditor';
 import type { AssetModels, CanvasRule, CodeEmitter, ComponentAssetParams } from './types';

src/ComponentAsset/types/index.ts

@@ -1,5 +1,5 @@
+export * from '../../types/schema';
 export * from './asset';
 export * from './code';
 export * from './model';
 export * from './render';
-export * from './schema';

src/IconPicker/components/IconList/IconThumbnail.tsx

@@ -1,8 +1,8 @@
-import type { IconUnit } from '@c2d2c/types';
 import { createStyles } from 'antd-style';
 import type { FC } from 'react';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import type { IconUnit } from '../../types';
 
 import IconItem from '../../features/IconRender';
 import { useStore } from '../../store';

src/IconPicker/contents/antdIcons.ts

@@ -1,5 +1,5 @@
 import * as AntdIcon from '@ant-design/icons';
-import type { ReactIcon } from '@c2d2c/types';
+import type { ReactIcon } from '../types';
 
 const list = Object.keys(AntdIcon).filter(
   (key) => key.endsWith('Outlined') || key.endsWith('Filled'),

src/IconPicker/store/initialState.ts

@@ -1,6 +1,5 @@
-import type { IconfontIcon, IconUnit, ReactIcon } from '@c2d2c/types';
 import { antdIconList } from '../contents/antdIcons';
-import type { ExternalScripts } from '../types';
+import type { ExternalScripts, IconfontIcon, IconUnit, ReactIcon } from '../types';
 
 export interface State {
   /**

src/IconPicker/store/store.test.ts

@@ -1,9 +1,9 @@
-import type { IconUnit } from '@c2d2c/types';
 import { act, renderHook } from '@testing-library/react';
 import { readFileSync } from 'fs';
 import path from 'path';
 import { vi } from 'vitest';
 import { create } from 'zustand';
+import type { IconUnit } from '../types';
 
 import type { Store } from './store';
 import vanillaStore from './store';

src/IconPicker/types/index.ts

@@ -1,5 +1,3 @@
-export type { IconUnit, IconfontIcon, ReactIcon } from '@c2d2c/types';
-
 /**
  * 外部的图标 url
  */
@@ -13,3 +11,23 @@ export interface ExternalScripts {
    */
   url: string;
 }
+
+export interface ReactIcon {
+  type: 'antd' | 'custom';
+  componentName: string;
+  props?: object;
+}
+
+export interface IconfontIcon {
+  type: 'iconfont';
+  componentName: string;
+  props: {
+    type: string;
+  };
+  scriptUrl?: string;
+}
+
+/**
+ * 最基础的图标信息单元
+ */
+export type IconUnit = ReactIcon | IconfontIcon;

src/LevaPanel/Schema.tsx

@@ -1,11 +1,11 @@
 import { JSONSchema } from '@/ComponentAsset';
-import { getDefaultValueFromSchema } from '@c2d2c/utils';
 import { useMemoizedFn } from 'ahooks';
 import isEqual from 'fast-deep-equal';
 import { useControls, useStoreContext } from 'leva';
 import { DataInput } from 'leva/src/types';
 import merge from 'lodash.merge';
 import { ReactNode, memo, useEffect, useMemo } from 'react';
+import { getDefaultValueFromSchema } from '../utils';
 
 import { SchemaItem, toLevaSchema } from './utils/schema';
 

src/LevaPanel/demos/button.tsx

@@ -0,0 +1,41 @@
+import { DraggablePanel, LevaPanel } from '@ant-design/pro-editor';
+import { Button } from 'antd';
+import { useState } from 'react';
+import { ButtonConfig, buttonSchema } from './schema';
+
+export default () => {
+  const [config, setConfig] = useState<ButtonConfig>({ children: '默认按钮', type: 'primary' });
+
+  return (
+    <div
+      style={{
+        minHeight: 300,
+        display: 'flex',
+      }}
+    >
+      <div
+        style={{
+          flex: 1,
+          display: 'flex',
+          justifyContent: 'center',
+          padding: 12,
+          alignSelf: 'center',
+        }}
+      >
+        <Button {...config} />
+      </div>
+      <DraggablePanel style={{ padding: 12 }}>
+        <LevaPanel
+          schema={buttonSchema}
+          title="按钮属性配置器"
+          value={config}
+          onChange={(changedValue, fullValue) => {
+            setConfig(fullValue);
+            console.log('check changedValue:', changedValue);
+            console.log('check fullValue:', fullValue);
+          }}
+        />
+      </DraggablePanel>
+    </div>
+  );
+};