@developer_tribe/react-builder 1.0.1 → 1.0.2

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

@@ -4,6 +4,7 @@
   "pattern": {
     "type": "OnboardDot",
     "children": "node",
+    "extends": "View",
     "attributes": {
       "dotType": [
         "expanding_dot",
@@ -17,7 +18,59 @@
       "expanding_dot_width": "number",
       "dot_style": "string",
       "container_style": "string",
-      "active_dot_color": "string"
+      "active_dot_color": "color",
+      "flexDirection": "never",
+      "alignItems": "never",
+      "justifyContent": "never"
+    }
+  },
+  "meta": {
+    "desiredParent": [">OnboardProvider"],
+    "label": "Onboard Dot",
+    "description": "Renders onboarding progress dots.",
+    "attributes": {
+      "dotType": {
+        "label": "Dot Type",
+        "description": "Dot animation style.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "inactive_dot_opacity": {
+        "label": "Inactive Dot Opacity",
+        "description": "Opacity for inactive dots.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "expanding_dot_width": {
+        "label": "Expanding Dot Width",
+        "description": "Width used while expanding.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "dot_style": {
+        "label": "Dot Style",
+        "description": "Custom style for each dot.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 4
+      },
+      "container_style": {
+        "label": "Container Style",
+        "description": "Style for the dot wrapper.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 5
+      },
+      "active_dot_color": {
+        "label": "Active Dot Color",
+        "description": "Color of the active dot.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 6
+      }
     }
   }
 }

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

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { OnboardFooterComponentProps } from './OnboardFooterProps.generated';
 import useNode from '../useNode';
 import { useRenderStore } from '../../store';
 import { parseSize } from '../../size-matters';
 import { extractTextStyle } from '../../utils/extractTextStyle';
+import { extractViewStyle } from '../../utils/extractViewStyle';
 import { useLogRender } from '../../utils/useLogRender';
 
 type Segment =
@@ -89,6 +90,8 @@ function buildSegments(
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
   useLogRender('OnboardFooter');
   node = useNode(node);
+  const attributeKey =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardFooter';
   const { appConfig } = useRenderStore((s) => ({
     appConfig: s.appConfig,
   }));
@@ -97,7 +100,8 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   const text = t(node?.attributes?.textLocalizationKey);
-  const style: React.CSSProperties = extractTextStyle(node);
+  const textStyle: React.CSSProperties = extractTextStyle(node);
+  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
 
   const linkStyle = (color?: string): React.CSSProperties => ({
     color,
@@ -107,8 +111,10 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   const paddingHorizontal = parseSize(node?.attributes?.paddingHorizontal);
   return (
     <div
+      attribute-key={attributeKey}
       style={{
-        ...style,
+        ...viewStyle,
+        ...textStyle,
         paddingLeft: paddingHorizontal,
         paddingRight: paddingHorizontal,
         textAlign: 'center',

package/src/build-components/OnboardFooter/OnboardFooterProps.generated.ts

@@ -34,7 +34,7 @@ export interface OnboardFooterPropsGenerated {
   child: string;
   attributes: {
     color?: string;
-    fontSize?: number;
+    fontSize?: string;
     fontWeight?: FontWeightOptionType;
     textAlign?: TextAlignOptionType;
     scrollable?: boolean;
@@ -42,7 +42,7 @@ export interface OnboardFooterPropsGenerated {
     alignItems?: AlignItemsOptionType;
     justifyContent?: JustifyContentOptionType;
     gap?: string;
-    padding?: number;
+    padding?: string;
     paddingHorizontal?: string;
     paddingVertical?: string;
     paddingTop?: string;
@@ -50,7 +50,6 @@ export interface OnboardFooterPropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -58,8 +57,8 @@ export interface OnboardFooterPropsGenerated {
     marginRight?: string;
     backgroundColor?: string;
     borderRadius?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    height?: string;
     textLocalizationKey?: string;
     linkedWordFirstLocalizationKey?: string;
     linkedWordFirstColor?: string;

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

@@ -8,14 +8,70 @@
     "attributes": {
       "textLocalizationKey": "string",
       "linkedWordFirstLocalizationKey": "string",
-      "linkedWordFirstColor": "string",
+      "linkedWordFirstColor": "color",
       "linkedWordFirstPage": "string",
       "linkedWordSecondLocalizationKey": "string",
-      "linkedWordSecondColor": "string",
+      "linkedWordSecondColor": "color",
       "linkedWordSecondPage": "string"
     }
   },
   "defaults": {
     "paddingHorizontal": "24@s"
+  },
+  "meta": {
+    "desiredParent": [">OnboardItem"],
+    "label": "Onboard Footer",
+    "description": "Footer text with optional links.",
+    "attributes": {
+      "textLocalizationKey": {
+        "label": "Text Localization Key",
+        "description": "Localization key for the footer text.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "linkedWordFirstLocalizationKey": {
+        "label": "Linked Word First Localization Key",
+        "description": "Key for the first linked word.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "linkedWordFirstColor": {
+        "label": "Linked Word First Color",
+        "description": "Color of the first linked word.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "linkedWordFirstPage": {
+        "label": "Linked Word First Page",
+        "description": "Page opened by the first link.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 4
+      },
+      "linkedWordSecondLocalizationKey": {
+        "label": "Linked Word Second Localization Key",
+        "description": "Key for the second linked word.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 5
+      },
+      "linkedWordSecondColor": {
+        "label": "Linked Word Second Color",
+        "description": "Color of the second linked word.",
+        "category": "style",
+        "specialCategory": null,
+        "sort": 6
+      },
+      "linkedWordSecondPage": {
+        "label": "Linked Word Second Page",
+        "description": "Page opened by the second link.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 7
+      }
+    }
   }
 }

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

@@ -1,14 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import type { OnboardImageComponentProps } from './OnboardImageProps.generated';
 import Image from '../Image/Image';
 import useNode from '../useNode';
 import Lottie from 'lottie-react';
 import { useLogRender } from '../../utils/useLogRender';
+import { extractViewStyle } from '../../utils/extractViewStyle';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
   useLogRender('OnboardImage');
   node = useNode(node);
+  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'OnboardImage';
   const [lottie, setLottie] = useState<string | null>(null);
+  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
 
   useEffect(() => {
     if (node.attributes?.lottie) {
@@ -19,18 +22,37 @@ function OnboardImage({ node }: OnboardImageComponentProps) {
   }, [node.attributes?.lottie]);
 
   if (node.attributes?.video_url) {
-    return <video autoPlay muted loop src={node.attributes?.video_url} />;
+    return (
+      <video
+        attribute-key={attributeKey}
+        autoPlay
+        muted
+        loop
+        src={node.attributes?.video_url}
+        style={viewStyle}
+      />
+    );
   }
 
   if (node.attributes?.lottie) {
     if (lottie) {
-      return <Lottie animationData={lottie} />;
+      return (
+        <div attribute-key={attributeKey} style={viewStyle}>
+          <Lottie animationData={lottie} />
+        </div>
+      );
     } else {
-      return <div>Loading...</div>;
+      return (
+        <div attribute-key={attributeKey} style={viewStyle}>
+          Loading...
+        </div>
+      );
     }
   }
 
-  return <Image node={{ ...node, type: 'image' } as any} />;
+  return (
+    <Image node={{ ...node, type: 'image', sourceType: attributeKey } as any} />
+  );
 }
 
 export default React.memo(OnboardImage);

package/src/build-components/OnboardImage/OnboardImageProps.generated.ts

@@ -3,15 +3,48 @@
 import type { NodeData } from '../../types/Node';
 
 export type ResizeModeOptionType = 'cover' | 'contain' | 'stretch' | 'center';
+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 interface OnboardImagePropsGenerated {
   child: string;
   attributes: {
     src?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    height?: string;
     resizeMode?: ResizeModeOptionType;
-    borderRadius?: number;
+    borderRadius?: string;
+    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;
     video_url?: string;
     lottie?: string;
   };

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

@@ -9,5 +9,26 @@
       "video_url": "string",
       "lottie": "string"
     }
+  },
+  "meta": {
+    "desiredParent": [">OnboardProvider", ">OnboardItem", "!=Onboard"],
+    "label": "Onboard Image",
+    "description": "Onboarding hero image with media.",
+    "attributes": {
+      "video_url": {
+        "label": "Video Url",
+        "description": "URL for the onboarding video.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "lottie": {
+        "label": "Lottie",
+        "description": "Path to the lottie animation.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 2
+      }
+    }
   }
 }

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

@@ -1,20 +1,25 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
 import { RenderNode } from '../..';
 import { parseSize } from '../../size-matters';
 import { useLogRender } from '../../utils/useLogRender';
+import { extractViewStyle } from '../../utils/extractViewStyle';
 
 function OnboardItem({ node }: OnboardItemComponentProps) {
   useLogRender('OnboardItem');
   node = useNode(node);
+  const attributeKey = (node as any)?.sourceType ?? node.type ?? 'OnboardItem';
   const flexDirection = node.attributes?.flexDirection;
   const display = node.attributes?.display;
   const paddingHorizontal = parseSize(node.attributes?.paddingHorizontal);
+  const viewStyle = useMemo(() => extractViewStyle(node), [node]);
   return (
     <div
+      attribute-key={attributeKey}
       className="embla__slide"
       style={{
+        ...viewStyle,
         gap: parseSize(node.attributes?.gap),
         flexDirection,
         display,

package/src/build-components/OnboardItem/OnboardItemProps.generated.ts

@@ -2,16 +2,48 @@
 
 import type { NodeData } from '../../types/Node';
 
-export type DisplayOptionType = 'flex' | 'block';
 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 DisplayOptionType = 'flex' | 'block';
 
 export interface OnboardItemPropsGenerated {
   child: string;
   attributes: {
-    display?: DisplayOptionType;
-    gap?: string;
+    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;
+    height?: string;
+    display?: DisplayOptionType;
   };
 }
 

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

@@ -4,11 +4,12 @@
   "pattern": {
     "type": "OnboardItem",
     "children": "node",
+    "extends": "View",
     "attributes": {
       "display": ["flex", "block"],
-      "gap": "string",
+      "gap": "size",
       "flexDirection": ["row", "column"],
-      "paddingHorizontal": "string"
+      "paddingHorizontal": "size"
     }
   },
   "defaults": {
@@ -16,5 +17,40 @@
     "display": "flex",
     "flexDirection": "column",
     "paddingHorizontal": "24@s"
+  },
+  "meta": {
+    "desiredParent": ["=Onboard"],
+    "label": "Onboard Item",
+    "description": "Single onboarding screen section.",
+    "attributes": {
+      "display": {
+        "label": "Display",
+        "description": "Controls layout display mode.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "gap": {
+        "label": "Gap",
+        "description": "Space between child blocks.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "flexDirection": {
+        "label": "Flex Direction",
+        "description": "Order of child stacking.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 3
+      },
+      "paddingHorizontal": {
+        "label": "Padding Horizontal",
+        "description": "Left and right padding.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 4
+      }
+    }
   }
 }

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

@@ -12,11 +12,15 @@ 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 attributeKey =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardProvider';
   const device = useRenderStore((s) => s.device);
   const [emblaRef, emblaApi] = useEmblaCarousel(node.attributes as any);
   const [selectedIndex, setSelectedIndex] = useState(0);
@@ -51,19 +55,27 @@ 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']>,
+    );
+    //NOTE: Embla için istisna
+    style.display = 'block';
+    return style;
+  }, [node]);
+
   return (
     <onboardContext.Provider value={{ emblaApi, selectedIndex }}>
       <div
+        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,
+          ...viewStyle,
+          paddingTop: node.attributes?.paddingTop,
+          paddingRight: node.attributes?.paddingRight,
+          paddingBottom: node.attributes?.paddingBottom,
+          paddingLeft: node.attributes?.paddingLeft,
         }}
       >
         <div className="embla">

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

@@ -2,15 +2,48 @@
 
 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 interface OnboardProviderPropsGenerated {
   child: string;
   attributes: {
+    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;
+    height?: string;
     theme?: string;
     use_safe_area_inset?: boolean;
-    paddingTop?: number;
-    paddingRight?: number;
-    paddingBottom?: number;
-    paddingLeft?: number;
   };
 }
 

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

@@ -4,13 +4,11 @@
   "pattern": {
     "type": "OnboardProvider",
     "children": "node",
+    "extends": "View",
     "attributes": {
       "theme": "string",
       "use_safe_area_inset": "boolean",
-      "paddingTop": "number",
-      "paddingRight": "number",
-      "paddingBottom": "number",
-      "paddingLeft": "number"
+      "borderRadius": "never"
     }
   },
   "defaults": {
@@ -18,5 +16,54 @@
     "paddingRight": 0,
     "paddingBottom": 8,
     "paddingLeft": 0
+  },
+  "meta": {
+    "desiredParent": ["root"],
+    "label": "Onboard Provider",
+    "description": "Provides shared settings for onboarding.",
+    "attributes": {
+      "theme": {
+        "label": "Theme",
+        "description": "Theme key for onboarding screens.",
+        "category": "other",
+        "specialCategory": null,
+        "sort": 1
+      },
+      "use_safe_area_inset": {
+        "label": "Use Safe Area Inset",
+        "description": "Adds safe area padding.",
+        "category": "container",
+        "specialCategory": null,
+        "sort": 2
+      },
+      "paddingTop": {
+        "label": "Padding Top",
+        "description": "Top padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 3
+      },
+      "paddingRight": {
+        "label": "Padding Right",
+        "description": "Right padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 4
+      },
+      "paddingBottom": {
+        "label": "Padding Bottom",
+        "description": "Bottom padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 5
+      },
+      "paddingLeft": {
+        "label": "Padding Left",
+        "description": "Left padding for the provider.",
+        "category": "container",
+        "specialCategory": "padding",
+        "sort": 6
+      }
+    }
   }
 }