@developer_tribe/react-builder 1.0.5 → 1.0.6

package/src/components/AttributesEditorPanel.tsx

@@ -5,8 +5,8 @@ import { useLogRender } from '../utils/useLogRender';
 import { useRenderStore } from '../store';
 
 interface AttributesEditorPanelProps {
-  attributes: any;
-  onChange: (data: Node) => void;
+  attributes?: any;
+  onChange?: (data: Node) => void;
   projectColors?: ProjectColors;
 }
 
@@ -16,10 +16,14 @@ export function AttributesEditorPanel({
   projectColors,
 }: AttributesEditorPanelProps) {
   useLogRender('AttributesEditorPanel');
-  const { current, setCurrent } = useRenderStore((s) => ({
-    current: s.current,
-    setCurrent: s.setCurrent,
-  }));
+  const { current, setCurrent, editorData, setEditorData } = useRenderStore(
+    (s) => ({
+      current: s.current,
+      setCurrent: s.setCurrent,
+      editorData: s.editorData,
+      setEditorData: s.setEditorData,
+    }),
+  );
   if (!current) return null;
 
   function replaceNode(root: Node, target: Node, next: Node): Node {
@@ -49,9 +53,9 @@ export function AttributesEditorPanel({
     return root;
   }
   const handleAttributesChange = (next: Node) => {
-    const root = attributes as Node;
+    const root = (attributes ?? editorData) as Node;
     const updated = replaceNode(root, current, next);
-    onChange(updated);
+    (onChange ?? setEditorData)(updated);
     setCurrent(next);
   };
 

package/src/components/BottomBar.tsx

@@ -0,0 +1,236 @@
+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;
+};
+
+/**
+ * Empty placeholder bottom bar (Figma-like). We'll complete later.
+ */
+export function BottomBar({ className }: 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,
+    editorData,
+    setEditorData,
+  } = useRenderStore((s) => ({
+    appConfig: s.appConfig,
+    setAppConfig: s.setAppConfig,
+    previewMode: s.previewMode,
+    setPreviewMode: s.setPreviewMode,
+    editorData: s.editorData,
+    setEditorData: s.setEditorData,
+  }));
+
+  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 = (data: Localication) => {
+    setAppConfig({ ...appConfig, localication: data });
+  };
+
+  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={editorData ?? {}}
+                onChange={(next) =>
+                  setEditorData(analyseAndProccess(next as Node) as Node)
+                }
+                className="localication-modal__json-editor"
+              />
+            </div>
+          </div>
+        </Modal>
+      )}
+    </>
+  );
+}

package/src/components/EditorHeader.tsx

@@ -27,6 +27,9 @@ export function EditorHeader({
   useLogRender('EditorHeader');
   const [isDevicesModalOpen, setIsDevicesModalOpen] = useState(false);
   const copiedNode = useRenderStore((s) => s.copiedNode);
+  const storeCurrent = useRenderStore((s) => s.current);
+  const storeEditorData = useRenderStore((s) => s.editorData);
+  const storeSetEditorData = useRenderStore((s) => s.setEditorData);
   const {
     device: selectedDevice,
     setDevice,
@@ -36,6 +39,9 @@ export function EditorHeader({
     setDevice: s.setDevice,
     setCurrent: s.setCurrent,
   }));
+  const effectiveCurrent = current ?? storeCurrent;
+  const effectiveEditorData = editorData ?? storeEditorData;
+  const effectiveSetEditorData = setEditorData ?? storeSetEditorData;
 
   function replaceNode(root: Node, target: Node, next: Node): Node {
     if (root === target) return next;
@@ -64,17 +70,18 @@ export function EditorHeader({
     return root;
   }
   const handleCopy = () => {
-    if (current) copyNode(current);
+    if (effectiveCurrent) copyNode(effectiveCurrent);
   };
   const handlePaste = () => {
-    if (!current || !editorData || !setEditorData) return;
+    if (!effectiveCurrent || !effectiveEditorData || !effectiveSetEditorData)
+      return;
     if (!copiedNode) return;
     const cloned = JSON.parse(JSON.stringify(copiedNode)) as Node;
-    const updated = replaceNode(editorData, current, cloned);
+    const updated = replaceNode(effectiveEditorData, effectiveCurrent, cloned);
     useRenderStore.setState({
       copiedNode: null,
     });
-    setEditorData(updated);
+    effectiveSetEditorData(updated);
     //TODO: current and editor must be sync!! and tested more
     // Important: selection is stored by reference. After replacing `current` in the tree,
     // we must point selection to the new (cloned) node reference to keep "current node"

package/src/components/LoadingComponent.tsx

@@ -0,0 +1,10 @@
+import Lottie from 'lottie-react';
+import loadingAnimation from '../assets/loading_animation.json';
+
+export function LoadingComponent() {
+  return (
+    <div className="rb-loading">
+      <Lottie animationData={loadingAnimation as any} loop autoplay />
+    </div>
+  );
+}

package/src/components/MobilePanelToggleButton.tsx

@@ -0,0 +1,39 @@
+export type MobilePanelToggleButtonProps = {
+  label: string;
+  isActive: boolean;
+  ariaLabel: string;
+  ariaControls: string;
+  onClick: () => void;
+};
+
+export function MobilePanelToggleButton({
+  label,
+  isActive,
+  ariaLabel,
+  ariaControls,
+  onClick,
+}: MobilePanelToggleButtonProps) {
+  return (
+    <button
+      type="button"
+      className={`mobile-panel-toggle__button${isActive ? ' mobile-panel-toggle__button--active' : ''}`}
+      aria-label={ariaLabel}
+      aria-expanded={isActive}
+      aria-controls={ariaControls}
+      onClick={onClick}
+    >
+      <span className="mobile-panel-toggle__icon" aria-hidden="true">
+        <svg viewBox="0 0 16 12" role="presentation" focusable="false">
+          <path
+            d="M1 1h14M1 6h14M1 11h14"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            fill="none"
+          />
+        </svg>
+      </span>
+      <span className="mobile-panel-toggle__label">{label}</span>
+    </button>
+  );
+}

package/src/hooks/useMinimumDelay.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Ensures a boolean becomes `true` only after a minimum delay.
+ * Resets to `false` whenever `deps` change.
+ *
+ * Common use-case: keep a loading indicator visible for at least N ms.
+ */
+export function useMinimumDelay(delayMs: number, deps: unknown[] = []) {
+  const [done, setDone] = useState<boolean>(false);
+
+  useEffect(() => {
+    setDone(false);
+    const timer = setTimeout(() => setDone(true), delayMs);
+    return () => clearTimeout(timer);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [delayMs, ...deps]);
+
+  return done;
+}

package/src/hooks/useMobileEditorPanels.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type MobileEditorPanel = 'builder' | 'attributes';
+
+export type UseMobileEditorPanelsOptions = {
+  breakpoint?: number;
+};
+
+export function useMobileEditorPanels(
+  options: UseMobileEditorPanelsOptions = {},
+) {
+  const { breakpoint = 1000 } = options;
+
+  const [mobilePanel, setMobilePanel] = useState<MobileEditorPanel | null>(
+    null,
+  );
+  const [isMobile, setIsMobile] = useState<boolean>(() => {
+    if (typeof window === 'undefined') return false;
+    return window.innerWidth <= breakpoint;
+  });
+
+  useEffect(() => {
+    function handleResize() {
+      setIsMobile(window.innerWidth <= breakpoint);
+    }
+
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, [breakpoint]);
+
+  // Reset active panel when switching between mobile/desktop layouts
+  useEffect(() => {
+    setMobilePanel(null);
+  }, [isMobile]);
+
+  const toggleMobilePanel = useCallback((panel: MobileEditorPanel) => {
+    setMobilePanel((prev) => (prev === panel ? null : panel));
+  }, []);
+
+  const closeMobilePanels = useCallback(() => {
+    setMobilePanel(null);
+  }, []);
+
+  const leftPanelIsOpen = !isMobile || mobilePanel === 'builder';
+  const attributesPanelIsOpen = !isMobile || mobilePanel === 'attributes';
+
+  return {
+    isMobile,
+    mobilePanel,
+    toggleMobilePanel,
+    closeMobilePanels,
+    leftPanelIsOpen,
+    attributesPanelIsOpen,
+  };
+}

package/src/hooks/useSyncProjectPageStore.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import type { AppConfig } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
+import { logger } from '../utils/logger';
+
+export type UseSyncProjectPageStoreArgs = {
+  appConfig: AppConfig;
+  name: string;
+  projectColors: ProjectColors | undefined;
+  setAppConfig: (appConfig: AppConfig) => void;
+  setProjectName: (name: string) => void;
+  setProjectColors: (colors: ProjectColors | undefined) => void;
+};
+
+/**
+ * Syncs ProjectPage props into the render store.
+ * Kept as a small hook to keep ProjectPage UI-focused.
+ */
+export function useSyncProjectPageStore({
+  appConfig,
+  name,
+  projectColors,
+  setAppConfig,
+  setProjectName,
+  setProjectColors,
+}: UseSyncProjectPageStoreArgs) {
+  useEffect(() => {
+    setAppConfig(appConfig);
+    logger.verbose('ProjectPage', 'appConfig applied', appConfig);
+  }, [appConfig, setAppConfig]);
+
+  useEffect(() => {
+    setProjectName(name);
+  }, [name, setProjectName]);
+
+  useEffect(() => {
+    setProjectColors(projectColors);
+    return () => setProjectColors(undefined);
+  }, [projectColors, setProjectColors]);
+}

package/src/modals/ScreenColorsModal.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import type { AppConfig } from '../types/PreviewConfig';
+import Modal from './Modal';
+
+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'];
+
+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,
+  },
+] as const;
+
+type ScreenColorsModalProps = {
+  appConfig: AppConfig;
+  onChange: (next: AppConfig) => void;
+  onClose: () => void;
+};
+
+export function ScreenColorsModal({
+  appConfig,
+  onChange,
+  onClose,
+}: ScreenColorsModalProps) {
+  const getScreenColorValue = (mode: ScreenMode, key: ScreenColorKey) =>
+    appConfig.screenStyle?.[mode]?.[key] ?? screenStyleDefaults[mode][key];
+
+  const handleScreenStyleChange = (
+    mode: ScreenMode,
+    key: ScreenColorKey,
+    value: string,
+  ) => {
+    onChange({
+      ...appConfig,
+      screenStyle: {
+        ...screenStyleDefaults,
+        ...appConfig.screenStyle,
+        [mode]: {
+          ...screenStyleDefaults[mode],
+          ...appConfig.screenStyle?.[mode],
+          [key]: value,
+        },
+      },
+    });
+  };
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="screen-colors-modal-title"
+      className="modal--large modal--scrollable"
+    >
+      <div className="modal__header">
+        <h3 id="screen-colors-modal-title" className="modal__title">
+          Screen Colors
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+      <div className="modal__body">
+        <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>
+    </Modal>
+  );
+}
+
+export default ScreenColorsModal;

package/src/modals/index.ts

@@ -4,6 +4,7 @@ export { DeviceSelectorModal } from './DeviceSelectorModal';
 export { ColorModal } from './ColorModal';
 export { IconPickerModal } from './IconPickerModal';
 export { LocalicationModal } from './LocalicationModal';
+export { ScreenColorsModal } from './ScreenColorsModal';
 export { MockableFeatureModal } from './MockableFeatureModal';
 export { ProductEditModal } from './ProductEditModal';
 export { ProductPresetsModal } from './ProductPresetsModal';