@developer_tribe/react-builder 1.0.8 → 1.0.9

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/utils/createGeneratedProps.js

@@ -78,7 +78,7 @@ export async function createGeneratedProps(
   const fileName = `${componentName}Props.generated.ts`;
   const filePath = path.join(componentDir, fileName);
 
-  const { pattern, allowUnknownAttributes } = patternJson;
+  const { pattern } = patternJson;
   const attributes = pattern.attributes || {};
   const allTypes = patternJson.types || {};
 
@@ -126,9 +126,8 @@ export async function createGeneratedProps(
     return `    ${key}?: ${tsType};`;
   });
 
-  const indexSignature = allowUnknownAttributes
-    ? '    [key: string]: string | number | boolean | undefined;\n'
-    : '';
+  // In schema v2 we always allow a nested `style` object (for CSSProperties-like overrides/defaults).
+  const styleLine = `    style?: Record<string, unknown>;`;
 
   const childTsType =
     typeof pattern.children === 'string' ? pattern.children : 'string';
@@ -155,8 +154,8 @@ export async function createGeneratedProps(
     `export interface ${componentName}PropsGenerated {\n` +
     `  child: ${normalizedChildTsType};\n` +
     `  attributes: {\n` +
+    `${styleLine}\n` +
     (attributeLines.length ? attributeLines.join('\n') + '\n' : '') +
-    indexSignature +
     `  };\n` +
     `}\n` +
     `\n` +

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -89,11 +89,6 @@ async function validatePatternJson(componentDir, componentName) {
       `[${componentName}] pattern.json -> 'schemaVersion' must be a number`
     );
   }
-  if (typeof data.allowUnknownAttributes !== 'boolean') {
-    return fail(
-      `[${componentName}] pattern.json -> 'allowUnknownAttributes' must be a boolean`
-    );
-  }
   if (typeof data.pattern !== 'object' || data.pattern == null) {
     return fail(
       `[${componentName}] pattern.json -> 'pattern' must be an object`
@@ -110,12 +105,19 @@ async function validatePatternJson(componentDir, componentName) {
       `[${componentName}] pattern.json -> 'pattern.type' must match the component folder name '${componentName}' (PascalCase).`
     );
   }
-  if (
-    typeof pattern.children !== 'string' &&
-    !Array.isArray(pattern.children)
-  ) {
+  // children spec can only be: node | string | never
+  // - "node" means: Node | Node[]
+  // - "string" means: text node
+  // - "never" means: no children allowed
+  if (typeof pattern.children !== 'string') {
     return fail(
-      `[${componentName}] pattern.json -> 'pattern.children' must be a string or an array`
+      `[${componentName}] pattern.json -> 'pattern.children' must be a string`
+    );
+  }
+  const allowedChildrenKinds = new Set(['node', 'string', 'never']);
+  if (!allowedChildrenKinds.has(pattern.children)) {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.children' must be one of: node | string | never`
     );
   }
   if (typeof pattern.attributes !== 'object' || pattern.attributes == null) {
@@ -298,25 +300,35 @@ async function validatePatternJson(componentDir, componentName) {
       : parentData?.pattern?.children;
 
     const mergedTypes = { ...(parentData.types || {}), ...(data.types || {}) };
+    const parentDefaults = buildDefaultsBlock(parentData);
+    const childDefaults = buildDefaultsBlock(data);
     const mergedDefaults = {
-      ...buildDefaultsBlock(parentData),
-      ...buildDefaultsBlock(data),
+      ...parentDefaults,
+      ...childDefaults,
+      // Deep-merge `defaults.style` so parent style defaults aren't blown away.
+      style: {
+        ...(isPlainObject(parentDefaults?.style) ? parentDefaults.style : {}),
+        ...(isPlainObject(childDefaults?.style) ? childDefaults.style : {}),
+      },
     };
-    const mergedAllowUnknown =
-      typeof data.allowUnknownAttributes === 'boolean'
-        ? data.allowUnknownAttributes
-        : parentData.allowUnknownAttributes;
+    if (Object.keys(mergedDefaults.style || {}).length === 0) {
+      delete mergedDefaults.style;
+    }
 
-    const mergedMetaAttributes = {
-      ...(parentData?.meta?.attributes || {}),
-      ...(data?.meta?.attributes || {}),
+    const parentMetaStyles =
+      (parentData?.meta?.styles || parentData?.meta?.attributes || {}) ?? {};
+    const childMetaStyles =
+      (data?.meta?.styles || data?.meta?.attributes || {}) ?? {};
+    const mergedMetaStyles = {
+      ...(isPlainObject(parentMetaStyles) ? parentMetaStyles : {}),
+      ...(isPlainObject(childMetaStyles) ? childMetaStyles : {}),
     };
     const mergedMeta =
       parentData.meta || data.meta
         ? {
             ...(parentData.meta || {}),
             ...(data.meta || {}),
-            attributes: mergedMetaAttributes,
+            styles: mergedMetaStyles,
           }
         : undefined;
 
@@ -332,7 +344,6 @@ async function validatePatternJson(componentDir, componentName) {
     data = {
       ...parentData,
       ...data,
-      allowUnknownAttributes: mergedAllowUnknown,
       types: mergedTypes,
       defaults: mergedDefaults,
       meta: mergedMeta,

package/scripts/prebuild/utils/validatePatternJson.js

@@ -30,11 +30,6 @@ export async function validatePatternJson(componentDir, componentName) {
       `[${componentName}] pattern.json -> 'schemaVersion' must be a number`
     );
   }
-  if (typeof data.allowUnknownAttributes !== 'boolean') {
-    return fail(
-      `[${componentName}] pattern.json -> 'allowUnknownAttributes' must be a boolean`
-    );
-  }
   if (typeof data.pattern !== 'object' || data.pattern == null) {
     return fail(
       `[${componentName}] pattern.json -> 'pattern' must be an object`
@@ -46,12 +41,19 @@ export async function validatePatternJson(componentDir, componentName) {
       `[${componentName}] pattern.json -> 'pattern.type' must be a string`
     );
   }
-  if (
-    typeof pattern.children !== 'string' &&
-    !Array.isArray(pattern.children)
-  ) {
+  // children spec can only be: node | string | never
+  // - "node" means: Node | Node[]
+  // - "string" means: text node
+  // - "never" means: no children allowed
+  if (typeof pattern.children !== 'string') {
+    return fail(
+      `[${componentName}] pattern.json -> 'pattern.children' must be a string`
+    );
+  }
+  const allowedChildrenKinds = new Set(['node', 'string', 'never']);
+  if (!allowedChildrenKinds.has(pattern.children)) {
     return fail(
-      `[${componentName}] pattern.json -> 'pattern.children' must be a string or an array`
+      `[${componentName}] pattern.json -> 'pattern.children' must be one of: node | string | never`
     );
   }
   if (typeof pattern.attributes !== 'object' || pattern.attributes == null) {

package/src/AttributesEditor.tsx

@@ -31,6 +31,10 @@ type AttributesEditorProps = {
   projectColors?: ProjectColors;
 };
 
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
 type TabId = 'style' | 'container' | 'other';
 
 type TabConfig = {
@@ -111,6 +115,23 @@ export function AttributesEditor({
   const schema = getAttributeSchema(data?.type) ?? {};
   const attributeMeta = getAttributeMeta(data?.type);
   const attributes = (data?.attributes ?? {}) as NodeDefaultAttribute;
+  const styleAttributeKeys = useMemo(() => {
+    // schemaVersion=2 stores style-like props under attributes.style; keep legacy support for flat attrs.
+    const viewSchema = getAttributeSchema('View') ?? {};
+    const textSchema = getAttributeSchema('Text') ?? {};
+    return new Set([...Object.keys(viewSchema), ...Object.keys(textSchema)]);
+  }, []);
+  const getAttributeValue = useCallback(
+    (name: string) => {
+      const direct = (attributes as Record<string, unknown>)?.[name];
+      if (direct !== undefined && direct !== null) return direct;
+      const styleBag = (attributes as any)?.style as
+        | Record<string, unknown>
+        | undefined;
+      return styleBag?.[name];
+    },
+    [attributes],
+  );
   const viewAttributes = useMemo<
     Partial<ViewPropsGenerated['attributes']> | undefined
   >(
@@ -304,16 +325,27 @@ export function AttributesEditor({
 
   const handleAttributeChange = useCallback(
     (name: string, val: unknown) => {
+      const prevAttrs =
+        ((baseData?.attributes ?? {}) as Record<string, unknown>) ?? {};
+      const isStyleKey = styleAttributeKeys.has(name);
+      const nextAttrs: Record<string, unknown> = { ...prevAttrs };
+      if (isStyleKey) {
+        const prevStyle = (
+          isPlainObject(nextAttrs.style) ? nextAttrs.style : {}
+        ) as Record<string, unknown>;
+        nextAttrs.style = { ...prevStyle, [name]: val };
+        // Normalize away legacy flat style keys once edited.
+        if (name in nextAttrs) delete nextAttrs[name];
+      } else {
+        nextAttrs[name] = val;
+      }
       const next: NodeData<NodeDefaultAttribute> = {
         ...baseData,
-        attributes: {
-          ...((baseData?.attributes ?? {}) as NodeDefaultAttribute),
-          [name]: val,
-        },
+        attributes: nextAttrs as NodeDefaultAttribute,
       };
       onChange(next);
     },
-    [baseData, onChange],
+    [baseData, onChange, styleAttributeKeys],
   );
 
   const renderIconTypeField = useCallback(
@@ -336,7 +368,7 @@ export function AttributesEditor({
               borderRadius: 6,
               border: '1px solid #ddd',
               padding: '8px 10px',
-              background: '#fff',
+              background: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
               cursor: 'pointer',
             }}
           >
@@ -422,9 +454,7 @@ export function AttributesEditor({
                 const preferredScale = toPreferredScale(
                   attributeMeta?.[name]?.preferedScale,
                 );
-                const currentValue = (attributes as Record<string, unknown>)[
-                  name
-                ];
+                const currentValue = getAttributeValue(name);
                 const isBoolean = isBooleanFieldType(type);
                 const wrapperClassNames = [
                   'attributes-editor__field-wrapper',
@@ -651,12 +681,12 @@ export function AttributesEditor({
                 <p className="attributes-editor__field-label">{label}</p>
               ) : null}
               {type === 'iconType' ? (
-                renderIconTypeField(name, attributes?.[name])
+                renderIconTypeField(name, getAttributeValue(name))
               ) : (
                 <Field
                   name={name}
                   type={type}
-                  value={attributes?.[name]}
+                  value={getAttributeValue(name)}
                   onChange={(val) => handleAttributeChange(name, val)}
                   componentType={data?.type}
                   projectColors={projectColorsForPicker}

package/src/RenderPage.tsx

@@ -5,6 +5,7 @@ import { RenderNode } from './build-components';
 import { useRenderStore } from './store';
 import { useLogRender } from './utils/useLogRender';
 import { findNodeByKeyNested } from './utils/findNodeByKeyNested';
+import type { NodeData } from './types/Node';
 export type ScreenStyle = {
   light: { backgroundColor: string; color: string; seperatorColor?: string };
   dark: { backgroundColor: string; color: string; seperatorColor?: string };
@@ -15,6 +16,49 @@ interface RenderPageProps {
   onSelectNode?: (node: Node | null) => void;
 }
 
+function isNodeDataLike(value: unknown): value is NodeData {
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    return false;
+  }
+  const v = value as Record<string, unknown>;
+  return typeof v.type === 'string' && 'children' in v;
+}
+
+function isNullish(value: unknown): value is null | undefined {
+  return value === null || value === undefined;
+}
+
+function isString(value: unknown): value is string {
+  return typeof value === 'string';
+}
+
+function isArray(value: unknown): value is unknown[] {
+  return Array.isArray(value);
+}
+
+function isEmptyPlainObject(value: unknown): boolean {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    !Array.isArray(value) &&
+    Object.keys(value as object).length === 0
+  );
+}
+
+function isEmptyPreview(node: Node): boolean {
+  if (isNullish(node) || isEmptyPlainObject(node)) return true;
+  if (isString(node)) return node.trim().length === 0;
+  if (isArray(node)) return node.length === 0;
+  if (!isNodeDataLike(node)) return true;
+
+  const children = node.children as Node;
+  if (isNullish(children) || isEmptyPlainObject(children)) return true;
+  if (isString(children)) return children.trim().length === 0;
+  if (isArray(children)) return children.length === 0;
+  // children is another node object
+  return false;
+}
+
 export function RenderPage({ data, name, onSelectNode }: RenderPageProps) {
   useLogRender('RenderPage');
   const { previewMode, forceRender, setCurrent } = useRenderStore((s) => ({
@@ -23,6 +67,7 @@ export function RenderPage({ data, name, onSelectNode }: RenderPageProps) {
     setCurrent: s.setCurrent,
   }));
   const previewRootRef = useRef<HTMLDivElement | null>(null);
+  const showEmptyState = isEmptyPreview(data);
 
   useEffect(() => {
     if (!previewMode) {
@@ -64,6 +109,16 @@ export function RenderPage({ data, name, onSelectNode }: RenderPageProps) {
     <DeviceMockFrame appName={name}>
       <div className="screen-preview" ref={previewRootRef}>
         <RenderNode node={data} />
+        {showEmptyState && (
+          <div className="rb-empty-preview" aria-hidden="true">
+            <div className="rb-empty-preview__card">
+              <div className="rb-empty-preview__title">Empty screen</div>
+              <div className="rb-empty-preview__hint">
+                Add a component to start
+              </div>
+            </div>
+          </div>
+        )}
       </div>
     </DeviceMockFrame>
   );