@developer_tribe/react-builder 1.2.29 → 1.2.31

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

@@ -8,7 +8,7 @@ import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 
-function BackgroundImage({ node }: BackgroundImageComponentProps) {
+export function BackgroundImage({ node }: BackgroundImageComponentProps) {
   useLogRender('BackgroundImage');
   node = useNode(node);
   const generatedId = useId();

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

@@ -9,14 +9,14 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';
 
-function Button({ node }: ButtonComponentProps) {
+export function Button({ node }: ButtonComponentProps) {
   useLogRender('Button');
   node = useNode(node);
   const generatedId = useId();
   const attributeName = node.sourceType ?? node.type ?? 'button';
   const attributeKey = node.key ?? generatedId;
-  const { previewMode, selectedKey, appConfig } = useBuilderParams();
-  const localize = useLocalize({ appConfig });
+  const { previewMode, selectedKey } = useBuilderParams();
+  const localize = useLocalize();
   const baseStyle = useExtractViewStyle(node);
   const combinedTextStyle = useExtractTextStyle(node);
   const textStyle = useMemo(() => {

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

@@ -34,9 +34,7 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   const onboardApi = useContext(onboardContext);
   const emblaApi = isOnboard ? onboardApi?.emblaApi : carouselApi;
 
-  // When used as OnboardDot (sourceType), support OnboardDot-specific attributes too.
-  const GHOST_DOT_DARK_COLOR = '#E4E5E7';
-  const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
+  const { mockTheme: theme, projectColors, baseSize } = useBuilderParams();
   const inactiveDotOpacity =
     (stylesBag?.inactive_dot_opacity as number | undefined) ??
     (attrRecord.inactive_dot_opacity as number | undefined) ??
@@ -51,31 +49,22 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
     (stylesBag?.dot_thickness as string | number | undefined) ??
     (attrRecord.dot_thickness as string | number | undefined);
 
-  const { theme, projectColors } = useBuilderParams();
-  const isDark = theme === 'dark';
-  const inactiveDotColorBase = isDark
-    ? GHOST_DOT_DARK_COLOR
-    : GHOST_DOT_LIGHT_COLOR;
-
   const resolvedActiveDotColor = useMemo(
     () => parseColor(activeDotColor, { theme, projectColors }),
     [activeDotColor, theme, projectColors],
   );
-  const resolvedInactiveDotColor = useMemo(() => {
-    const parsed = parseColor(inactiveDotColorOverride, {
-      theme,
-      projectColors,
-    });
-    return parsed ?? inactiveDotColorBase;
-  }, [inactiveDotColorBase, inactiveDotColorOverride, theme, projectColors]);
+  const resolvedInactiveDotColor = useMemo(
+    () => parseColor(inactiveDotColorOverride, { theme, projectColors }),
+    [inactiveDotColorOverride, theme, projectColors],
+  );
 
   const dotSizeCss = useMemo(() => {
-    const parsed = parseSize(dotThicknessRaw);
+    const parsed = parseSize(dotThicknessRaw, baseSize);
     if (parsed === undefined) return '10px';
     if (typeof parsed === 'number') return `${parsed}px`;
     if (typeof parsed === 'string' && parsed.trim()) return parsed;
     return '10px';
-  }, [dotThicknessRaw]);
+  }, [dotThicknessRaw, baseSize]);
 
   const dotGapCss = useMemo((): string => {
     const px =
@@ -132,7 +121,9 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
           isDotSelected && resolvedActiveDotColor
             ? resolvedActiveDotColor
             : resolvedInactiveDotColor;
-        const activeFallback = '#007AFF';
+        const activeFallback =
+          resolvedActiveDotColor ??
+          parseColor('STATIC_COLORS.ONBOARD_DOT_ACTIVE', { projectColors });
         const dotColor = resolvedColor ?? activeFallback;
 
         return (

package/src/build-components/CarouselDots/CarouselDotsProps.generated.ts

@@ -69,6 +69,10 @@ export interface CarouselDotsPropsGenerated {
     style?: CarouselDotsStyleGenerated;
     scrollable?: boolean;
     dotType?: DotTypeOptionType;
+    dot_thickness?: string;
+    inactive_dot_opacity?: number;
+    inactive_dot_color?: string;
+    active_dot_color?: string;
   };
 }
 

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

@@ -14,9 +14,20 @@
         "sliding_border",
         "sliding_dot",
         "liquid_like"
-      ]
+      ],
+      "dot_thickness": "size",
+      "inactive_dot_opacity": "number",
+      "inactive_dot_color": "color",
+      "active_dot_color": "color"
     }
   },
+  "defaults": {
+    "dotType": "expanding_dot",
+    "dot_thickness": 10,
+    "inactive_dot_opacity": 0.3,
+    "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
+    "inactive_dot_color": "THEME_COLORS.BACKGROUND"
+  },
   "meta": {
     "desiredParent": [">CarouselProvider"],
     "label": "Carousel Dots",

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

@@ -33,6 +33,7 @@ function Main({ node }: MainComponentProps) {
   const style = useMergedStyle(
     layoutStyle,
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+    { boxSizing: 'content-box' },
   );
 
   return (

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

@@ -11,14 +11,15 @@ import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtra
 import { useMockOSContext, useMockPermission } from '../../mockOS';
 import { useLocalize } from '../../hooks/useLocalize';
 import { parseColor } from '../../utils/parseColor';
+import { defaultProjectColors } from '../../utils/projectColors';
 import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
-function OnboardButton({ node }: OnboardButtonComponentProps) {
+export function OnboardButton({ node }: OnboardButtonComponentProps) {
   useLogRender('OnboardButton');
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardButton';
   const { emblaApi } = useContext(onboardContext) ?? {};
-  const { theme, projectColors, appConfig } = useBuilderParams();
+  const { theme, projectColors } = useBuilderParams();
 
   const context = useMockOSContext();
   const mockPermissionManager = useMockPermission(context);
@@ -30,22 +31,23 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
   const attrRecord = toAttributeRecord(attrs);
   const styleBag = getStyleBag(attrs);
   const labelRaw = attrs?.labelKey ?? '';
-  const localize = useLocalize({ appConfig });
+  const localize = useLocalize();
   const label = localize(labelRaw);
 
   const flex = (attrRecord.flex ?? styleBag?.flex ?? 1) as number;
 
-  // The editor saves color attrs inside `styles` (meta category === 'style'),
-  // but legacy JSON may have them at the top level.
-  const rawTextColor = (attrRecord.button_text_color ??
-    styleBag?.button_text_color) as string | undefined;
-  const rawBgColor = (attrRecord.button_background_color ??
-    styleBag?.button_background_color) as string | undefined;
+  // color and backgroundColor are now stored inside `styles`
+  const rawTextColor = styleBag?.color as string | undefined;
+  const rawBgColor = styleBag?.backgroundColor as string | undefined;
 
   const textColor =
-    parseColor(rawTextColor, { projectColors, theme }) ?? '#FFFFFF';
+    parseColor(rawTextColor, { projectColors, theme }) ??
+    projectColors?.STATIC_COLORS?.ONBOARD_BUTTON_PRIMARY_TEXT ??
+    defaultProjectColors.STATIC_COLORS!.ONBOARD_BUTTON_PRIMARY_TEXT;
   const backgroundColor =
-    parseColor(rawBgColor, { projectColors, theme }) ?? '#0066FF';
+    parseColor(rawBgColor, { projectColors, theme }) ??
+    projectColors?.STATIC_COLORS?.ONBOARD_BUTTON_PRIMARY_BACKGROUND ??
+    defaultProjectColors.STATIC_COLORS!.ONBOARD_BUTTON_PRIMARY_BACKGROUND;
   const viewStyle = useExtractViewStyle(node);
 
   const handleClick = () => {

package/src/build-components/OnboardButton/OnboardButtonProps.generated.ts

@@ -77,10 +77,8 @@ export interface OnboardButtonPropsGenerated {
     style?: OnboardButtonStyleGenerated;
     scrollable?: boolean;
     labelKey?: string;
-    button_text_color?: string;
     animation?: AnimationOptionType;
     animation_color?: string;
-    button_background_color?: string;
     flex?: number;
     events?: EventObjectGenerated[];
   };

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

@@ -8,7 +8,6 @@
     "extends": "View",
     "attributes": {
       "labelKey": "string",
-      "button_text_color": "color",
       "animation": [
         "simple-animation",
         "line-animation",
@@ -17,7 +16,6 @@
         "blur-line-animation"
       ],
       "animation_color": "color",
-      "button_background_color": "color",
       "flex": "number",
       "events": "EventObject[]"
     },
@@ -41,13 +39,6 @@
     "label": "Onboard Button",
     "description": "Single action button for onboarding.",
     "styles": {
-      "button_text_color": {
-        "label": "Button Text Color",
-        "description": "Text color of the button.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 2
-      },
       "animation": {
         "label": "Animation",
         "description": "Animation style for the button.",
@@ -61,13 +52,6 @@
         "category": "style",
         "specialCategory": null,
         "sort": 4
-      },
-      "button_background_color": {
-        "label": "Button Background Color",
-        "description": "Background color of the button.",
-        "category": "style",
-        "specialCategory": null,
-        "sort": 5
       }
     },
     "attributes": {

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

@@ -11,7 +11,7 @@ import { parseColor } from '../../utils/parseColor';
 import { parseSize } from '../../size-matters';
 import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
-function OnboardDot({ node }: OnboardDotComponentProps) {
+export function OnboardDot({ node }: OnboardDotComponentProps) {
   useLogRender('OnboardDot');
 
   node = useNode(node);
@@ -26,15 +26,14 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     (stylesBag?.dotType as string | undefined) ??
     (attrRecord.dotType as string | undefined) ??
     'normal_dot';
-  const GHOST_DOT_DARK_COLOR = '#E4E5E7';
-  const GHOST_DOT_LIGHT_COLOR = '#F7F7F9';
-  const { previewMode, selectedKey, theme, projectColors } = useBuilderParams();
-  const isDark = theme === 'dark';
-
+  const {
+    previewMode,
+    selectedKey,
+    mockTheme: theme,
+    projectColors,
+    baseSize,
+  } = useBuilderParams();
   // OnboardDot specific attributes
-  const inactiveDotColor = isDark
-    ? GHOST_DOT_DARK_COLOR
-    : GHOST_DOT_LIGHT_COLOR;
   const inactiveDotOpacity =
     (stylesBag?.inactive_dot_opacity as number | undefined) ??
     (attrRecord.inactive_dot_opacity as number | undefined) ??
@@ -49,13 +48,10 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     () => parseColor(activeDotColor, { theme, projectColors }),
     [activeDotColor, theme, projectColors],
   );
-  const resolvedInactiveDotColor = useMemo(() => {
-    const parsed = parseColor(inactiveDotColorOverride, {
-      theme,
-      projectColors,
-    });
-    return parsed ?? inactiveDotColor;
-  }, [inactiveDotColor, inactiveDotColorOverride, theme, projectColors]);
+  const resolvedInactiveDotColor = useMemo(
+    () => parseColor(inactiveDotColorOverride, { theme, projectColors }),
+    [inactiveDotColorOverride, theme, projectColors],
+  );
 
   const extractedStyle = useExtractViewStyle(node);
   const baseStyle = useMemo(() => {
@@ -76,12 +72,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     (stylesBag?.dot_thickness as string | number | undefined) ??
     (attrRecord.dot_thickness as string | number | undefined);
   const dotSizeCss = useMemo((): string => {
-    const parsed = parseSize(dotThicknessRaw);
+    const parsed = parseSize(dotThicknessRaw, baseSize);
     if (parsed === undefined) return '10px';
     if (typeof parsed === 'number') return `${parsed}px`;
     if (typeof parsed === 'string' && parsed.trim()) return parsed;
     return '10px';
-  }, [dotThicknessRaw]);
+  }, [dotThicknessRaw, baseSize]);
   const dotGapCss = useMemo((): string => {
     // Prefer px math when possible; otherwise fall back to 10px/3.
     const px =
@@ -132,14 +128,12 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
       className={`embla__dots embla__dots--${dotType}`}
       style={containerStyle}
     >
-      {scrollSnaps.map((snap, index) => {
+      {scrollSnaps.map((_, index) => {
         const isDotSelected = selectedIndex === index;
-        const resolvedColor =
-          isDotSelected && resolvedActiveDotColor
-            ? resolvedActiveDotColor
-            : resolvedInactiveDotColor;
-        const activeFallback = '#007AFF';
-        const dotColor = resolvedColor ?? activeFallback;
+        const resolvedColor = isDotSelected
+          ? resolvedActiveDotColor
+          : resolvedInactiveDotColor;
+        const dotColor = resolvedColor ?? undefined;
 
         return (
           <button

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

@@ -28,7 +28,8 @@
     "dotType": "expanding_dot",
     "dot_thickness": 10,
     "inactive_dot_opacity": 0.3,
-    "active_dot_color": "#007AFF",
+    "active_dot_color": "STATIC_COLORS.ONBOARD_DOT_ACTIVE",
+    "inactive_dot_color": "THEME_COLORS.BACKGROUND",
     "style": {
       "flexDirection": "row",
       "alignItems": "center",

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

@@ -7,7 +7,7 @@ import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtra
 import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
-import { defaultAppConfig } from '../../types/PreviewConfig';
+import { defaultLocalization } from '../../types/PreviewConfig';
 import { parseColor } from '../../utils/parseColor';
 import { getStyleBag, toAttributeRecord } from '../../utils/attributeStyle';
 
@@ -96,18 +96,17 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardFooter';
   const {
-    appConfig: builderAppConfig,
+    localization: builderLocalization,
     theme,
     defaultLanguage,
     previewMode,
     selectedKey,
     projectColors: builderProjectColors,
   } = useBuilderParams();
-  const appConfig = builderAppConfig ?? defaultAppConfig;
+  const localization = builderLocalization ?? defaultLocalization;
   const projectColors = builderProjectColors;
-  const { localication } = appConfig;
   const lang = defaultLanguage ?? 'en';
-  const t = (key?: string) => (key ? (localication?.[lang]?.[key] ?? key) : '');
+  const t = (key?: string) => (key ? (localization?.[lang]?.[key] ?? key) : '');
 
   const attrs = node?.attributes;
   const attrRecord = toAttributeRecord(attrs);

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

@@ -8,10 +8,10 @@ import { useLogRender } from '../../utils/useLogRender';
 import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { Icon } from '../../components/Icon.generated';
-import { IconsType } from '../../types/Icons';
+import { IconsType } from '../../types/Icons.generated';
 import { usePaywallContext } from '../PaywallProvider/PaywallContext';
 
-function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
+export function PaywallCloseButton({ node }: PaywallCloseButtonComponentProps) {
   useLogRender('PaywallCloseButton');
   node = useNode(node);
   const { onClose, isBackAllowed } = usePaywallContext();

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

@@ -21,7 +21,7 @@ function PaywallSubscribeButton({
     node.sourceType ?? node.type ?? 'PaywallSubscribeButton';
   const attributeKey = node.key ?? generatedId;
 
-  const { previewMode, selectedKey, appConfig } = useBuilderParams();
+  const { previewMode, selectedKey } = useBuilderParams();
 
   const baseStyle = useExtractTextStyle(node);
 
@@ -35,7 +35,7 @@ function PaywallSubscribeButton({
     isSelected ? SELECTED_OUTLINE_STYLE : undefined,
   );
 
-  const localize = useLocalize({ appConfig });
+  const localize = useLocalize();
   const label =
     typeof node.children === 'string' && node.children.trim().length > 0
       ? node.children

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

@@ -28,11 +28,14 @@ export type RadioButtonBaseProps = {
 
 export function RadioButtonBase({
   selected,
-  color = '#A6A6A6',
+  color,
   size = 24,
 }: RadioButtonBaseProps) {
   const borderWidth = Math.round(size * 0.1);
   const sizeHalf = Math.round(size * 0.5);
+  const { projectColors } = useBuilderParams();
+  const resolvedColor =
+    color ?? projectColors?.STATIC_COLORS?.RADIO_BUTTON_COLOR ?? '#A6A6A6';
 
   const paramsContext = useContext(ParamsContext);
   const { singleProductIsSelected: contextIsSelected } =
@@ -47,7 +50,7 @@ export function RadioButtonBase({
           alignItems: 'center',
           borderWidth,
           borderStyle: 'solid',
-          borderColor: color,
+          borderColor: resolvedColor,
           width: size,
           height: size,
           borderRadius: sizeHalf,
@@ -61,7 +64,7 @@ export function RadioButtonBase({
               width: sizeHalf,
               height: sizeHalf,
               borderRadius: sizeHalf * 2,
-              backgroundColor: color,
+              backgroundColor: resolvedColor,
             }}
           />
         ) : (

package/src/build-components/RenderNode.generated.tsx

@@ -48,9 +48,9 @@ import type { SeparatorComponentProps } from './Separator/SeparatorProps.generat
 import type { StatusBarColorComponentProps } from './StatusBarColor/StatusBarColorProps.generated';
 import type { TextComponentProps } from './Text/TextProps.generated';
 import type { ViewComponentProps } from './View/ViewProps.generated';
-import BIcon from './BIcon/BIcon';
-import BackgroundImage from './BackgroundImage/BackgroundImage';
-import Button from './Button/Button';
+import { BIcon } from './BIcon/BIcon';
+import { BackgroundImage } from './BackgroundImage/BackgroundImage';
+import { Button } from './Button/Button';
 import Carousel from './Carousel/Carousel';
 import CarouselButtons from './CarouselButtons/CarouselButtons';
 import CarouselDots from './CarouselDots/CarouselDots';
@@ -61,9 +61,9 @@ import Image from './Image/Image';
 import Main from './Main/Main';
 import NavigationBarColor from './NavigationBarColor/NavigationBarColor';
 import Onboard from './Onboard/Onboard';
-import OnboardButton from './OnboardButton/OnboardButton';
+import { OnboardButton } from './OnboardButton/OnboardButton';
 import OnboardButtons from './OnboardButtons/OnboardButtons';
-import OnboardDot from './OnboardDot/OnboardDot';
+import { OnboardDot } from './OnboardDot/OnboardDot';
 import OnboardFooter from './OnboardFooter/OnboardFooter';
 import OnboardImage from './OnboardImage/OnboardImage';
 import OnboardItem from './OnboardItem/OnboardItem';
@@ -71,7 +71,7 @@ import OnboardProvider from './OnboardProvider/OnboardProvider';
 import OnboardSubtitle from './OnboardSubtitle/OnboardSubtitle';
 import OnboardTitle from './OnboardTitle/OnboardTitle';
 import PaywallBackground from './PaywallBackground/PaywallBackground';
-import PaywallCloseButton from './PaywallCloseButton/PaywallCloseButton';
+import { PaywallCloseButton } from './PaywallCloseButton/PaywallCloseButton';
 import PaywallOptions from './PaywallOptions/PaywallOptions';
 import PaywallProvider from './PaywallProvider/PaywallProvider';
 import PaywallSubscribeButton from './PaywallSubscribeButton/PaywallSubscribeButton';
@@ -81,7 +81,7 @@ import Promo from './Promo/Promo';
 import RadioButton from './RadioButton/RadioButton';
 import Separator from './Separator/Separator';
 import StatusBarColor from './StatusBarColor/StatusBarColor';
-import Text from './Text/Text';
+import { Text } from './Text/Text';
 import View from './View/View';
 
 type BuilderNode =

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

@@ -8,7 +8,7 @@ import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
 import { useMergedStyle } from '../../utils/useMergedStyle';
 import { useLocalize } from '../../hooks/useLocalize';
 
-function Text({ node }: TextComponentProps) {
+export function Text({ node }: TextComponentProps) {
   useLogRender('Text');
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'text';
@@ -17,7 +17,7 @@ function Text({ node }: TextComponentProps) {
   const attributeKey = node.key;
   const textRef = useRef<HTMLParagraphElement | null>(null);
   const [autoFontSizePx, setAutoFontSizePx] = useState<number | null>(null);
-  const { appConfig, previewMode, selectedKey } = useBuilderParams();
+  const { previewMode, selectedKey } = useBuilderParams();
   const keyOrText: string = node.children as string;
   const textStyle = useExtractTextStyle(node);
   const isSelected = isNodeSelected({
@@ -25,7 +25,7 @@ function Text({ node }: TextComponentProps) {
     current: selectedKey ? { key: selectedKey } : undefined,
     node,
   });
-  const localize = useLocalize({ appConfig });
+  const localize = useLocalize();
   const translateCounter = (node.attributes as Record<string, unknown>)
     ?.translateCounter as number | undefined;