@developer_tribe/react-builder 1.2.27 → 1.2.28

package/src/modals/InspectModal.tsx

@@ -0,0 +1,331 @@
+import React, { useMemo, useState } from 'react';
+import Modal from './Modal';
+import { useRenderStore } from '../store';
+import { defaultLocalization, type Localication } from '../types/PreviewConfig';
+import { defaultProjectColors } from '../utils/projectColors';
+import { getLastParamsSnapshot } from '../components/ParamsProvider';
+import type { ProjectColors } from '../types/Project';
+
+type InspectTab = 'localizations' | 'params' | 'colors';
+
+type InspectModalProps = {
+  onClose: () => void;
+};
+
+export function InspectModal({ onClose }: InspectModalProps) {
+  const [activeTab, setActiveTab] = useState<InspectTab>('localizations');
+
+  const { appConfig, projectColors, theme, defaultLanguage } = useRenderStore(
+    (s) => ({
+      appConfig: s.appConfig,
+      projectColors: s.projectColors,
+      theme: s.theme,
+      defaultLanguage: s.defaultLanguage,
+    }),
+  );
+
+  const paramsSnapshot = useMemo(() => getLastParamsSnapshot(), []);
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="inspect-modal-title"
+      className="modal--large modal--scrollable"
+      contentClassName="inspect-modal__content"
+    >
+      <div className="modal__header inspect-modal__header">
+        <h3 id="inspect-modal-title" className="modal__title">
+          Inspect
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className="inspect-modal__tabs">
+        <button
+          type="button"
+          className={`inspect-modal__tab${activeTab === 'localizations' ? ' is-active' : ''}`}
+          onClick={() => setActiveTab('localizations')}
+        >
+          Localizations
+        </button>
+        <button
+          type="button"
+          className={`inspect-modal__tab${activeTab === 'params' ? ' is-active' : ''}`}
+          onClick={() => setActiveTab('params')}
+        >
+          Params
+        </button>
+        <button
+          type="button"
+          className={`inspect-modal__tab${activeTab === 'colors' ? ' is-active' : ''}`}
+          onClick={() => setActiveTab('colors')}
+        >
+          Colors
+        </button>
+      </div>
+
+      <div className="inspect-modal__body">
+        {activeTab === 'localizations' && (
+          <LocalizationsTab
+            localication={appConfig.localication ?? {}}
+            language={defaultLanguage}
+          />
+        )}
+        {activeTab === 'params' && (
+          <ParamsTab
+            localizationParams={paramsSnapshot.localizationParams}
+            nestedLocalizationParams={paramsSnapshot.nestedLocalizationParams}
+          />
+        )}
+        {activeTab === 'colors' && (
+          <ColorsTab projectColors={projectColors} theme={theme} />
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab 1 – Localizations                                             */
+/* ------------------------------------------------------------------ */
+
+function LocalizationsTab({
+  localication,
+  language,
+}: {
+  localication: Localication;
+  language: string;
+}) {
+  const langKeys = localication[language] ?? {};
+  const defaultLangKeys =
+    defaultLocalization[language] ?? defaultLocalization['en'] ?? {};
+
+  const entries = Object.entries(langKeys);
+
+  if (entries.length === 0) {
+    return (
+      <p className="inspect-modal__empty">
+        No localization keys found for "{language}".
+      </p>
+    );
+  }
+
+  return (
+    <div className="inspect-modal__table-wrap">
+      <table className="inspect-modal__table">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Value</th>
+            <th>Source</th>
+          </tr>
+        </thead>
+        <tbody>
+          {entries.map(([key, value]) => {
+            const isDefault = defaultLangKeys[key] === value;
+            return (
+              <tr key={key}>
+                <td className="inspect-modal__cell-key">{key}</td>
+                <td className="inspect-modal__cell-value">{value}</td>
+                <td>
+                  <span
+                    className={`inspect-modal__badge${isDefault ? ' inspect-modal__badge--default' : ' inspect-modal__badge--custom'}`}
+                  >
+                    {isDefault ? 'default' : 'custom'}
+                  </span>
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab 2 – Params                                                    */
+/* ------------------------------------------------------------------ */
+
+function ParamsTab({
+  localizationParams,
+  nestedLocalizationParams,
+}: {
+  localizationParams: Record<string, unknown>;
+  nestedLocalizationParams: Record<string, unknown>;
+}) {
+  const flatEntries = Object.entries(localizationParams);
+  const nestedEntries = Object.entries(nestedLocalizationParams);
+  const hasAny = flatEntries.length > 0 || nestedEntries.length > 0;
+
+  if (!hasAny) {
+    return (
+      <p className="inspect-modal__empty">
+        No params available. Params are populated inside a PaywallProvider.
+      </p>
+    );
+  }
+
+  return (
+    <div className="inspect-modal__table-wrap">
+      <table className="inspect-modal__table">
+        <thead>
+          <tr>
+            <th>Param</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          {flatEntries.map(([key, value]) => (
+            <tr key={key}>
+              <td className="inspect-modal__cell-key">{key}</td>
+              <td className="inspect-modal__cell-value">
+                {formatValue(value)}
+              </td>
+            </tr>
+          ))}
+          {nestedEntries.length > 0 && (
+            <>
+              <tr className="inspect-modal__separator-row">
+                <td colSpan={2}>Nested (per-product)</td>
+              </tr>
+              {nestedEntries.map(([key, value]) => (
+                <tr key={`nested-${key}`}>
+                  <td className="inspect-modal__cell-key inspect-modal__cell-key--nested">
+                    - {key}
+                  </td>
+                  <td className="inspect-modal__cell-value">
+                    {formatValue(value)}
+                  </td>
+                </tr>
+              ))}
+            </>
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Tab 3 – Colors                                                    */
+/* ------------------------------------------------------------------ */
+
+function ColorsTab({
+  projectColors,
+  theme,
+}: {
+  projectColors?: ProjectColors;
+  theme: string;
+}) {
+  const staticColors = projectColors?.STATIC_COLORS ?? {};
+  const themeColors = projectColors?.THEME_COLORS?.[theme] ?? {};
+
+  const defaultStatic = defaultProjectColors.STATIC_COLORS ?? {};
+  const defaultThemeMap = defaultProjectColors.THEME_COLORS?.[theme] ?? {};
+
+  const staticEntries = Object.entries(staticColors);
+  const themeEntries = Object.entries(themeColors);
+
+  if (staticEntries.length === 0 && themeEntries.length === 0) {
+    return <p className="inspect-modal__empty">No project colors defined.</p>;
+  }
+
+  return (
+    <div className="inspect-modal__table-wrap">
+      {staticEntries.length > 0 && (
+        <>
+          <h4 className="inspect-modal__section-title">Static Colors</h4>
+          <table className="inspect-modal__table">
+            <thead>
+              <tr>
+                <th>Token</th>
+                <th>Value</th>
+                <th>Source</th>
+              </tr>
+            </thead>
+            <tbody>
+              {staticEntries.map(([token, hex]) => {
+                const isDefault = defaultStatic[token] === hex;
+                return (
+                  <tr key={token}>
+                    <td className="inspect-modal__cell-key">{token}</td>
+                    <td className="inspect-modal__cell-value">
+                      <span
+                        className="inspect-modal__color-swatch"
+                        style={{ backgroundColor: hex }}
+                      />
+                      {hex}
+                    </td>
+                    <td>
+                      <span
+                        className={`inspect-modal__badge${isDefault ? ' inspect-modal__badge--default' : ' inspect-modal__badge--custom'}`}
+                      >
+                        {isDefault ? 'default' : 'custom'}
+                      </span>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </>
+      )}
+
+      {themeEntries.length > 0 && (
+        <>
+          <h4 className="inspect-modal__section-title">
+            Theme Colors ({theme})
+          </h4>
+          <table className="inspect-modal__table">
+            <thead>
+              <tr>
+                <th>Token</th>
+                <th>Value</th>
+                <th>Source</th>
+              </tr>
+            </thead>
+            <tbody>
+              {themeEntries.map(([token, hex]) => {
+                const isDefault = defaultThemeMap[token] === hex;
+                return (
+                  <tr key={token}>
+                    <td className="inspect-modal__cell-key">{token}</td>
+                    <td className="inspect-modal__cell-value">
+                      <span
+                        className="inspect-modal__color-swatch"
+                        style={{ backgroundColor: hex }}
+                      />
+                      {hex}
+                    </td>
+                    <td>
+                      <span
+                        className={`inspect-modal__badge${isDefault ? ' inspect-modal__badge--default' : ' inspect-modal__badge--custom'}`}
+                      >
+                        {isDefault ? 'default' : 'custom'}
+                      </span>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </>
+      )}
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  Helpers                                                           */
+/* ------------------------------------------------------------------ */
+
+function formatValue(v: unknown): string {
+  if (v === undefined) return '—';
+  if (v === null) return 'null';
+  if (typeof v === 'string') return v;
+  if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+  return JSON.stringify(v);
+}

package/src/modals/ProductPresetsModal.tsx

@@ -1,10 +1,10 @@
 import React, { useMemo } from 'react';
 import Modal from './Modal';
 import type { Product } from '../paywall/types/paywall-types';
-import presetsJson from '../assets/products.json';
+import presetsJson from '../product-base/mockProducts.json';
 
 type PresetMap = Record<string, Product[]>;
-const DEFAULT_PRESET_KEY = 'Embeded Paywall';
+const DEFAULT_PRESET_KEY = 'preset-1';
 
 type ProductPresetsModalProps = {
   current: Product[];
@@ -13,15 +13,8 @@ type ProductPresetsModalProps = {
   onClose: () => void;
 };
 
-function normalizeProduct(p: Product): Product {
-  return {
-    productId: p?.productId ?? '',
-    title: p?.title ?? '',
-    description: p?.description ?? '',
-    localizedPrice: p?.localizedPrice ?? '',
-    price: p?.price ?? '',
-    currency: p?.currency ?? '',
-  };
+function ensureProductId(p: Product): Product {
+  return { ...p, productId: p?.productId ?? '' };
 }
 
 function getPresetMap(): PresetMap {
@@ -32,8 +25,8 @@ function getPresetMap(): PresetMap {
     if (!Array.isArray(list)) return;
     safe[key] = list
       .filter(Boolean)
-      .map((p) => normalizeProduct(p as Product))
-      .filter((p) => typeof p.productId === 'string');
+      .map((p) => ensureProductId(p as Product))
+      .filter((p) => typeof p.productId === 'string' && p.productId.length > 0);
   });
   return safe;
 }

package/src/modals/index.ts

@@ -4,9 +4,9 @@ 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';
 export { BenefitEditModal } from './BenefitEditModal';
 export { BenefitPresetsModal } from './BenefitPresetsModal';
+export { InspectModal } from './InspectModal';

package/src/pages/DebugJsonPage.tsx

@@ -46,16 +46,16 @@ export function DebugJsonPage({
   const setCurrent = useRenderStore((s) => s.setCurrent);
   const listMaxNested = useRenderStore((s) => s.listMaxNested);
   const setListMaxNested = useRenderStore((s) => s.setListMaxNested);
+  const theme = useRenderStore((s) => s.theme);
+  const setTheme = useRenderStore((s) => s.setTheme);
+  const isRtl = useRenderStore((s) => s.isRtl);
+  const setIsRtl = useRenderStore((s) => s.setIsRtl);
   const [listMaxNestedInput, setListMaxNestedInput] = useState(
     String(listMaxNested),
   );
   const canTogglePreviewMode = typeof setPreviewMode === 'function';
-  const canToggleTheme =
-    typeof setAppConfig === 'function' && typeof appConfig?.theme === 'string';
-  const canToggleRtl =
-    typeof setAppConfig === 'function' &&
-    appConfig != null &&
-    'isRtl' in appConfig;
+  const canToggleTheme = true;
+  const canToggleRtl = true;
 
   const isRecord = (v: unknown): v is Record<string, unknown> =>
     typeof v === 'object' && v !== null && !Array.isArray(v);
@@ -210,26 +210,13 @@ export function DebugJsonPage({
             {canToggleTheme ? (
               <Checkbox
                 label="Dark Mode"
-                checked={(appConfig?.theme ?? 'light') === 'dark'}
-                onChange={(checked) =>
-                  setAppConfig!({
-                    ...(appConfig as AppConfig),
-                    theme: checked ? 'dark' : 'light',
-                  })
-                }
+                checked={theme === 'dark'}
+                onChange={(checked) => setTheme(checked ? 'dark' : 'light')}
               />
             ) : null}
 
             {canToggleRtl ? (
-              <Checkbox
-                label="Is RTL"
-                checked={Boolean(
-                  (appConfig as AppConfig & { isRtl?: boolean })?.isRtl,
-                )}
-                onChange={(checked) =>
-                  setAppConfig!({ ...(appConfig as AppConfig), isRtl: checked })
-                }
-              />
+              <Checkbox label="Is RTL" checked={isRtl} onChange={setIsRtl} />
             ) : null}
           </div>
         ) : null}

package/src/pages/ProjectDebug.tsx

@@ -316,7 +316,7 @@ export function ProjectDebug({
           <RenderPage
             data={previewData}
             name={name}
-            params={{ products, benefits }}
+            params={{ mockProducts: products, mockBenefits: benefits }}
           />
         </RenderErrorBoundary>
       </section>

package/src/pages/ProjectPage.tsx

@@ -7,7 +7,13 @@ import { EditorHeader } from '../components/EditorHeader';
 import { AttributesEditorPanel } from '../components/AttributesEditorPanel';
 import { BuilderPanel } from './tabs/BuilderPanel';
 import { BottomBar } from '../components/BottomBar';
-import { AppConfig, defaultAppConfig } from '../types/PreviewConfig';
+import {
+  type AppConfig,
+  defaultAppConfig,
+  defaultLocalization,
+  mergeLocalization,
+  type Localication,
+} from '../types/PreviewConfig';
 import { useRenderStore } from '../store';
 import { logger } from '../utils/logger';
 import { useLogRender } from '../utils/useLogRender';
@@ -41,7 +47,7 @@ export type ProjectPageProps = {
   project: Project;
   // TODO: Tüm onSaveProject call-site'ları toProjectMeta kullanacak şekilde migrate et
   onSaveProject: (project: ProjectMeta) => void;
-  appConfig?: AppConfig;
+  localization?: Localication;
   logLevel?: LogLevel;
   projectColors?: ProjectColors;
   onSaveProjectColors?: (colors: ProjectColors) => void;
@@ -61,7 +67,7 @@ const MOBILE_BREAKPOINT = 1000;
 
 export function ProjectPage({
   project,
-  appConfig,
+  localization,
   onSaveProject,
   logLevel,
   projectColors,
@@ -85,6 +91,8 @@ export function ProjectPage({
     setProjectName,
     setAppConfig,
     storeAppConfig,
+    storeTheme,
+    storeDefaultLanguage,
     products,
     benefits,
     previewMode,
@@ -95,11 +103,18 @@ export function ProjectPage({
     setProjectName: s.setProjectName,
     setAppConfig: s.setAppConfig,
     storeAppConfig: s.appConfig,
+    storeTheme: s.theme,
+    storeDefaultLanguage: s.defaultLanguage,
     products: s.products,
     benefits: s.benefits,
     previewMode: s.previewMode,
   }));
-  const resolvedAppConfig = appConfig ?? storeAppConfig ?? defaultAppConfig;
+  const resolvedAppConfig: AppConfig = localization
+    ? {
+        ...defaultAppConfig,
+        localication: mergeLocalization(defaultLocalization, localization),
+      }
+    : (storeAppConfig ?? defaultAppConfig);
   const [overrideProject, setOverrideProject] = useState<Project | null>(null);
   const activeProject = overrideProject ?? project;
   const resolvedName = name ?? activeProject.name;
@@ -169,14 +184,15 @@ export function ProjectPage({
   useEffect(() => {
     logger.info('ProjectPage', 'mount', { projectName: project.name });
     setOverrideProject(null);
-    if (appConfig) {
-      setAppConfig(appConfig);
-      logger.verbose('ProjectPage', 'appConfig applied', appConfig);
+    if (localization) {
+      const merged = mergeLocalization(defaultLocalization, localization);
+      setAppConfig({ ...defaultAppConfig, localication: merged });
+      logger.verbose('ProjectPage', 'localization applied', merged);
     }
     return () => {
       logger.info('ProjectPage', 'unmount');
     };
-  }, [appConfig, project.name, setAppConfig]);
+  }, [localization, project.name, setAppConfig]);
 
   useEffect(() => {
     setProjectName(resolvedName);
@@ -643,12 +659,14 @@ export function ProjectPage({
                   data={editorData}
                   name={resolvedName}
                   params={{
-                    products,
-                    benefits:
+                    mockProducts: products,
+                    mockBenefits:
                       benefits && typeof benefits === 'object'
                         ? (benefits as PaywallBenefits)
                         : {},
-                    // Theme/colors/fonts must be passed via BuilderProvider params so build-components never touch useRenderStore.
+                    // Colors/fonts/theme must be passed via BuilderProvider params so build-components never touch useRenderStore.
+                    theme: storeTheme,
+                    defaultLanguage: storeDefaultLanguage,
                     appConfig: resolvedAppConfig,
                     projectColors: resolvedProjectColors,
                     fonts: typography.fonts,