@developer_tribe/react-builder 0.1.31 → 0.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "0.1.31",
+  "version": "0.1.32",
   "type": "module",
   "restricted": true,
   "main": "dist/index.cjs.js",
@@ -45,6 +45,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.4.0",
+    "lottie-react": "^2.4.1",
     "prettier": "^3.6.2",
     "react": "^18.3.1",
     "rimraf": "^6.0.1",

package/scripts/prebuild/utils/createGeneratedProps.js

@@ -7,15 +7,43 @@ import { formatWithPrettier } from './formatWithPrettier.js';
 const isPrimitive = t => t === 'string' || t === 'number' || t === 'boolean';
 const getArrayItem = t =>
   typeof t === 'string' && t.endsWith('[]') ? t.slice(0, -2) : null;
+// Convert a property name like "animation" or "on-press" to PascalCase
+const toPascalCase = s =>
+  String(s)
+    .replace(/([A-Z]+)/g, ' $1')
+    .split(/[^a-zA-Z0-9]+|\s+/)
+    .filter(Boolean)
+    .map(part => part.charAt(0).toUpperCase() + part.slice(1))
+    .join('');
 
 // Convert attribute type spec to TS type. Supports enum arrays, primitives, CustomType, and CustomType[]
-function tsTypeFromAttributeType(attrType, allTypes) {
+// If an enum array is detected, "registerEnumAlias" will be called to create an exported alias
+function tsTypeFromAttributeType(
+  attrType,
+  allTypes,
+  propertyName,
+  registerEnumAlias
+) {
   if (attrType === 'string') return 'string';
   if (attrType === 'number') return 'number';
   if (attrType === 'boolean') return 'boolean';
   if (Array.isArray(attrType)) {
-    const literals = attrType.map(v => JSON.stringify(v)).join(' | ');
-    return literals.length > 0 ? literals : 'string';
+    const rawMembers = attrType;
+    if (rawMembers.length === 0) return 'string';
+    const hasNull = rawMembers.some(v => v === 'null');
+    const nonNullMembers = rawMembers.filter(v => v !== 'null');
+    const nonNullLiteralMembers = nonNullMembers.map(v => JSON.stringify(v));
+
+    // Only null specified
+    if (hasNull && nonNullLiteralMembers.length === 0) return 'null';
+
+    if (typeof registerEnumAlias === 'function' && propertyName) {
+      const alias = registerEnumAlias(propertyName, nonNullLiteralMembers);
+      return hasNull ? `${alias} | null` : alias;
+    }
+    // Fallback if no registrar provided
+    const baseUnion = nonNullLiteralMembers.join(' | ');
+    return hasNull ? `${baseUnion} | null` : baseUnion;
   }
   if (typeof attrType === 'string') {
     const item = getArrayItem(attrType);
@@ -44,11 +72,36 @@ export async function createGeneratedProps(
   const attributes = pattern.attributes || {};
   const allTypes = patternJson.types || {};
 
+  // Collect option type aliases for any enum arrays encountered across attributes and custom types
+  const optionAliases = new Map(); // name -> union (string like `'a' | 'b'`)
+  const registerEnumAlias = (propName, literalMembers) => {
+    const base = `${toPascalCase(propName)}OptionType`;
+    const union = literalMembers.join(' | ');
+    if (!optionAliases.has(base)) {
+      optionAliases.set(base, union);
+      return base;
+    }
+    const existing = optionAliases.get(base);
+    if (existing === union) return base;
+    let i = 2;
+    // find a non-conflicting alias name
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      const candidate = `${base}${i}`;
+      if (!optionAliases.has(candidate)) {
+        optionAliases.set(candidate, union);
+        return candidate;
+      }
+      if (optionAliases.get(candidate) === union) return candidate;
+      i += 1;
+    }
+  };
+
   // 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);
+      const tsType = tsTypeFromAttributeType(t, allTypes, k, registerEnumAlias);
       return `  ${k}?: ${tsType};`;
     });
     return (
@@ -59,7 +112,7 @@ export async function createGeneratedProps(
   });
 
   const attributeLines = Object.entries(attributes).map(([key, t]) => {
-    const tsType = tsTypeFromAttributeType(t, allTypes);
+    const tsType = tsTypeFromAttributeType(t, allTypes, key, registerEnumAlias);
     return `    ${key}?: ${tsType};`;
   });
 
@@ -81,6 +134,12 @@ 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` +
+    // Export per-property option types for enum arrays
+    (optionAliases.size
+      ? Array.from(optionAliases.entries())
+          .map(([name, union]) => `export type ${name} = ${union};`)
+          .join('\n') + '\n\n'
+      : '') +
     (customTypeBlocks.length ? customTypeBlocks.join('\n') + '\n' : '') +
     `\n` +
     `export interface ${componentName}PropsGenerated {\n` +

package/src/assets/samples/getSamples.ts

@@ -6,6 +6,8 @@ import vpnOnboard1 from './vpn-onboard-1.json';
 import vpnOnboard2 from './vpn-onboard-2.json';
 import vpnOnboard3 from './vpn-onboard-3.json';
 import vpnOnboard4 from './vpn-onboard-4.json';
+import vpnOnboard5 from './vpn-onboard-5.json';
+import vpnOnboard6 from './vpn-onboard-6.json';
 import { novaToJson } from '../../utils/novaToJson';
 
 export function getSamples(): Project[] {
@@ -14,6 +16,8 @@ export function getSamples(): Project[] {
     { ...vpnOnboard2 } as ProjectBase<unknown>,
     { ...vpnOnboard3 } as ProjectBase<unknown>,
     { ...vpnOnboard4 } as ProjectBase<unknown>,
+    { ...vpnOnboard5 } as ProjectBase<unknown>,
+    { ...vpnOnboard6 } as ProjectBase<unknown>,
   ];
   legacySamples.forEach((sample) => {
     sample.data = novaToJson(sample);
@@ -37,6 +41,8 @@ export function getOnboardSamples(): Project[] {
     vpnOnboard2 as Project,
     vpnOnboard3 as Project,
     vpnOnboard4 as Project,
+    vpnOnboard5 as Project,
+    vpnOnboard6 as Project,
   ];
   legacySamples.forEach((sample) => {
     sample.data = novaToJson(sample);