@developer_tribe/react-builder 1.2.20 → 1.2.22

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/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;