feat: add Highlight component

* add high light component * add tabs * remove log * improve highlight support Co-authored-by: shinework <[email protected]>
premieroctet · Sep 9, 2022 · 6de48fc · 6de48fc
1 parent 466dcde
commit 6de48fc
Show file tree

Hide file tree

Showing 13 changed files with 96 additions and 38 deletions.
diff --git a/src/components/editor/ComponentPreview.test.tsx b/src/components/editor/ComponentPreview.test.tsx
@@ -51,6 +51,7 @@ const componentsToTest = [
   'Textarea',
   'CircularProgress',
   'Heading',
+  'Highlight',
   'Tag',
   'Switch',
   'FormLabel',

diff --git a/src/components/editor/ComponentPreview.tsx b/src/components/editor/ComponentPreview.tsx
@@ -25,6 +25,7 @@ import SelectPreview from '~components/editor/previews/SelectPreview'
 import NumberInputPreview from '~components/editor/previews/NumberInputPreview'
 import BreadcrumbPreview from './previews/BreadcrumbPreview'
 import BreadcrumbItemPreview from './previews/BreadcrumbItemPreview'
+import HighlightPreview from './previews/HighlightPreview'
 
 const ComponentPreview: React.FC<{
   componentName: string
@@ -154,6 +155,9 @@ const ComponentPreview: React.FC<{
       return <SelectPreview component={component} />
     case 'NumberInput':
       return <NumberInputPreview component={component} />
+    case 'Highlight':
+      return <HighlightPreview component={component} />
+
     default:
       return null
   }

diff --git a/src/components/editor/previews/HighlightPreview.tsx b/src/components/editor/previews/HighlightPreview.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import { useInteractive } from '~hooks/useInteractive'
+import { Box, Highlight } from '@chakra-ui/react'
+
+const HighlightPreview: React.FC<IPreviewProps> = ({ component }) => {
+  const { props, ref } = useInteractive(component, true, true)
+
+  return (
+    <Box {...props} ref={ref}>
+      <Highlight {...component.props} styles={component.props} />
+    </Box>
+  )
+}
+
+export default HighlightPreview
diff --git a/src/components/inspector/panels/Panels.tsx b/src/components/inspector/panels/Panels.tsx
@@ -48,6 +48,7 @@ import NumberInputPanel from '~components/inspector/panels/components/NumberInpu
 import AspectRatioPanel from '~components/inspector/panels/components/AspectRatioPanel'
 import BreadcrumbPanel from '~components/inspector/panels/components/BreadcrumbPanel'
 import BreadcrumbItemPanel from '~components/inspector/panels/components/BreadcrumbItemPanel'
+import HighlightPanel from '~components/inspector/panels/components/HighlightPanel'
 
 const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
   component,
@@ -81,6 +82,7 @@ const Panels: React.FC<{ component: IComponent; isRoot: boolean }> = ({
       {type === 'Textarea' && <TextareaPanel />}
       {type === 'CircularProgress' && <CircularProgressPanel />}
       {type === 'Heading' && <HeadingPanel />}
+      {type === 'Highlight' && <HighlightPanel />}
       {type === 'SimpleGrid' && <SimpleGridPanel />}
       {type === 'Switch' && <SwitchPanel />}
       {type === 'Alert' && <AlertPanel />}

diff --git a/src/components/inspector/panels/StylesPanel.tsx b/src/components/inspector/panels/StylesPanel.tsx
@@ -1,6 +1,5 @@
 import React, { memo } from 'react'
 import { Accordion } from '@chakra-ui/react'
-
 import PaddingPanel from '~components/inspector/panels/styles/PaddingPanel'
 import DimensionPanel from '~components/inspector/panels/styles/DimensionPanel'
 import BorderPanel from '~components/inspector/panels/styles/BorderPanel'

diff --git a/src/components/inspector/panels/components/FormErrorMessagePanel.tsx b/src/components/inspector/panels/components/FormErrorMessagePanel.tsx
@@ -1,12 +1,6 @@
 import React from 'react'
 import ChildrenControl from '~components/inspector/controls/ChildrenControl'
 
-const FormErrorMessagePanel = () => {
-  return (
-    <>
-      <ChildrenControl />
-    </>
-  )
-}
+const FormErrorMessagePanel = () => <ChildrenControl />
 
 export default FormErrorMessagePanel
diff --git a/src/components/inspector/panels/components/HighlightPanel.tsx b/src/components/inspector/panels/components/HighlightPanel.tsx
@@ -0,0 +1,12 @@
+import { memo } from 'react'
+import ChildrenControl from '~components/inspector/controls/ChildrenControl'
+import TextControl from '~components/inspector/controls/TextControl'
+
+const HighlightPanel = () => (
+  <>
+    <ChildrenControl />
+    <TextControl label="Query" name="query" />
+  </>
+)
+
+export default memo(HighlightPanel)
diff --git a/src/componentsList.ts b/src/componentsList.ts
@@ -63,6 +63,7 @@ export const menuItems: MenuItems = {
   },
   Grid: {},
   Heading: {},
+  Highlight: {},
   Icon: {},
   IconButton: {},
   Image: {},
@@ -141,6 +142,7 @@ export const componentsList: ComponentType[] = [
   'FormLabel',
   'Grid',
   'Heading',
+  'Highlight',
   'Icon',
   'IconButton',
   'Image',

diff --git a/src/hooks/useInteractive.ts b/src/hooks/useInteractive.ts
@@ -10,7 +10,8 @@ import { getShowLayout, getFocusedComponent } from '../core/selectors/app'
 
 export const useInteractive = (
   component: IComponent,
-  enableVisualHelper: boolean = false,
+  enableVisualHelper = false,
+  withoutComponentProps = false,
 ) => {
   const dispatch = useDispatch()
   const showLayout = useSelector(getShowLayout)
@@ -24,7 +25,7 @@ export const useInteractive = (
 
   const ref = useRef<HTMLDivElement>(null)
   let props = {
-    ...component.props,
+    ...(withoutComponentProps ? {} : component.props),
     onMouseOver: (event: MouseEvent) => {
       event.stopPropagation()
       dispatch.components.hover(component.id)

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
@@ -38,6 +38,7 @@ type ComponentType =
   | 'FormErrorMessage'
   | 'Grid'
   | 'Heading'
+  | 'Highlight'
   | 'Icon'
   | 'IconButton'
   | 'Image'

diff --git a/src/utils/code.ts b/src/utils/code.ts
@@ -30,6 +30,41 @@ type BuildBlockParams = {
   forceBuildBlock?: boolean
 }
 
+const buildStyledProps = (propsNames: string[], childComponent: IComponent) => {
+  let propsContent = ``
+
+  propsNames.forEach((propName: string) => {
+    const propsValue = childComponent.props[propName]
+
+    if (
+      propName.toLowerCase().includes('icon') &&
+      childComponent.type !== 'Icon'
+    ) {
+      if (Object.keys(icons).includes(propsValue)) {
+        let operand = `={<${propsValue} />}`
+
+        propsContent += `${propName}${operand} `
+      }
+    } else if (propName !== 'children' && propsValue) {
+      let operand = `='${propsValue}'`
+
+      if (propsValue === true || propsValue === 'true') {
+        operand = ``
+      } else if (
+        propsValue === 'false' ||
+        isBoolean(propsValue) ||
+        !isNaN(propsValue)
+      ) {
+        operand = `={${propsValue}}`
+      }
+
+      propsContent += `${propName}${operand} `
+    }
+  })
+
+  return propsContent
+}
+
 const buildBlock = ({
   component,
   components,
@@ -53,34 +88,19 @@ const buildBlock = ({
         return true
       })
 
-      propsNames.forEach((propName: string) => {
-        const propsValue = childComponent.props[propName]
-
-        if (
-          propName.toLowerCase().includes('icon') &&
-          childComponent.type !== 'Icon'
-        ) {
-          if (Object.keys(icons).includes(propsValue)) {
-            let operand = `={<${propsValue} />}`
-
-            propsContent += `${propName}${operand} `
-          }
-        } else if (propName !== 'children' && propsValue) {
-          let operand = `='${propsValue}'`
-
-          if (propsValue === true || propsValue === 'true') {
-            operand = ``
-          } else if (
-            propsValue === 'false' ||
-            isBoolean(propsValue) ||
-            !isNaN(propsValue)
-          ) {
-            operand = `={${propsValue}}`
-          }
-
-          propsContent += `${propName}${operand} `
-        }
-      })
+      // Special case for Highlight component
+      if (componentName === 'Highlight') {
+        const [query, children, ...restProps] = propsNames
+        propsContent += buildStyledProps([query, children], childComponent)
+
+        propsContent += `styles={{${restProps
+          .filter(propName => childComponent.props[propName])
+          .map(
+            propName => `${propName}:'${childComponent.props[propName]}'`,
+          )}}}`
+      } else {
+        propsContent += buildStyledProps(propsNames, childComponent)
+      }
 
       if (
         typeof childComponent.props.children === 'string' &&

diff --git a/src/utils/defaultProps.tsx b/src/utils/defaultProps.tsx
@@ -58,6 +58,7 @@ import {
   TabProps,
   BreadcrumbLinkProps,
   ListProps,
+  HighlightProps,
 } from '@chakra-ui/react'
 
 import iconsList from '~iconsList'
@@ -85,6 +86,7 @@ type PreviewDefaultProps = {
   Textarea?: PropsWithForm<TextareaProps>
   CircularProgress?: PropsWithForm<CircularProgressProps>
   Heading?: PropsWithForm<HeadingProps>
+  Highlight?: PropsWithForm<HighlightProps>
   Tag?: PropsWithForm<TagProps>
   SimpleGrid?: PropsWithForm<SimpleGridProps>
   Switch?: PropsWithForm<SwitchProps>
@@ -211,6 +213,10 @@ export const DEFAULT_PROPS: PreviewDefaultProps = {
   Heading: {
     children: 'Heading title',
   },
+  Highlight: {
+    children: 'Heading title',
+    query: 'title',
+  },
   Icon: { icon: 'CopyIcon' },
   IconButton: {
     'aria-label': 'icon',

diff --git a/src/utils/editor.ts b/src/utils/editor.ts
@@ -27,6 +27,7 @@ export const COMPONENTS: (ComponentType | MetaComponentType)[] = [
   'FormErrorMessage',
   'Grid',
   'Heading',
+  'Highlight',
   'Icon',
   'IconButton',
   'Image',