Improvements (premieroctet#35)

luiskhernandez · Feb 11, 2020 · 53f7f89 · 53f7f89
1 parent 23cb2a4
commit 53f7f89
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 22 deletions.
diff --git a/src/components/editor/Editor.tsx b/src/components/editor/Editor.tsx
@@ -62,7 +62,8 @@ const Editor: React.FC = () => {
         <Text maxWidth="md" color="gray.400" fontSize="xl" textAlign="center">
           Drag some component to start coding without code! Or load a{' '}
           <Link
-            onClick={() => {
+            onClick={(e: React.MouseEvent) => {
+              e.stopPropagation()
               dispatch.components.loadDemo()
             }}
             textDecoration="underline"

diff --git a/src/components/editor/previews/AccordionPreview.tsx b/src/components/editor/previews/AccordionPreview.tsx
@@ -9,10 +9,9 @@ import {
   AccordionPanel,
 } from '@chakra-ui/core'
 import ComponentPreview from '../ComponentPreview'
-import { COMPONENTS } from '../../../utils/editor'
+import { COMPONENTS, AccordionWhitelist } from '../../../utils/editor'
 
 const acceptedTypes: ComponentType[] = ['AccordionItem']
-const acceptedItemTypes: ComponentType[] = ['AccordionHeader', 'AccordionPanel']
 
 const AccordionPreview: React.FC<IPreviewProps> = ({ component }) => {
   const { props, ref } = useInteractive(component, true)
@@ -37,7 +36,7 @@ const AccordionPreview: React.FC<IPreviewProps> = ({ component }) => {
 
 export const AccordionHeaderPreview = ({ component }: IPreviewProps) => {
   const { props, ref } = useInteractive(component, true)
-  const { drop, isOver } = useDropComponent(component.id, COMPONENTS)
+  const { drop, isOver } = useDropComponent(component.id, AccordionWhitelist)
 
   if (isOver) {
     props.bg = 'teal.50'
@@ -54,7 +53,7 @@ export const AccordionHeaderPreview = ({ component }: IPreviewProps) => {
 
 export const AccordionItemPreview = ({ component }: IPreviewProps) => {
   const { props, ref } = useInteractive(component, true)
-  const { drop, isOver } = useDropComponent(component.id, acceptedItemTypes)
+  const { drop, isOver } = useDropComponent(component.id, AccordionWhitelist)
 
   let boxProps: any = {}
 
@@ -75,7 +74,7 @@ export const AccordionItemPreview = ({ component }: IPreviewProps) => {
 
 export const AccordionPanelPreview = ({ component }: IPreviewProps) => {
   const { props, ref } = useInteractive(component, true)
-  const { drop, isOver } = useDropComponent(component.id, COMPONENTS)
+  const { drop, isOver } = useDropComponent(component.id, AccordionWhitelist)
 
   let boxProps: any = {}
 

diff --git a/src/components/inspector/AccordionContainer.tsx b/src/components/inspector/AccordionContainer.tsx
@@ -1,18 +1,18 @@
-import React, { ReactNode, memo } from "react";
+import React, { ReactNode, memo } from 'react'
 import {
   AccordionItem,
   AccordionHeader,
   AccordionIcon,
   AccordionPanel,
   Box,
-  AccordionItemProps
-} from "@chakra-ui/core";
+  AccordionItemProps,
+} from '@chakra-ui/core'
 
 const AccordionContainer: React.FC<{
-  title: ReactNode;
-  defaultIsOpen?: boolean;
-  children: ReactNode;
-} & AccordionItemProps> = ({ title, children, defaultIsOpen }) => {
+  title: ReactNode
+  defaultIsOpen?: boolean
+  children: ReactNode
+} & AccordionItemProps> = ({ title, children, defaultIsOpen = true }) => {
   return (
     <AccordionItem defaultIsOpen={defaultIsOpen}>
       <AccordionHeader zIndex={2} px={3} py={2} fontSize="sm">
@@ -25,7 +25,7 @@ const AccordionContainer: React.FC<{
         {children}
       </AccordionPanel>
     </AccordionItem>
-  );
-};
+  )
+}
 
-export default memo(AccordionContainer);
+export default memo(AccordionContainer)
diff --git a/src/core/models/components.ts b/src/core/models/components.ts
@@ -42,6 +42,7 @@ const components = createModel({
     loadDemo(state: ComponentsState): ComponentsState {
       return {
         ...state,
+        selectedId: 'comp-root',
         components: airbnbCard as any,
       }
     },
@@ -197,6 +198,7 @@ const components = createModel({
 
       return {
         ...state,
+        selectedId: id,
         components: {
           ...state.components,
           [payload.parentName]: {
@@ -218,8 +220,10 @@ const components = createModel({
       state: ComponentsState,
       payload: { components: IComponents; root: string; parent: string },
     ): ComponentsState {
+      console.log(payload)
       return {
         ...state,
+        selectedId: payload.root,
         components: {
           ...state.components,
           [payload.parent]: {

diff --git a/src/theme/demo.ts b/src/theme/demo.ts
@@ -3,11 +3,11 @@ export const airbnbCard = {
     id: 'root',
     parent: 'root',
     type: 'box',
-    children: ['comp-1580479567'],
+    children: ['comp-root'],
     props: {},
   },
-  'comp-1580479567': {
-    id: 'comp-1580479567',
+  'comp-root': {
+    id: 'comp-root',
     props: {
       bg: '#ffffff',
       rounded: 'lg',
@@ -25,7 +25,7 @@ export const airbnbCard = {
     props: {},
     children: ['comp-1580479588'],
     type: 'Box',
-    parent: 'comp-1580479567',
+    parent: 'comp-root',
   },
   'comp-1580479588': {
     id: 'comp-1580479588',
@@ -55,7 +55,7 @@ export const airbnbCard = {
       'comp-1580479811',
     ],
     type: 'Box',
-    parent: 'comp-1580479567',
+    parent: 'comp-root',
   },
   'comp-1580479631': {
     id: 'comp-1580479631',

diff --git a/src/utils/editor.ts b/src/utils/editor.ts
@@ -1,8 +1,12 @@
-export const COMPONENTS: ComponentType[] = [
+const ALERT_COMPONENTS: ComponentType[] = [
   'Alert',
   'AlertDescription',
   'AlertIcon',
   'AlertTitle',
+]
+
+export const COMPONENTS: ComponentType[] = [
+  ...ALERT_COMPONENTS,
   'Avatar',
   'AvatarBadge',
   'AvatarGroup',
@@ -63,6 +67,10 @@ export const COMPONENTS: ComponentType[] = [
   'InputGroupMeta',
 ]
 
+export const AccordionWhitelist: ComponentType[] = COMPONENTS.filter(
+  name => !ALERT_COMPONENTS.includes(name),
+)
+
 export const rootComponents = COMPONENTS
   // Remove specific components
   .filter(