Merge pull request #209 from idrawjs/dev-v0.4

refactor: refactor @idraw/lab

packages/design/dev/data/components/button.ts → packages/lab/dev/data/components/button.ts

@@ -1,9 +1,9 @@
 import { createUUID } from '@idraw/util';
 import type { ElementSize } from '@idraw/types';
-import type { DesignComponent, DesignComponentItem } from '../../../src';
+import type { LabComponent, LabComponentItem } from '../../../src';
 
 function createButtonItem(variantName: string, size?: Partial<ElementSize>) {
-  const componentItem: DesignComponentItem = {
+  const componentItem: LabComponentItem = {
     uuid: createUUID(),
     type: 'component-item',
     name: `Button ${variantName}`,
@@ -105,7 +105,7 @@ function createButtonItem(variantName: string, size?: Partial<ElementSize>) {
 }
 
 export function createButton(name: string, size?: Partial<ElementSize>) {
-  const button: DesignComponent = {
+  const button: LabComponent = {
     uuid: createUUID(),
     type: 'component',
     name: `Button ${name}`,

packages/design/dev/data/components/checkbox.ts → packages/lab/dev/data/components/checkbox.ts

@@ -1,9 +1,9 @@
 import { createUUID } from '@idraw/util';
 import type { ElementSize } from '@idraw/types';
-import type { DesignComponent, DesignComponentItem } from '../../../src';
+import type { LabComponent, LabComponentItem } from '../../../src';
 
 function createCheckboxItem(variantName: string, size?: Partial<ElementSize>) {
-  const componentItem: DesignComponentItem = {
+  const componentItem: LabComponentItem = {
     uuid: createUUID(),
     type: 'component-item',
     name: `Checkbox ${variantName}`,
@@ -76,7 +76,7 @@ function createCheckboxItem(variantName: string, size?: Partial<ElementSize>) {
 }
 
 export function createCheckbox(name: string, size?: Partial<ElementSize>) {
-  const checkbox: DesignComponent = {
+  const checkbox: LabComponent = {
     uuid: createUUID(),
     type: 'component',
     name: `Checkbox ${name}`,

packages/design/dev/data/index.ts → packages/lab/dev/data/index.ts

@@ -1,8 +1,8 @@
-import type { DesignData } from '../../src';
+import type { LabData } from '../../src';
 import { createButton } from './components/button';
 import { createCheckbox } from './components/checkbox';
 
-const data: DesignData = {
+const data: LabData = {
   components: [
     createButton('001', { angle: 45 }),
     // createButton('001', {}),

packages/design/dev/main.tsx → packages/lab/dev/main.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
-import { Design } from '../src/index';
+import { Lab } from '../src/index';
 import data from './data';
 
 const dom = document.querySelector('#lab') as HTMLDivElement;
@@ -21,7 +21,7 @@ const App = () => {
   // const width = 800;
   // const height = 600;
 
-  return <Design width={width} height={height} style={style} designData={data} />;
+  return <Lab width={width} height={height} style={style} labData={data} />;
 };
 
 root.render(<App />);

packages/design/package.json → packages/lab/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@idraw/design",
+  "name": "@idraw/lab",
   "version": "0.4.0-alpha.0",
   "dependencies": {
     "@ant-design/icons": "^5.1.3",

packages/design/src/context.ts → packages/lab/src/context.ts

@@ -1,39 +1,39 @@
 import { createContext } from 'react';
 import type { Data } from '@idraw/types';
-import { DesignData, DesignState, DesignAction, DesignContext, DesignDrawDataType } from './types';
+import { LabData, LabState, LabAction, LabContext, LabDrawDataType } from './types';
 import { parseComponentsToDrawData } from './util/view-data';
 
-export function createDesignData(): DesignData {
+export function createLabData(): LabData {
   return {
     components: [],
     modules: [],
     pages: []
   };
 }
 
-function parseDrawData(drawDataType: DesignDrawDataType, designData: DesignData | null): Data {
+function parseDrawData(drawDataType: LabDrawDataType, labData: LabData | null): Data {
   let drawData: Data = { elements: [] };
   if (drawDataType === 'component') {
-    drawData = parseComponentsToDrawData(designData?.components || []);
+    drawData = parseComponentsToDrawData(labData?.components || []);
   }
   return drawData;
 }
 
-export function createDesignContextState(opts?: Partial<DesignState>): DesignState {
-  const activeDrawDataType: DesignDrawDataType = 'component';
-  const designData: DesignData = opts?.designData || createDesignData();
-  const viewDrawData = parseDrawData(activeDrawDataType, designData);
+export function createLabContextState(opts?: Partial<LabState>): LabState {
+  const activeDrawDataType: LabDrawDataType = 'component';
+  const labData: LabData = opts?.labData || createLabData();
+  const viewDrawData = parseDrawData(activeDrawDataType, labData);
 
   return {
-    designData: designData,
+    labData: labData,
     activeDrawDataType: activeDrawDataType,
     themeMode: opts?.themeMode || 'light',
     viewDrawData: viewDrawData,
     viewDrawUUID: null
   };
 }
 
-export function createDesignReducer(state: DesignState, action: DesignAction): DesignState {
+export function createLabReducer(state: LabState, action: LabAction): LabState {
   switch (action.type) {
     case 'updateThemeMode': {
       if (!action?.payload?.themeMode) {
@@ -46,14 +46,14 @@ export function createDesignReducer(state: DesignState, action: DesignAction): D
         }
       };
     }
-    case 'updateDesignData': {
-      if (!action?.payload?.designData) {
+    case 'updateLabData': {
+      if (!action?.payload?.labData) {
         return state;
       }
       return {
         ...state,
         ...{
-          designData: action?.payload?.designData
+          labData: action?.payload?.labData
         }
       };
     }
@@ -65,7 +65,7 @@ export function createDesignReducer(state: DesignState, action: DesignAction): D
         ...state,
         ...{
           activeDrawDataType: action?.payload.activeDrawDataType,
-          viewDrawData: parseDrawData(action?.payload?.activeDrawDataType, state.designData)
+          viewDrawData: parseDrawData(action?.payload?.activeDrawDataType, state.labData)
         }
       };
       return newState;
@@ -76,8 +76,8 @@ export function createDesignReducer(state: DesignState, action: DesignAction): D
   }
 }
 
-export const Context = createContext<DesignContext>({
-  state: createDesignContextState(),
+export const Context = createContext<LabContext>({
+  state: createLabContextState(),
   dispatch: () => {
     return;
   }

packages/design/src/css/variable.less → packages/lab/src/css/variable.less

@@ -1,10 +1,10 @@
-@prefix: idraw-design;
+@prefix: idraw-lab;
 
 @white: #ffffff;
 @black: #000000;
 
-// https://ant.design/docs/spec/colors-cn
-// https://ant.design/docs/spec/dark-cn
+// https://ant.lab/docs/spec/colors-cn
+// https://ant.lab/docs/spec/dark-cn
 @gray-1: #f5f5f5;
 @gray-2: #f0f0f0;
 @gray-3: #d9d9d9;

packages/design/src/css/variable.ts → packages/lab/src/css/variable.ts

@@ -1,4 +1,4 @@
-export const PREFIX = 'idraw-design';
+export const PREFIX = 'idraw-lab';
 
 export function createPrefixName(modName: string) {
   return (...args: string[]) => {

packages/design/src/index.tsx → packages/lab/src/index.tsx

@@ -4,33 +4,33 @@ import theme from 'antd/es/theme';
 import classnames from 'classnames';
 import { Dashboard } from './modules';
 import { createPrefixName } from './css';
-import { Provider, createDesignContextState, createDesignReducer } from './context';
-import type { DesignData } from './types';
+import { Provider, createLabContextState, createLabReducer } from './context';
+import type { LabData } from './types';
 import type { DashboardProps } from './modules';
 import './css/index.less';
 
 const themeName = 'theme';
 const themePrefixName = createPrefixName(themeName);
 
-export type DesignProps = DashboardProps & {
-  designData?: DesignData;
+export type LabProps = DashboardProps & {
+  labData?: LabData;
   locale?: string; // TODO
   themeMode?: 'light' | 'dark';
 };
 
-export const Design = (props: DesignProps) => {
-  const { width = 1000, height = 600, style, className, designData, themeMode } = props;
+export const Lab = (props: LabProps) => {
+  const { width = 1000, height = 600, style, className, labData, themeMode } = props;
 
-  const [state, dispatch] = useReducer(createDesignReducer, createDesignContextState({ designData, themeMode }));
+  const [state, dispatch] = useReducer(createLabReducer, createLabContextState({ labData, themeMode }));
 
   useEffect(() => {
-    if (designData) {
+    if (labData) {
       dispatch({
-        type: 'updateDesignData',
-        payload: { designData }
+        type: 'updateLabData',
+        payload: { labData }
       });
     }
-  }, [designData]);
+  }, [labData]);
 
   return (
     <Provider value={{ state, dispatch }}>

packages/design/src/modules/header/index.tsx → packages/lab/src/modules/header/index.tsx

@@ -24,7 +24,7 @@ export const Header = (props: ModProps) => {
 
   return (
     <div style={style} className={classnames(prefixName(), className)}>
-      <span>@idraw/design</span>
+      <span>@idraw/lab</span>
       <Toolbar
         openLeftSider={openLeftSider}
         openRightSider={openRightSider}

packages/design/src/modules/panel-layer/index.tsx → packages/lab/src/modules/panel-layer/index.tsx

@@ -9,7 +9,7 @@ import CalculatorOutlined from '@ant-design/icons/CalculatorOutlined';
 import { prefixName } from './config';
 import { LayerTree } from './layer-tree';
 import { Context } from '../../context';
-import { DesignDrawDataType } from '../../types';
+import { LabDrawDataType } from '../../types';
 
 const items: TabsProps['items'] = [
   {
@@ -46,7 +46,7 @@ export const PanelLayer = (props: PanelLayerProps) => {
           items={items}
           size="small"
           onTabClick={(activeKey: string) => {
-            dispatch({ type: 'switchDrawDataType', payload: { activeDrawDataType: activeKey as DesignDrawDataType } });
+            dispatch({ type: 'switchDrawDataType', payload: { activeDrawDataType: activeKey as LabDrawDataType } });
           }}
         />
       </div>

packages/design/src/modules/panel-layer/layer-tree.tsx → packages/lab/src/modules/panel-layer/layer-tree.tsx

@@ -8,15 +8,15 @@ import { parseComponentViewTree } from '../../util/component';
 
 import type { CSSProperties } from 'react';
 import type { DataNode, TreeProps } from 'antd/es/tree';
-import type { DesignDrawDataType } from '../../types';
+import type { LabDrawDataType } from '../../types';
 
 const { DirectoryTree } = Tree;
 const baseName = 'layer-tree';
 
 export interface LayerTreeProps {
   className?: string;
   style?: CSSProperties;
-  type: DesignDrawDataType;
+  type: LabDrawDataType;
 }
 
 export const LayerTree = (props: LayerTreeProps) => {
@@ -30,7 +30,7 @@ export const LayerTree = (props: LayerTreeProps) => {
 
   let treeData: DataNode[] = [];
   if (type === 'component') {
-    treeData = parseComponentViewTree(state?.designData || null);
+    treeData = parseComponentViewTree(state?.labData || null);
   }
 
   return (

packages/lab/src/types/context.ts

@@ -0,0 +1,25 @@
+import type { Dispatch } from 'react';
+import type { Data } from '@idraw/types';
+import { LabData, LabDrawDataType } from './data';
+
+export interface LabState {
+  activeDrawDataType: LabDrawDataType;
+  labData: LabData;
+  viewDrawData: Data;
+  viewDrawUUID: string | null;
+  themeMode: 'light' | 'dark';
+}
+
+export type LabActionType = 'updateThemeMode' | 'updateLabData' | 'switchDrawDataType';
+
+export type LabAction = {
+  type: LabActionType;
+  payload: Partial<LabState>;
+};
+
+export type LabDispatch = Dispatch<LabAction>;
+
+export interface LabContext {
+  state: LabState;
+  dispatch: LabDispatch;
+}