refactor: refactor @idraw/lab

packages/design/src/types/context.ts

@@ -1,25 +0,0 @@
-import type { Dispatch } from 'react';
-import type { Data } from '@idraw/types';
-import { DesignData, DesignDrawDataType } from './data';
-
-export interface DesignState {
-  activeDrawDataType: DesignDrawDataType;
-  designData: DesignData;
-  viewDrawData: Data;
-  viewDrawUUID: string | null;
-  themeMode: 'light' | 'dark';
-}
-
-export type DesignActionType = 'updateThemeMode' | 'updateDesignData' | 'switchDrawDataType';
-
-export type DesignAction = {
-  type: DesignActionType;
-  payload: Partial<DesignState>;
-};
-
-export type DesignDispatch = Dispatch<DesignAction>;
-
-export interface DesignContext {
-  state: DesignState;
-  dispatch: DesignDispatch;
-}

packages/design/src/types/data.ts

@@ -1,48 +0,0 @@
-import type { Element, ElementType, ElementSize, ElementBaseDesc } from '@idraw/types';
-
-export type DesignItemType = 'component' | 'component-item' | 'module' | 'page';
-
-export type DesignDrawDataType = 'component' | 'module' | 'page';
-
-export type DesignComponentItem = ElementSize & {
-  uuid: string;
-  type: 'component-item';
-  name: string;
-  detail?: ElementBaseDesc & {
-    children: Array<Element<ElementType> | DesignComponentItem>;
-  };
-};
-
-export type DesignComponent = ElementSize & {
-  uuid: string;
-  type: 'component';
-  name: string;
-  detail?: ElementBaseDesc & {
-    default: DesignComponentItem;
-    variants: DesignComponentItem[];
-  };
-};
-
-export type DesignModule = ElementSize & {
-  uuid: string;
-  type: 'module';
-  name: string;
-  detail?: ElementBaseDesc & {
-    children: Array<DesignComponent>;
-  };
-};
-
-export type DesignPage = ElementSize & {
-  uuid: string;
-  type: 'page';
-  name: string;
-  detail: ElementBaseDesc & {
-    children: Array<DesignModule>;
-  };
-};
-
-export interface DesignData {
-  components: DesignComponent[];
-  modules: DesignModule[];
-  pages: DesignPage[];
-}

packages/design/src/util/component.ts

@@ -1,11 +0,0 @@
-import { ViewTreeNode, DesignData, DesignComponent } from '../types';
-import { parseComponentToViewTreeNode } from './view-tree';
-
-export function parseComponentViewTree(designData: DesignData | null): ViewTreeNode[] {
-  const treeNodes: ViewTreeNode[] = [];
-  designData?.components?.forEach((comp: DesignComponent) => {
-    const node = parseComponentToViewTreeNode(comp);
-    treeNodes.push(node);
-  });
-  return treeNodes;
-}

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/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/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/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/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/lab/src/context.ts

@@ -1,9 +1,9 @@
 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: [],
@@ -11,21 +11,21 @@ export function createDesignData(): DesignData {
   };
 }
 
-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,
@@ -33,7 +33,7 @@ export function createDesignContextState(opts?: Partial<DesignState>): DesignSta
   };
 }
 
-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/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/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/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/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/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/lab/src/modules/panel-layer/layer-tree.tsx

@@ -8,7 +8,7 @@ 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';
@@ -16,7 +16,7 @@ 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;
+}

packages/lab/src/types/data.ts

@@ -0,0 +1,48 @@
+import type { Element, ElementType, ElementSize, ElementBaseDesc } from '@idraw/types';
+
+export type LabItemType = 'component' | 'component-item' | 'module' | 'page';
+
+export type LabDrawDataType = 'component' | 'module' | 'page';
+
+export type LabComponentItem = ElementSize & {
+  uuid: string;
+  type: 'component-item';
+  name: string;
+  detail?: ElementBaseDesc & {
+    children: Array<Element<ElementType> | LabComponentItem>;
+  };
+};
+
+export type LabComponent = ElementSize & {
+  uuid: string;
+  type: 'component';
+  name: string;
+  detail?: ElementBaseDesc & {
+    default: LabComponentItem;
+    variants: LabComponentItem[];
+  };
+};
+
+export type LabModule = ElementSize & {
+  uuid: string;
+  type: 'module';
+  name: string;
+  detail?: ElementBaseDesc & {
+    children: Array<LabComponent>;
+  };
+};
+
+export type LabPage = ElementSize & {
+  uuid: string;
+  type: 'page';
+  name: string;
+  detail: ElementBaseDesc & {
+    children: Array<LabModule>;
+  };
+};
+
+export interface LabData {
+  components: LabComponent[];
+  modules: LabModule[];
+  pages: LabPage[];
+}

packages/lab/src/types/view.ts

@@ -1,9 +1,9 @@
 import type { ElementType } from '@idraw/types';
-import type { DesignItemType } from './data';
+import type { LabItemType } from './data';
 
 export interface ViewTreeNode {
   title: string;
   key: string;
-  type: DesignItemType | ElementType;
+  type: LabItemType | ElementType;
   children?: ViewTreeNode[];
 }

packages/lab/src/util/component.ts

@@ -0,0 +1,11 @@
+import { ViewTreeNode, LabData, LabComponent } from '../types';
+import { parseComponentToViewTreeNode } from './view-tree';
+
+export function parseComponentViewTree(labData: LabData | null): ViewTreeNode[] {
+  const treeNodes: ViewTreeNode[] = [];
+  labData?.components?.forEach((comp: LabComponent) => {
+    const node = parseComponentToViewTreeNode(comp);
+    treeNodes.push(node);
+  });
+  return treeNodes;
+}

packages/lab/src/util/view-data.ts

@@ -1,10 +1,10 @@
 import { deepClone } from '@idraw/util';
 import type { Data, Element, ElementType, ElementBaseDesc } from '@idraw/types';
-import type { DesignComponent, DesignComponentItem } from '../types';
+import type { LabComponent, LabComponentItem } from '../types';
 
 const baseDescKeys = ['borderWidth', 'borderColor', 'borderRadius', 'shadowColor', 'shadowOffsetX', 'shadowOffsetY', 'shadowBlur', 'color', 'bgColor'];
 
-function parseElementBaseDesc(elem: DesignComponent | DesignComponentItem | Element<ElementType>): ElementBaseDesc {
+function parseElementBaseDesc(elem: LabComponent | LabComponentItem | Element<ElementType>): ElementBaseDesc {
   const baseDesc: ElementBaseDesc = {};
   if (elem?.detail) {
     Object.keys(elem.detail).forEach((name: string) => {
@@ -16,7 +16,7 @@ function parseElementBaseDesc(elem: DesignComponent | DesignComponentItem | Elem
   return baseDesc;
 }
 
-function parseComponentItemToElement(item: DesignComponentItem): Element<'group'> {
+function parseComponentItemToElement(item: LabComponentItem): Element<'group'> {
   const elem: Element<'group'> = {
     uuid: item.uuid,
     name: item.name,
@@ -45,7 +45,7 @@ function parseComponentItemToElement(item: DesignComponentItem): Element<'group'
   return elem;
 }
 
-function parseComponentToElement(comp: DesignComponent): Element<'group'> {
+function parseComponentToElement(comp: LabComponent): Element<'group'> {
   const elem: Element<'group'> = {
     uuid: comp.uuid,
     name: comp.name,
@@ -75,11 +75,11 @@ function parseComponentToElement(comp: DesignComponent): Element<'group'> {
   return elem;
 }
 
-export function parseComponentsToDrawData(components: DesignComponent[]): Data {
+export function parseComponentsToDrawData(components: LabComponent[]): Data {
   const data: Data = {
     elements: []
   };
-  components.forEach((comp: DesignComponent) => {
+  components.forEach((comp: LabComponent) => {
     const elem = parseComponentToElement(comp);
     data.elements.push(elem);
   });

packages/lab/src/util/view-tree.ts

@@ -1,5 +1,5 @@
 import type { Element, ElementType } from '@idraw/types';
-import { ViewTreeNode, DesignComponent, DesignComponentItem } from '../types';
+import { ViewTreeNode, LabComponent, LabComponentItem } from '../types';
 
 function parseElementToViewTreeNode(elem: Element<ElementType>): ViewTreeNode | null {
   let treeNode: ViewTreeNode | null = null;
@@ -22,7 +22,7 @@ function parseElementToViewTreeNode(elem: Element<ElementType>): ViewTreeNode |
   return treeNode;
 }
 
-function parseComponentItemToViewTreeNode(comp: DesignComponentItem): ViewTreeNode {
+function parseComponentItemToViewTreeNode(comp: LabComponentItem): ViewTreeNode {
   const treeNode: Required<ViewTreeNode> = {
     key: comp.uuid,
     title: comp.name || 'Unamed',
@@ -34,7 +34,7 @@ function parseComponentItemToViewTreeNode(comp: DesignComponentItem): ViewTreeNo
     comp.detail.children.forEach((child) => {
       let childNode: ViewTreeNode | null = null;
       if (child.type === 'component') {
-        childNode = parseComponentToViewTreeNode(child as DesignComponent);
+        childNode = parseComponentToViewTreeNode(child as LabComponent);
       } else {
         childNode = parseElementToViewTreeNode(child as Element<ElementType>);
       }
@@ -46,7 +46,7 @@ function parseComponentItemToViewTreeNode(comp: DesignComponentItem): ViewTreeNo
   return treeNode;
 }
 
-export function parseComponentToViewTreeNode(comp: DesignComponent): ViewTreeNode {
+export function parseComponentToViewTreeNode(comp: LabComponent): ViewTreeNode {
   const treeNode: Required<ViewTreeNode> = {
     key: comp.uuid,
     title: comp.name || 'Unamed',
@@ -60,7 +60,7 @@ export function parseComponentToViewTreeNode(comp: DesignComponent): ViewTreeNod
   }
 
   if (Array.isArray(comp?.detail?.variants)) {
-    comp?.detail?.variants?.forEach((child: DesignComponentItem) => {
+    comp?.detail?.variants?.forEach((child: LabComponentItem) => {
       const node = parseComponentItemToViewTreeNode(child);
       treeNode.children.push(node);
     });