@developer_tribe/react-builder 1.0.3 → 1.0.4

package/src/modals/Modal.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
 
 type ModalProps = {
   onClose: () => void;
@@ -33,7 +34,7 @@ export function Modal({
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [closeOnEsc, onClose]);
 
-  return (
+  const modalNode = (
     <div
       className={`modal${className ? ` ${className}` : ''}`}
       role="dialog"
@@ -52,6 +53,12 @@ export function Modal({
       </div>
     </div>
   );
+
+  if (typeof document === 'undefined') {
+    return modalNode;
+  }
+
+  return createPortal(modalNode, document.body);
 }
 
 export default Modal;

package/src/pages/ProjectPage.tsx

@@ -46,8 +46,14 @@ export function ProjectPage({
 
   const handleDeleteNode = useCallback(
     (nodeToDelete: Node) => {
-      // Do not allow deleting the root node
+      // Extra warning for deleting the root node (editorData)
       if (nodeToDelete === editorData) {
+        const shouldDeleteRoot = window.confirm(
+          'You are about to delete the root component. This will clear the entire screen. Continue?',
+        );
+        if (!shouldDeleteRoot) return;
+        setEditorData(null);
+        setCurrent(null);
         return;
       }
       const updated: Node = deleteNodeFromTree(editorData, nodeToDelete);

package/src/pages/tabs/SideTool.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useState } from 'react';
-import { JsonEditor } from 'json-edit-react';
+import { JsonTextEditor } from '../../components/JsonTextEditor';
 import { Modal } from '../../modals';
 import { Localication, Node } from '../..';
 import { useLogRender } from '../../utils/useLogRender';
 import { useRenderStore } from '../../store';
 import { Checkbox } from '../../components/Checkbox';
 import { LocalicationModal } from '../../modals/LocalicationModal';
+import { analyseAndProccess } from '../../utils/analyseNode';
 
 const screenStyleDefaults = {
   light: { backgroundColor: '#FDFDFD', color: '#161827' },
@@ -17,7 +18,7 @@ type ScreenColorKey = keyof (typeof screenStyleDefaults)['light'];
 
 type SideToolProps = {
   data: Node;
-  setData: (data: Node) => void;
+  setData: React.Dispatch<React.SetStateAction<Node>>;
 };
 
 const colorFields = [
@@ -114,7 +115,6 @@ export function SideTool({ data, setData }: SideToolProps) {
         display: 'flex',
         flexDirection: 'column',
         gap: 8,
-        backgroundColor: isCompactMode ? '#fff' : undefined,
       }}
     >
       <button
@@ -128,7 +128,7 @@ export function SideTool({ data, setData }: SideToolProps) {
       </button>
 
       {isCompactPanelVisible && (
-        <div className="side-tool" style={{ display: 'flex', height: '100%' }}>
+        <div className="side-tool">
           <select
             value={appConfig.defaultLanguage ?? 'en'}
             onChange={(e) =>
@@ -233,12 +233,13 @@ export function SideTool({ data, setData }: SideToolProps) {
               </div>
               <div className="localication-modal__body">
                 <div className="localication-modal__editor">
-                  <JsonEditor
-                    rootName="debug"
-                    data={data as any}
-                    setData={setData as any}
+                  <JsonTextEditor
+                    rootName="node"
+                    value={data ?? {}}
+                    onChange={(next) =>
+                      setData(analyseAndProccess(next as Node) as Node)
+                    }
                     className="localication-modal__json-editor"
-                    maxWidth="100%"
                   />
                 </div>
               </div>

package/src/store.ts

@@ -17,6 +17,8 @@ type RenderStore = {
   setCopiedNode: (node: Node | null) => void;
   current: Node | null;
   setCurrent: (node: Node | null) => void;
+  forceRender: number;
+  incForceRender: () => void;
   device: Device;
   setDevice: (device: Device) => void;
   appConfig: AppConfig;
@@ -44,6 +46,9 @@ export const useRenderStore = createWithEqualityFn<RenderStore>()(
     setCopiedNode: (node) => set({ copiedNode: node }),
     current: null,
     setCurrent: (node) => set({ current: node }),
+    forceRender: 0,
+    incForceRender: () =>
+      set((state) => ({ forceRender: state.forceRender + 1 })),
     device: getDefaultDevice(),
     setDevice: (device) => set({ device }),
     appConfig: defaultAppConfig,

package/src/styles/base/_global.scss

@@ -139,6 +139,11 @@ body,
   }
 }
 
+/* Builder preview selection helpers */
+.rb-node-selected {
+  border: 1px solid #2684ff;
+}
+
 /* Header */
 .app-header {
   position: sticky;

package/src/styles/components/_editor-shell.scss

@@ -191,12 +191,14 @@
 .side-tool {
   display: flex;
   flex-direction: column;
+  height: 100%;
+  max-width: 220px;
   gap: sizes.$spaceTight;
   padding: sizes.$spaceTight;
   border-radius: 4px;
   border: 1px solid colors.$borderColor;
-  font-size: 11px;
-  max-width: 220px;
+  font-size: 11xpx;
+  background: #fff;
 }
 
 .side-tool select {

package/src/styles/modals/_color-modal.scss

@@ -83,6 +83,24 @@
   padding: 4px 8px;
 }
 
+.color-modal__add-color {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.color-modal__add-color-input {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .color-section {
   display: flex;
   flex-direction: column;
@@ -155,5 +173,16 @@
 }
 
 .color-modal__input {
-  display: none;
+  // Keep the input in the DOM so browsers allow opening the native color picker
+  // via user gesture (programmatic click/showPicker), but visually hide it.
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
 }

package/src/styles/utilities/_carousel.scss

@@ -12,7 +12,6 @@
 .embla__container {
   display: flex;
   touch-action: pan-y pinch-zoom;
-  margin-left: calc(var(--slide-spacing) * -1);
 }
 .embla__slide {
   transform: translate3d(0, 0, 0);
@@ -84,6 +83,7 @@
   -webkit-appearance: none;
   appearance: none;
   background-color: transparent;
+  --embla-dot-color: var(--detail-medium-contrast);
   touch-action: manipulation;
   display: inline-flex;
   text-decoration: none;
@@ -91,23 +91,24 @@
   border: 0;
   padding: 0;
   margin: 0;
-  width: 2.6rem;
-  height: 2.6rem;
+  /* Keep a reasonable hit-area, but allow bigger dots to grow it. */
+  width: max(2.6rem, calc(var(--embla-dot-size, 1.4rem) + 1.2rem));
+  height: max(2.6rem, calc(var(--embla-dot-size, 1.4rem) + 1.2rem));
   display: flex;
   align-items: center;
   border-radius: 50%;
 }
 .embla__dot:after {
-  box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
-  width: 1.4rem;
-  height: 1.4rem;
+  background-color: var(--embla-dot-color);
+  width: var(--embla-dot-size, 1.4rem);
+  height: var(--embla-dot-size, 1.4rem);
   border-radius: 50%;
   display: flex;
   align-items: center;
   content: '';
 }
-.embla__dot--selected:after {
-  box-shadow: inset 0 0 0 0.2rem var(--text-body);
+.embla__dot--selected {
+  --embla-dot-color: var(--text-body);
 }
 .carousel-provider {
   height: 100%;

package/src/utils/extractImageStyle.ts

@@ -1,24 +1,21 @@
 import { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
 import type { NodeData } from '../types/Node';
+import { extractViewStyle, ExtractViewStyleOptions } from './extractViewStyle';
 
 export function extractImageStyle<T extends ImagePropsGenerated['attributes']>(
   node: NodeData<T>,
+  options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
   const style: React.CSSProperties = {};
 
   if (!attributes) return style;
 
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius = attributes.borderRadius;
-
   // Map resizeMode to CSS object-fit
   if (attributes.resizeMode === 'cover') style.objectFit = 'cover';
   else if (attributes.resizeMode === 'contain') style.objectFit = 'contain';
   else if (attributes.resizeMode === 'stretch') style.objectFit = 'fill';
   else if (attributes.resizeMode === 'center') style.objectFit = 'none';
 
-  return style;
+  return { ...extractViewStyle(node, options), ...style };
 }

package/src/utils/extractTextStyle.ts

@@ -5,6 +5,7 @@ import { defaultAppConfig } from '../types/PreviewConfig';
 import type { ProjectColors } from '../types/Project';
 import { fs, parseSize } from '../size-matters';
 import { parseColor } from './parseColor';
+import { extractViewStyle } from './extractViewStyle';
 
 type ExtractTextStyleOptions = {
   appConfig?: AppConfig;
@@ -45,85 +46,5 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   if (attributes.textAlign)
     style.textAlign = attributes.textAlign as React.CSSProperties['textAlign'];
 
-  // Spacing
-  // Shorthand
-  if (attributes.padding !== undefined) style.padding = attributes.padding;
-  if (attributes.margin !== undefined) style.margin = attributes.margin;
-
-  // Axis shorthands
-  if (attributes.paddingHorizontal !== undefined) {
-    const v = parseSize(attributes.paddingHorizontal);
-    style.paddingLeft = v as React.CSSProperties['paddingLeft'];
-    style.paddingRight = v as React.CSSProperties['paddingRight'];
-  }
-  if (attributes.paddingVertical !== undefined) {
-    const v = parseSize(attributes.paddingVertical);
-    style.paddingTop = v as React.CSSProperties['paddingTop'];
-    style.paddingBottom = v as React.CSSProperties['paddingBottom'];
-  }
-  const marginHorizontalRaw = (attributes as Record<string, unknown>)
-    .marginHorizontal as string | number | undefined;
-  if (marginHorizontalRaw !== undefined) {
-    const v = parseSize(marginHorizontalRaw);
-    style.marginLeft = v as React.CSSProperties['marginLeft'];
-    style.marginRight = v as React.CSSProperties['marginRight'];
-  }
-  if (attributes.marginVertical !== undefined) {
-    const v = parseSize(attributes.marginVertical);
-    style.marginTop = v as React.CSSProperties['marginTop'];
-    style.marginBottom = v as React.CSSProperties['marginBottom'];
-  }
-
-  // Edges
-  if (attributes.paddingTop !== undefined)
-    style.paddingTop = parseSize(
-      attributes.paddingTop,
-    ) as React.CSSProperties['paddingTop'];
-  if (attributes.paddingBottom !== undefined)
-    style.paddingBottom = parseSize(
-      attributes.paddingBottom,
-    ) as React.CSSProperties['paddingBottom'];
-  if (attributes.paddingLeft !== undefined)
-    style.paddingLeft = parseSize(
-      attributes.paddingLeft,
-    ) as React.CSSProperties['paddingLeft'];
-  if (attributes.paddingRight !== undefined)
-    style.paddingRight = parseSize(
-      attributes.paddingRight,
-    ) as React.CSSProperties['paddingRight'];
-
-  if (attributes.marginTop !== undefined)
-    style.marginTop = parseSize(
-      attributes.marginTop,
-    ) as React.CSSProperties['marginTop'];
-  if (attributes.marginBottom !== undefined)
-    style.marginBottom = parseSize(
-      attributes.marginBottom,
-    ) as React.CSSProperties['marginBottom'];
-  if (attributes.marginLeft !== undefined)
-    style.marginLeft = parseSize(
-      attributes.marginLeft,
-    ) as React.CSSProperties['marginLeft'];
-  if (attributes.marginRight !== undefined)
-    style.marginRight = parseSize(
-      attributes.marginRight,
-    ) as React.CSSProperties['marginRight'];
-
-  // Decor
-  if (attributes.backgroundColor) {
-    style.backgroundColor =
-      parseColor(attributes.backgroundColor, {
-        projectColors: options.projectColors,
-        appConfig: resolvedAppConfig,
-      }) ?? attributes.backgroundColor;
-  }
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius =
-      attributes.borderRadius as React.CSSProperties['borderRadius'];
-
-  // Dimensions (rare for text but supported by schema)
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
-
-  return style;
+  return { ...extractViewStyle(node, options), ...style };
 }

package/src/utils/extractViewStyle.ts

@@ -5,7 +5,7 @@ import type { ProjectColors } from '../types/Project';
 import { parseSize } from '../size-matters';
 import { parseColor } from './parseColor';
 
-type ExtractViewStyleOptions = {
+export type ExtractViewStyleOptions = {
   appConfig?: AppConfig;
   projectColors?: ProjectColors;
 };
@@ -21,6 +21,10 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     flexDirection: 'column',
   };
   if (!attributes) return style;
+  const isEmptySizeValue = (value: unknown) =>
+    value === undefined ||
+    value === null ||
+    (typeof value === 'string' && value.trim() === '');
   if (scrollable) {
     if (attributes.flexDirection === 'row') {
       style.overflowX = 'auto';
@@ -45,7 +49,7 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     property: K,
     rawValue: string | number | undefined,
   ) => {
-    if (rawValue === undefined) return;
+    if (isEmptySizeValue(rawValue)) return;
     const parsed = parseSize(rawValue);
     style[property] = parsed as React.CSSProperties[K];
   };
@@ -54,44 +58,41 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   setParsedSize('padding', attributes.padding);
   setParsedSize('margin', attributes.margin);
 
-  if (attributes.paddingHorizontal !== undefined) {
+  if (!isEmptySizeValue(attributes.paddingHorizontal)) {
     const parsed = parseSize(attributes.paddingHorizontal);
     style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
     style.paddingRight = parsed as React.CSSProperties['paddingRight'];
   }
-  if (attributes.paddingVertical !== undefined) {
+  if (!isEmptySizeValue(attributes.paddingVertical)) {
     const parsed = parseSize(attributes.paddingVertical);
     style.paddingTop = parsed as React.CSSProperties['paddingTop'];
     style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
   }
 
+  // Explicit per-side paddings should override paddingHorizontal/paddingVertical.
+  setParsedSize('paddingTop', attributes.paddingTop);
+  setParsedSize('paddingBottom', attributes.paddingBottom);
+  setParsedSize('paddingLeft', attributes.paddingLeft);
+  setParsedSize('paddingRight', attributes.paddingRight);
+
   const marginHorizontalRaw = (attributes as Record<string, unknown>)
     .marginHorizontal as string | number | undefined;
-  if (marginHorizontalRaw !== undefined) {
+  if (!isEmptySizeValue(marginHorizontalRaw)) {
     const parsed = parseSize(marginHorizontalRaw);
     style.marginLeft = parsed as React.CSSProperties['marginLeft'];
     style.marginRight = parsed as React.CSSProperties['marginRight'];
   }
 
-  if (attributes.marginVertical !== undefined) {
+  if (!isEmptySizeValue(attributes.marginVertical)) {
     const parsed = parseSize(attributes.marginVertical);
     style.marginTop = parsed as React.CSSProperties['marginTop'];
     style.marginBottom = parsed as React.CSSProperties['marginBottom'];
   }
 
-  setParsedSize('paddingTop', attributes.paddingTop);
-  setParsedSize('paddingBottom', attributes.paddingBottom);
-  setParsedSize('paddingLeft', attributes.paddingLeft);
-  setParsedSize('paddingRight', attributes.paddingRight);
   setParsedSize('marginTop', attributes.marginTop);
   setParsedSize('marginBottom', attributes.marginBottom);
   setParsedSize('marginLeft', attributes.marginLeft);
   setParsedSize('marginRight', attributes.marginRight);
-  console.log('attributes.backgroundColor', attributes.backgroundColor);
-  console.log(
-    'parseColor(attributes.backgroundColor)',
-    parseColor(attributes.backgroundColor),
-  );
   if (attributes.backgroundColor) {
     style.backgroundColor =
       parseColor(attributes.backgroundColor, {
@@ -102,11 +103,15 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   setParsedSize('borderRadius', attributes.borderRadius);
   setParsedSize('width', attributes.width);
   setParsedSize('height', attributes.height);
+  if (attributes.flex !== undefined)
+    style.flex = attributes.flex as React.CSSProperties['flex'];
   if (attributes.position)
     style.position = attributes.position as React.CSSProperties['position'];
   setParsedSize('top', attributes.top);
   setParsedSize('bottom', attributes.bottom);
   setParsedSize('left', attributes.left);
   setParsedSize('right', attributes.right);
+  if (attributes.zIndex !== undefined)
+    style.zIndex = attributes.zIndex as React.CSSProperties['zIndex'];
   return style;
 }

package/src/utils/selection.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react';
+
+export const SELECTED_OUTLINE_STYLE: CSSProperties = {
+  outline: '2px solid #2684FF',
+};
+
+function getNodeKey(value: unknown): string | undefined {
+  if (!value || typeof value !== 'object') return undefined;
+  if (!('key' in value)) return undefined;
+  const key = (value as { key?: unknown }).key;
+  return typeof key === 'string' ? key : undefined;
+}
+
+export function isNodeSelected(args: {
+  previewMode: boolean;
+  current?: unknown;
+  node?: unknown;
+}): boolean {
+  const currentKey = getNodeKey(args.current);
+  const nodeKey = getNodeKey(args.node);
+  return (
+    !!args.previewMode && !!currentKey && !!nodeKey && currentKey === nodeKey
+  );
+}

package/src/utils/useMergedStyle.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import type { CSSProperties } from 'react';
+
+const EMPTY_STYLE: CSSProperties = {};
+
+export function useMergedStyle(
+  base?: CSSProperties,
+  override?: CSSProperties,
+): CSSProperties {
+  return useMemo(() => {
+    if (!base && !override) return EMPTY_STYLE;
+    if (!override) return base ?? EMPTY_STYLE;
+    if (!base) return override;
+    return { ...base, ...override };
+  }, [base, override]);
+}