@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/utils/pasteNode.ts

@@ -0,0 +1,172 @@
+import type { Node, NodeData } from '../types/Node';
+import {
+  isNodeArray,
+  isNodeNullOrUndefined,
+  isNodeString,
+} from './analyseNode';
+import { getPatternByType } from './patterns';
+
+export type PasteIntoChildrenResult =
+  | {
+      ok: true;
+      nextRoot: Node;
+      pastedNode: Node;
+    }
+  | {
+      ok: false;
+      nextRoot: Node;
+      reason: string;
+    };
+
+function isNodeData(node: Node): node is NodeData {
+  return (
+    node !== null &&
+    node !== undefined &&
+    typeof node === 'object' &&
+    !Array.isArray(node)
+  );
+}
+
+function appendChild(children: Node, childToAppend: Node): Node {
+  if (Array.isArray(children)) {
+    return [...children, childToAppend];
+  }
+  if (
+    children === null ||
+    children === undefined ||
+    typeof children === 'string'
+  ) {
+    return [childToAppend];
+  }
+  return [children as Node, childToAppend];
+}
+
+function replaceNode(root: Node, target: Node, next: Node): Node {
+  if (root === target) return next;
+  if (root === null || root === undefined) return root;
+  if (typeof root === 'string') return root;
+  if (Array.isArray(root)) {
+    let changed = false;
+    const arr = root.map((item) => {
+      const r = replaceNode(item, target, next);
+      if (r !== item) changed = true;
+      return r;
+    });
+    return changed ? arr : root;
+  }
+  const data = root as NodeData;
+  const prev = data.children as Node;
+  if (!prev) return root;
+  const replaced = Array.isArray(prev)
+    ? (prev as Node[]).map((c) => replaceNode(c, target, next))
+    : replaceNode(prev as Node, target, next);
+  if (replaced !== prev) {
+    return { ...data, children: replaced } as Node;
+  }
+  return root;
+}
+
+export function canPasteIntoChildren(
+  target: Node,
+  pastedNode: Node,
+): {
+  ok: boolean;
+  reason?: string;
+} {
+  if (isNodeNullOrUndefined(target)) {
+    return { ok: false, reason: 'Select a node to paste into.' };
+  }
+  if (isNodeString(target)) {
+    return { ok: false, reason: 'Select a component node to paste into.' };
+  }
+  if (!isNodeData(pastedNode)) {
+    return { ok: false, reason: 'Only component nodes can be pasted.' };
+  }
+  const childType = pastedNode.type;
+  if (!childType) {
+    return { ok: false, reason: 'Pasted node has no type.' };
+  }
+
+  // Collections behave like generic containers.
+  if (isNodeArray(target)) return { ok: true };
+
+  if (!isNodeData(target)) {
+    return { ok: false, reason: 'Select a component node to paste into.' };
+  }
+
+  const parentType = target.type;
+  if (!parentType) {
+    return { ok: false, reason: 'Target node has no type.' };
+  }
+
+  // Special rule: limit OnboardButtons to OnboardButton only
+  if (parentType === 'OnboardButtons' && childType !== 'OnboardButton') {
+    return {
+      ok: false,
+      reason: 'OnboardButtons can only contain OnboardButton.',
+    };
+  }
+
+  const childrenSchema = getPatternByType(parentType)?.pattern
+    ?.children as unknown;
+  if (!childrenSchema) {
+    return { ok: false, reason: `${parentType} does not accept children.` };
+  }
+  if (childrenSchema === 'never' || childrenSchema === 'string') {
+    return { ok: false, reason: `${parentType} does not accept child nodes.` };
+  }
+  if (
+    childrenSchema === 'node' ||
+    (Array.isArray(childrenSchema) &&
+      (childrenSchema as unknown[]).includes('node'))
+  ) {
+    return { ok: true };
+  }
+  if (typeof childrenSchema === 'string') {
+    return childType === childrenSchema
+      ? { ok: true }
+      : {
+          ok: false,
+          reason: `${parentType} only accepts ${childrenSchema} children.`,
+        };
+  }
+  return { ok: false, reason: `${parentType} does not accept this child.` };
+}
+
+export function pasteIntoChildren(
+  root: Node,
+  target: Node,
+  pastedNode: Node,
+): PasteIntoChildrenResult {
+  const can = canPasteIntoChildren(target, pastedNode);
+  if (!can.ok) {
+    return {
+      ok: false,
+      nextRoot: root,
+      reason: can.reason ?? 'Cannot paste into this node.',
+    };
+  }
+
+  // Paste into collection (root arrays / array nodes).
+  if (isNodeArray(target)) {
+    const nextList = [...(target as Node[]), pastedNode];
+    const nextRoot = replaceNode(root, target, nextList);
+    return { ok: true, nextRoot, pastedNode };
+  }
+
+  // Paste into component node children.
+  if (!isNodeData(target)) {
+    return {
+      ok: false,
+      nextRoot: root,
+      reason: 'Select a component node to paste into.',
+    };
+  }
+
+  const nextTarget: NodeData = {
+    ...(target as NodeData),
+    children: appendChild((target as NodeData).children as Node, pastedNode),
+  };
+  const nextRoot = replaceNode(root, target, nextTarget as Node);
+  return { ok: true, nextRoot, pastedNode };
+}

package/src/utils/patterns.ts

@@ -1,10 +1,48 @@
-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 = {
+  label?: string;
+  description?: string;
+  category?: 'style' | 'container' | 'other' | string;
+  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 = {
+  label?: string;
+  description?: string;
+  category?: 'style' | 'container' | 'other' | string;
+  sort?: number;
+};
+
+type PatternMeta = {
+  label?: string;
+  description?: string;
+  // schemaVersion >= 2 uses `styles` (formerly `attributes`)
+  styles?: Record<string, AttributeMeta>;
+  // backwards-compat for schemaVersion 1 patterns
+  attributes?: Record<string, AttributeMeta>;
+  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 = {
   schemaVersion: number;
-  allowUnknownAttributes: boolean;
-  extends: string;
   pattern: {
     type: string;
     children: unknown;
@@ -17,6 +55,7 @@ type Pattern = {
   // where the inner record maps fieldName -> primitive type or enum options
   types?: Record<string, Record<string, string | string[]>>;
   // Optional defaults to be applied to node.attributes if not provided
+  meta?: PatternMeta;
 };
 
 const patterns: Pattern[] = generatedPatterns as unknown as Pattern[];
@@ -26,9 +65,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(
@@ -38,6 +119,13 @@ export function getAttributeSchema(
   return p?.pattern.attributes;
 }
 
+export function getAttributeMeta(
+  type?: string | null,
+): Record<string, AttributeMeta> | undefined {
+  const p = getPatternByType(type);
+  return p?.meta?.styles ?? p?.meta?.attributes;
+}
+
 /** Returns defaults block (if any) for a given component type */
 export function getDefaultsForType(
   type?: string | null,
@@ -68,7 +156,14 @@ 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 === 'fontFamily' ||
+    typeName === 'fontWeight' ||
+    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/useLogRender.ts

@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+import { logger } from './logger';
+
+export function useLogRender(sourceName: string, payload?: unknown) {
+  useEffect(() => {
+    logger.verbose(sourceName, 'rendered', payload);
+    return () => {
+      logger.verbose(sourceName, 'unmount');
+    };
+    // We intentionally log once per mount/update cycle only for rendered
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+}

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]);
+}

package/dist/build-components/OnboardDot/OnboardExpandingDotProps.generated.d.ts

@@ -1,10 +0,0 @@
-import type { NodeData } from '../../types/Node';
-export interface OnboardDotPropsGenerated {
-    child: string;
-    attributes: {
-        dotType?: 'expanding_dot' | 'normal_dot' | 'scaling_dot' | 'sliding_border' | 'sliding_dot' | 'liquid_like';
-    };
-}
-export interface OnboardDotComponentProps {
-    node: NodeData<OnboardDotPropsGenerated['attributes']>;
-}

package/dist/pages/tabs/BuilderTab.d.ts

@@ -1,9 +0,0 @@
-import { Node } from '../..';
-type BuilderTabProps = {
-    data: Node;
-    setData: (data: Node) => void;
-    current: Node;
-    setCurrent: (current: Node) => void;
-};
-export declare function BuilderTab({ data, setData, current, setCurrent, }: BuilderTabProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/pages/tabs/DebugTab.d.ts

@@ -1,7 +0,0 @@
-import { Node } from '../..';
-type DebugTabProps = {
-    data: Node;
-    setData: (data: Node) => void;
-};
-export declare function DebugTab({ data, setData }: DebugTabProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/pages/tabs/PreviewTab.d.ts

@@ -1,3 +0,0 @@
-type PreviewTabProps = {};
-export declare function PreviewTab({}: PreviewTabProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/src/build-components/OnboardDot/OnboardExpandingDotProps.generated.ts

@@ -1,20 +0,0 @@
-/* AUTO-GENERATED FILE - DO NOT EDIT */
-
-import type { NodeData } from '../../types/Node';
-
-export interface OnboardDotPropsGenerated {
-  child: string;
-  attributes: {
-    dotType?:
-      | 'expanding_dot'
-      | 'normal_dot'
-      | 'scaling_dot'
-      | 'sliding_border'
-      | 'sliding_dot'
-      | 'liquid_like';
-  };
-}
-
-export interface OnboardDotComponentProps {
-  node: NodeData<OnboardDotPropsGenerated['attributes']>;
-}

package/src/pages/tabs/BuilderTab.tsx

@@ -1,31 +0,0 @@
-import { Node } from '../..';
-import { Builder } from '../../components/Builder';
-
-type BuilderTabProps = {
-  data: Node;
-  setData: (data: Node) => void;
-  current: Node;
-  setCurrent: (current: Node) => void;
-};
-
-export function BuilderTab({
-  data,
-  setData,
-  current,
-  setCurrent,
-}: BuilderTabProps) {
-  return (
-    <div
-      role="tabpanel"
-      className="editor-panel-builder editor-panel editor-panel--active"
-      aria-hidden={false}
-    >
-      <Builder
-        data={data}
-        setData={setData}
-        current={current}
-        setCurrent={setCurrent}
-      />
-    </div>
-  );
-}

package/src/pages/tabs/DebugTab.tsx

@@ -1,21 +0,0 @@
-import { JsonEditor } from 'json-edit-react';
-import { Node } from '../..';
-
-type DebugTabProps = {
-  data: Node;
-  setData: (data: Node) => void;
-};
-
-export function DebugTab({ data, setData }: DebugTabProps) {
-  return (
-    <div
-      role="tabpanel"
-      className="editor-panel editor-panel--active editor-panels-debug"
-      aria-hidden={false}
-    >
-      <div style={{ flex: '1 1 auto', minHeight: 0, overflow: 'auto' }}>
-        <JsonEditor data={data as any} setData={setData as any} />
-      </div>
-    </div>
-  );
-}

package/src/pages/tabs/PreviewTab.tsx

@@ -1,192 +0,0 @@
-import { JsonEditor } from 'json-edit-react';
-import { Localication, TargetedScreenSize } from '../..';
-import { useRenderStore } from '../../store';
-
-type PreviewTabProps = {};
-
-export function PreviewTab({}: PreviewTabProps) {
-  const { appConfig, setAppConfig } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    setAppConfig: s.setAppConfig,
-  }));
-  return (
-    <div
-      role="tabpanel"
-      className="editor-panel editor-panel--active"
-      aria-hidden={false}
-    >
-      <div style={{ padding: 12 }}>
-        <div
-          style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}
-        >
-          <div>Default Language</div>
-          <select
-            value={appConfig.defaultLanguage ?? 'en'}
-            onChange={(e) => {
-              setAppConfig({
-                ...appConfig,
-                defaultLanguage: e.target.value,
-              });
-            }}
-          >
-            {Object.keys(appConfig.localication ?? {}).map((language) => (
-              <option key={language} value={language}>
-                {language}
-              </option>
-            ))}
-          </select>
-        </div>
-        <div
-          style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-            gap: 12,
-            marginTop: 8,
-          }}
-        >
-          <div>Light Background Color</div>
-          <input
-            type="color"
-            value={appConfig.screenStyle?.light.backgroundColor ?? '#FDFDFD'}
-            onChange={(e) => {
-              const next = {
-                ...appConfig.screenStyle,
-                light: {
-                  ...(appConfig.screenStyle?.light ?? {
-                    color: '#161827',
-                  }),
-                  backgroundColor: e.target.value,
-                },
-              };
-
-              setAppConfig({
-                ...appConfig,
-                screenStyle: next,
-              });
-            }}
-            className="input input--color"
-          />
-          <div>Light Color</div>
-          <input
-            type="color"
-            value={appConfig.screenStyle?.light.color ?? '#161827'}
-            onChange={(e) => {
-              const next = {
-                ...appConfig.screenStyle,
-                light: {
-                  ...(appConfig.screenStyle?.light ?? {
-                    backgroundColor: '#FDFDFD',
-                  }),
-                  color: e.target.value,
-                },
-              };
-
-              setAppConfig({
-                ...appConfig,
-                screenStyle: next,
-              });
-            }}
-            className="input input--color"
-          />
-          <div>Dark Background Color</div>
-          <input
-            type="color"
-            value={appConfig.screenStyle?.dark.backgroundColor ?? '#12131A'}
-            onChange={(e) => {
-              const next = {
-                ...appConfig.screenStyle,
-                dark: {
-                  ...(appConfig.screenStyle?.dark ?? {
-                    color: '#E9EBF9',
-                  }),
-                  backgroundColor: e.target.value,
-                },
-              };
-
-              setAppConfig({
-                ...appConfig,
-                screenStyle: next,
-              });
-            }}
-            className="input input--color"
-          />
-          <div>Dark Color</div>
-          <input
-            type="color"
-            value={appConfig.screenStyle?.dark.color ?? '#E9EBF9'}
-            onChange={(e) => {
-              const next = {
-                ...appConfig.screenStyle,
-                dark: {
-                  ...(appConfig.screenStyle?.dark ?? {
-                    backgroundColor: '#12131A',
-                  }),
-                  color: e.target.value,
-                },
-              };
-              setAppConfig({
-                ...appConfig,
-                screenStyle: next,
-              });
-            }}
-            className="input input--color"
-          />
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            marginTop: 8,
-          }}
-        >
-          <div>Dark Mode</div>
-          <input
-            type="checkbox"
-            checked={appConfig.theme === 'dark'}
-            onChange={(e) => {
-              const nextTheme = e.target.checked ? 'dark' : 'light';
-
-              setAppConfig({
-                ...appConfig,
-                theme: nextTheme,
-              });
-            }}
-          />
-        </div>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 8,
-            marginTop: 8,
-          }}
-        >
-          <div>Is RTL</div>
-          <input
-            type="checkbox"
-            checked={appConfig.isRtl ?? false}
-            onChange={(e) => {
-              setAppConfig({
-                ...appConfig,
-                isRtl: e.target.checked,
-              });
-            }}
-          />
-        </div>
-        <div style={{ marginTop: 8 }}>
-          <JsonEditor
-            rootName="localication"
-            data={appConfig.localication ?? {}}
-            setData={(data) => {
-              setAppConfig({
-                ...appConfig,
-                localication: data as Localication,
-              });
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}