@developer_tribe/react-builder 1.1.0 → 1.2.1

package/src/build-components/useNode.ts

@@ -7,9 +7,28 @@ export default function useNode<
   const type = node?.type;
   const defaults = getDefaultsForType(type) as Partial<T> | undefined;
   if (!defaults) return node;
-  const mergedAttributes: T = {
-    ...(defaults as T),
-    ...((node.attributes as T) ?? ({} as T)),
+  const nodeAttributes = ((node.attributes as T) ?? ({} as T)) as T & {
+    style?: Record<string, unknown>;
+  };
+  const defaultAttributes = defaults as T as T & {
+    style?: Record<string, unknown>;
   };
+  const mergedAttributes: T = {
+    ...(defaultAttributes as T),
+    ...(nodeAttributes as T),
+    // Deep merge `style` so default style values aren't lost when the node provides partial style overrides.
+    style: {
+      ...(defaultAttributes?.style ?? {}),
+      ...(nodeAttributes?.style ?? {}),
+    },
+  } as T;
+  if (
+    mergedAttributes &&
+    typeof (mergedAttributes as any).style === 'object' &&
+    (mergedAttributes as any).style != null &&
+    Object.keys((mergedAttributes as any).style).length === 0
+  ) {
+    delete (mergedAttributes as any).style;
+  }
   return { ...node, attributes: mergedAttributes };
 }

package/src/components/AttributesEditorPanel.tsx

@@ -1,19 +1,25 @@
-import { useEffect, useMemo, useState } from 'react';
-import { AttributesEditor, Node, NodeData } from '..';
+import AttributesEditor from '../AttributesEditor';
+import type { Node } from '../types/Node';
+import type { ProjectColors } from '../types/Project';
+import { useLogRender } from '../utils/useLogRender';
+import { useRenderStore } from '../store';
 
 interface AttributesEditorPanelProps {
-  current: Node;
   attributes: any;
   onChange: (data: Node) => void;
-  setCurrent: (current: Node) => void;
+  projectColors?: ProjectColors;
 }
 
 export function AttributesEditorPanel({
-  current,
   attributes,
   onChange,
-  setCurrent,
+  projectColors,
 }: AttributesEditorPanelProps) {
+  useLogRender('AttributesEditorPanel');
+  const { current, setCurrent } = useRenderStore((s) => ({
+    current: s.current,
+    setCurrent: s.setCurrent,
+  }));
   if (!current) return null;
 
   function replaceNode(root: Node, target: Node, next: Node): Node {
@@ -42,68 +48,19 @@ export function AttributesEditorPanel({
     }
     return root;
   }
-  const [draft, setDraft] = useState<Node>(current);
-  const [isAllowedTopAccept, setIsAllowedTopAccept] = useState<boolean>(false);
-
-  const isEqual = useMemo(() => {
-    try {
-      return JSON.stringify(current) === JSON.stringify(draft);
-    } catch {
-      return current === draft;
-    }
-  }, [current, draft]);
-
-  useEffect(() => {
-    setDraft(current);
-    setIsAllowedTopAccept(false);
-  }, [current, attributes]);
-
-  useEffect(() => {
-    setIsAllowedTopAccept(!isEqual);
-  }, [isEqual]);
+  const handleAttributesChange = (next: Node) => {
+    const root = attributes as Node;
+    const updated = replaceNode(root, current, next);
+    onChange(updated);
+    setCurrent(next);
+  };
 
   return (
     <div style={{ padding: 12 }}>
-      <h2>{(current as NodeData).type ?? current?.toString() ?? '?'}</h2>{' '}
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 8,
-          padding: '16px 0',
-        }}
-      >
-        <h3 style={{ marginTop: 0, marginBottom: 0, flex: '1 1 auto' }}>
-          Attributes
-        </h3>
-        <button
-          disabled={!isAllowedTopAccept}
-          onClick={() => {
-            setDraft(current);
-            setIsAllowedTopAccept(false);
-          }}
-        >
-          Revert
-        </button>
-        <button
-          disabled={!isAllowedTopAccept}
-          onClick={() => {
-            const root = attributes as Node;
-            const updated = replaceNode(root, current, draft);
-            onChange(updated);
-            setIsAllowedTopAccept(false);
-            setCurrent(draft);
-          }}
-        >
-          Accept
-        </button>
-      </div>
       <AttributesEditor
-        node={draft}
-        onChange={(next: Node) => {
-          setDraft(next);
-          setIsAllowedTopAccept(true);
-        }}
+        node={current}
+        onChange={handleAttributesChange}
+        projectColors={projectColors}
       />
     </div>
   );

package/src/components/BottomBar.tsx

@@ -0,0 +1,242 @@
+import React, { useMemo, useState } from 'react';
+import { Icon } from './Icon.generated';
+import type { IconsType } from '../types/Icons';
+import { useRenderStore } from '../store';
+import { Checkbox } from './Checkbox';
+import type { Localication } from '../types/PreviewConfig';
+import { LocalicationModal, Modal, ScreenColorsModal } from '../modals';
+import { JsonTextEditor } from './JsonTextEditor';
+import type { Node } from '../types/Node';
+import { analyseAndProccess } from '../utils/analyseNode';
+
+type BottomBarProps = {
+  className?: string;
+  data: Node;
+  setData: React.Dispatch<React.SetStateAction<Node>>;
+};
+
+/**
+ * Bottom tool bar (Figma-like).
+ */
+export function BottomBar({ className, data, setData }: BottomBarProps) {
+  const rtlIcon: IconsType = 'translate';
+  const magicCursorIcon: IconsType = 'magicpen';
+  const debugIcon: IconsType = 'speedometer-03';
+  const localizationIcon: IconsType = 'globe-01';
+  const colorIcon: IconsType = 'colors';
+
+  const { appConfig, setAppConfig, previewMode, setPreviewMode } =
+    useRenderStore((s) => ({
+      appConfig: s.appConfig,
+      setAppConfig: s.setAppConfig,
+      previewMode: s.previewMode,
+      setPreviewMode: s.setPreviewMode,
+    }));
+
+  const [isDebugOpen, setIsDebugOpen] = useState(false);
+  const [isLocalizationOpen, setIsLocalizationOpen] = useState(false);
+  const [isColorsOpen, setIsColorsOpen] = useState(false);
+
+  const languages = useMemo(() => ['en', 'tr', 'ar'], []);
+  const activeLanguage = appConfig.defaultLanguage ?? 'en';
+
+  const handleLocalicationChange = (next: Localication) => {
+    setAppConfig({ ...appConfig, localication: next });
+  };
+
+  const themeIsActive = appConfig.theme === 'dark';
+  const rtlIsActive = appConfig.isRtl ?? false;
+  const previewIsActive = previewMode;
+  const themeIcon: IconsType = themeIsActive ? 'moon-bold' : 'sun';
+
+  return (
+    <>
+      <div className={['rb-bottom-bar', className].filter(Boolean).join(' ')}>
+        <button
+          type="button"
+          className={`rb-bottom-bar__button${themeIsActive ? ' is-active' : ''}`}
+          aria-label="Theme"
+          aria-pressed={themeIsActive}
+          onClick={() =>
+            setAppConfig({
+              ...appConfig,
+              theme: appConfig.theme === 'dark' ? 'light' : 'dark',
+            })
+          }
+        >
+          <Icon iconType={themeIcon} size={20} color="currentColor" alt="" />
+        </button>
+
+        <button
+          type="button"
+          className={`rb-bottom-bar__button rb-bottom-bar__button--rtl${
+            rtlIsActive ? ' is-active' : ''
+          }`}
+          aria-label="RTL"
+          aria-pressed={rtlIsActive}
+          onClick={() =>
+            setAppConfig({ ...appConfig, isRtl: !(appConfig.isRtl ?? false) })
+          }
+        >
+          <Icon iconType={rtlIcon} size={18} color="currentColor" alt="" />
+          <span className="rb-bottom-bar__rtl-text">RTL</span>
+        </button>
+
+        <button
+          type="button"
+          className={`rb-bottom-bar__button rb-bottom-bar__button--preview${
+            previewIsActive ? ' is-active' : ''
+          }`}
+          aria-label="Magic cursor tool"
+          aria-pressed={previewIsActive}
+          onClick={() => setPreviewMode(!previewMode)}
+        >
+          <Icon
+            iconType={magicCursorIcon}
+            size={20}
+            color="currentColor"
+            alt=""
+          />
+        </button>
+
+        <button
+          type="button"
+          className={`rb-bottom-bar__button${isDebugOpen ? ' is-active' : ''}`}
+          aria-label="Debug"
+          aria-pressed={isDebugOpen}
+          onClick={() => setIsDebugOpen(true)}
+        >
+          <Icon iconType={debugIcon} size={20} color="currentColor" alt="" />
+        </button>
+
+        <button
+          type="button"
+          className={`rb-bottom-bar__button${
+            isLocalizationOpen ? ' is-active' : ''
+          }`}
+          aria-label="Localization"
+          aria-pressed={isLocalizationOpen}
+          onClick={() => setIsLocalizationOpen(true)}
+        >
+          <Icon
+            iconType={localizationIcon}
+            size={20}
+            color="currentColor"
+            alt=""
+          />
+        </button>
+
+        <button
+          type="button"
+          className={`rb-bottom-bar__button${isColorsOpen ? ' is-active' : ''}`}
+          aria-label="Color"
+          aria-pressed={isColorsOpen}
+          onClick={() => setIsColorsOpen(true)}
+        >
+          <Icon iconType={colorIcon} size={20} color="currentColor" alt="" />
+        </button>
+
+        <div className="rb-bottom-bar__spacer" />
+
+        <div className="rb-bottom-bar__langs" aria-label="Language">
+          {languages.map((language) => (
+            <button
+              key={language}
+              type="button"
+              className={`rb-bottom-bar__lang${
+                activeLanguage === language ? ' is-active' : ''
+              }`}
+              onClick={() =>
+                setAppConfig({ ...appConfig, defaultLanguage: language })
+              }
+            >
+              {language}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {isLocalizationOpen && (
+        <LocalicationModal
+          data={appConfig.localication ?? {}}
+          onChange={handleLocalicationChange}
+          onClose={() => setIsLocalizationOpen(false)}
+        />
+      )}
+
+      {isColorsOpen && (
+        <ScreenColorsModal
+          appConfig={appConfig}
+          onChange={setAppConfig}
+          onClose={() => setIsColorsOpen(false)}
+        />
+      )}
+
+      {isDebugOpen && (
+        <Modal
+          onClose={() => setIsDebugOpen(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 JSON
+              </h3>
+              <p className="localication-modal__description">
+                Inspect and edit raw node JSON.
+              </p>
+            </div>
+            <button
+              type="button"
+              className="editor-button"
+              onClick={() => setIsDebugOpen(false)}
+            >
+              Close
+            </button>
+          </div>
+          <div className="localication-modal__body">
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+              <Checkbox
+                label="Preview mode"
+                checked={previewMode}
+                onChange={setPreviewMode}
+              />
+              <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 })
+                }
+              />
+            </div>
+            <div
+              className="localication-modal__editor"
+              style={{ marginTop: 12 }}
+            >
+              <JsonTextEditor
+                rootName="node"
+                value={data ?? {}}
+                onChange={(next) =>
+                  setData(analyseAndProccess(next as Node) as Node)
+                }
+                className="localication-modal__json-editor"
+              />
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}

package/src/components/Breadcrumb.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { useLogRender } from '../utils/useLogRender';
 export type BreadcrumbItem = {
   label: string;
   to?: string;
@@ -9,33 +10,66 @@ type BreadcrumbProps = {
   items: BreadcrumbItem[];
   separator?: ReactNode;
   ariaLabel?: string;
+  onBack?: () => void;
+  backLabel?: string;
 };
 
 export function Breadcrumb({
   items,
   separator = '/',
   ariaLabel = 'Breadcrumb',
+  onBack,
+  backLabel = 'Back',
 }: BreadcrumbProps) {
+  useLogRender('Breadcrumb');
   return (
     <nav className="breadcrumb" aria-label={ariaLabel}>
+      {onBack && (
+        <button
+          type="button"
+          className="breadcrumb__back"
+          onClick={onBack}
+          aria-label="Go back"
+        >
+          <span className="breadcrumb__back-icon" aria-hidden>
+            ←
+          </span>
+          <span>{backLabel}</span>
+        </button>
+      )}
       <ol className="breadcrumb__list">
         {items.map((item, index) => {
           const isLast = index === items.length - 1;
+          const isClickable = !isLast && (item.to || item.onClick);
           return (
-            <li className="breadcrumb__item" key={`${item.label}-${index}`}>
+            <li
+              className={`breadcrumb__item ${isClickable ? 'breadcrumb__item--clickable' : ''}`}
+              key={`${item.label}-${index}`}
+              onClick={isClickable ? item.onClick : undefined}
+              role={isClickable ? 'button' : undefined}
+              tabIndex={isClickable ? 0 : undefined}
+              onKeyDown={
+                isClickable && item.onClick
+                  ? (e) => {
+                      if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        item.onClick?.();
+                      }
+                    }
+                  : undefined
+              }
+            >
               {index > 0 && (
                 <span className="breadcrumb__separator" aria-hidden>
                   {separator}
                 </span>
               )}
-              {isLast || !item.to ? (
+              {isLast || (!item.to && !item.onClick) ? (
                 <span className="breadcrumb__current" aria-current="page">
                   {item.label}
                 </span>
               ) : (
-                <p onClick={item.onClick} className="breadcrumb__link">
-                  {item.label}
-                </p>
+                <span className="breadcrumb__link">{item.label}</span>
               )}
             </li>
           );