wip: refactor builder click overlay

Author: assimhabeek

libs/frontend/application/builder/src/use-cases/base-builder/BuilderClickOverlay.tsx

@@ -46,10 +46,7 @@ export const BuilderClickOverlay = observer<{
   }
 
   const element = selectedNode.element.current
-
-  console.log(selectedNode.element.current.slug)
-
-  const domElement = queryRenderedElementById(element.id)
+  const domElement = queryRenderedElementById(selectedNode.compositeKey)
 
   if (!domElement || !renderContainerRef.current) {
     return null

libs/frontend/application/builder/src/utils/query-rendered-element-by-id.ts

@@ -1,6 +1,6 @@
 import type { Nullable } from '@codelab/shared/abstract/types'
 
-import { DATA_ELEMENT_ID } from '@codelab/frontend/abstract/domain'
+import { DATA_RUNTIME_ELEMENT_ID } from '@codelab/frontend/abstract/domain'
 
 export const queryRenderedElementById = (
   nodeId: string,
@@ -9,7 +9,7 @@ export const queryRenderedElementById = (
     return null
   }
 
-  const nodeQuerySelector = `[${DATA_ELEMENT_ID}="${nodeId}"]`
+  const nodeQuerySelector = `[${DATA_RUNTIME_ELEMENT_ID}="${nodeId}"]`
 
   return document.querySelector(nodeQuerySelector)
 }

libs/frontend/application/renderer/src/components/DroppableStyledComponent.tsx

@@ -13,7 +13,9 @@ interface DroppableStyledComponentProps extends StyledComponentProps {
 }
 
 const DroppableFragment = styled.div`
-  display: contents;
+  width: 100%
+  heigh: 100%
+  position: absolute;
 `
 
 const FragmentComponent = ({
@@ -25,7 +27,7 @@ const FragmentComponent = ({
 }: PropsWithChildren<
   Omit<DroppableStyledComponentProps, 'ReactComponent'>
 >) => {
-  return isDroppable ? (
+  const drag = (
     <MakeComponentDroppable
       ReactComponent={DroppableFragment}
       componentProps={componentProps}
@@ -35,9 +37,9 @@ const FragmentComponent = ({
     >
       {children}
     </MakeComponentDroppable>
-  ) : (
-    children
   )
+
+  return children
 }
 
 export const DroppableStyledComponent = ({

libs/frontend/application/renderer/src/components/StyledComponent.tsx

@@ -1,57 +1,37 @@
 import type { IComponentType } from '@codelab/frontend/abstract/domain'
 import type { IPropData } from '@codelab/shared/abstract/core'
-import type { Nullable } from '@codelab/shared/abstract/types'
 import type { PropsWithChildren } from 'react'
 
-import { camelCaseToKebabCaseOnlyKeys } from '@codelab/shared/utils'
-import { forwardRef, useCallback } from 'react'
+import { toKebabCase } from 'remeda'
 import styled from 'styled-components'
 
-const ReusableStyledComponent = styled('placeholder')`
-  ${(props: IPropData) => camelCaseToKebabCaseOnlyKeys(props['css'])}
+const Placeholder = styled('placeholder')`
+  ${(props: IPropData) => toKebabCase(props['css'])}
 `
 
-export interface StyledComponentProps {
+export interface StyledComponentProps extends PropsWithChildren {
   ReactComponent: IComponentType
   componentProps: IPropData
 }
 
-export const StyledComponent = forwardRef(
-  (
-    {
-      children,
-      componentProps,
-      ReactComponent,
-    }: PropsWithChildren<StyledComponentProps>,
-    ref,
-  ) => {
-    const onRefChange = useCallback((node: Nullable<HTMLElement>) => {
-      componentProps['ref']?.(node)
-
-      if (ref && node instanceof HTMLElement) {
-        if (typeof ref === 'function') {
-          ref(node)
-        } else {
-          ref.current = node
-        }
-      }
-    }, [])
-
-    const { key, ...restComponentProps } = componentProps
-
-    return (
-      <ReusableStyledComponent
-        id="reuseable-styled-component"
-        key={key}
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...restComponentProps}
-        as={ReactComponent}
-        ref={onRefChange}
-      >
-        {children}
-      </ReusableStyledComponent>
-    )
-  },
-)
+export const StyledComponent = ({
+  children,
+  componentProps,
+  ReactComponent,
+}: StyledComponentProps) => {
+  const { key, ...restComponentProps } = componentProps
+
+  return (
+    <Placeholder
+      id="reuseable-styled-component"
+      key={key}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...restComponentProps}
+      as={ReactComponent}
+    >
+      {children}
+    </Placeholder>
+  )
+}
 
 StyledComponent.displayName = 'StyledComponent'

libs/shared/utils/src/transform/strings.ts

@@ -31,10 +31,10 @@ export const getNameFromSlug = (str?: string) => {
  *
  * Example: "fontFamily: 'Gloria Hallelujah'" => "font-family: 'Gloria Hallelujah'"
  */
-export const camelCaseToKebabCaseOnlyKeys = (input?: string) =>
-  input?.replace(/(\w+)(\s*)(?=:)/g, (match) =>
-    match.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`),
-  )
+// export const camelCaseToKebabCaseOnlyKeys = (input?: string) =>
+//   input?.replace(/(\w+)(\s*)(?=:)/g, (match) =>
+//     match.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`),
+//   )
 
 /**
  * Transform both `camelCase`, `PascalCase` to title case

package.json

@@ -228,7 +228,7 @@
     "react-use": "^17.5.1",
     "recoil": "0.7.7",
     "reflect-metadata": "0.1.13",
-    "remeda": "2.12.0",
+    "remeda": "2.17.4",
     "rooks": "7.6.1",
     "rxjs": "7.8.0",
     "server-only": "^0.0.1",