@developer_tribe/react-builder 1.0.3 → 1.0.5

package/src/utils/extractViewStyle.ts

@@ -5,7 +5,7 @@ import type { ProjectColors } from '../types/Project';
 import { parseSize } from '../size-matters';
 import { parseColor } from './parseColor';
 
-type ExtractViewStyleOptions = {
+export type ExtractViewStyleOptions = {
   appConfig?: AppConfig;
   projectColors?: ProjectColors;
 };
@@ -21,7 +21,14 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     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 (attributes.flexDirection === 'row') {
       style.overflowX = 'auto';
       style.overflowY = 'hidden';
@@ -45,7 +52,7 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     property: K,
     rawValue: string | number | undefined,
   ) => {
-    if (rawValue === undefined) return;
+    if (isEmptySizeValue(rawValue)) return;
     const parsed = parseSize(rawValue);
     style[property] = parsed as React.CSSProperties[K];
   };
@@ -54,44 +61,41 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   setParsedSize('padding', attributes.padding);
   setParsedSize('margin', attributes.margin);
 
-  if (attributes.paddingHorizontal !== undefined) {
+  if (!isEmptySizeValue(attributes.paddingHorizontal)) {
     const parsed = parseSize(attributes.paddingHorizontal);
     style.paddingLeft = parsed as React.CSSProperties['paddingLeft'];
     style.paddingRight = parsed as React.CSSProperties['paddingRight'];
   }
-  if (attributes.paddingVertical !== undefined) {
+  if (!isEmptySizeValue(attributes.paddingVertical)) {
     const parsed = parseSize(attributes.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', attributes.paddingTop);
+  setParsedSize('paddingBottom', attributes.paddingBottom);
+  setParsedSize('paddingLeft', attributes.paddingLeft);
+  setParsedSize('paddingRight', attributes.paddingRight);
+
   const marginHorizontalRaw = (attributes as Record<string, unknown>)
     .marginHorizontal as string | number | undefined;
-  if (marginHorizontalRaw !== undefined) {
+  if (!isEmptySizeValue(marginHorizontalRaw)) {
     const parsed = parseSize(marginHorizontalRaw);
     style.marginLeft = parsed as React.CSSProperties['marginLeft'];
     style.marginRight = parsed as React.CSSProperties['marginRight'];
   }
 
-  if (attributes.marginVertical !== undefined) {
+  if (!isEmptySizeValue(attributes.marginVertical)) {
     const parsed = parseSize(attributes.marginVertical);
     style.marginTop = parsed as React.CSSProperties['marginTop'];
     style.marginBottom = parsed as React.CSSProperties['marginBottom'];
   }
 
-  setParsedSize('paddingTop', attributes.paddingTop);
-  setParsedSize('paddingBottom', attributes.paddingBottom);
-  setParsedSize('paddingLeft', attributes.paddingLeft);
-  setParsedSize('paddingRight', attributes.paddingRight);
   setParsedSize('marginTop', attributes.marginTop);
   setParsedSize('marginBottom', attributes.marginBottom);
   setParsedSize('marginLeft', attributes.marginLeft);
   setParsedSize('marginRight', attributes.marginRight);
-  console.log('attributes.backgroundColor', attributes.backgroundColor);
-  console.log(
-    'parseColor(attributes.backgroundColor)',
-    parseColor(attributes.backgroundColor),
-  );
   if (attributes.backgroundColor) {
     style.backgroundColor =
       parseColor(attributes.backgroundColor, {
@@ -101,12 +105,32 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   }
   setParsedSize('borderRadius', attributes.borderRadius);
   setParsedSize('width', attributes.width);
+  setParsedSize(
+    'minWidth',
+    (attributes as ViewPropsGenerated['attributes']).minWidth,
+  );
+  setParsedSize(
+    'maxWidth',
+    (attributes as ViewPropsGenerated['attributes']).maxWidth,
+  );
   setParsedSize('height', attributes.height);
+  setParsedSize(
+    'minHeight',
+    (attributes as ViewPropsGenerated['attributes']).minHeight,
+  );
+  setParsedSize(
+    'maxHeight',
+    (attributes as ViewPropsGenerated['attributes']).maxHeight,
+  );
+  if (attributes.flex !== undefined)
+    style.flex = attributes.flex as React.CSSProperties['flex'];
   if (attributes.position)
     style.position = attributes.position as React.CSSProperties['position'];
   setParsedSize('top', attributes.top);
   setParsedSize('bottom', attributes.bottom);
   setParsedSize('left', attributes.left);
   setParsedSize('right', attributes.right);
+  if (attributes.zIndex !== undefined)
+    style.zIndex = attributes.zIndex as React.CSSProperties['zIndex'];
   return style;
 }

package/src/utils/findNodeByKeyNested.ts

@@ -0,0 +1,32 @@
+import type { Node, NodeData } from '../types/Node';
+
+export function findNodeByKeyNested(node: Node, key: string): NodeData | null {
+  if (node === null || node === undefined) {
+    return null;
+  }
+
+  if (typeof node === 'string') {
+    return null;
+  }
+
+  if (Array.isArray(node)) {
+    for (const child of node) {
+      const found = findNodeByKeyNested(child, key);
+      if (found) {
+        return found;
+      }
+    }
+    return null;
+  }
+
+  const recordData = node as NodeData;
+  if (recordData.key === key) {
+    return recordData;
+  }
+
+  if (recordData.children) {
+    return findNodeByKeyNested(recordData.children as Node, key);
+  }
+
+  return null;
+}

package/src/utils/isCarousel.ts

@@ -1,28 +1,44 @@
 import { Node, NodeData } from '../types/Node';
+import { normalizeComponentType } from './patterns';
 
 export const isCarouselProvider = (node: Node): node is NodeData => {
   if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
-  return 'type' in node && node.type === 'carouselProvider';
+  return (
+    'type' in node &&
+    normalizeComponentType((node as NodeData).type) === 'CarouselProvider'
+  );
 };
 
 export const isCarousel = (node: Node): node is NodeData => {
   if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
-  return 'type' in node && node.type === 'carousel';
+  return (
+    'type' in node &&
+    normalizeComponentType((node as NodeData).type) === 'Carousel'
+  );
 };
 
 export const isCarouselItem = (node: Node): node is NodeData => {
   if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
-  return 'type' in node && node.type === 'carouselItem';
+  return (
+    'type' in node &&
+    normalizeComponentType((node as NodeData).type) === 'CarouselItem'
+  );
 };
 
 export const isCarouselDots = (node: Node): node is NodeData => {
   if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
-  return 'type' in node && node.type === 'carouselDots';
+  return (
+    'type' in node &&
+    normalizeComponentType((node as NodeData).type) === 'CarouselDots'
+  );
 };
 
 export const isCarouselButtons = (node: Node): node is NodeData => {
   if (!node || typeof node !== 'object' || Array.isArray(node)) return false;
-  return 'type' in node && node.type === 'carouselButtons';
+  return (
+    'type' in node &&
+    normalizeComponentType((node as NodeData).type) === 'CarouselButtons'
+  );
 };
 
 export const isCarouselComponent = (node: Node): boolean => {

package/src/utils/nodeGuards.ts

@@ -0,0 +1,26 @@
+import type { Node, NodeDefaultAttribute } from '../types/Node';
+
+export function isNodeNullOrUndefined<T = NodeDefaultAttribute>(
+  node: Node<T>,
+): boolean {
+  return node === null || node === undefined;
+}
+
+export function isNodeString<T = NodeDefaultAttribute>(node: Node<T>): boolean {
+  return typeof node === 'string';
+}
+
+export function isNodeArray<T = NodeDefaultAttribute>(node: Node<T>): boolean {
+  return node instanceof Array;
+}
+
+export function isEmptyObject<T = NodeDefaultAttribute>(
+  node: Node<T>,
+): boolean {
+  return (
+    typeof node === 'object' &&
+    node !== null &&
+    !Array.isArray(node) &&
+    Object.keys(node as object).length === 0
+  );
+}

package/src/utils/novaToJson.ts

@@ -1,9 +1,13 @@
 import { Node, NodeData } from '../types/Node';
 import { Project, ProjectBase } from '../types/Project';
-
+//TODO: deprecated olmasına rağmen snapshot testi ekle
+/**
+ * @deprecated Legacy converter for old "nova" onboard JSON formats.
+ * The built-in samples are now shipped in the new `Project<Node>` format,
+ * so this should no longer be needed in normal usage.
+ */
 export function novaToJson(nova: ProjectBase<unknown>): Node {
   const layout = (nova.data as any).data?.layout;
-  console.info('layout', layout);
   if (layout === 'onboard-layout') {
     return onboardNovaToJson(nova);
   }
@@ -26,7 +30,6 @@ function onboardNovaToJson(nova: ProjectBase<unknown>): Node {
 
   const providerNode: NodeData = {
     type: 'OnboardProvider',
-    isMain: true,
     key: (nova?.data as any)?.data?.key,
     children: [
       carouselNode,
@@ -37,15 +40,24 @@ function onboardNovaToJson(nova: ProjectBase<unknown>): Node {
     ],
     attributes: {
       theme: (nova?.data as any)?.theme,
-      // forward safe area inset preference; default to true when absent
-      use_safe_area_inset:
-        (attributes as any)?.use_safe_area_inset !== undefined
-          ? (attributes as any)?.use_safe_area_inset
-          : true,
     },
   };
 
-  return providerNode;
+  const mainNode: NodeData = {
+    type: 'Main',
+    isMain: true,
+    key: (nova?.data as any)?.data?.key,
+    children: [providerNode],
+    attributes: {
+      // default safe area view on; can be overridden in the editor
+      useSafeAreaView: true,
+    },
+  };
+
+  // Provider should have its own key if needed; avoid duplicating root key on child.
+  delete (providerNode as any).key;
+
+  return mainNode;
 }
 //@eslint-disable-next-line @typescript-eslint/no-explicit-any
 function buildCarouselFromPages(pages: any[]): {

package/src/utils/patterns.ts

@@ -1,4 +1,4 @@
-import { patterns as generatedPatterns } from '../build-components';
+import { patterns as generatedPatterns } from '../build-components/patterns.generated';
 import type { NodeDefaultAttribute } from '../types/Node';
 
 export type AttributeMeta = {
@@ -8,6 +8,15 @@ export type AttributeMeta = {
   specialCategory?: 'padding' | 'margin' | 'offset' | null | string;
   sort?: number;
   preferedScale?: 's' | 'vs' | 'f' | '%' | '' | string;
+  /**
+   * When true, this attribute should remain visible even if the component
+   * metadata requests hiding all attributes (e.g. `meta.hideAllAttributes`).
+   */
+  forceVisible?: boolean;
+  /**
+   * Alias for `forceVisible` used by some patterns.
+   */
+  override?: boolean;
 };
 
 export type SpecialCategoryMeta = {
@@ -24,6 +33,9 @@ type PatternMeta = {
   specialCategories?: Record<string, SpecialCategoryMeta>;
   desiredParent?: string[];
   desiredChildren?: string[];
+  mockableFeatures?: Record<string, boolean>;
+  /** If true, hide all attributes in the editor except ones with `forceVisible/override`. */
+  hideAllAttributes?: boolean;
 };
 
 type Pattern = {
@@ -52,9 +64,51 @@ const patternIndex: Map<string, Pattern> = new Map(
   patterns.map((p) => [p.pattern.type, p]),
 );
 
+function pascalToCamelCase(s: string): string {
+  if (!s) return s;
+  return s[0].toLowerCase() + s.slice(1);
+}
+
+function pascalToKebabCase(s: string): string {
+  if (!s) return s;
+  // BackgroundImage -> background-image, IAPBackground -> iap-background
+  return s
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .replace(/([A-Z]+)([A-Z][a-z0-9]+)/g, '$1-$2')
+    .toLowerCase();
+}
+
+const typeAliases: Map<string, string> = new Map();
+for (const p of patterns) {
+  const canonical = p?.pattern?.type;
+  if (typeof canonical !== 'string' || !canonical) continue;
+  const aliases = [
+    canonical,
+    canonical.toLowerCase(),
+    pascalToCamelCase(canonical),
+    pascalToKebabCase(canonical),
+  ];
+  for (const a of aliases) {
+    if (!a) continue;
+    if (!typeAliases.has(a)) {
+      typeAliases.set(a, canonical);
+    }
+  }
+}
+
+/** Normalize legacy/variant component type strings to the canonical pattern.type (PascalCase). */
+export function normalizeComponentType(
+  type?: string | null,
+): string | undefined {
+  if (typeof type !== 'string' || !type) return undefined;
+  if (patternIndex.has(type)) return type;
+  return typeAliases.get(type) ?? typeAliases.get(type.toLowerCase());
+}
+
 export function getPatternByType(type?: string | null): Pattern | undefined {
   if (typeof type !== 'string') return undefined;
-  return patternIndex.get(type);
+  const normalized = normalizeComponentType(type) ?? type;
+  return patternIndex.get(normalized);
 }
 
 export function getAttributeSchema(
@@ -101,7 +155,12 @@ export function getTypeSchema(
 /** Utility: returns true if the type name refers to a primitive scalar */
 export function isPrimitiveType(typeName: string): boolean {
   return (
-    typeName === 'string' || typeName === 'number' || typeName === 'boolean'
+    typeName === 'string' ||
+    typeName === 'number' ||
+    typeName === 'boolean' ||
+    typeName === 'color' ||
+    typeName === 'size' ||
+    typeName === 'iconType'
   );
 }
 

package/src/utils/replaceLocalizationParams.ts

@@ -0,0 +1,15 @@
+export function replaceLocalizationParams(
+  text: string,
+  params?: Record<string, string> | null,
+): string {
+  if (!text) return text;
+  if (!params) return text;
+
+  return (
+    Object.entries(params).reduce((acc, [key, val]) => {
+      const needle = `@${key}`;
+      // Replace all occurrences without regex escaping pitfalls.
+      return acc.split(needle).join(String(val));
+    }, text) || text
+  );
+}

package/src/utils/selection.ts

@@ -0,0 +1,24 @@
+import type { CSSProperties } from 'react';
+
+export const SELECTED_OUTLINE_STYLE: CSSProperties = {
+  outline: '2px solid #2684FF',
+};
+
+function getNodeKey(value: unknown): string | undefined {
+  if (!value || typeof value !== 'object') return undefined;
+  if (!('key' in value)) return undefined;
+  const key = (value as { key?: unknown }).key;
+  return typeof key === 'string' ? key : undefined;
+}
+
+export function isNodeSelected(args: {
+  previewMode: boolean;
+  current?: unknown;
+  node?: unknown;
+}): boolean {
+  const currentKey = getNodeKey(args.current);
+  const nodeKey = getNodeKey(args.node);
+  return (
+    !!args.previewMode && !!currentKey && !!nodeKey && currentKey === nodeKey
+  );
+}

package/src/utils/useMergedStyle.ts

@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import type { CSSProperties } from 'react';
+
+const EMPTY_STYLE: CSSProperties = {};
+
+export function useMergedStyle(
+  base?: CSSProperties,
+  override?: CSSProperties,
+): CSSProperties {
+  return useMemo(() => {
+    if (!base && !override) return EMPTY_STYLE;
+    if (!override) return base ?? EMPTY_STYLE;
+    if (!base) return override;
+    return { ...base, ...override };
+  }, [base, override]);
+}