@developer_tribe/react-builder 1.1.0 → 1.2.0

package/package.json

@@ -1,11 +1,32 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.1.0",
+  "version": "1.2.0",
+  "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"
+    },
+    "./dist/styles.css": "./dist/styles.css",
+    "./dist/background.jpg": "./dist/background.jpg",
+    "./dist/types/PreviewConfig": "./dist/types/PreviewConfig.d.ts"
+  },
   "files": [
     "dist",
     "src",
@@ -13,7 +34,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 +43,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": {
@@ -34,7 +56,8 @@
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
-    "@svgr/rollup": "^8.1.0",
+    "@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,7 +66,7 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "globals": "^16.4.0",
-    "json-edit-react": "^1.29.0",
+    "jest": "^29.7.0",
     "lottie-react": "^2.4.1",
     "prettier": "^3.6.2",
     "react": "^18.3.1",
@@ -54,6 +77,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",
@@ -65,9 +89,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",
-    "json-edit-react": ">=1.29.0"
+    "embla-carousel-react": "^8.6.0"
   },
   "engines": {
     "node": ">=18"
@@ -76,6 +107,10 @@
     "access": "public"
   },
   "dependencies": {
-    "axios": "^1.12.2"
+    "axios": "^1.12.2",
+    "react-toastify": "^11.0.5"
+  },
+  "resolutions": {
+    "strip-ansi": "6.0.1"
   }
 }

package/scripts/migrate-patterns-to-v2.mjs

@@ -0,0 +1,131 @@
+import { promises as fs } from 'fs';
+import path from 'path';
+
+const repoRoot = process.cwd();
+const componentsRoot = path.join(repoRoot, 'src', 'build-components');
+
+function isPlainObject(v) {
+  return typeof v === 'object' && v !== null && !Array.isArray(v);
+}
+
+async function readJson(filePath) {
+  const raw = await fs.readFile(filePath, 'utf8');
+  return JSON.parse(raw);
+}
+
+async function writeJson(filePath, data) {
+  const next = JSON.stringify(data, null, 2) + '\n';
+  await fs.writeFile(filePath, next, 'utf8');
+}
+
+function getObjectKeysSafe(v) {
+  return isPlainObject(v) ? Object.keys(v) : [];
+}
+
+function buildStyleKeySet({ viewPatternJson, textPatternJson }) {
+  const viewKeys = getObjectKeysSafe(viewPatternJson?.pattern?.attributes);
+  const textKeys = getObjectKeysSafe(textPatternJson?.pattern?.attributes);
+  return new Set([...viewKeys, ...textKeys]);
+}
+
+function migratePatternJson(componentName, data, styleKeys) {
+  if (!isPlainObject(data)) {
+    throw new Error(`[${componentName}] pattern.json is not an object`);
+  }
+
+  // schemaVersion: 2
+  data.schemaVersion = 2;
+
+  // allowUnknownAttributes removed in schema v2
+  if ('allowUnknownAttributes' in data) delete data.allowUnknownAttributes;
+
+  if (!isPlainObject(data.pattern)) {
+    throw new Error(`[${componentName}] missing 'pattern' object`);
+  }
+
+  // Move pattern.defaults -> root defaults (keep behavior consistent)
+  const patternDefaults = isPlainObject(data.pattern.defaults)
+    ? data.pattern.defaults
+    : undefined;
+  if (patternDefaults) {
+    delete data.pattern.defaults;
+    data.defaults = {
+      ...(isPlainObject(data.defaults) ? data.defaults : {}),
+      ...patternDefaults,
+    };
+  }
+
+  // meta.attributes -> meta.styles
+  if (isPlainObject(data.meta)) {
+    if (isPlainObject(data.meta.attributes) && !isPlainObject(data.meta.styles)) {
+      data.meta.styles = data.meta.attributes;
+      delete data.meta.attributes;
+    }
+  }
+
+  // Normalize defaults: move known "style-ish" keys into defaults.style
+  if (isPlainObject(data.defaults)) {
+    const defaults = data.defaults;
+    const existingStyle = isPlainObject(defaults.style) ? defaults.style : {};
+    const nextStyle = { ...existingStyle };
+    const nextDefaults = { ...defaults };
+
+    for (const [k, v] of Object.entries(defaults)) {
+      if (k === 'style') continue;
+      if (styleKeys.has(k)) {
+        nextStyle[k] = v;
+        delete nextDefaults[k];
+      }
+    }
+
+    if (Object.keys(nextStyle).length > 0) {
+      nextDefaults.style = nextStyle;
+    }
+
+    data.defaults = nextDefaults;
+  }
+
+  return data;
+}
+
+async function main() {
+  const viewPath = path.join(componentsRoot, 'View', 'pattern.json');
+  const textPath = path.join(componentsRoot, 'Text', 'pattern.json');
+  const viewPatternJson = await readJson(viewPath);
+  const textPatternJson = await readJson(textPath);
+  const styleKeys = buildStyleKeySet({ viewPatternJson, textPatternJson });
+
+  const dirents = await fs.readdir(componentsRoot, { withFileTypes: true });
+  const componentDirs = dirents.filter((d) => d.isDirectory());
+
+  const changed = [];
+  for (const d of componentDirs) {
+    const componentName = d.name;
+    const patternPath = path.join(componentsRoot, componentName, 'pattern.json');
+    const exists = await fs
+      .stat(patternPath)
+      .then(() => true)
+      .catch(() => false);
+    if (!exists) continue;
+
+    const before = await readJson(patternPath);
+    const after = migratePatternJson(componentName, before, styleKeys);
+    await writeJson(patternPath, after);
+    changed.push(componentName);
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(
+    `Migrated ${changed.length} pattern.json files to schemaVersion=2: ${changed.join(
+      ', ',
+    )}`,
+  );
+}
+
+main().catch((err) => {
+  // eslint-disable-next-line no-console
+  console.error(err);
+  process.exit(1);
+});
+
+

package/scripts/migrate-samples-to-current.ts

@@ -0,0 +1,79 @@
+import fs from 'fs';
+import path from 'path';
+// NOTE: Keep the `.js` extension so the compiled ESM output runs in Node.
+import { runProjectMigrations } from '../src/migrations/migratePipe.js';
+
+type JsonValue =
+  | null
+  | boolean
+  | number
+  | string
+  | JsonValue[]
+  | { [k: string]: JsonValue };
+
+function isPlainObject(v: unknown): v is Record<string, unknown> {
+  return typeof v === 'object' && v !== null && !Array.isArray(v);
+}
+
+function readJsonFile(filePath: string): unknown {
+  const raw = fs.readFileSync(filePath, 'utf8');
+  return JSON.parse(raw);
+}
+
+function writeJsonFile(filePath: string, value: unknown): void {
+  const json = JSON.stringify(value, null, 2) + '\n';
+  fs.writeFileSync(filePath, json, 'utf8');
+}
+
+function main() {
+  // Resolve from current working directory (expected to be repo root when invoked).
+  const repoRoot = path.resolve(process.cwd());
+
+  const sampleDir = path.join(repoRoot, 'src', 'assets', 'samples');
+  const targets = [
+    'carousel-sample.json',
+    'paywall-1.json',
+    'simple-1.json',
+    'simple-2.json',
+    'unvalidated-crash1.json',
+    'unvalidated-crashcomponent1.json',
+    'unvalidated-builder1.json',
+    'vpn-onboard-1.json',
+    'vpn-onboard-2.json',
+    'vpn-onboard-3.json',
+    'vpn-onboard-4.json',
+    'vpn-onboard-5.json',
+    'vpn-onboard-6.json',
+  ].map(f => path.join(sampleDir, f));
+
+  let changed = 0;
+  for (const filePath of targets) {
+    const before = readJsonFile(filePath);
+    if (!isPlainObject(before)) {
+      throw new Error(`Expected JSON object in ${filePath}`);
+    }
+
+    const { project: after, applied } = runProjectMigrations(before as any);
+
+    const beforeStr = JSON.stringify(before);
+    const afterStr = JSON.stringify(after as unknown as JsonValue);
+    if (beforeStr !== afterStr) {
+      changed++;
+      writeJsonFile(filePath, after);
+      // eslint-disable-next-line no-console
+      console.log(
+        `migrated ${path.relative(repoRoot, filePath)}: ${
+          applied.map(m => m.id).join(', ') || '(none)'
+        }`
+      );
+    } else {
+      // eslint-disable-next-line no-console
+      console.log(`up-to-date ${path.relative(repoRoot, filePath)}`);
+    }
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(`done. changed: ${changed}/${targets.length}`);
+}
+
+main();

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);