Merge pull request premieroctet#27 from premieroctet/feature/some-imp…

…rovement

Improvements

src/components/editor/ComponentPreview.tsx

@@ -23,6 +23,8 @@ import InputLeftAddonPreview from './previews/InputLeftAddonPreview'
 import InputRightAddonPreview from './previews/InputRightAddonPreview'
 import { getComponentBy } from '../../core/selectors/components'
 import WithBoxRefSimplePreviewContainer from './WithRefSimplePreviewContainer'
+import { InputRightElementPreview } from './previews/InputRightElement'
+import { InputLeftElementPreview } from './previews/InputLeftElement'
 
 const ComponentPreview: React.FC<{
   componentName: string
@@ -61,7 +63,7 @@ const ComponentPreview: React.FC<{
       return (
         <SimplePreviewContainer component={component} type={Chakra[type]} />
       )
-    // Wrapped functional components
+    // Wrapped functional components (forward ref issue)
     case 'AlertIcon':
     case 'Progress':
     case 'CloseButton':
@@ -83,18 +85,21 @@ const ComponentPreview: React.FC<{
     case 'AccordionItem':
     case 'FormControl':
     case 'Tabs':
+    case 'List':
     case 'TabList':
     case 'TabPanels':
-    case 'InputLeftElement':
-    case 'InputRightElement':
-    case 'List':
       return (
         <WithChildrenPreviewContainer
+          enableVisualHelper
           component={component}
           type={Chakra[type]}
         />
       )
     // More complex components
+    case 'InputRightElement':
+      return <InputRightElementPreview component={component} />
+    case 'InputLeftElement':
+      return <InputLeftElementPreview component={component} />
     case 'Avatar':
       return <AvatarPreview component={component} />
     case 'AvatarBadge':

src/components/editor/WithChildrenPreviewContainer.tsx

@@ -6,9 +6,10 @@ import ComponentPreview from './ComponentPreview'
 const WithChildrenPreviewContainer: React.FC<{
   component: IComponent
   type: string | FunctionComponent<any> | ComponentClass<any, any>
-}> = ({ component, type }) => {
+  enableVisualHelper?: boolean
+}> = ({ component, type, enableVisualHelper = false }) => {
   const { drop, isOver } = useDropComponent(component.id)
-  const { props, ref } = useInteractive(component, true)
+  const { props, ref } = useInteractive(component, enableVisualHelper)
 
   if (isOver) {
     props.bg = 'teal.50'

src/components/editor/previews/InputLeftElement.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { useInteractive } from '../../../hooks/useInteractive'
+import { useDropComponent } from '../../../hooks/useDropComponent'
+import ComponentPreview from '../ComponentPreview'
+import { InputLeftElement } from '@chakra-ui/core'
+
+export const InputLeftElementPreview: React.FC<{ component: IComponent }> = ({
+  component,
+}) => {
+  const { drop, isOver } = useDropComponent(component.id)
+  const { props, ref } = useInteractive(component, true)
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <InputLeftElement top="10px" right="10px" {...props} ref={drop(ref)}>
+      {component.children.map((key: string) => (
+        <ComponentPreview componentName={key} />
+      ))}
+    </InputLeftElement>
+  )
+}

src/components/editor/previews/InputRightElement.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { useInteractive } from '../../../hooks/useInteractive'
+import { useDropComponent } from '../../../hooks/useDropComponent'
+import ComponentPreview from '../ComponentPreview'
+import { InputRightElement } from '@chakra-ui/core'
+
+export const InputRightElementPreview: React.FC<{ component: IComponent }> = ({
+  component,
+}) => {
+  const { drop, isOver } = useDropComponent(component.id)
+  const { props, ref } = useInteractive(component, true)
+
+  if (isOver) {
+    props.bg = 'teal.50'
+  }
+
+  return (
+    <InputRightElement top="10px" right="10px" {...props} ref={drop(ref)}>
+      {component.children.map((key: string) => (
+        <ComponentPreview componentName={key} />
+      ))}
+    </InputRightElement>
+  )
+}

src/components/inspector/panels/components/AlertIconPanel.tsx

@@ -1,35 +1,8 @@
 import React from 'react'
-import {
-  Slider,
-  SliderTrack,
-  SliderFilledTrack,
-  SliderThumb,
-} from '@chakra-ui/core'
-import FormControl from '../../controls/FormControl'
-import { useForm } from '../../../../hooks/useForm'
-import usePropsSelector from '../../../../hooks/usePropsSelector'
+import TextControl from '../../controls/TextControl'
 
 const AlertIconPanel = () => {
-  const { setValue } = useForm()
-  const size = usePropsSelector('size')
-
-  return (
-    <>
-      <FormControl label="Size">
-        <Slider
-          onChange={size => setValue('size', size)}
-          min={1}
-          max={800}
-          step={1}
-          value={size}
-        >
-          <SliderTrack />
-          <SliderFilledTrack />
-          <SliderThumb />
-        </Slider>
-      </FormControl>
-    </>
-  )
+  return <TextControl name="size" label="Size" />
 }
 
 export default AlertIconPanel

src/components/inspector/panels/components/ButtonPanel.tsx

@@ -3,17 +3,17 @@ import { Icons } from '@chakra-ui/core/dist/theme/icons'
 
 import ColorsControl from '../../controls/ColorsControl'
 import SizeControl from '../../controls/SizeControl'
-import { Icon, Select } from '@chakra-ui/core'
+import { Icon, Select, useTheme } from '@chakra-ui/core'
 import ChildrenControl from '../../controls/ChildrenControl'
 import InputSuggestion from '../../inputs/InputSuggestion'
-import theme from '../../../../theme/theme'
 import { ComboboxOption, ComboboxOptionText } from '@reach/combobox'
 import FormControl from '../../controls/FormControl'
 import { useForm } from '../../../../hooks/useForm'
 import usePropsSelector from '../../../../hooks/usePropsSelector'
 
 const ButtonPanel = () => {
   const { setValueFromEvent } = useForm()
+  const theme = useTheme()
 
   const size = usePropsSelector('size')
   const variant = usePropsSelector('variant')

src/components/inspector/panels/components/IconButtonPanel.tsx

@@ -1,8 +1,7 @@
 import React, { memo } from 'react'
 import ColorsControl from '../../controls/ColorsControl'
 import InputSuggestion from '../../inputs/InputSuggestion'
-import theme from '../../../../theme/theme'
-import { Icon } from '@chakra-ui/core'
+import { Icon, useTheme } from '@chakra-ui/core'
 import { Icons } from '@chakra-ui/core/dist/theme/icons'
 import { ComboboxOption, ComboboxOptionText } from '@reach/combobox'
 import FormControl from '../../controls/FormControl'
@@ -14,6 +13,7 @@ import SwitchControl from '../../controls/SwitchControl'
 
 const IconButtonPanel = () => {
   const { setValueFromEvent } = useForm()
+  const theme = useTheme()
 
   const name = usePropsSelector('name')
   const size = usePropsSelector('size')

src/components/inspector/panels/components/ListIconPanel.tsx

@@ -1,7 +1,6 @@
 import React, { memo } from 'react'
 import InputSuggestion from '../../inputs/InputSuggestion'
-import theme from '../../../../theme/theme'
-import { Icon } from '@chakra-ui/core'
+import { Icon, useTheme } from '@chakra-ui/core'
 import { Icons } from '@chakra-ui/core/dist/theme/icons'
 import { ComboboxOption, ComboboxOptionText } from '@reach/combobox'
 import FormControl from '../../controls/FormControl'
@@ -11,6 +10,7 @@ import ColorsControl from '../../controls/ColorsControl'
 
 const ListIconPanel = () => {
   const { setValueFromEvent } = useForm()
+  const theme = useTheme()
   const icon = usePropsSelector('icon')
 
   return (

src/components/inspector/panels/components/SelectPanel.tsx

@@ -1,16 +1,16 @@
 import React, { memo } from 'react'
-import { Select, Icon } from '@chakra-ui/core'
+import { Select, Icon, useTheme } from '@chakra-ui/core'
 import FormControl from '../../controls/FormControl'
 import { useForm } from '../../../../hooks/useForm'
 import usePropsSelector from '../../../../hooks/usePropsSelector'
 import SwitchControl from '../../controls/SwitchControl'
 import InputSuggestion from '../../inputs/InputSuggestion'
-import theme from '../../../../theme/theme'
 import { ComboboxOption, ComboboxOptionText } from '@reach/combobox'
 import { Icons } from '@chakra-ui/core/dist/theme/icons'
 
 const SelectPanel = () => {
   const { setValueFromEvent } = useForm()
+  const theme = useTheme()
 
   const size = usePropsSelector('size')
   const icon = usePropsSelector('icon')

src/components/inspector/panels/components/StackPanel.tsx

@@ -1,16 +1,51 @@
 import React from 'react'
 import SwitchControl from '../../controls/SwitchControl'
 import TextControl from '../../controls/TextControl'
-import FlexPanel from '../styles/FlexPanel'
+import FormControl from '../../controls/FormControl'
+import { Select } from '@chakra-ui/core'
+import usePropsSelector from '../../../../hooks/usePropsSelector'
+import { useForm } from '../../../../hooks/useForm'
 
 const StackPanel = () => {
+  const { setValueFromEvent } = useForm()
+
+  const alignItems = usePropsSelector('alignItems')
+  const justifyContent = usePropsSelector('justifyContent')
+
   return (
     <>
       <SwitchControl label="Inline" name="isInline" />
       <SwitchControl label="Reversed" name="isReversed" />
       <SwitchControl label="Wrap children" name="shouldWrapChildren" />
       <TextControl name="spacing" label="Spacing" />
-      <FlexPanel />
+      <FormControl label="Justify content">
+        <Select
+          name="justifyContent"
+          size="sm"
+          value={justifyContent || ''}
+          onChange={setValueFromEvent}
+        >
+          <option>flex-start</option>
+          <option>center</option>
+          <option>flex-end</option>
+          <option>space-between</option>
+          <option>space-around</option>
+        </Select>
+      </FormControl>
+      <FormControl label="Align items">
+        <Select
+          name="alignItems"
+          size="sm"
+          value={alignItems || ''}
+          onChange={setValueFromEvent}
+        >
+          <option>flex-start</option>
+          <option>center</option>
+          <option>flex-end</option>
+          <option>space-between</option>
+          <option>space-around</option>
+        </Select>
+      </FormControl>{' '}
     </>
   )
 }