@developer_tribe/react-builder 1.0.3 → 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/extractImageStyle.ts

@@ -1,24 +1,21 @@
 import { ImagePropsGenerated } from '../build-components/Image/ImageProps.generated';
 import type { NodeData } from '../types/Node';
+import { extractViewStyle, ExtractViewStyleOptions } from './extractViewStyle';
 
 export function extractImageStyle<T extends ImagePropsGenerated['attributes']>(
   node: NodeData<T>,
+  options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
   const style: React.CSSProperties = {};
 
   if (!attributes) return style;
 
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius = attributes.borderRadius;
-
   // Map resizeMode to CSS object-fit
   if (attributes.resizeMode === 'cover') style.objectFit = 'cover';
   else if (attributes.resizeMode === 'contain') style.objectFit = 'contain';
   else if (attributes.resizeMode === 'stretch') style.objectFit = 'fill';
   else if (attributes.resizeMode === 'center') style.objectFit = 'none';
 
-  return style;
+  return { ...extractViewStyle(node, options), ...style };
 }

package/src/utils/extractTextStyle.ts

@@ -5,6 +5,7 @@ import { defaultAppConfig } from '../types/PreviewConfig';
 import type { ProjectColors } from '../types/Project';
 import { fs, parseSize } from '../size-matters';
 import { parseColor } from './parseColor';
+import { extractViewStyle } from './extractViewStyle';
 
 type ExtractTextStyleOptions = {
   appConfig?: AppConfig;
@@ -45,85 +46,5 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   if (attributes.textAlign)
     style.textAlign = attributes.textAlign as React.CSSProperties['textAlign'];
 
-  // Spacing
-  // Shorthand
-  if (attributes.padding !== undefined) style.padding = attributes.padding;
-  if (attributes.margin !== undefined) style.margin = attributes.margin;
-
-  // Axis shorthands
-  if (attributes.paddingHorizontal !== undefined) {
-    const v = parseSize(attributes.paddingHorizontal);
-    style.paddingLeft = v as React.CSSProperties['paddingLeft'];
-    style.paddingRight = v as React.CSSProperties['paddingRight'];
-  }
-  if (attributes.paddingVertical !== undefined) {
-    const v = parseSize(attributes.paddingVertical);
-    style.paddingTop = v as React.CSSProperties['paddingTop'];
-    style.paddingBottom = v as React.CSSProperties['paddingBottom'];
-  }
-  const marginHorizontalRaw = (attributes as Record<string, unknown>)
-    .marginHorizontal as string | number | undefined;
-  if (marginHorizontalRaw !== undefined) {
-    const v = parseSize(marginHorizontalRaw);
-    style.marginLeft = v as React.CSSProperties['marginLeft'];
-    style.marginRight = v as React.CSSProperties['marginRight'];
-  }
-  if (attributes.marginVertical !== undefined) {
-    const v = parseSize(attributes.marginVertical);
-    style.marginTop = v as React.CSSProperties['marginTop'];
-    style.marginBottom = v as React.CSSProperties['marginBottom'];
-  }
-
-  // Edges
-  if (attributes.paddingTop !== undefined)
-    style.paddingTop = parseSize(
-      attributes.paddingTop,
-    ) as React.CSSProperties['paddingTop'];
-  if (attributes.paddingBottom !== undefined)
-    style.paddingBottom = parseSize(
-      attributes.paddingBottom,
-    ) as React.CSSProperties['paddingBottom'];
-  if (attributes.paddingLeft !== undefined)
-    style.paddingLeft = parseSize(
-      attributes.paddingLeft,
-    ) as React.CSSProperties['paddingLeft'];
-  if (attributes.paddingRight !== undefined)
-    style.paddingRight = parseSize(
-      attributes.paddingRight,
-    ) as React.CSSProperties['paddingRight'];
-
-  if (attributes.marginTop !== undefined)
-    style.marginTop = parseSize(
-      attributes.marginTop,
-    ) as React.CSSProperties['marginTop'];
-  if (attributes.marginBottom !== undefined)
-    style.marginBottom = parseSize(
-      attributes.marginBottom,
-    ) as React.CSSProperties['marginBottom'];
-  if (attributes.marginLeft !== undefined)
-    style.marginLeft = parseSize(
-      attributes.marginLeft,
-    ) as React.CSSProperties['marginLeft'];
-  if (attributes.marginRight !== undefined)
-    style.marginRight = parseSize(
-      attributes.marginRight,
-    ) as React.CSSProperties['marginRight'];
-
-  // Decor
-  if (attributes.backgroundColor) {
-    style.backgroundColor =
-      parseColor(attributes.backgroundColor, {
-        projectColors: options.projectColors,
-        appConfig: resolvedAppConfig,
-      }) ?? attributes.backgroundColor;
-  }
-  if (attributes.borderRadius !== undefined)
-    style.borderRadius =
-      attributes.borderRadius as React.CSSProperties['borderRadius'];
-
-  // Dimensions (rare for text but supported by schema)
-  if (attributes.width !== undefined) style.width = attributes.width;
-  if (attributes.height !== undefined) style.height = attributes.height;
-
-  return style;
+  return { ...extractViewStyle(node, options), ...style };
 }