@developer_tribe/react-builder 1.2.14 → 1.2.15

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

@@ -45,32 +45,32 @@
         "view.onboarding.btnTerms": "Terms"
       },
       "ar": {
-        "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": "الشروط"
+        "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"
       }
     },
     "defaultLanguage": "en"
@@ -80,7 +80,9 @@
     "isMain": true,
     "key": "cJVVSS7q9Qe1trnb",
     "attributes": {
-      "useSafeAreaView": true
+      "useSafeAreaView": true,
+      "description": "Ekran\u0131n ana kapsay\u0131c\u0131s\u0131. (#1)",
+      "title": "Main 1"
     },
     "children": [
       {
@@ -108,7 +110,9 @@
                     "attributes": {
                       "style": {
                         "color": "#F4F5FF"
-                      }
+                      },
+                      "description": "Sayfa ba\u015fl\u0131\u011f\u0131. (#1)",
+                      "title": "OnboardTitle 1"
                     },
                     "children": "onboard.title.one-page"
                   },
@@ -117,11 +121,17 @@
                     "attributes": {
                       "style": {
                         "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)",
+                  "title": "OnboardItem 1"
+                }
               },
               {
                 "type": "OnboardItem",
@@ -142,7 +152,9 @@
                     "attributes": {
                       "style": {
                         "color": "#F4F5FF"
-                      }
+                      },
+                      "description": "Sayfa ba\u015fl\u0131\u011f\u0131. (#2)",
+                      "title": "OnboardTitle 2"
                     },
                     "children": "onboard.title.two-page"
                   },
@@ -151,11 +163,17 @@
                     "attributes": {
                       "style": {
                         "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)",
+                  "title": "OnboardItem 2"
+                }
               },
               {
                 "type": "OnboardItem",
@@ -176,7 +194,9 @@
                     "attributes": {
                       "style": {
                         "color": "#F4F5FF"
-                      }
+                      },
+                      "description": "Sayfa ba\u015fl\u0131\u011f\u0131. (#3)",
+                      "title": "OnboardTitle 3"
                     },
                     "children": "onboard.title.three-page"
                   },
@@ -185,11 +205,17 @@
                     "attributes": {
                       "style": {
                         "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)",
+                  "title": "OnboardItem 3"
+                }
               },
               {
                 "type": "OnboardItem",
@@ -210,7 +236,9 @@
                     "attributes": {
                       "style": {
                         "color": "#F4F5FF"
-                      }
+                      },
+                      "description": "Sayfa ba\u015fl\u0131\u011f\u0131. (#4)",
+                      "title": "OnboardTitle 4"
                     },
                     "children": "onboard.title.four-page"
                   },
@@ -219,13 +247,23 @@
                     "attributes": {
                       "style": {
                         "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)",
+                  "title": "OnboardItem 4"
+                }
               }
-            ]
+            ],
+            "attributes": {
+              "description": "Onboarding ana yap\u0131s\u0131. (#1)",
+              "title": "Onboard 1"
+            }
           },
           {
             "type": "OnboardDot",
@@ -239,7 +277,9 @@
             "attributes": {
               "buttons_direction": "row",
               "condition": "carousel-index",
-              "conditionVariable": 0
+              "conditionVariable": 0,
+              "description": "Sayfa buton grubu. (#1)",
+              "title": "OnboardButtons 1"
             },
             "children": [
               {
@@ -285,7 +325,9 @@
             "attributes": {
               "buttons_direction": "row",
               "condition": "carousel-index",
-              "conditionVariable": 1
+              "conditionVariable": 1,
+              "description": "Sayfa buton grubu. (#2)",
+              "title": "OnboardButtons 2"
             },
             "children": [
               {
@@ -331,7 +373,9 @@
             "attributes": {
               "buttons_direction": "row",
               "condition": "carousel-index",
-              "conditionVariable": 2
+              "conditionVariable": 2,
+              "description": "Sayfa buton grubu. (#3)",
+              "title": "OnboardButtons 3"
             },
             "children": [
               {
@@ -381,7 +425,9 @@
             "attributes": {
               "buttons_direction": "row",
               "condition": "carousel-index",
-              "conditionVariable": 3
+              "conditionVariable": 3,
+              "description": "Sayfa buton grubu. (#4)",
+              "title": "OnboardButtons 4"
             },
             "children": [
               {
@@ -425,7 +471,9 @@
           }
         ],
         "attributes": {
-          "theme": "dark"
+          "theme": "dark",
+          "description": "Onboarding sa\u011flay\u0131c\u0131s\u0131. (#1)",
+          "title": "OnboardProvider 1"
         }
       }
     ]

package/src/attributes-editor/AttributesEditorView.tsx

@@ -92,6 +92,42 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
     </div>
   );
 
+  const titleValue = getAttributeValue('title');
+  const descriptionValue = getAttributeValue('description');
+  const topFieldsSection = !isInvalidNode ? (
+    <section className="attributes-editor__top-fields">
+      <div className="attributes-editor__field-wrapper">
+        <label className="attributes-editor__field-label" htmlFor="title">
+          Title (max 20 characters for display purposes)
+        </label>
+        <input
+          id="title"
+          className="input"
+          type="text"
+          maxLength={20}
+          value={typeof titleValue === 'string' ? titleValue : ''}
+          onChange={(event) =>
+            handleAttributeChange('title', event.target.value)
+          }
+        />
+      </div>
+      <div className="attributes-editor__field-wrapper">
+        <label className="attributes-editor__field-label" htmlFor="description">
+          Description (for display purposes)
+        </label>
+        <input
+          id="description"
+          className="input"
+          type="text"
+          value={typeof descriptionValue === 'string' ? descriptionValue : ''}
+          onChange={(event) =>
+            handleAttributeChange('description', event.target.value)
+          }
+        />
+      </div>
+    </section>
+  ) : null;
+
   const mockableSection =
     mockableFeatureKeys.length > 0 ? (
       <section className="attributes-editor__mockable">
@@ -173,7 +209,8 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
     const label = attributeMeta?.[name]?.label ?? name;
     const description = attributeMeta?.[name]?.description;
     const preferredScale = toPreferredScale(
-      attributeMeta?.[name]?.preferedScale,
+      attributeMeta?.[name]?.preferredScale ??
+        attributeMeta?.[name]?.preferedScale,
     );
     const isBoolean = isBooleanFieldType(type);
     const wrapperClassNames = [
@@ -336,6 +373,7 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
   return (
     <div className="attributes-editor">
       {headerSection}
+      {topFieldsSection}
       {mockableSection}
       {tabsSection}
       {childrenSection}

package/src/attributes-editor/Field.tsx

@@ -116,6 +116,7 @@ export function Field({
               />
             );
           case 'string':
+          case 'description':
             return (
               <input
                 type="text"
@@ -130,6 +131,22 @@ export function Field({
                 style={{ flex: 1 }}
               />
             );
+          case 'title':
+            return (
+              <input
+                type="text"
+                value={itemValue ?? ''}
+                maxLength={20}
+                onChange={(e) => {
+                  const next = [...arr];
+                  next[idx] =
+                    e.target.value === '' ? undefined : e.target.value;
+                  onChange(next);
+                }}
+                className="input"
+                style={{ flex: 1 }}
+              />
+            );
           case 'color':
             return (
               <ColorPickerButton
@@ -479,10 +496,23 @@ export function Field({
         />
       );
     case 'string':
+    case 'description':
+      return (
+        <input
+          type="text"
+          value={value ?? ''}
+          onChange={(e) =>
+            onChange(e.target.value === '' ? undefined : e.target.value)
+          }
+          className="input"
+        />
+      );
+    case 'title':
       return (
         <input
           type="text"
           value={value ?? ''}
+          maxLength={20}
           onChange={(e) =>
             onChange(e.target.value === '' ? undefined : e.target.value)
           }

package/src/build-components/BIcon/BIconProps.generated.ts

@@ -64,6 +64,8 @@ export interface BIconPropsGenerated {
   child: string;
   attributes: {
     style?: BIconStyleGenerated;
+    title?: string;
+    description?: string;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;

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

@@ -5,6 +5,8 @@
     "children": "never",
     "extends": "Text",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "iconType": "iconType",
       "size": "number",
       "strokeWidth": "number"

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

@@ -59,6 +59,8 @@ export interface BackgroundImagePropsGenerated {
   child: string;
   attributes: {
     style?: BackgroundImageStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     src?: string;
     resizeMode?: ResizeModeOptionType;

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

@@ -5,6 +5,8 @@
     "children": "never",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "src": "string",
       "resizeMode": ["cover", "contain", "stretch", "center"]
     },

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

@@ -73,6 +73,8 @@ export interface ButtonPropsGenerated {
   child: string;
   attributes: {
     style?: ButtonStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
   };
 }

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

@@ -5,6 +5,8 @@
     "children": "string",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "style": {
         "color": "color",
         "fontSize": "size",

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

@@ -59,6 +59,8 @@ export interface CarouselPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     loop?: boolean;
     dragFree?: boolean;

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

@@ -5,6 +5,8 @@
     "type": "Carousel",
     "children": "node",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "loop": "boolean",
       "dragFree": "boolean",
       "align": [

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

@@ -62,6 +62,8 @@ export interface CarouselButtonsPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselButtonsStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     buttonType?: ButtonTypeOptionType;
     skipNumber?: number;

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

@@ -5,6 +5,8 @@
     "children": "never",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "buttonType": [
         "previous_button",
         "next_button",

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

@@ -65,6 +65,8 @@ export interface CarouselDotsPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselDotsStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
     dotType?: DotTypeOptionType;
   };

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

@@ -5,6 +5,8 @@
     "children": "never",
     "extends": "View",
     "attributes": {
+      "title": "title",
+      "description": "description",
       "dotType": [
         "expanding_dot",
         "normal_dot",

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

@@ -58,6 +58,8 @@ export interface CarouselItemPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselItemStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
   };
 }

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

@@ -4,7 +4,10 @@
     "type": "CarouselItem",
     "children": "node",
     "extends": "View",
-    "attributes": {}
+    "attributes": {
+      "title": "title",
+      "description": "description"
+    }
   },
   "meta": {
     "desiredParent": [

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

@@ -58,6 +58,8 @@ export interface CarouselProviderPropsGenerated {
   child: string;
   attributes: {
     style?: CarouselProviderStyleGenerated;
+    title?: string;
+    description?: string;
     scrollable?: boolean;
   };
 }

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

@@ -5,7 +5,10 @@
     "type": "CarouselProvider",
     "children": "node",
     "extends": "View",
-    "attributes": {}
+    "attributes": {
+      "title": "title",
+      "description": "description"
+    }
   },
   "meta": {
     "desiredParent": ["root", ">View"],

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

@@ -0,0 +1,73 @@
+import React, { useEffect, useId, useState } from 'react';
+import type { CountDownComponentProps } from './CountDownProps.generated';
+import useNode from '../useNode';
+import { useBuilderParams } from '../../components/BuilderProvider';
+import { useExtractTextStyle } from '../../attribute-analyser/style/web/useExtractTextStyle';
+import { useLogRender } from '../../utils/useLogRender';
+import { isNodeSelected, SELECTED_OUTLINE_STYLE } from '../../utils/selection';
+import { useMergedStyle } from '../../utils/useMergedStyle';
+import { formatCountdownTime } from './formatCountdownTime';
+
+const DEFAULT_FORMAT = 'm : s';
+
+//Optimzation trade off by readability: skip React.memo to keep named exports.
+export function CountDown({ node }: CountDownComponentProps) {
+  useLogRender('CountDown');
+  node = useNode(node);
+
+  const generatedId = useId();
+  const attributeName = node.sourceType ?? node.type ?? 'CountDown';
+  const attributeKey = node.key ?? generatedId;
+
+  const { previewMode, selectedKey } = useBuilderParams();
+  const baseStyle = useExtractTextStyle(node);
+  const isSelected = isNodeSelected({
+    previewMode: !!previewMode,
+    current: selectedKey ? { key: selectedKey } : undefined,
+    node,
+  });
+  const style = useMergedStyle(
+    baseStyle,
+    isSelected ? SELECTED_OUTLINE_STYLE : undefined,
+  );
+
+  const rawCount = node.attributes?.count;
+  const delayMs =
+    typeof rawCount === 'number' && Number.isFinite(rawCount)
+      ? Math.max(0, rawCount)
+      : 0;
+
+  const [time, setTime] = useState<string>('');
+
+  useEffect(() => {
+    const targetTimeMs = Date.now() + delayMs;
+    setTime(formatCountdownTime(targetTimeMs, DEFAULT_FORMAT));
+
+    if (delayMs <= 0) {
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      const nowMs = Date.now();
+      const diffMs = targetTimeMs - nowMs;
+      setTime(formatCountdownTime(targetTimeMs, DEFAULT_FORMAT, nowMs));
+      if (diffMs <= 0) {
+        clearInterval(intervalId);
+      }
+    }, 950); // Keep slightly under 1s to reduce visible drift.
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [delayMs]);
+
+  return (
+    <p
+      attribute-name={attributeName}
+      attribute-key={attributeKey}
+      style={style}
+    >
+      {time}
+    </p>
+  );
+}