@developer_tribe/react-builder 1.2.44-test.1 → 1.2.44-test.2

package/src/build-components/SystemButton/pattern.json

@@ -33,11 +33,13 @@
   },
   "types": {
     "EventObject": {
-      "type": ["Permission", "Navigate", "Placement"],
-      "permission": "string",
+      "type": "$ref:event-constants.eventTypes",
+      "permission": "$ref:event-constants.permissionTypes",
       "navigate_to": "string",
       "targetIndex": "number",
-      "placementKey": "string"
+      "placementKey": "$ref:event-constants.placementKeys",
+      "conditionKey": "$ref:event-constants.conditionKeys",
+      "value": "boolean"
     }
   },
   "meta": {

package/src/build-components/SystemButton/usePlacementButtonEvents.ts

@@ -2,13 +2,15 @@ import { useRef, useCallback } from 'react';
 import type { MockOSContextValue } from '../../mockOS/context/MockOSContextBase';
 import type { PermissionStatus } from '../../mockOS/managers/mockPermissionManager';
 
-/** Event shape shared by SystemButton and OnboardButton. Placement = go to placementKey (onboard/terms/paywall); Navigate = navigate_to or carousel. */
+/** Event shape shared by SystemButton and OnboardButton. Placement = go to placementKey (onboard/terms/paywall); Navigate = navigate_to or carousel; SetCondition = update a global boolean condition. */
 export interface PlacementEventObject {
-  type?: 'Permission' | 'Navigate' | 'Placement';
+  type?: 'Permission' | 'Navigate' | 'Placement' | 'SetCondition';
   permission?: string | null;
   placementKey?: string;
   navigate_to?: string;
   targetIndex?: number;
+  conditionKey?: string;
+  value?: boolean;
 }
 
 export interface UsePlacementButtonEventsOptions {
@@ -24,6 +26,11 @@ export interface UsePlacementButtonEventsOptions {
    * to MockOSContext. Return true if the navigation was handled.
    */
   globalNavigate?: (target: string) => boolean;
+  /**
+   * Optional callback to set a global boolean condition (from GlobalContext).
+   * Used by SetCondition events.
+   */
+  setCondition?: (key: string, value: boolean) => void;
 }
 
 /**
@@ -40,6 +47,7 @@ export function usePlacementButtonEvents(
     requestPermission,
     onNavigateWithoutPlacement,
     globalNavigate,
+    setCondition,
   } = options;
   const handledEventsRef = useRef<PlacementEventObject[]>([]);
 
@@ -47,10 +55,13 @@ export function usePlacementButtonEvents(
    * Attempts to navigate to a target. Tries globalNavigate first (GlobalProvider),
    * then falls back to MockOSContext.
    */
-  function navigateTo(target: string): void {
-    if (globalNavigate?.(target)) return;
-    context?.navigation(target as Parameters<typeof context.navigation>[0]);
-  }
+  const navigateTo = useCallback(
+    (target: string): void => {
+      if (globalNavigate?.(target)) return;
+      context?.navigation(target as Parameters<typeof context.navigation>[0]);
+    },
+    [context, globalNavigate],
+  );
 
   const handleClick = useCallback(async () => {
     const list = events ?? [];
@@ -64,6 +75,9 @@ export function usePlacementButtonEvents(
         const permission = e.permission ?? 'camera';
         await requestPermission(permission);
         handledEventsRef.current.push(e);
+      } else if (e.type === 'SetCondition' && e.conditionKey) {
+        setCondition?.(e.conditionKey, e.value ?? false);
+        handledEventsRef.current.push(e);
       } else if (e.type === 'Placement' && e.placementKey) {
         const target =
           e.placementKey === 'paywall' ? 'paywall' : e.placementKey;
@@ -88,13 +102,12 @@ export function usePlacementButtonEvents(
         }
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     events,
-    context,
     requestPermission,
+    setCondition,
+    navigateTo,
     onNavigateWithoutPlacement,
-    globalNavigate,
   ]);
 
   return handleClick;

package/src/build-components/patterns.generated.ts

@@ -5621,11 +5621,23 @@ export const patterns = [
     },
     types: {
       EventObject: {
-        type: ['Permission', 'Navigate', 'Placement'],
-        permission: 'string',
+        type: ['Permission', 'Navigate', 'Placement', 'SetCondition'],
+        permission: [
+          'notification',
+          'camera',
+          'microphone',
+          'location',
+          'photos',
+          'contacts',
+          'att',
+          'rating',
+          'GDPR',
+        ],
         navigate_to: 'string',
         targetIndex: 'number',
-        placementKey: 'string',
+        placementKey: ['terms', 'onboard', 'paywall', 'subscription', 'home'],
+        conditionKey: ['termsAccepted'],
+        value: 'boolean',
       },
     },
     meta: {
@@ -7748,11 +7760,23 @@ export const patterns = [
     },
     types: {
       EventObject: {
-        type: ['Permission', 'Navigate', 'Placement'],
-        permission: 'string',
+        type: ['Permission', 'Navigate', 'Placement', 'SetCondition'],
+        permission: [
+          'notification',
+          'camera',
+          'microphone',
+          'location',
+          'photos',
+          'contacts',
+          'att',
+          'rating',
+          'GDPR',
+        ],
         navigate_to: 'string',
         targetIndex: 'number',
-        placementKey: 'string',
+        placementKey: ['terms', 'onboard', 'paywall', 'subscription', 'home'],
+        conditionKey: ['termsAccepted'],
+        value: 'boolean',
       },
     },
     meta: {
@@ -16593,11 +16617,23 @@ export const patterns = [
     },
     types: {
       EventObject: {
-        type: ['Permission', 'Navigate', 'Placement'],
-        permission: 'string',
+        type: ['Permission', 'Navigate', 'Placement', 'SetCondition'],
+        permission: [
+          'notification',
+          'camera',
+          'microphone',
+          'location',
+          'photos',
+          'contacts',
+          'att',
+          'rating',
+          'GDPR',
+        ],
         navigate_to: 'string',
         targetIndex: 'number',
-        placementKey: 'string',
+        placementKey: ['terms', 'onboard', 'paywall', 'subscription', 'home'],
+        conditionKey: ['termsAccepted'],
+        value: 'boolean',
       },
     },
   },

package/src/components/AttributesEditorPanel.tsx

@@ -88,6 +88,7 @@ export function AttributesEditorPanel({
         node={nodeForEditor}
         onChange={handleAttributesChange}
         projectColors={projectColors}
+        projectRoot={attributes}
       />
     </div>
   );

package/src/patterns/event-constants.json

@@ -0,0 +1,19 @@
+{
+  "$comment": "Central event constants. Referenced via $ref in pattern.json types blocks. Run 'yarn prebuild' after changes.",
+  "eventTypes": ["Permission", "Navigate", "Placement", "SetCondition"],
+  "placementKeys": ["terms", "onboard", "paywall", "subscription", "home"],
+  "conditionKeys": ["termsAccepted"],
+  "permissionTypes": [
+    "notification",
+    "camera",
+    "microphone",
+    "location",
+    "photos",
+    "contacts",
+    "att",
+    "rating",
+    "GDPR"
+  ],
+  "validationTypes": ["required", "email", "url", "min", "max"],
+  "formFieldNames": ["email", "firstName", "lastName", "phone", "birthday"]
+}

package/src/utils/nodeTree.ts

@@ -1,4 +1,5 @@
 import type { Node, NodeData } from '../types/Node';
+import eventConstants from '../patterns/event-constants.json';
 
 export function deleteNodeFromTree(root: Node, target: Node): Node {
   if (root === null || root === undefined) return root;
@@ -97,3 +98,117 @@ export function findNodeByKey(root: Node, key?: string): Node | null {
 
   return null;
 }
+
+export type ProjectOptions = {
+  pageKeys: string[];
+  conditionKeys: string[];
+  placementKeys: string[];
+  formFieldNames: string[];
+  eventTypes: string[];
+  validationTypes: string[];
+};
+
+/**
+ * Traverses the entire node tree to dynamically discover project-level metadata
+ * (page keys, condition keys, form field names, etc.) and merges them with
+ * central constants from event-constants.json.
+ *
+ * This enables the Attributes Editor to provide a complete list of valid options
+ * for dropdown fields, combining predefined standards with actually used keys
+ * in the current design.
+ */
+export function collectProjectMetadata(root: Node): ProjectOptions {
+  const pageKeys = new Set<string>();
+  const conditionKeys = new Set<string>();
+  const placementKeys = new Set<string>();
+  const formFieldNames = new Set<string>();
+  const eventTypes = new Set<string>();
+
+  function traverse(node: Node) {
+    if (!node || typeof node === 'string') return;
+
+    if (Array.isArray(node)) {
+      node.forEach(traverse);
+      return;
+    }
+
+    const data = node as NodeData;
+    const type = data.type;
+    const attrs = (data.attributes ?? {}) as Record<string, any>;
+
+    // Collect Page Keys
+    if (type === 'GlobalProvider' && Array.isArray(data.children)) {
+      data.children.forEach((child) => {
+        if (typeof child === 'object' && child !== null && 'key' in child) {
+          if (typeof child.key === 'string') pageKeys.add(child.key);
+        }
+      });
+    }
+    if (attrs.pageKey && typeof attrs.pageKey === 'string') {
+      pageKeys.add(attrs.pageKey);
+    }
+
+    // Collect Condition Keys
+    if (attrs.conditionKey && typeof attrs.conditionKey === 'string') {
+      conditionKeys.add(attrs.conditionKey);
+    }
+    if (Array.isArray(attrs.skipConditions)) {
+      attrs.skipConditions.forEach((entry: any) => {
+        if (entry?.conditionKey) conditionKeys.add(entry.conditionKey);
+      });
+    }
+
+    // Collect Placement Keys
+    if (attrs.placementKey && typeof attrs.placementKey === 'string') {
+      placementKeys.add(attrs.placementKey);
+    }
+
+    // Collect Form Field Names
+    if (type.startsWith('Form') && type !== 'FormProvider' && attrs.name) {
+      if (typeof attrs.name === 'string') formFieldNames.add(attrs.name);
+    }
+
+    // Collect from events
+    if (Array.isArray(attrs.events)) {
+      attrs.events.forEach((evt: any) => {
+        if (evt.type && typeof evt.type === 'string') eventTypes.add(evt.type);
+        if (evt.navigate_to) pageKeys.add(evt.navigate_to);
+        if (evt.placementKey) placementKeys.add(evt.placementKey);
+        if (evt.conditionKey) conditionKeys.add(evt.conditionKey);
+      });
+    }
+
+    if (data.children) {
+      traverse(data.children as Node);
+    }
+  }
+
+  traverse(root);
+
+  // Merge with central constants for a complete set of options
+  const result: ProjectOptions = {
+    pageKeys: Array.from(
+      new Set([...pageKeys, ...eventConstants.placementKeys]),
+    ).sort(),
+    conditionKeys: Array.from(
+      new Set([...conditionKeys, ...eventConstants.conditionKeys]),
+    ).sort(),
+    placementKeys: Array.from(
+      new Set([...placementKeys, ...eventConstants.placementKeys]),
+    ).sort(),
+    formFieldNames: Array.from(
+      new Set([
+        ...formFieldNames,
+        ...((eventConstants as any).formFieldNames as string[]),
+      ]),
+    ).sort(),
+    eventTypes: Array.from(
+      new Set([...eventTypes, ...eventConstants.eventTypes]),
+    ).sort(),
+    validationTypes: Array.from(
+      new Set((eventConstants as any).validationTypes as string[]),
+    ).sort(),
+  };
+
+  return result;
+}