@developer_tribe/react-builder 1.0.3 → 1.0.5

package/src/components/AttributesEditorPanel.tsx

@@ -1,4 +1,6 @@
-import { AttributesEditor, Node, NodeData, ProjectColors } from '..';
+import AttributesEditor from '../AttributesEditor';
+import type { Node } from '../types/Node';
+import type { ProjectColors } from '../types/Project';
 import { useLogRender } from '../utils/useLogRender';
 import { useRenderStore } from '../store';
 

package/src/components/Builder.tsx

@@ -1,13 +1,11 @@
 import { useCallback, useMemo, useState } from 'react';
+import { allcomponentNames } from '../build-components';
 import {
   isNodeArray,
   isNodeNullOrUndefined,
   isNodeString,
-  Node,
-  NodeData,
-  NodeDefaultAttribute,
-  allcomponentNames,
-} from '..';
+} from '../utils/analyseNode';
+import type { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
 import { Breadcrumb } from './Breadcrumb';
 import { useLogRender } from '../utils/useLogRender';
 import { getDefaultsForType, getPatternByType } from '../utils/patterns';
@@ -41,9 +39,6 @@ function BuilderComponent({
   onMoveChildUp,
   onMoveChildDown,
 }: BuilderEditorComponentProps) {
-  if (isNodeNullOrUndefined(node)) {
-    return <div className="builder__placeholder">Null or undefined</div>;
-  }
   if (isNodeString(node)) {
     return (
       <div className="builder__text">
@@ -105,7 +100,7 @@ function BuilderComponent({
   }
 
   const nodeData = node as NodeData<NodeDefaultAttribute>;
-  const rawChildren = nodeData.children;
+  const rawChildren = nodeData?.children;
   const hasArrayChildren = isNodeArray(rawChildren);
   const children = rawChildren
     ? hasArrayChildren
@@ -195,16 +190,55 @@ export function Builder({
 
   const handleAddChild = useCallback(
     (type: string) => {
-      if (
-        isNodeNullOrUndefined(current) ||
-        isNodeString(current) ||
-        isNodeArray(current)
-      ) {
+      const nextChild = createDefaultNode(type);
+
+      // Root (or selection) can be empty/null-ish: allow creating the first node.
+      if (isNodeNullOrUndefined(current)) {
+        // If the project itself is empty (or a placeholder string), replace it with the first node.
+        if (isNodeNullOrUndefined(data) || isNodeString(data)) {
+          setData(nextChild);
+          setCurrent(nextChild);
+          return;
+        }
+
+        // If the project root is a list, append into it.
+        if (Array.isArray(data)) {
+          const nextList = [...data, nextChild];
+          setData(nextList);
+          setCurrent(nextList);
+          return;
+        }
+
+        // Otherwise default to adding into the root node.
+        const parent = data as NodeData<NodeDefaultAttribute>;
+        const updatedParent: NodeData<NodeDefaultAttribute> = {
+          ...parent,
+          children: appendChild(parent.children, nextChild),
+        };
+        setData(updatedParent);
+        setCurrent(updatedParent);
+        return;
+      }
+
+      // If the root is a list, allow adding to it directly.
+      if (isNodeArray(current)) {
+        const nextList = [...(current as Node[]), nextChild];
+        const updatedRoot = replaceNode(data, current, nextList);
+        setData(updatedRoot);
+        setCurrent(nextList);
+        return;
+      }
+
+      // If the root is a placeholder string, allow replacing it with the first node.
+      if (isNodeString(current)) {
+        if (current === data) {
+          setData(nextChild);
+          setCurrent(nextChild);
+        }
         return;
       }
 
       const parent = current as NodeData<NodeDefaultAttribute>;
-      const nextChild = createDefaultNode(type);
       const updatedParent: NodeData<NodeDefaultAttribute> = {
         ...parent,
         children: appendChild(parent.children, nextChild),
@@ -230,7 +264,11 @@ export function Builder({
     }
     return (current as NodeData<NodeDefaultAttribute>).type ?? null;
   }, [current]);
-  const canAddChild = allowedChildTypes.length > 0;
+  const canAddChild =
+    allowedChildTypes.length > 0 ||
+    data === undefined ||
+    data === null ||
+    (Array.isArray(data) && data.length === 0);
 
   const handleOpenAddModal = useCallback(() => {
     if (!canAddChild) return;
@@ -373,12 +411,16 @@ export function Builder({
   }
 
   function getAllowedChildTypes(parent: Node): string[] {
-    if (
-      isNodeNullOrUndefined(parent) ||
-      isNodeString(parent) ||
-      isNodeArray(parent)
-    )
-      return [];
+    // Treat non-node containers (root empty, root arrays) as "View-like" containers:
+    // allow inserting any component type as a child.
+    if (isNodeNullOrUndefined(parent)) return [...allcomponentNames];
+    if (isNodeArray(parent) && (parent as Node[]).length === 0)
+      return [...allcomponentNames];
+    if (isNodeString(parent)) {
+      // Only allow adding when the string is the root placeholder.
+      return parent === data ? [...allcomponentNames] : [];
+    }
+
     const parentData = parent as NodeData;
     const parentType = parentData.type;
     // Special rule: limit OnboardButtons to OnboardButton only

package/src/components/BuilderButton.tsx

@@ -1,11 +1,6 @@
 import { useRef } from 'react';
-import {
-  isNodeNullOrUndefined,
-  isNodeString,
-  Node,
-  NodeData,
-  NodeDefaultAttribute,
-} from '..';
+import { isNodeNullOrUndefined, isNodeString } from '../utils/analyseNode';
+import type { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
 import { getPatternByType } from '../utils/patterns';
 
 export type BuilderButtonProps = {

package/src/components/BuilderProvider.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import type { Product } from '../paywall/types/paywall-types';
+import type { PaywallBenefits } from '../paywall/types/benefits';
+
+// NOTE: We keep this context intentionally tiny.
+// IMPORTANT: This provider may be mounted once but consumed by multiple `build-components`
+// on the same screen. Keep the value minimal + stable to avoid unnecessary rerenders.
+// In React Native, `products` should be sourced from an IAP wrapper (e.g. `react-native-iap`)
+// and passed in via `params` from the host app.
+export type Products = Product;
+
+export type BuilderProviderParams = {
+  products: Products[];
+  benefits: PaywallBenefits;
+};
+
+type BuilderProviderProps = {
+  params: BuilderProviderParams;
+  children: React.ReactNode;
+};
+
+const BuilderContext = createContext<BuilderProviderParams | undefined>(
+  undefined,
+);
+
+export function BuilderProvider({ params, children }: BuilderProviderProps) {
+  const value = useMemo<BuilderProviderParams>(
+    () => ({
+      products: Array.isArray(params?.products) ? params.products : [],
+      benefits:
+        params?.benefits && typeof params.benefits === 'object'
+          ? (params.benefits as PaywallBenefits)
+          : {},
+    }),
+    [params?.benefits, params?.products],
+  );
+
+  return (
+    <BuilderContext.Provider value={value}>{children}</BuilderContext.Provider>
+  );
+}
+
+export function useBuilderParams(): BuilderProviderParams {
+  return useContext(BuilderContext) ?? { products: [], benefits: {} };
+}

package/src/components/DeviceNavigationBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Device } from '../types/Device';
-import { useMockOSContext } from '../mockOS';
+import { useMockOSContext } from '../mockOS/context/MockOSContextBase';
 
 type DeviceNavigationBarProps = {
   height: number;
@@ -37,7 +37,6 @@ export function DeviceNavigationBar({
     : 'rgba(0, 0, 0, 0.4)';
 
   function handleBackButton() {
-    console.log('handleBackButton', context);
     if (context) {
       const canGoBack = context.goBack();
       // If can't go back, go to launchscreen

package/src/components/EditorHeader.tsx

@@ -1,5 +1,8 @@
 import { useState } from 'react';
-import { Device, getDevices, Node, copyNode } from '..';
+import type { Device } from '../types/Device';
+import type { Node } from '../types/Node';
+import { copyNode } from '../utils/copyNode';
+import { getDevices } from '../utils/getDevices';
 import { useRenderStore } from '../store';
 import { useLogRender } from '../utils/useLogRender';
 import { DeviceButton } from './DeviceButton';
@@ -24,9 +27,14 @@ export function EditorHeader({
   useLogRender('EditorHeader');
   const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
   const copiedNode = useRenderStore((s) => s.copiedNode);
-  const { device: selectedDevice, setDevice } = useRenderStore((s) => ({
+  const {
+    device: selectedDevice,
+    setDevice,
+    setCurrent,
+  } = useRenderStore((s) => ({
     device: s.device,
     setDevice: s.setDevice,
+    setCurrent: s.setCurrent,
   }));
 
   function replaceNode(root: Node, target: Node, next: Node): Node {
@@ -67,6 +75,11 @@ export function EditorHeader({
       copiedNode: null,
     });
     setEditorData(updated);
+    //TODO: current and editor must be sync!! and tested more
+    // Important: selection is stored by reference. After replacing `current` in the tree,
+    // we must point selection to the new (cloned) node reference to keep "current node"
+    // in sync with what’s rendered/edited.
+    setCurrent(cloned);
   };
   return (
     <div