@developer_tribe/react-builder 1.2.0 → 1.2.2

package/src/utils/extractViewStyle/extractViewStyle.ts

@@ -0,0 +1,145 @@
+import { ViewPropsGenerated } from '../../build-components/View/ViewProps.generated';
+import type { NodeData } from '../../types/Node';
+import type { AppConfig } from '../../types/PreviewConfig';
+import type { ProjectColors } from '../../types/Project';
+import { parseSize } from '../../size-matters';
+import { parseColor } from '../parseColor';
+
+export type ExtractViewStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
+
+export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
+  node: NodeData<T>,
+  options: ExtractViewStyleOptions = {},
+) {
+  const attributes = node.attributes;
+  const styleBag = (attributes as any)?.style as
+    | Record<string, unknown>
+    | undefined;
+  const get = <K extends keyof ViewPropsGenerated['attributes']>(
+    key: K,
+  ): ViewPropsGenerated['attributes'][K] | undefined => {
+    const direct = (attributes as any)?.[key];
+    if (direct !== undefined && direct !== null) return direct;
+    return styleBag?.[key as unknown as string] as any;
+  };
+
+  const scrollable = (get('scrollable') as any) ?? false;
+  const style: React.CSSProperties = {
+    display: 'flex',
+    flexDirection: 'column',
+  };
+  if (!attributes) return style;
+  const isEmptySizeValue = (value: unknown) =>
+    value === undefined ||
+    value === null ||
+    (typeof value === 'string' && value.trim() === '');
+  if (scrollable) {
+    // Important for flex children: allow the element to shrink so overflow scroll can work.
+    style.minWidth = 0;
+    style.minHeight = 0;
+    if (get('flexDirection') === 'row') {
+      style.overflowX = 'auto';
+      style.overflowY = 'hidden';
+      style.maxWidth = '100%';
+      style.maxHeight = '100%';
+    } else {
+      style.overflowY = 'auto';
+      style.overflowX = 'hidden';
+      style.maxHeight = '100%';
+      style.maxWidth = '100%';
+    }
+  }
+  const flexDirection = get('flexDirection');
+  if (flexDirection) style.flexDirection = flexDirection as any;
+  const alignItems = get('alignItems');
+  if (alignItems)
+    style.alignItems = alignItems as React.CSSProperties['alignItems'];
+  const justifyContent = get('justifyContent');
+  if (justifyContent)
+    style.justifyContent =
+      justifyContent as React.CSSProperties['justifyContent'];
+  const setParsedSize = <K extends keyof React.CSSProperties>(
+    property: K,
+    rawValue: string | number | undefined,
+  ) => {
+    if (isEmptySizeValue(rawValue)) return;
+    const parsed = parseSize(rawValue);
+    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);
+
+  const paddingHorizontal = get('paddingHorizontal') as any;
+  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;
+  if (!isEmptySizeValue(paddingVertical)) {
+    const parsed = parseSize(paddingVertical);
+    style.paddingTop = parsed as React.CSSProperties['paddingTop'];
+    style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
+  }
+
+  // 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);
+
+  const marginHorizontalRaw =
+    ((attributes as Record<string, unknown>).marginHorizontal as
+      | string
+      | number
+      | undefined) ?? (styleBag?.marginHorizontal as any);
+  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;
+  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;
+  if (backgroundColor) {
+    style.backgroundColor =
+      parseColor(backgroundColor, {
+        projectColors: options.projectColors,
+        appConfig: options.appConfig,
+      }) ?? 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;
+  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;
+  if (zIndex !== undefined)
+    style.zIndex = zIndex as React.CSSProperties['zIndex'];
+  return style;
+}

package/src/utils/extractViewStyle.ts

@@ -1,145 +1,2 @@
-import { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
-import type { NodeData } from '../types/Node';
-import type { AppConfig } from '../types/PreviewConfig';
-import type { ProjectColors } from '../types/Project';
-import { parseSize } from '../size-matters';
-import { parseColor } from './parseColor';
-
-export type ExtractViewStyleOptions = {
-  appConfig?: AppConfig;
-  projectColors?: ProjectColors;
-};
-
-export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
-  node: NodeData<T>,
-  options: ExtractViewStyleOptions = {},
-) {
-  const attributes = node.attributes;
-  const styleBag = (attributes as any)?.style as
-    | Record<string, unknown>
-    | undefined;
-  const get = <K extends keyof ViewPropsGenerated['attributes']>(
-    key: K,
-  ): ViewPropsGenerated['attributes'][K] | undefined => {
-    const direct = (attributes as any)?.[key];
-    if (direct !== undefined && direct !== null) return direct;
-    return styleBag?.[key as unknown as string] as any;
-  };
-
-  const scrollable = (get('scrollable') as any) ?? false;
-  const style: React.CSSProperties = {
-    display: 'flex',
-    flexDirection: 'column',
-  };
-  if (!attributes) return style;
-  const isEmptySizeValue = (value: unknown) =>
-    value === undefined ||
-    value === null ||
-    (typeof value === 'string' && value.trim() === '');
-  if (scrollable) {
-    // Important for flex children: allow the element to shrink so overflow scroll can work.
-    style.minWidth = 0;
-    style.minHeight = 0;
-    if (get('flexDirection') === 'row') {
-      style.overflowX = 'auto';
-      style.overflowY = 'hidden';
-      style.maxWidth = '100%';
-      style.maxHeight = '100%';
-    } else {
-      style.overflowY = 'auto';
-      style.overflowX = 'hidden';
-      style.maxHeight = '100%';
-      style.maxWidth = '100%';
-    }
-  }
-  const flexDirection = get('flexDirection');
-  if (flexDirection) style.flexDirection = flexDirection as any;
-  const alignItems = get('alignItems');
-  if (alignItems)
-    style.alignItems = alignItems as React.CSSProperties['alignItems'];
-  const justifyContent = get('justifyContent');
-  if (justifyContent)
-    style.justifyContent =
-      justifyContent as React.CSSProperties['justifyContent'];
-  const setParsedSize = <K extends keyof React.CSSProperties>(
-    property: K,
-    rawValue: string | number | undefined,
-  ) => {
-    if (isEmptySizeValue(rawValue)) return;
-    const parsed = parseSize(rawValue);
-    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);
-
-  const paddingHorizontal = get('paddingHorizontal') as any;
-  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;
-  if (!isEmptySizeValue(paddingVertical)) {
-    const parsed = parseSize(paddingVertical);
-    style.paddingTop = parsed as React.CSSProperties['paddingTop'];
-    style.paddingBottom = parsed as React.CSSProperties['paddingBottom'];
-  }
-
-  // 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);
-
-  const marginHorizontalRaw =
-    ((attributes as Record<string, unknown>).marginHorizontal as
-      | string
-      | number
-      | undefined) ?? (styleBag?.marginHorizontal as any);
-  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;
-  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;
-  if (backgroundColor) {
-    style.backgroundColor =
-      parseColor(backgroundColor, {
-        projectColors: options.projectColors,
-        appConfig: options.appConfig,
-      }) ?? 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;
-  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;
-  if (zIndex !== undefined)
-    style.zIndex = zIndex as React.CSSProperties['zIndex'];
-  return style;
-}
+export type { ExtractViewStyleOptions } from './extractViewStyle/extractViewStyle';
+export { extractViewStyle } from './extractViewStyle/extractViewStyle';