@developer_tribe/react-builder 1.2.7 → 1.2.9

package/src/utils/extractTextStyle.ts

@@ -1,2 +1,4 @@
 export type { ExtractTextStyleOptions } from './extractTextStyle/extractTextStyle';
 export { extractTextStyle } from './extractTextStyle/extractTextStyle';
+export type { ExtractTextStyleNativeOptions } from './extractTextStyle/extractTextStyleNative';
+export { extractTextStyleNative } from './extractTextStyle/extractTextStyleNative';

package/src/utils/extractViewStyle/extractViewStyle.ts

@@ -17,12 +17,10 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   const styleBag = (attributes as any)?.style as
     | Record<string, unknown>
     | undefined;
-  const get = <K extends keyof ViewPropsGenerated['attributes']>(
-    key: K,
-  ): ViewPropsGenerated['attributes'][K] | undefined => {
+  const get = (key: string): unknown => {
     const direct = (attributes as any)?.[key];
     if (direct !== undefined && direct !== null) return direct;
-    return styleBag?.[key as unknown as string] as any;
+    return styleBag?.[key];
   };
 
   const scrollable = (get('scrollable') as any) ?? false;

package/src/utils/extractViewStyle/extractViewStyleNative.ts

@@ -0,0 +1,111 @@
+import { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
+import type { NodeData } from '../../types/Node';
+import type { ProjectColors } from '../../types/Project';
+import { parseSize } from '../../size-matters';
+import { parseColor } from '../parseColor';
+
+export type ExtractViewStyleNativeOptions = {
+  projectColors?: ProjectColors;
+  theme?: string;
+};
+
+/**
+ * Extracts a React Native-friendly style object from node attributes.
+ * Unlike the web/CSS extractor, this avoids DOM-only props like overflowX/overflowY and maxWidth/maxHeight "100%" fallbacks.
+ */
+export function extractViewStyleNative<
+  T extends ViewPropsGenerated['attributes'],
+>(node: NodeData<T>, options: ExtractViewStyleNativeOptions = {}) {
+  const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  const get = (key: string): unknown => {
+    const direct = (attributes as any)?.[key];
+    if (direct !== undefined && direct !== null) return direct;
+    return styleBag?.[key];
+  };
+
+  // RN default is already column, but we keep it explicit for predictable output.
+  const style: Record<string, unknown> = {
+    flexDirection: 'column',
+  };
+  if (!attributes) return style;
+
+  const isEmptySizeValue = (value: unknown) =>
+    value === undefined ||
+    value === null ||
+    (typeof value === 'string' && value.trim() === '');
+
+  // NOTE: "scrollable" is treated as non-style for RN; host apps should use ScrollView/FlatList.
+  // We intentionally do not map it to overflowX/Y.
+
+  const flexDirection = get('flexDirection');
+  if (flexDirection) style.flexDirection = flexDirection as any;
+  const alignItems = get('alignItems');
+  if (alignItems) style.alignItems = alignItems as any;
+  const justifyContent = get('justifyContent');
+  if (justifyContent) style.justifyContent = justifyContent as any;
+
+  const setParsedSize = (property: string, rawValue: unknown) => {
+    if (isEmptySizeValue(rawValue)) return;
+    const parsed = parseSize(rawValue as any);
+    // RN generally expects numbers (dp). We allow percentages for width/height-like props.
+    if (typeof parsed === 'number' || typeof parsed === 'string') {
+      (style as any)[property] = parsed;
+    }
+  };
+
+  // RN supports these "shorthand" props directly.
+  setParsedSize('padding', get('padding'));
+  setParsedSize('paddingHorizontal', get('paddingHorizontal'));
+  setParsedSize('paddingVertical', get('paddingVertical'));
+  setParsedSize('paddingTop', get('paddingTop'));
+  setParsedSize('paddingBottom', get('paddingBottom'));
+  setParsedSize('paddingLeft', get('paddingLeft'));
+  setParsedSize('paddingRight', get('paddingRight'));
+
+  setParsedSize('margin', get('margin'));
+  setParsedSize(
+    'marginHorizontal',
+    (attributes as any)?.marginHorizontal ?? styleBag?.marginHorizontal,
+  );
+  setParsedSize('marginVertical', get('marginVertical'));
+  setParsedSize('marginTop', get('marginTop'));
+  setParsedSize('marginBottom', get('marginBottom'));
+  setParsedSize('marginLeft', get('marginLeft'));
+  setParsedSize('marginRight', get('marginRight'));
+
+  const backgroundColor = get('backgroundColor') as any;
+  if (backgroundColor) {
+    (style as any).backgroundColor =
+      parseColor(backgroundColor, {
+        projectColors: options.projectColors,
+        theme: options.theme,
+      }) ?? backgroundColor;
+  }
+
+  setParsedSize('borderRadius', get('borderRadius'));
+  setParsedSize('width', get('width'));
+  setParsedSize('minWidth', get('minWidth'));
+  setParsedSize('maxWidth', get('maxWidth'));
+  setParsedSize('height', get('height'));
+  setParsedSize('minHeight', get('minHeight'));
+  setParsedSize('maxHeight', get('maxHeight'));
+
+  const flex = get('flex') as any;
+  if (flex !== undefined) (style as any).flex = flex;
+
+  const position = get('position') as any;
+  if (position) (style as any).position = position;
+
+  setParsedSize('top', get('top'));
+  setParsedSize('bottom', get('bottom'));
+  setParsedSize('left', get('left'));
+  setParsedSize('right', get('right'));
+
+  const zIndex = get('zIndex') as any;
+  if (zIndex !== undefined) (style as any).zIndex = zIndex;
+
+  return style;
+}

package/src/utils/extractViewStyle.ts

@@ -1,2 +1,4 @@
 export type { ExtractViewStyleOptions } from './extractViewStyle/extractViewStyle';
 export { extractViewStyle } from './extractViewStyle/extractViewStyle';
+export type { ExtractViewStyleNativeOptions } from './extractViewStyle/extractViewStyleNative';
+export { extractViewStyleNative } from './extractViewStyle/extractViewStyleNative';

package/src/utils/getMeta.ts

@@ -0,0 +1,15 @@
+import metaJson from '../assets/meta.json';
+
+export type BuilderMeta = {
+  supportedProjectVersion: string;
+  reactBuilderVersion: string;
+};
+
+const meta: BuilderMeta = {
+  supportedProjectVersion: metaJson.supportedProjectVersion,
+  reactBuilderVersion: metaJson.reactBuilderVersion,
+};
+
+export function getMeta(): BuilderMeta {
+  return { ...meta };
+}

package/src/utils/patterns.ts

@@ -60,8 +60,92 @@ type Pattern = {
 
 const patterns: Pattern[] = generatedPatterns as unknown as Pattern[];
 
+export type BuilderPlatform = 'web' | 'native';
+
+function normalizePlatform(platform?: BuilderPlatform | null): BuilderPlatform {
+  return platform === 'native' ? 'native' : 'web';
+}
+
+/**
+ * Keys that conceptually behave like component props (behavior/flags) rather than
+ * style properties. These should NOT be normalized into `attributes.style`.
+ */
+export const NON_STYLE_ATTRIBUTE_KEYS = new Set<string>([
+  'scrollable',
+  'showEllipsis',
+  'adjustsFontSizeToFit',
+]);
+
+/**
+ * schemaVersion=2 stores style-like keys inside `attributes.style`.
+ *
+ * We treat View+Text schema keys as style-like by default, but explicitly exclude
+ * known non-style props (behavior flags).
+ */
+export function getStyleAttributeKeySet(): Set<string> {
+  const viewSchema = getAttributeSchema('View') ?? {};
+  const textSchema = getAttributeSchema('Text') ?? {};
+  const viewStyle =
+    typeof (viewSchema as any)?.style === 'object' && (viewSchema as any)?.style
+      ? Object.keys((viewSchema as any).style)
+      : Object.keys(viewSchema);
+  const textStyle =
+    typeof (textSchema as any)?.style === 'object' && (textSchema as any)?.style
+      ? Object.keys((textSchema as any).style)
+      : Object.keys(textSchema);
+  const out = new Set<string>([...viewStyle, ...textStyle]);
+  for (const k of NON_STYLE_ATTRIBUTE_KEYS) out.delete(k);
+  return out;
+}
+
+function adjustMetaForPlatform(
+  meta: Record<string, AttributeMeta> | undefined,
+  platform?: BuilderPlatform,
+): Record<string, AttributeMeta> | undefined {
+  if (!meta) return undefined;
+  const p = normalizePlatform(platform);
+
+  // Values that are not directly style-friendly for the target platform should be shown under "other"
+  // (so they remain editable, but are clearly non-style / platform-specific behavior).
+  const moveToOtherAlways = new Set<string>(['scrollable']);
+  const moveToOtherOnWeb = new Set<string>([
+    // RN-only shorthands; on web they are translated to paddingLeft/Right, etc.
+    'paddingHorizontal',
+    'paddingVertical',
+    'marginHorizontal',
+    'marginVertical',
+  ]);
+  const moveToOtherOnNative = new Set<string>([
+    // CSS-only layout convenience (not widely supported in RN style across versions).
+    'gap',
+    // Web-only text behaviors (implemented via DOM).
+    'showEllipsis',
+    'adjustsFontSizeToFit',
+  ]);
+
+  const shouldMove = (key: string) =>
+    moveToOtherAlways.has(key) ||
+    (p === 'web' ? moveToOtherOnWeb.has(key) : moveToOtherOnNative.has(key));
+
+  let changed = false;
+  const out: Record<string, AttributeMeta> = {};
+  for (const [key, value] of Object.entries(meta)) {
+    if (!value || typeof value !== 'object') {
+      out[key] = value;
+      continue;
+    }
+    if (shouldMove(key)) {
+      out[key] = { ...value, category: 'other', specialCategory: null };
+      changed = true;
+    } else {
+      out[key] = value;
+    }
+  }
+  return changed ? out : meta;
+}
+
 // Build a fast lookup map without normalization for direct access
-const patternIndex: Map<string, Pattern> = new Map(
+const patternIndex: Map<string, Pattern> = new Map<string, Pattern>(
   patterns.map((p) => [p.pattern.type, p]),
 );
 
@@ -79,7 +163,7 @@ function pascalToKebabCase(s: string): string {
     .toLowerCase();
 }
 
-const typeAliases: Map<string, string> = new Map();
+const typeAliases: Map<string, string> = new Map<string, string>();
 for (const p of patterns) {
   const canonical = p?.pattern?.type;
   if (typeof canonical !== 'string' || !canonical) continue;
@@ -121,9 +205,22 @@ export function getAttributeSchema(
 
 export function getAttributeMeta(
   type?: string | null,
+  platform?: BuilderPlatform,
 ): Record<string, AttributeMeta> | undefined {
   const p = getPatternByType(type);
-  return p?.meta?.styles ?? p?.meta?.attributes;
+  const styles = p?.meta?.styles;
+  const attributes = p?.meta?.attributes;
+
+  // schemaVersion=2 prefers `meta.styles` but some repos split UI meta into:
+  // - meta.styles: style-tab fields
+  // - meta.attributes: non-style fields (container/other)
+  // Merge both to keep the editor + platform adjustments working.
+  const merged =
+    styles && attributes
+      ? { ...attributes, ...styles }
+      : (styles ?? attributes);
+
+  return adjustMetaForPlatform(merged, platform);
 }
 
 /** Returns defaults block (if any) for a given component type */

package/dist/hooks/useExtractImageStyle.d.ts

@@ -1,3 +0,0 @@
-import type { NodeData } from '../types/Node';
-import type { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
-export declare function useExtractImageStyle<T extends ImagePropsGenerated['attributes']>(node: NodeData<T>): import("react").CSSProperties;

package/dist/hooks/useExtractTextStyle.d.ts

@@ -1,3 +0,0 @@
-import type { NodeData } from '../types/Node';
-import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
-export declare function useExtractTextStyle<T extends TextPropsGenerated['attributes']>(node: NodeData<T>): import("react").CSSProperties;

package/dist/hooks/useExtractViewStyle.d.ts

@@ -1,3 +0,0 @@
-import type { NodeData } from '../types/Node';
-import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
-export declare function useExtractViewStyle<T extends ViewPropsGenerated['attributes']>(node: NodeData<T>): import("react").CSSProperties;

package/src/hooks/useExtractImageStyle.ts

@@ -1,19 +0,0 @@
-import { useMemo } from 'react';
-import type { NodeData } from '../types/Node';
-import type { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
-import { useBuilderParams } from '../components/BuilderProvider';
-import { extractImageStyle } from '../utils/extractImageStyle';
-import { defaultAppConfig } from '../types/PreviewConfig';
-
-export function useExtractImageStyle<
-  T extends ImagePropsGenerated['attributes'],
->(node: NodeData<T>) {
-  const { appConfig, projectColors: builderProjectColors } = useBuilderParams();
-  const theme = appConfig?.theme ?? defaultAppConfig.theme;
-  const projectColors = builderProjectColors;
-
-  return useMemo(
-    () => extractImageStyle(node, { theme, projectColors }),
-    [node, theme, projectColors],
-  );
-}

package/src/migrations/migrations/1.1.0_normalize_style_attributes.ts

@@ -1,80 +0,0 @@
-import type { Project } from '../../types/Project';
-import type { Node, NodeData, NodeDefaultAttribute } from '../../types/Node';
-import {
-  isEmptyObject,
-  isNodeArray,
-  isNodeNullOrUndefined,
-  isNodeString,
-} from '../../utils/nodeGuards';
-import { getAttributeSchema } from '../../utils/patterns';
-import type { Migration } from '../types';
-
-function isPlainObject(value: unknown): value is Record<string, unknown> {
-  return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-
-function buildStyleKeySet(): Set<string> {
-  const viewSchema = getAttributeSchema('View') ?? {};
-  const textSchema = getAttributeSchema('Text') ?? {};
-  return new Set([...Object.keys(viewSchema), ...Object.keys(textSchema)]);
-}
-
-function migrateNode(node: Node, styleKeys: Set<string>): Node {
-  if (
-    isNodeNullOrUndefined(node) ||
-    isNodeString(node) ||
-    isEmptyObject(node)
-  ) {
-    return node;
-  }
-  if (isNodeArray(node)) {
-    return (node as Node[]).map((n) => migrateNode(n, styleKeys));
-  }
-
-  const record = node as NodeData<NodeDefaultAttribute>;
-  const nextChildren = migrateNode(record.children as Node, styleKeys);
-
-  if (!isPlainObject(record.attributes)) {
-    return { ...record, children: nextChildren };
-  }
-
-  const nextAttrs: Record<string, unknown> = { ...(record.attributes ?? {}) };
-
-  const prevStyle = isPlainObject(nextAttrs.style) ? nextAttrs.style : {};
-  const nextStyle: Record<string, unknown> = { ...prevStyle };
-
-  for (const [k, v] of Object.entries(nextAttrs)) {
-    if (k === 'style') continue;
-    if (!styleKeys.has(k)) continue;
-
-    // If already set in style, prefer style (drop legacy flat key).
-    if (!(k in nextStyle)) nextStyle[k] = v;
-    delete nextAttrs[k];
-  }
-
-  if (Object.keys(nextStyle).length > 0) {
-    nextAttrs.style = nextStyle;
-  }
-
-  return {
-    ...record,
-    children: nextChildren,
-    attributes: nextAttrs as NodeDefaultAttribute,
-  };
-}
-
-export const migration_1_1_0_normalize_style_attributes: Migration = {
-  id: '1.1.0-normalize-style-attributes',
-  title: 'Normalize legacy style attributes into attributes.style',
-  fromVersion: '0.0.0',
-  toVersion: '1.1.0',
-  run: (project: Project): Project => {
-    const styleKeys = buildStyleKeySet();
-    const nextData = migrateNode(project.data as unknown as Node, styleKeys);
-    return {
-      ...project,
-      version: '1.1.0',
-      data: nextData as any,
-    };
-  },
-};