@developer_tribe/react-builder 1.1.0 → 1.2.0

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

@@ -2,6 +2,7 @@ import React, {
   createContext,
   useContext,
   useEffect,
+  useId,
   useMemo,
   useState,
 } from 'react';
@@ -11,28 +12,52 @@ import useEmblaCarousel from 'embla-carousel-react';
 import RenderNode from '../RenderNode.generated';
 import { useRenderStore } from '../../store';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import { ViewPropsGenerated } from '../View/ViewProps.generated';
 
 export const onboardContext = createContext<any>(undefined);
 function OnboardProvider({ node }: OnboardProviderComponentProps) {
+  useLogRender('OnboardProvider');
   node = useNode(node);
-  const device = useRenderStore((s) => s.device);
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardProvider';
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
   const [selectedIndex, setSelectedIndex] = useState(0);
+  const attributeKey = node.key ?? generatedId;
 
   const children = useMemo(() => {
-    const onboardChild: NodeData = (node.children as NodeData[]).filter(
-      (c) => c.type === 'Onboard',
-    )[0];
-    if (onboardChild?.type !== 'Onboard') {
-      throw new Error('OnboardProvider at least has an Onboard child');
+    const allChildren = (node.children as NodeData[]) ?? [];
+
+    // Find the main Onboard child, if any
+    const onboardChild = allChildren.find((c) => c.type === 'Onboard');
+    if (!onboardChild || onboardChild.type !== 'Onboard') {
+      // Fallback: no onboard structure, just render original children
+      return allChildren;
+    }
+
+    const onboardItems = (onboardChild.children as NodeData[]) ?? [];
+    if (!onboardItems.length) {
+      return allChildren;
     }
-    const onboardItems = onboardChild.children as NodeData[];
 
+    // Clamp selected index to available items
+    const clampedIndex = Math.min(
+      Math.max(selectedIndex, 0),
+      onboardItems.length - 1,
+    );
+
+    const selectedItem = onboardItems[clampedIndex];
     const onboardButtons = (
-      onboardItems[selectedIndex].children as NodeData[]
-    ).filter((s) => (s as NodeData)?.type == 'OnboardButtons');
-    const children: NodeData[] = node.children as NodeData[];
-    return [...children, ...onboardButtons];
+      (selectedItem?.children as NodeData[]) ?? []
+    ).filter((s) => (s as NodeData)?.type === 'OnboardButtons');
+
+    return [...allChildren, ...onboardButtons];
   }, [selectedIndex, node.children]);
 
   useEffect(() => {
@@ -49,20 +74,24 @@ function OnboardProvider({ node }: OnboardProviderComponentProps) {
     }
   }, [theme]);*/
 
+  //TODO: pattern içinde direk gömmek yerine orada da inhertince eklenebilir
+  const viewStyle = useMemo(() => {
+    const style = extractViewStyle(
+      node as NodeData<ViewPropsGenerated['attributes']>,
+      { appConfig, projectColors },
+    );
+    //NOTE: Embla için istisna
+    style.display = 'block';
+    return style;
+  }, [node, appConfig, projectColors]);
+
   return (
     <onboardContext.Provider value={{ emblaApi, selectedIndex }}>
       <div
+        attribute-name={attributeName}
+        attribute-key={attributeKey}
         className="carousel-provider"
-        style={{
-          paddingTop:
-            device?.insets?.[0] + (node.attributes as any)?.paddingTop,
-          paddingRight:
-            device?.insets?.[1] + (node.attributes as any)?.paddingRight,
-          paddingBottom:
-            device?.insets?.[2] + (node.attributes as any)?.paddingBottom,
-          paddingLeft:
-            device?.insets?.[3] + (node.attributes as any)?.paddingLeft,
-        }}
+        style={viewStyle}
       >
         <div className="embla">
           <div className="embla__viewport" ref={emblaRef}>

package/src/build-components/OnboardProvider/OnboardProviderProps.generated.ts

@@ -2,15 +2,61 @@
 
 import type { NodeData } from '../../types/Node';
 
+export type FlexDirectionOptionType = 'row' | 'column';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+export type ThemeOptionType = 'light' | 'dark' | 'all';
+
 export interface OnboardProviderPropsGenerated {
   child: string;
   attributes: {
-    theme?: string;
-    use_safe_area_inset?: boolean;
-    paddingTop?: number;
-    paddingRight?: number;
-    paddingBottom?: number;
-    paddingLeft?: number;
+    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?: never;
+    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;
+    theme?: ThemeOptionType;
   };
 }
 

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

@@ -1,22 +1,66 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardProvider",
     "children": "node",
+    "extends": "View",
     "attributes": {
-      "theme": "string",
-      "use_safe_area_inset": "boolean",
-      "paddingTop": "number",
-      "paddingRight": "number",
-      "paddingBottom": "number",
-      "paddingLeft": "number"
+      "theme": [
+        "light",
+        "dark",
+        "all"
+      ],
+      "borderRadius": "never"
     }
   },
   "defaults": {
-    "paddingTop": 0,
-    "paddingRight": 0,
-    "paddingBottom": 8,
-    "paddingLeft": 0
+    "style": {
+      "width": "100%",
+      "height": "100%"
+    }
+  },
+  "meta": {
+    "desiredParent": [
+      "root"
+    ],
+    "label": "Onboard Provider",
+    "description": "Provides shared settings for onboarding.",
+    "styles": {
+      "theme": {
+        "label": "Theme",
+        "description": "Controls which app theme(s) this onboarding is intended for.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": -10
+      },
+      "paddingTop": {
+        "label": "Padding Top",
+        "description": "Top padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 1
+      },
+      "paddingRight": {
+        "label": "Padding Right",
+        "description": "Right padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 2
+      },
+      "paddingBottom": {
+        "label": "Padding Bottom",
+        "description": "Bottom padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 3
+      },
+      "paddingLeft": {
+        "label": "Padding Left",
+        "description": "Left padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 4
+      }
+    }
   }
 }

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardSubtitleComponentProps } from './OnboardSubtitleProps.generated';
 import Text from '../Text/Text';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardSubtitle({ node }: OnboardSubtitleComponentProps) {
+  useLogRender('OnboardSubtitle');
   node = useNode(node);
   return <Text node={node} />;
 }

package/src/build-components/OnboardSubtitle/OnboardSubtitleProps.generated.ts

@@ -2,18 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type FontWeightOptionType =
-  | 'normal'
-  | 'bold'
-  | '100'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '700'
-  | '800'
-  | '900';
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
@@ -29,20 +17,25 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardSubtitlePropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     color?: string;
-    fontSize?: number;
-    fontWeight?: FontWeightOptionType;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
     textAlign?: TextAlignOptionType;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
     justifyContent?: JustifyContentOptionType;
     gap?: string;
-    padding?: number;
+    padding?: string;
     paddingHorizontal?: string;
     paddingVertical?: string;
     paddingTop?: string;
@@ -50,7 +43,6 @@ export interface OnboardSubtitlePropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -58,8 +50,19 @@ export interface OnboardSubtitlePropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
-    width?: number;
-    height?: number;
+    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;
   };
 }
 

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

@@ -1,14 +1,24 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardSubtitle",
-    "children": "node",
+    "children": "string",
     "extends": "Text",
     "attributes": {}
   },
   "defaults": {
-    "fontSize": "14@fs",
-    "fontWeight": "600"
+    "style": {
+      "fontSize": "14@fs",
+      "fontWeight": "600"
+    }
+  },
+  "meta": {
+    "desiredParent": [
+      ">OnboardProvider",
+      ">OnboardItem"
+    ],
+    "label": "Onboard Subtitle",
+    "description": "Subtitle text for an onboarding step.",
+    "styles": {}
   }
 }

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

@@ -2,8 +2,10 @@ import React from 'react';
 import type { OnboardTitleComponentProps } from './OnboardTitleProps.generated';
 import Text from '../Text/Text';
 import useNode from '../useNode';
+import { useLogRender } from '../../utils/useLogRender';
 
 function OnboardTitle({ node }: OnboardTitleComponentProps) {
+  useLogRender('OnboardTitle');
   node = useNode(node);
   return <Text node={node} />;
 }

package/src/build-components/OnboardTitle/OnboardTitleProps.generated.ts

@@ -2,18 +2,6 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type FontWeightOptionType =
-  | 'normal'
-  | 'bold'
-  | '100'
-  | '200'
-  | '300'
-  | '400'
-  | '500'
-  | '600'
-  | '700'
-  | '800'
-  | '900';
 export type TextAlignOptionType = 'left' | 'center' | 'right' | 'justify';
 export type FlexDirectionOptionType = 'row' | 'column';
 export type AlignItemsOptionType =
@@ -29,20 +17,25 @@ export type JustifyContentOptionType =
   | 'space-between'
   | 'space-around'
   | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardTitlePropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     color?: string;
-    fontSize?: number;
-    fontWeight?: FontWeightOptionType;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
     textAlign?: TextAlignOptionType;
+    adjustsFontSizeToFit?: boolean;
+    showEllipsis?: boolean;
     scrollable?: boolean;
     flexDirection?: FlexDirectionOptionType;
     alignItems?: AlignItemsOptionType;
     justifyContent?: JustifyContentOptionType;
     gap?: string;
-    padding?: number;
+    padding?: string;
     paddingHorizontal?: string;
     paddingVertical?: string;
     paddingTop?: string;
@@ -50,7 +43,6 @@ export interface OnboardTitlePropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -58,8 +50,19 @@ export interface OnboardTitlePropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
-    width?: number;
-    height?: number;
+    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;
   };
 }
 

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

@@ -1,15 +1,25 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardTitle",
-    "children": "node",
+    "children": "string",
     "extends": "Text",
     "attributes": {}
   },
   "defaults": {
-    "fontSize": "24@fs",
-    "fontWeight": "700",
-    "textAlign": "center"
+    "style": {
+      "fontSize": "24@fs",
+      "fontWeight": "700",
+      "textAlign": "center"
+    }
+  },
+  "meta": {
+    "desiredParent": [
+      ">OnboardItem",
+      ">OnboardProvider"
+    ],
+    "label": "Onboard Title",
+    "description": "Title text for an onboarding step.",
+    "styles": {}
   }
 }

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

@@ -0,0 +1,47 @@
+import React, { useId, useMemo } from 'react';
+import type { PaywallBackgroundComponentProps } from './PaywallBackgroundProps.generated';
+import useNode from '../useNode';
+import { useRenderStore } from '../../store';
+import { extractViewStyle } from '../../utils/extractViewStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+
+function PaywallBackground({ node }: PaywallBackgroundComponentProps) {
+  useLogRender('PaywallBackground');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.type ?? 'PaywallBackground';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, current, appConfig, projectColors } = useRenderStore(
+    (s) => ({
+      previewMode: s.previewMode,
+      current: s.current,
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+    }),
+  );
+
+  const baseStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  return (
+    <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    />
+  );
+}
+
+export default React.memo(PaywallBackground);

package/src/build-components/PaywallBackground/PaywallBackgroundProps.generated.ts

@@ -0,0 +1,63 @@
+/* AUTO-GENERATED FILE - DO NOT EDIT */
+
+import type { NodeData } from '../../types/Node';
+
+export type FlexDirectionOptionType = 'row' | 'column';
+export type AlignItemsOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'stretch'
+  | 'baseline';
+export type JustifyContentOptionType =
+  | 'flex-start'
+  | 'center'
+  | 'flex-end'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly';
+export type PositionOptionType = 'relative' | 'absolute';
+
+export interface PaywallBackgroundPropsGenerated {
+  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;
+  };
+}
+
+export interface PaywallBackgroundComponentProps {
+  node: NodeData<PaywallBackgroundPropsGenerated['attributes']>;
+}

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

@@ -0,0 +1,17 @@
+{
+  "schemaVersion": 2,
+  "pattern": {
+    "type": "PaywallBackground",
+    "children": "never",
+    "extends": "View",
+    "attributes": {}
+  },
+  "meta": {
+    "desiredParent": [
+      ">PaywallProvider"
+    ],
+    "label": "Paywall Background",
+    "description": "Paywall Background component.",
+    "styles": {}
+  }
+}