@developer_tribe/react-builder 1.0.4 → 1.0.6

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/nodeTree.ts

@@ -0,0 +1,99 @@
+import type { Node, NodeData } from '../types/Node';
+
+export function deleteNodeFromTree(root: Node, target: Node): Node {
+  if (root === null || root === undefined) return root;
+  if (typeof root === 'string') return root;
+
+  if (Array.isArray(root)) {
+    let changed = false;
+    const nextChildren: Node[] = [];
+    for (const child of root) {
+      if (child === target) {
+        changed = true;
+        continue;
+      }
+      const nextChild = deleteNodeFromTree(child, target);
+      if (nextChild !== child) changed = true;
+      nextChildren.push(nextChild);
+    }
+    return changed ? nextChildren : root;
+  }
+
+  const data = root as any;
+  if ('children' in data) {
+    const prev = data.children as Node;
+    if (!prev) return root;
+
+    if (Array.isArray(prev)) {
+      let changed = false;
+      const nextChildren: Node[] = [];
+      for (const child of prev) {
+        if (child === target) {
+          changed = true;
+          continue;
+        }
+        const nextChild = deleteNodeFromTree(child, target);
+        if (nextChild !== child) changed = true;
+        nextChildren.push(nextChild);
+      }
+      if (changed) {
+        return { ...data, children: nextChildren } as Node;
+      }
+      return root;
+    }
+
+    if (prev === target) {
+      return { ...data, children: '' } as Node;
+    }
+
+    const nextChild = deleteNodeFromTree(prev, target);
+    if (nextChild !== prev) {
+      return { ...data, children: nextChild } as Node;
+    }
+  }
+
+  return root;
+}
+
+export function isNodeRecord(node: Node): node is NodeData {
+  return (
+    node !== null &&
+    node !== undefined &&
+    typeof node === 'object' &&
+    !Array.isArray(node)
+  );
+}
+
+export function nodeHasChild(parent: NodeData, potentialChild: Node): boolean {
+  const { children } = parent;
+  if (!children) return false;
+  if (Array.isArray(children)) {
+    return children.some((child) => child === potentialChild);
+  }
+  return children === potentialChild;
+}
+
+export function findNodeByKey(root: Node, key?: string): Node | null {
+  if (!key) return null;
+  if (root === null || root === undefined) return null;
+  if (typeof root === 'string') return null;
+
+  if (Array.isArray(root)) {
+    for (const child of root) {
+      const found = findNodeByKey(child, key);
+      if (found) return found;
+    }
+    return null;
+  }
+
+  const nodeData = root as NodeData;
+  if (nodeData.key === key) {
+    return nodeData;
+  }
+
+  if (nodeData.children) {
+    return findNodeByKey(nodeData.children as Node, key);
+  }
+
+  return null;
+}

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/dist/pages/tabs/SideTool.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { Node } from '../..';
-type SideToolProps = {
-    data: Node;
-    setData: React.Dispatch<React.SetStateAction<Node>>;
-};
-export declare function SideTool({ data, setData }: SideToolProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/src/pages/tabs/SideTool.tsx

@@ -1,260 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { JsonTextEditor } from '../../components/JsonTextEditor';
-import { Modal } from '../../modals';
-import { Localication, Node } from '../..';
-import { useLogRender } from '../../utils/useLogRender';
-import { useRenderStore } from '../../store';
-import { Checkbox } from '../../components/Checkbox';
-import { LocalicationModal } from '../../modals/LocalicationModal';
-import { analyseAndProccess } from '../../utils/analyseNode';
-
-const screenStyleDefaults = {
-  light: { backgroundColor: '#FDFDFD', color: '#161827' },
-  dark: { backgroundColor: '#12131A', color: '#E9EBF9' },
-} as const;
-
-type ScreenMode = keyof typeof screenStyleDefaults;
-type ScreenColorKey = keyof (typeof screenStyleDefaults)['light'];
-
-type SideToolProps = {
-  data: Node;
-  setData: React.Dispatch<React.SetStateAction<Node>>;
-};
-
-const colorFields = [
-  {
-    id: 'light-bg',
-    label: 'Light Background Color',
-    mode: 'light' as ScreenMode,
-    key: 'backgroundColor' as ScreenColorKey,
-  },
-  {
-    id: 'light-color',
-    label: 'Light Color',
-    mode: 'light' as ScreenMode,
-    key: 'color' as ScreenColorKey,
-  },
-  {
-    id: 'dark-bg',
-    label: 'Dark Background Color',
-    mode: 'dark' as ScreenMode,
-    key: 'backgroundColor' as ScreenColorKey,
-  },
-  {
-    id: 'dark-color',
-    label: 'Dark Color',
-    mode: 'dark' as ScreenMode,
-    key: 'color' as ScreenColorKey,
-  },
-];
-
-export function SideTool({ data, setData }: SideToolProps) {
-  useLogRender('SideTool');
-  const [isDebugModalOpen, setIsDebugModalOpen] = useState(false);
-  const [isLocalicationModalOpen, setIsLocalicationModalOpen] = useState(false);
-  const [isCompactMode, setIsCompactMode] = useState(() => {
-    if (typeof window === 'undefined') {
-      return false;
-    }
-    return window.innerWidth < 1000;
-  });
-  const [isCompactPanelVisible, setIsCompactPanelVisible] = useState(false);
-  const { appConfig, setAppConfig, previewMode, setPreviewMode } =
-    useRenderStore((s) => ({
-      appConfig: s.appConfig,
-      setAppConfig: s.setAppConfig,
-      previewMode: s.previewMode,
-      setPreviewMode: s.setPreviewMode,
-    }));
-
-  useEffect(() => {
-    if (typeof window === 'undefined') {
-      return;
-    }
-
-    const handleResize = () => {
-      const compact = window.innerWidth < 1000;
-      setIsCompactMode(compact);
-    };
-
-    handleResize();
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  const getScreenColorValue = (mode: ScreenMode, key: ScreenColorKey) =>
-    appConfig.screenStyle?.[mode]?.[key] ?? screenStyleDefaults[mode][key];
-
-  const handleScreenStyleChange = (
-    mode: ScreenMode,
-    key: ScreenColorKey,
-    value: string,
-  ) => {
-    setAppConfig({
-      ...appConfig,
-      screenStyle: {
-        ...screenStyleDefaults,
-        ...appConfig.screenStyle,
-        [mode]: {
-          ...screenStyleDefaults[mode],
-          ...appConfig.screenStyle?.[mode],
-          [key]: value,
-        },
-      },
-    });
-  };
-
-  const handleLocalicationChange = (data: Localication) => {
-    setAppConfig({ ...appConfig, localication: data });
-  };
-
-  return (
-    <div
-      style={{
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 8,
-      }}
-    >
-      <button
-        type="button"
-        className="editor-button"
-        onClick={() => setIsCompactPanelVisible((prev) => !prev)}
-        aria-pressed={isCompactPanelVisible}
-        style={{ alignSelf: 'flex-start' }}
-      >
-        {isCompactPanelVisible ? 'Hide tools' : 'Show tools'}
-      </button>
-
-      {isCompactPanelVisible && (
-        <div className="side-tool">
-          <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>
-
-          <Checkbox
-            label="Dark Mode"
-            checked={appConfig.theme === 'dark'}
-            onChange={(checked) =>
-              setAppConfig({ ...appConfig, theme: checked ? 'dark' : 'light' })
-            }
-          />
-
-          <Checkbox
-            label="Is RTL"
-            checked={appConfig.isRtl ?? false}
-            onChange={(checked) =>
-              setAppConfig({ ...appConfig, isRtl: checked })
-            }
-          />
-
-          <Checkbox
-            label="Preview mode"
-            checked={previewMode}
-            onChange={setPreviewMode}
-          />
-
-          <div>
-            <div
-              style={{
-                display: 'grid',
-                gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-                gap: 12,
-              }}
-            >
-              {colorFields.map(({ id, label, mode, key }) => (
-                <React.Fragment key={id}>
-                  <div>{label}</div>
-                  <input
-                    id={id}
-                    type="color"
-                    className="input input--color"
-                    value={getScreenColorValue(mode, key)}
-                    onChange={(e) =>
-                      handleScreenStyleChange(mode, key, e.target.value)
-                    }
-                  />
-                </React.Fragment>
-              ))}
-            </div>
-          </div>
-
-          <div
-            style={{
-              marginTop: 'auto',
-              paddingTop: 16,
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 8,
-            }}
-          >
-            <button
-              type="button"
-              className="editor-button"
-              onClick={() => setIsLocalicationModalOpen(true)}
-            >
-              Open localization editor
-            </button>
-            <button
-              type="button"
-              className="editor-button debug-button"
-              title="Inspect raw JSON data"
-              onClick={() => setIsDebugModalOpen(true)}
-            >
-              Debug JSON
-            </button>
-          </div>
-
-          {isDebugModalOpen && (
-            <Modal
-              onClose={() => setIsDebugModalOpen(false)}
-              ariaLabelledBy="debug-json-editor-title"
-              className="modal--large modal--scrollable"
-              contentClassName="localication-modal__content"
-            >
-              <div className="modal__header localication-modal__header">
-                <button
-                  type="button"
-                  className="editor-button"
-                  onClick={() => setIsDebugModalOpen(false)}
-                >
-                  Close
-                </button>
-              </div>
-              <div className="localication-modal__body">
-                <div className="localication-modal__editor">
-                  <JsonTextEditor
-                    rootName="node"
-                    value={data ?? {}}
-                    onChange={(next) =>
-                      setData(analyseAndProccess(next as Node) as Node)
-                    }
-                    className="localication-modal__json-editor"
-                  />
-                </div>
-              </div>
-            </Modal>
-          )}
-
-          {isLocalicationModalOpen && (
-            <LocalicationModal
-              data={appConfig.localication ?? {}}
-              onChange={handleLocalicationChange}
-              onClose={() => setIsLocalicationModalOpen(false)}
-            />
-          )}
-        </div>
-      )}
-    </div>
-  );
-}