@developer_tribe/react-builder 1.2.20 → 1.2.22

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -21,6 +22,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface BackgroundImageStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -32,6 +33,7 @@ export type FontWeightOptionType =
 
 export interface ButtonStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type AlignOptionType = 'start' | 'center' | 'end';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -21,6 +22,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface CarouselStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -9,17 +9,11 @@
       "description": "description",
       "loop": "boolean",
       "dragFree": "boolean",
-      "align": [
-        "start",
-        "center",
-        "end"
-      ]
+      "align": ["start", "center", "end"]
     }
   },
   "meta": {
-    "desiredParent": [
-      "=CarouselProvider"
-    ],
+    "desiredParent": ["=CarouselProvider"],
     "label": "Carousel",
     "description": "Container for carousel items.",
     "styles": {}

package/src/build-components/CarouselButtons/CarouselButtonsProps.generated.ts

@@ -7,6 +7,7 @@ export type ButtonTypeOptionType =
   | 'next_button'
   | 'skip_button';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -24,6 +25,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface CarouselButtonsStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -7,19 +7,12 @@
     "attributes": {
       "title": "title",
       "description": "description",
-      "buttonType": [
-        "previous_button",
-        "next_button",
-        "skip_button"
-      ],
+      "buttonType": ["previous_button", "next_button", "skip_button"],
       "skipNumber": "number"
     }
   },
   "meta": {
-    "desiredParent": [
-      ">OnboardProvider",
-      ">CarouselProvider"
-    ],
+    "desiredParent": [">OnboardProvider", ">CarouselProvider"],
     "label": "Carousel Buttons",
     "description": "Renders built-in carousel buttons.",
     "styles": {},

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

@@ -10,6 +10,7 @@ export type DotTypeOptionType =
   | 'sliding_dot'
   | 'liquid_like';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -27,6 +28,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface CarouselDotsStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -18,9 +18,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      ">CarouselProvider"
-    ],
+    "desiredParent": [">CarouselProvider"],
     "label": "Carousel Dots",
     "description": "Renders page indicator dots.",
     "styles": {

package/src/build-components/CarouselItem/CarouselItemProps.generated.ts

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface CarouselItemStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -10,9 +10,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "=Carousel"
-    ],
+    "desiredParent": ["=Carousel"],
     "label": "Carousel Item",
     "description": "Single slide inside a carousel.",
     "styles": {}

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

@@ -4,9 +4,8 @@ import RenderNode from '../RenderNode.generated';
 import useEmblaCarousel from 'embla-carousel-react';
 import useNode from '../useNode';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
-import { isCarousel } from '../../utils/isCarousel';
-import type { Node, NodeData } from '../../types/Node';
 
+//TODO: hızlıca carousel paywall ekelyebiliriz.
 export const carouselContext = createContext<any>(undefined);
 function CarouselProvider({ node }: CarouselProviderComponentProps) {
   node = useNode(node);
@@ -16,58 +15,20 @@ function CarouselProvider({ node }: CarouselProviderComponentProps) {
   const attributeKey = node.key ?? generatedId;
   const viewStyle = useExtractViewStyle(node);
 
-  const { carouselChild, otherChildren } = useMemo(() => {
-    const children = node.children as Node;
-
-    if (!children) {
-      return {
-        carouselChild: null as NodeData | null,
-        otherChildren: [] as Node[],
-      };
-    }
-
-    if (Array.isArray(children)) {
-      const idx = children.findIndex((c) => isCarousel(c));
-      const carousel = idx >= 0 ? (children[idx] as NodeData) : null;
-      const rest = idx >= 0 ? children.filter((_, i) => i !== idx) : children;
-      return { carouselChild: carousel, otherChildren: rest };
-    }
-
-    if (isCarousel(children)) {
-      return {
-        carouselChild: children as NodeData,
-        otherChildren: [] as Node[],
-      };
-    }
-
-    // Non-carousel single child (e.g. dots/buttons): treat as "other" so we don't mount embla with an invalid DOM.
-    return {
-      carouselChild: null as NodeData | null,
-      otherChildren: [children],
-    };
-  }, [node.children]);
-
   return (
     <carouselContext.Provider value={emblaApi}>
       <div
         attribute-name={attributeName}
         attribute-key={attributeKey}
         className="carousel-provider"
-        style={viewStyle}
+        //NOTE: this feature is only for embla hack. On RN we use flatlist
+        style={{ ...viewStyle, display: 'block' }}
       >
         <div className="embla">
-          <div
-            className="embla__viewport"
-            ref={carouselChild ? emblaRef : undefined}
-          >
-            {carouselChild ? <RenderNode node={carouselChild} /> : null}
+          <div className="embla__viewport" ref={emblaRef}>
+            {node.children && <RenderNode node={node.children} />}
           </div>
         </div>
-        {otherChildren.length > 0
-          ? otherChildren.map((child, index) => (
-              <RenderNode key={index} node={child} />
-            ))
-          : null}
       </div>
     </carouselContext.Provider>
   );

package/src/build-components/CarouselProvider/CarouselProviderProps.generated.ts

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface CarouselProviderStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -8,6 +8,12 @@
     "attributes": {
       "title": "title",
       "description": "description"
+    },
+    "defaults": {
+      "style": {
+        "width": "100%",
+        "height": "100%"
+      }
     }
   },
   "meta": {

package/src/build-components/CountDown/CountDownProps.generated.ts

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export interface CountDownStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -21,4 +21,3 @@
     }
   }
 }
-

package/src/build-components/Counter/CounterProps.generated.ts

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export interface CounterStyleGenerated {
   fontWeight?: string;
   textAlign?: TextAlignOptionType;
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -23,4 +23,3 @@
     }
   }
 }
-

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

@@ -33,7 +33,7 @@ function Image({ node }: ImageComponentProps) {
       attribute-name={attributeName}
       attribute-key={attributeKey}
       src={resolveImageSrc(src)}
-      style={style}
+      style={{ ...style, width: 'auto', maxWidth: '100%' }}
       alt=""
     />
   );

package/src/build-components/Image/ImageProps.generated.ts

@@ -4,6 +4,7 @@ import type { NodeData } from '../../types/Node';
 
 export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -21,6 +22,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface ImageStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

package/src/build-components/Main/MainProps.generated.ts

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface MainStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -20,9 +20,7 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "root"
-    ],
+    "desiredParent": ["root"],
     "label": "Main",
     "description": "Top-level screen wrapper (safe area, base layout).",
     "hideAllAttributes": true,

package/src/build-components/Onboard/OnboardProps.generated.ts

@@ -3,6 +3,7 @@
 import type { NodeData } from '../../types/Node';
 
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -20,6 +21,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -10,12 +10,8 @@
     }
   },
   "meta": {
-    "desiredParent": [
-      "=OnboardProvider"
-    ],
-    "desiredChildren": [
-      "=OnboardItem"
-    ],
+    "desiredParent": ["=OnboardProvider"],
+    "desiredChildren": ["=OnboardItem"],
     "label": "Onboard",
     "description": "Wraps the onboarding flow.",
     "styles": {}

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

@@ -80,7 +80,6 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
     <button
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      className="onboard__button"
       onClick={handleClick}
       style={{
         ...viewStyle,
@@ -88,10 +87,7 @@ function OnboardButton({ node }: OnboardButtonComponentProps) {
         color: textColor,
         backgroundColor,
         border: 'none',
-        borderRadius: 20,
-        height: '100%',
         display: 'flex',
-        alignItems: 'center',
         justifyContent: 'center',
         cursor: 'pointer',
       }}

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

@@ -11,6 +11,7 @@ export type AnimationOptionType =
   | 'blur-animation'
   | 'blur-line-animation';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -35,6 +36,7 @@ export interface EventObjectGenerated {
 
 export interface OnboardButtonStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -20,29 +20,24 @@
       "button_background_color": "color",
       "flex": "number",
       "events": "EventObject[]"
+    },
+    "defaults": {
+      "style": {
+        "height": "40@vs",
+        "borderRadius": "12@s"
+      }
     }
   },
   "types": {
     "EventObject": {
-      "type": [
-        "Permission",
-        "Navigate"
-      ],
-      "permission": [
-        "att",
-        "notification",
-        "rating",
-        "GDPR",
-        "null"
-      ],
+      "type": ["Permission", "Navigate"],
+      "permission": ["att", "notification", "rating", "GDPR", "null"],
       "navigate_to": "string",
       "targetIndex": "number"
     }
   },
   "meta": {
-    "desiredParent": [
-      "=OnboardButtons"
-    ],
+    "desiredParent": ["=OnboardButtons"],
     "label": "Onboard Button",
     "description": "Single action button for onboarding.",
     "styles": {

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

@@ -7,12 +7,14 @@ import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';
 import { useLogRender } from '../../utils/useLogRender';
 import { useExtractViewStyle } from '../../attribute-analyser/style/web/useExtractViewStyle';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 function OnboardButtons({ node }: OnboardButtonsComponentProps) {
   useLogRender('OnboardButtons');
   node = useNode(node);
   const attributeName = node.sourceType ?? node.type ?? 'OnboardButtons';
-  const { appConfig } = useBuilderParams();
+  const { appConfig, previewMode, selectedKey } = useBuilderParams();
   const seperatorColorDefault =
     appConfig?.theme === 'light'
       ? appConfig?.screenStyle?.light?.seperatorColor
@@ -35,14 +37,6 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     'column'
       ? 'column'
       : 'row';
-  const seperatorColor =
-    attributes?.seperatorColor ??
-    (styleBag as any)?.seperatorColor ??
-    seperatorColorDefault;
-  const buttonsClassName =
-    direction === 'column'
-      ? 'onboard__buttons onboard__buttons--column'
-      : 'onboard__buttons onboard__buttons--row';
 
   const children = useMemo(() => {
     const raw = node.children as unknown;
@@ -52,7 +46,16 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     return [raw as Node];
   }, [node.children]);
 
-  const viewStyle = useExtractViewStyle(node);
+  const baseStyle = useExtractViewStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const viewStyle = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
 
   // NOTE: Hooks must not be called conditionally.
   // Generate the id before any early returns so the hook order stays stable.
@@ -75,17 +78,11 @@ function OnboardButtons({ node }: OnboardButtonsComponentProps) {
     <div
       attribute-name={attributeName}
       attribute-key={node.key ?? generatedId}
-      style={viewStyle}
+      style={{ ...viewStyle, boxSizing: 'border-box' }}
     >
-      <div
-        className="onboard__separator"
-        style={seperatorColor ? { backgroundColor: seperatorColor } : undefined}
-      />
-      <div className={buttonsClassName}>
-        {children.map((child, idx) => (
-          <RenderNode key={(child as any)?.key ?? idx} node={child} />
-        ))}
-      </div>
+      {children.map((child, idx) => (
+        <RenderNode key={(child as any)?.key ?? idx} node={child} />
+      ))}
     </div>
   );
 }

package/src/build-components/OnboardButtons/OnboardButtonsProps.generated.ts

@@ -9,6 +9,7 @@ export type ButtonTypeOptionType =
 export type ButtonsDirectionOptionType = 'row' | 'column';
 export type ConditionOptionType = 'carousel-index';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -26,6 +27,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardButtonsStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;

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

@@ -7,28 +7,28 @@
     "attributes": {
       "title": "title",
       "description": "description",
-      "buttonType": [
-        "previous_button",
-        "next_button",
-        "skip_button"
-      ],
+      "buttonType": ["previous_button", "next_button", "skip_button"],
       "skipNumber": "number",
-      "buttons_direction": [
-        "row",
-        "column"
-      ],
+      "buttons_direction": ["row", "column"],
       "forIndex": "number",
       "seperatorColor": "color",
-      "condition": [
-        "carousel-index"
-      ],
+      "condition": ["carousel-index"],
       "conditionVariable": "number"
+    },
+    "defaults": {
+      "style": {
+        "display": "flex",
+        "flexDirection": "row",
+        "gap": 12,
+        "alignItems": "center",
+        "justifyContent": "center",
+        "marginVertical": "12@vs",
+        "marginHorizontal": "24@s"
+      }
     }
   },
   "meta": {
-    "desiredParent": [
-      "=OnboardItem"
-    ],
+    "desiredParent": ["=OnboardItem"],
     "label": "Onboard Buttons",
     "description": "Wrapper for onboarding button set.",
     "styles": {

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

@@ -153,9 +153,6 @@ function OnboardDot({ node }: OnboardDotComponentProps) {
         return (
           <button
             key={index}
-            onClick={() => {
-              emblaApi?.scrollTo(snap);
-            }}
             className="embla__dot"
             style={{
               width: dotSizeCss,

package/src/build-components/OnboardDot/OnboardDotProps.generated.ts

@@ -10,6 +10,7 @@ export type DotTypeOptionType =
   | 'sliding_dot'
   | 'liquid_like';
 export type FlexDirectionOptionType = 'row' | 'column';
+export type FlexWrapOptionType = 'nowrap' | 'wrap' | 'wrap-reverse';
 export type AlignItemsOptionType =
   | 'flex-start'
   | 'center'
@@ -27,6 +28,7 @@ export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardDotStyleGenerated {
   flexDirection?: FlexDirectionOptionType;
+  flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
   justifyContent?: JustifyContentOptionType;
   gap?: string;