@developer_tribe/react-builder 1.2.30 → 1.2.31

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,8 +26,6 @@ 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,
@@ -35,12 +33,7 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
     projectColors,
     baseSize,
   } = useBuilderParams();
-  const isDark = theme === 'dark';
-
   // 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) ??
@@ -55,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(() => {
@@ -138,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/PaywallCloseButton/PaywallCloseButton.tsx

@@ -11,7 +11,7 @@ import { Icon } from '../../components/Icon.generated';
 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/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';

package/src/build-components/patterns.generated.ts

@@ -2129,6 +2129,10 @@ export const patterns = [
           'sliding_dot',
           'liquid_like',
         ],
+        dot_thickness: 'size',
+        inactive_dot_opacity: 'number',
+        inactive_dot_color: 'color',
+        active_dot_color: 'color',
       },
     },
     meta: {
@@ -2453,6 +2457,11 @@ export const patterns = [
         flexGrow: 0,
         flexShrink: 0,
       },
+      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',
     },
     types: {},
   },
@@ -5270,7 +5279,6 @@ export const patterns = [
           zIndex: 'number',
         },
         labelKey: 'string',
-        button_text_color: 'color',
         animation: [
           'simple-animation',
           'line-animation',
@@ -5279,7 +5287,6 @@ export const patterns = [
           'blur-line-animation',
         ],
         animation_color: 'color',
-        button_background_color: 'color',
         flex: 'number',
         events: 'EventObject[]',
       },
@@ -5330,13 +5337,6 @@ export const patterns = [
           sort: 21,
           preferredScale: 's',
         },
-        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.',
@@ -5351,13 +5351,6 @@ export const patterns = [
           specialCategory: null,
           sort: 4,
         },
-        button_background_color: {
-          label: 'Button Background Color',
-          description: 'Background color of the button.',
-          category: 'style',
-          specialCategory: null,
-          sort: 5,
-        },
       },
       attributes: {
         scrollable: {
@@ -6524,7 +6517,8 @@ export const patterns = [
       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',
     },
     types: {},
   },

package/src/components/BuilderProvider.tsx

@@ -67,7 +67,7 @@ export function BuilderProvider({ params, children }: BuilderProviderProps) {
     const lang = params.mockDefaultLanguage ?? defaultLanguage;
     return {
       ...params,
-      // Ensure defaults if missing
+      // Ensure defaults if mxissing
       mockProducts: params.mockProducts ?? [],
       mockBenefits: params.mockBenefits ?? {},
       mockTheme: theme,

package/src/hooks/useLocalize.ts

@@ -14,7 +14,7 @@ export function useLocalize(options?: {
     localization: builderLocalization,
     mockDefaultLanguage: builderDefaultLanguage,
   } = useBuilderParams();
-
+  //TODO: genelle (react-native ksımına export et)
   const localization =
     options?.localization ?? builderLocalization ?? defaultLocalization;
   const defaultLanguage =

package/src/utils/projectColors.ts

@@ -11,10 +11,11 @@ export const defaultProjectColors: ProjectColors = {
     TRANSPARENT: '#ffffff00',
     ONBOARD_DOT_INACTIVE: '#E4E5E7',
     ONBOARD_DOT_ACTIVE: '#007AFF',
-    ONBOARD_BUTTON_PRIMARY_BACKGROUND: '#0000FF',
-    ONBOARD_BUTTON_PRIMARY_TEXT: '#000',
+    ONBOARD_BUTTON_PRIMARY_BACKGROUND: '#0066FF',
+    ONBOARD_BUTTON_PRIMARY_TEXT: '#FFFFFF',
     ONBOARD_LINK_COLOR: '#1778F2',
     ONBOARD_SEPARATOR_COLOR: '#44454D',
+    RADIO_BUTTON_COLOR: '#A6A6A6',
   },
   THEME_COLORS: {
     light: {

package/src/utils/useMergedStyle.ts

@@ -4,13 +4,15 @@ import type { CSSProperties } from 'react';
 const EMPTY_STYLE: CSSProperties = {};
 
 export function useMergedStyle(
-  base?: CSSProperties,
-  override?: CSSProperties,
+  ...args: (CSSProperties | undefined | null | false)[]
 ): CSSProperties {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   return useMemo(() => {
-    if (!base && !override) return EMPTY_STYLE;
-    if (!override) return base ?? EMPTY_STYLE;
-    if (!base) return override;
-    return { ...base, ...override };
-  }, [base, override]);
+    const validStyles = args.filter((arg): arg is CSSProperties => !!arg);
+
+    if (validStyles.length === 0) return EMPTY_STYLE;
+    if (validStyles.length === 1) return validStyles[0];
+
+    return Object.assign({}, ...validStyles);
+  }, args);
 }