feat: add Highlight component

* add high light component

* add tabs

* remove log

* improve highlight support

Co-authored-by: shinework <[email protected]>

Author: PierreCrb

src/components/editor/ComponentPreview.test.tsx

@@ -51,6 +51,7 @@ const componentsToTest = [
   'Textarea',
   'CircularProgress',
   'Heading',
+  'Highlight',
   'Tag',
   'Switch',
   'FormLabel',

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
   }

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

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 />}

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'

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

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)

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',

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)

src/react-app-env.d.ts

@@ -38,6 +38,7 @@ type ComponentType =
   | 'FormErrorMessage'
   | 'Grid'
   | 'Heading'
+  | 'Highlight'
   | 'Icon'
   | 'IconButton'
   | 'Image'