@developer_tribe/react-builder 0.1.25 → 0.1.26

package/dist/types/Device.d.ts

@@ -4,6 +4,22 @@ export interface Device {
     width: number;
     height: number;
     type: 'phone' | 'tablet';
+    /**
+     * Optional physical corner radius of the device screen area in CSS pixels.
+     * Used only for visual preview rounding; has no effect on layout calculations.
+     */
+    radius?: number;
+    /**
+     * Insets in CSS pixels in the order: [top, right, bottom, left]
+     * Represents safe area or system UI overlaps (status bar, home indicator, etc.).
+     */
+    insets?: [number, number, number, number];
+    /**
+     * Navigation bar style depending on platform.
+     * - iOS: 'none' | 'homeIndicator' | 'tabBar' (visual reference only)
+     * - Android: 'threeButtons' | 'gesture' | 'none'
+     */
+    navigationBarType?: 'none' | 'homeIndicator' | 'tabBar' | 'threeButtons' | 'gesture';
     /**
      * Relative importance for generic targeting and display ordering.
      * 1 = highest importance, 100 = lowest importance

package/dist/types/Node.d.ts

@@ -1,8 +1,9 @@
-export type NodeDefaultAttribute = Record<string, boolean | string | number | null | undefined | string[] | Record<string, unknown> | Array<Record<string, unknown>>>;
+export type NodeDefaultAttribute = Record<string, unknown>;
 export type Node<T = NodeDefaultAttribute> = null | undefined | string | {} | Node<T>[] | NodeData<T>;
 export interface NodeData<T = Record<string, unknown>> {
     type: string;
     children: Node<Record<string, unknown>>;
     attributes?: T;
     key?: string;
+    isMain?: boolean;
 }

package/dist/utils/patterns.d.ts

@@ -1,3 +1,4 @@
+import type { NodeDefaultAttribute } from '../types/Node';
 type Pattern = {
     schemaVersion: number;
     allowUnknownAttributes: boolean;
@@ -7,9 +8,12 @@ type Pattern = {
         attributes: Record<string, string | string[]>;
     };
     types?: Record<string, Record<string, string | string[]>>;
+    defaults?: NodeDefaultAttribute;
 };
 export declare function getPatternByType(type?: string | null): Pattern | undefined;
 export declare function getAttributeSchema(type?: string | null): Record<string, string | string[]> | undefined;
+/** Returns defaults block (if any) for a given component type */
+export declare function getDefaultsForType(type?: string | null): NodeDefaultAttribute | undefined;
 /**
  * Returns the schema of a custom complex type declared under a component pattern's `types` block.
  * For example, OnboardButton.pattern.types.EventObject

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "type": "module",
   "restricted": true,
   "main": "dist/index.cjs.js",

package/scripts/prebuild/build-components.js

@@ -13,8 +13,8 @@ import {
   validateExistingComponentTsx,
   createRenderNodeGenerated,
   createBuildComponentsIndex,
-  createGetDefaultsPerComponent,
-  createBuildComponentsRootGetDefaults,
+  // createGetDefaultsPerComponent,
+  // createBuildComponentsRootGetDefaults,
   formatAllSourceFiles,
   // lintNonGeneratedOrThrow,
 } from './utils/index.js';
@@ -38,12 +38,12 @@ async function run() {
     await ensurePropsTs(componentDir, componentName);
     await createComponentTsx(componentDir, componentName);
     await validateExistingComponentTsx(componentDir, componentName);
-    await createGetDefaultsPerComponent(componentDir, componentName);
+    // Removed: per-component getDefaults generation
   }
 
   await createRenderNodeGenerated(validated, paths);
   await createBuildComponentsIndex(validated, paths);
-  await createBuildComponentsRootGetDefaults(validated, paths);
+  // Removed: root getDefaults generator
   await formatAllSourceFiles(paths);
 }
 

package/scripts/prebuild/utils/createBuildComponentsIndex.js

@@ -15,11 +15,8 @@ export async function createBuildComponentsIndex(validated, paths) {
     .join('\n');
 
   const renderNodeExport = `export { default as RenderNode } from './RenderNode.generated';`;
-  const getDefaultsExport = `export { getDefaults } from './getDefaults';`;
 
-  const sections = [renderNodeExport, getDefaultsExport, exportLines]
-    .filter(Boolean)
-    .join('\n\n');
+  const sections = [renderNodeExport, exportLines].filter(Boolean).join('\n\n');
 
   const fileContent =
     `/* AUTO-GENERATED FILE - DO NOT EDIT */\n\n` +

package/scripts/prebuild/utils/createBuildComponentsRootGetDefaults.js

@@ -6,59 +6,6 @@ import { formatWithPrettier } from './formatWithPrettier.js';
  * Creates src/build-components/getDefaults.ts aggregating all component getDefaults
  * with signature: getDefaults<T>(type: T, node: NodeData<List<T>>)
  */
-export async function createBuildComponentsRootGetDefaults(validated, paths) {
-  const { COMPONENTS_ROOT } = paths;
-  const targetPath = path.join(COMPONENTS_ROOT, 'getDefaults.ts');
-
-  const importLines = validated
-    .map(({ componentName }) => {
-      return `import { getDefaults as get${componentName}Defaults } from './${componentName}/getDefaults';`;
-    })
-    .join('\n');
-
-  const typeImports = `import type { ${validated
-    .map(({ componentName }) => `${componentName}PropsGenerated`)
-    .join(', ')} } from './index';`;
-
-  const nodeImport = `import type { NodeData } from '../types/Node';`;
-
-  const typesMap = validated
-    .map(({ componentName, patternJson }) => {
-      const type = patternJson?.pattern?.type;
-      return `  ${JSON.stringify(type)}: ${componentName}PropsGenerated['attributes']`;
-    })
-    .join(';\n');
-
-  const switchCases = validated
-    .map(({ componentName, patternJson }) => {
-      const type = patternJson?.pattern?.type;
-      return `    case ${JSON.stringify(type)}:\n      defaults = get${componentName}Defaults() as Partial<Types[T]>;\n      break;`;
-    })
-    .join('\n');
-
-  const fileContent =
-    `/* AUTO-GENERATED FILE - DO NOT EDIT */\n\n` +
-    `${importLines}\n` +
-    `${typeImports}\n` +
-    `${nodeImport}\n\n` +
-    `export type Types = {\n${typesMap}\n};\n\n` +
-    `export type List<T> = T extends keyof Types ? Types[T] : never;\n\n` +
-    `export function getDefaults<T extends keyof Types>(type: T, node: NodeData<List<T>>): Partial<Types[T]> {\n` +
-    `  let defaults: Partial<Types[T]> = {};\n\n` +
-    `  switch (type as unknown as string) {\n` +
-    `${switchCases}\n` +
-    `    default:\n` +
-    `      defaults = {} as Partial<Types[T]>;\n` +
-    `  }\n\n` +
-    `  if ((node as unknown as { type?: string })?.type !== (type as unknown as string)) {\n` +
-    `    throw new Error(\n` +
-    `      \`getDefaults: node.type mismatch; expected \${String(type)}, received \${(node as unknown as { type?: string })?.type ?? 'undefined'}\`\n` +
-    `    );\n` +
-    `  }\n\n` +
-    `  (node as unknown as { attributes?: unknown }).attributes = defaults as Types[T];\n\n` +
-    `  return defaults;\n` +
-    `}\n`;
-
-  const formatted = await formatWithPrettier(fileContent);
-  await fs.writeFile(targetPath, formatted, 'utf8');
+export async function createBuildComponentsRootGetDefaults() {
+  // intentionally removed; no longer generating build-components/getDefaults.ts
 }

package/scripts/prebuild/utils/createGetDefaultsPerComponent.js

@@ -6,23 +6,6 @@ import { formatWithPrettier } from './formatWithPrettier.js';
  * Creates src/build-components/<Component>/getDefaults.ts
  * This file returns the `default` block from the folder's pattern.json.
  */
-export async function createGetDefaultsPerComponent(
-  componentDir,
-  componentName
-) {
-  const targetPath = path.join(componentDir, 'getDefaults.ts');
-
-  const importPath = `./${componentName}Props.generated`;
-
-  const fileContent =
-    `/* AUTO-GENERATED FILE - DO NOT EDIT */\n\n` +
-    `import pattern from './pattern.json';\n` +
-    `import type { ${componentName}PropsGenerated } from '${importPath}';\n\n` +
-    `export type ${componentName}Defaults = Partial<${componentName}PropsGenerated['attributes']>;\n\n` +
-    `export function getDefaults(): ${componentName}Defaults {\n` +
-    `  return ((pattern as unknown as { default?: unknown })?.default ?? {}) as ${componentName}Defaults;\n` +
-    `}\n`;
-
-  const formatted = await formatWithPrettier(fileContent);
-  await fs.writeFile(targetPath, formatted, 'utf8');
+export async function createGetDefaultsPerComponent() {
+  // intentionally removed; no longer generating per-component getDefaults.ts
 }

package/scripts/prebuild/utils/createRootGetDefaults.js

@@ -5,48 +5,6 @@ import { formatWithPrettier } from './formatWithPrettier.js';
 /**
  * Creates src/getDefaults.ts aggregating all component getDefaults.
  */
-export async function createRootGetDefaults(validated, paths) {
-  const { SRC_ROOT } = paths;
-  const targetPath = path.join(SRC_ROOT, 'getDefaults.ts');
-
-  // Build import lines for all components
-  const importLines = validated
-    .map(({ componentName }) => {
-      return `import { getDefaults as get${componentName}Defaults } from './build-components/${componentName}/getDefaults';`;
-    })
-    .join('\n');
-
-  const typeImports = `import type { ${validated
-    .map(({ componentName }) => `${componentName}PropsGenerated`)
-    .join(', ')} } from './build-components';`;
-
-  const typesMap = validated
-    .map(({ componentName, patternJson }) => {
-      const type = patternJson?.pattern?.type;
-      return `  ${JSON.stringify(type)}: ${componentName}PropsGenerated['attributes']`;
-    })
-    .join(';\n');
-
-  const switchCases = validated
-    .map(({ componentName, patternJson }) => {
-      const type = patternJson?.pattern?.type;
-      return `    case ${JSON.stringify(type)}:\n      return get${componentName}Defaults() as Partial<Types[T]>`;
-    })
-    .join('\n');
-
-  const fileContent =
-    `/* AUTO-GENERATED FILE - DO NOT EDIT */\n\n` +
-    `${importLines}\n` +
-    `${typeImports}\n\n` +
-    `export type Types = {\n${typesMap}\n};\n\n` +
-    `export function getDefaults<T extends keyof Types>(type: T): Partial<Types[T]> {\n` +
-    `  switch (type as unknown as string) {\n` +
-    `${switchCases}\n` +
-    `    default:\n` +
-    `      return {};\n` +
-    `  }\n` +
-    `}\n`;
-
-  const formatted = await formatWithPrettier(fileContent);
-  await fs.writeFile(targetPath, formatted, 'utf8');
+export async function createRootGetDefaults() {
+  // intentionally removed; no longer generating src/getDefaults.ts
 }

package/scripts/prebuild/utils/validateAllComponentsOrThrow.js

@@ -22,7 +22,9 @@ async function getAllEntriesInComponentsRoot(paths) {
           d.name !== 'RenderNode.generated.tsx' &&
           d.name !== 'other.tsx' &&
           d.name !== 'index.ts' &&
-          d.name !== 'getDefaults.ts'
+          d.name !== 'getDefaults.ts' &&
+          d.name !== 'useDefaults.ts' &&
+          d.name !== 'useNode.ts'
       );
     });
 }

package/src/AttributesEditor.tsx

@@ -319,23 +319,27 @@ export function AttributesEditor({ node, onChange }: AttributesEditorProps) {
   }
 
   return (
-    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+    <div style={{}}>
       {entries.map(([name, type]) => (
         <React.Fragment key={name}>
-          <div style={{ alignSelf: 'center' }}>{name}</div>
-          <Field
-            name={name}
-            type={type}
-            value={attributes?.[name]}
-            onChange={(val) => {
-              const next: NodeData<NodeDefaultAttribute> = {
-                ...data,
-                attributes: { ...(attributes ?? {}), [name]: val },
-              };
-              onChange(next);
-            }}
-            componentType={data?.type}
-          />
+          <p style={{ alignSelf: 'center', marginBottom: 4, fontWeight: 700 }}>
+            {name}
+          </p>
+          <div style={{ marginBottom: 16 }}>
+            <Field
+              name={name}
+              type={type}
+              value={attributes?.[name]}
+              onChange={(val) => {
+                const next: NodeData<NodeDefaultAttribute> = {
+                  ...data,
+                  attributes: { ...(attributes ?? {}), [name]: val },
+                };
+                onChange(next);
+              }}
+              componentType={data?.type}
+            />
+          </div>
         </React.Fragment>
       ))}
     </div>

package/src/DeviceMockFrame.tsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Device } from './types/Device';
+
+type DeviceMockFrameProps = {
+  width: number;
+  height: number;
+  isRtl: boolean;
+  screenStyle: {
+    light: { backgroundColor: string; color: string };
+    dark: { backgroundColor: string; color: string };
+  };
+  theme: 'dark' | 'light';
+  children: React.ReactNode;
+  device: Device;
+};
+
+export function DeviceMockFrame({
+  width,
+  height,
+  isRtl,
+  screenStyle,
+  theme,
+  children,
+  device,
+}: DeviceMockFrameProps) {
+  const isDark = theme === 'dark';
+  const [insetTop, insetRight, insetBottom, insetLeft] = device.insets ?? [
+    0, 0, 0, 0,
+  ];
+
+  // Determine bar heights from device properties with platform-aware fallbacks
+  const statusBarHeight = insetTop || (device.platform === 'ios' ? 20 : 24);
+  const navBarHeight = (() => {
+    switch (device.navigationBarType) {
+      case 'none':
+        return 0;
+      case 'homeIndicator':
+        return insetBottom || 6; // minimal visual indicator on iOS
+      case 'gesture':
+        return insetBottom || 24;
+      case 'threeButtons':
+        return insetBottom || 48;
+      case 'tabBar':
+        return insetBottom || 49;
+      default:
+        return insetBottom || 0;
+    }
+  })();
+  const statusBarColor = isDark
+    ? 'rgba(255, 255, 255, 0.08)'
+    : 'rgba(0, 0, 0, 0.06)';
+  const navBarColor = isDark
+    ? 'rgba(255, 255, 255, 0.06)'
+    : 'rgba(0, 0, 0, 0.04)';
+
+  return (
+    <div className="stage-wrapper" style={{ overflow: 'auto' }}>
+      <div
+        className="stage"
+        style={{
+          width: width,
+          height: height,
+          minWidth: width,
+          maxWidth: width,
+          minHeight: height,
+          maxHeight: height,
+          overflow: 'hidden',
+          position: 'relative',
+          padding: 4,
+          direction: isRtl ? 'rtl' : 'ltr',
+          backgroundColor:
+            theme === 'dark'
+              ? screenStyle.dark.backgroundColor
+              : screenStyle.light.backgroundColor,
+          color:
+            theme === 'dark' ? screenStyle.dark.color : screenStyle.light.color,
+          display: 'flex',
+          flexDirection: 'column',
+          borderRadius: device.radius ?? 0,
+        }}
+      >
+        <div
+          className="device-status-bar"
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            height: statusBarHeight,
+            backgroundColor: statusBarColor,
+            flex: '0 0 auto',
+          }}
+        />
+        <div
+          className="device-content"
+          style={{
+            flex: 1,
+            overflow: 'hidden',
+            position: 'relative',
+            paddingLeft: insetLeft,
+            paddingRight: insetRight,
+          }}
+        >
+          {children}
+        </div>
+        <div
+          className="device-navigation-bar"
+          style={{
+            height: navBarHeight,
+            backgroundColor: navBarColor,
+            flex: '0 0 auto',
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default DeviceMockFrame;

package/src/RenderPage.tsx

@@ -1,11 +1,13 @@
 import { Localication } from './types/PreviewConfig';
 import { TargetedScreenSize } from './types/TargetedScreenSize';
 import { RenderMainNode } from './RenderMainNode';
+import { DeviceMockFrame } from './DeviceMockFrame';
 import { Node } from './types/Node';
 import { RenderNode } from './build-components';
+import { Device } from './types/Device';
+import { createContext } from 'react';
 type RenderPageProps = {
   data: Node;
-  screenSize: TargetedScreenSize;
   isRtl: boolean;
   screenStyle: {
     light: { backgroundColor: string; color: string };
@@ -14,45 +16,35 @@ type RenderPageProps = {
   theme: 'dark' | 'light';
   localication: Localication;
   defaultLanguage?: string;
+  device: Device;
 };
-
+export const renderPageContext = createContext<{
+  device: Device;
+} | null>(null);
 export function RenderPage({
   data,
-  screenSize,
   theme,
   isRtl,
   screenStyle,
   localication,
   defaultLanguage,
+  device,
 }: RenderPageProps) {
   const screenPreviewHeight = 800;
   // The calculation is correct for maintaining the aspect ratio of the target screen size.
   // It scales the width proportionally to a fixed preview height.
   // width = (previewHeight * targetWidth) / targetHeight
   const height = screenPreviewHeight;
-  const width = (height * screenSize.width) / screenSize.height;
+  const width = (height * device.width) / device.height;
   return (
-    <div className="stage-wrapper" style={{ overflow: 'auto' }}>
-      <div
-        className="stage"
-        style={{
-          width: width,
-          height: height,
-          minWidth: width,
-          maxWidth: width,
-          minHeight: height,
-          maxHeight: height,
-          overflow: 'hidden',
-          position: 'relative',
-          padding: 4,
-          direction: isRtl ? 'rtl' : 'ltr',
-          backgroundColor:
-            theme === 'dark'
-              ? screenStyle.dark.backgroundColor
-              : screenStyle.light.backgroundColor,
-          color:
-            theme === 'dark' ? screenStyle.dark.color : screenStyle.light.color,
-        }}
+    <renderPageContext.Provider value={{ device }}>
+      <DeviceMockFrame
+        width={width}
+        height={height}
+        isRtl={isRtl}
+        screenStyle={screenStyle}
+        theme={theme}
+        device={device}
       >
         {
           <RenderMainNode
@@ -63,7 +55,7 @@ export function RenderPage({
             <RenderNode node={data} />
           </RenderMainNode>
         }
-      </div>
-    </div>
+      </DeviceMockFrame>
+    </renderPageContext.Provider>
   );
 }