revert: unwated changes after rebase

Author: assimhabeek

libs/frontend/abstract/application/src/component/component.service.interface.ts

@@ -23,23 +23,7 @@ import type {
 export interface IComponentService
   extends Overwrite<
       ICrudService<IRef, ICreateComponentData, IUpdateComponentData>,
-      {
-        /** ***********  ✨ Codeium Command ⭐  ************ */
-        /**
-         * Create a component with the given data. If `createRootElement` is true, creates
-         * a root element for the component. If `createRootElement` is false, returns
-         * `undefined`.
-         *
-         * @param data The component data.
-         * @param createRootElement Whether to create a root element for the component.
-         * @returns The created component model.
-         */
-        /** ****  3e0bb368-082d-46da-ac3c-c93c386f0bf7  ****** */
-        create(
-          data: ICreateComponentData,
-          createRootElement?: boolean,
-        ): Promise<IComponentModel>
-      }
+      { create(data: ICreateComponentData): Promise<IComponentModel> }
     >,
     IQueryService<IComponentModel, ComponentWhere, ComponentOptions>,
     IPaginateable<IComponentModel> {

libs/frontend/abstract/application/src/renderer/runtime-element/runtime.element.service.interface.ts

@@ -17,7 +17,6 @@ export interface IRuntimeElementService {
     parentElement: Nullable<IRuntimeElementModel>,
     propKey?: string,
   ): IRuntimeElementModel
-  delete(runtimeElement: IRuntimeElementModel): void
   getExpandedCompositeKeys(): Array<string>
   maybeRuntimeElement(compositeKey: string): Maybe<IRuntimeElementModel>
   remove(runtimeElement: IRuntimeElementModel): void

libs/frontend/abstract/domain/src/component/component.domain.service.interface.ts

@@ -2,7 +2,7 @@ import type {
   RenderTypeSelectOption,
   SelectOption,
 } from '@codelab/frontend/abstract/types'
-import type { IComponentDto, ICreateComponentData } from '@codelab/shared/abstract/core'
+import type { IComponentDto } from '@codelab/shared/abstract/core'
 import type { ObjectMap } from 'mobx-keystone'
 
 import type { IHydrateable } from '../shared'
@@ -13,8 +13,6 @@ export interface IComponentDomainService
   componentList: Array<IComponentModel>
   components: ObjectMap<IComponentModel>
   sortedComponentsList: Array<IComponentModel>
-
-  add(data: ICreateComponentData): IComponentModel
   component(id: string): IComponentModel
   findById(id: string): IComponentModel
   getRenderTypeOptions(

libs/frontend/abstract/domain/src/shared/constant.ts

@@ -5,7 +5,6 @@
  *
  * node.dataset.componentId
  */
-
 export const DATASET_COMPONENT_ID = 'componentId'
 
 export const DATA_COMPONENT_ID = 'data-component-id'

libs/frontend/application/builder/src/sections/explorer-pane/BuilderPrimarySidebar.tsx

@@ -7,7 +7,6 @@ import type {
 import type { CuiSidebarView } from '@codelab/frontend/presentation/codelab-ui'
 
 import PlusOutlined from '@ant-design/icons/PlusOutlined'
-import { isRuntimeElement } from '@codelab/frontend/abstract/application'
 import { isComponent, isPage } from '@codelab/frontend/abstract/domain'
 import { UiKey } from '@codelab/frontend/abstract/types'
 import { CuiSidebar } from '@codelab/frontend/presentation/codelab-ui'
@@ -33,11 +32,10 @@ export const BuilderPrimarySidebar = observer<{
 }>(({ containerNode, isLoading = false }) => {
   const router = useRouter()
   const { appId, componentId, pageId } = useUrlPathParams()
-  const { rendererService,builderService } = useApplicationStore()
+  const { rendererService } = useApplicationStore()
   const { createPopover: createElementPopover } = useElementService()
   const { createPopover: createFieldPopover } = useFieldService()
   const { createPopover: createActionPopover } = useActionService()
-  const selectedNode = builderService.selectedNode?.current
   const store = containerNode.store.maybeCurrent
   const renderer = rendererService.activeRenderer?.current
   const runtimeContainerNode = renderer?.runtimeContainerNode

libs/frontend/application/builder/src/sections/explorer-pane/ElementContextMenu.tsx

@@ -4,6 +4,7 @@ import type { IElementTreeViewDataNode } from '@codelab/frontend/abstract/applic
 import type { Nullable } from '@codelab/shared/abstract/types'
 
 import { isComponent } from '@codelab/frontend/abstract/domain'
+import { PageType } from '@codelab/frontend/abstract/types'
 import { useComponentService } from '@codelab/frontend-application-component/services'
 import {
   useCloneElementService,
@@ -20,7 +21,6 @@ import { Dropdown } from 'antd'
 import { observer } from 'mobx-react-lite'
 import { useRouter } from 'next/navigation'
 import { useState } from 'react'
-import { PageType } from '@codelab/frontend/abstract/types'
 
 export interface ContextMenuProps {
   onBlur?(): unknown
@@ -43,6 +43,7 @@ export const ElementContextMenu = observer<
   const { createPopover, deletePopover } = useElementService()
   const router = useRouter()
   const { appId, componentId, pageId } = useUrlPathParams()
+
   const cloneElementService = useCloneElementService({
     builderService,
     componentService,
@@ -97,25 +98,14 @@ export const ElementContextMenu = observer<
     await cloneElementService.convertElementToComponent(runtimeElement)
   }
 
-  const onEditComponent = async () => {
+  const onEditComponent = () => {
     if (!isComponent(element.renderType.current)) {
       return
     }
 
-    await router.push(
+    router.push(
       PageType.ComponentBuilder({ componentId: element.renderType.current.id }),
     )
-
-    // const runtimeElement = runtimeElementService.runtimeElement(treeNode.key)
-
-    // const runtimeComponent = runtimeElement.children.find(
-    //   (child): child is IRuntimeComponentModel =>
-    //     isRuntimeComponent(child) &&
-    //     child.component.id === element.renderType.id,
-    // )
-
-    // runtimeComponent &&
-    //   builderService.setSelectedNode(runtimeComponentRef(runtimeComponent))
   }
 
   const menuItems = [

libs/frontend/application/builder/src/sections/explorer-pane/builder-tree/ElementTreeView.tsx

@@ -43,11 +43,11 @@ export const ElementTreeView = observer<{
         event.stopPropagation()
       }}
       onDrop={handleDrop}
-      onExpand={(newExpandedKeys) => {
+      onExpand={(expandedKeys) => {
         runtimeElementService.elementsList.forEach((runtimeElement) => {
           // element will be marked modified automatically
           runtimeElement.element.current.setExpanded(
-            newExpandedKeys.includes(runtimeElement.compositeKey),
+            expandedKeys.includes(runtimeElement.compositeKey),
           )
         })
 

libs/frontend/application/builder/src/sections/explorer-pane/tab-contents/CustomComponents.tsx

@@ -24,7 +24,6 @@ export const CustomComponents = observer(() => {
   })
 
   const editComponent = (componentId: string) => {
-    // sidebar should be explorer
     router.push(PageType.ComponentBuilder({ componentId }))
   }
 

libs/frontend/application/renderer/src/store/runtime-element-style.model.ts

@@ -11,6 +11,7 @@ import type { Ref } from 'mobx-keystone'
 import {
   ElementStylePseudoClass,
   getRendererService,
+  RendererType,
 } from '@codelab/frontend/abstract/application'
 import { getPreferenceDomainService } from '@codelab/frontend/abstract/domain'
 import { IBreakpointType } from '@codelab/shared/abstract/core'
@@ -23,7 +24,7 @@ import { jsonStringToCss, parseCssStringIntoObject } from './style.utils'
 @model('@codelab/RuntimeElementStyle')
 export class RuntimeElementStyle
   extends Model({
-    builderStyle: prop<string>().withSetter(),
+    builderStyle: prop<Maybe<string>>().withSetter(),
     element: prop<Ref<IElementModel>>(),
   })
   implements IRuntimeElementStyleModel
@@ -88,6 +89,12 @@ export class RuntimeElementStyle
 
   @computed
   get styleStringWithBreakpoints(): string {
+    const rendererType = this.renderer.rendererType
+
+    const isProduction =
+      rendererType === RendererType.Production ||
+      rendererType === RendererType.Preview
+
     const breakpointStyles = []
 
     for (const breakpoint of this.breakpointsByPrecedence) {
@@ -125,7 +132,9 @@ export class RuntimeElementStyle
 
     const styleWithBreakPoints = breakpointStyles.join('\n')
 
-    return styleWithBreakPoints
+    return isProduction || !this.builderStyle
+      ? styleWithBreakPoints
+      : [styleWithBreakPoints, this.builderStyle].join('\n')
   }
 
   @computed

libs/frontend/infra/mobx/store/src/stores/test.store.ts

@@ -3,7 +3,6 @@ import type {
   IRendererDto,
   IRootStore,
 } from '@codelab/frontend/abstract/application'
-import type { IDomainStore } from '@codelab/frontend/abstract/domain'
 import type {
   IApiActionDto,
   IAppDto,
@@ -495,22 +494,6 @@ export const createTestStore = () => {
     }
 
     @modelAction
-    /** ***********  ✨ Codeium Command ⭐  ************ */
-    /**
-     * Sets up a runtime component within a page.
-     *
-     * This function initializes a runtime component by configuring the page,
-     * renderer, and root element. It creates and associates a component with
-     * the root element, writes it to the cache, and returns relevant elements
-     * and their states for further operations.
-     *
-     * @param rendererType - The type of renderer to use (default: RendererType.Preview).
-     * @param pageKind - The kind of page to set up (default: IPageKind.Regular).
-     * @returns An object containing the component, page, rendered output,
-     *          renderer, root element, and runtime root element.
-     */
-
-    /** ****  b4fd35ed-bbb7-44a7-8c7e-9081a4518bd8  ****** */
     setupRuntimeComponent() {
       const { page, renderer, runtimePage } = this.setupPage()
       const rootElement = page.rootElement.current