Merge

src/App.tsx

@@ -7,6 +7,7 @@ import Inspector from "./components/inspector/Inspector";
 import Sidebar from "./components/sidebar/Sidebar";
 import Header from "./components/Header";
 import { Global } from "@emotion/core";
+import { EditorProvider } from "./contexts/EditorContext";
 
 export const COMPONENTS: ComponentType[] = [
   "Box",
@@ -41,7 +42,9 @@ const App = () => (
 
       <Flex minHeight="calc(100vh - 3rem)">
         <Box bg="white" flex={1} zIndex={10} position="relative">
-          <Editor />
+          <EditorProvider>
+            <Editor />
+          </EditorProvider>
         </Box>
 
         <Sidebar />

src/components/CodePanel.tsx

@@ -17,6 +17,7 @@ const CodePanel = () => {
 
   return (
     <Box
+      zIndex={40}
       p={4}
       fontSize="sm"
       backgroundColor="#011627"

src/components/editor/Editor.tsx

@@ -1,13 +1,15 @@
 import React, { memo } from "react";
-import { Box, Text, Link } from "@chakra-ui/core";
+import { Box, Text, Link, Badge } from "@chakra-ui/core";
 import { useBuilderContext } from "../../contexts/BuilderContext";
 import ComponentPreview from "./ComponentPreview";
 import { useDropComponent } from "../../hooks/useDropComponent";
 import SplitPane from "react-split-pane";
 import CodePanel from "../CodePanel";
+import { useEditorContext } from "../../contexts/EditorContext";
 
 const Editor: React.FC = () => {
   const { components, showCode } = useBuilderContext();
+  const { overlay } = useEditorContext();
   const { drop } = useDropComponent("root");
 
   const isEmpty = !components.root.children.length;
@@ -24,6 +26,7 @@ const Editor: React.FC = () => {
       justifyContent="center"
       alignItems="center"
       ref={drop}
+      position="relative"
       flexDirection="column"
     >
       {isEmpty && (
@@ -36,6 +39,24 @@ const Editor: React.FC = () => {
       {components.root.children.map((key: string) => (
         <ComponentPreview component={components[key]} />
       ))}
+      {overlay && (
+        <Box
+          pointerEvents="none"
+          cursor="pointer"
+          zIndex={20}
+          borderWidth={1}
+          borderColor="teal.300"
+          position="absolute"
+          width={overlay.rect.width + 10}
+          height={overlay.rect.height + 10}
+          top={`${overlay.rect.top - 53}px`}
+          left={`${overlay.rect.left - 229}px`}
+        >
+          <Badge ml={1} variantColor="teal">
+            {overlay.type}
+          </Badge>
+        </Box>
+      )}
     </Box>
   );
 

src/components/editor/previews/AvatarPreview.tsx

@@ -11,24 +11,21 @@ import { useDropComponent } from "../../../hooks/useDropComponent";
 import ComponentPreview from "../ComponentPreview";
 import { useBuilderContext } from "../../../contexts/BuilderContext";
 
-export const AvatarPreview = ({
-  component,
-  spacing,
-  isFirstElement
-}: IPreviewProps & {
+const AvatarPreview: React.FC<IPreviewProps & {
   spacing?: BoxProps["marginLeft"];
   isFirstElement?: boolean;
-}) => {
-  const { props } = useInteractive(component);
-  const { drop, isOver } = useDropComponent(component.name);
+}> = ({ component, spacing, isFirstElement }) => {
+  const { drop, isOver } = useDropComponent(component.name, ["AvatarBadge"]);
+  const { props, ref } = useInteractive(component);
   const { components } = useBuilderContext();
+  let boxProps: any = { display: "inline" };
 
   if (isOver) {
     props.bg = "teal.50";
   }
 
   return (
-    <Box ref={drop}>
+    <Box ref={drop(ref)} {...boxProps}>
       <Avatar ml={isFirstElement ? 0 : spacing} {...props}>
         {component.children.map((key: string) => (
           <ComponentPreview component={components[key]} />
@@ -39,16 +36,17 @@ export const AvatarPreview = ({
 };
 
 export const AvatarGroupPreview = ({ component }: IPreviewProps) => {
-  const { drop, isOver } = useDropComponent(component.name);
+  const { props, ref } = useInteractive(component);
+  const { drop, isOver } = useDropComponent(component.name, ["Avatar"]);
   const { components } = useBuilderContext();
-  const { props } = useInteractive(component);
+  let boxProps: any = { display: "inline" };
 
   if (isOver) {
     props.bg = "teal.50";
   }
 
   return (
-    <Box ref={drop}>
+    <Box ref={drop(ref)} {...boxProps}>
       <AvatarGroup size="md" max={3} {...props}>
         {component.children.map((key: string, i: number) => (
           <AvatarPreview
@@ -63,9 +61,9 @@ export const AvatarGroupPreview = ({ component }: IPreviewProps) => {
 };
 
 export const AvatarBadgePreview = ({ component }: IPreviewProps) => {
-  const { props } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
-  return <AvatarBadge size="1.25em" bg="green.500" {...props} />;
+  return <AvatarBadge ref={ref} size="1.25em" bg="green.500" {...props} />;
 };
 
 export default AvatarPreview;

src/components/editor/previews/BadgePreview.tsx

@@ -1,11 +1,15 @@
 import React from "react";
-import { Badge, BadgeProps } from "@chakra-ui/core";
+import { Badge } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const BadgePreview: React.FC<{ component: IComponent }> = ({ component }) => {
-  const { props }: { props: BadgeProps } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
-  return <Badge {...props}>{component.props.children || "Lorem Ipsum"}</Badge>;
+  return (
+    <Badge ref={ref} {...props}>
+      {component.props.children || "Lorem Ipsum"}
+    </Badge>
+  );
 };
 
 export default BadgePreview;

src/components/editor/previews/BoxPreview.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { PseudoBox as Box, BoxProps } from "@chakra-ui/core";
+import { Box } from "@chakra-ui/core";
 import ComponentPreview from "../ComponentPreview";
 import { useBuilderContext } from "../../../contexts/BuilderContext";
 import { useDropComponent } from "../../../hooks/useDropComponent";
@@ -8,14 +8,14 @@ import { useInteractive } from "../../../hooks/useInteractive";
 const BoxPreview: React.FC<{ component: IComponent }> = ({ component }) => {
   const { drop, isOver } = useDropComponent(component.name);
   const { components } = useBuilderContext();
-  const { props }: { props: BoxProps } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
   if (isOver) {
     props.bg = "teal.50";
   }
 
   return (
-    <Box ref={drop} {...props}>
+    <Box pos="relative" ref={drop(ref)} {...props}>
       {component.children.map((key: string) => (
         <ComponentPreview component={components[key]} />
       ))}

src/components/editor/previews/ButtonPreview.tsx

@@ -1,11 +1,15 @@
 import React from "react";
-import { Button, ButtonProps } from "@chakra-ui/core";
+import { Button } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const ButtonPreview: React.FC<{ component: IComponent }> = ({ component }) => {
-  const { props }: { props: ButtonProps } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
-  return <Button {...props}>{props.children || "Lorem Ipsum"}</Button>;
+  return (
+    <Button ref={ref} {...props}>
+      {props.children || "Lorem Ipsum"}
+    </Button>
+  );
 };
 
 export default ButtonPreview;

src/components/editor/previews/CheckboxPreview.tsx

@@ -1,13 +1,17 @@
 import React from "react";
-import { Checkbox, CheckboxProps } from "@chakra-ui/core";
+import { Checkbox } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const CheckboxPreview: React.FC<{ component: IComponent }> = ({
   component
 }) => {
-  const { props }: { props: CheckboxProps } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
-  return <Checkbox {...props}>{props.children || "Lorem Ipsum"}</Checkbox>;
+  return (
+    <Checkbox ref={ref} {...props}>
+      {props.children || "Lorem Ipsum"}
+    </Checkbox>
+  );
 };
 
 export default CheckboxPreview;

src/components/editor/previews/CloseButtonPreview.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { CloseButton, CloseButtonProps } from "@chakra-ui/core";
+import { CloseButton } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const CloseButtonPreview: React.FC<{ component: IComponent }> = ({
   component
 }) => {
-  const { props }: { props: CloseButtonProps } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
-  return <CloseButton {...props} />;
+  return <CloseButton ref={ref} {...props} />;
 };
 
 export default CloseButtonPreview;

src/components/editor/previews/DividerPreview.tsx

@@ -3,8 +3,8 @@ import { Divider } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const DividerPreview: React.FC<{ component: IComponent }> = ({ component }) => {
-  const { props }: { props: any } = useInteractive(component);
-  return <Divider {...props} />;
+  const { props, ref } = useInteractive(component);
+  return <Divider ref={ref} {...props} />;
 };
 
 export default DividerPreview;

src/components/editor/previews/IconButtonPreview.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { IconButton, IconButtonProps } from "@chakra-ui/core";
+import { IconButton } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const IconButtonPreview: React.FC<{ component: IComponent }> = ({
   component
 }) => {
-  const { props }: { props: IconButtonProps } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
-  return <IconButton {...props} />;
+  return <IconButton ref={ref} {...props} />;
 };
 
 export default IconButtonPreview;

src/components/editor/previews/IconPreview.tsx

@@ -1,9 +1,9 @@
 import React from "react";
-import { Icon, IconProps } from "@chakra-ui/core";
+import { Icon } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const IconPreview: React.FC<{ component: IComponent }> = ({ component }) => {
-  const { props }: { props: IconProps } = useInteractive(component);
+  const { props } = useInteractive(component);
 
   return <Icon name="copy" {...props} />;
 };

src/components/editor/previews/ImagePreview.tsx

@@ -1,12 +1,13 @@
 import React from "react";
-import { Image, ImageProps } from "@chakra-ui/core";
+import { Image } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const ImagePreview: React.FC<{ component: IComponent }> = ({ component }) => {
-  const { props }: { props: ImageProps } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
   return (
     <Image
+      ref={ref}
       size="100px"
       objectFit="cover"
       alt="Segun Adebayo"

src/components/editor/previews/LinkPreview.tsx

@@ -1,11 +1,15 @@
 import React from "react";
-import { Link, LinkProps } from "@chakra-ui/core";
+import { Link } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const LinkPreview: React.FC<{ component: IComponent }> = ({ component }) => {
-  const { props }: { props: LinkProps } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
-  return <Link {...props}>{component.props.children || "Link"}</Link>;
+  return (
+    <Link ref={ref} {...props}>
+      {component.props.children || "Link"}
+    </Link>
+  );
 };
 
 export default LinkPreview;

src/components/editor/previews/ProgressPreview.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import { Progress, ProgressProps } from "@chakra-ui/core";
+import { Progress } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const ProgressPreview: React.FC<{ component: IComponent }> = ({
   component
 }) => {
-  const { props }: { props: ProgressProps } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
-  return <Progress {...props} />;
+  return <Progress ref={ref} {...props} />;
 };
 
 export default ProgressPreview;

src/components/editor/previews/SpinnerPreview.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { Spinner, SpinnerProps } from "@chakra-ui/core";
+import { Spinner } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const SpinnerPreview: React.FC<{ component: IComponent }> = ({ component }) => {
-  const { props }: { props: SpinnerProps } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
-  return <Spinner {...props} />;
+  return <Spinner ref={ref} {...props} />;
 };
 
 export default SpinnerPreview;

src/components/editor/previews/TextPreview.tsx

@@ -1,11 +1,15 @@
 import React from "react";
-import { Text, BoxProps } from "@chakra-ui/core";
+import { Text } from "@chakra-ui/core";
 import { useInteractive } from "../../../hooks/useInteractive";
 
 const TextPreview: React.FC<{ component: IComponent }> = ({ component }) => {
-  const { props }: { props: BoxProps } = useInteractive(component);
+  const { props, ref } = useInteractive(component);
 
-  return <Text {...props}>{component.props.children || "Lorem Ipsum"}</Text>;
+  return (
+    <Text ref={ref} {...props}>
+      {component.props.children || "Lorem Ipsum"}
+    </Text>
+  );
 };
 
 export default TextPreview;