@developer_tribe/react-builder 1.0.4 → 1.0.5

package/src/utils/analyseNodeByPatterns.ts

@@ -0,0 +1,438 @@
+import type { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
+import {
+  getArrayItemType,
+  getAttributeSchema,
+  getPatternByType,
+  getTypeSchema,
+  isPrimitiveType,
+  normalizeComponentType,
+} from './patterns';
+import {
+  isEmptyObject,
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+} from './nodeGuards';
+
+export type AnalyseResultWithPath = {
+  valid: boolean;
+  message?: string;
+  path?: string;
+};
+
+type AttributeTypeSpec = string | string[];
+type AttributeSchema = Record<string, AttributeTypeSpec>;
+
+type PatternLike = {
+  allowUnknownAttributes: boolean;
+  pattern: {
+    type: string;
+    children: unknown;
+    attributes?: AttributeSchema;
+  };
+};
+
+function ok(): AnalyseResultWithPath {
+  return { valid: true };
+}
+
+function fail(message: string, path?: string): AnalyseResultWithPath {
+  return { valid: false, message, path };
+}
+
+function joinPath(base: string, next: string): string {
+  if (!base) return next;
+  if (!next) return base;
+  // next may already include brackets (e.g. [0])
+  return next.startsWith('[') ? `${base}${next}` : `${base}.${next}`;
+}
+
+function isPlainObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function isNodeDataLike(
+  value: unknown,
+): value is NodeData<NodeDefaultAttribute> {
+  if (!isPlainObject(value)) return false;
+  const maybeType = (value as Record<string, unknown>).type;
+  return typeof maybeType === 'string' && 'children' in value;
+}
+
+function normalizeTypeOrFallback(type: string): string {
+  return normalizeComponentType(type) ?? type;
+}
+
+function getChildrenSpecTokens(pattern: PatternLike): string[] {
+  const raw = pattern?.pattern?.children;
+  if (typeof raw === 'string') return [raw];
+  if (Array.isArray(raw)) return raw.filter((x) => typeof x === 'string');
+  return [];
+}
+
+function splitChildrenSpec(tokens: string[]): {
+  baseKinds: Set<'never' | 'string' | 'node' | 'array'>;
+  allowedComponentTypes: Set<string>;
+} {
+  const baseKinds = new Set<'never' | 'string' | 'node' | 'array'>();
+  const allowedComponentTypes = new Set<string>();
+  for (const t of tokens) {
+    if (t === 'never' || t === 'string' || t === 'node' || t === 'array') {
+      baseKinds.add(t);
+    } else if (typeof t === 'string' && t) {
+      allowedComponentTypes.add(normalizeTypeOrFallback(t));
+    }
+  }
+  return { baseKinds, allowedComponentTypes };
+}
+
+function validateChildrenNeverRule(
+  children: Node<NodeDefaultAttribute>,
+  baseKinds: Set<'never' | 'string' | 'node' | 'array'>,
+  path: string,
+): AnalyseResultWithPath {
+  if (!baseKinds.has('never')) return ok();
+  if (isNodeNullOrUndefined(children) || isEmptyObject(children)) return ok();
+  return fail(`Children not allowed (pattern.children = "never")`, path);
+}
+
+function validateChildrenKindRule(
+  children: Node<NodeDefaultAttribute>,
+  baseKinds: Set<'never' | 'string' | 'node' | 'array'>,
+  allowedComponentTypes: Set<string>,
+  path: string,
+): AnalyseResultWithPath {
+  if (isNodeNullOrUndefined(children) || isEmptyObject(children)) return ok();
+
+  // Component-type specs allow either a single node or an array of nodes.
+  if (allowedComponentTypes.size > 0) {
+    if (isNodeArray(children)) return ok();
+    if (isNodeDataLike(children)) return ok();
+    return fail(
+      `Children must be a node or array of nodes (allowed: ${Array.from(
+        allowedComponentTypes,
+      ).join(', ')})`,
+      path,
+    );
+  }
+
+  if (isNodeString(children)) {
+    return baseKinds.has('string')
+      ? ok()
+      : fail(`Children must not be a string`, path);
+  }
+  if (isNodeArray(children)) {
+    return baseKinds.has('array')
+      ? ok()
+      : fail(`Children must not be an array`, path);
+  }
+  if (isNodeDataLike(children)) {
+    return baseKinds.has('node')
+      ? ok()
+      : fail(`Children must not be a node`, path);
+  }
+
+  // Unknown object shape
+  return fail(`Children has invalid shape`, path);
+}
+
+function validateChildrenAllowedComponentTypesRule(
+  children: Node<NodeDefaultAttribute>,
+  allowedComponentTypes: Set<string>,
+  path: string,
+): AnalyseResultWithPath {
+  if (allowedComponentTypes.size === 0) return ok();
+  if (isNodeNullOrUndefined(children) || isEmptyObject(children)) return ok();
+
+  const allowed = Array.from(allowedComponentTypes);
+
+  const validateChildType = (child: unknown, childPath: string) => {
+    if (!isNodeDataLike(child)) {
+      return fail(`Child must be an object node`, childPath);
+    }
+    const actual = normalizeTypeOrFallback(child.type);
+    if (!allowedComponentTypes.has(actual)) {
+      return fail(
+        `Child type "${child.type}" is not allowed here (allowed: ${allowed.join(
+          ', ',
+        )})`,
+        joinPath(childPath, 'type'),
+      );
+    }
+    return ok();
+  };
+
+  if (isNodeArray(children)) {
+    const arr = children as unknown[];
+    for (let i = 0; i < arr.length; i++) {
+      const res = validateChildType(arr[i], `${path}[${i}]`);
+      if (!res.valid) return res;
+    }
+    return ok();
+  }
+
+  return validateChildType(children, path);
+}
+
+function validateChildrenByPattern(
+  nodeData: NodeData<NodeDefaultAttribute>,
+  pattern: PatternLike,
+  path: string,
+): AnalyseResultWithPath {
+  const tokens = getChildrenSpecTokens(pattern);
+  const { baseKinds, allowedComponentTypes } = splitChildrenSpec(tokens);
+
+  const neverRes = validateChildrenNeverRule(
+    nodeData.children,
+    baseKinds,
+    path,
+  );
+  if (!neverRes.valid) return neverRes;
+
+  const kindRes = validateChildrenKindRule(
+    nodeData.children,
+    baseKinds,
+    allowedComponentTypes,
+    path,
+  );
+  if (!kindRes.valid) return kindRes;
+
+  return validateChildrenAllowedComponentTypesRule(
+    nodeData.children,
+    allowedComponentTypes,
+    path,
+  );
+}
+
+function validatePrimitiveValue(
+  value: unknown,
+  primitiveType: string,
+  path: string,
+): AnalyseResultWithPath {
+  switch (primitiveType) {
+    case 'string':
+      return typeof value === 'string' ? ok() : fail(`Expected string`, path);
+    case 'number':
+      return typeof value === 'number' ? ok() : fail(`Expected number`, path);
+    case 'boolean':
+      return typeof value === 'boolean' ? ok() : fail(`Expected boolean`, path);
+    case 'color':
+      return typeof value === 'string'
+        ? ok()
+        : fail(`Expected color (string)`, path);
+    case 'size':
+      // Sizes can be numbers or strings like "16@fs" / "100%" / "20px"
+      return typeof value === 'number' || typeof value === 'string'
+        ? ok()
+        : fail(`Expected size (string or number)`, path);
+    case 'iconType':
+      return typeof value === 'string'
+        ? ok()
+        : fail(`Expected iconType (string)`, path);
+    default:
+      return fail(`Unknown primitive type "${primitiveType}"`, path);
+  }
+}
+
+function validateEnumValue(
+  value: unknown,
+  options: string[],
+  path: string,
+): AnalyseResultWithPath {
+  if (typeof value === 'string') {
+    return options.includes(value)
+      ? ok()
+      : fail(`Expected one of: ${options.join(', ')}`, path);
+  }
+  if (Array.isArray(value)) {
+    for (let i = 0; i < value.length; i++) {
+      const v = value[i];
+      if (typeof v !== 'string' || !options.includes(v)) {
+        return fail(
+          `Expected an array of: ${options.join(', ')}`,
+          `${path}[${i}]`,
+        );
+      }
+    }
+    return ok();
+  }
+  return fail(`Expected a string or string[] enum value`, path);
+}
+
+function validateCustomObjectValue(
+  componentType: string,
+  value: unknown,
+  typeName: string,
+  path: string,
+): AnalyseResultWithPath {
+  const schema = getTypeSchema(componentType, typeName);
+  if (!schema) {
+    return fail(`Unknown custom type "${typeName}"`, path);
+  }
+  if (!isPlainObject(value)) {
+    return fail(`Expected object for type "${typeName}"`, path);
+  }
+
+  for (const [fieldName, fieldSpec] of Object.entries(schema)) {
+    if (!(fieldName in value)) continue;
+    const fieldValue = (value as Record<string, unknown>)[fieldName];
+    const fieldPath = joinPath(path, fieldName);
+    const res = validateAttributeValue(
+      componentType,
+      fieldValue,
+      fieldSpec,
+      fieldPath,
+    );
+    if (!res.valid) return res;
+  }
+
+  return ok();
+}
+
+function validateAttributeValue(
+  componentType: string,
+  value: unknown,
+  spec: AttributeTypeSpec,
+  path: string,
+): AnalyseResultWithPath {
+  if (Array.isArray(spec)) {
+    return validateEnumValue(value, spec, path);
+  }
+
+  const arrayItemType = getArrayItemType(spec);
+  if (arrayItemType) {
+    if (!Array.isArray(value)) {
+      return fail(`Expected array for type "${spec}"`, path);
+    }
+    for (let i = 0; i < value.length; i++) {
+      const item = value[i];
+      const itemPath = `${path}[${i}]`;
+      const res = validateAttributeValue(
+        componentType,
+        item,
+        arrayItemType,
+        itemPath,
+      );
+      if (!res.valid) return res;
+    }
+    return ok();
+  }
+
+  if (isPrimitiveType(spec)) {
+    return validatePrimitiveValue(value, spec, path);
+  }
+
+  return validateCustomObjectValue(componentType, value, spec, path);
+}
+
+function validateAttributesByPattern(
+  nodeData: NodeData<NodeDefaultAttribute>,
+  pattern: PatternLike,
+  path: string,
+): AnalyseResultWithPath {
+  const attrs = nodeData.attributes;
+  if (attrs == null) return ok();
+  if (!isPlainObject(attrs)) return fail(`attributes must be an object`, path);
+
+  const schema: AttributeSchema = (getAttributeSchema(pattern.pattern.type) ??
+    pattern.pattern.attributes ??
+    {}) as AttributeSchema;
+
+  for (const [attrName, attrValue] of Object.entries(attrs)) {
+    const attrSpec = schema?.[attrName];
+    if (!attrSpec) {
+      if (pattern.allowUnknownAttributes) continue;
+      return fail(`Unknown attribute "${attrName}"`, joinPath(path, attrName));
+    }
+    const res = validateAttributeValue(
+      pattern.pattern.type,
+      attrValue,
+      attrSpec,
+      joinPath(path, attrName),
+    );
+    if (!res.valid) return res;
+  }
+
+  return ok();
+}
+
+function validateNodeDataByPatterns(
+  nodeData: NodeData<NodeDefaultAttribute>,
+  path: string,
+): AnalyseResultWithPath {
+  const normalizedType = normalizeTypeOrFallback(nodeData.type);
+  const pattern = getPatternByType(normalizedType) as unknown as
+    | PatternLike
+    | undefined;
+  if (!pattern) {
+    return fail(
+      `Unknown component type "${nodeData.type}"`,
+      joinPath(path, 'type'),
+    );
+  }
+
+  const attrRes = validateAttributesByPattern(
+    { ...nodeData, type: normalizedType },
+    pattern,
+    joinPath(path, 'attributes'),
+  );
+  if (!attrRes.valid) return attrRes;
+
+  const childrenRes = validateChildrenByPattern(
+    { ...nodeData, type: normalizedType },
+    pattern,
+    joinPath(path, 'children'),
+  );
+  if (!childrenRes.valid) return childrenRes;
+
+  return ok();
+}
+
+function validateAnyNodeByPatterns(
+  node: Node<NodeDefaultAttribute>,
+  path: string,
+): AnalyseResultWithPath {
+  if (
+    isNodeNullOrUndefined(node) ||
+    isNodeString(node) ||
+    isEmptyObject(node)
+  ) {
+    return ok();
+  }
+
+  if (isNodeArray(node)) {
+    const arr = node as unknown as Node<NodeDefaultAttribute>[];
+    for (let i = 0; i < arr.length; i++) {
+      const res = validateAnyNodeByPatterns(arr[i], `${path}[${i}]`);
+      if (!res.valid) return res;
+    }
+    return ok();
+  }
+
+  if (!isNodeDataLike(node)) {
+    return fail(`Invalid node shape`, path);
+  }
+
+  const selfRes = validateNodeDataByPatterns(node, path);
+  if (!selfRes.valid) return selfRes;
+
+  return validateAnyNodeByPatterns(
+    node.children as Node<NodeDefaultAttribute>,
+    joinPath(path, 'children'),
+  );
+}
+
+/**
+ * Validates a Node tree against the generated component patterns:
+ * - Enforces `pattern.children` including "never"
+ * - Validates `attributes` against `pattern.attributes` (+ custom `types`)
+ *
+ * Notes:
+ * - Null/undefined children are considered "no children" and are allowed even
+ *   when patterns expect some kind of children.
+ */
+export function analyseNodeByPatterns(
+  node: Node<NodeDefaultAttribute>,
+): AnalyseResultWithPath {
+  return validateAnyNodeByPatterns(node, 'root');
+}

package/src/utils/analyseNodeStructural.ts

@@ -0,0 +1,52 @@
+import type { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
+import {
+  isEmptyObject,
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+} from './nodeGuards';
+
+export type AnalyseResult = {
+  valid: boolean;
+  message?: string;
+};
+
+/**
+ * Structural validation only:
+ * - Ensures the input is a valid Node union recursively (null/string/array/object)
+ * - Does NOT validate against component patterns.
+ */
+export function analyseNodeStructural(
+  node: Node<NodeDefaultAttribute>,
+): AnalyseResult {
+  if (isNodeNullOrUndefined(node)) {
+    return { valid: true, message: 'null or undefined is valid' };
+  }
+
+  if (isNodeString(node)) {
+    return { valid: true, message: 'string is valid' };
+  }
+
+  if (isNodeArray(node)) {
+    const nodeArray = node as unknown as Node[];
+    for (const value of nodeArray) {
+      const res = analyseNodeStructural(value as Node<NodeDefaultAttribute>);
+      if (!res.valid) return res;
+    }
+    return { valid: true, message: 'Array is valid' };
+  }
+
+  const recordData = node as NodeData;
+  if (isEmptyObject(recordData)) {
+    return { valid: true, message: 'empty object is valid' };
+  }
+
+  if (recordData.children) {
+    const res = analyseNodeStructural(
+      recordData.children as Node<NodeDefaultAttribute>,
+    );
+    if (!res.valid) return res;
+  }
+
+  return { valid: true, message: 'everything is structurally valid' };
+}

package/src/utils/extractViewStyle.ts

@@ -26,6 +26,9 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
     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';
@@ -102,7 +105,23 @@ 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)

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[]): {