@developer_tribe/react-builder 1.2.6 → 1.2.8

package/src/index.native.ts

@@ -49,6 +49,11 @@ export { useExtractTextStyle } from './hooks/useExtractTextStyle';
 export { useExtractViewStyle } from './hooks/useExtractViewStyle';
 export { useExtractImageStyle } from './hooks/useExtractImageStyle';
 
+// Native style extractors (RN-friendly style objects)
+export { extractViewStyleNative } from './utils/extractViewStyle';
+export { extractTextStyleNative } from './utils/extractTextStyle';
+export { extractImageStyleNative } from './utils/extractImageStyle';
+
 // Pure utilities (RN-safe)
 export {
   isNodeNullOrUndefined,
@@ -87,3 +92,4 @@ export {
   getBasicSamples,
   getOnboardSamples,
 } from './assets/samples/getSamples';
+export type { EventObjectGenerated } from './build-components/OnboardButton/OnboardButtonProps.generated';

package/src/index.ts

@@ -7,3 +7,5 @@ export { defaultAppConfig } from './types/PreviewConfig';
 
 export type { AppConfig } from './types/PreviewConfig';
 export type { Project, ProjectColors } from './types/Project';
+//NOTE: TECH-DEBT: This is a temporary solution to export the native index. We should find a better way to do this.
+export * from './index.native';

package/src/utils/extractImageStyle.ts

@@ -1,21 +1,50 @@
 import { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
 import type { NodeData } from '../types/Node';
-import { extractViewStyle, ExtractViewStyleOptions } from './extractViewStyle';
+import {
+  extractViewStyle,
+  extractViewStyleNative,
+  ExtractViewStyleOptions,
+} from './extractViewStyle';
 
 export function extractImageStyle<T extends ImagePropsGenerated['attributes']>(
   node: NodeData<T>,
   options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
   const style: React.CSSProperties = {};
 
   if (!attributes) return style;
 
   // Map resizeMode to CSS object-fit
-  if (attributes.resizeMode === 'cover') style.objectFit = 'cover';
-  else if (attributes.resizeMode === 'contain') style.objectFit = 'contain';
-  else if (attributes.resizeMode === 'stretch') style.objectFit = 'fill';
-  else if (attributes.resizeMode === 'center') style.objectFit = 'none';
+  const resizeMode = ((attributes as any)?.resizeMode ??
+    styleBag?.resizeMode) as any;
+  if (resizeMode === 'cover') style.objectFit = 'cover';
+  else if (resizeMode === 'contain') style.objectFit = 'contain';
+  else if (resizeMode === 'stretch') style.objectFit = 'fill';
+  else if (resizeMode === 'center') style.objectFit = 'none';
 
   return { ...extractViewStyle(node, options), ...style };
 }
+
+export function extractImageStyleNative<
+  T extends ImagePropsGenerated['attributes'],
+>(node: NodeData<T>, options: ExtractViewStyleOptions = {}) {
+  const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  if (!attributes) return {};
+
+  const resizeMode = ((attributes as any)?.resizeMode ??
+    styleBag?.resizeMode) as any;
+
+  // In RN, resizeMode is usually an Image prop, but many codebases also accept it on ImageStyle.
+  // We return it here so consumers can pass it through as they prefer.
+  const nativeStyle: Record<string, unknown> = {};
+  if (resizeMode) nativeStyle.resizeMode = resizeMode;
+
+  return { ...extractViewStyleNative(node, options as any), ...nativeStyle };
+}

package/src/utils/extractTextStyle/extractTextStyle.ts

@@ -93,12 +93,10 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   const styleBag = (attributes as any)?.style as
     | Record<string, unknown>
     | undefined;
-  const get = <K extends keyof TextPropsGenerated['attributes']>(
-    key: K,
-  ): TextPropsGenerated['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 resolvedAppConfig = options.appConfig ?? defaultAppConfig;
   const { screenStyle, theme } = resolvedAppConfig;
@@ -162,7 +160,7 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   // If no fontFamily is set, keep previous behavior.
   if (!normalizedFontFamily && normalizedFontWeight)
     style.fontWeight = normalizedFontWeight;
-  const resolvedTextColor = parseColor(get('color'), {
+  const resolvedTextColor = parseColor(get('color') as any, {
     projectColors: options.projectColors,
     theme,
   });

package/src/utils/extractTextStyle/extractTextStyleNative.ts

@@ -0,0 +1,106 @@
+import type { NodeData } from '../../types/Node';
+import type { TextPropsGenerated } from '../../build-components/Text/TextProps.generated';
+import type { AppConfig } from '../../types/PreviewConfig';
+import { defaultAppConfig } from '../../types/PreviewConfig';
+import type { ProjectColors } from '../../types/Project';
+import type { Fonts } from '../../types/Fonts';
+import { fs, parseSize } from '../../size-matters';
+import { parseColor } from '../parseColor';
+import { extractViewStyleNative } from '../extractViewStyle';
+import { normalizeFontWeight } from '../fontWeight';
+import {
+  findFontDefinition,
+  resolveClosestFontWeightKey,
+} from '../loadFontFamily';
+
+export type ExtractTextStyleNativeOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+  fonts?: Fonts;
+};
+
+function weightToNumericKey(weight: unknown): string | undefined {
+  const normalized = normalizeFontWeight(weight);
+  if (!normalized) return undefined;
+  if (normalized === 'normal') return '400';
+  if (normalized === 'bold') return '700';
+  return normalized;
+}
+
+/**
+ * React Native-friendly text style extraction.
+ * - Avoids web-only quoting of fontFamily.
+ * - Returns numeric fontSize (dp) when possible.
+ * - Merges with extractViewStyleNative so padding/margin/etc still work in RN.
+ */
+export function extractTextStyleNative<
+  T extends TextPropsGenerated['attributes'],
+>(node: NodeData<T>, options: ExtractTextStyleNativeOptions = {}) {
+  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];
+  };
+
+  const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
+  const { screenStyle, theme } = resolvedAppConfig;
+  const fallbackColor =
+    theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
+
+  const style: Record<string, unknown> = {};
+  if (!attributes) {
+    style.fontSize = fs(14);
+    style.color = fallbackColor;
+    return style;
+  }
+
+  const rawFontSize = get('fontSize') as any;
+  const parsedFontSize = parseSize(rawFontSize);
+  if (typeof parsedFontSize === 'number') style.fontSize = parsedFontSize;
+  else style.fontSize = fs(14);
+
+  const fontFamily = get('fontFamily') as any;
+  const fontWeight = get('fontWeight') as any;
+  const requestedWeight = weightToNumericKey(fontWeight);
+  const normalizedFontFamily =
+    typeof fontFamily === 'string' && fontFamily.trim().length > 0
+      ? fontFamily.trim()
+      : undefined;
+
+  if (normalizedFontFamily) {
+    const def = findFontDefinition(options.fonts ?? [], normalizedFontFamily);
+    const resolvedWeightKey =
+      def?.family && typeof def.family === 'object'
+        ? resolveClosestFontWeightKey(
+            def.family as Record<string, string>,
+            requestedWeight,
+          )
+        : requestedWeight;
+
+    style.fontFamily = normalizedFontFamily;
+    if (resolvedWeightKey) style.fontWeight = resolvedWeightKey;
+  }
+
+  const normalizedFontWeight = normalizeFontWeight(fontWeight);
+  if (!normalizedFontFamily && normalizedFontWeight)
+    style.fontWeight = normalizedFontWeight;
+
+  const resolvedTextColor = parseColor(get('color') as any, {
+    projectColors: options.projectColors,
+    theme,
+  });
+  style.color = resolvedTextColor ?? fallbackColor;
+
+  const textAlign = get('textAlign');
+  if (textAlign) style.textAlign = textAlign as any;
+
+  const viewStyle = extractViewStyleNative(node, {
+    projectColors: options.projectColors,
+    theme,
+  });
+  return { ...viewStyle, ...style };
+}

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/patterns.ts

@@ -60,6 +60,58 @@ 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';
+}
+
+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(
   patterns.map((p) => [p.pattern.type, p]),
@@ -121,9 +173,11 @@ 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 meta = p?.meta?.styles ?? p?.meta?.attributes;
+  return adjustMetaForPlatform(meta, platform);
 }
 
 /** Returns defaults block (if any) for a given component type */