@developer_tribe/react-builder 1.2.18 → 1.2.20

package/src/assets/samples/vpn-onboard-6.json

@@ -45,32 +45,32 @@
         "view.onboarding.btnTerms": "Terms"
       },
       "ar": {
-        "onboard.title.one-page": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.title.one-page2": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.title.two-page": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.title.two-page2": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.title.three-page": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.title.three-page2": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.title.four-page": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.title.four-page2": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.subtitle.one-page": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.subtitle.one-page2": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.subtitle.two-page": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.subtitle.two-page2": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.subtitle.three-page": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.subtitle.three-page2": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.subtitle.four-page": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.subtitle.four-page2": " \u0627\u0644\u0639\u0631\u0628\u064a\u0629",
-        "onboard.next.one-page": "\u0627\u0644\u062a\u0627\u0644\u064a",
-        "onboard.next.two-page": "\u0627\u0644\u062a\u0627\u0644\u064a",
-        "onboard.next.three-page": "\u0627\u0644\u062a\u0627\u0644\u064a",
-        "onboard.skip.one-page": "\u062a\u062e\u0637\u064a",
-        "onboard.skip.two-page": "\u062a\u062e\u0637\u064a",
-        "onboard.skip.three-page": "\u062a\u062e\u0637\u064a",
-        "onboard.allow.four-page": "\u0627\u0644\u0633\u0645\u0627\u062d",
-        "view.onboarding.footer.description": "\u0628\u0627\u0644\u0645\u062a\u0627\u0628\u0639\u0629 \u0641\u0625\u0646\u0643 \u062a\u0648\u0627\u0641\u0642 \u0639\u0644\u0649",
-        "view.onboarding.btnPrivacy": "\u0627\u0644\u062e\u0635\u0648\u0635\u064a\u0629",
-        "view.onboarding.btnTerms": "\u0627\u0644\u0634\u0631\u0648\u0637"
+        "onboard.title.one-page": " العربية",
+        "onboard.title.one-page2": " العربية",
+        "onboard.title.two-page": " العربية",
+        "onboard.title.two-page2": " العربية",
+        "onboard.title.three-page": " العربية",
+        "onboard.title.three-page2": " العربية",
+        "onboard.title.four-page": " العربية",
+        "onboard.title.four-page2": " العربية",
+        "onboard.subtitle.one-page": " العربية",
+        "onboard.subtitle.one-page2": " العربية",
+        "onboard.subtitle.two-page": " العربية",
+        "onboard.subtitle.two-page2": " العربية",
+        "onboard.subtitle.three-page": " العربية",
+        "onboard.subtitle.three-page2": " العربية",
+        "onboard.subtitle.four-page": " العربية",
+        "onboard.subtitle.four-page2": " العربية",
+        "onboard.next.one-page": "التالي",
+        "onboard.next.two-page": "التالي",
+        "onboard.next.three-page": "التالي",
+        "onboard.skip.one-page": "تخطي",
+        "onboard.skip.two-page": "تخطي",
+        "onboard.skip.three-page": "تخطي",
+        "onboard.allow.four-page": "السماح",
+        "view.onboarding.footer.description": "بالمتابعة فإنك توافق على",
+        "view.onboarding.btnPrivacy": "الخصوصية",
+        "view.onboarding.btnTerms": "الشروط"
       }
     },
     "defaultLanguage": "en"
@@ -81,7 +81,7 @@
     "key": "cJVVSS7q9Qe1trnb",
     "attributes": {
       "useSafeAreaView": true,
-      "description": "Ekran\u0131n ana kapsay\u0131c\u0131s\u0131. (#1)",
+      "description": "Ekranın ana kapsayıcısı. (#1)",
       "title": "Main 1"
     },
     "children": [
@@ -100,7 +100,7 @@
                     "attributes": {
                       "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/9cb1d668b3724655f93a91e5eee771c5.png",
                       "resizeMode": "contain",
-                      "style": {
+                      "styles": {
                         "height": 400
                       }
                     }
@@ -108,28 +108,28 @@
                   {
                     "type": "OnboardTitle",
                     "attributes": {
-                      "style": {
+                      "description": "Sayfa başlığı. (#1)",
+                      "title": "OnboardTitle 1",
+                      "styles": {
                         "color": "#F4F5FF"
-                      },
-                      "description": "Sayfa ba\u015fl\u0131\u011f\u0131. (#1)",
-                      "title": "OnboardTitle 1"
+                      }
                     },
                     "children": "onboard.title.one-page"
                   },
                   {
                     "type": "OnboardSubtitle",
                     "attributes": {
-                      "style": {
+                      "description": "Sayfa alt başlığı. (#1)",
+                      "title": "OnboardSubtitle 1",
+                      "styles": {
                         "color": "#DBDDEB"
-                      },
-                      "description": "Sayfa alt ba\u015fl\u0131\u011f\u0131. (#1)",
-                      "title": "OnboardSubtitle 1"
+                      }
                     },
                     "children": "onboard.subtitle.one-page"
                   }
                 ],
                 "attributes": {
-                  "description": "Onboarding sayfas\u0131. (#1)",
+                  "description": "Onboarding sayfası. (#1)",
                   "title": "OnboardItem 1"
                 }
               },
@@ -142,7 +142,7 @@
                     "attributes": {
                       "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/f8d0c64bf89cc5f2f14126d0544ba174.png",
                       "resizeMode": "contain",
-                      "style": {
+                      "styles": {
                         "height": 400
                       }
                     }
@@ -150,28 +150,28 @@
                   {
                     "type": "OnboardTitle",
                     "attributes": {
-                      "style": {
+                      "description": "Sayfa başlığı. (#2)",
+                      "title": "OnboardTitle 2",
+                      "styles": {
                         "color": "#F4F5FF"
-                      },
-                      "description": "Sayfa ba\u015fl\u0131\u011f\u0131. (#2)",
-                      "title": "OnboardTitle 2"
+                      }
                     },
                     "children": "onboard.title.two-page"
                   },
                   {
                     "type": "OnboardSubtitle",
                     "attributes": {
-                      "style": {
+                      "description": "Sayfa alt başlığı. (#2)",
+                      "title": "OnboardSubtitle 2",
+                      "styles": {
                         "color": "#DBDDEB"
-                      },
-                      "description": "Sayfa alt ba\u015fl\u0131\u011f\u0131. (#2)",
-                      "title": "OnboardSubtitle 2"
+                      }
                     },
                     "children": "onboard.subtitle.two-page"
                   }
                 ],
                 "attributes": {
-                  "description": "Onboarding sayfas\u0131. (#2)",
+                  "description": "Onboarding sayfası. (#2)",
                   "title": "OnboardItem 2"
                 }
               },
@@ -184,7 +184,7 @@
                     "attributes": {
                       "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/ad823809885c1a2a8e4632039f35a94e.png",
                       "resizeMode": "contain",
-                      "style": {
+                      "styles": {
                         "height": 400
                       }
                     }
@@ -192,28 +192,28 @@
                   {
                     "type": "OnboardTitle",
                     "attributes": {
-                      "style": {
+                      "description": "Sayfa başlığı. (#3)",
+                      "title": "OnboardTitle 3",
+                      "styles": {
                         "color": "#F4F5FF"
-                      },
-                      "description": "Sayfa ba\u015fl\u0131\u011f\u0131. (#3)",
-                      "title": "OnboardTitle 3"
+                      }
                     },
                     "children": "onboard.title.three-page"
                   },
                   {
                     "type": "OnboardSubtitle",
                     "attributes": {
-                      "style": {
+                      "description": "Sayfa alt başlığı. (#3)",
+                      "title": "OnboardSubtitle 3",
+                      "styles": {
                         "color": "#DBDDEB"
-                      },
-                      "description": "Sayfa alt ba\u015fl\u0131\u011f\u0131. (#3)",
-                      "title": "OnboardSubtitle 3"
+                      }
                     },
                     "children": "onboard.subtitle.three-page"
                   }
                 ],
                 "attributes": {
-                  "description": "Onboarding sayfas\u0131. (#3)",
+                  "description": "Onboarding sayfası. (#3)",
                   "title": "OnboardItem 3"
                 }
               },
@@ -226,7 +226,7 @@
                     "attributes": {
                       "src": "https://vpn111-stage.s3.eu-central-1.amazonaws.com/onboard/high/ede1705c51f3434ae9053ed5f29bf5dd.png",
                       "resizeMode": "contain",
-                      "style": {
+                      "styles": {
                         "height": 400
                       }
                     }
@@ -234,34 +234,34 @@
                   {
                     "type": "OnboardTitle",
                     "attributes": {
-                      "style": {
+                      "description": "Sayfa başlığı. (#4)",
+                      "title": "OnboardTitle 4",
+                      "styles": {
                         "color": "#F4F5FF"
-                      },
-                      "description": "Sayfa ba\u015fl\u0131\u011f\u0131. (#4)",
-                      "title": "OnboardTitle 4"
+                      }
                     },
                     "children": "onboard.title.four-page"
                   },
                   {
                     "type": "OnboardSubtitle",
                     "attributes": {
-                      "style": {
+                      "description": "Sayfa alt başlığı. (#4)",
+                      "title": "OnboardSubtitle 4",
+                      "styles": {
                         "color": "#DBDDEB"
-                      },
-                      "description": "Sayfa alt ba\u015fl\u0131\u011f\u0131. (#4)",
-                      "title": "OnboardSubtitle 4"
+                      }
                     },
                     "children": "onboard.subtitle.four-page"
                   }
                 ],
                 "attributes": {
-                  "description": "Onboarding sayfas\u0131. (#4)",
+                  "description": "Onboarding sayfası. (#4)",
                   "title": "OnboardItem 4"
                 }
               }
             ],
             "attributes": {
-              "description": "Onboarding ana yap\u0131s\u0131. (#1)",
+              "description": "Onboarding ana yapısı. (#1)",
               "title": "Onboard 1"
             }
           },
@@ -269,7 +269,13 @@
             "type": "OnboardDot",
             "attributes": {
               "dotType": "expanding_dot",
-              "expanding_dot_width": 20
+              "dot_thickness": 20,
+              "inactive_dot_opacity": 0.3,
+              "inactive_dot_color": "#E4E5E7",
+              "active_dot_color": "#007AFF",
+              "styles": {
+                "flex": 2
+              }
             }
           },
           {
@@ -279,7 +285,11 @@
               "condition": "carousel-index",
               "conditionVariable": 0,
               "description": "Sayfa buton grubu. (#1)",
-              "title": "OnboardButtons 1"
+              "title": "OnboardButtons 1",
+              "styles": {
+                "flex": 2,
+                "justifyContent": "flex-end"
+              }
             },
             "children": [
               {
@@ -295,7 +305,7 @@
                       "targetIndex": 3
                     }
                   ],
-                  "style": {
+                  "styles": {
                     "flex": 1
                   }
                 }
@@ -313,7 +323,7 @@
                       "targetIndex": 1
                     }
                   ],
-                  "style": {
+                  "styles": {
                     "flex": 1
                   }
                 }
@@ -327,7 +337,11 @@
               "condition": "carousel-index",
               "conditionVariable": 1,
               "description": "Sayfa buton grubu. (#2)",
-              "title": "OnboardButtons 2"
+              "title": "OnboardButtons 2",
+              "styles": {
+                "flex": 2,
+                "justifyContent": "flex-end"
+              }
             },
             "children": [
               {
@@ -343,7 +357,7 @@
                       "targetIndex": 3
                     }
                   ],
-                  "style": {
+                  "styles": {
                     "flex": 1
                   }
                 }
@@ -361,7 +375,7 @@
                       "targetIndex": 2
                     }
                   ],
-                  "style": {
+                  "styles": {
                     "flex": 1
                   }
                 }
@@ -375,7 +389,11 @@
               "condition": "carousel-index",
               "conditionVariable": 2,
               "description": "Sayfa buton grubu. (#3)",
-              "title": "OnboardButtons 3"
+              "title": "OnboardButtons 3",
+              "styles": {
+                "flex": 2,
+                "justifyContent": "flex-end"
+              }
             },
             "children": [
               {
@@ -391,7 +409,7 @@
                       "targetIndex": 3
                     }
                   ],
-                  "style": {
+                  "styles": {
                     "flex": 1
                   }
                 }
@@ -413,7 +431,7 @@
                       "targetIndex": 3
                     }
                   ],
-                  "style": {
+                  "styles": {
                     "flex": 1
                   }
                 }
@@ -446,7 +464,7 @@
                       "navigate_to": "subscriptions"
                     }
                   ],
-                  "style": {
+                  "styles": {
                     "flex": 1
                   }
                 }
@@ -463,7 +481,8 @@
               "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
               "linkedWordSecondColor": "#0450E2",
               "linkedWordSecondPage": "terms",
-              "style": {
+              "styles": {
+                "flex": 2,
                 "gap": 8,
                 "color": "#81838F"
               }
@@ -472,7 +491,7 @@
         ],
         "attributes": {
           "theme": "dark",
-          "description": "Onboarding sa\u011flay\u0131c\u0131s\u0131. (#1)",
+          "description": "Onboarding sağlayıcısı. (#1)",
           "title": "OnboardProvider 1"
         }
       }

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

@@ -1,10 +1,15 @@
-import React, { useContext, useEffect, useId, useState } from 'react';
+import React, { useContext, useEffect, useId, useMemo, useState } from 'react';
 import type { CarouselDotsComponentProps } from './CarouselDotsProps.generated';
 import { carouselContext } from '../CarouselProvider/CarouselProvider';
 import { onboardContext } from '../OnboardProvider/OnboardProvider';
 import useNode from '../useNode';
 import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { parseColor } from '../../utils/parseColor';
+import { parseSize } from '../../size-matters';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { defaultAppConfig } from '../../types/PreviewConfig';
 
 function CarouselDots({ node }: CarouselDotsComponentProps) {
   useLogRender('CarouselDots');
@@ -15,7 +20,13 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
   const attributeName = node.sourceType ?? node.type ?? 'carouselDots';
   const attributeKey = node.key ?? generatedId;
 
-  const dotType = node.attributes?.dotType ?? 'normal_dot';
+  const attrsAny = node.attributes as any;
+  const stylesBag =
+    (attrsAny?.styles as Record<string, unknown> | undefined) ??
+    (attrsAny?.style as Record<string, unknown> | undefined) ??
+    undefined;
+  const dotType =
+    (stylesBag?.dotType as any) ?? (attrsAny?.dotType as any) ?? 'normal_dot';
   const style = useExtractViewStyle(node);
 
   // Use the appropriate context based on sourceType
@@ -24,6 +35,71 @@ 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 inactiveDotOpacity =
+    (stylesBag?.inactive_dot_opacity as number | undefined) ??
+    attrsAny?.inactive_dot_opacity ??
+    0.3;
+  const inactiveDotColorOverride =
+    (stylesBag?.inactive_dot_color as string | undefined) ??
+    attrsAny?.inactive_dot_color;
+  const activeDotColor =
+    (stylesBag?.active_dot_color as string | undefined) ??
+    attrsAny?.active_dot_color;
+  const dotThicknessRaw =
+    (stylesBag?.dot_thickness as any) ?? attrsAny?.dot_thickness;
+
+  const { appConfig: builderAppConfig, projectColors } = useBuilderParams();
+  const appConfig = builderAppConfig ?? defaultAppConfig;
+  const isDark = appConfig.theme === 'dark';
+  const inactiveDotColorBase = isDark
+    ? GHOST_DOT_DARK_COLOR
+    : GHOST_DOT_LIGHT_COLOR;
+
+  const resolvedActiveDotColor = useMemo(
+    () => parseColor(activeDotColor, { theme: appConfig.theme, projectColors }),
+    [activeDotColor, appConfig.theme, projectColors],
+  );
+  const resolvedInactiveDotColor = useMemo(() => {
+    const parsed = parseColor(inactiveDotColorOverride, {
+      theme: appConfig.theme,
+      projectColors,
+    });
+    return parsed ?? inactiveDotColorBase;
+  }, [
+    inactiveDotColorBase,
+    inactiveDotColorOverride,
+    appConfig.theme,
+    projectColors,
+  ]);
+
+  const dotSizeCss = useMemo(() => {
+    const parsed = parseSize(dotThicknessRaw);
+    if (parsed === undefined) return '10px';
+    if (typeof parsed === 'number') return `${parsed}px`;
+    if (typeof parsed === 'string' && parsed.trim()) return parsed;
+    return '10px';
+  }, [dotThicknessRaw]);
+
+  const dotGapCss = useMemo((): string => {
+    const px =
+      typeof dotSizeCss === 'string' && dotSizeCss.trim().endsWith('px')
+        ? Number.parseFloat(dotSizeCss)
+        : Number.NaN;
+    const n = Number.isFinite(px) ? px : 10;
+    return `${Math.max(0, n / 3)}px`;
+  }, [dotSizeCss]);
+
+  const gapValue = (style as any)?.gap ?? dotGapCss;
+  const containerStyle = useMergedStyle(style, {
+    display: 'flex',
+    flexWrap: 'wrap',
+    gap: gapValue,
+    alignItems: 'center',
+  });
+
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [scrollSnaps, setScrollSnaps] = useState<number[]>([]);
 
@@ -53,17 +129,41 @@ function CarouselDots({ node }: CarouselDotsComponentProps) {
       attribute-name={attributeName}
       attribute-key={attributeKey}
       className={`embla__dots embla__dots--${dotType}`}
-      style={style}
+      style={containerStyle}
     >
-      {scrollSnaps.map((snap, index) => (
-        <button
-          key={index}
-          onClick={() => emblaApi?.scrollTo(snap)}
-          className={`embla__dot ${selectedIndex === index ? 'embla__dot--selected' : ''}`}
-        >
-          {index === selectedIndex ? '●' : '○'}
-        </button>
-      ))}
+      {scrollSnaps.map((snap, index) => {
+        const isDotSelected = selectedIndex === index;
+        const dotSize = dotSizeCss;
+        const resolvedColor =
+          isDotSelected && resolvedActiveDotColor
+            ? resolvedActiveDotColor
+            : resolvedInactiveDotColor;
+        const activeFallback = '#007AFF';
+        const dotColor = resolvedColor ?? activeFallback;
+
+        return (
+          <button
+            key={index}
+            onClick={() => emblaApi?.scrollTo(snap)}
+            className="embla__dot"
+            style={{
+              width: dotSize,
+              height: dotSize,
+              backgroundColor: dotColor,
+              opacity: isDotSelected ? 1 : inactiveDotOpacity,
+              borderRadius: '9999px',
+              border: 0,
+              padding: 0,
+              margin: 0,
+              display: 'inline-block',
+              cursor: 'pointer',
+              boxSizing: 'border-box',
+            }}
+            aria-label={`Go to slide ${index + 1}`}
+            aria-current={isDotSelected ? 'true' : undefined}
+          />
+        );
+      })}
     </div>
   );
 }