@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/modals/ProductPresetsModal.tsx

@@ -0,0 +1,151 @@
+import React, { useMemo } from 'react';
+import Modal from './Modal';
+import type { Product } from '../paywall/types/paywall-types';
+import presetsJson from '../assets/products.json';
+
+type PresetMap = Record<string, Product[]>;
+const DEFAULT_PRESET_KEY = 'Embeded Paywall';
+
+type ProductPresetsModalProps = {
+  current: Product[];
+  onReplace: (next: Product[]) => void;
+  onAppend: (next: Product[]) => void;
+  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 getPresetMap(): PresetMap {
+  const raw = presetsJson as unknown as PresetMap;
+  const safe: PresetMap = {};
+  Object.entries(raw ?? {}).forEach(([key, list]) => {
+    if (!key || typeof key !== 'string') return;
+    if (!Array.isArray(list)) return;
+    safe[key] = list
+      .filter(Boolean)
+      .map((p) => normalizeProduct(p as Product))
+      .filter((p) => typeof p.productId === 'string');
+  });
+  return safe;
+}
+
+export function ProductPresetsModal({
+  current,
+  onReplace,
+  onAppend,
+  onClose,
+}: ProductPresetsModalProps) {
+  const presetMap = useMemo(() => getPresetMap(), []);
+  const presetEntries = useMemo(
+    () =>
+      Object.entries(presetMap).sort((a, b) => {
+        const aKey = a[0];
+        const bKey = b[0];
+        if (aKey === DEFAULT_PRESET_KEY && bKey !== DEFAULT_PRESET_KEY)
+          return -1;
+        if (bKey === DEFAULT_PRESET_KEY && aKey !== DEFAULT_PRESET_KEY)
+          return 1;
+        return aKey.localeCompare(bKey);
+      }),
+    [presetMap],
+  );
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="product-presets-modal-title"
+      contentClassName="product-presets-modal"
+    >
+      <div className="modal__header">
+        <h3 id="product-presets-modal-title" className="modal__title">
+          Product presets
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className="product-presets-modal__body">
+        <section className="product-presets-modal__section">
+          <p className="product-presets-modal__section-title">
+            Current ({Array.isArray(current) ? current.length : 0})
+          </p>
+          <p className="product-presets-modal__muted">
+            Pick a preset below to replace or append to the current list.
+          </p>
+        </section>
+
+        <section className="product-presets-modal__section">
+          <p className="product-presets-modal__section-title">Presets</p>
+
+          {presetEntries.length ? (
+            <div className="product-presets-modal__grid">
+              {presetEntries.map(([key, list]) => (
+                <div key={key} className="product-presets-modal__card">
+                  <div className="product-presets-modal__card-header">
+                    <p className="product-presets-modal__card-title">{key}</p>
+                    <p className="product-presets-modal__card-count">
+                      {list.length} products
+                    </p>
+                  </div>
+
+                  <ul className="product-presets-modal__card-list">
+                    {list.slice(0, 3).map((p) => (
+                      <li
+                        key={p.productId}
+                        className="product-presets-modal__card-item"
+                      >
+                        {p.productId}
+                      </li>
+                    ))}
+                    {list.length > 3 ? (
+                      <li className="product-presets-modal__card-item product-presets-modal__muted">
+                        +{list.length - 3} more…
+                      </li>
+                    ) : null}
+                  </ul>
+
+                  <div className="product-presets-modal__actions">
+                    <button
+                      type="button"
+                      className="editor-button"
+                      onClick={() => {
+                        onReplace(list);
+                        onClose();
+                      }}
+                    >
+                      Replace
+                    </button>
+                    <button
+                      type="button"
+                      className="editor-button"
+                      onClick={() => {
+                        onAppend(list);
+                        onClose();
+                      }}
+                    >
+                      Append
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <p className="product-presets-modal__muted">No presets found.</p>
+          )}
+        </section>
+      </div>
+    </Modal>
+  );
+}
+
+export default ProductPresetsModal;

package/src/modals/ScreenColorsModal.tsx

@@ -0,0 +1,121 @@
+import React, { useMemo } from 'react';
+import type { AppConfig } from '../types/PreviewConfig';
+import { defaultAppConfig } from '../types/PreviewConfig';
+import Modal from './Modal';
+
+type ScreenMode = 'light' | 'dark';
+type ScreenColorKey = keyof AppConfig['screenStyle']['light'];
+
+type ScreenColorsModalProps = {
+  appConfig: AppConfig;
+  onChange: (next: AppConfig) => void;
+  onClose: () => void;
+};
+
+type ColorField = {
+  id: string;
+  label: string;
+  mode: ScreenMode;
+  key: ScreenColorKey;
+};
+
+const colorFields: ColorField[] = [
+  {
+    id: 'light-bg',
+    label: 'Light Background',
+    mode: 'light',
+    key: 'backgroundColor',
+  },
+  {
+    id: 'light-color',
+    label: 'Light Text',
+    mode: 'light',
+    key: 'color',
+  },
+  {
+    id: 'dark-bg',
+    label: 'Dark Background',
+    mode: 'dark',
+    key: 'backgroundColor',
+  },
+  {
+    id: 'dark-color',
+    label: 'Dark Text',
+    mode: 'dark',
+    key: 'color',
+  },
+];
+
+export function ScreenColorsModal({
+  appConfig,
+  onChange,
+  onClose,
+}: ScreenColorsModalProps) {
+  const defaults = defaultAppConfig.screenStyle;
+
+  const getValue = (mode: ScreenMode, key: ScreenColorKey) =>
+    appConfig.screenStyle?.[mode]?.[key] ?? defaults[mode][key];
+
+  const handleChange = (mode: ScreenMode, key: ScreenColorKey, value: string) =>
+    onChange({
+      ...appConfig,
+      screenStyle: {
+        ...defaults,
+        ...appConfig.screenStyle,
+        [mode]: {
+          ...defaults[mode],
+          ...appConfig.screenStyle?.[mode],
+          [key]: value,
+        },
+      },
+    });
+
+  const headerDescription = useMemo(
+    () =>
+      'Edit light/dark screen background & text colors used in the preview.',
+    [],
+  );
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="screen-colors-title"
+      contentClassName="localication-modal__content"
+    >
+      <div className="modal__header localication-modal__header">
+        <div className="localication-modal__header-main">
+          <h3 id="screen-colors-title" className="modal__title">
+            Screen Colors
+          </h3>
+          <p className="localication-modal__description">{headerDescription}</p>
+        </div>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className="localication-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 style={{ alignSelf: 'center' }}>{label}</div>
+              <input
+                id={id}
+                type="color"
+                className="input input--color"
+                value={String(getValue(mode, key))}
+                onChange={(e) => handleChange(mode, key, e.target.value)}
+              />
+            </React.Fragment>
+          ))}
+        </div>
+      </div>
+    </Modal>
+  );
+}

package/src/modals/index.ts

@@ -0,0 +1,12 @@
+export { default as Modal } from './Modal';
+export { AddComponentModal } from './AddComponentModal';
+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';

package/src/pages/ProjectDebug.tsx

@@ -0,0 +1,331 @@
+import { type ReactNode, useMemo, useState } from 'react';
+import { RenderPage } from '../RenderPage';
+import { BuilderProvider } from '../components/BuilderProvider';
+import { RenderErrorBoundary } from '../components/RenderErrorBoundary';
+import type { Node } from '../types/Node';
+import type { Product } from '../paywall/types/paywall-types';
+import type { PaywallBenefits } from '../paywall/types/benefits';
+import { useSyncHtmlThemeClass } from '../hooks/useSyncHtmlThemeClass';
+
+function safeStringify(value: unknown): string {
+  try {
+    const seen = new WeakSet<object>();
+    return JSON.stringify(
+      value,
+      (_key, v) => {
+        if (typeof v === 'object' && v !== null) {
+          if (seen.has(v as object)) return '[Circular]';
+          seen.add(v as object);
+        }
+        return v;
+      },
+      2,
+    );
+  } catch (e) {
+    return `<< Unable to stringify value: ${String(e)} >>`;
+  }
+}
+
+async function copyTextToClipboard(text: string): Promise<boolean> {
+  try {
+    if (typeof navigator !== 'undefined' && navigator.clipboard?.writeText) {
+      await navigator.clipboard.writeText(text);
+      return true;
+    }
+  } catch {
+    // fall through to legacy method
+  }
+
+  try {
+    if (typeof document === 'undefined') return false;
+    const el = document.createElement('textarea');
+    el.value = text;
+    el.setAttribute('readonly', 'true');
+    el.style.position = 'fixed';
+    el.style.opacity = '0';
+    document.body.appendChild(el);
+    el.select();
+    const ok = document.execCommand('copy');
+    document.body.removeChild(el);
+    return ok;
+  } catch {
+    return false;
+  }
+}
+
+function parseValidationPrefix(message: string): {
+  path?: string;
+  reason: string;
+} {
+  const idx = message.indexOf(': ');
+  if (idx <= 0) return { reason: message };
+  const maybePath = message.slice(0, idx);
+  const reason = message.slice(idx + 2);
+  if (maybePath.startsWith('root')) return { path: maybePath, reason };
+  return { reason: message };
+}
+
+function isObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+function getNodeType(value: unknown): string | null {
+  if (!isObject(value)) return null;
+  const t = value.type;
+  return typeof t === 'string' && t ? t : null;
+}
+
+function getFirstComponentFromReactStack(
+  componentStack?: string,
+): string | null {
+  if (!componentStack) return null;
+  const match = componentStack.match(/\bat\s+([A-Za-z0-9_$]+)/);
+  return match?.[1] ?? null;
+}
+
+function resolveNodeTypeAtPath(
+  root: unknown,
+  path?: string,
+): { nodeType?: string; nodePath?: string } {
+  if (!path || !path.startsWith('root')) return {};
+  let current: unknown = root;
+  let lastNodeType: string | null = getNodeType(current);
+  let lastNodePath: string | null = lastNodeType ? 'root' : null;
+
+  const rest = path === 'root' ? '' : path.replace(/^root\.?/, '');
+  const re = /([A-Za-z0-9_$]+)|\[(\d+)\]/g;
+  let m: RegExpExecArray | null;
+  let cursorPath = 'root';
+
+  // Traverse and remember the last object node that had a `type` field.
+  while ((m = re.exec(rest))) {
+    const prop = m[1];
+    const idx = m[2];
+
+    if (prop) {
+      cursorPath = `${cursorPath}.${prop}`;
+      if (isObject(current)) current = current[prop];
+      else current = undefined;
+    } else if (idx != null) {
+      cursorPath = `${cursorPath}[${idx}]`;
+      if (Array.isArray(current)) current = current[Number(idx)];
+      else current = undefined;
+    }
+
+    const t = getNodeType(current);
+    if (t) {
+      lastNodeType = t;
+      lastNodePath = cursorPath;
+    }
+  }
+
+  return lastNodeType
+    ? { nodeType: lastNodeType, nodePath: lastNodePath ?? undefined }
+    : {};
+}
+
+export type ProjectDebugProps = {
+  name: string;
+  rawData: unknown;
+  validationError: string;
+  validationErrorStack?: string;
+  products: Product[];
+  benefits: PaywallBenefits;
+  canvasBg?: string;
+  belowName?: ReactNode;
+};
+
+export function ProjectDebug({
+  name,
+  rawData,
+  validationError,
+  validationErrorStack,
+  products,
+  benefits,
+  canvasBg,
+  belowName,
+}: ProjectDebugProps) {
+  useSyncHtmlThemeClass();
+  const [previewError, setPreviewError] = useState<{
+    message: string;
+    stack?: string;
+    componentStack?: string;
+  } | null>(null);
+  const [jsonCopyState, setJsonCopyState] = useState<'idle' | 'copied'>('idle');
+  const [errorCopyState, setErrorCopyState] = useState<'idle' | 'copied'>(
+    'idle',
+  );
+
+  const json = useMemo(() => safeStringify(rawData), [rawData]);
+  const previewData = rawData as Node;
+  const rootType = useMemo(() => getNodeType(rawData), [rawData]);
+  const parsedValidation = useMemo(
+    () => parseValidationPrefix(validationError),
+    [validationError],
+  );
+  const validationContext = useMemo(
+    () => resolveNodeTypeAtPath(rawData, parsedValidation.path),
+    [rawData, parsedValidation.path],
+  );
+
+  const validationSummary = useMemo(() => {
+    const lines: string[] = [];
+    lines.push(parsedValidation.reason);
+    if (rootType) lines.push(`Root component: ${rootType}`);
+    if (parsedValidation.path) lines.push(`Path: ${parsedValidation.path}`);
+    if (validationContext.nodeType) {
+      lines.push(
+        `Component at path: ${validationContext.nodeType}${
+          validationContext.nodePath ? ` (${validationContext.nodePath})` : ''
+        }`,
+      );
+    }
+    return lines.join('\n');
+  }, [
+    parsedValidation.reason,
+    parsedValidation.path,
+    rootType,
+    validationContext.nodeType,
+    validationContext.nodePath,
+  ]);
+
+  const renderSummary = useMemo(() => {
+    if (!previewError) return null;
+    const lines: string[] = [];
+    lines.push(previewError.message);
+    if (rootType) lines.push(`Root component: ${rootType}`);
+    if (previewError.componentStack) {
+      lines.push(
+        `Component (from React stack): ${
+          getFirstComponentFromReactStack(previewError.componentStack) ??
+          'unknown'
+        }`,
+      );
+    }
+    return lines.join('\n');
+  }, [previewError, rootType]);
+
+  const fullErrorReport = useMemo(() => {
+    const parts: string[] = [];
+    parts.push('=== Validation ===');
+    parts.push(validationSummary);
+    if (validationErrorStack) {
+      parts.push('');
+      parts.push(validationErrorStack);
+    }
+    if (previewError) {
+      parts.push('');
+      parts.push('=== Render ===');
+      if (renderSummary) parts.push(renderSummary);
+      if (previewError.stack) {
+        parts.push('');
+        parts.push(previewError.stack);
+      }
+      if (previewError.componentStack) {
+        parts.push('');
+        parts.push(previewError.componentStack);
+      }
+    }
+    return parts.join('\n');
+  }, [previewError, renderSummary, validationErrorStack, validationSummary]);
+
+  return (
+    <div className="rb-project-debug">
+      <section className="rb-project-debug__json" aria-label="Debug JSON">
+        <div className="rb-project-debug__meta">
+          <div>
+            <span className="rb-project-debug__meta-label">Name:</span> {name}
+          </div>
+        </div>
+        <div className="rb-project-debug__toolbar">
+          <button
+            type="button"
+            className="editor-button"
+            onClick={async () => {
+              const ok = await copyTextToClipboard(json);
+              if (!ok) return;
+              setJsonCopyState('copied');
+              window.setTimeout(() => setJsonCopyState('idle'), 900);
+            }}
+          >
+            {jsonCopyState === 'copied' ? 'Copied JSON' : 'Copy JSON'}
+          </button>
+        </div>
+        {belowName && (
+          <div className="rb-project-debug__below-name">{belowName}</div>
+        )}
+        <pre className="rb-project-debug__code" tabIndex={0}>
+          {json}
+        </pre>
+      </section>
+
+      <section
+        className="rb-project-debug__preview"
+        aria-label="Preview"
+        style={{
+          // eslint-disable-next-line @typescript-eslint/naming-convention
+          ['--rb-canvas-bg' as any]: canvasBg ?? 'none',
+        }}
+      >
+        <BuilderProvider params={{ products, benefits }}>
+          <RenderErrorBoundary
+            subtitle="caught by ProjectDebug preview"
+            onError={(e, componentStack) =>
+              setPreviewError({
+                message: e?.message ?? String(e),
+                stack: e?.stack,
+                componentStack,
+              })
+            }
+          >
+            <RenderPage data={previewData} name={name} />
+          </RenderErrorBoundary>
+        </BuilderProvider>
+      </section>
+
+      <section className="rb-project-debug__error" aria-label="Errors">
+        <div className="rb-project-debug__error-head">
+          <h2 className="rb-project-debug__title">Errors</h2>
+          <button
+            type="button"
+            className="editor-button"
+            onClick={async () => {
+              const ok = await copyTextToClipboard(fullErrorReport);
+              if (!ok) return;
+              setErrorCopyState('copied');
+              window.setTimeout(() => setErrorCopyState('idle'), 900);
+            }}
+          >
+            {errorCopyState === 'copied' ? 'Copied' : 'Copy'}
+          </button>
+        </div>
+        <div className="rb-project-debug__error-block">
+          <div className="rb-project-debug__error-label">Validation</div>
+          <pre className="rb-project-debug__error-pre">{validationSummary}</pre>
+          {validationErrorStack && (
+            <pre className="rb-project-debug__error-pre">
+              {validationErrorStack}
+            </pre>
+          )}
+        </div>
+
+        {previewError && (
+          <div className="rb-project-debug__error-block">
+            <div className="rb-project-debug__error-label">Render</div>
+            <pre className="rb-project-debug__error-pre">{renderSummary}</pre>
+            {previewError.stack && (
+              <pre className="rb-project-debug__error-pre">
+                {previewError.stack}
+              </pre>
+            )}
+            {previewError.componentStack && (
+              <pre className="rb-project-debug__error-pre">
+                {previewError.componentStack}
+              </pre>
+            )}
+          </div>
+        )}
+      </section>
+    </div>
+  );
+}

package/src/pages/ProjectMigrationPage.tsx

@@ -0,0 +1,92 @@
+import type { ReactNode } from 'react';
+import type { Product } from '../paywall/types/paywall-types';
+import type { PaywallBenefits } from '../paywall/types/benefits';
+import { ProjectDebug } from './ProjectDebug';
+
+export type ProjectMigrationPageProps = {
+  name: string;
+  rawData: unknown;
+
+  projectVersion: string;
+  requiredVersion: string;
+
+  pendingMigrations: Array<{
+    id: string;
+    title: string;
+    fromVersion: string;
+    toVersion: string;
+  }>;
+
+  products: Product[];
+  benefits: PaywallBenefits;
+  canvasBg?: string;
+  belowName?: ReactNode;
+
+  migrating?: boolean;
+  onContinueWithoutValidation?: () => void;
+  onMigrateNow?: () => void;
+};
+
+export function ProjectMigrationPage({
+  name,
+  rawData,
+  projectVersion,
+  requiredVersion,
+  pendingMigrations,
+  products,
+  benefits,
+  canvasBg,
+  belowName,
+  migrating,
+  onContinueWithoutValidation,
+  onMigrateNow,
+}: ProjectMigrationPageProps) {
+  const message = `Migration required: project version ${projectVersion} is lower than ${requiredVersion}.`;
+
+  const stack = [
+    `Required: ${requiredVersion}`,
+    `Current: ${projectVersion}`,
+    '',
+    'Pending migrations:',
+    ...(pendingMigrations.length
+      ? pendingMigrations.map(
+          (m) => `- ${m.id} (${m.fromVersion} -> ${m.toVersion}): ${m.title}`,
+        )
+      : ['- (none)']),
+  ].join('\n');
+
+  return (
+    <ProjectDebug
+      name={name}
+      rawData={rawData}
+      validationError={message}
+      validationErrorStack={stack}
+      products={products}
+      benefits={benefits}
+      canvasBg={canvasBg}
+      belowName={
+        <>
+          <div className="rb-project-validation__actions">
+            <button
+              type="button"
+              className="editor-button"
+              disabled={!!migrating}
+              onClick={() => onMigrateNow?.()}
+            >
+              {migrating ? 'Migrating…' : 'Migrate now'}
+            </button>
+
+            <button
+              type="button"
+              className="editor-button"
+              onClick={() => onContinueWithoutValidation?.()}
+            >
+              Continue without migration
+            </button>
+          </div>
+          {belowName}
+        </>
+      }
+    />
+  );
+}