@developer_tribe/react-builder 1.2.19 → 1.2.21

package/src/utils/analyseNodeByPatterns.ts

@@ -387,14 +387,24 @@ function validateAttributesByPattern(
     {}) as AttributeSchema;
   const styleSchema = getStyleSubSchema(schema);
 
-  // Validate nested `attributes.style` as an object; validate any style keys that also exist in schema.
   const maybeStyle = (attrs as Record<string, unknown>).style;
+  const maybeStyles = (attrs as Record<string, unknown>).styles;
+
+  // schemaVersion=2 requires `attributes.styles` (plural), not `attributes.style` (singular)
   if (maybeStyle != null) {
-    if (!isPlainObject(maybeStyle)) {
-      return fail(`style must be an object`, joinPath(path, 'style'));
+    return fail(
+      `Legacy attribute "style" detected. Use "styles" instead (schemaVersion=2). Found at ${joinPath(path, 'style')}`,
+      joinPath(path, 'style'),
+    );
+  }
+
+  // Validate nested `attributes.styles` (canonical store for AttributesEditor).
+  if (maybeStyles != null) {
+    if (!isPlainObject(maybeStyles)) {
+      return fail(`styles must be an object`, joinPath(path, 'styles'));
     }
     for (const [styleKey, styleValue] of Object.entries(
-      maybeStyle as Record<string, unknown>,
+      maybeStyles as Record<string, unknown>,
     )) {
       const spec = (styleSchema?.[styleKey] ?? schema?.[styleKey]) as
         | AttributeTypeSpec
@@ -404,14 +414,14 @@ function validateAttributesByPattern(
         pattern.pattern.type,
         styleValue,
         spec,
-        joinPath(joinPath(path, 'style'), styleKey),
+        joinPath(joinPath(path, 'styles'), styleKey),
       );
       if (!res.valid) return res;
     }
   }
 
   for (const [attrName, attrValue] of Object.entries(attrs)) {
-    if (attrName === 'style') continue;
+    if (attrName === 'style' || attrName === 'styles') continue;
     const attrSpec = schema?.[attrName] as AttributeTypeSpec | undefined;
     if (!attrSpec) {
       if (attrName === 'title' || attrName === 'description') {

package/src/utils/extractTextStyle/extractTextStyle.ts

@@ -1,5 +1,8 @@
 import type { NodeData } from '../../types/Node';
-import type { TextPropsGenerated } from '../../build-components/Text/TextProps.generated';
+import type {
+  TextPropsGenerated,
+  TextStyleGenerated,
+} from '../../build-components/Text/TextProps.generated';
 import type { AppConfig } from '../../types/PreviewConfig';
 import { defaultAppConfig } from '../../types/PreviewConfig';
 import type { ProjectColors } from '../../types/Project';
@@ -86,6 +89,7 @@ export type ExtractTextStyleOptions = {
   fonts?: Fonts;
   onFontLoaded?: (fontFamily: string) => void;
   onError?: (error: string) => void;
+  directlyTextStyle?: boolean;
 };
 
 export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
@@ -93,13 +97,13 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   options: ExtractTextStyleOptions = {},
 ) {
   const attributes = node.attributes;
-  const styleBag = (attributes as any)?.style as
-    | Record<string, unknown>
+  const styleBag = (attributes as Record<string, unknown>)?.style as
+    | TextStyleGenerated
     | undefined;
   const get = (key: string): unknown => {
-    const direct = (attributes as any)?.[key];
+    const direct = (attributes as Record<string, unknown>)?.[key];
     if (direct !== undefined && direct !== null) return direct;
-    return styleBag?.[key];
+    return styleBag?.[key as keyof TextStyleGenerated];
   };
   const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
   const { screenStyle, theme } = resolvedAppConfig;
@@ -115,15 +119,15 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   }
 
   // Typography
-  const fontSize = get('fontSize') as any;
+  const fontSize = get('fontSize') as string | number | undefined;
   if (fontSize !== undefined) {
     const parsed = parseSize(fontSize);
     style.fontSize = parsed as React.CSSProperties['fontSize'];
   } else {
     style.fontSize = fs(14);
   }
-  const fontFamily = get('fontFamily') as any;
-  const fontWeight = get('fontWeight') as any;
+  const fontFamily = get('fontFamily') as string | undefined;
+  const fontWeight = get('fontWeight') as string | number | undefined;
   const requestedWeight = weightToNumericKey(fontWeight);
   const normalizedFontFamily =
     typeof fontFamily === 'string' && fontFamily.trim().length > 0
@@ -163,18 +167,48 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   // If no fontFamily is set, keep previous behavior.
   if (!normalizedFontFamily && normalizedFontWeight)
     style.fontWeight = normalizedFontWeight;
-  const resolvedTextColor = parseColor(get('color') as any, {
+  const resolvedTextColor = parseColor(get('color') as string | undefined, {
     projectColors: options.projectColors,
     theme,
   });
   style.color = resolvedTextColor ?? fallbackColor;
-  const textAlign = get('textAlign');
-  if (textAlign)
-    style.textAlign = textAlign as React.CSSProperties['textAlign'];
+  const textAlign = get('textAlign') as
+    | React.CSSProperties['textAlign']
+    | undefined;
+  if (textAlign) {
+    style.textAlign = textAlign;
+  }
 
   const viewStyle = extractViewStyle(node, {
     projectColors: options.projectColors,
     theme,
   });
-  return { ...viewStyle, ...style };
+  const fullStyle = { ...viewStyle, ...style };
+
+  // If directlyTextStyle is true, return only text-related styles
+  if (options.directlyTextStyle) {
+    const textStyleProperties = new Set<keyof React.CSSProperties>([
+      'fontSize',
+      'fontFamily',
+      'fontWeight',
+      'color',
+      'textAlign',
+      'lineHeight',
+      'letterSpacing',
+      'textDecoration',
+      'textTransform',
+    ]);
+
+    const textStyle: React.CSSProperties = {};
+    for (const key in fullStyle) {
+      const typedKey = key as keyof React.CSSProperties;
+      if (textStyleProperties.has(typedKey)) {
+        (textStyle as Record<string, unknown>)[key] = fullStyle[typedKey];
+      }
+    }
+
+    return textStyle;
+  }
+
+  return fullStyle;
 }

package/src/utils/extractViewStyle/extractViewStyle.ts

@@ -1,4 +1,7 @@
-import { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
+import {
+  ViewPropsGenerated,
+  type ViewStyleGenerated,
+} from '../../build-components/View/ViewProps.generated';
 import type { NodeData } from '../../types/Node';
 import type { ProjectColors } from '../../types/Project';
 import { parseSize } from '../../size-matters';
@@ -14,16 +17,16 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
-  const styleBag = (attributes as any)?.style as
-    | Record<string, unknown>
+  const styleBag = (attributes as Record<string, unknown>)?.style as
+    | ViewStyleGenerated
     | undefined;
   const get = (key: string): unknown => {
-    const direct = (attributes as any)?.[key];
+    const direct = (attributes as Record<string, unknown>)?.[key];
     if (direct !== undefined && direct !== null) return direct;
-    return styleBag?.[key];
+    return styleBag?.[key as keyof ViewStyleGenerated];
   };
 
-  const scrollable = (get('scrollable') as any) ?? false;
+  const scrollable = (get('scrollable') as boolean | undefined) ?? false;
   const style: React.CSSProperties = {
     display: 'flex',
     flexDirection: 'column',
@@ -50,7 +53,13 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     }
   }
   const flexDirection = get('flexDirection');
-  if (flexDirection) style.flexDirection = flexDirection as any;
+  if (flexDirection) {
+    style.flexDirection = flexDirection as React.CSSProperties['flexDirection'];
+  }
+  const flexWrap = get('flexWrap');
+  if (flexWrap) {
+    style.flexWrap = flexWrap as React.CSSProperties['flexWrap'];
+  }
   const alignItems = get('alignItems');
   if (alignItems)
     style.alignItems = alignItems as React.CSSProperties['alignItems'];
@@ -67,17 +76,20 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     style[property] = parsed as React.CSSProperties[K];
   };
 
-  setParsedSize('gap', get('gap') as any);
-  setParsedSize('padding', get('padding') as any);
-  setParsedSize('margin', get('margin') as any);
+  setParsedSize('gap', get('gap') as string | number | undefined);
+  setParsedSize('padding', get('padding') as string | number | undefined);
+  setParsedSize('margin', get('margin') as string | number | undefined);
 
-  const paddingHorizontal = get('paddingHorizontal') as any;
+  const paddingHorizontal = get('paddingHorizontal') as
+    | string
+    | number
+    | undefined;
   if (!isEmptySizeValue(paddingHorizontal)) {
     const parsed = parseSize(paddingHorizontal);
     style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
     style.paddingRight = parsed as React.CSSProperties['paddingRight'];
   }
-  const paddingVertical = get('paddingVertical') as any;
+  const paddingVertical = get('paddingVertical') as string | number | undefined;
   if (!isEmptySizeValue(paddingVertical)) {
     const parsed = parseSize(paddingVertical);
     style.paddingTop = parsed as React.CSSProperties['paddingTop'];
@@ -85,34 +97,50 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   }
 
   // Explicit per-side paddings should override paddingHorizontal/paddingVertical.
-  setParsedSize('paddingTop', get('paddingTop') as any);
-  setParsedSize('paddingBottom', get('paddingBottom') as any);
-  setParsedSize('paddingLeft', get('paddingLeft') as any);
-  setParsedSize('paddingRight', get('paddingRight') as any);
+  setParsedSize('paddingTop', get('paddingTop') as string | number | undefined);
+  setParsedSize(
+    'paddingBottom',
+    get('paddingBottom') as string | number | undefined,
+  );
+  setParsedSize(
+    'paddingLeft',
+    get('paddingLeft') as string | number | undefined,
+  );
+  setParsedSize(
+    'paddingRight',
+    get('paddingRight') as string | number | undefined,
+  );
 
   const marginHorizontalRaw =
     ((attributes as Record<string, unknown>).marginHorizontal as
       | string
       | number
-      | undefined) ?? (styleBag?.marginHorizontal as any);
+      | undefined) ??
+    (styleBag?.marginHorizontal as string | number | undefined);
   if (!isEmptySizeValue(marginHorizontalRaw)) {
     const parsed = parseSize(marginHorizontalRaw);
     style.marginLeft = parsed as React.CSSProperties['marginLeft'];
     style.marginRight = parsed as React.CSSProperties['marginRight'];
   }
 
-  const marginVertical = get('marginVertical') as any;
+  const marginVertical = get('marginVertical') as string | number | undefined;
   if (!isEmptySizeValue(marginVertical)) {
     const parsed = parseSize(marginVertical);
     style.marginTop = parsed as React.CSSProperties['marginTop'];
     style.marginBottom = parsed as React.CSSProperties['marginBottom'];
   }
 
-  setParsedSize('marginTop', get('marginTop') as any);
-  setParsedSize('marginBottom', get('marginBottom') as any);
-  setParsedSize('marginLeft', get('marginLeft') as any);
-  setParsedSize('marginRight', get('marginRight') as any);
-  const backgroundColor = get('backgroundColor') as any;
+  setParsedSize('marginTop', get('marginTop') as string | number | undefined);
+  setParsedSize(
+    'marginBottom',
+    get('marginBottom') as string | number | undefined,
+  );
+  setParsedSize('marginLeft', get('marginLeft') as string | number | undefined);
+  setParsedSize(
+    'marginRight',
+    get('marginRight') as string | number | undefined,
+  );
+  const backgroundColor = get('backgroundColor') as string | undefined;
   if (backgroundColor) {
     style.backgroundColor =
       parseColor(backgroundColor, {
@@ -120,23 +148,74 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
         theme: options.theme,
       }) ?? backgroundColor;
   }
-  setParsedSize('borderRadius', get('borderRadius') as any);
-  setParsedSize('width', get('width') as any);
-  setParsedSize('minWidth', get('minWidth') as any);
-  setParsedSize('maxWidth', get('maxWidth') as any);
-  setParsedSize('height', get('height') as any);
-  setParsedSize('minHeight', get('minHeight') as any);
-  setParsedSize('maxHeight', get('maxHeight') as any);
-  const flex = get('flex') as any;
+  setParsedSize(
+    'borderRadius',
+    get('borderRadius') as string | number | undefined,
+  );
+  setParsedSize('width', get('width') as string | number | undefined);
+  setParsedSize('minWidth', get('minWidth') as string | number | undefined);
+  setParsedSize('maxWidth', get('maxWidth') as string | number | undefined);
+  setParsedSize('height', get('height') as string | number | undefined);
+  setParsedSize('minHeight', get('minHeight') as string | number | undefined);
+  setParsedSize('maxHeight', get('maxHeight') as string | number | undefined);
+  const flex = get('flex') as number | undefined;
   if (flex !== undefined) style.flex = flex as React.CSSProperties['flex'];
-  const position = get('position') as any;
-  if (position) style.position = position as React.CSSProperties['position'];
-  setParsedSize('top', get('top') as any);
-  setParsedSize('bottom', get('bottom') as any);
-  setParsedSize('left', get('left') as any);
-  setParsedSize('right', get('right') as any);
-  const zIndex = get('zIndex') as any;
+  const position = get('position') as
+    | React.CSSProperties['position']
+    | undefined;
+  if (position) style.position = position;
+  setParsedSize('top', get('top') as string | number | undefined);
+  setParsedSize('bottom', get('bottom') as string | number | undefined);
+  setParsedSize('left', get('left') as string | number | undefined);
+  setParsedSize('right', get('right') as string | number | undefined);
+  const zIndex = get('zIndex') as number | undefined;
   if (zIndex !== undefined)
     style.zIndex = zIndex as React.CSSProperties['zIndex'];
-  return style;
+
+  // Filter out any text style properties that might have been included
+  const viewStyleProperties = new Set<keyof React.CSSProperties>([
+    'display',
+    'flexDirection',
+    'flexWrap',
+    'alignItems',
+    'justifyContent',
+    'gap',
+    'padding',
+    'paddingTop',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingRight',
+    'margin',
+    'marginTop',
+    'marginBottom',
+    'marginLeft',
+    'marginRight',
+    'backgroundColor',
+    'borderRadius',
+    'width',
+    'minWidth',
+    'maxWidth',
+    'height',
+    'minHeight',
+    'maxHeight',
+    'flex',
+    'position',
+    'top',
+    'bottom',
+    'left',
+    'right',
+    'zIndex',
+    'overflowX',
+    'overflowY',
+  ]);
+
+  const filteredStyle: React.CSSProperties = {};
+  for (const key in style) {
+    const typedKey = key as keyof React.CSSProperties;
+    if (viewStyleProperties.has(typedKey)) {
+      (filteredStyle as Record<string, unknown>)[key] = style[typedKey];
+    }
+  }
+
+  return filteredStyle;
 }

package/src/utils/logRenderStore.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+// This file is a debug utility specifically designed to log to console for debugging purposes.
 import { useRenderStore } from '../store';
 
 export type LogRenderStoreOptions = {
@@ -17,7 +19,7 @@ function safeStringify(value: unknown): string {
       value,
       (_key, v) => {
         if (typeof v === 'function') {
-          const name = (v as Function).name;
+          const name = (v as (...args: unknown[]) => unknown).name;
           return `[Function${name ? `: ${name}` : ''}]`;
         }
         if (typeof v === 'bigint') return v.toString();
@@ -82,7 +84,6 @@ export function logRenderStore(options: LogRenderStoreOptions = {}): void {
 
   if (isFn(groupCollapsed)) groupCollapsed(title);
   else {
-    // eslint-disable-next-line no-console
     console.log(title);
   }
 
@@ -103,24 +104,21 @@ export function logRenderStore(options: LogRenderStoreOptions = {}): void {
 
   // NOTE: Logging objects in devtools can be confusing because they are "live" references.
   // This JSON string is a stable snapshot of this click, and is copy/paste-friendly.
-  // eslint-disable-next-line no-console
+
   console.log('json', json);
 
-  // eslint-disable-next-line no-console
   console.log('state', snapshot);
-  // eslint-disable-next-line no-console
+
   console.log('actions', actions);
-  // eslint-disable-next-line no-console
+
   console.log('rawState (includes functions)', state);
 
   if (includeLocalStorage) {
-    // eslint-disable-next-line no-console
     console.log('localStorage.render-store (raw)', persistedRaw);
-    // eslint-disable-next-line no-console
+
     console.log('localStorage.render-store (parsed)', persistedParsed);
   }
   if (extra) {
-    // eslint-disable-next-line no-console
     console.log('extra', extra);
   }
 

package/src/utils/logger.ts

@@ -24,19 +24,15 @@ function consoleLog(
   const prefix = `[${source}] ${message}`;
   switch (level) {
     case 'ERROR':
-      // eslint-disable-next-line no-console
       console.error(prefix, payload);
       break;
     case 'WARN':
-      // eslint-disable-next-line no-console
       console.warn(prefix, payload);
       break;
     case 'INFO':
-      // eslint-disable-next-line no-console
       console.info(prefix, payload);
       break;
     case 'VERBOSE':
-      // eslint-disable-next-line no-console
       console.debug(prefix, payload);
       break;
     default:
@@ -47,7 +43,7 @@ function consoleLog(
 export const logger = {
   setLevel(level: LogLevel) {
     useRenderStore.getState().setLogLevel(level);
-    // eslint-disable-next-line no-console
+
     console.info(`[Logger] level set to ${level}`);
   },
   log(level: LogLevel, source: LogSource, message: string, payload?: unknown) {

package/src/utils/novaToJson.ts

@@ -474,7 +474,7 @@ function mapDotsFromGeneralComponents(generalComponents: any[]): Node | null {
   };
 
   const inactiveDotOpacity = parseNumber(dotAttrs?.inactive_dot_opacity);
-  const expandingDotWidth = parseNumber(dotAttrs?.expanding_dot_width);
+  const dotThickness = parseNumber(dotAttrs?.dot_thickness);
   const dot_style =
     typeof dotAttrs?.dot_style === 'string'
       ? (dotAttrs.dot_style as string)
@@ -487,16 +487,20 @@ function mapDotsFromGeneralComponents(generalComponents: any[]): Node | null {
     typeof dotAttrs?.active_dot_color === 'string'
       ? (dotAttrs.active_dot_color as string)
       : undefined;
+  const inactive_dot_color =
+    typeof dotAttrs?.inactive_dot_color === 'string'
+      ? (dotAttrs.inactive_dot_color as string)
+      : undefined;
 
   const attributes: Record<string, unknown> = {};
   if (dotType) attributes.dotType = dotType;
   if (inactiveDotOpacity !== undefined)
     attributes.inactive_dot_opacity = inactiveDotOpacity;
-  if (expandingDotWidth !== undefined)
-    attributes.expanding_dot_width = expandingDotWidth;
+  if (dotThickness !== undefined) attributes.dot_thickness = dotThickness;
   if (dot_style) attributes.dot_style = dot_style;
   if (container_style) attributes.container_style = container_style;
   if (active_dot_color) attributes.active_dot_color = active_dot_color;
+  if (inactive_dot_color) attributes.inactive_dot_color = inactive_dot_color;
   return {
     type: 'OnboardDot',
     attributes: Object.keys(attributes).length ? attributes : undefined,

package/src/utils/repairNodeKeys.ts

@@ -53,10 +53,7 @@ function generateUniqueKey(type: string, usedKeys: Set<string>): string {
  *
  * `usedKeys` is mutated by design (to track uniqueness across recursion).
  */
-export function repairNodeKeys(
-  root: Node,
-  usedKeys: Set<string> = new Set(),
-): Node {
+export function repairNodeKeys(root: Node, usedKeys = new Set<string>()): Node {
   if (root === null || root === undefined) return root;
   if (typeof root === 'string') return root;