From b0a8893354500325986b6c4d16f247016abcb9b9 Mon Sep 17 00:00:00 2001 From: ayodeji-ti Date: Mon, 7 Nov 2022 23:50:40 +0000 Subject: [PATCH 1/8] made changes to all required files --- pnpm-lock.yaml | 108 +++++++++++++++++- .../editor/previews/ConditionalPreview.tsx | 31 ++++- src/components/inspector/panels/Panels.tsx | 1 + .../inspector/panels/components/NoPanel.tsx | 7 ++ src/componentsList.ts | 9 +- src/core/models/composer/builder.ts | 17 +++ src/react-app-env.d.ts | 3 + src/utils/editor.ts | 3 + 8 files changed, 171 insertions(+), 8 deletions(-) create mode 100644 src/components/inspector/panels/components/NoPanel.tsx diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 30b288f179..8a23234936 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,7 @@ specifiers: '@bugsnag/plugin-react': ^6.5.0 '@chakra-ui/icons': ^2.0.9 '@chakra-ui/react': ^2.3.2 + '@chakra-ui/system': ^2.3.0 '@chakra-ui/theme': ^2.1.11 '@emotion/react': ^11.10.4 '@emotion/styled': ^11.10.4 @@ -73,8 +74,9 @@ specifiers: dependencies: '@bugsnag/js': 6.5.2 '@bugsnag/plugin-react': 6.5.0_@bugsnag+js@6.5.2 - '@chakra-ui/icons': 2.0.10_react@18.2.0 + '@chakra-ui/icons': 2.0.10_5t7bkk6q574vskeot6qtu5gahi '@chakra-ui/react': 2.3.4_ea72yejj3wmcx5qro3h3lg4cmu + '@chakra-ui/system': 2.3.1_hfzxdiydbrbhhfpkwuv3jhvwmq '@chakra-ui/theme': 2.1.12 '@emotion/react': 11.10.4_uv5tzjaxs7bipciqwqz5vtum4m '@emotion/styled': 11.10.4_wbysxb7usy5etd3cthmq64isju @@ -550,6 +552,10 @@ packages: resolution: {integrity: sha512-Vgop2FFdhVtX7BydjZdJWZAWy+DdXBU1IMaBppz6COaH+/7OXxoI2ec2bs17ehJyBO0M+ud3OLj5UCFQ79YsoQ==} dev: false + /@chakra-ui/anatomy/2.0.7: + resolution: {integrity: sha512-vzcB2gcsGCxhrKbldQQV6LnBPys4eSSsH2UA2mLsT+J3WlXw0aodZw0eE/nH7yLxe4zaQ4Gnc0KjkFW4EWNKSg==} + dev: false + /@chakra-ui/avatar/2.1.0_qyhx7yrz3t2iljwu733tbtkrie: resolution: {integrity: sha512-SRQeH6NNvIBgUc4OsO14ypvcn8I66ndw7r4piIkm+R2zqbYnrzpp1d2zNPNHkChc4xQY71/GenenYO5Fhsi2DA==} peerDependencies: @@ -643,6 +649,15 @@ packages: react: 18.2.0 dev: false + /@chakra-ui/color-mode/2.1.9_react@18.2.0: + resolution: {integrity: sha512-0kx0I+AQon8oS23/X+qMtnhsv/1BUulyJvU56p3Uh8CRaBfgJ7Ly9CerShoUL+5kadu6hN1M9oty4cugaCwv2w==} + peerDependencies: + react: '>=18' + dependencies: + '@chakra-ui/react-use-safe-layout-effect': 2.0.2_react@18.2.0 + react: 18.2.0 + dev: false + /@chakra-ui/control-box/2.0.9_qyhx7yrz3t2iljwu733tbtkrie: resolution: {integrity: sha512-/viS9OBah1wCLNZbgfwkoQOnVRUYgp8Gypjqk9QNQwnNdFUTEgWc1RWN+1RYO85esJzHLkA2hZFIrYu1TZeZ6g==} peerDependencies: @@ -748,34 +763,36 @@ packages: react: 18.2.0 dev: false - /@chakra-ui/icon/3.0.10_qyhx7yrz3t2iljwu733tbtkrie: + /@chakra-ui/icon/3.0.10_5t7bkk6q574vskeot6qtu5gahi: resolution: {integrity: sha512-utO569d9bptEraJrEhuImfNzQ8v+a8PsQh8kTsodCzg8B16R3t5TTuoqeJqS6Nq16Vq6w87QbX3/4A73CNK5fw==} peerDependencies: '@chakra-ui/system': '>=2.0.0' react: '>=18' dependencies: '@chakra-ui/shared-utils': 2.0.1 - '@chakra-ui/system': 2.2.11_hfzxdiydbrbhhfpkwuv3jhvwmq + '@chakra-ui/system': 2.3.1_hfzxdiydbrbhhfpkwuv3jhvwmq react: 18.2.0 dev: false - /@chakra-ui/icon/3.0.10_react@18.2.0: + /@chakra-ui/icon/3.0.10_qyhx7yrz3t2iljwu733tbtkrie: resolution: {integrity: sha512-utO569d9bptEraJrEhuImfNzQ8v+a8PsQh8kTsodCzg8B16R3t5TTuoqeJqS6Nq16Vq6w87QbX3/4A73CNK5fw==} peerDependencies: '@chakra-ui/system': '>=2.0.0' react: '>=18' dependencies: '@chakra-ui/shared-utils': 2.0.1 + '@chakra-ui/system': 2.2.11_hfzxdiydbrbhhfpkwuv3jhvwmq react: 18.2.0 dev: false - /@chakra-ui/icons/2.0.10_react@18.2.0: + /@chakra-ui/icons/2.0.10_5t7bkk6q574vskeot6qtu5gahi: resolution: {integrity: sha512-hxMspvysOay2NsJyadM611F/Y4vVzJU/YkXTxsyBjm6v/DbENhpVmPnUf+kwwyl7dINNb9iOF+kuGxnuIEO1Tw==} peerDependencies: '@chakra-ui/system': '>=2.0.0' react: '>=18' dependencies: - '@chakra-ui/icon': 3.0.10_react@18.2.0 + '@chakra-ui/icon': 3.0.10_5t7bkk6q574vskeot6qtu5gahi + '@chakra-ui/system': 2.3.1_hfzxdiydbrbhhfpkwuv3jhvwmq react: 18.2.0 dev: false @@ -1175,6 +1192,14 @@ packages: react: 18.2.0 dev: false + /@chakra-ui/react-use-safe-layout-effect/2.0.2_react@18.2.0: + resolution: {integrity: sha512-gl5HDq9RVeDJiT8udtpx12KRV8JPLJHDIUX8f/yZcKpXow0C7FFGg5Yy5I9397NQog5ZjKMuOg+AUq9TLJxsyQ==} + peerDependencies: + react: '>=18' + dependencies: + react: 18.2.0 + dev: false + /@chakra-ui/react-use-size/2.0.3_react@18.2.0: resolution: {integrity: sha512-hr4hKepPUmM2paXseSZiOTK2y+ZqnSzYNusDEB01f+cDerFjdN1jSfNJKXpiKF0+hNESXfOPQb3Zt0eDusRdoA==} peerDependencies: @@ -1210,6 +1235,15 @@ packages: react: 18.2.0 dev: false + /@chakra-ui/react-utils/2.0.8_react@18.2.0: + resolution: {integrity: sha512-OSHHBKZlJWTi2NZcPnBx1PyZvLQY+n5RPBtcri7/89EDdAwz2NdEhp2Dz1yQRctOSCF1kB/rnCYDP1U0oRk9RQ==} + peerDependencies: + react: '>=18' + dependencies: + '@chakra-ui/utils': 2.0.11 + react: 18.2.0 + dev: false + /@chakra-ui/react/2.3.4_ea72yejj3wmcx5qro3h3lg4cmu: resolution: {integrity: sha512-b1jbDwl6EZICTh8IaMlsrYAATpT2SvZi2za+asBdDexmnP6ooW3NTKm/HaTikuQCaysfMUhztrbERmenWvOXzA==} peerDependencies: @@ -1351,6 +1385,13 @@ packages: lodash.mergewith: 4.6.2 dev: false + /@chakra-ui/styled-system/2.3.4: + resolution: {integrity: sha512-Lozbedu+GBj4EbHB/eGv475SFDLApsIEN9gNKiZJBJAE1HIhHn3Seh1iZQSrHC/Beq+D5cQq3Z+yPn3bXtFU7w==} + dependencies: + csstype: 3.1.1 + lodash.mergewith: 4.6.2 + dev: false + /@chakra-ui/switch/2.0.12_guoruu3km4hnucmjjiya2u52z4: resolution: {integrity: sha512-VYWVGjmYBX/UgAKloB4Z2465DUmgIp0sSq3W2vVi+8oDutg62mqF/unWs0RGgR++h6w9YDtJeqIozzxY6f1hxA==} peerDependencies: @@ -1381,6 +1422,24 @@ packages: react-fast-compare: 3.2.0 dev: false + /@chakra-ui/system/2.3.1_hfzxdiydbrbhhfpkwuv3jhvwmq: + resolution: {integrity: sha512-pR8KYmqN6rQ+aZ8cT5IYfF7rVXEuh6ZWZgWIdgmt5NMseQ2DR9JlK0SRoHNFW1TnFD4Odq2T7Xh46MHiQZCm1g==} + peerDependencies: + '@emotion/react': ^11.0.0 + '@emotion/styled': ^11.0.0 + react: '>=18' + dependencies: + '@chakra-ui/color-mode': 2.1.9_react@18.2.0 + '@chakra-ui/react-utils': 2.0.8_react@18.2.0 + '@chakra-ui/styled-system': 2.3.4 + '@chakra-ui/theme-utils': 2.0.2 + '@chakra-ui/utils': 2.0.11 + '@emotion/react': 11.10.4_uv5tzjaxs7bipciqwqz5vtum4m + '@emotion/styled': 11.10.4_wbysxb7usy5etd3cthmq64isju + react: 18.2.0 + react-fast-compare: 3.2.0 + dev: false + /@chakra-ui/table/2.0.10_qyhx7yrz3t2iljwu733tbtkrie: resolution: {integrity: sha512-UII+i5f1WS5hdqpGLlD2xT9Nm4tUiQPUW6wCV3/g2/29G/mcNu6TSahf6UljPgMjTowvgtId8kChWTyziRBkTw==} peerDependencies: @@ -1442,6 +1501,24 @@ packages: '@ctrl/tinycolor': 3.4.1 dev: false + /@chakra-ui/theme-tools/2.0.12_kzevwk2hxgy6fnrjqv25jdmqp4: + resolution: {integrity: sha512-mnMlKSmXkCjHUJsKWmJbgBTGF2vnLaMLv1ihkBn5eQcCubMQrBLTiMAEFl5pZdzuHItU6QdnLGA10smcXbNl0g==} + peerDependencies: + '@chakra-ui/styled-system': '>=2.0.0' + dependencies: + '@chakra-ui/anatomy': 2.0.7 + '@chakra-ui/styled-system': 2.3.4 + '@ctrl/tinycolor': 3.4.1 + dev: false + + /@chakra-ui/theme-utils/2.0.2: + resolution: {integrity: sha512-juGdDxTJx7deu2xgdNudRWi+qTbViPQKK0niLSOaXsZIfobVDgBn2iIgwLqFcIR0M1yPk64ERtEuvgGa2yI9iw==} + dependencies: + '@chakra-ui/styled-system': 2.3.4 + '@chakra-ui/theme': 2.1.15_kzevwk2hxgy6fnrjqv25jdmqp4 + lodash.mergewith: 4.6.2 + dev: false + /@chakra-ui/theme/2.1.12: resolution: {integrity: sha512-2RaXPJB6FDtw9qMUbK2CMVZSdHmDfoq/Ud2karYallz6QdrsQaE/6SzqGeXB7J2ZuA886bprmXxstpVOfv/BJg==} peerDependencies: @@ -1451,6 +1528,16 @@ packages: '@chakra-ui/theme-tools': 2.0.11 dev: false + /@chakra-ui/theme/2.1.15_kzevwk2hxgy6fnrjqv25jdmqp4: + resolution: {integrity: sha512-e+oZ0e7kXjtjWO0phUzlz9weWv0w4lv4Us/Lf8DXbstrPujgyxNYOF0LHTDRxzUNa5bYUsP9g5W+FW4e9E2UsQ==} + peerDependencies: + '@chakra-ui/styled-system': '>=2.0.0' + dependencies: + '@chakra-ui/anatomy': 2.0.7 + '@chakra-ui/styled-system': 2.3.4 + '@chakra-ui/theme-tools': 2.0.12_kzevwk2hxgy6fnrjqv25jdmqp4 + dev: false + /@chakra-ui/toast/3.0.12_3jray2zec7csbtzogatjzowwsm: resolution: {integrity: sha512-WxG/E6JOzWDKFieKYq6ninr6Syhyii+YuVkd6pE9QIA3U02Bcd6/tIFr6MszACpG5s4QphEPb98wjTSL7YM85w==} peerDependencies: @@ -1512,6 +1599,15 @@ packages: lodash.mergewith: 4.6.2 dev: false + /@chakra-ui/utils/2.0.11: + resolution: {integrity: sha512-4ZQdK6tbOuTrUCsAQBHWo7tw5/Q6pBV93ZbVpats61cSWMFGv32AIQw9/hA4un2zDeSWN9ZMVLNjAY2Dq/KQOA==} + dependencies: + '@types/lodash.mergewith': 4.6.6 + css-box-model: 1.2.1 + framesync: 5.3.0 + lodash.mergewith: 4.6.2 + dev: false + /@chakra-ui/visually-hidden/2.0.10_qyhx7yrz3t2iljwu733tbtkrie: resolution: {integrity: sha512-uNjwYwi6IugGJSXoZtCjVRekvAU7PZv928SagWtA+TaCLux/8cyNwLSRMdUdku3krPXRh8sIhGnUjqyHdjbuAA==} peerDependencies: diff --git a/src/components/editor/previews/ConditionalPreview.tsx b/src/components/editor/previews/ConditionalPreview.tsx index 1b94ded751..3a5f508bc8 100644 --- a/src/components/editor/previews/ConditionalPreview.tsx +++ b/src/components/editor/previews/ConditionalPreview.tsx @@ -4,7 +4,7 @@ import ComponentPreview from '~components/editor/ComponentPreview' import { useDropComponent } from '~hooks/useDropComponent' import { useInteractive } from '~hooks/useInteractive' -const ConditionalPreview: React.FC<{ component: IComponent }> = ({ +/*const ConditionalPreview: React.FC<{ component: IComponent }> = ({ component, }) => { const { drop, isOver } = useDropComponent(component.id) @@ -36,6 +36,35 @@ const ConditionalPreview: React.FC<{ component: IComponent }> = ({ )} ) +} */ + +const ConditionalPreview: React.FC = ({ component }) => { + const acceptedTypes = [ + 'TrueBox', + 'FalseBox', + ] as ComponentType[] + const { props, ref } = useInteractive(component, true) + const { drop, isOver } = useDropComponent(component.id, acceptedTypes) + + + if (isOver) { + props.bg = 'teal.50' + } + + return ( + + {props.show === 'show-both' || props.show === undefined ? ( + <> + + + + ) : props.show === 'show-true' ? ( + + ) : ( + + )} + + ) } export default ConditionalPreview \ No newline at end of file diff --git a/src/components/inspector/panels/Panels.tsx b/src/components/inspector/panels/Panels.tsx index e568881533..fedb7b66fa 100644 --- a/src/components/inspector/panels/Panels.tsx +++ b/src/components/inspector/panels/Panels.tsx @@ -48,6 +48,7 @@ import AspectRatioPanel from '~components/inspector/panels/components/AspectRati import BreadcrumbPanel from '~components/inspector/panels/components/BreadcrumbPanel' import BreadcrumbItemPanel from '~components/inspector/panels/components/BreadcrumbItemPanel' import HighlightPanel from '~components/inspector/panels/components/HighlightPanel' +import NoPanel from './components/NoPanel' import KbdPanel from './components/KbdPanel' import TabPanel from './components/TabPanel' import StatArrowPanel from './components/StatArrowPanel' diff --git a/src/components/inspector/panels/components/NoPanel.tsx b/src/components/inspector/panels/components/NoPanel.tsx new file mode 100644 index 0000000000..62bddd723a --- /dev/null +++ b/src/components/inspector/panels/components/NoPanel.tsx @@ -0,0 +1,7 @@ +import React, { memo } from 'react' + +const NoPanel = () => ( + <> +) + +export default memo(NoPanel) diff --git a/src/componentsList.ts b/src/componentsList.ts index 937a719a1d..d2d08ccb93 100644 --- a/src/componentsList.ts +++ b/src/componentsList.ts @@ -46,7 +46,12 @@ export const menuItems: MenuItems = { }, Button: {}, Center: {}, - Conditional: {}, + Conditional: { + children: { + TrueBox: {}, + FalseBox: {}, + }, + }, Container: {}, Checkbox: {}, CircularProgress: {}, @@ -231,4 +236,6 @@ export const componentsList: ComponentType[] = [ 'Tag', 'Text', 'Textarea', + 'TrueBox', + 'FalseBox', ] diff --git a/src/core/models/composer/builder.ts b/src/core/models/composer/builder.ts index a57fe7dc21..5f802760c7 100644 --- a/src/core/models/composer/builder.ts +++ b/src/core/models/composer/builder.ts @@ -101,6 +101,22 @@ export const buildBreadcrumb = (parent: string): ComposedComponent => { } } +export const buildConditional = (parent: string): ComposedComponent => { + const composer = new Composer() + + const nodeId = composer.addNode({ type: 'Box', parent }) + composer.addNode({ type: 'TrueBox', parent: nodeId }) + composer.addNode({ type: 'FalseBox', parent: nodeId }) + + const components = composer.getComponents() + + return { + components, + root: nodeId, + parent, + } +} + export const buildFormControl = (parent: string): ComposedComponent => { const composer = new Composer() @@ -281,6 +297,7 @@ const builders: ComposerBuilders = { StatMeta: buildStats, TableMeta: buildTable, TableRowMeta: buildTableRow, + ConditionalMeta: buildConditional, } export default builders diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 4cd5f63727..9c1cc858d0 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -89,6 +89,8 @@ type ComponentType = | 'Td' | 'TableCaption' | 'TableContainer' + | 'TrueBox' + | 'FalseBox' | string type MetaComponentType = @@ -102,6 +104,7 @@ type MetaComponentType = | 'StatMeta' | 'TableMeta' | 'TableRowMeta' + | 'ConditionalMeta' interface ParametersType { name: string diff --git a/src/utils/editor.ts b/src/utils/editor.ts index 61e6f68f96..018cf88946 100644 --- a/src/utils/editor.ts +++ b/src/utils/editor.ts @@ -102,9 +102,12 @@ const COMPONENTS: (ComponentType | MetaComponentType)[] = [ 'StatMeta', 'TableMeta', 'TableRowMeta', + 'ConditionalMeta', // Allow custom components 'Conditional', 'Loop', + 'TrueBox', + 'FalseBox', ] export const AccordionWhitelist: ( From ba733656612e7e7261c7f192c44cfdfe2d9e930b Mon Sep 17 00:00:00 2001 From: ayodeji-ti Date: Mon, 7 Nov 2022 23:55:37 +0000 Subject: [PATCH 2/8] True and false box can only be used in conditional --- src/utils/editor.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/utils/editor.ts b/src/utils/editor.ts index 018cf88946..5e179aa93d 100644 --- a/src/utils/editor.ts +++ b/src/utils/editor.ts @@ -129,5 +129,7 @@ export const rootComponents = COMPONENTS 'AccordionIcon', 'BreadcrumbItem', 'BreadcrumbLink', + 'TrueBox', + 'FalseBox', ].includes(name), ) From 375f2429b6e60207f239d511628866faf8ad6d55 Mon Sep 17 00:00:00 2001 From: ayodeji-ti Date: Tue, 8 Nov 2022 00:01:19 +0000 Subject: [PATCH 3/8] made conditional the parent component --- src/core/models/composer/builder.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/models/composer/builder.ts b/src/core/models/composer/builder.ts index 5f802760c7..5330f00e1d 100644 --- a/src/core/models/composer/builder.ts +++ b/src/core/models/composer/builder.ts @@ -104,7 +104,7 @@ export const buildBreadcrumb = (parent: string): ComposedComponent => { export const buildConditional = (parent: string): ComposedComponent => { const composer = new Composer() - const nodeId = composer.addNode({ type: 'Box', parent }) + const nodeId = composer.addNode({ type: 'Conditional', parent }) composer.addNode({ type: 'TrueBox', parent: nodeId }) composer.addNode({ type: 'FalseBox', parent: nodeId }) From 20ad8b42cea15e96a890b3863fc1a6eb5b6e5be5 Mon Sep 17 00:00:00 2001 From: ayodeji-ti Date: Tue, 8 Nov 2022 07:10:36 +0000 Subject: [PATCH 4/8] Two different boxes with different refs --- src/components/editor/ComponentPreview.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/editor/ComponentPreview.tsx b/src/components/editor/ComponentPreview.tsx index ce39f52a79..de913f20f8 100644 --- a/src/components/editor/ComponentPreview.tsx +++ b/src/components/editor/ComponentPreview.tsx @@ -30,6 +30,7 @@ import NumberInputPreview from '~components/editor/previews/NumberInputPreview' import BreadcrumbPreview from './previews/BreadcrumbPreview' import BreadcrumbItemPreview from './previews/BreadcrumbItemPreview' import HighlightPreview from './previews/HighlightPreview' +import BoxPreview from './previews/BoxPreview' import StatGroupPreview, { StatHelpTextPreview, StatPreview, @@ -234,6 +235,10 @@ const ComponentPreview: React.FC<{ return case 'Loop': return + case 'TrueBox': + return + case 'FalseBox': + return default: return null } From a44de54db68f838d2699c374891534900da1278d Mon Sep 17 00:00:00 2001 From: ayodeji-ti Date: Tue, 8 Nov 2022 07:53:26 +0000 Subject: [PATCH 5/8] preview works as expected --- src/components/editor/previews/ConditionalPreview.tsx | 2 +- src/components/inspector/panels/Panels.tsx | 3 ++- src/components/inspector/panels/components/NoPanel.tsx | 7 ------- 3 files changed, 3 insertions(+), 9 deletions(-) delete mode 100644 src/components/inspector/panels/components/NoPanel.tsx diff --git a/src/components/editor/previews/ConditionalPreview.tsx b/src/components/editor/previews/ConditionalPreview.tsx index 3a5f508bc8..ec9980c69d 100644 --- a/src/components/editor/previews/ConditionalPreview.tsx +++ b/src/components/editor/previews/ConditionalPreview.tsx @@ -52,7 +52,7 @@ const ConditionalPreview: React.FC = ({ component }) => { } return ( - + {props.show === 'show-both' || props.show === undefined ? ( <> diff --git a/src/components/inspector/panels/Panels.tsx b/src/components/inspector/panels/Panels.tsx index fedb7b66fa..be53d321b0 100644 --- a/src/components/inspector/panels/Panels.tsx +++ b/src/components/inspector/panels/Panels.tsx @@ -48,7 +48,6 @@ import AspectRatioPanel from '~components/inspector/panels/components/AspectRati import BreadcrumbPanel from '~components/inspector/panels/components/BreadcrumbPanel' import BreadcrumbItemPanel from '~components/inspector/panels/components/BreadcrumbItemPanel' import HighlightPanel from '~components/inspector/panels/components/HighlightPanel' -import NoPanel from './components/NoPanel' import KbdPanel from './components/KbdPanel' import TabPanel from './components/TabPanel' import StatArrowPanel from './components/StatArrowPanel' @@ -173,6 +172,8 @@ const Panels: React.FC<{ {type === 'Th' && } {type === 'Conditional' && } {type === 'Loop' && } + {type === 'TrueBox' && } + {type === 'FalseBox' && } ) } diff --git a/src/components/inspector/panels/components/NoPanel.tsx b/src/components/inspector/panels/components/NoPanel.tsx deleted file mode 100644 index 62bddd723a..0000000000 --- a/src/components/inspector/panels/components/NoPanel.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React, { memo } from 'react' - -const NoPanel = () => ( - <> -) - -export default memo(NoPanel) From 6fdaaa736d4f16d6225cfdd88a15d9c16cdcb21f Mon Sep 17 00:00:00 2001 From: ayodeji-ti Date: Tue, 8 Nov 2022 09:06:06 +0000 Subject: [PATCH 6/8] updated code generation --- src/utils/code.ts | 46 ++++++++++++++++++++++++---------------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/src/utils/code.ts b/src/utils/code.ts index 5922348866..612ef86f60 100644 --- a/src/utils/code.ts +++ b/src/utils/code.ts @@ -182,6 +182,10 @@ const buildSingleBlock = ({ content += `<${componentName} ${propsContent}>${childComponent.props.children}` } else if (childComponent.type === 'Icon') { content += `<${childComponent.props.icon} ${propsContent} />` + } else if (componentName === 'TrueBox' || componentName === 'FalseBox') { + content += ` + ${buildBlock({ component: childComponent, components, forceBuildBlock })} + ` } else if ( childComponent.children.length && componentName !== 'Conditional' && @@ -203,17 +207,17 @@ const buildSingleBlock = ({ ? `${conditionalValue.slice(1, -1)}` : `'${conditionalValue}'` }` - }? <>${buildSingleBlock({ + }? ${buildSingleBlock({ index: 0, component: childComponent, components, forceBuildBlock, - })}: <>${buildSingleBlock({ + })}: ${buildSingleBlock({ index: 1, component: childComponent, components, forceBuildBlock, - })}}` + })}}` } else if (componentName === 'Loop') { const loopValue = returnLoopValue(propsNames, childComponent) content += `{${ @@ -278,6 +282,10 @@ const buildBlock = ({ content += `<${componentName} ${propsContent}>${childComponent.props.children}` } else if (childComponent.type === 'Icon') { content += `<${childComponent.props.icon} ${propsContent} />` + } else if (componentName === 'TrueBox' || componentName === 'FalseBox') { + content += ` + ${buildBlock({ component: childComponent, components, forceBuildBlock })} + ` } else if ( childComponent.children.length && componentName !== 'Conditional' && @@ -299,17 +307,17 @@ const buildBlock = ({ ? `${conditionalValue.slice(1, -1)}` : `'${conditionalValue}'` }` - }? <>${buildSingleBlock({ + }? ${buildSingleBlock({ index: 0, component: childComponent, components, forceBuildBlock, - })}: <>${buildSingleBlock({ + })}: ${buildSingleBlock({ index: 1, component: childComponent, components, forceBuildBlock, - })}}` + })}}` } else if (componentName === 'Loop') { const loopValue = returnLoopValue(propsNames, childComponent) content += `{${ @@ -429,20 +437,16 @@ export const generateCode = async ( name => name !== 'root' && components[name].type !== 'Conditional' && + components[name].type !== 'Loop' && + components[name].type !== 'Box' && + components[name].type !== 'TrueBox' && + components[name].type !== 'FalseBox' && !Object.keys(currentComponents).includes(components[name].type), ) .map(name => components[name].type), ), ] - const loopIndex = imports.indexOf('Loop') - const boxIndex = imports.indexOf('Box') - if (loopIndex !== -1 && boxIndex === -1) { - imports[loopIndex] = 'Box' - } else if (loopIndex !== -1 && boxIndex !== -1) { - imports = imports.filter(imp => imp !== 'Loop') - } - const customImports = [ ...new Set( Object.keys(components) @@ -466,6 +470,7 @@ export const generateCode = async ( code = `import React, {RefObject} from 'react'; import { ChakraProvider, + Box, ${imports.join(',')} } from "@chakra-ui/react";${ iconImports.length @@ -506,20 +511,16 @@ export const generateOcTsxCode = async ( name => name !== 'root' && components[name].type !== 'Conditional' && + components[name].type !== 'Loop' && + components[name].type !== 'Box' && + components[name].type !== 'TrueBox' && + components[name].type !== 'FalseBox' && !Object.keys(currentComponents).includes(components[name].type), ) .map(name => components[name].type), ), ] - const loopIndex = imports.indexOf('Loop') - const boxIndex = imports.indexOf('Box') - if (loopIndex !== -1 && boxIndex === -1) { - imports[loopIndex] = 'Box' - } else if (loopIndex !== -1 && boxIndex !== -1) { - imports = imports.filter(imp => imp !== 'Loop') - } - const customImports = [ ...new Set( Object.keys(components) @@ -543,6 +544,7 @@ export const generateOcTsxCode = async ( code = `import React, {RefObject} from 'react'; import { ChakraProvider, + Box, ${imports.join(',')} } from "@chakra-ui/react";${ iconImports.length From 5d2ada4150cbecc15f09083ad28200bfcc425576 Mon Sep 17 00:00:00 2001 From: ayodeji-ti Date: Tue, 8 Nov 2022 09:35:27 +0000 Subject: [PATCH 7/8] re4moved truth and false box --- src/components/editor/ComponentPreview.tsx | 5 ----- .../editor/previews/ConditionalPreview.tsx | 3 +-- src/components/inspector/panels/Panels.tsx | 2 -- src/componentsList.ts | 5 +---- src/core/models/composer/builder.ts | 4 ++-- src/react-app-env.d.ts | 2 -- src/utils/code.ts | 12 ------------ src/utils/editor.ts | 4 ---- 8 files changed, 4 insertions(+), 33 deletions(-) diff --git a/src/components/editor/ComponentPreview.tsx b/src/components/editor/ComponentPreview.tsx index de913f20f8..ce39f52a79 100644 --- a/src/components/editor/ComponentPreview.tsx +++ b/src/components/editor/ComponentPreview.tsx @@ -30,7 +30,6 @@ import NumberInputPreview from '~components/editor/previews/NumberInputPreview' import BreadcrumbPreview from './previews/BreadcrumbPreview' import BreadcrumbItemPreview from './previews/BreadcrumbItemPreview' import HighlightPreview from './previews/HighlightPreview' -import BoxPreview from './previews/BoxPreview' import StatGroupPreview, { StatHelpTextPreview, StatPreview, @@ -235,10 +234,6 @@ const ComponentPreview: React.FC<{ return case 'Loop': return - case 'TrueBox': - return - case 'FalseBox': - return default: return null } diff --git a/src/components/editor/previews/ConditionalPreview.tsx b/src/components/editor/previews/ConditionalPreview.tsx index ec9980c69d..3bc16df69f 100644 --- a/src/components/editor/previews/ConditionalPreview.tsx +++ b/src/components/editor/previews/ConditionalPreview.tsx @@ -40,8 +40,7 @@ import { useInteractive } from '~hooks/useInteractive' const ConditionalPreview: React.FC = ({ component }) => { const acceptedTypes = [ - 'TrueBox', - 'FalseBox', + 'Box', ] as ComponentType[] const { props, ref } = useInteractive(component, true) const { drop, isOver } = useDropComponent(component.id, acceptedTypes) diff --git a/src/components/inspector/panels/Panels.tsx b/src/components/inspector/panels/Panels.tsx index be53d321b0..e568881533 100644 --- a/src/components/inspector/panels/Panels.tsx +++ b/src/components/inspector/panels/Panels.tsx @@ -172,8 +172,6 @@ const Panels: React.FC<{ {type === 'Th' && } {type === 'Conditional' && } {type === 'Loop' && } - {type === 'TrueBox' && } - {type === 'FalseBox' && } ) } diff --git a/src/componentsList.ts b/src/componentsList.ts index d2d08ccb93..61c4b96847 100644 --- a/src/componentsList.ts +++ b/src/componentsList.ts @@ -48,8 +48,7 @@ export const menuItems: MenuItems = { Center: {}, Conditional: { children: { - TrueBox: {}, - FalseBox: {}, + Box: {} }, }, Container: {}, @@ -236,6 +235,4 @@ export const componentsList: ComponentType[] = [ 'Tag', 'Text', 'Textarea', - 'TrueBox', - 'FalseBox', ] diff --git a/src/core/models/composer/builder.ts b/src/core/models/composer/builder.ts index 5330f00e1d..5ff0102066 100644 --- a/src/core/models/composer/builder.ts +++ b/src/core/models/composer/builder.ts @@ -105,8 +105,8 @@ export const buildConditional = (parent: string): ComposedComponent => { const composer = new Composer() const nodeId = composer.addNode({ type: 'Conditional', parent }) - composer.addNode({ type: 'TrueBox', parent: nodeId }) - composer.addNode({ type: 'FalseBox', parent: nodeId }) + composer.addNode({ type: 'Box', parent: nodeId }) + composer.addNode({ type: 'Box', parent: nodeId }) const components = composer.getComponents() diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts index 9c1cc858d0..ac6061989c 100644 --- a/src/react-app-env.d.ts +++ b/src/react-app-env.d.ts @@ -89,8 +89,6 @@ type ComponentType = | 'Td' | 'TableCaption' | 'TableContainer' - | 'TrueBox' - | 'FalseBox' | string type MetaComponentType = diff --git a/src/utils/code.ts b/src/utils/code.ts index 612ef86f60..e5199bd5f2 100644 --- a/src/utils/code.ts +++ b/src/utils/code.ts @@ -182,10 +182,6 @@ const buildSingleBlock = ({ content += `<${componentName} ${propsContent}>${childComponent.props.children}` } else if (childComponent.type === 'Icon') { content += `<${childComponent.props.icon} ${propsContent} />` - } else if (componentName === 'TrueBox' || componentName === 'FalseBox') { - content += ` - ${buildBlock({ component: childComponent, components, forceBuildBlock })} - ` } else if ( childComponent.children.length && componentName !== 'Conditional' && @@ -282,10 +278,6 @@ const buildBlock = ({ content += `<${componentName} ${propsContent}>${childComponent.props.children}` } else if (childComponent.type === 'Icon') { content += `<${childComponent.props.icon} ${propsContent} />` - } else if (componentName === 'TrueBox' || componentName === 'FalseBox') { - content += ` - ${buildBlock({ component: childComponent, components, forceBuildBlock })} - ` } else if ( childComponent.children.length && componentName !== 'Conditional' && @@ -439,8 +431,6 @@ export const generateCode = async ( components[name].type !== 'Conditional' && components[name].type !== 'Loop' && components[name].type !== 'Box' && - components[name].type !== 'TrueBox' && - components[name].type !== 'FalseBox' && !Object.keys(currentComponents).includes(components[name].type), ) .map(name => components[name].type), @@ -513,8 +503,6 @@ export const generateOcTsxCode = async ( components[name].type !== 'Conditional' && components[name].type !== 'Loop' && components[name].type !== 'Box' && - components[name].type !== 'TrueBox' && - components[name].type !== 'FalseBox' && !Object.keys(currentComponents).includes(components[name].type), ) .map(name => components[name].type), diff --git a/src/utils/editor.ts b/src/utils/editor.ts index 5e179aa93d..b733363445 100644 --- a/src/utils/editor.ts +++ b/src/utils/editor.ts @@ -106,8 +106,6 @@ const COMPONENTS: (ComponentType | MetaComponentType)[] = [ // Allow custom components 'Conditional', 'Loop', - 'TrueBox', - 'FalseBox', ] export const AccordionWhitelist: ( @@ -129,7 +127,5 @@ export const rootComponents = COMPONENTS 'AccordionIcon', 'BreadcrumbItem', 'BreadcrumbLink', - 'TrueBox', - 'FalseBox', ].includes(name), ) From 15dd09538d096ee520c324b434cd9817b59ac666 Mon Sep 17 00:00:00 2001 From: ayodeji-ti Date: Tue, 8 Nov 2022 12:39:33 +0000 Subject: [PATCH 8/8] added null check --- .../editor/previews/ConditionalPreview.tsx | 42 ++----------------- src/utils/code.ts | 12 +++--- 2 files changed, 10 insertions(+), 44 deletions(-) diff --git a/src/components/editor/previews/ConditionalPreview.tsx b/src/components/editor/previews/ConditionalPreview.tsx index 3bc16df69f..3ab21b0eb3 100644 --- a/src/components/editor/previews/ConditionalPreview.tsx +++ b/src/components/editor/previews/ConditionalPreview.tsx @@ -4,40 +4,6 @@ import ComponentPreview from '~components/editor/ComponentPreview' import { useDropComponent } from '~hooks/useDropComponent' import { useInteractive } from '~hooks/useInteractive' -/*const ConditionalPreview: React.FC<{ component: IComponent }> = ({ - component, -}) => { - const { drop, isOver } = useDropComponent(component.id) - const { props, ref } = useInteractive(component, true) - - if (isOver) { - props.bg = 'teal.50' - } - - return ( - - {props.show === 'show-both' || props.show === undefined ? ( - <> - - - - - - - - ) : props.show === 'show-true' ? ( - - - - ) : ( - - - - )} - - ) -} */ - const ConditionalPreview: React.FC = ({ component }) => { const acceptedTypes = [ 'Box', @@ -54,13 +20,13 @@ const ConditionalPreview: React.FC = ({ component }) => { {props.show === 'show-both' || props.show === undefined ? ( <> - - + + ) : props.show === 'show-true' ? ( - + ) : ( - + )} ) diff --git a/src/utils/code.ts b/src/utils/code.ts index e5199bd5f2..ccd942a719 100644 --- a/src/utils/code.ts +++ b/src/utils/code.ts @@ -203,17 +203,17 @@ const buildSingleBlock = ({ ? `${conditionalValue.slice(1, -1)}` : `'${conditionalValue}'` }` - }? ${buildSingleBlock({ + }? <>${buildSingleBlock({ index: 0, component: childComponent, components, forceBuildBlock, - })}: ${buildSingleBlock({ + })}: <>${buildSingleBlock({ index: 1, component: childComponent, components, forceBuildBlock, - })}}` + })}}` } else if (componentName === 'Loop') { const loopValue = returnLoopValue(propsNames, childComponent) content += `{${ @@ -299,17 +299,17 @@ const buildBlock = ({ ? `${conditionalValue.slice(1, -1)}` : `'${conditionalValue}'` }` - }? ${buildSingleBlock({ + }? <>${buildSingleBlock({ index: 0, component: childComponent, components, forceBuildBlock, - })}: ${buildSingleBlock({ + })}: <>${buildSingleBlock({ index: 1, component: childComponent, components, forceBuildBlock, - })}}` + })}}` } else if (componentName === 'Loop') { const loopValue = returnLoopValue(propsNames, childComponent) content += `{${