add drop style

packages/editor/src/components/Editor.tsx

@@ -12,14 +12,12 @@ import {
 import { eventBus, SelectComponentEvent } from '../eventBus';
 import { ComponentForm } from './ComponentForm';
 import { ComponentList } from './ComponentsList';
-import { useAppModel } from '../operations/useAppModel';
+import { appModelManager, useAppModel } from '../operations/useAppModel';
 import { EditorHeader } from './EditorHeader';
 import { PreviewModal } from './PreviewModal';
 import { KeyboardEventWrapper } from './KeyboardEventWrapper';
 import { ComponentWrapper } from './ComponentWrapper';
 
-let count = 0;
-
 export const Editor = () => {
   const [selectedComponentId, setSelectedComponentId] = useState('');
   const [scale, setScale] = useState(100);
@@ -42,11 +40,10 @@ export const Editor = () => {
       },
       onDrop(id, layout, _, e) {
         const component = e.dataTransfer?.getData('component') || '';
-        const componentName = last(component.split('/'));
-        const componentId = `${componentName}_${count++}`;
+        const componentId = appModelManager.genId(component);
         eventBus.send(
           'operation',
-          new CreateComponentOperation(component, id, 'container', componentId)
+          new CreateComponentOperation(component, id, 'container')
         );
 
         const newLayout = produce(layout, draft => {
@@ -92,7 +89,8 @@ export const Editor = () => {
               height="100%"
               display="flex"
               flexDirection="column"
-              textAlign="left">
+              textAlign="left"
+            >
               <TabList background="gray.50">
                 <Tab>UI Tree</Tab>
                 <Tab>State</Tab>
@@ -116,7 +114,8 @@ export const Editor = () => {
               widht="100%"
               height="100%"
               background="white"
-              transform={`scale(${scale / 100})`}>
+              transform={`scale(${scale / 100})`}
+            >
               {appComponent}
             </Box>
           </Box>
@@ -126,7 +125,8 @@ export const Editor = () => {
               textAlign="left"
               height="100%"
               display="flex"
-              flexDirection="column">
+              flexDirection="column"
+            >
               <TabList background="gray.50">
                 <Tab>Inspect</Tab>
                 <Tab>Insert</Tab>

packages/editor/src/components/StructureTree/ComponentItemView.tsx

@@ -1,5 +1,6 @@
 import { ChevronDownIcon, ChevronRightIcon, DeleteIcon } from '@chakra-ui/icons';
 import { Box, HStack, IconButton, Text } from '@chakra-ui/react';
+import { useState } from 'react';
 
 type Props = {
   title: string;
@@ -9,6 +10,7 @@ type Props = {
   noChevron: boolean;
   isExpanded?: boolean;
   onToggleExpanded?: () => void;
+  isDroppable?: boolean;
 };
 
 export const ComponentItemView: React.FC<Props> = props => {
@@ -20,8 +22,11 @@ export const ComponentItemView: React.FC<Props> = props => {
     onClick,
     onToggleExpanded,
     onClickRemove,
+    isDroppable,
   } = props;
 
+  const [isDragOver, setIsDragOver] = useState(false);
+
   const expandIcon = (
     <IconButton
       position="absolute"
@@ -30,11 +35,27 @@ export const ComponentItemView: React.FC<Props> = props => {
       size="xs"
       variant="unstyled"
       onClick={onToggleExpanded}
+      _focus={{
+        outline: '0',
+      }}
       icon={isExpanded ? <ChevronDownIcon /> : <ChevronRightIcon />}
     />
   );
+
+  const onDragOver = () => {
+    if (isDroppable) {
+      setIsDragOver(true);
+    }
+  };
   return (
-    <Box width="full">
+    <Box
+      width="full"
+      cursor="pointer"
+      onDragOver={onDragOver}
+      onDragLeave={() => setIsDragOver(false)}
+      onDrop={() => setIsDragOver(false)}
+      background={isDragOver ? 'gray.100' : undefined}
+    >
       {noChevron ? null : expandIcon}
       <HStack width="full" justify="space-between">
         <Text color={isSelected ? 'red.500' : 'black'} onClick={onClick}>

packages/editor/src/components/StructureTree/ComponentTree.tsx

@@ -115,6 +115,7 @@ export const ComponentTree: React.FC<Props> = props => {
         noChevron={slots.length === 0}
         isExpanded={isExpanded}
         onToggleExpanded={() => setIsExpanded(prev => !prev)}
+        isDroppable={slots.length > 0}
       />
       {isExpanded ? slotsEle : null}
     </VStack>