@developer_tribe/react-builder 1.0.4 → 1.0.6

package/src/modals/BenefitEditModal.tsx

@@ -0,0 +1,160 @@
+import React, { useMemo, useState } from 'react';
+import Modal from './Modal';
+import type { PaywallBenefitValue } from '../paywall/types/benefits';
+
+type ValueKind = 'string' | 'number' | 'boolean';
+
+type BenefitEditModalProps = {
+  benefitKey: string;
+  benefitValue: PaywallBenefitValue;
+  index: number;
+  onSave: (next: { key: string; value: PaywallBenefitValue }) => void;
+  onClose: () => void;
+};
+
+function detectKind(value: PaywallBenefitValue): ValueKind {
+  if (typeof value === 'number') return 'number';
+  if (typeof value === 'boolean') return 'boolean';
+  return 'string';
+}
+
+function parseValue(
+  kind: ValueKind,
+  raw: string,
+  fallback: PaywallBenefitValue,
+) {
+  if (kind === 'boolean') return raw === 'true';
+  if (kind === 'number') {
+    const trimmed = raw.trim();
+    if (!trimmed) return fallback;
+    const normalized = trimmed.replace(',', '.');
+    const parsed = Number.parseFloat(normalized);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return raw;
+}
+
+export function BenefitEditModal({
+  benefitKey,
+  benefitValue,
+  index,
+  onSave,
+  onClose,
+}: BenefitEditModalProps) {
+  const initial = useMemo(() => {
+    const key = (benefitKey ?? '').toString();
+    const kind = detectKind(benefitValue);
+    const raw =
+      kind === 'boolean'
+        ? benefitValue
+          ? 'true'
+          : 'false'
+        : kind === 'number'
+          ? `${benefitValue ?? ''}`
+          : (benefitValue ?? '').toString();
+    return { key, kind, raw };
+  }, [benefitKey, benefitValue]);
+
+  const [draft, setDraft] = useState(initial);
+  const canSave = draft.key.trim().length > 0;
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="benefit-edit-modal-title"
+      contentClassName="benefit-edit-modal"
+    >
+      <div className="modal__header">
+        <h3 id="benefit-edit-modal-title" className="modal__title">
+          Edit benefit #{index + 1}
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className="benefit-edit-modal__body">
+        <div className="form-row">
+          <label htmlFor="benefitKey">key</label>
+          <input
+            id="benefitKey"
+            className="input"
+            value={draft.key}
+            onChange={(e) =>
+              setDraft((prev) => ({ ...prev, key: e.target.value }))
+            }
+            placeholder="unlimited_access"
+          />
+        </div>
+
+        <div className="form-row">
+          <label htmlFor="benefitType">type</label>
+          <select
+            id="benefitType"
+            className="input"
+            value={draft.kind}
+            onChange={(e) =>
+              setDraft((prev) => ({
+                ...prev,
+                kind: e.target.value as ValueKind,
+              }))
+            }
+          >
+            <option value="string">string</option>
+            <option value="number">number</option>
+            <option value="boolean">boolean</option>
+          </select>
+        </div>
+
+        <div className="form-row">
+          <label htmlFor="benefitValue">value</label>
+          {draft.kind === 'boolean' ? (
+            <select
+              id="benefitValue"
+              className="input"
+              value={draft.raw}
+              onChange={(e) =>
+                setDraft((prev) => ({ ...prev, raw: e.target.value }))
+              }
+            >
+              <option value="true">true</option>
+              <option value="false">false</option>
+            </select>
+          ) : (
+            <input
+              id="benefitValue"
+              className="input"
+              value={draft.raw}
+              onChange={(e) =>
+                setDraft((prev) => ({ ...prev, raw: e.target.value }))
+              }
+              placeholder={draft.kind === 'number' ? '7' : 'Unlock everything'}
+            />
+          )}
+        </div>
+
+        <div className="form-actions">
+          <button
+            type="button"
+            className="editor-button"
+            onClick={() =>
+              onSave({
+                key: draft.key,
+                value: parseValue(draft.kind, draft.raw, benefitValue),
+              })
+            }
+            disabled={!canSave}
+            title={canSave ? 'Save' : 'key is required'}
+          >
+            Save
+          </button>
+          <button type="button" className="editor-button" onClick={onClose}>
+            Cancel
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default BenefitEditModal;

package/src/modals/BenefitPresetsModal.tsx

@@ -0,0 +1,166 @@
+import React, { useMemo } from 'react';
+import Modal from './Modal';
+import type {
+  PaywallBenefits,
+  PaywallBenefitValue,
+} from '../paywall/types/benefits';
+import presetsJson from '../assets/benefits.json';
+
+type PresetMap = Record<string, PaywallBenefits>;
+const DEFAULT_PRESET_KEY = 'Embeded Paywall';
+
+type BenefitPresetsModalProps = {
+  current: PaywallBenefits;
+  onReplace: (next: PaywallBenefits) => void;
+  onMerge: (next: PaywallBenefits) => void;
+  onClose: () => void;
+};
+
+function normalizeBenefits(raw: unknown): PaywallBenefits {
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return {};
+  const out: PaywallBenefits = {};
+  Object.entries(raw as Record<string, unknown>).forEach(([key, value]) => {
+    const normalizedKey = typeof key === 'string' ? key.trim() : '';
+    if (!normalizedKey) return;
+    if (
+      typeof value === 'string' ||
+      typeof value === 'number' ||
+      typeof value === 'boolean'
+    ) {
+      out[normalizedKey] = value as PaywallBenefitValue;
+    }
+  });
+  return out;
+}
+
+function getPresetMap(): PresetMap {
+  const raw = presetsJson as unknown as PresetMap;
+  const safe: PresetMap = {};
+  Object.entries(raw ?? {}).forEach(([key, map]) => {
+    const normalizedKey = typeof key === 'string' ? key.trim() : '';
+    if (!normalizedKey) return;
+    safe[normalizedKey] = normalizeBenefits(map);
+  });
+  return safe;
+}
+
+function countBenefits(map: PaywallBenefits): number {
+  if (!map || typeof map !== 'object') return 0;
+  return Object.keys(map).length;
+}
+
+export function BenefitPresetsModal({
+  current,
+  onReplace,
+  onMerge,
+  onClose,
+}: BenefitPresetsModalProps) {
+  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="benefit-presets-modal-title"
+      contentClassName="benefit-presets-modal"
+    >
+      <div className="modal__header">
+        <h3 id="benefit-presets-modal-title" className="modal__title">
+          Benefit presets
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className="benefit-presets-modal__body">
+        <section className="benefit-presets-modal__section">
+          <p className="benefit-presets-modal__section-title">
+            Current ({countBenefits(current)})
+          </p>
+          <p className="benefit-presets-modal__muted">
+            Pick a preset below to replace or merge into the current map.
+          </p>
+        </section>
+
+        <section className="benefit-presets-modal__section">
+          <p className="benefit-presets-modal__section-title">Presets</p>
+
+          {presetEntries.length ? (
+            <div className="benefit-presets-modal__grid">
+              {presetEntries.map(([key, map]) => {
+                const entries = Object.entries(map);
+                return (
+                  <div key={key} className="benefit-presets-modal__card">
+                    <div className="benefit-presets-modal__card-header">
+                      <p className="benefit-presets-modal__card-title">{key}</p>
+                      <p className="benefit-presets-modal__card-count">
+                        {entries.length} benefits
+                      </p>
+                    </div>
+
+                    <ul className="benefit-presets-modal__card-list">
+                      {entries.slice(0, 3).map(([k, v]) => (
+                        <li
+                          key={k}
+                          className="benefit-presets-modal__card-item"
+                        >
+                          {k}: {String(v)}
+                        </li>
+                      ))}
+                      {entries.length > 3 ? (
+                        <li className="benefit-presets-modal__card-item benefit-presets-modal__muted">
+                          +{entries.length - 3} more…
+                        </li>
+                      ) : null}
+                    </ul>
+
+                    <div className="benefit-presets-modal__actions">
+                      <button
+                        type="button"
+                        className="editor-button"
+                        onClick={() => {
+                          onReplace(map);
+                          onClose();
+                        }}
+                      >
+                        Replace
+                      </button>
+                      <button
+                        type="button"
+                        className="editor-button"
+                        onClick={() => {
+                          onMerge(map);
+                          onClose();
+                        }}
+                        title="Merges preset into current (preset values overwrite existing keys)"
+                      >
+                        Merge
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <p className="benefit-presets-modal__muted">No presets found.</p>
+          )}
+        </section>
+      </div>
+    </Modal>
+  );
+}
+
+export default BenefitPresetsModal;

package/src/modals/IconPickerModal.tsx

@@ -0,0 +1,109 @@
+import React, { useMemo, useState } from 'react';
+import Modal from './Modal';
+import { Icons, type IconsType } from '../types/Icons';
+import { Icon } from '../components/Icon.generated';
+
+type IconPickerModalProps = {
+  value?: IconsType;
+  onSelect: (icon: IconsType) => void;
+  onClose: () => void;
+  onClear?: () => void;
+};
+
+export function IconPickerModal({
+  value,
+  onSelect,
+  onClose,
+  onClear,
+}: IconPickerModalProps) {
+  const [query, setQuery] = useState('');
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) return Icons;
+    return Icons.filter((name) => name.toLowerCase().includes(q));
+  }, [query]);
+
+  return (
+    <Modal onClose={onClose} ariaLabelledBy="icon-picker-title">
+      <div style={{ display: 'grid', gap: 12 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <p id="icon-picker-title" style={{ margin: 0, fontWeight: 700 }}>
+            Select Icon
+          </p>
+          <div style={{ flex: 1 }} />
+          {onClear ? (
+            <button type="button" className="editor-button" onClick={onClear}>
+              Clear
+            </button>
+          ) : null}
+          <button type="button" className="editor-button" onClick={onClose}>
+            Close
+          </button>
+        </div>
+
+        <input
+          type="text"
+          className="input"
+          placeholder="Search icons..."
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          autoFocus
+        />
+
+        <div style={{ fontSize: 12, color: '#666' }}>
+          {filtered.length} / {Icons.length}
+          {value ? ` • Selected: ${value}` : ''}
+        </div>
+
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))',
+            gap: 8,
+            maxHeight: '60vh',
+            overflow: 'auto',
+            paddingRight: 4,
+          }}
+        >
+          {filtered.map((name) => {
+            const isActive = value === name;
+            return (
+              <button
+                key={name}
+                type="button"
+                onClick={() => onSelect(name)}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8,
+                  borderRadius: 8,
+                  border: isActive ? '2px solid #222' : '1px solid #ddd',
+                  padding: '8px 10px',
+                  background: '#fff',
+                  cursor: 'pointer',
+                }}
+                aria-label={`Select icon ${name}`}
+              >
+                <Icon iconType={name} size={18} />
+                <span
+                  style={{
+                    fontSize: 12,
+                    fontWeight: isActive ? 700 : 500,
+                    textAlign: 'left',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                  }}
+                  title={name}
+                >
+                  {name}
+                </span>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </Modal>
+  );
+}