@developer_tribe/react-builder 1.1.0 → 1.2.1

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

@@ -1,9 +1,13 @@
-import React from 'react';
+import React, { useId, 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';
+import { isNodeSelected } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
 
 type Segment =
   | { type: 'text'; value: string }
@@ -86,16 +90,31 @@ function buildSegments(
 }
 
 function OnboardFooter({ node }: OnboardFooterComponentProps) {
+  useLogRender('OnboardFooter');
   node = useNode(node);
-  const { appConfig } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-  }));
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardFooter';
+  const { appConfig, projectColors, previewMode, current } = useRenderStore(
+    (s) => ({
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+      previewMode: s.previewMode,
+      current: s.current,
+    }),
+  );
   const { localication, defaultLanguage } = appConfig;
   const t = (key?: string) =>
     key ? (localication?.[defaultLanguage ?? 'en']?.[key] ?? key) : '';
 
   const text = t(node?.attributes?.textLocalizationKey);
-  const style: React.CSSProperties = extractTextStyle(node);
+  const textStyle = useMemo(
+    () => extractTextStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
 
   const linkStyle = (color?: string): React.CSSProperties => ({
     color,
@@ -103,14 +122,26 @@ function OnboardFooter({ node }: OnboardFooterComponentProps) {
   });
 
   const paddingHorizontal = parseSize(node?.attributes?.paddingHorizontal);
+  const layoutStyle = useMemo<React.CSSProperties>(
+    () => ({
+      paddingLeft: paddingHorizontal,
+      paddingRight: paddingHorizontal,
+      textAlign: 'center',
+    }),
+    [paddingHorizontal],
+  );
+
+  const isSelected = isNodeSelected({ previewMode, current, node });
+  const baseStyle = useMergedStyle(viewStyle, textStyle);
+  const paddedStyle = useMergedStyle(baseStyle, layoutStyle);
+  const generatedId = useId();
+  const attributeKey = node.key ?? generatedId;
   return (
     <div
-      style={{
-        ...style,
-        paddingLeft: paddingHorizontal,
-        paddingRight: paddingHorizontal,
-        textAlign: 'center',
-      }}
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      className={isSelected ? 'rb-node-selected' : undefined}
+      style={paddedStyle}
     >
       {!!text &&
         (() => {

package/src/build-components/OnboardFooter/OnboardFooterProps.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 OnboardFooterPropsGenerated {
   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 OnboardFooterPropsGenerated {
     paddingLeft?: string;
     paddingRight?: string;
     margin?: string;
-    marginHorizontal?: string;
     marginVertical?: string;
     marginTop?: string;
     marginBottom?: string;
@@ -58,8 +50,19 @@ export interface OnboardFooterPropsGenerated {
     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;
     textLocalizationKey?: string;
     linkedWordFirstLocalizationKey?: string;
     linkedWordFirstColor?: string;

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardFooter",
     "children": "node",
@@ -8,14 +7,74 @@
     "attributes": {
       "textLocalizationKey": "string",
       "linkedWordFirstLocalizationKey": "string",
-      "linkedWordFirstColor": "string",
+      "linkedWordFirstColor": "color",
       "linkedWordFirstPage": "string",
       "linkedWordSecondLocalizationKey": "string",
-      "linkedWordSecondColor": "string",
+      "linkedWordSecondColor": "color",
       "linkedWordSecondPage": "string"
     }
   },
   "defaults": {
-    "paddingHorizontal": "24@s"
+    "style": {
+      "paddingHorizontal": "24@s"
+    }
+  },
+  "meta": {
+    "desiredParent": [
+      ">OnboardItem"
+    ],
+    "label": "Onboard Footer",
+    "description": "Footer text with optional links.",
+    "styles": {
+      "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,12 +1,28 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useId, 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';
+import { useRenderStore } from '../../store';
 
 function OnboardImage({ node }: OnboardImageComponentProps) {
+  useLogRender('OnboardImage');
   node = useNode(node);
+  const generatedId = useId();
+  const attributeName =
+    (node as any)?.sourceType ?? node.type ?? 'OnboardImage';
+  const attributeKey = node.key ?? generatedId;
   const [lottie, setLottie] = useState<string | null>(null);
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
 
   useEffect(() => {
     if (node.attributes?.lottie) {
@@ -17,18 +33,48 @@ 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-name={attributeName}
+        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-name={attributeName}
+          attribute-key={attributeKey}
+          style={viewStyle}
+        >
+          <Lottie animationData={lottie} />
+        </div>
+      );
     } else {
-      return <div>Loading...</div>;
+      return (
+        <div
+          attribute-name={attributeName}
+          attribute-key={attributeKey}
+          style={viewStyle}
+        >
+          Loading...
+        </div>
+      );
     }
   }
 
-  return <Image node={{ ...node, type: 'image' } as any} />;
+  return (
+    <Image
+      node={{ ...node, type: 'image', sourceType: attributeName } as any}
+    />
+  );
 }
 
 export default React.memo(OnboardImage);

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

@@ -3,15 +3,61 @@
 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 type PositionOptionType = 'relative' | 'absolute';
 
 export interface OnboardImagePropsGenerated {
   child: string;
   attributes: {
+    style?: Record<string, unknown>;
     src?: string;
-    width?: number;
-    height?: number;
+    width?: string;
+    height?: string;
     resizeMode?: ResizeModeOptionType;
-    borderRadius?: number;
+    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;
+    minWidth?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    maxHeight?: string;
+    flex?: number;
+    position?: PositionOptionType;
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    zIndex?: number;
     video_url?: string;
     lottie?: string;
   };

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

@@ -1,6 +1,5 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardImage",
     "children": "node",
@@ -9,5 +8,30 @@
       "video_url": "string",
       "lottie": "string"
     }
+  },
+  "meta": {
+    "desiredParent": [
+      ">OnboardProvider",
+      ">OnboardItem",
+      "!=Onboard"
+    ],
+    "label": "Onboard Image",
+    "description": "Onboarding hero image with media.",
+    "styles": {
+      "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,24 +1,32 @@
-import React from 'react';
+import React, { useId, useMemo } from 'react';
 import type { OnboardItemComponentProps } from './OnboardItemProps.generated';
 import useNode from '../useNode';
-import { RenderNode } from '../..';
+import RenderNode from '../RenderNode.generated';
+import { useRenderStore } from '../../store';
 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 flexDirection = node.attributes?.flexDirection;
-  const display = node.attributes?.display;
-  const paddingHorizontal = parseSize(node.attributes?.paddingHorizontal);
+  const generatedId = useId();
+  const attributeName = (node as any)?.sourceType ?? node.type ?? 'OnboardItem';
+  const attributeKey = node.key ?? generatedId;
+  const { appConfig, projectColors } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    projectColors: s.projectColors,
+  }));
+  const viewStyle = useMemo(
+    () => extractViewStyle(node, { appConfig, projectColors }),
+    [node, appConfig, projectColors],
+  );
   return (
     <div
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
       className="embla__slide"
-      style={{
-        gap: parseSize(node.attributes?.gap),
-        flexDirection,
-        display,
-        paddingRight: paddingHorizontal,
-        paddingLeft: paddingHorizontal,
-      }}
+      style={viewStyle}
     >
       {node.children && <RenderNode node={node.children} />}
     </div>

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

@@ -2,16 +2,61 @@
 
 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 PositionOptionType = 'relative' | 'absolute';
+export type DisplayOptionType = 'flex' | 'block';
 
 export interface OnboardItemPropsGenerated {
   child: string;
   attributes: {
-    display?: DisplayOptionType;
-    gap?: string;
+    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;
+    display?: DisplayOptionType;
   };
 }
 

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

@@ -1,20 +1,65 @@
 {
-  "schemaVersion": 1,
-  "allowUnknownAttributes": false,
+  "schemaVersion": 2,
   "pattern": {
     "type": "OnboardItem",
     "children": "node",
+    "extends": "View",
     "attributes": {
-      "display": ["flex", "block"],
-      "gap": "string",
-      "flexDirection": ["row", "column"],
-      "paddingHorizontal": "string"
+      "display": [
+        "flex",
+        "block"
+      ],
+      "gap": "size",
+      "flexDirection": [
+        "row",
+        "column"
+      ],
+      "paddingHorizontal": "size"
     }
   },
   "defaults": {
-    "gap": "16@vs",
     "display": "flex",
-    "flexDirection": "column",
-    "paddingHorizontal": "24@s"
+    "style": {
+      "gap": "16@vs",
+      "flexDirection": "column",
+      "paddingHorizontal": "24@s"
+    }
+  },
+  "meta": {
+    "desiredParent": [
+      "=Onboard"
+    ],
+    "label": "Onboard Item",
+    "description": "Single onboarding screen section.",
+    "styles": {
+      "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
+      }
+    }
   }
 }