@developer_tribe/react-builder 1.0.4 → 1.0.5

package/package.json

@@ -1,11 +1,29 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.0.4",
+  "version": "1.0.5",
+  "license": "UNLICENSED",
   "type": "module",
   "restricted": true,
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
+  "react-native": "dist/index.native.cjs.js",
+  "exports": {
+    ".": {
+      "react-native": {
+        "types": "./dist/index.native.d.ts",
+        "default": "./dist/index.native.cjs.js"
+      },
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./native": {
+      "types": "./dist/index.native.d.ts",
+      "default": "./dist/index.native.cjs.js"
+    }
+  },
   "files": [
     "dist",
     "src",
@@ -13,7 +31,7 @@
   ],
   "scripts": {
     "prebuild": "node ./scripts/prebuild/prebuild.js",
-    "build": "rimraf dist && rollup -c",
+    "build": "yarn prebuild && yarn rimraf dist && rollup -c",
     "build:watch": "rollup -c -w",
     "lint": "eslint src",
     "format": "prettier --write .",
@@ -22,6 +40,7 @@
     "example:build": "npm --prefix example run build",
     "example:preview": "npm --prefix example run preview",
     "builder": "node ./scripts/public/bin.js",
+    "test": "jest",
     "release": "yarn prebuild && yarn build && yarn publish --access restricted"
   },
   "bin": {
@@ -35,6 +54,7 @@
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-url": "^8.0.2",
+    "@types/jest": "^29.5.14",
     "@types/node": "^22.7.4",
     "@types/react": "^18.3.9",
     "@types/react-dom": "^18.3.0",
@@ -43,6 +63,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.4.0",
+    "jest": "^29.7.0",
     "lottie-react": "^2.4.1",
     "prettier": "^3.6.2",
     "react": "^18.3.1",
@@ -53,6 +74,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.36.0",
     "sass": "^1.93.2",
+    "ts-jest": "^29.2.6",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.44.1",
     "use-sync-external-store": "^1.6.0",
@@ -64,8 +86,16 @@
     "react-dom": ">=17",
     "react-router-dom": ">=6.0.0"
   },
+  "peerDependenciesMeta": {
+    "react-dom": {
+      "optional": true
+    },
+    "react-router-dom": {
+      "optional": true
+    }
+  },
   "optionalDependencies": {
-    "embla-carousel-react": ">=8.6.0"
+    "embla-carousel-react": "^8.6.0"
   },
   "engines": {
     "node": ">=18"

package/scripts/prebuild/assets/icon.template

@@ -0,0 +1,71 @@
+/* eslint-disable max-lines */
+// NOTE: This file is generated. Do not edit it manually.
+import React from 'react';
+import type { CSSProperties, HTMLAttributes } from 'react';
+import type { IconsType } from '../types/Icons';
+
+{%properties1}
+
+export type IconProps = Omit<HTMLAttributes<HTMLSpanElement>, 'color'> & {
+  iconType: IconsType;
+  size?: number;
+  color?: string;
+  strokeWidth?: number;
+  title?: string;
+  alt?: string;
+};
+
+function applyStrokeWidth(svg: string, strokeWidth: number): string {
+  const w = String(strokeWidth);
+  // Override any explicit stroke-width values (on paths or root)
+  let next = svg.replace(/\bstroke-width="[^"]*"/gi, `stroke-width="${w}"`);
+  // If the SVG had no stroke-width at all, add it to the root <svg> tag
+  if (next === svg) {
+    next = svg.replace(/<svg\b([^>]*?)>/i, (full, attrs) => {
+      if (/\bstroke-width=/i.test(attrs)) return full;
+      return `<svg${attrs} stroke-width="${w}">`;
+    });
+  }
+  return next;
+}
+
+export function Icon({
+  iconType,
+  size = 16,
+  color,
+  strokeWidth,
+  title,
+  alt,
+  style,
+  ...rest
+}: IconProps) {
+  const sizeStyle: CSSProperties = size
+    ? { minWidth: size, minHeight: size, width: size, height: size }
+    : {};
+  const mergedStyle: CSSProperties = {
+    display: 'inline-block',
+    lineHeight: 0,
+    color,
+    ...sizeStyle,
+    ...style,
+  };
+
+  const baseSvg = ICON_SVGS[iconType];
+  const svg =
+    typeof strokeWidth === 'number' && Number.isFinite(strokeWidth)
+      ? applyStrokeWidth(baseSvg, strokeWidth)
+      : baseSvg;
+  if (!svg) return null;
+
+  return (
+    <span
+      role="img"
+      aria-label={alt ?? title ?? iconType}
+      title={title}
+      style={mergedStyle}
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: svg }}
+      {...rest}
+    />
+  );
+}

package/scripts/prebuild/build-components.js

@@ -20,6 +20,11 @@ import {
   // lintNonGeneratedOrThrow,
 } from './utils/index.js';
 
+// TODO: We currently repeat “provider-level” attributes across multiple pattern.json files
+// (e.g. safe-area related flags like `use_safe_area_inset` / `useSafeAreaView`).
+// Consider introducing shared/common attributes (or a shared `Main`/base provider pattern)
+// to keep patterns consistent and avoid drift.
+
 const __filename = url.fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 

package/scripts/prebuild/icon-generator.js

@@ -0,0 +1,206 @@
+#!/usr/bin/env node
+/**
+ * Generates:
+ * - `src/types/Icons.ts`
+ * - `src/components/Icon.generated.tsx`
+ *
+ * Based on SVG files under `src/assets/iconset` and template at
+ * `scripts/prebuild/assets/icon.template`.
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+import url from 'url';
+
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const PROJECT_ROOT = path.resolve(__dirname, '../..');
+const SRC_ROOT = path.join(PROJECT_ROOT, 'src');
+
+const ICONSET_DIR = path.join(SRC_ROOT, 'assets', 'iconset');
+const TEMPLATE_FILE = path.join(__dirname, 'assets', 'icon.template');
+
+const OUTPUT_TYPES_FILE = path.join(SRC_ROOT, 'types', 'Icons.ts');
+const OUTPUT_COMPONENT_FILE = path.join(
+  SRC_ROOT,
+  'components',
+  'Icon.generated.tsx'
+);
+
+function normalizeSvg(svgText) {
+  let svg = String(svgText ?? '').trim();
+  if (!svg) return svg;
+
+  // Remove XML declarations if present
+  svg = svg.replace(/<\?xml[\s\S]*?\?>/g, '').trim();
+
+  // Ensure width/height are controlled by wrapper (100%)
+  // Replace existing width/height attributes on the root <svg>
+  svg = svg.replace(
+    /<svg\b([^>]*?)>/i,
+    (full, attrs) => {
+      let next = attrs;
+      if (/\bwidth="/i.test(next)) {
+        next = next.replace(/\bwidth="[^"]*"/i, 'width="100%"');
+      } else {
+        next += ' width="100%"';
+      }
+      if (/\bheight="/i.test(next)) {
+        next = next.replace(/\bheight="[^"]*"/i, 'height="100%"');
+      } else {
+        next += ' height="100%"';
+      }
+
+      // If root explicitly disables stroke, enable it so path-only icons render (e.g. chevrons)
+      if (/\bstroke="none"/i.test(next)) {
+        next = next.replace(/\bstroke="none"/i, 'stroke="currentColor"');
+      } else if (!/\bstroke="/i.test(next)) {
+        next += ' stroke="currentColor"';
+      } else {
+        // Normalize common stroke color values to currentColor on root
+        next = next
+          .replace(/\bstroke="black"/gi, 'stroke="currentColor"')
+          .replace(/\bstroke="#[0-9a-fA-F]{3,8}"/g, 'stroke="currentColor"')
+          .replace(/\bstroke="rgb\([^"]+\)"/gi, 'stroke="currentColor"');
+      }
+
+      // Normalize common fill color values to currentColor (keep fill="none")
+      next = next
+        .replace(/\bfill="black"/gi, 'fill="currentColor"')
+        .replace(/\bfill="#[0-9a-fA-F]{3,8}"/g, 'fill="currentColor"')
+        .replace(/\bfill="rgb\([^"]+\)"/gi, 'fill="currentColor"');
+
+      return `<svg${next}>`;
+    },
+  );
+
+  // Normalize any remaining explicit colors on child elements (keep "none")
+  svg = svg
+    .replace(/\bstroke="black"/gi, 'stroke="currentColor"')
+    .replace(/\bstroke="#[0-9a-fA-F]{3,8}"/g, 'stroke="currentColor"')
+    .replace(/\bstroke="rgb\([^"]+\)"/gi, 'stroke="currentColor"')
+    .replace(/\bfill="black"/gi, 'fill="currentColor"')
+    .replace(/\bfill="#[0-9a-fA-F]{3,8}"/g, 'fill="currentColor"')
+    .replace(/\bfill="rgb\([^"]+\)"/gi, 'fill="currentColor"');
+
+  return svg.trim();
+}
+
+function toIdentifier(iconName) {
+  // turns "arrow-right" into "arrowRight" etc; still avoids collisions later
+  const parts = iconName
+    .split(/[^a-zA-Z0-9]+/g)
+    .filter(Boolean)
+    .map(p => p.trim());
+  if (parts.length === 0) return 'icon';
+  const [first, ...rest] = parts;
+  const base =
+    first.toLowerCase() +
+    rest
+      .map(w => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+      .join('');
+  const safe = base.replace(/[^a-zA-Z0-9_]/g, '');
+  if (/^[0-9]/.test(safe)) return `icon${safe}`;
+  return safe || 'icon';
+}
+
+function uniqueIdentifiers(iconNames) {
+  const used = new Map();
+  const out = new Map();
+  for (const name of iconNames) {
+    const base = toIdentifier(name);
+    const count = used.get(base) ?? 0;
+    used.set(base, count + 1);
+    out.set(name, count === 0 ? base : `${base}${count + 1}`);
+  }
+  return out;
+}
+
+async function getIconNames() {
+  const entries = await fs.readdir(ICONSET_DIR, { withFileTypes: true });
+  const names = entries
+    .filter(e => e.isFile())
+    .map(e => e.name)
+    .filter(n => n.toLowerCase().endsWith('.svg'))
+    .map(n => n.slice(0, -'.svg'.length));
+
+  names.sort((a, b) => a.localeCompare(b));
+  return names;
+}
+
+function renderIconsTs(iconNames) {
+  const items = iconNames.map(n => `  '${n}',`).join('\n');
+  return `// NOTE: This file is generated. Do not edit it manually.
+//TODO: we might use font-icon or something more optimize
+export const Icons = [
+${items}
+] as const;
+
+export type IconsType = (typeof Icons)[number];
+`;
+}
+
+async function renderTemplate(template, iconNames) {
+  const entries = await Promise.all(
+    iconNames.map(async (iconName) => {
+      const svgPath = path.join(ICONSET_DIR, `${iconName}.svg`);
+      const raw = await fs.readFile(svgPath, 'utf8');
+      const normalized = normalizeSvg(raw);
+      return `  '${iconName}': ${JSON.stringify(normalized)},`;
+    }),
+  );
+
+  const mapBlock =
+    `const ICON_SVGS: Record<IconsType, string> = {\n` +
+    entries.join('\n') +
+    `\n};\n`;
+
+  return template.replace('{%properties1}', `\n${mapBlock}\n`);
+}
+
+async function ensureDirForFile(filePath) {
+  await fs.mkdir(path.dirname(filePath), { recursive: true });
+}
+
+async function writeIfChanged(filePath, content) {
+  let existing = null;
+  try {
+    existing = await fs.readFile(filePath, 'utf8');
+  } catch {
+    // ignore
+  }
+  if (existing === content) return false;
+  await ensureDirForFile(filePath);
+  await fs.writeFile(filePath, content, 'utf8');
+  return true;
+}
+
+export default async function run() {
+  const iconNames = await getIconNames();
+  const template = await fs.readFile(TEMPLATE_FILE, 'utf8');
+
+  const iconsTs = renderIconsTs(iconNames);
+  const iconComponentTsx = await renderTemplate(template, iconNames);
+
+  const wroteTypes = await writeIfChanged(OUTPUT_TYPES_FILE, iconsTs);
+  const wroteComponent = await writeIfChanged(
+    OUTPUT_COMPONENT_FILE,
+    iconComponentTsx
+  );
+
+  return { wroteTypes, wroteComponent, count: iconNames.length };
+}
+
+// Allow running directly: `node scripts/prebuild/icon-generator.js`
+if (
+  process.argv[1] &&
+  path.resolve(process.argv[1]) === path.resolve(__filename)
+) {
+  const res = await run();
+  console.info(
+    `Generated icons (${res.count}) -> types: ${res.wroteTypes ? 'updated' : 'unchanged'}, component: ${
+      res.wroteComponent ? 'updated' : 'unchanged'
+    }`
+  );
+}

package/scripts/prebuild/prebuild.js

@@ -1,9 +1,18 @@
 #!/usr/bin/env node
 
 import run from './build-components.js';
+import runIconGenerator from './icon-generator.js';
 
-console.info('Building components...');
 try {
+  console.info('Generating icons...');
+  const { count, wroteTypes, wroteComponent } = await runIconGenerator();
+  console.info(
+    `Generated icons (${count}) -> types: ${
+      wroteTypes ? 'updated' : 'unchanged'
+    }, component: ${wroteComponent ? 'updated' : 'unchanged'}`
+  );
+
+  console.info('Building components...');
   await run();
 } catch (err) {
   console.error(err?.stack || err?.message || err);

package/scripts/prebuild/utils/createComponentTsx.js

@@ -11,9 +11,12 @@ export async function createComponentTsx(componentDir, componentName) {
   if (exists) return; // Will be validated later
 
   const content =
-    `import React from 'react';\n\n` +
-    `function ${componentName}() {\n` +
-    `  return "hello world";\n` +
+    `import React from 'react';\n` +
+    `import type { ${componentName}ComponentProps } from './${componentName}Props.generated';\n` +
+    `import useNode from '../useNode';\n\n` +
+    `function ${componentName}({ node }: ${componentName}ComponentProps) {\n` +
+    `  node = useNode(node);\n` +
+    `  return null;\n` +
     `}\n\n` +
     `export default React.memo(${componentName});\n`;
   const formatted = await formatWithPrettier(content);

package/scripts/prebuild/utils/createGeneratedProps.js

@@ -9,8 +9,10 @@ const isPrimitive = t =>
   t === 'number' ||
   t === 'boolean' ||
   t === 'color' ||
-  t === 'size';
-const toTsPrimitive = t => (t === 'color' || t === 'size' ? 'string' : t);
+  t === 'size' ||
+  t === 'iconType';
+const toTsPrimitive = t =>
+  t === 'color' || t === 'size' || t === 'iconType' ? 'string' : t;
 const getArrayItem = t =>
   typeof t === 'string' && t.endsWith('[]') ? t.slice(0, -2) : null;
 // Convert a property name like "animation" or "on-press" to PascalCase

package/scripts/prebuild/utils/createRenderNodeGenerated.js

@@ -6,6 +6,10 @@ export async function createRenderNodeGenerated(validated, paths) {
   const { COMPONENTS_ROOT } = paths;
   const targetPath = path.join(COMPONENTS_ROOT, 'RenderNode.generated.tsx');
 
+  const textPatternType =
+    validated.find(v => v.componentName === 'Text')?.patternJson?.pattern
+      ?.type ?? 'Text';
+
   // Build imports for all components discovered
   const componentImports = validated
     .map(
@@ -14,12 +18,30 @@ export async function createRenderNodeGenerated(validated, paths) {
     )
     .join('\n');
 
+  // Import each component's generated prop type so we can build a strongly-typed node union
+  const componentPropTypeImports = validated
+    .map(
+      ({ componentName }) =>
+        `import type { ${componentName}ComponentProps } from './${componentName}/${componentName}Props.generated';`
+    )
+    .join('\n');
+
+  const builderNodeUnion = validated
+    .map(({ componentName, patternJson }) => {
+      const type = patternJson?.pattern?.type;
+      return typeof type === 'string'
+        ? `  | (${componentName}ComponentProps['node'] & { type: ${JSON.stringify(type)} })`
+        : null;
+    })
+    .filter(Boolean)
+    .join('\n');
+
   // Build switch cases from each component's pattern.type
   const cases = validated
     .map(({ componentName, patternJson }) => {
       const type = patternJson?.pattern?.type;
       return typeof type === 'string'
-        ? `    case ${JSON.stringify(type)}:\n      return <${componentName} node={simpleNode} />;`
+        ? `    case ${JSON.stringify(type)}:\n      return <${componentName} node={normalizedNode} />;`
         : null;
     })
     .filter(Boolean)
@@ -28,23 +50,28 @@ export async function createRenderNodeGenerated(validated, paths) {
   const fileContent =
     `/* AUTO-GENERATED FILE - DO NOT EDIT */\n` +
     `import React from 'react';\n\n` +
+    `import { normalizeComponentType } from '../utils/patterns';\n\n` +
+    `import type { Node } from '../types/Node';\n` +
     `import {\n` +
-    `  Node,\n` +
-    `  NodeData,\n` +
     `  isNodeArray,\n` +
     `  isNodeNullOrUndefined,\n` +
     `  isNodeString,\n` +
-    `} from '../index';\n\n` +
+    `} from '../utils/analyseNode';\n\n` +
     `import { other } from './other';\n\n` +
     `// Builder components\n` +
+    componentPropTypeImports +
+    `\n` +
     componentImports +
     `\n\n` +
+    `type BuilderNode =\n` +
+    (builderNodeUnion ? `${builderNodeUnion}\n` : `  never\n`) +
+    `;\n\n` +
     `function RenderNode({ node }: { node: Node }) {\n` +
     `  if (isNodeNullOrUndefined(node)) {\n` +
     `    return null;\n` +
     `  }\n` +
     `  if (isNodeString(node)) {\n` +
-    `    return <Text node={{ children: node as string, type: 'text' }} />;\n` +
+    `    return <Text node={{ children: node as string, type: ${JSON.stringify(textPatternType)} }} />;\n` +
     `  }\n` +
     `  if (isNodeArray(node)) {\n` +
     `    return (\n` +
@@ -55,11 +82,19 @@ export async function createRenderNodeGenerated(validated, paths) {
     `      </>\n` +
     `    );\n` +
     `  }\n\n` +
-    `  const simpleNode = node as NodeData;\n` +
-    `  switch (simpleNode?.type) {\n` +
+    `  const nodeType =\n` +
+    `    typeof (node as { type?: unknown })?.type === 'string'\n` +
+    `      ? (node as { type: string }).type\n` +
+    `      : 'unknown';\n` +
+    `\n` +
+    `  const normalizedType = normalizeComponentType(nodeType) ?? nodeType;\n` +
+    `\n` +
+    `  // Force a stable discriminant so TS can narrow the BuilderNode union.\n` +
+    `  const normalizedNode = { ...(node as any), type: normalizedType } as BuilderNode;\n` +
+    `  switch (normalizedNode.type) {\n` +
     cases +
     `\n    default:\n` +
-    `      return other(simpleNode?.type, node);\n` +
+    `      return other(nodeType, node);\n` +
     `  }\n` +
     `}\n\n` +
     `export default React.memo(RenderNode);\n`;

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -105,6 +105,11 @@ async function validatePatternJson(componentDir, componentName) {
       `[${componentName}] pattern.json -> 'pattern.type' must be a string`
     );
   }
+  if (pattern.type !== componentName) {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.type' must match the component folder name '${componentName}' (PascalCase).`
+    );
+  }
   if (
     typeof pattern.children !== 'string' &&
     !Array.isArray(pattern.children)
@@ -125,7 +130,8 @@ async function validatePatternJson(componentDir, componentName) {
     t === 'number' ||
     t === 'boolean' ||
     t === 'color' ||
-    t === 'size';
+    t === 'size' ||
+    t === 'iconType';
   const isNeverType = t => t === 'never';
   const hasCustomTypes = typeof data.types === 'object' && data.types != null;
   const isCustomType = t =>
@@ -193,12 +199,18 @@ async function validatePatternJson(componentDir, componentName) {
 
   // Resolve chained extends: walk up the chain, detect cycles, merge from base to child
   const componentsRoot = path.dirname(componentDir);
-  const visited = new Set();
+  // Track visited folders and visited pattern.type values separately.
+  // Because we enforce `pattern.type === component folder name` (PascalCase),
+  // mixing them in a single Set can incorrectly flag a "cycle" immediately
+  // when a component extends `View`.
+  const visitedFolders = new Set();
+  const visitedTypes = new Set();
   const ancestorStack = [];
 
   // Track both componentName and current type for cycle detection
-  visited.add(componentName);
-  if (typeof data?.pattern?.type === 'string') visited.add(data.pattern.type);
+  visitedFolders.add(componentName);
+  if (typeof data?.pattern?.type === 'string')
+    visitedTypes.add(data.pattern.type);
 
   let cursor = data;
   // Collect raw ancestors without mutating child yet
@@ -207,12 +219,12 @@ async function validatePatternJson(componentDir, componentName) {
     cursor.pattern.extends.trim().length > 0
   ) {
     const parentName = cursor.pattern.extends.trim();
-    if (visited.has(parentName)) {
+    if (visitedFolders.has(parentName)) {
       return fail(
         `Circular dependency detected in extends chain at '${parentName}'. We don't allow circular dependency.`
       );
     }
-    visited.add(parentName);
+    visitedFolders.add(parentName);
 
     const parentDir = path.join(componentsRoot, parentName);
     const parentDirExists = await fs
@@ -257,14 +269,13 @@ async function validatePatternJson(componentDir, componentName) {
       );
     }
 
-    // Detect cycle by type name too
     const parentType = parentData.pattern.type;
-    if (visited.has(parentType)) {
+    if (visitedTypes.has(parentType)) {
       return fail(
         `Circular dependency detected in extends chain via type '${parentType}'. We don't allow circular dependency.`
       );
     }
-    visited.add(parentType);
+    visitedTypes.add(parentType);
 
     ancestorStack.push(parentData);
     cursor = parentData;

package/scripts/prebuild/utils/validatePatternJson.js

@@ -65,7 +65,8 @@ export async function validatePatternJson(componentDir, componentName) {
     value === 'number' ||
     value === 'boolean' ||
     value === 'color' ||
-    value === 'size';
+    value === 'size' ||
+    value === 'iconType';
 
   for (const [attrName, attrType] of Object.entries(pattern.attributes)) {
     const isValidType =
@@ -76,7 +77,7 @@ export async function validatePatternJson(componentDir, componentName) {
       (Array.isArray(attrType) && attrType.every(v => typeof v === 'string'));
     if (!isValidType) {
       return fail(
-        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | 'color' | string[]`
+        `[${componentName}] pattern.json -> 'pattern.attributes.${attrName}' must be 'string' | 'number' | 'boolean' | 'color' | 'size' | 'iconType' | string[]`
       );
     }
   }