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

package/dist/utils/nodeTree.d.ts

@@ -3,3 +3,21 @@ export declare function deleteNodeFromTree(root: Node, target: Node): Node;
 export declare function isNodeRecord(node: Node): node is NodeData;
 export declare function nodeHasChild(parent: NodeData, potentialChild: Node): boolean;
 export declare function findNodeByKey(root: Node, key?: string): Node | 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 declare function collectProjectMetadata(root: Node): ProjectOptions;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.44-test.1",
+  "version": "1.2.44-test.2",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -4,6 +4,52 @@ import { formatWithPrettier } from './formatWithPrettier.js';
 import { fail } from './fail.js';
 import { validateExistingComponentTsx } from './validateExistingComponentTsx.js';
 
+// ── Event Constants ($ref resolution) ────────────────────────────────────────
+// Loads src/patterns/event-constants.json once and resolves "$ref:key" strings
+// in pattern.json `types` blocks to their corresponding arrays.
+
+let _eventConstants = null;
+async function loadEventConstants(paths) {
+  if (_eventConstants) return _eventConstants;
+  const constantsPath = path.join(paths.PATTERNS_ROOT, 'event-constants.json');
+  const exists = await fs
+    .stat(constantsPath)
+    .then(() => true)
+    .catch(() => false);
+  if (!exists) {
+    _eventConstants = {};
+    return _eventConstants;
+  }
+  const raw = await fs.readFile(constantsPath, 'utf8');
+  _eventConstants = JSON.parse(raw);
+  return _eventConstants;
+}
+
+/**
+ * Resolves "$ref:key" tokens in a pattern.json `types` block.
+ * e.g. "$ref:event-constants.permissionTypes" → ["notification", "camera", ...]
+ */
+function resolveRefs(data, constants) {
+  if (!data || typeof data !== 'object') return data;
+  // Deep clone to avoid mutating the original
+  const result = Array.isArray(data) ? [...data] : { ...data };
+  for (const key of Object.keys(result)) {
+    const val = result[key];
+    if (typeof val === 'string' && val.startsWith('$ref:')) {
+      // Format: "$ref:event-constants.permissionTypes"
+      const refPath = val.slice('$ref:'.length);
+      const [fileName, fieldName] = refPath.split('.');
+      const source = fileName === 'event-constants' ? constants : null;
+      if (source && fieldName && Array.isArray(source[fieldName])) {
+        result[key] = source[fieldName];
+      }
+    } else if (val && typeof val === 'object') {
+      result[key] = resolveRefs(val, constants);
+    }
+  }
+  return result;
+}
+
 // single-use: get all entries with filtering
 async function getAllEntriesInComponentsRoot(paths) {
   const { COMPONENTS_ROOT } = paths;
@@ -62,7 +108,7 @@ async function ensureOtherTsExists(paths) {
 }
 
 // single-use: validate pattern.json
-async function validatePatternJson(componentDir, componentName) {
+async function validatePatternJson(componentDir, componentName, paths) {
   const patternPath = path.join(componentDir, 'pattern.json');
   const exists = await fs
     .stat(patternPath)
@@ -85,6 +131,12 @@ async function validatePatternJson(componentDir, componentName) {
     return fail(`Failed to read JSON at ${patternPath}: ${reason}`);
   }
 
+  // Resolve $ref tokens (e.g. in types blocks) before validation
+  if (paths) {
+    const constants = await loadEventConstants(paths);
+    data = resolveRefs(data, constants);
+  }
+
   if (typeof data.schemaVersion !== 'number') {
     return fail(
       `[${componentName}] pattern.json -> 'schemaVersion' must be a number`
@@ -299,6 +351,11 @@ async function validatePatternJson(componentDir, componentName) {
     try {
       const parentContent = await fs.readFile(parentPatternPath, 'utf8');
       parentData = JSON.parse(parentContent);
+      // Resolve $ref tokens in parent data too (e.g. SystemButton has $ref in types)
+      if (paths) {
+        const constants = await loadEventConstants(paths);
+        parentData = resolveRefs(parentData, constants);
+      }
     } catch (error) {
       const reason =
         error instanceof SyntaxError
@@ -531,8 +588,12 @@ async function validatePatternJson(componentDir, componentName) {
 }
 
 // single-use: component-level validation aggregator
-async function validateComponent(componentDir, componentName) {
-  const patternJson = await validatePatternJson(componentDir, componentName);
+async function validateComponent(componentDir, componentName, paths) {
+  const patternJson = await validatePatternJson(
+    componentDir,
+    componentName,
+    paths
+  );
   await validateExistingComponentTsx(componentDir, componentName);
   return { componentDir, componentName, patternJson };
 }
@@ -541,11 +602,14 @@ export async function validateAllComponentsOrThrow(paths) {
   const dirents = await getAllEntriesInComponentsRoot(paths);
   ensureAllEntriesAreFolders(dirents, paths);
 
+  // Pre-load event constants once for $ref resolution across all components
+  await loadEventConstants(paths);
+
   const validated = [];
   for (const dirent of dirents) {
     const componentName = dirent.name;
     const componentDir = path.join(paths.COMPONENTS_ROOT, componentName);
-    const result = await validateComponent(componentDir, componentName);
+    const result = await validateComponent(componentDir, componentName, paths);
     validated.push(result);
   }
   // Ensure fallback renderer exists for unknown component types

package/src/assets/meta.json

@@ -1,4 +1,4 @@
 {
   "supportedProjectVersion": "1.1.2",
-  "reactBuilderVersion": "1.2.44-test.1"
+  "reactBuilderVersion": "1.2.44"
 }

package/src/assets/samples/global-onboard-flow.json

@@ -17,6 +17,7 @@
     },
     "children": {
       "type": "GlobalProvider",
+      "key": "main-global-onboard-flow",
       "attributes": {
         "initialPage": "terms",
         "persistProgress": true,
@@ -45,7 +46,7 @@
                 "description": "Header",
                 "styles": {
                   "padding": 16,
-                  "alignItems": "center",
+                  "alignItems": "stretch",
                   "borderBottomWidth": 1,
                   "borderBottomColor": "THEME_COLORS.LINE",
                   "backgroundColor": "THEME_COLORS.BACKGROUND"
@@ -127,6 +128,11 @@
                         "validationRequired": true,
                         "disableIfUnvalidated": true,
                         "events": [
+                          {
+                            "type": "SetCondition",
+                            "conditionKey": "termsAccepted",
+                            "value": true
+                          },
                           {
                             "type": "Navigate",
                             "placementKey": "onboard"

package/src/assets/samples/terms-and-privacy-no-form.json

@@ -86,7 +86,7 @@
               "events": [
                 {
                   "type": "Navigate",
-                  "placementKey": "onboard"
+                  "navigate_to": "home"
                 }
               ],
               "styles": {

package/src/assets/samples/terms-and-privacy.json

@@ -106,7 +106,7 @@
                   "events": [
                     {
                       "type": "Navigate",
-                      "placementKey": "onboard"
+                      "navigate_to": "home"
                     }
                   ],
                   "styles": {

package/src/attributes-editor/AttributesEditorView.tsx

@@ -81,6 +81,7 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
     loadedFonts,
     markFontLoaded,
     addError,
+    projectOptions,
   } = props;
 
   const headerSection = (
@@ -277,6 +278,7 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
               viewAttributes={viewAttributes}
               label={isBoolean ? label : undefined}
               preferredScale={preferredScale}
+              projectOptions={projectOptions}
             />
           )}
         </div>
@@ -355,6 +357,7 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
                         viewAttributes={viewAttributes}
                         label={isBoolean ? label : undefined}
                         preferredScale={preferredScale}
+                        projectOptions={projectOptions}
                       />
                     )}
                   </div>

package/src/attributes-editor/Field.tsx

@@ -12,6 +12,7 @@ import { Checkbox } from '../components/Checkbox';
 import { LayoutPreviewPicker } from './LayoutPreviewPicker';
 import { SizeField, type PreferredScale } from './SizeField';
 import { LayoutContext, LayoutFieldName, isBooleanFieldType } from './types';
+import type { ProjectOptions } from '../utils/nodeTree';
 
 type FieldProps = {
   name: string;
@@ -24,6 +25,7 @@ type FieldProps = {
   viewAttributes?: Partial<ViewPropsGenerated['attributes']>;
   label?: React.ReactNode;
   preferredScale?: PreferredScale;
+  projectOptions?: ProjectOptions;
 };
 
 const layoutFieldNames: LayoutFieldName[] = [
@@ -47,6 +49,7 @@ export function Field({
   viewAttributes,
   label,
   preferredScale,
+  projectOptions,
 }: FieldProps) {
   if (Array.isArray(type)) {
     if (isLayoutField(name)) {
@@ -64,6 +67,11 @@ export function Field({
         />
       );
     }
+    const options =
+      name === 'type'
+        ? Array.from(new Set([...type, ...(projectOptions?.eventTypes ?? [])]))
+        : type;
+
     return (
       <select
         value={value ?? ''}
@@ -71,7 +79,7 @@ export function Field({
         className="input"
       >
         <option value="">(none)</option>
-        {type.map((opt) => (
+        {options.map((opt) => (
           <option key={opt} value={opt}>
             {opt}
           </option>
@@ -117,6 +125,54 @@ export function Field({
             );
           case 'string':
           case 'description':
+            if (name === 'validation') {
+              const options = projectOptions?.validationTypes ?? [];
+              return (
+                <select
+                  value={itemValue ?? ''}
+                  onChange={(e) => {
+                    const next = [...arr];
+                    next[idx] =
+                      e.target.value === '' ? undefined : e.target.value;
+                    onChange(next);
+                  }}
+                  className="input"
+                  style={{ flex: 1 }}
+                >
+                  <option value="">(none)</option>
+                  {options.map((opt) => (
+                    <option key={opt} value={opt}>
+                      {opt}
+                    </option>
+                  ))}
+                </select>
+              );
+            }
+            if (name === 'type') {
+              const options = projectOptions?.eventTypes ?? [];
+              if (options.length > 0) {
+                return (
+                  <select
+                    value={itemValue ?? ''}
+                    onChange={(e) => {
+                      const next = [...arr];
+                      next[idx] =
+                        e.target.value === '' ? undefined : e.target.value;
+                      onChange(next);
+                    }}
+                    className="input"
+                    style={{ flex: 1 }}
+                  >
+                    <option value="">(none)</option>
+                    {options.map((opt) => (
+                      <option key={opt} value={opt}>
+                        {opt}
+                      </option>
+                    ))}
+                  </select>
+                );
+              }
+            }
             return (
               <input
                 type="text"
@@ -244,6 +300,7 @@ export function Field({
                           layoutContext={layoutContext}
                           viewAttributes={viewAttributes}
                           label={fieldName}
+                          projectOptions={projectOptions}
                         />
                       </div>
                     );
@@ -265,6 +322,7 @@ export function Field({
                         projectColors={projectColors}
                         layoutContext={layoutContext}
                         viewAttributes={viewAttributes}
+                        projectOptions={projectOptions}
                       />
                     </React.Fragment>
                   );
@@ -369,6 +427,7 @@ export function Field({
                     layoutContext={layoutContext}
                     viewAttributes={viewAttributes}
                     label={fieldName}
+                    projectOptions={projectOptions}
                   />
                 </div>
               );
@@ -388,6 +447,7 @@ export function Field({
                   projectColors={projectColors}
                   layoutContext={layoutContext}
                   viewAttributes={viewAttributes}
+                  projectOptions={projectOptions}
                 />
               </React.Fragment>
             );
@@ -496,7 +556,35 @@ export function Field({
         />
       );
     case 'string':
-    case 'description':
+    case 'description': {
+      let options: string[] = [];
+      if (name === 'navigate_to' || name === 'pageKey') {
+        options = projectOptions?.pageKeys ?? [];
+      } else if (name === 'conditionKey') {
+        options = projectOptions?.conditionKeys ?? [];
+      } else if (name === 'placementKey') {
+        options = projectOptions?.placementKeys ?? [];
+      } else if (name === 'name' && componentType?.startsWith('Form')) {
+        options = projectOptions?.formFieldNames ?? [];
+      }
+
+      if (options.length > 0) {
+        return (
+          <select
+            value={value ?? ''}
+            onChange={(e) => onChange(e.target.value || undefined)}
+            className="input"
+          >
+            <option value="">(none)</option>
+            {options.map((opt) => (
+              <option key={opt} value={opt}>
+                {opt}
+              </option>
+            ))}
+          </select>
+        );
+      }
+
       return (
         <input
           type="text"
@@ -507,6 +595,7 @@ export function Field({
           className="input"
         />
       );
+    }
     case 'title':
       return (
         <input

package/src/attributes-editor/attributesEditorModelTypes.ts

@@ -3,6 +3,7 @@ import type { ProjectColors } from '../types/Project';
 import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
 import type { Fonts } from '../types/Fonts';
 import type { LayoutContext, SchemaEntry } from './types';
+import type { ProjectOptions } from '../utils/nodeTree';
 
 export type TabId = 'style' | 'container' | 'other';
 
@@ -10,6 +11,7 @@ export type AttributesEditorProps = {
   node: Node;
   onChange: (next: Node) => void;
   projectColors?: ProjectColors;
+  projectRoot?: Node;
 };
 
 export type AttributesEditorTabConfig = {
@@ -60,6 +62,7 @@ export type AttributesEditorModel = {
   projectColorsForPicker?: ProjectColors;
   viewAttributes?: Partial<ViewPropsGenerated['attributes']>;
   layoutContext: LayoutContext;
+  projectOptions: ProjectOptions;
   getAttributeValue: (name: string) => unknown;
   handleAttributeChange: (name: string, val: unknown) => void;
   handleChildrenChange: (val: string) => void;

package/src/attributes-editor/useAttributesEditorModel.ts

@@ -13,6 +13,7 @@ import {
 } from '../utils/patterns';
 import { useRenderStore } from '../store';
 import type { LayoutContext, SchemaEntry } from './types';
+import { collectProjectMetadata } from '../utils/nodeTree';
 import {
   buildAttributesEditorEntries,
   findLegacyFlatStyleKeys,
@@ -36,6 +37,7 @@ export function useAttributesEditorModel({
   node,
   onChange,
   projectColors,
+  projectRoot,
 }: AttributesEditorProps): AttributesEditorModel {
   const isInvalidNode = !node || isNodeString(node);
   // Memoize baseData to prevent it from changing on every render
@@ -141,6 +143,11 @@ export function useAttributesEditorModel({
     [projectColors],
   );
 
+  const projectOptions = useMemo(
+    () => collectProjectMetadata(projectRoot || baseData),
+    [projectRoot, baseData],
+  );
+
   const viewAttributes = useMemo<
     Partial<ViewPropsGenerated['attributes']> | undefined
   >(
@@ -428,6 +435,7 @@ export function useAttributesEditorModel({
     projectColorsForPicker,
     viewAttributes,
     layoutContext,
+    projectOptions,
     getAttributeValue,
     handleAttributeChange,
     handleChildrenChange,

package/src/build-components/FormCheckbox/FormCheckbox.tsx

@@ -70,11 +70,13 @@ function validationArrayToRules(validation: string[] | undefined): {
 }
 
 /** FormCheckbox wraps Checkbox with RHF; UI and styling come from Checkbox. */
+// eslint-disable-next-line react/prop-types
 export function FormCheckbox({ node }: FormCheckboxComponentProps) {
   useLogRender('FormCheckbox');
   node = useNode(node);
   const ctx = useContext(formContext);
-  const attrs = node.attributes;
+  // eslint-disable-next-line react/prop-types
+  const attrs = node?.attributes;
   const name = attrs?.name as string | undefined;
   const validation = attrs?.validation as string[] | undefined;
 

package/src/build-components/FormSubmitButton/FormSubmitButton.tsx

@@ -7,6 +7,7 @@ import { useLogRender } from '../../utils/useLogRender';
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { usePlacementButtonEvents } from '../SystemButton/usePlacementButtonEvents';
 import { useGlobalNavigation } from '../GlobalProvider/useGlobalNavigation';
+import { useGlobalContext } from '../GlobalProvider/GlobalContext';
 
 export function FormSubmitButton({ node }: FormSubmitButtonComponentProps) {
   useLogRender('FormSubmitButton');
@@ -15,6 +16,7 @@ export function FormSubmitButton({ node }: FormSubmitButtonComponentProps) {
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
   const globalNavigate = useGlobalNavigation();
+  const globalCtx = useGlobalContext();
   const attrs = node.attributes;
 
   const runPlacementEvents = usePlacementButtonEvents(attrs?.events, {
@@ -22,6 +24,7 @@ export function FormSubmitButton({ node }: FormSubmitButtonComponentProps) {
     requestPermission: (permission) =>
       mockPermissionManager.requestPermission(permission),
     globalNavigate,
+    setCondition: globalCtx?.setCondition,
   });
 
   const validationRequired =

package/src/build-components/FormSubmitButton/FormSubmitButtonProps.generated.ts

@@ -2,7 +2,28 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type TypeOptionType = 'Permission' | 'Navigate' | 'Placement';
+export type TypeOptionType =
+  | 'Permission'
+  | 'Navigate'
+  | 'Placement'
+  | 'SetCondition';
+export type PermissionOptionType =
+  | 'notification'
+  | 'camera'
+  | 'microphone'
+  | 'location'
+  | 'photos'
+  | 'contacts'
+  | 'att'
+  | 'rating'
+  | 'GDPR';
+export type PlacementKeyOptionType =
+  | 'terms'
+  | 'onboard'
+  | 'paywall'
+  | 'subscription'
+  | 'home';
+export type ConditionKeyOptionType = 'termsAccepted';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
@@ -22,10 +43,12 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface EventObjectGenerated {
   type?: TypeOptionType;
-  permission?: string;
+  permission?: PermissionOptionType;
   navigate_to?: string;
   targetIndex?: number;
-  placementKey?: string;
+  placementKey?: PlacementKeyOptionType;
+  conditionKey?: ConditionKeyOptionType;
+  value?: boolean;
 }
 
 export interface FormSubmitButtonStyleGenerated {