@developer_tribe/react-builder 1.2.24 → 1.2.26

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

@@ -314,7 +314,7 @@
               "styles": {
                 "width": "100%",
                 "height": 2,
-                "backgroundColor": "STATIC_COLORS.SEPARATOR_COLOR"
+                "backgroundColor": "STATIC_COLORS.ONBOARD_SEPARATOR_COLOR"
               }
             }
           },
@@ -337,7 +337,7 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.one-page",
-                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
                   "button_background_color": "THEME_COLORS.TEXT",
                   "events": [
                     {
@@ -355,8 +355,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.one-page",
-                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
+                  "button_text_color": "STATIC_COLORS.WHITE",
+                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -390,7 +390,7 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.two-page",
-                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
                   "button_background_color": "THEME_COLORS.TEXT",
                   "events": [
                     {
@@ -408,8 +408,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.two-page",
-                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
+                  "button_text_color": "STATIC_COLORS.WHITE",
+                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Navigate",
@@ -443,7 +443,7 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.skip.three-page",
-                  "button_text_color": "THEME_COLORS.BUTTON_SECONDARY_TEXT",
+                  "button_text_color": "THEME_COLORS.ONBOARD_BUTTON_SECONDARY_TEXT",
                   "button_background_color": "THEME_COLORS.TEXT",
                   "events": [
                     {
@@ -461,8 +461,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.next.three-page",
-                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
+                  "button_text_color": "STATIC_COLORS.WHITE",
+                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -500,8 +500,8 @@
                 "type": "OnboardButton",
                 "attributes": {
                   "labelKey": "onboard.allow.four-page",
-                  "button_text_color": "STATIC_COLORS.BUTTON_PRIMARY_TEXT",
-                  "button_background_color": "STATIC_COLORS.BUTTON_PRIMARY_BACKGROUND",
+                  "button_text_color": "STATIC_COLORS.WHITE",
+                  "button_background_color": "STATIC_COLORS.ONBOARD_BUTTON_PRIMARY_BACKGROUND",
                   "events": [
                     {
                       "type": "Permission",
@@ -535,14 +535,14 @@
                 "attributes": {
                   "textLocalizationKey": "view.onboarding.footer.description",
                   "linkedWordFirstLocalizationKey": "view.onboarding.btnPrivacy",
-                  "linkedWordFirstColor": "STATIC_COLORS.LINK_COLOR",
+                  "linkedWordFirstColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordFirstPage": "privacy",
                   "linkedWordSecondLocalizationKey": "view.onboarding.btnTerms",
-                  "linkedWordSecondColor": "STATIC_COLORS.LINK_COLOR",
+                  "linkedWordSecondColor": "STATIC_COLORS.ONBOARD_LINK_COLOR",
                   "linkedWordSecondPage": "terms",
                   "styles": {
                     "gap": 8,
-                    "color": "THEME_COLORS.FOOTER_TEXT"
+                    "color": "THEME_COLORS.ONBOARD_FOOTER_TEXT"
                   }
                 }
               }

package/src/attributes-editor/AttributesEditorFields.tsx

@@ -14,7 +14,6 @@ type IconTypePickerFieldProps = {
 };
 
 export function IconTypePickerField({
-  name,
   value,
   onChange,
 }: IconTypePickerFieldProps) {

package/src/attributes-editor/AttributesEditorView.tsx

@@ -13,7 +13,6 @@ import type {
   AttributesEditorModel,
   AttributesEditorSpecialSection,
 } from './attributesEditorModelTypes';
-import type { NodeDefaultAttribute } from '../types/Node';
 
 type AttributesEditorViewProps = AttributesEditorModel;
 
@@ -63,6 +62,8 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
     firstAvailableTab,
     activeEntries,
     activeSpecialSections,
+    hasTitleField,
+    hasDescriptionField,
     hasStringChildren,
     childrenValue,
     handleChildrenChange,
@@ -73,7 +74,6 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
     projectColorsForPicker,
     layoutContext,
     viewAttributes,
-    styleBag,
     attributes,
     projectFonts,
     loadedFonts,
@@ -94,37 +94,46 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
 
   const titleValue = getAttributeValue('title');
   const descriptionValue = getAttributeValue('description');
-  const topFieldsSection = !isInvalidNode ? (
+  const showTopFields =
+    !isInvalidNode && (hasTitleField || hasDescriptionField);
+  const topFieldsSection = showTopFields ? (
     <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>
+      {hasTitleField ? (
+        <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>
+      ) : null}
+      {hasDescriptionField ? (
+        <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>
+      ) : null}
     </section>
   ) : null;
 
@@ -346,18 +355,14 @@ export function AttributesEditorView(props: AttributesEditorViewProps) {
       );
     }
 
-    const sectionAttributes =
-      section.meta?.category === 'style'
-        ? ((styleBag ?? {}) as unknown as NodeDefaultAttribute)
-        : attributes;
-
     return (
       <SpecialCategorySection
         key={section.key}
         category={section.key}
         entries={section.entries}
         attributeMeta={attributeMeta}
-        attributes={sectionAttributes}
+        attributes={attributes}
+        getAttributeValue={getAttributeValue}
         onAttributeChange={handleAttributeChange}
         componentType={data?.type}
         projectColors={projectColorsForPicker}

package/src/attributes-editor/Field.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import type { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
 import { ColorModal, resolveProjectColorValue } from '../modals/ColorModal';
 import type { ProjectColors } from '../types/Project';

package/src/attributes-editor/SpecialCategorySection.tsx

@@ -16,6 +16,7 @@ type SpecialCategorySectionProps = {
   entries: SchemaEntry[];
   attributeMeta?: AttributeMetaMap;
   attributes: NodeDefaultAttribute;
+  getAttributeValue: (name: string) => unknown;
   onAttributeChange: (name: string, value: unknown) => void;
   componentType?: string;
   projectColors?: ProjectColors;
@@ -40,7 +41,7 @@ export function SpecialCategorySection({
   category,
   entries,
   attributeMeta,
-  attributes,
+  getAttributeValue,
   onAttributeChange,
   componentType,
   projectColors,
@@ -96,7 +97,7 @@ export function SpecialCategorySection({
           const preferredScale = toPreferredScale(
             attributeMeta?.[name]?.preferedScale,
           );
-          const currentValue = (attributes as Record<string, unknown>)[name];
+          const currentValue = getAttributeValue(name);
           const isBoolean = isBooleanFieldType(type);
           const fieldSlot = detectFieldSlot(name);
           const wrapperClassNames = [
@@ -175,7 +176,7 @@ export function SpecialCategorySection({
           const preferredScale = toPreferredScale(
             attributeMeta?.[name]?.preferedScale,
           );
-          const currentValue = (attributes as Record<string, unknown>)[name];
+          const currentValue = getAttributeValue(name);
           const isBoolean = isBooleanFieldType(type);
           const fieldSlot = detectFieldSlot(name);
           const wrapperClassNames = [
@@ -220,7 +221,7 @@ export function SpecialCategorySection({
             const preferredScale = toPreferredScale(
               attributeMeta?.[name]?.preferedScale,
             );
-            const currentValue = (attributes as Record<string, unknown>)[name];
+            const currentValue = getAttributeValue(name);
             const isBoolean = isBooleanFieldType(type);
             const wrapperClassNames = [
               'attributes-editor__field-wrapper',

package/src/attributes-editor/attributesEditorModelTypes.ts

@@ -81,6 +81,8 @@ export type AttributesEditorModel = {
   mockableFeatureKeys: string[];
   activeMockableFeature: string | null;
   setActiveMockableFeature: (next: string | null) => void;
+  hasTitleField: boolean;
+  hasDescriptionField: boolean;
   hasStringChildren: boolean;
   childrenValue: string;
 };

package/src/attributes-editor/useAttributesEditorModel.ts

@@ -83,9 +83,14 @@ export function useAttributesEditorModel({
   projectColors,
 }: AttributesEditorProps): AttributesEditorModel {
   const isInvalidNode = !node || isNodeString(node);
-  const baseData: NodeData<NodeDefaultAttribute> = isInvalidNode
-    ? { type: 'View', children: null, attributes: {} }
-    : (node as NodeData<NodeDefaultAttribute>);
+  // Memoize baseData to prevent it from changing on every render
+  const baseData = useMemo<NodeData<NodeDefaultAttribute>>(
+    () =>
+      isInvalidNode
+        ? { type: 'View', children: null, attributes: {} }
+        : (node as NodeData<NodeDefaultAttribute>),
+    [isInvalidNode, node],
+  );
 
   const data = useNode(baseData);
   const {
@@ -102,12 +107,17 @@ export function useAttributesEditorModel({
     addError: state.addError,
   }));
 
-  const schema = (getAttributeSchema(data?.type) ?? {}) as Record<
-    string,
-    unknown
-  >;
+  // Memoize schema to prevent it from changing on every render
+  const schema = useMemo(
+    () => (getAttributeSchema(data?.type) ?? {}) as Record<string, unknown>,
+    [data?.type],
+  );
   const attributeMeta = getAttributeMeta(data?.type);
-  const attributes = (data?.attributes ?? {}) as NodeDefaultAttribute;
+  // Memoize attributes to prevent it from changing on every render
+  const attributes = useMemo(
+    () => (data?.attributes ?? {}) as NodeDefaultAttribute,
+    [data?.attributes],
+  );
 
   const styleAttributeKeys = useMemo(() => getStyleAttributeKeySet(), []);
   const styleBagInfo = useMemo(
@@ -217,6 +227,10 @@ export function useAttributesEditorModel({
   const componentTitle = componentMeta?.label ?? data?.type ?? 'Component';
   const componentDescription = componentMeta?.description;
 
+  const hasTitleField = patternForType?.pattern?.title === 'title';
+  const hasDescriptionField =
+    patternForType?.pattern?.description === 'description';
+
   const entries = useMemo(() => {
     return buildAttributesEditorEntries(schema, attributeMeta).filter(
       ({ type }) => (typeof type === 'string' ? type !== 'never' : true),
@@ -477,6 +491,8 @@ export function useAttributesEditorModel({
     mockableFeatureKeys,
     activeMockableFeature,
     setActiveMockableFeature,
+    hasTitleField,
+    hasDescriptionField,
     hasStringChildren,
     childrenValue,
   };

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

@@ -1,4 +1,4 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { BIconComponentProps } from './BIconProps.generated';
 import useNode from '../useNode';
 import { useBuilderParams } from '../../components/BuilderProvider';

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

@@ -66,8 +66,6 @@ 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

@@ -2,11 +2,11 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "BIcon",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "Text",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "iconType": "iconType",
       "size": "number",
       "strokeWidth": "number"

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

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

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

@@ -2,11 +2,11 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "BackgroundImage",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "src": "string",
       "resizeMode": ["cover", "contain", "stretch", "center"]
     },

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

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

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

@@ -2,11 +2,11 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "Button",
+    "title": "title",
+    "description": "description",
     "children": "string",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "style": {
         "color": "color",
         "fontSize": "size",

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

@@ -1,4 +1,4 @@
-import React, { useId, useMemo } from 'react';
+import React, { useId } from 'react';
 import type { CarouselComponentProps } from './CarouselProps.generated';
 import RenderNode from '../RenderNode.generated';
 import { isCarouselItem } from '../../utils/isCarousel';

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

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

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

@@ -1,12 +1,12 @@
 {
   "schemaVersion": 2,
   "pattern": {
-    "extends": "View",
     "type": "Carousel",
+    "title": "title",
+    "description": "description",
+    "extends": "View",
     "children": "node",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "loop": "boolean",
       "dragFree": "boolean",
       "align": ["start", "center", "end"]

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

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

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

@@ -2,11 +2,11 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "CarouselButtons",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "buttonType": ["previous_button", "next_button", "skip_button"],
       "skipNumber": "number"
     }

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

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

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

@@ -2,11 +2,11 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "CarouselDots",
+    "title": "title",
+    "description": "description",
     "children": "never",
     "extends": "View",
     "attributes": {
-      "title": "title",
-      "description": "description",
       "dotType": [
         "expanding_dot",
         "normal_dot",

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

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

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

@@ -2,12 +2,10 @@
   "schemaVersion": 2,
   "pattern": {
     "type": "CarouselItem",
+    "title": "title",
+    "description": "description",
     "children": "node",
-    "extends": "View",
-    "attributes": {
-      "title": "title",
-      "description": "description"
-    }
+    "extends": "View"
   },
   "meta": {
     "desiredParent": ["=Carousel"],

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

@@ -1,4 +1,4 @@
-import React, { createContext, useId, useMemo } from 'react';
+import React, { createContext, useId } from 'react';
 import type { CarouselProviderComponentProps } from './CarouselProviderProps.generated';
 import RenderNode from '../RenderNode.generated';
 import useEmblaCarousel from 'embla-carousel-react';

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

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

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

@@ -3,12 +3,10 @@
   "allowUnknownAttributes": false,
   "pattern": {
     "type": "CarouselProvider",
+    "title": "title",
+    "description": "description",
     "children": "node",
     "extends": "View",
-    "attributes": {
-      "title": "title",
-      "description": "description"
-    },
     "defaults": {
       "style": {
         "width": "100%",

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

@@ -69,11 +69,35 @@ export function CountDown({ node }: CountDownComponentProps) {
     };
   }, [delayMs]);
 
+  const fontSize =
+    typeof style?.fontSize === 'number'
+      ? style.fontSize
+      : typeof style?.fontSize === 'string'
+        ? parseFloat(style.fontSize)
+        : 16;
+
+  const letterSpacing =
+    typeof style?.letterSpacing === 'number'
+      ? style.letterSpacing
+      : typeof style?.letterSpacing === 'string'
+        ? parseFloat(style.letterSpacing)
+        : 0;
+
+  // "00:00" format needs ~5 characters width
+  const charCount = 5;
+  const width = fontSize * charCount * 0.6 + letterSpacing * (charCount - 1);
+
   return (
     <p
       attribute-name={attributeName}
       attribute-key={attributeKey}
-      style={style}
+      style={{
+        ...style,
+        width,
+        textAlign: 'left',
+        alignItems: 'left',
+        alignSelf: 'center',
+      }}
     >
       {time}
     </p>

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

@@ -2,7 +2,6 @@
 
 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 =
@@ -25,7 +24,7 @@ export interface CountDownStyleGenerated {
   fontSize?: string;
   fontFamily?: string;
   fontWeight?: string;
-  textAlign?: TextAlignOptionType;
+  textAlign?: never;
   flexDirection?: FlexDirectionOptionType;
   flexWrap?: FlexWrapOptionType;
   alignItems?: AlignItemsOptionType;
@@ -47,7 +46,7 @@ export interface CountDownStyleGenerated {
   marginRight?: string;
   backgroundColor?: string;
   borderRadius?: string;
-  width?: string;
+  width?: never;
   minWidth?: string;
   maxWidth?: string;
   height?: string;
@@ -66,12 +65,10 @@ export interface CountDownPropsGenerated {
   child: string;
   attributes: {
     style?: CountDownStyleGenerated;
-    count?: number;
-    title?: string;
-    description?: string;
     adjustsFontSizeToFit?: boolean;
     showEllipsis?: boolean;
     scrollable?: boolean;
+    count?: number;
   };
 }