@developer_tribe/react-builder 1.2.46 → 1.2.48

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,8 @@ 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';
+import { useRenderStore } from '../store';
 
 type FieldProps = {
   name: string;
@@ -24,6 +26,7 @@ type FieldProps = {
   viewAttributes?: Partial<ViewPropsGenerated['attributes']>;
   label?: React.ReactNode;
   preferredScale?: PreferredScale;
+  projectOptions?: ProjectOptions;
 };
 
 const layoutFieldNames: LayoutFieldName[] = [
@@ -36,6 +39,40 @@ function isLayoutField(name: string): name is LayoutFieldName {
   return layoutFieldNames.includes(name as LayoutFieldName);
 }
 
+type MediaFieldKind = 'image' | 'lottie' | 'video';
+
+function resolveMediaFieldKind(
+  name: string,
+  componentType?: string,
+  type?: string | string[],
+): MediaFieldKind | null {
+  if (type !== 'string') return null;
+
+  const field = name.trim().toLowerCase();
+  const component = (componentType ?? '').trim().toLowerCase();
+
+  if (field === 'lottie' || field === 'lottie_url') {
+    return 'lottie';
+  }
+
+  if (field === 'video' || field === 'video_url') {
+    return 'video';
+  }
+
+  const isImageLikeField =
+    field === 'src' || field === 'image' || field === 'image_url';
+  const isImageLikeComponent =
+    component.includes('image') ||
+    component.includes('background') ||
+    component.includes('onboard');
+
+  if (isImageLikeField && (!component || isImageLikeComponent)) {
+    return 'image';
+  }
+
+  return null;
+}
+
 export function Field({
   name,
   type,
@@ -47,7 +84,11 @@ export function Field({
   viewAttributes,
   label,
   preferredScale,
+  projectOptions,
 }: FieldProps) {
+  const CustomMediaField = useRenderStore((s) => s.renderMediaField);
+  const mediaFieldKind = resolveMediaFieldKind(name, componentType, type);
+
   if (Array.isArray(type)) {
     if (isLayoutField(name)) {
       const enumOptions = type.filter(
@@ -64,6 +105,11 @@ export function Field({
         />
       );
     }
+    const options =
+      name === 'type'
+        ? Array.from(new Set([...type, ...(projectOptions?.eventTypes ?? [])]))
+        : type;
+
     return (
       <select
         value={value ?? ''}
@@ -71,7 +117,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 +163,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 +338,7 @@ export function Field({
                           layoutContext={layoutContext}
                           viewAttributes={viewAttributes}
                           label={fieldName}
+                          projectOptions={projectOptions}
                         />
                       </div>
                     );
@@ -265,6 +360,7 @@ export function Field({
                         projectColors={projectColors}
                         layoutContext={layoutContext}
                         viewAttributes={viewAttributes}
+                        projectOptions={projectOptions}
                       />
                     </React.Fragment>
                   );
@@ -369,6 +465,7 @@ export function Field({
                     layoutContext={layoutContext}
                     viewAttributes={viewAttributes}
                     label={fieldName}
+                    projectOptions={projectOptions}
                   />
                 </div>
               );
@@ -388,6 +485,7 @@ export function Field({
                   projectColors={projectColors}
                   layoutContext={layoutContext}
                   viewAttributes={viewAttributes}
+                  projectOptions={projectOptions}
                 />
               </React.Fragment>
             );
@@ -496,7 +594,50 @@ export function Field({
         />
       );
     case 'string':
-    case 'description':
+    case 'description': {
+      // 1. Custom media field override (from host app)
+      if (type === 'string' && CustomMediaField && mediaFieldKind) {
+        return (
+          <CustomMediaField
+            value={typeof value === 'string' ? value : undefined}
+            onChange={(next) => onChange(next === '' ? undefined : next)}
+            fieldName={name}
+            componentType={componentType}
+            fieldKind={mediaFieldKind}
+          />
+        );
+      }
+
+      // 2. ProjectOptions-based dropdown
+      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>
+        );
+      }
+
+      // 3. Default text input
       return (
         <input
           type="text"
@@ -507,6 +648,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,12 +70,13 @@ function validationArrayToRules(validation: string[] | undefined): {
 }
 
 /** FormCheckbox wraps Checkbox with RHF; UI and styling come from Checkbox. */
-/* eslint-disable react/prop-types */
+// 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;
 
@@ -105,4 +106,3 @@ export function FormCheckbox({ node }: FormCheckboxComponentProps) {
     />
   );
 }
-/* eslint-enable react/prop-types */

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

@@ -6,6 +6,8 @@ import useNode from '../useNode';
 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');
@@ -13,12 +15,16 @@ export function FormSubmitButton({ node }: FormSubmitButtonComponentProps) {
   const ctx = useContext(formContext);
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
+  const globalNavigate = useGlobalNavigation();
+  const globalCtx = useGlobalContext();
   const attrs = node.attributes;
 
   const runPlacementEvents = usePlacementButtonEvents(attrs?.events, {
     context,
     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 {

package/src/build-components/GlobalProvider/GlobalContext.ts

@@ -0,0 +1,48 @@
+import { createContext, useContext } from 'react';
+import type { NodeData } from '../../types/Node';
+
+/** Supported transition animations when navigating to this page (platform-style names).
+ *  rn stack transition animations
+ */
+export const GLOBAL_PAGE_ANIMATIONS = [
+  'default',
+  'fade',
+  'fade_from_bottom',
+  'fade_from_right',
+  'reveal_from_bottom',
+  'scale_from_center',
+  'slide_from_right',
+  'slide_from_left',
+  'slide_from_bottom',
+  'none',
+] as const;
+
+export type GlobalPageAnimationType = (typeof GLOBAL_PAGE_ANIMATIONS)[number];
+
+export interface GlobalPage {
+  key: string;
+  node: NodeData;
+  /** Condition key: this page is skipped when conditions[skipIf] === true */
+  skipIf?: string;
+  /** Optional transition animation when this page is shown (push/enter). */
+  animation?: string;
+  index: number;
+}
+
+export interface GlobalContextValue {
+  currentPageKey: string;
+  pages: GlobalPage[];
+  pageStack: string[];
+  navigate: (key: string) => void;
+  goNext: () => void;
+  goBack: () => boolean;
+  /** Runtime boolean conditions (e.g. termsAccepted) */
+  conditions: Record<string, boolean>;
+  setCondition: (key: string, value: boolean) => void;
+}
+
+export const GlobalContext = createContext<GlobalContextValue | null>(null);
+
+export function useGlobalContext(): GlobalContextValue | null {
+  return useContext(GlobalContext);
+}

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { GlobalProviderComponentProps } from './GlobalProviderProps.generated';
+import { GlobalContext } from './GlobalContext';
+import { useGlobalProviderLogic } from './useGlobalProviderLogic';
+import RenderNode from '../RenderNode.generated';
+import { useLogRender } from '../../utils/useLogRender';
+
+function GlobalProvider({ node }: GlobalProviderComponentProps) {
+  useLogRender('GlobalProvider');
+
+  const { attributeName, attributeKey, attrs, activePage, contextValue } =
+    useGlobalProviderLogic({ node });
+
+  const animationClass = (() => {
+    const a = activePage?.animation;
+    if (a === 'default') return 'global-provider-page--default';
+    if (!a || a === 'none') return ''; // No modifier: no animation at all
+    return `global-provider-page--${a}`;
+  })();
+
+  return (
+    <GlobalContext.Provider value={contextValue}>
+      <div
+        attribute-name={attributeName}
+        attribute-key={attributeKey}
+        {...(attrs?.testID ? { 'data-testid': attrs.testID } : {})}
+        style={{
+          flex: 1,
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+        }}
+      >
+        {activePage ? (
+          <div
+            key={activePage.key}
+            className={
+              animationClass
+                ? `global-provider-page ${animationClass}`
+                : 'global-provider-page'
+            }
+          >
+            <RenderNode node={activePage.node} />
+          </div>
+        ) : null}
+      </div>
+    </GlobalContext.Provider>
+  );
+}
+
+export default React.memo(GlobalProvider);

package/src/build-components/GlobalProvider/GlobalProviderProps.generated.ts

@@ -0,0 +1,78 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface SkipConditionEntryGenerated {
+  pageKey?: string;
+  conditionKey?: string;
+}
+
+export interface GlobalProviderStyleGenerated {
+  flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
+export interface GlobalProviderPropsGenerated {
+  child: string;
+  attributes: {
+    styles?: GlobalProviderStyleGenerated;
+    scrollable?: boolean;
+    testID?: string;
+    initialPage?: string;
+    persistProgress?: boolean;
+    skipConditions?: SkipConditionEntryGenerated[];
+  };
+}
+
+export interface GlobalProviderComponentProps {
+  node: NodeData<GlobalProviderPropsGenerated['attributes']>;
+}