add breadcrumb component (#36)

* add breadcrumb component

* update breadcrumb

* Various fixes

* Improvement

Co-authored-by: Thibault Lenclos <tlenclos@users.noreply.github.com>
Co-authored-by: Baptiste Adrien <adrien.baptiste@gmail.com>

src/components/editor/ComponentPreview.tsx

@@ -1,37 +1,27 @@
 import React, { memo } from 'react'
 import { useSelector } from 'react-redux'
 
-import AlertPreview, {
-  AlertTitlePreview,
-  AlertDescriptionPreview,
-} from './previews/AlertPreview'
+import AlertPreview from './previews/AlertPreview'
 import AvatarPreview, {
   AvatarBadgePreview,
   AvatarGroupPreview,
 } from './previews/AvatarPreview'
-import StackPreview from './previews/StackPreview'
 import AccordionPreview, {
   AccordionHeaderPreview,
   AccordionItemPreview,
   AccordionPanelPreview,
 } from './previews/AccordionPreview'
-import { RadioGroupPreview } from './previews/RadioPreview'
-import SelectPreview from './previews/SelectPreview'
-import SimplePreviewContainer from './SimplePreviewContainer'
 import * as Chakra from '@chakra-ui/core'
 import WithChildrenPreviewContainer from './WithChildrenPreviewContainer'
-import InputGroupPreview from './previews/InputGroupPreview'
-import InputLeftAddonPreview from './previews/InputLeftAddonPreview'
-import InputRightAddonPreview from './previews/InputRightAddonPreview'
 import { getComponentBy } from '../../core/selectors/components'
-import WithBoxRefSimplePreviewContainer from './WithRefSimplePreviewContainer'
+import PreviewContainer from './PreviewContainer'
 import { InputRightElementPreview } from './previews/InputRightElement'
 import { InputLeftElementPreview } from './previews/InputLeftElement'
 import AspectRatioBoxPreview from './previews/AspectRatioBoxPreview'
 
 const ComponentPreview: React.FC<{
   componentName: string
-}> = ({ componentName }) => {
+}> = ({ componentName, ...forwardedProps }) => {
   const component = useSelector(getComponentBy(componentName))
   if (!component) {
     console.error(`ComponentPreview unavailable for component ${componentName}`)
@@ -63,8 +53,13 @@ const ComponentPreview: React.FC<{
     case 'Radio':
     case 'ListItem':
     case 'NumberInput':
+    case 'BreadcrumbLink':
       return (
-        <SimplePreviewContainer component={component} type={Chakra[type]} />
+        <PreviewContainer
+          component={component}
+          type={Chakra[type]}
+          {...forwardedProps}
+        />
       )
     // Wrapped functional components (forward ref issue)
     case 'AlertIcon':
@@ -74,11 +69,17 @@ const ComponentPreview: React.FC<{
     case 'Code':
     case 'Icon':
     case 'ListIcon':
+    case 'AlertDescription':
+    case 'AlertTitle':
+    case 'InputRightAddon':
+    case 'InputLeftAddon':
     case 'Tag':
       return (
-        <WithBoxRefSimplePreviewContainer
+        <PreviewContainer
           component={component}
           type={Chakra[type]}
+          {...forwardedProps}
+          isBoxWrapped
         />
       )
     // Components with childrens
@@ -96,6 +97,21 @@ const ComponentPreview: React.FC<{
           enableVisualHelper
           component={component}
           type={Chakra[type]}
+          {...forwardedProps}
+        />
+      )
+    case 'RadioGroup':
+    case 'Stack':
+    case 'Breadcrumb':
+    case 'InputGroup':
+    case 'BreadcrumbItem':
+      return (
+        <WithChildrenPreviewContainer
+          enableVisualHelper
+          component={component}
+          type={Chakra[type]}
+          {...forwardedProps}
+          isBoxWrapped
         />
       )
     // More complex components
@@ -111,26 +127,10 @@ const ComponentPreview: React.FC<{
       return <AvatarGroupPreview component={component} />
     case 'Alert':
       return <AlertPreview component={component} />
-    case 'AlertTitle':
-      return <AlertTitlePreview component={component} />
-    case 'AlertDescription':
-      return <AlertDescriptionPreview component={component} />
-    case 'Stack':
-      return <StackPreview component={component} />
     case 'Accordion':
       return <AccordionPreview component={component} />
     case 'AccordionHeader':
       return <AccordionHeaderPreview component={component} />
-    case 'RadioGroup':
-      return <RadioGroupPreview component={component} />
-    case 'Select':
-      return <SelectPreview component={component} />
-    case 'InputGroup':
-      return <InputGroupPreview component={component} />
-    case 'InputLeftAddon':
-      return <InputLeftAddonPreview component={component} />
-    case 'InputRightAddon':
-      return <InputRightAddonPreview component={component} />
     case 'AccordionItem':
       return <AccordionItemPreview component={component} />
     case 'AccordionPanel':

src/components/editor/PreviewContainer.tsx

@@ -0,0 +1,34 @@
+import React, { FunctionComponent, ComponentClass } from 'react'
+import { useInteractive } from '../../hooks/useInteractive'
+import { Box } from '@chakra-ui/core'
+
+const PreviewContainer: React.FC<{
+  component: IComponent
+  type: string | FunctionComponent<any> | ComponentClass<any, any>
+  enableVisualHelper?: boolean
+  isBoxWrapped?: boolean
+}> = ({
+  component,
+  type,
+  enableVisualHelper,
+  isBoxWrapped,
+  ...forwardedProps
+}) => {
+  const { props, ref } = useInteractive(component, enableVisualHelper)
+
+  const children = React.createElement(type, { ...props, ...forwardedProps })
+
+  if (isBoxWrapped) {
+    let boxProps: any = {}
+
+    return (
+      <Box {...boxProps} ref={ref}>
+        {children}
+      </Box>
+    )
+  }
+
+  return children
+}
+
+export default PreviewContainer

src/components/editor/WithChildrenPreviewContainer.tsx

@@ -2,26 +2,53 @@ import React, { FunctionComponent, ComponentClass } from 'react'
 import { useInteractive } from '../../hooks/useInteractive'
 import { useDropComponent } from '../../hooks/useDropComponent'
 import ComponentPreview from './ComponentPreview'
+import { Box } from '@chakra-ui/core'
 
 const WithChildrenPreviewContainer: React.FC<{
   component: IComponent
   type: string | FunctionComponent<any> | ComponentClass<any, any>
   enableVisualHelper?: boolean
-}> = ({ component, type, enableVisualHelper = false }) => {
+  isBoxWrapped?: boolean
+}> = ({
+  component,
+  type,
+  enableVisualHelper = false,
+  isBoxWrapped,
+  ...forwardedProps
+}) => {
   const { drop, isOver } = useDropComponent(component.id)
   const { props, ref } = useInteractive(component, enableVisualHelper)
+  const propsElement = { ...props, ...forwardedProps, pos: 'relative' }
+
+  if (!isBoxWrapped) {
+    propsElement.ref = drop(ref)
+  }
 
   if (isOver) {
-    props.bg = 'teal.50'
+    propsElement.bg = 'teal.50'
   }
 
-  return React.createElement(
+  const children = React.createElement(
     type,
-    { ...props, pos: 'relative', ref: drop(ref) },
+    propsElement,
     component.children.map((key: string) => (
       <ComponentPreview key={key} componentName={key} />
     )),
   )
+
+  if (isBoxWrapped) {
+    let boxProps: any = {
+      display: 'inline',
+    }
+
+    return (
+      <Box {...boxProps} ref={drop(ref)}>
+        {children}
+      </Box>
+    )
+  }
+
+  return children
 }
 
 export default WithChildrenPreviewContainer

src/components/editor/previews/AlertPreview.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useInteractive } from '../../../hooks/useInteractive'
 import { useDropComponent } from '../../../hooks/useDropComponent'
 import ComponentPreview from '../ComponentPreview'
-import { Alert, AlertTitle, Box, AlertDescription } from '@chakra-ui/core'
+import { Alert, Box } from '@chakra-ui/core'
 
 const AlertPreview: React.FC<IPreviewProps> = ({ component }) => {
   const acceptedTypes = [
@@ -30,26 +30,4 @@ const AlertPreview: React.FC<IPreviewProps> = ({ component }) => {
   )
 }
 
-export const AlertDescriptionPreview = ({ component }: IPreviewProps) => {
-  const { props, ref } = useInteractive(component)
-  let boxProps: any = {}
-
-  return (
-    <Box {...boxProps} ref={ref}>
-      <AlertDescription {...props} />
-    </Box>
-  )
-}
-
-export const AlertTitlePreview = ({ component }: IPreviewProps) => {
-  const { props, ref } = useInteractive(component)
-  let boxProps: any = {}
-
-  return (
-    <Box {...boxProps} ref={ref}>
-      <AlertTitle {...props} />
-    </Box>
-  )
-}
-
 export default AlertPreview

src/components/inspector/panels/Panels.tsx

@@ -46,6 +46,8 @@ import FormErrorMessagePanel from './components/FormErrorMessagePanel'
 import GridPanel from './components/GridPanel'
 import NumberInputPanel from './components/NumberInputPanel'
 import AspectRatioPanel from './components/AspectRatioPanel'
+import BreadcrumbPanel from './components/BreadcrumbPanel'
+import BreadcrumbItemPanel from './components/BreadcrumbItemPanel'
 
 const Panels: React.FC<{ component: IComponent }> = ({ component }) => {
   const { type } = component
@@ -100,6 +102,9 @@ const Panels: React.FC<{ component: IComponent }> = ({ component }) => {
       {type === 'Grid' && <GridPanel />}
       {type === 'NumberInput' && <NumberInputPanel />}
       {type === 'AspectRatioBox' && <AspectRatioPanel />}
+      {type === 'Breadcrumb' && <BreadcrumbPanel />}
+      {type === 'BreadcrumbItem' && <BreadcrumbItemPanel />}
+      {type === 'BreadcrumbLink' && <LinkPanel />}
     </>
   )
 }

src/components/inspector/panels/components/BreadcrumbItemPanel.tsx

@@ -0,0 +1,13 @@
+import React, { memo } from 'react'
+
+import SwitchControl from '../../controls/SwitchControl'
+
+const BreadcrumbItemPanel = () => {
+  return (
+    <>
+      <SwitchControl label="Is current page" name="isCurrentPage" />
+    </>
+  )
+}
+
+export default memo(BreadcrumbItemPanel)

src/components/inspector/panels/components/BreadcrumbPanel.tsx

@@ -0,0 +1,15 @@
+import React, { memo } from 'react'
+import TextControl from '../../controls/TextControl'
+import SwitchControl from '../../controls/SwitchControl'
+
+const BreadcrumbPanel = () => {
+  return (
+    <>
+      <TextControl name="separator" label="Separator" />
+      <TextControl name="spacing" label="Spacing" />
+      <SwitchControl label="With separator" name="addSeparator" />
+    </>
+  )
+}
+
+export default memo(BreadcrumbPanel)