From 6de48fcae76cde1829e95f6687c9edbeb63454ca Mon Sep 17 00:00:00 2001 From: 0xPierre <43297207+PierreCrb@users.noreply.github.com> Date: Fri, 9 Sep 2022 13:13:32 +0200 Subject: [PATCH] feat: add Highlight component * add high light component * add tabs * remove log * improve highlight support Co-authored-by: shinework --- .../editor/ComponentPreview.test.tsx | 1 + src/components/editor/ComponentPreview.tsx | 4 + .../editor/previews/HighlightPreview.tsx | 15 ++++ src/components/inspector/panels/Panels.tsx | 2 + .../inspector/panels/StylesPanel.tsx | 1 - .../components/FormErrorMessagePanel.tsx | 8 +- .../panels/components/HighlightPanel.tsx | 12 +++ src/componentsList.ts | 2 + src/hooks/useInteractive.ts | 5 +- src/react-app-env.d.ts | 1 + src/utils/code.ts | 76 ++++++++++++------- src/utils/defaultProps.tsx | 6 ++ src/utils/editor.ts | 1 + 13 files changed, 96 insertions(+), 38 deletions(-) create mode 100644 src/components/editor/previews/HighlightPreview.tsx create mode 100644 src/components/inspector/panels/components/HighlightPanel.tsx diff --git a/src/components/editor/ComponentPreview.test.tsx b/src/components/editor/ComponentPreview.test.tsx index b64ae6f028..d3f6818a47 100644 --- 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 index 8ecc3b6b80..09fe6f89b5 100644 --- 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 case 'NumberInput': return + case 'Highlight': + return + default: return null } diff --git a/src/components/editor/previews/HighlightPreview.tsx b/src/components/editor/previews/HighlightPreview.tsx new file mode 100644 index 0000000000..9190ed0863 --- /dev/null +++ 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 = ({ component }) => { + const { props, ref } = useInteractive(component, true, true) + + return ( + + + + ) +} + +export default HighlightPreview diff --git a/src/components/inspector/panels/Panels.tsx b/src/components/inspector/panels/Panels.tsx index 5cc760d578..381024f904 100644 --- 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' && } {type === 'CircularProgress' && } {type === 'Heading' && } + {type === 'Highlight' && } {type === 'SimpleGrid' && } {type === 'Switch' && } {type === 'Alert' && } diff --git a/src/components/inspector/panels/StylesPanel.tsx b/src/components/inspector/panels/StylesPanel.tsx index 493de86bef..b50b294b88 100644 --- 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 index 59c2650509..25b7789248 100644 --- 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 ( - <> - - - ) -} +const FormErrorMessagePanel = () => export default FormErrorMessagePanel diff --git a/src/components/inspector/panels/components/HighlightPanel.tsx b/src/components/inspector/panels/components/HighlightPanel.tsx new file mode 100644 index 0000000000..85b498c99e --- /dev/null +++ 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 = () => ( + <> + + + +) + +export default memo(HighlightPanel) diff --git a/src/componentsList.ts b/src/componentsList.ts index 96a02dbdb2..720f2493e9 100644 --- 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 index 625ae5b20c..a62d686b34 100644 --- 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(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 index e53abac1a4..e30513d40c 100644 --- 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 index a05a52aa5c..abbebd3d73 100644 --- 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 index 376041f6f4..91d5a8fade 100644 --- 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 CircularProgress?: PropsWithForm Heading?: PropsWithForm + Highlight?: PropsWithForm Tag?: PropsWithForm SimpleGrid?: PropsWithForm Switch?: PropsWithForm @@ -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 index 431969e528..50cdeba3e7 100644 --- 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',