@developer_tribe/react-builder 0.1.17 → 0.1.18

package/dist/types/Node.d.ts

@@ -1,4 +1,4 @@
-export type NodeDefaultAttribute = Record<string, boolean | string | number | null | undefined | string[]>;
+export type NodeDefaultAttribute = Record<string, boolean | string | number | null | undefined | string[] | Record<string, unknown> | Array<Record<string, unknown>>>;
 export type Node<T = NodeDefaultAttribute> = null | undefined | string | {} | Node<T>[] | NodeData<T>;
 export interface NodeData<T = Record<string, unknown>> {
     type: string;

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.17",
+  "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,21 +247,50 @@ function Field({
       />
     );
   }
+  // Legacy support: string[]
   if (type === 'string[]') {
-    const textValue = Array.isArray(value) ? value.join('\n') : '';
+    const arr: string[] = Array.isArray(value) ? value : [];
     return (
-      <textarea
-        rows={4}
-        value={textValue}
-        onChange={(e) => {
-          const lines = e.target.value
-            .split('\n')
-            .map((s) => s.trim())
-            .filter((s) => s.length > 0);
-          onChange(lines.length > 0 ? lines : undefined);
-        }}
-        className="input"
-      />
+      <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 (
@@ -114,6 +334,7 @@ export function AttributesEditor({ node, onChange }: AttributesEditorProps) {
               };
               onChange(next);
             }}
+            componentType={data?.type}
           />
         </React.Fragment>
       ))}

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/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> =

package/src/utils/patterns.ts

@@ -26,6 +26,10 @@ type Pattern = {
     children: unknown;
     attributes: Record<string, string | string[]>;
   };
+  // Optional custom complex types referenced by attributes like "X[]" or "X"
+  // Each entry maps a type name (e.g., "EventObject") to its field schema
+  // where the inner record maps fieldName -> primitive type or enum options
+  types?: Record<string, Record<string, string | string[]>>;
 };
 
 const patterns: Pattern[] = [
@@ -61,3 +65,35 @@ export function getAttributeSchema(
   const p = getPatternByType(type);
   return p?.pattern.attributes;
 }
+
+/**
+ * Returns the schema of a custom complex type declared under a component pattern's `types` block.
+ * For example, OnboardButton.pattern.types.EventObject
+ */
+export function getTypeSchema(
+  componentType?: string | null,
+  typeName?: string | null,
+): Record<string, string | string[]> | undefined {
+  if (!componentType || !typeName) return undefined;
+  const p = getPatternByType(componentType);
+  // Some JSON imports may not type-check "types" so we fallback to any access
+  const types: Record<string, Record<string, string | string[]>> | undefined = (
+    p as unknown as {
+      types?: Record<string, Record<string, string | string[]>>;
+    }
+  )?.types;
+  return types?.[typeName];
+}
+
+/** Utility: returns true if the type name refers to a primitive scalar */
+export function isPrimitiveType(typeName: string): boolean {
+  return (
+    typeName === 'string' || typeName === 'number' || typeName === 'boolean'
+  );
+}
+
+/** Utility: parse `X[]` forms and return the item type if present */
+export function getArrayItemType(typeName: string): string | null {
+  if (typeof typeName !== 'string') return null;
+  return typeName.endsWith('[]') ? typeName.slice(0, -2) : null;
+}