@developer_tribe/react-builder 1.2.32 → 1.2.34

package/src/modals/MockableFeatureModal.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import Modal from './Modal';
 import { useRenderStore } from '../store';
 import { ProductEditModal } from './ProductEditModal';
@@ -9,6 +9,13 @@ import type {
   PaywallBenefits,
   PaywallBenefitValue,
 } from '../paywall/types/benefits';
+import type { Localication } from '../types/PreviewConfig';
+import { defaultLocalization, mergeLocalization } from '../types/PreviewConfig';
+import type { ProjectColors } from '../types/Project';
+import {
+  defaultProjectColors,
+  mergeProjectColors,
+} from '../utils/projectColors';
 
 type MockableFeatureModalProps = {
   featureKey: string;
@@ -32,6 +39,10 @@ export function MockableFeatureModal({
     upsertBenefit,
     removeBenefit,
     renameBenefit,
+    setLocalization,
+    localization,
+    setProjectColors,
+    projectColors,
   } = useRenderStore((s) => ({
     products: s.products,
     addProduct: s.addProduct,
@@ -45,6 +56,10 @@ export function MockableFeatureModal({
     upsertBenefit: s.upsertBenefit,
     removeBenefit: s.removeBenefit,
     renameBenefit: s.renameBenefit,
+    setLocalization: s.setLocalization,
+    localization: s.localization,
+    setProjectColors: s.setProjectColors,
+    projectColors: s.projectColors,
   }));
 
   const [editingIndex, setEditingIndex] = useState<number | null>(null);
@@ -54,6 +69,106 @@ export function MockableFeatureModal({
   );
   const [showBenefitPresets, setShowBenefitPresets] = useState(false);
 
+  // ─── Import refs ─────────────────────────────────────────────────────────
+  const csvInputRef = useRef<HTMLInputElement>(null);
+  const colorsInputRef = useRef<HTMLInputElement>(null);
+  const genericInputRef = useRef<HTMLInputElement>(null);
+
+  /** Parse CSV with `en` and `tr` columns into a Localication map. */
+  const handleLocalizationCsvImport = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const text = event.target?.result as string;
+        const lines = text.split(/\r?\n/).filter(Boolean);
+        if (lines.length < 2) {
+          alert('CSV must have a header row and at least one data row.');
+          return;
+        }
+        const headers = lines[0]!.split(',').map((h) => h.trim().toLowerCase());
+        const keyIdx = headers.indexOf('key');
+        const enIdx = headers.indexOf('en');
+        const trIdx = headers.indexOf('tr');
+        if (keyIdx === -1 || (enIdx === -1 && trIdx === -1)) {
+          alert(
+            'CSV must have a "key" column and at least one of "en" or "tr" columns.',
+          );
+          return;
+        }
+        const localization: Localication = {};
+        for (let i = 1; i < lines.length; i++) {
+          const cols = lines[i]!.split(',').map((c) => c.trim());
+          const key = cols[keyIdx]?.trim();
+          if (!key) continue;
+          const entry: Record<string, string> = {};
+          if (enIdx !== -1 && cols[enIdx] !== undefined)
+            entry['en'] = cols[enIdx]!;
+          if (trIdx !== -1 && cols[trIdx] !== undefined)
+            entry['tr'] = cols[trIdx]!;
+          localization[key] = entry;
+        }
+        setLocalization(localization);
+      } catch (err) {
+        alert('Failed to parse CSV: ' + String(err));
+      } finally {
+        e.target.value = '';
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  /** Parse JSON file and call setProjectColors. */
+  const handleColorsJsonImport = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const parsed = JSON.parse(
+          event.target?.result as string,
+        ) as ProjectColors;
+        setProjectColors(parsed);
+      } catch (err) {
+        alert('Failed to parse JSON: ' + String(err));
+      } finally {
+        e.target.value = '';
+      }
+    };
+    reader.readAsText(file);
+  };
+
+  /** Generic JSON import — sets products or benefits based on featureKey. */
+  const handleGenericJsonImport = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (event) => {
+      try {
+        const parsed = JSON.parse(event.target?.result as string);
+        if (featureKey === 'products' && Array.isArray(parsed)) {
+          setProducts(parsed);
+        } else if (
+          featureKey === 'benefits' &&
+          typeof parsed === 'object' &&
+          !Array.isArray(parsed)
+        ) {
+          setBenefits(parsed as PaywallBenefits);
+        } else {
+          alert('Imported JSON does not match the expected format.');
+        }
+      } catch (err) {
+        alert('Failed to parse JSON: ' + String(err));
+      } finally {
+        e.target.value = '';
+      }
+    };
+    reader.readAsText(file);
+  };
+
   const benefitEntries = Object.entries(
     benefits && typeof benefits === 'object' && !Array.isArray(benefits)
       ? (benefits as PaywallBenefits)
@@ -89,7 +204,23 @@ export function MockableFeatureModal({
           </button>
         </div>
         <div className="mockable-feature-modal__body">
-          {featureKey === 'products' ? (
+          {featureKey === 'localization' ? (
+            <LocalizationPanel
+              localization={localization}
+              defaultLoc={defaultLocalization}
+              csvInputRef={csvInputRef}
+              onImportClick={() => csvInputRef.current?.click()}
+              onChange={handleLocalizationCsvImport}
+            />
+          ) : featureKey === 'colors' ? (
+            <ColorsPanel
+              projectColors={projectColors}
+              defaultColors={defaultProjectColors}
+              colorsInputRef={colorsInputRef}
+              onImportClick={() => colorsInputRef.current?.click()}
+              onChange={handleColorsJsonImport}
+            />
+          ) : featureKey === 'products' ? (
             <>
               <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
                 <button
@@ -222,9 +353,27 @@ export function MockableFeatureModal({
               </div>
             </>
           ) : (
-            <p style={{ margin: 0, opacity: 0.7 }}>
-              No mock UI yet for “{featureKey}”.
-            </p>
+            <>
+              <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                <button
+                  type="button"
+                  className="editor-button"
+                  onClick={() => genericInputRef.current?.click()}
+                >
+                  Import JSON
+                </button>
+                <input
+                  ref={genericInputRef}
+                  type="file"
+                  accept=".json,application/json"
+                  style={{ display: 'none' }}
+                  onChange={handleGenericJsonImport}
+                />
+              </div>
+              <p style={{ margin: '8px 0 0', opacity: 0.7, fontSize: 12 }}>
+                No mock UI yet for "{featureKey}" — import via JSON.
+              </p>
+            </>
           )}
         </div>
       </Modal>
@@ -290,3 +439,401 @@ export function MockableFeatureModal({
 }
 
 export default MockableFeatureModal;
+
+// ─── Source badge ─────────────────────────────────────────────────────────────
+
+type Source = 'default' | 'custom' | 'merged';
+
+const SOURCE_STYLE: Record<Source, React.CSSProperties> = {
+  default: {
+    fontSize: 10,
+    padding: '1px 5px',
+    borderRadius: 3,
+    background: '#3a3d4a',
+    color: '#9ca3af',
+    fontWeight: 500,
+    whiteSpace: 'nowrap',
+  },
+  custom: {
+    fontSize: 10,
+    padding: '1px 5px',
+    borderRadius: 3,
+    background: '#14532d',
+    color: '#86efac',
+    fontWeight: 500,
+    whiteSpace: 'nowrap',
+  },
+  merged: {
+    fontSize: 10,
+    padding: '1px 5px',
+    borderRadius: 3,
+    background: '#1e3a5f',
+    color: '#93c5fd',
+    fontWeight: 500,
+    whiteSpace: 'nowrap',
+  },
+};
+
+function SourceBadge({ source }: { source: Source }) {
+  return <span style={SOURCE_STYLE[source]}>{source}</span>;
+}
+
+// ─── LocalizationPanel ───────────────────────────────────────────────────────
+
+type LocalizationPanelProps = {
+  localization: import('../types/PreviewConfig').Localication;
+  defaultLoc: import('../types/PreviewConfig').Localication;
+  csvInputRef: React.RefObject<HTMLInputElement>;
+  onImportClick: () => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+function LocalizationPanel({
+  localization,
+  defaultLoc,
+  csvInputRef,
+  onImportClick,
+  onChange,
+}: LocalizationPanelProps) {
+  const merged = mergeLocalization(defaultLoc, localization);
+  // Collect all langs and all keys
+  const langs = Array.from(
+    new Set([...Object.keys(defaultLoc), ...Object.keys(localization)]),
+  ).sort();
+  const allKeys = Array.from(
+    new Set(
+      langs.flatMap((l) => [
+        ...Object.keys(defaultLoc[l] ?? {}),
+        ...Object.keys(localization[l] ?? {}),
+      ]),
+    ),
+  ).sort();
+
+  const hasCustom =
+    localization &&
+    Object.keys(localization).some(
+      (l) => Object.keys(localization[l] ?? {}).length > 0,
+    );
+
+  return (
+    <>
+      {/* toolbar */}
+      <div
+        style={{
+          display: 'flex',
+          gap: 8,
+          alignItems: 'center',
+          flexWrap: 'wrap',
+        }}
+      >
+        <button type="button" className="editor-button" onClick={onImportClick}>
+          Import CSV
+        </button>
+        <input
+          ref={csvInputRef}
+          type="file"
+          accept=".csv,text/csv"
+          style={{ display: 'none' }}
+          onChange={onChange}
+        />
+        <span style={{ fontSize: 11, opacity: 0.6 }}>key, en, tr columns</span>
+        <span style={{ marginLeft: 'auto', fontSize: 11, opacity: 0.5 }}>
+          {hasCustom ? 'custom overrides active' : 'using defaults'}
+        </span>
+      </div>
+
+      {/* legend */}
+      <div
+        style={{ display: 'flex', gap: 8, margin: '8px 0 4px', fontSize: 11 }}
+      >
+        <SourceBadge source="default" /> default only
+        <SourceBadge source="custom" /> custom override
+        <SourceBadge source="merged" /> both (custom wins)
+      </div>
+
+      {/* table */}
+      <div style={{ overflowX: 'auto', marginTop: 4 }}>
+        <table
+          style={{
+            borderCollapse: 'collapse',
+            fontSize: 11,
+            width: '100%',
+            tableLayout: 'fixed',
+          }}
+        >
+          <thead>
+            <tr>
+              <th
+                style={{
+                  textAlign: 'left',
+                  padding: '4px 6px',
+                  borderBottom: '1px solid #333',
+                  width: 200,
+                  fontWeight: 600,
+                }}
+              >
+                key
+              </th>
+              {langs.map((lang) => (
+                <th
+                  key={lang}
+                  style={{
+                    textAlign: 'left',
+                    padding: '4px 6px',
+                    borderBottom: '1px solid #333',
+                    fontWeight: 600,
+                  }}
+                >
+                  {lang}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {allKeys.map((key) => (
+              <tr key={key} style={{ borderBottom: '1px solid #222' }}>
+                <td
+                  style={{
+                    padding: '3px 6px',
+                    fontFamily: 'monospace',
+                    wordBreak: 'break-all',
+                    opacity: 0.8,
+                  }}
+                >
+                  {key}
+                </td>
+                {langs.map((lang) => {
+                  const inDefault = (defaultLoc[lang] ?? {})[key] !== undefined;
+                  const inCustom =
+                    (localization[lang] ?? {})[key] !== undefined;
+                  const val = (merged[lang] ?? {})[key] ?? '';
+                  let src: Source = 'default';
+                  if (inDefault && inCustom) src = 'merged';
+                  else if (inCustom) src = 'custom';
+                  return (
+                    <td
+                      key={lang}
+                      style={{ padding: '3px 6px', verticalAlign: 'top' }}
+                    >
+                      <div
+                        style={{
+                          display: 'flex',
+                          gap: 4,
+                          alignItems: 'flex-start',
+                        }}
+                      >
+                        <SourceBadge source={src} />
+                        <span
+                          style={{ wordBreak: 'break-word', opacity: 0.85 }}
+                        >
+                          {val}
+                        </span>
+                      </div>
+                    </td>
+                  );
+                })}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+}
+
+// ─── ColorsPanel ─────────────────────────────────────────────────────────────
+
+type ColorsPanelProps = {
+  projectColors?: import('../types/Project').ProjectColors;
+  defaultColors: import('../types/Project').ProjectColors;
+  colorsInputRef: React.RefObject<HTMLInputElement>;
+  onImportClick: () => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+function ColorsPanel({
+  projectColors,
+  defaultColors,
+  colorsInputRef,
+  onImportClick,
+  onChange,
+}: ColorsPanelProps) {
+  const merged = projectColors
+    ? mergeProjectColors(defaultColors, projectColors)
+    : defaultColors;
+
+  const hasCustom = !!projectColors;
+
+  /** Build rows for a flat token map comparing default vs custom. */
+  function buildRows(
+    defaultMap: Record<string, string> = {},
+    customMap: Record<string, string> = {},
+    mergedMap: Record<string, string> = {},
+  ) {
+    const keys = Array.from(
+      new Set([...Object.keys(defaultMap), ...Object.keys(customMap)]),
+    ).sort();
+    return keys.map((k) => {
+      const inDefault = k in defaultMap;
+      const inCustom = k in (customMap ?? {});
+      let src: Source = 'default';
+      if (inDefault && inCustom) src = 'merged';
+      else if (inCustom) src = 'custom';
+      return { key: k, value: mergedMap[k] ?? '', src };
+    });
+  }
+
+  const staticDefault = defaultColors.STATIC_COLORS ?? {};
+  const staticCustom = projectColors?.STATIC_COLORS ?? {};
+  const staticMerged = merged.STATIC_COLORS ?? {};
+  const staticRows = buildRows(staticDefault, staticCustom, staticMerged);
+
+  const themeNames = Array.from(
+    new Set([
+      ...Object.keys(defaultColors.THEME_COLORS ?? {}),
+      ...Object.keys(projectColors?.THEME_COLORS ?? {}),
+    ]),
+  ).sort();
+
+  function ColorRow({
+    k,
+    value,
+    src,
+  }: {
+    k: string;
+    value: string;
+    src: Source;
+  }) {
+    return (
+      <tr style={{ borderBottom: '1px solid #222' }}>
+        <td
+          style={{
+            padding: '3px 8px',
+            fontFamily: 'monospace',
+            fontSize: 11,
+            opacity: 0.8,
+          }}
+        >
+          {k}
+        </td>
+        <td style={{ padding: '3px 8px' }}>
+          <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+            <span
+              style={{
+                display: 'inline-block',
+                width: 14,
+                height: 14,
+                borderRadius: 3,
+                background: value,
+                border: '1px solid #555',
+                flexShrink: 0,
+              }}
+            />
+            <span style={{ fontFamily: 'monospace', fontSize: 11 }}>
+              {value}
+            </span>
+          </div>
+        </td>
+        <td style={{ padding: '3px 8px' }}>
+          <SourceBadge source={src} />
+        </td>
+      </tr>
+    );
+  }
+
+  function SectionTable({
+    rows,
+  }: {
+    rows: Array<{ key: string; value: string; src: Source }>;
+  }) {
+    return (
+      <table
+        style={{ borderCollapse: 'collapse', width: '100%', fontSize: 11 }}
+      >
+        <thead>
+          <tr>
+            {['token', 'value', 'source'].map((h) => (
+              <th
+                key={h}
+                style={{
+                  textAlign: 'left',
+                  padding: '3px 8px',
+                  borderBottom: '1px solid #333',
+                  fontWeight: 600,
+                }}
+              >
+                {h}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((r) => (
+            <ColorRow key={r.key} k={r.key} value={r.value} src={r.src} />
+          ))}
+        </tbody>
+      </table>
+    );
+  }
+
+  return (
+    <>
+      {/* toolbar */}
+      <div
+        style={{
+          display: 'flex',
+          gap: 8,
+          alignItems: 'center',
+          flexWrap: 'wrap',
+        }}
+      >
+        <button type="button" className="editor-button" onClick={onImportClick}>
+          Import JSON
+        </button>
+        <input
+          ref={colorsInputRef}
+          type="file"
+          accept=".json,application/json"
+          style={{ display: 'none' }}
+          onChange={onChange}
+        />
+        <span style={{ marginLeft: 'auto', fontSize: 11, opacity: 0.5 }}>
+          {hasCustom ? 'custom overrides active' : 'using defaults'}
+        </span>
+      </div>
+
+      {/* legend */}
+      <div
+        style={{ display: 'flex', gap: 8, margin: '8px 0 4px', fontSize: 11 }}
+      >
+        <SourceBadge source="default" /> default only
+        <SourceBadge source="custom" /> custom override
+        <SourceBadge source="merged" /> both (custom wins)
+      </div>
+
+      {/* STATIC */}
+      <div style={{ fontWeight: 600, fontSize: 12, margin: '10px 0 4px' }}>
+        STATIC_COLORS
+      </div>
+      <SectionTable rows={staticRows} />
+
+      {/* THEME */}
+      {themeNames.map((theme) => {
+        const themeDefault = defaultColors.THEME_COLORS?.[theme] ?? {};
+        const themeCustom = projectColors?.THEME_COLORS?.[theme] ?? {};
+        const themeMerged = merged.THEME_COLORS?.[theme] ?? {};
+        const rows = buildRows(themeDefault, themeCustom, themeMerged);
+        return (
+          <div key={theme}>
+            <div
+              style={{ fontWeight: 600, fontSize: 12, margin: '10px 0 4px' }}
+            >
+              THEME_COLORS / {theme}
+            </div>
+            <SectionTable rows={rows} />
+          </div>
+        );
+      })}
+    </>
+  );
+}

package/src/modals/Modal.tsx

@@ -43,7 +43,13 @@ export function Modal({
     >
       <div
         className="modal__overlay"
-        onClick={closeOnOverlayClick ? onClose : undefined}
+        onClick={
+          closeOnOverlayClick
+            ? (e) => {
+                if (e.target === e.currentTarget) onClose();
+              }
+            : undefined
+        }
       />
       <div
         className={`modal__content${contentClassName ? ` ${contentClassName}` : ''}`}