@developer_tribe/react-builder 1.2.7 → 1.2.8

package/dist/utils/extractImageStyle.d.ts

@@ -2,3 +2,6 @@ import { ImagePropsGenerated } from '../build-components/Image/ImageProps.genera
 import type { NodeData } from '../types/Node';
 import { ExtractViewStyleOptions } from './extractViewStyle';
 export declare function extractImageStyle<T extends ImagePropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractViewStyleOptions): import("react").CSSProperties;
+export declare function extractImageStyleNative<T extends ImagePropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractViewStyleOptions): {
+    [x: string]: unknown;
+};

package/dist/utils/extractTextStyle/extractTextStyleNative.d.ts

@@ -0,0 +1,17 @@
+import type { NodeData } from '../../types/Node';
+import type { TextPropsGenerated } from '../../build-components/Text/TextProps.generated';
+import type { AppConfig } from '../../types/PreviewConfig';
+import type { ProjectColors } from '../../types/Project';
+import type { Fonts } from '../../types/Fonts';
+export type ExtractTextStyleNativeOptions = {
+    appConfig?: AppConfig;
+    projectColors?: ProjectColors;
+    fonts?: Fonts;
+};
+/**
+ * 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 declare function extractTextStyleNative<T extends TextPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractTextStyleNativeOptions): Record<string, unknown>;

package/dist/utils/extractTextStyle.d.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/dist/utils/extractViewStyle/extractViewStyleNative.d.ts

@@ -0,0 +1,12 @@
+import { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
+import type { NodeData } from '../../types/Node';
+import type { ProjectColors } from '../../types/Project';
+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 declare function extractViewStyleNative<T extends ViewPropsGenerated['attributes']>(node: NodeData<T>, options?: ExtractViewStyleNativeOptions): Record<string, unknown>;

package/dist/utils/extractViewStyle.d.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/dist/utils/patterns.d.ts

@@ -45,11 +45,12 @@ type Pattern = {
     types?: Record<string, Record<string, string | string[]>>;
     meta?: PatternMeta;
 };
+export type BuilderPlatform = 'web' | 'native';
 /** Normalize legacy/variant component type strings to the canonical pattern.type (PascalCase). */
 export declare function normalizeComponentType(type?: string | null): string | undefined;
 export declare function getPatternByType(type?: string | null): Pattern | undefined;
 export declare function getAttributeSchema(type?: string | null): Record<string, string | string[]> | undefined;
-export declare function getAttributeMeta(type?: string | null): Record<string, AttributeMeta> | undefined;
+export declare function getAttributeMeta(type?: string | null, platform?: BuilderPlatform): Record<string, AttributeMeta> | undefined;
 /** Returns defaults block (if any) for a given component type */
 export declare function getDefaultsForType(type?: string | null): NodeDefaultAttribute | undefined;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@developer_tribe/react-builder",
-  "version": "1.2.7",
+  "version": "1.2.8",
   "license": "UNLICENSED",
   "type": "module",
   "restricted": true,

package/scripts/prebuild/utils/createGeneratedProps.js

@@ -89,6 +89,8 @@ export async function createGeneratedProps(
   const { pattern } = patternJson;
   const attributes = pattern.attributes || {};
   const allTypes = patternJson.types || {};
+  const metaStyles =
+    (patternJson?.meta?.styles || patternJson?.meta?.attributes || {}) ?? {};
 
   // Collect option type aliases for any enum arrays encountered across attributes and custom types
   const optionAliases = new Map(); // name -> union (string like `'a' | 'b'`)
@@ -134,8 +136,45 @@ export async function createGeneratedProps(
     return `    ${key}?: ${tsType};`;
   });
 
-  // In schema v2 we always allow a nested `style` object (for CSSProperties-like overrides/defaults).
-  const styleLine = `    style?: Record<string, unknown>;`;
+  const styleKeys = Object.keys(metaStyles);
+  const styleInterfaceName = `${componentName}StyleGenerated`;
+  const styleInterfaceBlock =
+    styleKeys.length > 0
+      ? `export interface ${styleInterfaceName} {\n` +
+        styleKeys
+          .map(k => {
+            const attrType = Object.prototype.hasOwnProperty.call(attributes, k)
+              ? attributes[k]
+              : 'string';
+            const tsType = tsTypeFromAttributeType(
+              attrType,
+              allTypes,
+              k,
+              registerEnumAlias
+            );
+            return `  ${k}?: ${tsType};`;
+          })
+          .join('\n') +
+        `\n}\n`
+      : '';
+
+  // In schema v2 we always allow a nested `style` object.
+  // If pattern.json declares meta.styles keys, we expose them for autocomplete while keeping flexibility via an index signature.
+  const styleLine =
+    styleKeys.length > 0
+      ? `    style?: ${styleInterfaceName};`
+      : `    style?: Record<string, unknown>;`;
+
+  // If a key is present in meta.styles, treat it as part of attributes.style (avoid duplication at the top-level).
+  const styleKeySet = new Set(styleKeys);
+  const attributeLinesWithoutStyleKeys =
+    styleKeys.length > 0
+      ? attributeLines.filter(line => {
+          const match = line.trim().match(/^([a-zA-Z0-9_]+)\?:/);
+          const key = match?.[1];
+          return !key || !styleKeySet.has(key);
+        })
+      : attributeLines;
 
   const childTsType =
     typeof pattern.children === 'string' ? pattern.children : 'string';
@@ -158,12 +197,15 @@ export async function createGeneratedProps(
           .join('\n') + '\n\n'
       : '') +
     (customTypeBlocks.length ? customTypeBlocks.join('\n') + '\n' : '') +
+    (styleInterfaceBlock ? styleInterfaceBlock + '\n' : '') +
     `\n` +
     `export interface ${componentName}PropsGenerated {\n` +
     `  child: ${normalizedChildTsType};\n` +
     `  attributes: {\n` +
     `${styleLine}\n` +
-    (attributeLines.length ? attributeLines.join('\n') + '\n' : '') +
+    (attributeLinesWithoutStyleKeys.length
+      ? attributeLinesWithoutStyleKeys.join('\n') + '\n'
+      : '') +
     `  };\n` +
     `}\n` +
     `\n` +

package/src/attributes-editor/LayoutPreviewPicker.tsx

@@ -94,12 +94,13 @@ function LayoutPreview({
   const resolved = resolvePreviewContext(mode, option, layoutContext);
   const isColumn = resolved.flexDirection?.startsWith('column');
   const resolvedBackground =
-    viewAttributes?.backgroundColor ??
+    (viewAttributes as any)?.style?.backgroundColor ??
     (isActive
       ? 'hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)) / 0.55)'
       : 'hsl(var(--muted, var(--rb-muted, 220 14.3% 95.9%)))');
-  const resolvedGap = parseNumeric(viewAttributes?.gap) ?? 3;
-  const resolvedBorderRadius = parseNumeric(viewAttributes?.borderRadius) ?? 4;
+  const resolvedGap = parseNumeric((viewAttributes as any)?.style?.gap) ?? 3;
+  const resolvedBorderRadius =
+    parseNumeric((viewAttributes as any)?.style?.borderRadius) ?? 4;
 
   const stretchOverrides =
     resolved.alignItems === 'stretch'

package/src/build-components/BIcon/BIcon.tsx

@@ -28,8 +28,9 @@ function BIcon({ node }: BIconComponentProps) {
     baseStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
-  const iconType = node.attributes?.iconType ?? 'activity';
-  const strokeWidth = node.attributes?.strokeWidth;
+  const styleBag = node.attributes?.style;
+  const iconType = styleBag?.iconType ?? 'activity';
+  const strokeWidth = styleBag?.strokeWidth;
 
   return (
     <Icon

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -19,53 +19,57 @@ export type JustifyContentOptionType =
   | 'space-evenly';
 export type PositionOptionType = 'relative' | 'absolute';
 
+export interface BIconStyleGenerated {
+  color?: string;
+  fontSize?: string;
+  fontFamily?: string;
+  fontWeight?: string;
+  textAlign?: TextAlignOptionType;
+  adjustsFontSizeToFit?: boolean;
+  showEllipsis?: boolean;
+  scrollable?: boolean;
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+  iconType?: string;
+  size?: number;
+  strokeWidth?: number;
+}
+
 export interface BIconPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    color?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    textAlign?: TextAlignOptionType;
-    adjustsFontSizeToFit?: boolean;
-    showEllipsis?: boolean;
-    scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
-    iconType?: string;
-    size?: number;
-    strokeWidth?: number;
+    style?: BIconStyleGenerated;
   };
 }
 

package/src/build-components/BackgroundImage/BackgroundImage.tsx

@@ -20,17 +20,19 @@ function BackgroundImage({ node }: BackgroundImageComponentProps) {
   const baseStyle = useExtractViewStyle(node);
   const backgroundStyle = useMemo(() => {
     const attrs = node.attributes;
+    const styleBag = attrs?.style;
     const style: React.CSSProperties = {
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'center',
     };
 
-    if (attrs?.src) {
-      const resolved = resolveImageSrc(attrs.src);
+    const src = attrs?.src;
+    if (src) {
+      const resolved = resolveImageSrc(src);
       if (resolved) style.backgroundImage = `url(${resolved})`;
     }
 
-    switch (attrs?.resizeMode) {
+    switch (styleBag?.resizeMode) {
       case 'cover':
         style.backgroundSize = 'cover';
         break;

package/src/build-components/BackgroundImage/BackgroundImageProps.generated.ts

@@ -19,45 +19,49 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 
+export interface BackgroundImageStyleGenerated {
+  scrollable?: boolean;
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+  resizeMode?: ResizeModeOptionType;
+}
+
 export interface BackgroundImagePropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
+    style?: BackgroundImageStyleGenerated;
     src?: string;
-    resizeMode?: ResizeModeOptionType;
   };
 }
 

package/src/build-components/BackgroundImage/pattern.json

@@ -6,29 +6,21 @@
     "extends": "View",
     "attributes": {
       "src": "string",
-      "resizeMode": [
-        "cover",
-        "contain",
-        "stretch",
-        "center"
-      ]
+      "resizeMode": ["cover", "contain", "stretch", "center"]
     }
   },
   "meta": {
-    "desiredParent": [
-      "all",
-      "background"
-    ],
+    "desiredParent": ["all", "background"],
     "label": "Background Image",
     "description": "Background image.",
+    "src": {
+      "label": "Src",
+      "description": "Image source URL.",
+      "category": "other",
+      "specialCategory": null,
+      "sort": 1
+    },
     "styles": {
-      "src": {
-        "label": "Src",
-        "description": "Image source URL.",
-        "category": "other",
-        "specialCategory": null,
-        "sort": 1
-      },
       "resizeMode": {
         "label": "Resize Mode",
         "description": "How the image fits its container.",

package/src/build-components/Button/Button.tsx

@@ -33,10 +33,11 @@ function Button({ node }: ButtonComponentProps) {
     combinedTextStyle.textAlign,
   ]);
   const buttonDefaults = useMemo(() => {
+    const styleBag = node?.attributes?.style;
     const hasExplicitBackground =
-      node?.attributes?.backgroundColor !== undefined &&
-      node?.attributes?.backgroundColor !== null &&
-      String(node?.attributes?.backgroundColor).trim() !== '';
+      styleBag?.backgroundColor !== undefined &&
+      styleBag?.backgroundColor !== null &&
+      String(styleBag?.backgroundColor).trim() !== '';
     return {
       cursor: 'pointer',
       textDecoration: 'none',
@@ -44,7 +45,7 @@ function Button({ node }: ButtonComponentProps) {
         ? undefined
         : { backgroundColor: 'transparent' }),
     } as React.CSSProperties;
-  }, [node?.attributes?.backgroundColor]);
+  }, [node?.attributes?.style]);
   const isSelected = isNodeSelected({
     previewMode: !!previewMode,
     current: selectedKey ? { key: selectedKey } : undefined,

package/src/build-components/Button/ButtonProps.generated.ts

@@ -30,46 +30,50 @@ export type FontWeightOptionType =
   | '800'
   | '900';
 
+export interface ButtonStyleGenerated {
+  scrollable?: boolean;
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+  color?: string;
+  fontSize?: string;
+  fontWeight?: FontWeightOptionType;
+}
+
 export interface ButtonPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
-    color?: string;
-    fontSize?: string;
-    fontWeight?: FontWeightOptionType;
+    style?: ButtonStyleGenerated;
   };
 }
 

package/src/build-components/Carousel/CarouselProps.generated.ts

@@ -19,43 +19,47 @@ export type JustifyContentOptionType =
 export type PositionOptionType = 'relative' | 'absolute';
 export type AlignOptionType = 'start' | 'center' | 'end';
 
+export interface CarouselStyleGenerated {
+  scrollable?: boolean;
+  flexDirection?: FlexDirectionOptionType;
+  alignItems?: AlignItemsOptionType;
+  justifyContent?: JustifyContentOptionType;
+  gap?: string;
+  padding?: string;
+  paddingHorizontal?: string;
+  paddingVertical?: string;
+  paddingTop?: string;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  margin?: string;
+  marginHorizontal?: string;
+  marginVertical?: string;
+  marginTop?: string;
+  marginBottom?: string;
+  marginLeft?: string;
+  marginRight?: string;
+  backgroundColor?: string;
+  borderRadius?: string;
+  width?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  height?: string;
+  minHeight?: string;
+  maxHeight?: string;
+  flex?: number;
+  position?: PositionOptionType;
+  top?: string;
+  bottom?: string;
+  left?: string;
+  right?: string;
+  zIndex?: number;
+}
+
 export interface CarouselPropsGenerated {
   child: string;
   attributes: {
-    style?: Record<string, unknown>;
-    scrollable?: boolean;
-    flexDirection?: FlexDirectionOptionType;
-    alignItems?: AlignItemsOptionType;
-    justifyContent?: JustifyContentOptionType;
-    gap?: string;
-    padding?: string;
-    paddingHorizontal?: string;
-    paddingVertical?: string;
-    paddingTop?: string;
-    paddingBottom?: string;
-    paddingLeft?: string;
-    paddingRight?: string;
-    margin?: string;
-    marginVertical?: string;
-    marginTop?: string;
-    marginBottom?: string;
-    marginLeft?: string;
-    marginRight?: string;
-    backgroundColor?: string;
-    borderRadius?: string;
-    width?: string;
-    minWidth?: string;
-    maxWidth?: string;
-    height?: string;
-    minHeight?: string;
-    maxHeight?: string;
-    flex?: number;
-    position?: PositionOptionType;
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    zIndex?: number;
+    style?: CarouselStyleGenerated;
     loop?: boolean;
     dragFree?: boolean;
     align?: AlignOptionType;

package/src/build-components/CarouselButtons/CarouselButtons.tsx

@@ -13,7 +13,8 @@ function CarouselButtons({ node }: CarouselButtonsComponentProps) {
   const attributeKey = node.key ?? generatedId;
   const style = useExtractViewStyle(node);
   const emblaApi = useContext(carouselContext);
-  const buttonTypes = node.attributes?.buttonType || [
+  const styleBag = node.attributes?.style;
+  const buttonTypes = styleBag?.buttonType || [
     'previous_button',
     'next_button',
   ];
@@ -43,7 +44,7 @@ function CarouselButtons({ node }: CarouselButtonsComponentProps) {
       )}
       {buttonTypes.includes('skip_button') && (
         <button
-          onClick={() => emblaApi?.scrollTo(node.attributes?.skipNumber)}
+          onClick={() => emblaApi?.scrollTo(styleBag?.skipNumber)}
           className="embla__button embla__button--skip"
         >
           Skip