@developer_tribe/react-builder 1.0.2 → 1.0.3

package/src/types/Project.ts

@@ -1,11 +1,25 @@
 import { Node } from '../types/Node';
 import { AppConfig } from './PreviewConfig';
 
+export type ProjectColorTokenMap = Record<string, string>;
+
+export type ProjectThemeColors = {
+  light?: ProjectColorTokenMap;
+  dark?: ProjectColorTokenMap;
+  [themeName: string]: ProjectColorTokenMap | undefined;
+};
+
+export interface ProjectColors {
+  STATIC_COLORS?: ProjectColorTokenMap;
+  THEME_COLORS?: ProjectThemeColors;
+}
+
 export interface ProjectBase<T> {
   name: string;
   version: string;
   data: T;
   appConfig?: AppConfig;
+  projectColors?: ProjectColors;
 }
 
 export interface Project extends ProjectBase<Node> {}

package/src/utils/analyseNode.ts

@@ -1,4 +1,5 @@
 import { Node, NodeData, NodeDefaultAttribute } from '../types/Node';
+import { generateRandomKeyForNode } from './generateRandomKeyForNode';
 
 export function isNodeNullOrUndefined<T = NodeDefaultAttribute>(
   node: Node<T>,
@@ -17,6 +18,82 @@ export function isEmptyObject<T = NodeDefaultAttribute>(
   return Object.keys(node as Object).length === 0;
 }
 
+function collectDuplicateKey(
+  node: Node<NodeDefaultAttribute>,
+  usedKeys: Set<string>,
+): string | null {
+  if (isNodeNullOrUndefined(node) || isNodeString(node)) {
+    return null;
+  }
+
+  if (isNodeArray(node)) {
+    const nodeArray = node as unknown as Node<NodeDefaultAttribute>[];
+    for (const value of nodeArray) {
+      const duplicate = collectDuplicateKey(value, usedKeys);
+      if (duplicate) {
+        return duplicate;
+      }
+    }
+    return null;
+  }
+
+  const recordData = node as NodeData<NodeDefaultAttribute>;
+  if (recordData.key) {
+    if (usedKeys.has(recordData.key)) {
+      return recordData.key;
+    }
+    usedKeys.add(recordData.key);
+  }
+
+  if (recordData.children) {
+    return collectDuplicateKey(
+      recordData.children as Node<NodeDefaultAttribute>,
+      usedKeys,
+    );
+  }
+
+  return null;
+}
+
+function assignMissingKeys(
+  node: Node<NodeDefaultAttribute>,
+  usedKeys: Set<string>,
+): Node<NodeDefaultAttribute> {
+  if (isNodeNullOrUndefined(node) || isNodeString(node)) {
+    return node;
+  }
+
+  if (isNodeArray(node)) {
+    const nodeArray = node as unknown as Node<NodeDefaultAttribute>[];
+    return nodeArray.map((child) =>
+      assignMissingKeys(child, usedKeys),
+    ) as unknown as Node<NodeDefaultAttribute>;
+  }
+
+  const recordData = node as NodeData<NodeDefaultAttribute>;
+
+  let key = recordData.key;
+  if (!key) {
+    do {
+      key = generateRandomKeyForNode(recordData.type);
+    } while (usedKeys.has(key));
+    usedKeys.add(key);
+  }
+
+  const children = recordData.children
+    ? (assignMissingKeys(
+        recordData.children as Node<NodeDefaultAttribute>,
+        usedKeys,
+      ) as Node<NodeDefaultAttribute>)
+    : recordData.children;
+
+  return {
+    ...recordData,
+    key,
+    children,
+  };
+}
+
 export function analyseNode(node: Node<NodeDefaultAttribute>): {
   valid: boolean;
   message?: string;
@@ -75,3 +152,24 @@ export function analyseNode(node: Node<NodeDefaultAttribute>): {
     };
   }
 }
+
+export function analyseAndProccess(
+  node: Node<NodeDefaultAttribute>,
+): Node<NodeDefaultAttribute> | null {
+  if (isNodeNullOrUndefined(node)) {
+    return null;
+  }
+
+  const { valid, message } = analyseNode(node);
+  if (!valid) {
+    throw new Error(message ?? 'Node is not valid');
+  }
+
+  const usedKeys = new Set<string>();
+  const duplicateKey = collectDuplicateKey(node, usedKeys);
+  if (duplicateKey) {
+    throw new Error(`Duplicate node key detected: ${duplicateKey}`);
+  }
+
+  return assignMissingKeys(node, usedKeys);
+}

package/src/utils/extractTextStyle.ts

@@ -1,16 +1,23 @@
 import type { NodeData } from '../types/Node';
 import type { TextPropsGenerated } from '../build-components/Text/TextProps.generated';
+import type { AppConfig } from '../types/PreviewConfig';
+import { defaultAppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
 import { fs, parseSize } from '../size-matters';
-import { useRenderStore } from '../store';
+import { parseColor } from './parseColor';
+
+type ExtractTextStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
 
 export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
   node: NodeData<T>,
+  options: ExtractTextStyleOptions = {},
 ) {
   const attributes = node.attributes;
-  //TODO: it should be passed as a prop to the function (need a state)
-  const {
-    appConfig: { screenStyle, theme },
-  } = useRenderStore.getState();
+  const resolvedAppConfig = options.appConfig ?? defaultAppConfig;
+  const { screenStyle, theme } = resolvedAppConfig;
   const fallbackColor =
     theme === 'light' ? screenStyle.light.color : screenStyle.dark.color;
 
@@ -30,7 +37,11 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
     style.fontSize = fs(14);
   }
   if (attributes.fontWeight) style.fontWeight = attributes.fontWeight;
-  style.color = attributes.color ?? fallbackColor;
+  const resolvedTextColor = parseColor(attributes.color, {
+    projectColors: options.projectColors,
+    appConfig: resolvedAppConfig,
+  });
+  style.color = resolvedTextColor ?? fallbackColor;
   if (attributes.textAlign)
     style.textAlign = attributes.textAlign as React.CSSProperties['textAlign'];
 
@@ -99,8 +110,13 @@ export function extractTextStyle<T extends TextPropsGenerated['attributes']>(
     ) as React.CSSProperties['marginRight'];
 
   // Decor
-  if (attributes.backgroundColor)
-    style.backgroundColor = attributes.backgroundColor;
+  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'];

package/src/utils/extractViewStyle.ts

@@ -1,9 +1,18 @@
 import { ViewPropsGenerated } from '../build-components/View/ViewProps.generated';
 import type { NodeData } from '../types/Node';
+import type { AppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
 import { parseSize } from '../size-matters';
+import { parseColor } from './parseColor';
+
+type ExtractViewStyleOptions = {
+  appConfig?: AppConfig;
+  projectColors?: ProjectColors;
+};
 
 export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   node: NodeData<T>,
+  options: ExtractViewStyleOptions = {},
 ) {
   const attributes = node.attributes;
   const scrollable = attributes?.scrollable ?? false;
@@ -78,11 +87,26 @@ export function extractViewStyle<T extends ViewPropsGenerated['attributes']>(
   setParsedSize('marginBottom', attributes.marginBottom);
   setParsedSize('marginLeft', attributes.marginLeft);
   setParsedSize('marginRight', attributes.marginRight);
-
-  if (attributes.backgroundColor)
-    style.backgroundColor = attributes.backgroundColor;
+  console.log('attributes.backgroundColor', attributes.backgroundColor);
+  console.log(
+    'parseColor(attributes.backgroundColor)',
+    parseColor(attributes.backgroundColor),
+  );
+  if (attributes.backgroundColor) {
+    style.backgroundColor =
+      parseColor(attributes.backgroundColor, {
+        projectColors: options.projectColors,
+        appConfig: options.appConfig,
+      }) ?? attributes.backgroundColor;
+  }
   setParsedSize('borderRadius', attributes.borderRadius);
   setParsedSize('width', attributes.width);
   setParsedSize('height', attributes.height);
+  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);
   return style;
 }

package/src/utils/parseColor.ts

@@ -0,0 +1,43 @@
+import type { AppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
+
+const STATIC_PREFIX = 'STATIC_COLORS.';
+const THEME_PREFIX = 'THEME_COLORS.';
+
+export type ParseColorOptions = {
+  projectColors?: ProjectColors;
+  appConfig?: AppConfig;
+};
+
+export function parseColor(value?: string, options: ParseColorOptions = {}) {
+  if (typeof value !== 'string') return value;
+  const trimmed = value.trim();
+  if (!trimmed) return undefined;
+
+  const { projectColors, appConfig } = options;
+  if (!projectColors) return trimmed;
+
+  if (trimmed.startsWith(STATIC_PREFIX)) {
+    const token = trimmed.slice(STATIC_PREFIX.length);
+    const resolved = projectColors.STATIC_COLORS?.[token];
+    return typeof resolved === 'string' && resolved.trim()
+      ? resolved.trim()
+      : trimmed;
+  }
+
+  if (trimmed.startsWith(THEME_PREFIX)) {
+    const token = trimmed.slice(THEME_PREFIX.length);
+    if (!token) return trimmed;
+
+    const theme = appConfig?.theme ?? 'light';
+    const themeTokens = projectColors.THEME_COLORS?.[theme];
+    const resolved = themeTokens?.[token];
+    if (typeof resolved === 'string' && resolved.trim()) {
+      return resolved.trim();
+    }
+
+    return trimmed;
+  }
+
+  return trimmed;
+}

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/PreviewTab.d.ts

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

package/src/pages/tabs/DebugTab.tsx

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-import { JsonEditor } from 'json-edit-react';
-import { Modal } from '../../modals';
-import { Node } from '../..';
-import { useLogRender } from '../../utils/useLogRender';
-
-type DebugTabProps = {
-  data: Node;
-  setData: (data: Node) => void;
-};
-
-export function DebugTab({ data, setData }: DebugTabProps) {
-  useLogRender('DebugTab');
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <>
-      <button
-        type="button"
-        className="editor-button debug-button"
-        title="Inspect raw JSON data"
-        onClick={() => setIsOpen(true)}
-      >
-        Debug JSON
-      </button>
-      {isOpen ? (
-        <Modal
-          onClose={() => setIsOpen(false)}
-          ariaLabelledBy="debug-json-editor-title"
-          className="modal--large modal--scrollable"
-          contentClassName="localication-modal__content"
-        >
-          <div className="modal__header localication-modal__header">
-            <div className="localication-modal__header-main">
-              <h3 id="debug-json-editor-title" className="modal__title">
-                Debug data
-              </h3>
-              <p className="localication-modal__description">
-                Inspect and edit the current node tree using the JSON editor.
-              </p>
-            </div>
-            <button
-              type="button"
-              className="editor-button"
-              onClick={() => setIsOpen(false)}
-            >
-              Close
-            </button>
-          </div>
-          <div className="localication-modal__body">
-            <div className="localication-modal__editor">
-              <JsonEditor
-                rootName="debug"
-                data={data as any}
-                setData={setData as any}
-                className="localication-modal__json-editor"
-                maxWidth={'100%'}
-              />
-            </div>
-          </div>
-        </Modal>
-      ) : null}
-    </>
-  );
-}

package/src/pages/tabs/PreviewTab.tsx

@@ -1,206 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { Localication } from '../..';
-import { useLogRender } from '../../utils/useLogRender';
-import { useRenderStore } from '../../store';
-import { LocalicationModal } from '../../modals/LocalicationModal';
-import { Checkbox } from '../../components/Checkbox';
-
-type PreviewTabProps = {};
-
-export function PreviewTab({}: PreviewTabProps) {
-  useLogRender('PreviewTab');
-  const { appConfig, setAppConfig } = useRenderStore((s) => ({
-    appConfig: s.appConfig,
-    setAppConfig: s.setAppConfig,
-  }));
-  const [isLocalicationModalOpen, setIsLocalicationModalOpen] = useState(false);
-
-  const handleLocalicationChange = useCallback(
-    (data: Localication) => {
-      setAppConfig({
-        ...appConfig,
-        localication: data,
-      });
-    },
-    [appConfig, 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={{ marginTop: 8 }}>
-          <Checkbox
-            label="Dark Mode"
-            checked={appConfig.theme === 'dark'}
-            onChange={(checked) => {
-              const nextTheme = checked ? 'dark' : 'light';
-              setAppConfig({
-                ...appConfig,
-                theme: nextTheme,
-              });
-            }}
-          />
-        </div>
-        <div style={{ marginTop: 8 }}>
-          <Checkbox
-            label="Is RTL"
-            checked={appConfig.isRtl ?? false}
-            onChange={(checked) => {
-              setAppConfig({
-                ...appConfig,
-                isRtl: checked,
-              });
-            }}
-          />
-        </div>
-        <div
-          style={{
-            marginTop: 16,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 8,
-          }}
-        >
-          <div style={{ fontWeight: 600 }}>Localization</div>
-          <p style={{ margin: 0, fontSize: 13, color: '#4b5563' }}>
-            Manage translations for each language configured in your preview.
-          </p>
-          <button
-            type="button"
-            className="editor-button"
-            onClick={() => setIsLocalicationModalOpen(true)}
-          >
-            Open localization editor
-          </button>
-        </div>
-      </div>
-      {isLocalicationModalOpen ? (
-        <LocalicationModal
-          data={appConfig.localication ?? {}}
-          onChange={handleLocalicationChange}
-          onClose={() => setIsLocalicationModalOpen(false)}
-        />
-      ) : null}
-    </div>
-  );
-}