@developer_tribe/react-builder 0.1.16 → 0.1.18

package/dist/utils/patterns.d.ts

@@ -6,7 +6,17 @@ type Pattern = {
         children: unknown;
         attributes: Record<string, string | string[]>;
     };
+    types?: Record<string, Record<string, string | string[]>>;
 };
 export declare function getPatternByType(type?: string | null): Pattern | undefined;
 export declare function getAttributeSchema(type?: string | null): Record<string, string | string[]> | undefined;
+/**
+ * Returns the schema of a custom complex type declared under a component pattern's `types` block.
+ * For example, OnboardButton.pattern.types.EventObject
+ */
+export declare function getTypeSchema(componentType?: string | null, typeName?: string | null): Record<string, string | string[]> | undefined;
+/** Utility: returns true if the type name refers to a primitive scalar */
+export declare function isPrimitiveType(typeName: string): boolean;
+/** Utility: parse `X[]` forms and return the item type if present */
+export declare function getArrayItemType(typeName: string): string | null;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "type": "module",
   "restricted": true,
   "main": "dist/index.cjs.js",

package/scripts/prebuild/utils/createGeneratedProps.js

@@ -1,8 +1,15 @@
 import path from 'path';
 import { promises as fs } from 'fs';
 import { ensureDir } from './ensureDir.js';
-// inlined from tsTypeFromAttributeType.js
-function tsTypeFromAttributeType(attrType) {
+import { formatWithPrettier } from './formatWithPrettier.js';
+
+// Helpers
+const isPrimitive = t => t === 'string' || t === 'number' || t === 'boolean';
+const getArrayItem = t =>
+  typeof t === 'string' && t.endsWith('[]') ? t.slice(0, -2) : null;
+
+// Convert attribute type spec to TS type. Supports enum arrays, primitives, CustomType, and CustomType[]
+function tsTypeFromAttributeType(attrType, allTypes) {
   if (attrType === 'string') return 'string';
   if (attrType === 'number') return 'number';
   if (attrType === 'boolean') return 'boolean';
@@ -10,9 +17,19 @@ function tsTypeFromAttributeType(attrType) {
     const literals = attrType.map(v => JSON.stringify(v)).join(' | ');
     return literals.length > 0 ? literals : 'string';
   }
+  if (typeof attrType === 'string') {
+    const item = getArrayItem(attrType);
+    if (item) {
+      if (isPrimitive(item)) return `${item}[]`;
+      // Custom type array
+      return `${item}Generated[]`;
+    }
+    if (isPrimitive(attrType)) return attrType;
+    // Custom object type
+    return `${attrType}Generated`;
+  }
   return 'string';
 }
-import { formatWithPrettier } from './formatWithPrettier.js';
 
 export async function createGeneratedProps(
   componentDir,
@@ -25,8 +42,24 @@ export async function createGeneratedProps(
 
   const { pattern, allowUnknownAttributes } = patternJson;
   const attributes = pattern.attributes || {};
+  const allTypes = patternJson.types || {};
+
+  // Emit custom type interfaces if present
+  const customTypeEntries = Object.entries(allTypes);
+  const customTypeBlocks = customTypeEntries.map(([typeName, schema]) => {
+    const fields = Object.entries(schema).map(([k, t]) => {
+      const tsType = tsTypeFromAttributeType(t, allTypes);
+      return `  ${k}?: ${tsType};`;
+    });
+    return (
+      `export interface ${typeName}Generated {\n` +
+      (fields.length ? fields.join('\n') + '\n' : '') +
+      `}\n`
+    );
+  });
+
   const attributeLines = Object.entries(attributes).map(([key, t]) => {
-    const tsType = tsTypeFromAttributeType(t);
+    const tsType = tsTypeFromAttributeType(t, allTypes);
     return `    ${key}?: ${tsType};`;
   });
 
@@ -48,6 +81,8 @@ export async function createGeneratedProps(
     // Re-export a component props helper to avoid repeating the local type in each component file
     `import type { NodeData } from '../../types/Node';\n` +
     `\n` +
+    (customTypeBlocks.length ? customTypeBlocks.join('\n') + '\n' : '') +
+    `\n` +
     `export interface ${componentName}PropsGenerated {\n` +
     `  child: ${normalizedChildTsType};\n` +
     `  attributes: {\n` +

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -116,19 +116,61 @@ async function validatePatternJson(componentDir, componentName) {
     );
   }
 
+  // Helpers for validating custom types
+  const isPrimitive = t => t === 'string' || t === 'number' || t === 'boolean';
+  const hasCustomTypes = typeof data.types === 'object' && data.types != null;
+  const isCustomType = t =>
+    hasCustomTypes &&
+    typeof data.types[t] === 'object' &&
+    data.types[t] != null;
+  const isEnumArray = v =>
+    Array.isArray(v) && v.every(x => typeof x === 'string');
+  const isValidTypeRef = t => {
+    if (typeof t !== 'string') return false;
+    if (isPrimitive(t)) return true;
+    // Support arrays like X[]
+    if (t.endsWith('[]')) {
+      const base = t.slice(0, -2);
+      return isPrimitive(base) || isCustomType(base);
+    }
+    // Custom type name
+    return isCustomType(t);
+  };
+
+  // Validate attributes accept primitive, enum array, or custom type refs (including X[])
   for (const [attrName, attrType] of Object.entries(pattern.attributes)) {
-    const isValidType =
-      typeof attrType === 'string' &&
-      (attrType === 'string' || attrType === 'number' || attrType === 'boolean')
-        ? true
-        : Array.isArray(attrType) && attrType.every(v => typeof v === 'string');
-    if (!isValidType) {
+    const ok =
+      (typeof attrType === 'string' && isValidTypeRef(attrType)) ||
+      isEnumArray(attrType);
+    if (!ok) {
       return fail(
-        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | string[]`
+        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | string[] | CustomType | CustomType[]`
       );
     }
   }
 
+  // If types block exists, validate its shape (only primitives or enum arrays for fields)
+  if (hasCustomTypes) {
+    for (const [typeName, typeSchema] of Object.entries(data.types)) {
+      if (typeof typeSchema !== 'object' || typeSchema == null) {
+        return fail(
+          `[${componentName}] pattern.json -> 'types.${typeName}' must be an object`
+        );
+      }
+      for (const [fieldName, fieldType] of Object.entries(typeSchema)) {
+        const fieldOk =
+          (typeof fieldType === 'string' &&
+            (isPrimitive(fieldType) || isValidTypeRef(fieldType))) ||
+          isEnumArray(fieldType);
+        if (!fieldOk) {
+          return fail(
+            `[${componentName}] pattern.json -> 'types.${typeName}.${fieldName}' must be 'string' | 'number' | 'boolean' | string[] | CustomType | CustomType[]`
+          );
+        }
+      }
+    }
+  }
+
   return data;
 }
 

package/src/AttributesEditor.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import { Node, NodeData, NodeDefaultAttribute } from './types/Node';
 import { isNodeString } from './utils/analyseNode';
-import { getAttributeSchema } from './utils/patterns';
+import {
+  getAttributeSchema,
+  getTypeSchema,
+  getArrayItemType,
+  isPrimitiveType,
+} from './utils/patterns';
 
 type AttributesEditorProps = {
   node: Node;
@@ -13,12 +18,16 @@ function Field({
   type,
   value,
   onChange,
+  componentType,
 }: {
   name: string;
   type: string | string[];
   value: any;
   onChange: (v: any) => void;
+  // The current node's component type is needed to resolve custom type schemas
+  componentType?: string;
 }) {
+  // Render enum selector
   if (Array.isArray(type)) {
     return (
       <select
@@ -35,6 +44,188 @@ function Field({
       </select>
     );
   }
+
+  // Arrays: detect X[] (including string[]/number[]/boolean[]/CustomType[])
+  const itemType = typeof type === 'string' ? getArrayItemType(type) : null;
+  if (itemType) {
+    const arr: any[] = Array.isArray(value) ? value : [];
+
+    // Primitive arrays with add/remove controls
+    if (isPrimitiveType(itemType)) {
+      return (
+        <div style={{ display: 'grid', gap: 8 }}>
+          {arr.map((item, idx) => (
+            <div
+              key={idx}
+              style={{ display: 'flex', gap: 8, alignItems: 'center' }}
+            >
+              {itemType === 'number' ? (
+                <input
+                  type="number"
+                  value={item ?? ''}
+                  onChange={(e) => {
+                    const next = [...arr];
+                    next[idx] =
+                      e.target.value === ''
+                        ? undefined
+                        : Number(e.target.value);
+                    onChange(next);
+                  }}
+                  className="input"
+                  style={{ flex: 1 }}
+                />
+              ) : itemType === 'boolean' ? (
+                <input
+                  type="checkbox"
+                  checked={Boolean(item)}
+                  onChange={(e) => {
+                    const next = [...arr];
+                    next[idx] = e.target.checked;
+                    onChange(next);
+                  }}
+                />
+              ) : (
+                <input
+                  type="text"
+                  value={item ?? ''}
+                  onChange={(e) => {
+                    const next = [...arr];
+                    next[idx] =
+                      e.target.value === '' ? undefined : e.target.value;
+                    onChange(next);
+                  }}
+                  className="input"
+                  style={{ flex: 1 }}
+                />
+              )}
+              <button
+                type="button"
+                onClick={() => {
+                  const next = arr.filter((_, i) => i !== idx);
+                  onChange(next.length ? next : undefined);
+                }}
+              >
+                remove
+              </button>
+            </div>
+          ))}
+          <div>
+            <button
+              type="button"
+              onClick={() => {
+                const next = [
+                  ...arr,
+                  itemType === 'boolean'
+                    ? false
+                    : itemType === 'number'
+                      ? 0
+                      : '',
+                ];
+                onChange(next);
+              }}
+            >
+              add
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    // Object arrays with nested editors
+    const schema = getTypeSchema(componentType, itemType) ?? {};
+    return (
+      <div style={{ display: 'grid', gap: 8 }}>
+        {arr.map((item, idx) => {
+          const obj = (item ?? {}) as Record<string, unknown>;
+          return (
+            <div
+              key={idx}
+              style={{ border: '1px solid #ddd', borderRadius: 6, padding: 8 }}
+            >
+              <div
+                style={{
+                  display: 'grid',
+                  gridTemplateColumns: '1fr 1fr',
+                  gap: 8,
+                }}
+              >
+                {Object.entries(schema).map(([fieldName, fieldType]) => (
+                  <React.Fragment key={fieldName}>
+                    <div style={{ alignSelf: 'center' }}>{fieldName}</div>
+                    <Field
+                      name={fieldName}
+                      type={fieldType}
+                      value={obj?.[fieldName as keyof typeof obj]}
+                      onChange={(val) => {
+                        const next = [...arr];
+                        const nextObj = { ...(obj ?? {}), [fieldName]: val };
+                        next[idx] = nextObj;
+                        onChange(next);
+                      }}
+                      componentType={componentType}
+                    />
+                  </React.Fragment>
+                ))}
+              </div>
+              <div style={{ marginTop: 8 }}>
+                <button
+                  type="button"
+                  onClick={() => {
+                    const next = arr.filter((_, i) => i !== idx);
+                    onChange(next.length ? next : undefined);
+                  }}
+                >
+                  remove
+                </button>
+              </div>
+            </div>
+          );
+        })}
+        <div>
+          <button
+            type="button"
+            onClick={() => {
+              const empty: Record<string, unknown> = {};
+              const next = [...arr, empty];
+              onChange(next);
+            }}
+          >
+            add
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  // Non-array complex object types defined under pattern `types`
+  if (typeof type === 'string' && !isPrimitiveType(type)) {
+    const schema = getTypeSchema(componentType, type);
+    if (schema) {
+      const obj = (value ?? {}) as Record<string, unknown>;
+      return (
+        <div
+          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}
+        >
+          {Object.entries(schema).map(([fieldName, fieldType]) => (
+            <React.Fragment key={fieldName}>
+              <div style={{ alignSelf: 'center' }}>{fieldName}</div>
+              <Field
+                name={fieldName}
+                type={fieldType}
+                value={obj?.[fieldName as keyof typeof obj]}
+                onChange={(val) => {
+                  const nextObj = { ...(obj ?? {}), [fieldName]: val };
+                  onChange(nextObj);
+                }}
+                componentType={componentType}
+              />
+            </React.Fragment>
+          ))}
+        </div>
+      );
+    }
+  }
+
   if (type === 'number') {
     return (
       <input
@@ -56,6 +247,52 @@ function Field({
       />
     );
   }
+  // Legacy support: string[]
+  if (type === 'string[]') {
+    const arr: string[] = Array.isArray(value) ? value : [];
+    return (
+      <div style={{ display: 'grid', gap: 8 }}>
+        {arr.map((item, idx) => (
+          <div
+            key={idx}
+            style={{ display: 'flex', gap: 8, alignItems: 'center' }}
+          >
+            <input
+              type="text"
+              value={item ?? ''}
+              onChange={(e) => {
+                const next = [...arr];
+                next[idx] = e.target.value;
+                onChange(next);
+              }}
+              className="input"
+              style={{ flex: 1 }}
+            />
+            <button
+              type="button"
+              onClick={() => {
+                const next = arr.filter((_, i) => i !== idx);
+                onChange(next.length ? next : undefined);
+              }}
+            >
+              remove
+            </button>
+          </div>
+        ))}
+        <div>
+          <button
+            type="button"
+            onClick={() => {
+              const next = [...arr, ''];
+              onChange(next);
+            }}
+          >
+            add
+          </button>
+        </div>
+      </div>
+    );
+  }
   return (
     <input
       type="text"
@@ -97,6 +334,7 @@ export function AttributesEditor({ node, onChange }: AttributesEditorProps) {
               };
               onChange(next);
             }}
+            componentType={data?.type}
           />
         </React.Fragment>
       ))}

package/src/RenderPage.tsx

@@ -25,17 +25,23 @@ export function RenderPage({
   localication,
   defaultLanguage,
 }: RenderPageProps) {
+  const screenPreviewHeight = 800;
+  // The calculation is correct for maintaining the aspect ratio of the target screen size.
+  // It scales the width proportionally to a fixed preview height.
+  // width = (previewHeight * targetWidth) / targetHeight
+  const height = screenPreviewHeight;
+  const width = (height * screenSize.width) / screenSize.height;
   return (
     <div className="stage-wrapper" style={{ overflow: 'auto' }}>
       <div
         className="stage"
         style={{
-          width: screenSize.width,
-          height: screenSize.height,
-          minWidth: screenSize.width,
-          maxWidth: screenSize.width,
-          minHeight: screenSize.height,
-          maxHeight: screenSize.height,
+          width: width,
+          height: height,
+          minWidth: width,
+          maxWidth: width,
+          minHeight: height,
+          maxHeight: height,
           overflow: 'hidden',
           position: 'relative',
           padding: 4,

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -2,6 +2,12 @@
 
 import type { NodeData } from '../../types/Node';
 
+export interface EventObjectGenerated {
+  type?: 'Permission' | 'Navigate';
+  permission?: string;
+  next_page_key?: string;
+}
+
 export interface OnboardButtonPropsGenerated {
   child: string;
   attributes: {
@@ -10,7 +16,7 @@ export interface OnboardButtonPropsGenerated {
     button_background_color?: string;
     flex?: number;
     targetIndex?: number;
-    events?: string;
+    events?: EventObjectGenerated[];
   };
 }
 

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

@@ -10,7 +10,14 @@
       "button_background_color": "string",
       "flex": "number",
       "targetIndex": "number",
-      "events": "string"
+      "events": "EventObject[]"
+    }
+  },
+  "types": {
+    "EventObject": {
+      "type": ["Permission", "Navigate"],
+      "permission": "string",
+      "next_page_key": "string"
     }
   }
 }

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

@@ -1,8 +1,64 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated';
+import { mainNodeContext } from '../../RenderMainNode';
 
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
-  return String(node?.type ?? 'OnboardFooter');
+  const { localication, defaultLanguage } = useContext(mainNodeContext) ?? {};
+  const t = (key?: string) =>
+    key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
+
+  const text = t(node?.attributes?.textLocalizationKey);
+  const style: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: (node?.attributes?.flexDirection as any) ?? 'column',
+    gap: typeof node?.attributes?.gap === 'number' ? node.attributes.gap : 0,
+    padding:
+      typeof node?.attributes?.padding === 'number'
+        ? node.attributes.padding
+        : undefined,
+    margin:
+      typeof node?.attributes?.margin === 'number'
+        ? node.attributes.margin
+        : undefined,
+    backgroundColor: node?.attributes?.backgroundColor,
+    borderRadius:
+      typeof node?.attributes?.borderRadius === 'number'
+        ? node.attributes.borderRadius
+        : undefined,
+    width:
+      typeof node?.attributes?.width === 'number'
+        ? node.attributes.width
+        : undefined,
+    height:
+      typeof node?.attributes?.height === 'number'
+        ? node.attributes.height
+        : undefined,
+    alignItems: node?.attributes?.alignItems as any,
+    justifyContent: node?.attributes?.justifyContent as any,
+  };
+
+  const linkStyle = (color?: string): React.CSSProperties => ({
+    color,
+    cursor: color ? 'pointer' : undefined,
+  });
+
+  return (
+    <div className="primitive primitive-footer" style={style}>
+      {!!text && <p style={{ color: node?.attributes?.textColor }}>{text}</p>}
+      <div style={{ display: 'flex', gap: 8 }}>
+        {node?.attributes?.linkedWordFirstLocalizationKey && (
+          <span style={linkStyle(node?.attributes?.linkedWordFirstColor)}>
+            {t(node?.attributes?.linkedWordFirstLocalizationKey)}
+          </span>
+        )}
+        {node?.attributes?.linkedWordSecondLocalizationKey && (
+          <span style={linkStyle(node?.attributes?.linkedWordSecondColor)}>
+            {t(node?.attributes?.linkedWordSecondLocalizationKey)}
+          </span>
+        )}
+      </div>
+    </div>
+  );
 }
 
 export default React.memo(OnboardFooter);

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -22,6 +22,14 @@ export interface OnboardFooterPropsGenerated {
     borderRadius?: number;
     width?: number;
     height?: number;
+    textLocalizationKey?: string;
+    textColor?: string;
+    linkedWordFirstLocalizationKey?: string;
+    linkedWordFirstColor?: string;
+    linkedWordFirstPage?: string;
+    linkedWordSecondLocalizationKey?: string;
+    linkedWordSecondColor?: string;
+    linkedWordSecondPage?: string;
   };
 }
 

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

@@ -22,7 +22,15 @@
       "backgroundColor": "string",
       "borderRadius": "number",
       "width": "number",
-      "height": "number"
+      "height": "number",
+      "textLocalizationKey": "string",
+      "textColor": "string",
+      "linkedWordFirstLocalizationKey": "string",
+      "linkedWordFirstColor": "string",
+      "linkedWordFirstPage": "string",
+      "linkedWordSecondLocalizationKey": "string",
+      "linkedWordSecondColor": "string",
+      "linkedWordSecondPage": "string"
     }
   }
 }

package/src/styles/index.scss

@@ -112,3 +112,17 @@
 .embla__dot--selected:after {
   box-shadow: inset 0 0 0 0.2rem var(--text-body);
 }
+.carousel-provider {
+  height: 100%;
+}
+.embla {
+  height: 100%;
+}
+.embla__viewport {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.embla__container {
+  flex: 1;
+}

package/src/types/Node.ts

@@ -1,6 +1,13 @@
 export type NodeDefaultAttribute = Record<
   string,
-  boolean | string | number | null | undefined | string[]
+  | boolean
+  | string
+  | number
+  | null
+  | undefined
+  | string[]
+  | Record<string, unknown>
+  | Array<Record<string, unknown>>
 >;
 
 export type Node<T = NodeDefaultAttribute> =