add Stack & Flex components (premieroctet#4)

* add Stack & Flex components

* add Tab & TabList & TabPanel & FormControl & Form Label...

* Improve

* update readme

Co-authored-by: Baptiste Adrien <adrien.baptiste@gmail.com>

README.md

@@ -17,11 +17,11 @@ Before release:
 
 ### Components
 
-- [ ] Accordion
-  - [ ] AccordionItem
-  - [ ] AccordionHeader
-  - [ ] AccordionPanel
-  - [ ] AccordionIcon
+- [x] Accordion 🚧
+  - [x] AccordionItem
+  - [x] AccordionHeader
+  - [x] AccordionPanel
+  - [x] AccordionIcon
 - [x] Alert
   - [x] AlertIcon
   - [x] AlertTitle
@@ -57,10 +57,10 @@ Before release:
 - [ ] Editable
   - [ ] EditablePreview
   - [ ] EditablePreview
-- [ ] Flex
-- [ ] FormControl
-  - [ ] FormLabel
-  - [ ] FormHelperText
+- [x] Flex
+- [x] FormControl
+  - [x] FormLabel
+  - [x] FormHelperText
 - [ ] Grid
 - [x] Heading
 - [x] Icon
@@ -112,15 +112,18 @@ Before release:
   - [ ] StatHelperText
   - [ ] StatArrow
   - [ ] StatGroup
-- [ ] Stack
+- [x] Stack
 - [x] Switch
-- [ ] Tabs
-  - [ ] TabList
-  - [ ] TabsPanels
-  - [ ] TabsPanel
+- [x] Tabs 🚧
+  - [x] TabList
+  - [x] TabsPanels
+  - [x] TabsPanel
 - [x] Tag
   - [ ] TagLabel
   - [ ] TagIcon
 - [x] Text
 - [x] Textarea
 - [ ] Tooltip 🧨
+
+🧨 contains code logic
+🚧 contains bugs

src/App.tsx

@@ -13,6 +13,11 @@ import { useSelector } from "react-redux";
 import { RootState } from ".";
 
 export const COMPONENTS: ComponentType[] = [
+  "Accordion",
+  "AccordionItem",
+  "AccordionHeader",
+  "AccordionPanel",
+  "AccordionIcon",
   "Alert",
   "AlertDescription",
   "AlertIcon",
@@ -28,15 +33,27 @@ export const COMPONENTS: ComponentType[] = [
   "CloseButton",
   "Code",
   "Divider",
+  "Flex",
+  "FormControl",
+  "FormLabel",
+  "FormHelperText",
+  "FormErrorMessage",
   "Heading",
   "Icon",
   "IconButton",
   "Image",
+  "Input",
   "Link",
   "Progress",
   "SimpleGrid",
-  "Switch",
   "Spinner",
+  "Stack",
+  "Switch",
+  "Tab",
+  "Tabs",
+  "TabList",
+  "TabPanel",
+  "TabPanels",
   "Tag",
   "Text",
   "Textarea"

src/components/editor/ComponentPreview.tsx

@@ -1,15 +1,12 @@
 import React, { memo } from "react";
+import { useSelector } from "react-redux";
 
 import BoxPreview from "./previews/BoxPreview";
 import ButtonPreview from "./previews/ButtonPreview";
 import BadgePreview from "./previews/BadgePreview";
 import IconPreview from "./previews/IconPreview";
 import ImagePreview from "./previews/ImagePreview";
 import TextPreview from "./previews/TextPreview";
-import AvatarPreview, {
-  AvatarBadgePreview,
-  AvatarGroupPreview
-} from "./previews/AvatarPreview";
 import CheckboxPreview from "./previews/CheckboxPreview";
 import IconButtonPreview from "./previews/IconButtonPreview";
 import ProgressPreview from "./previews/ProgressPreview";
@@ -24,13 +21,36 @@ import HeadingPreview from "./previews/HeadingPreview";
 import TagPreview from "./previews/TagPreview";
 import SimpleGridPreview from "./previews/SimpleGridPreview";
 import SwitchPreview from "./previews/SwitchPreview";
+import FlexPreview from "./previews/FlexPreview";
 import AlertPreview, {
   AlertIconPreview,
   AlertTitlePreview,
   AlertDescriptionPreview
 } from "./previews/AlertPreview";
-import { useSelector } from "react-redux";
 import { RootState } from "../..";
+import AvatarPreview, {
+  AvatarBadgePreview,
+  AvatarGroupPreview
+} from "./previews/AvatarPreview";
+import StackPreview from "./previews/StackPreview";
+import AccordionPreview, {
+  AccordionHeaderPreview,
+  AccordionItemPreview,
+  AccordionPanelPreview,
+  AccordionIconPreview
+} from "./previews/AccordionPreview";
+import FormControlPreview, {
+  FormLabelPreview,
+  FormHelperTextPreview,
+  FormErrorMessagePreview
+} from "./previews/FormControlPreview";
+import TabsPreview, {
+  TabListPreview,
+  TabPanelPreview,
+  TabPanelsPreview,
+  TabPreview
+} from "./previews/TabsPreview";
+import InputPreview from "./previews/InputPreview";
 
 const ComponentPreview: React.FC<{ componentName: string }> = ({
   componentName
@@ -95,6 +115,40 @@ const ComponentPreview: React.FC<{ componentName: string }> = ({
       return <AlertTitlePreview component={component} />;
     case "AlertDescription":
       return <AlertDescriptionPreview component={component} />;
+    case "Flex":
+      return <FlexPreview component={component} />;
+    case "Stack":
+      return <StackPreview component={component} />;
+    case "Accordion":
+      return <AccordionPreview component={component} />;
+    case "AccordionHeader":
+      return <AccordionHeaderPreview component={component} />;
+    case "AccordionItem":
+      return <AccordionItemPreview component={component} />;
+    case "AccordionPanel":
+      return <AccordionPanelPreview component={component} />;
+    case "AccordionIcon":
+      return <AccordionIconPreview component={component} />;
+    case "FormControl":
+      return <FormControlPreview component={component} />;
+    case "FormLabel":
+      return <FormLabelPreview component={component} />;
+    case "FormHelperText":
+      return <FormHelperTextPreview component={component} />;
+    case "FormErrorMessage":
+      return <FormErrorMessagePreview component={component} />;
+    case "Tabs":
+      return <TabsPreview component={component} />;
+    case "TabList":
+      return <TabListPreview component={component} />;
+    case "TabPanel":
+      return <TabPanelPreview component={component} />;
+    case "TabPanels":
+      return <TabPanelsPreview component={component} />;
+    case "Tab":
+      return <TabPreview component={component} />;
+    case "Input":
+      return <InputPreview component={component} />;
     default:
       return null;
   }

src/components/editor/previews/AccordionPreview.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import { useInteractive } from "../../../hooks/useInteractive";
+import { useDropComponent } from "../../../hooks/useDropComponent";
+import {
+  Box,
+  Accordion,
+  AccordionItem,
+  AccordionHeader,
+  AccordionPanel,
+  AccordionIcon
+} from "@chakra-ui/core";
+import ComponentPreview from "../ComponentPreview";
+
+const acceptedTypes = [
+  "AccordionItem",
+  "AccordionHeader",
+  "AccordionPanel",
+  "AccordionIcon"
+] as ComponentType[];
+
+const AccordionPreview: React.FC<IPreviewProps> = ({ component }) => {
+  const { props, ref } = useInteractive(component, true);
+  const { drop, isOver } = useDropComponent(component.id, acceptedTypes);
+
+  let boxProps: any = {};
+
+  if (isOver) {
+    props.bg = "teal.50";
+  }
+
+  return (
+    <Box ref={drop(ref)} {...boxProps}>
+      <Accordion {...props}>
+        {component.children.map((key: string) => (
+          <ComponentPreview componentName={key} />
+        ))}
+      </Accordion>
+    </Box>
+  );
+};
+
+export const AccordionItemPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true);
+  const { drop, isOver } = useDropComponent(component.id, acceptedTypes);
+
+  if (isOver) {
+    props.bg = "teal.50";
+  }
+
+  return (
+    <AccordionItem ref={drop(ref)} {...props}>
+      {component.children.map((key: string) => (
+        <ComponentPreview componentName={key} />
+      ))}
+    </AccordionItem>
+  );
+};
+
+export const AccordionHeaderPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true);
+  const { drop, isOver } = useDropComponent(component.id, acceptedTypes);
+
+  if (isOver) {
+    props.bg = "teal.50";
+  }
+
+  return (
+    <AccordionHeader ref={drop(ref)} {...props}>
+      {component.children.map((key: string) => (
+        <ComponentPreview componentName={key} />
+      ))}
+    </AccordionHeader>
+  );
+};
+
+export const AccordionPanelPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component, true);
+  const { drop, isOver } = useDropComponent(component.id);
+
+  if (isOver) {
+    props.bg = "teal.50";
+  }
+
+  return (
+    <AccordionPanel ref={drop(ref)} {...props}>
+      {component.children.map((key: string) => (
+        <ComponentPreview componentName={key} />
+      ))}
+    </AccordionPanel>
+  );
+};
+
+export const AccordionIconPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component);
+  return <AccordionIcon ref={ref} {...props} />;
+};
+
+export default AccordionPreview;

src/components/editor/previews/FlexPreview.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { Flex } from "@chakra-ui/core";
+import { useDropComponent } from "../../../hooks/useDropComponent";
+
+import { useInteractive } from "../../../hooks/useInteractive";
+import ComponentPreview from "../ComponentPreview";
+
+const FlexPreview: React.FC<{ component: IComponent }> = ({ component }) => {
+  const { drop, isOver } = useDropComponent(component.id);
+  const { props, ref } = useInteractive(component, true);
+
+  if (isOver) {
+    props.bg = "teal.50";
+  }
+
+  return (
+    <Flex pos="relative" ref={drop(ref)} {...props}>
+      {component.children.map((key: string) => (
+        <ComponentPreview componentName={key} />
+      ))}
+    </Flex>
+  );
+};
+
+export default FlexPreview;

src/components/editor/previews/FormControlPreview.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { useInteractive } from "../../../hooks/useInteractive";
+import { useDropComponent } from "../../../hooks/useDropComponent";
+import {
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  FormErrorMessage
+} from "@chakra-ui/core";
+import ComponentPreview from "../ComponentPreview";
+
+const acceptedTypes = [
+  "FormLabel",
+  "FormHelperText",
+  "FormErrorMessage",
+  "Input",
+  "Select",
+  "Text",
+  "Image"
+] as ComponentType[];
+
+const FormControlPreview: React.FC<IPreviewProps> = ({ component }) => {
+  const { props, ref } = useInteractive(component, true);
+  const { drop, isOver } = useDropComponent(component.id, acceptedTypes);
+
+  if (isOver) {
+    props.bg = "teal.50";
+  }
+
+  return (
+    <FormControl ref={drop(ref)} {...props}>
+      {component.children.map((key: string) => (
+        <ComponentPreview componentName={key} />
+      ))}
+    </FormControl>
+  );
+};
+
+export const FormLabelPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component);
+  return <FormLabel ref={ref} {...props} />;
+};
+
+export const FormHelperTextPreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component);
+  return <FormHelperText ref={ref} {...props} />;
+};
+
+export const FormErrorMessagePreview = ({ component }: IPreviewProps) => {
+  const { props, ref } = useInteractive(component);
+  return <FormErrorMessage ref={ref} {...props} />;
+};
+
+export default FormControlPreview;

src/components/editor/previews/InputPreview.tsx

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