add CircularProgress & TextArea & DividerPanel

src/App.tsx

@@ -26,7 +26,9 @@ export const COMPONENTS: ComponentType[] = [
   "Spinner",
   "CloseButton",
   "Divider",
-  "Code"
+  "Code",
+  "TextArea",
+  "CircularProgress"
 ];
 
 const App = () => (

src/components/editor/ComponentPreview.tsx

@@ -18,6 +18,8 @@ import SpinnerPreview from "./previews/SpinnerPreview";
 import CloseButtonPreview from "./previews/CloseButtonPreview";
 import DividerPreview from "./previews/DividerPreview";
 import CodePreview from "./previews/CodePreview";
+import TextAreaPreview from "./previews/TextAreaPreview";
+import CircularProgressPreview from "./previews/CircularProgressPreview";
 
 const ComponentPreview: React.FC<{ component: IComponent }> = ({
   component
@@ -57,6 +59,10 @@ const ComponentPreview: React.FC<{ component: IComponent }> = ({
       return <DividerPreview component={component} />;
     case "Code":
       return <CodePreview component={component} />;
+    case "TextArea":
+      return <TextAreaPreview component={component} />;
+    case "CircularProgress":
+      return <CircularProgressPreview component={component} />;
     default:
       return null;
   }

src/components/editor/previews/CircularProgressPreview.tsx

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

src/components/editor/previews/TextAreaPreview.tsx

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

src/components/inspector/Inspector.tsx

@@ -1,9 +1,7 @@
 import React, { ChangeEvent, FormEvent, useState } from "react";
 import {
   Select,
-  Text,
   Button,
-  Divider,
   Link,
   InputGroup,
   InputRightElement,
@@ -23,7 +21,6 @@ import DimensionPanel from "./panels/DimensionPanel";
 import BorderPanel from "./panels/BorderPanel";
 import FlexPanel from "./panels/FlexPanel";
 import TextPanel from "./panels/TextPanel";
-import docs from "../../models/doc";
 import { IoIosFlash } from "react-icons/io";
 import FormControl from "./controls/FormControl";
 import AccordionContainer from "./AccordionContainer";

src/components/inspector/panels/CircularProgressPanel.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  Input,
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb,
+  Switch
+} from "@chakra-ui/core";
+import FormControl from "../controls/FormControl";
+import { useForm } from "../../../hooks/useForm";
+import ColorsControl from "../controls/ColorsControl";
+
+const CircularProgressPanel = () => {
+  const { values, setValueFromEvent, setValue } = useForm();
+
+  return (
+    <>
+      <FormControl label="Valeur">
+        <Input
+          size="sm"
+          value={values.value || "75"}
+          type="text"
+          name="value"
+          onChange={setValueFromEvent}
+        />
+      </FormControl>
+      <FormControl label="Size">
+        <Input
+          size="sm"
+          value={values.size || "50px"}
+          type="text"
+          name="size"
+          onChange={setValueFromEvent}
+        />
+      </FormControl>
+
+      <FormControl label="Thickness">
+        <Slider
+          onChange={value => setValue("thickness", value)}
+          min={0.1}
+          max={1}
+          step={0.1}
+          defaultValue={values.thickness}
+        >
+          <SliderTrack />
+          <SliderFilledTrack />
+          <SliderThumb />
+        </Slider>
+      </FormControl>
+
+      <ColorsControl label="Color" name="color" value={values.color} />
+
+      <FormControl label="Loading" htmlFor="isIndeterminate">
+        <Switch
+          name="isIndeterminate"
+          id="isIndeterminate"
+          size="sm"
+          isChecked={values.isIndeterminate || false}
+          onChange={() => setValue("isIndeterminate", !values.isIndeterminate)}
+        />
+      </FormControl>
+    </>
+  );
+};
+
+export default CircularProgressPanel;

src/components/inspector/panels/DividerPanel.tsx

@@ -2,24 +2,33 @@ import React from "react";
 import { Select } from "@chakra-ui/core";
 import FormControl from "../controls/FormControl";
 import { useForm } from "../../../hooks/useForm";
+import ColorsControl from "../controls/ColorsControl";
 
 const DividerPanel = () => {
   const { values, setValueFromEvent } = useForm();
 
   return (
-    <FormControl label="Orientation" htmlFor="orientation">
-      <Select
-        name="orientation"
-        id="orientation"
-        size="sm"
-        value={values.orientation || "md"}
-        onChange={setValueFromEvent}
-      >
-        <option>horizontal</option>
-        <option>vertical</option>
-        <option>lg</option>
-      </Select>
-    </FormControl>
+    <>
+      <FormControl label="Orientation" htmlFor="orientation">
+        <Select
+          name="orientation"
+          id="orientation"
+          size="sm"
+          value={values.orientation || "horizontal"}
+          onChange={setValueFromEvent}
+        >
+          <option>horizontal</option>
+          <option>vertical</option>
+        </Select>
+      </FormControl>
+      <ColorsControl
+        withFullColor
+        label="Border color"
+        name="borderColor"
+        enableHues
+        value={values.borderColor}
+      />
+    </>
   );
 };
 

src/components/inspector/panels/Panels.tsx

@@ -16,6 +16,8 @@ import SpinnerPanel from "./SpinnerPanel";
 import CloseButtonPanel from "./CloseButtonPanel";
 import DividerPanel from "./DividerPanel";
 import CodePanel from "./CodePanel";
+import TextAreaPanel from "./TextAreaPanel";
+import CircularProgressPanel from "./CircularProgressPanel";
 
 const Panels: React.FC<{ component: IComponent }> = ({ component }) => {
   const { type } = component;
@@ -39,6 +41,8 @@ const Panels: React.FC<{ component: IComponent }> = ({ component }) => {
       {type === "Code" && <CodePanel />}
       {type === "CloseButton" && <CloseButtonPanel />}
       {type === "Divider" && <DividerPanel />}
+      {type === "TextArea" && <TextAreaPanel />}
+      {type === "CircularProgress" && <CircularProgressPanel />}
     </>
   );
 };

src/components/inspector/panels/ProgressPanel.tsx

@@ -1,5 +1,12 @@
 import React from "react";
-import { Switch, Select, Input } from "@chakra-ui/core";
+import {
+  Switch,
+  Select,
+  Slider,
+  SliderTrack,
+  SliderFilledTrack,
+  SliderThumb
+} from "@chakra-ui/core";
 import ColorsControl from "../controls/ColorsControl";
 import FormControl from "../controls/FormControl";
 import { useForm } from "../../../hooks/useForm";
@@ -10,14 +17,19 @@ const ProgressPanel = () => {
   return (
     <>
       <FormControl label="Valeur">
-        <Input
-          size="sm"
-          value={values.value || ""}
-          type="text"
-          name="value"
-          onChange={setValueFromEvent}
-        />
+        <Slider
+          onChange={value => setValue("value", value)}
+          min={0}
+          max={100}
+          step={1}
+          defaultValue={values.value}
+        >
+          <SliderTrack />
+          <SliderFilledTrack />
+          <SliderThumb />
+        </Slider>
       </FormControl>
+
       <FormControl label="Has Stripe" htmlFor="hasStripe">
         <Switch
           name="hasStripe"

src/components/inspector/panels/TextAreaPanel.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Input, Select } from "@chakra-ui/core";
+import FormControl from "../controls/FormControl";
+import { useForm } from "../../../hooks/useForm";
+import SizeControl from "../controls/SizeControl";
+
+const TextAreaPanel = () => {
+  const { values, setValueFromEvent } = useForm();
+
+  return (
+    <>
+      <FormControl label="Valeur">
+        <Input
+          size="sm"
+          value={values.value || ""}
+          type="text"
+          name="value"
+          onChange={setValueFromEvent}
+        />
+      </FormControl>
+      <FormControl label="Placeholder">
+        <Input
+          size="sm"
+          value={values.placeholder || ""}
+          type="text"
+          name="placeholder"
+          onChange={setValueFromEvent}
+        />
+      </FormControl>
+      <SizeControl name="size" label="Size" value={values.size} />
+      <FormControl label="Resize" htmlFor="resize">
+        <Select
+          name="resize"
+          id="size"
+          size="sm"
+          value={values.resize || ""}
+          onChange={setValueFromEvent}
+        >
+          <option>horizontal</option>
+          <option>vertical</option>
+          <option>none</option>
+        </Select>
+      </FormControl>
+    </>
+  );
+};
+
+export default TextAreaPanel;

src/hooks/useDropComponent.ts

@@ -14,7 +14,9 @@ const DEFAULT_PROPS: PreviewDefaultProps = {
   Link: {},
   Code: {},
   Spinner: {},
+  TextArea: {},
   CloseButton: {},
+  CircularProgress: {},
   Checkbox: {
     isChecked: true
   },

src/react-app-env.d.ts

@@ -19,6 +19,8 @@ type ComponentType =
   | "Spinner"
   | "CloseButton"
   | "Divider"
+  | "TextArea"
+  | "CircularProgress"
   | "Code";
 
 interface IComponent {
@@ -61,4 +63,6 @@ type PreviewDefaultProps = {
   CloseButton?: CloseButtonProps;
   Divider?: any;
   Code?: any;
+  TextArea?: any;
+  CircularProgress?: any;
 };