@developer_tribe/react-builder 1.1.0 → 1.2.0

package/src/modals/AddComponentModal.tsx

@@ -0,0 +1,314 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import Modal from './Modal';
+import { getPatternByType } from '../utils/patterns';
+//TODO: filtreleme kısmları karıştığı için snapshot testi ekle
+
+type AddComponentModalProps = {
+  allowedChildTypes: string[];
+  parentType?: string | null;
+  onSelect: (type: string) => void;
+  onClose: () => void;
+};
+
+type ComponentOption = {
+  type: string;
+  label: string;
+  desiredParents: string[];
+};
+
+type ComponentGroup = {
+  token: string;
+  displayLabel: string;
+  options: ComponentOption[];
+};
+
+const FALLBACK_PARENT = 'all';
+const EXCLUDE_PREFIX = '!=';
+
+function normalizeDesiredParents(list?: string[]): string[] {
+  if (!Array.isArray(list) || list.length === 0) {
+    return [FALLBACK_PARENT];
+  }
+  return list;
+}
+
+function matchesDesiredChildToken(token: string, childType: string): boolean {
+  if (token.startsWith('=')) return token.slice(1) === childType;
+  if (token.startsWith('>')) return token.slice(1) === childType;
+  return token === childType;
+}
+
+function filterOptionsByDesiredChildren(
+  options: ComponentOption[],
+  desiredChildren?: string[],
+): ComponentOption[] {
+  if (!Array.isArray(desiredChildren) || desiredChildren.length === 0) {
+    return options;
+  }
+
+  const tokens = desiredChildren
+    .map((token) => token.trim())
+    .filter((token) => token.length > 0);
+
+  if (tokens.length === 0) {
+    return options;
+  }
+
+  return options.filter(({ type }) => {
+    let hasPositiveRule = false;
+    let matchesPositiveRule = false;
+
+    for (const token of tokens) {
+      if (token.startsWith(EXCLUDE_PREFIX)) {
+        if (type === token.slice(EXCLUDE_PREFIX.length)) {
+          return false;
+        }
+        continue;
+      }
+
+      if (token === FALLBACK_PARENT) {
+        continue;
+      }
+
+      hasPositiveRule = true;
+      if (matchesDesiredChildToken(token, type)) {
+        matchesPositiveRule = true;
+      }
+    }
+
+    if (!hasPositiveRule) {
+      return true;
+    }
+
+    return matchesPositiveRule;
+  });
+}
+
+function formatTokenLabel(token: string): string {
+  if (token === 'all') return 'Anywhere';
+  if (token === 'root') return 'Root only';
+  if (token.startsWith('!=')) return `Not under ${token.slice(2)}`;
+  if (token.startsWith('=')) return `Direct child of ${token.slice(1)}`;
+  if (token.startsWith('>')) return `Inside ${token.slice(1)}`;
+  return token;
+}
+
+function tokenMatchesParent(
+  token: string,
+  parentType?: string | null,
+): boolean {
+  if (token === 'all') return true;
+  if (!parentType || parentType.length === 0) {
+    return token === 'root';
+  }
+  if (token.startsWith('!=')) return false;
+  if (token.startsWith('=')) return token.slice(1) === parentType;
+  if (token.startsWith('>')) return token.slice(1) === parentType;
+  return token === parentType;
+}
+
+function buildGroups(
+  options: ComponentOption[],
+  tokenFilter?: (token: string, option: ComponentOption) => boolean,
+): ComponentGroup[] {
+  const map = new Map<string, ComponentOption[]>();
+
+  options.forEach((option) => {
+    option.desiredParents.forEach((token) => {
+      if (tokenFilter && !tokenFilter(token, option)) return;
+      const existing = map.get(token);
+      if (existing) {
+        if (!existing.some((item) => item.type === option.type)) {
+          existing.push(option);
+        }
+      } else {
+        map.set(token, [option]);
+      }
+    });
+  });
+
+  return Array.from(map.entries())
+    .map(([token, bucket]) => ({
+      token,
+      displayLabel: formatTokenLabel(token),
+      options: bucket.sort((a, b) => a.label.localeCompare(b.label)),
+    }))
+    .sort((a, b) => a.displayLabel.localeCompare(b.displayLabel));
+}
+
+export function AddComponentModal({
+  allowedChildTypes,
+  parentType,
+  onSelect,
+  onClose,
+}: AddComponentModalProps) {
+  const [showAllComponents, setShowAllComponents] = useState(false);
+
+  const componentOptions = useMemo<ComponentOption[]>(() => {
+    const uniqueTypes = Array.from(new Set(allowedChildTypes));
+    return uniqueTypes
+      .map((type) => {
+        const pattern = getPatternByType(type);
+        const label = pattern?.meta?.label?.trim() || type;
+        const desiredParents = normalizeDesiredParents(
+          pattern?.meta?.desiredParent,
+        );
+        return {
+          type,
+          label,
+          desiredParents,
+        };
+      })
+      .sort((a, b) => a.label.localeCompare(b.label));
+  }, [allowedChildTypes]);
+
+  const parentDesiredChildren = useMemo<string[] | undefined>(() => {
+    if (!parentType) return undefined;
+    const desiredChildren = getPatternByType(parentType)?.meta?.desiredChildren;
+    if (!Array.isArray(desiredChildren) || desiredChildren.length === 0) {
+      return undefined;
+    }
+    return desiredChildren
+      .map((token) => token.trim())
+      .filter((token) => token.length > 0);
+  }, [parentType]);
+
+  const filteredComponentOptions = useMemo<ComponentOption[]>(
+    () =>
+      filterOptionsByDesiredChildren(componentOptions, parentDesiredChildren),
+    [componentOptions, parentDesiredChildren],
+  );
+
+  const canToggleAllComponents = !parentDesiredChildren?.length;
+
+  useEffect(() => {
+    if (!canToggleAllComponents) {
+      setShowAllComponents(false);
+    }
+  }, [canToggleAllComponents]);
+
+  const recommendedGroups = useMemo<ComponentGroup[]>(
+    () =>
+      buildGroups(filteredComponentOptions, (token) =>
+        tokenMatchesParent(token, parentType),
+      ),
+    [filteredComponentOptions, parentType],
+  );
+
+  const allGroups = useMemo<ComponentGroup[]>(
+    () => buildGroups(filteredComponentOptions),
+    [filteredComponentOptions],
+  );
+
+  const handleSelect = (type: string) => {
+    onSelect(type);
+  };
+
+  const renderOption = (option: ComponentOption) => (
+    <button
+      key={option.type}
+      type="button"
+      className="add-component-modal__card"
+      onClick={() => handleSelect(option.type)}
+      role="listitem"
+    >
+      <div className="add-component-modal__thumbnail" aria-hidden="true">
+        <span>Preview</span>
+      </div>
+      <span className="add-component-modal__title">{option.label}</span>
+    </button>
+  );
+
+  const renderGroups = (groups: ComponentGroup[]) =>
+    groups.map((group) => (
+      <div key={group.token} className="add-component-modal__group">
+        <h5 className="add-component-modal__group-title">
+          {group.displayLabel}
+        </h5>
+        <div className="add-component-modal__grid" role="list">
+          {group.options.map(renderOption)}
+        </div>
+      </div>
+    ));
+
+  const hasRecommended = recommendedGroups.length > 0;
+  const hasComponents = filteredComponentOptions.length > 0;
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="add-component-title"
+      contentClassName="add-component-modal"
+    >
+      <div className="modal__header">
+        <h3 id="add-component-title" className="modal__title">
+          Add component
+        </h3>
+        <button
+          type="button"
+          className="editor-button"
+          aria-label="Close add component modal"
+          onClick={onClose}
+        >
+          Close
+        </button>
+      </div>
+
+      <div className="add-component-modal__body">
+        <section className="add-component-modal__section">
+          <h4 className="add-component-modal__section-title">
+            Recommended Components
+          </h4>
+          {hasRecommended ? (
+            renderGroups(recommendedGroups)
+          ) : (
+            <p className="add-component-modal__empty">
+              {hasComponents
+                ? 'No direct recommendations for this parent.'
+                : 'No components available for this node.'}
+            </p>
+          )}
+        </section>
+
+        {canToggleAllComponents && (
+          <label className="add-component-modal__toggle">
+            <input
+              type="checkbox"
+              checked={showAllComponents}
+              onChange={(event) => setShowAllComponents(event.target.checked)}
+            />
+            <span>Show rest (All Components)</span>
+          </label>
+        )}
+
+        {canToggleAllComponents && showAllComponents && (
+          <section
+            className="add-component-modal__section"
+            aria-live="polite"
+            id="add-component-modal-all"
+          >
+            <h4 className="add-component-modal__section-title">
+              All Components
+            </h4>
+            {allGroups.length ? (
+              renderGroups(allGroups)
+            ) : (
+              <p className="add-component-modal__empty">
+                No components available.
+              </p>
+            )}
+          </section>
+        )}
+        {!showAllComponents && !hasRecommended && (
+          <p className="add-component-modal__empty">
+            {canToggleAllComponents
+              ? 'Nothing to suggest yet—toggle “Show rest” to browse all components.'
+              : 'Nothing to suggest yet for this parent.'}
+          </p>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+export default AddComponentModal;

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;