@developer_tribe/react-builder 1.0.3 → 1.0.5

package/src/mockOS/managers/mockPermissionManager.ts

@@ -26,7 +26,6 @@ export class MockPermissionManager {
       return 'not-determined';
     }
 
-    console.log(`[Mock OS] Permission requested: ${permission}`);
     // Set permission to trigger modal display
     this.context.setPermission(permission);
     // Default behavior: grant all permissions in mock environment
@@ -39,7 +38,6 @@ export class MockPermissionManager {
       return 'not-determined';
     }
 
-    console.log(`[Mock OS] Permission checked: ${permission}`);
     return 'granted';
   }
 
@@ -48,7 +46,5 @@ export class MockPermissionManager {
       alert('Opening Settings\n(Mock OS context not available)');
       return;
     }
-
-    console.log('[Mock OS] Opening Settings');
   }
 }

package/src/mockOS/managers/navigationManager.ts

@@ -31,7 +31,6 @@ export class MockNavigationManager {
       timestamp: Date.now(),
     };
     this.stack.push(item);
-    console.log('[Mock OS] Navigate to Home', { stack: this.stack });
   }
 
   goToSubscriptions(): void {
@@ -45,7 +44,6 @@ export class MockNavigationManager {
       timestamp: Date.now(),
     };
     this.stack.push(item);
-    console.log('[Mock OS] Navigate to Subscriptions', { stack: this.stack });
   }
 
   goToLaunchApp(): void {
@@ -59,7 +57,6 @@ export class MockNavigationManager {
       timestamp: Date.now(),
     };
     this.stack.push(item);
-    console.log('[Mock OS] Navigate to Launch App', { stack: this.stack });
   }
 
   goBack(): boolean {
@@ -70,11 +67,9 @@ export class MockNavigationManager {
 
     if (this.stack.length > 0) {
       const popped = this.stack.pop();
-      console.log('[Mock OS] Go Back', { popped, stack: this.stack });
       return true;
     }
 
-    console.log('[Mock OS] Cannot go back - stack is empty');
     return false;
   }
 
@@ -85,7 +80,7 @@ export class MockNavigationManager {
   clearStack(): void {
     this.stack = [];
     if (this.context) {
-      console.log('[Mock OS] Navigation stack cleared');
+      console.info('[Mock OS] Navigation stack cleared');
     }
   }
 }

package/src/modals/AddComponentModal.tsx

@@ -1,6 +1,7 @@
 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[];

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/ColorModal.tsx

@@ -65,7 +65,11 @@ const readSavedColors = (): string[] => {
     const stored = window.localStorage.getItem(SAVED_COLORS_KEY);
     if (!stored) return [];
     const parsed = JSON.parse(stored);
-    return Array.isArray(parsed) ? parsed : [];
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .filter((value) => typeof value === 'string')
+      .map((value) => value.trim().toLowerCase())
+      .filter(Boolean);
   } catch {
     return [];
   }
@@ -143,6 +147,7 @@ export function ColorModal({
   const [useColorNames, setUseColorNames] = useState(true);
   const colorInputRef = useRef<HTMLInputElement | null>(null);
   const colorNameToggleId = useId();
+  const colorPickerInputId = useId();
 
   const selectedColorPreview = useMemo(
     () => resolveProjectColorValue(value, projectColors) ?? value,
@@ -195,21 +200,10 @@ export function ColorModal({
     [savedColors],
   );
 
-  const handleAddColorClick = () => {
-    colorInputRef.current?.click();
-  };
-
-  const handlePreviewKeyDown = (
-    event: React.KeyboardEvent<HTMLSpanElement>,
-  ) => {
-    if (event.key !== 'Enter' && event.key !== ' ') return;
-    event.preventDefault();
-    handleAddColorClick();
-  };
-
-  const handleColorPicked = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const picked = event.target.value;
+  const applyPickedColor = (raw: string | undefined) => {
+    const picked = raw?.trim().toLowerCase();
     if (!picked) return;
+
     setSavedColors((prev) => {
       if (prev.includes(picked)) return prev;
       const next = [...prev, picked];
@@ -218,7 +212,85 @@ export function ColorModal({
     });
     onSelect(picked);
     onClose();
-    event.target.value = '';
+  };
+
+  const openPickerWithTempInput = () => {
+    if (typeof document === 'undefined') return;
+
+    const temp = document.createElement('input');
+    temp.type = 'color';
+    temp.value = selectedColorPreview?.toString() || '#000000';
+
+    // Keep it in the DOM and "not display:none" so Safari/iOS reliably opens it.
+    temp.style.position = 'fixed';
+    temp.style.left = '-1000px';
+    temp.style.top = '0';
+    temp.style.width = '40px';
+    temp.style.height = '40px';
+    temp.style.opacity = '0';
+
+    const cleanup = () => {
+      temp.removeEventListener('change', onChange);
+      temp.removeEventListener('input', onChange);
+      temp.removeEventListener('blur', cleanup);
+      temp.remove();
+    };
+
+    const onChange = () => {
+      applyPickedColor(temp.value);
+      cleanup();
+    };
+
+    temp.addEventListener('change', onChange);
+    temp.addEventListener('input', onChange);
+    temp.addEventListener('blur', cleanup);
+
+    document.body.appendChild(temp);
+    try {
+      temp.focus({ preventScroll: true });
+    } catch {
+      // no-op
+    }
+    // Next tick helps some browsers recognize it as a user-gesture flow.
+    requestAnimationFrame(() => temp.click());
+  };
+
+  const handleAddColorClick = () => {
+    const input = colorInputRef.current;
+
+    // Prefer showPicker when available (Chromium).
+    const maybeShowPicker = input
+      ? (
+          input as HTMLInputElement & {
+            showPicker?: () => void;
+          }
+        ).showPicker
+      : undefined;
+
+    if (input && typeof maybeShowPicker === 'function') {
+      try {
+        input.focus({ preventScroll: true });
+      } catch {
+        // no-op
+      }
+      maybeShowPicker.call(input);
+      return;
+    }
+
+    // Fallback: temporary input for Safari/iOS and browsers that block click on hidden inputs.
+    openPickerWithTempInput();
+  };
+
+  const handlePreviewKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    handleAddColorClick();
+  };
+
+  const handleColorPicked = (event: React.ChangeEvent<HTMLInputElement>) => {
+    applyPickedColor(event.target.value);
+    // Keep the input value valid for type="color" (empty string can be invalid).
+    event.target.value = '#000000';
   };
 
   const handleSelectColor = (option: ColorOption) => {
@@ -245,16 +317,16 @@ export function ColorModal({
 
       <div className="color-modal__selected">
         <div className="color-modal__selected-info">
-          <span
+          <label
+            htmlFor={colorPickerInputId}
             role="button"
             aria-label="Open color picker"
             tabIndex={0}
             title="Pick a color"
             className="color-modal__selected-preview"
             style={{ background: selectedColorPreview ?? 'transparent' }}
-            onClick={handleAddColorClick}
             onKeyDown={handlePreviewKeyDown}
-          />
+          ></label>
           <div>
             <p className="color-modal__selected-label">Selected color</p>
             <p className="color-modal__selected-value">{value ?? 'None'}</p>
@@ -316,13 +388,16 @@ export function ColorModal({
         options={savedColorOptions}
         emptyMessage="Add colors you use often for quick access."
         action={
-          <button
-            type="button"
-            className="color-modal__link-button"
-            onClick={handleAddColorClick}
-          >
+          <span className="color-modal__link-button color-modal__add-color">
             Add color
-          </button>
+            <input
+              type="color"
+              className="color-modal__add-color-input"
+              onChange={handleColorPicked}
+              defaultValue="#000000"
+              aria-label="Add color"
+            />
+          </span>
         }
         activeValue={value}
         onSelect={handleSelectColor}
@@ -330,9 +405,12 @@ export function ColorModal({
 
       <input
         ref={colorInputRef}
+        id={colorPickerInputId}
         type="color"
         className="color-modal__input"
         onChange={handleColorPicked}
+        defaultValue="#000000"
+        tabIndex={-1}
       />
     </Modal>
   );

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>
+  );
+}