@developer_tribe/react-builder 1.0.1 → 1.0.3

package/src/mockOS/managers/mockPermissionManager.ts

@@ -0,0 +1,54 @@
+import { MockOSContextValue } from '../context/MockOSContext';
+
+export type PermissionType =
+  | 'camera'
+  | 'microphone'
+  | 'location'
+  | 'notifications'
+  | 'photos'
+  | 'contacts'
+  | 'att'; // App Tracking Transparency
+
+export type PermissionStatus = 'granted' | 'denied' | 'not-determined';
+
+export class MockPermissionManager {
+  private context: MockOSContextValue | null;
+
+  constructor(context: MockOSContextValue | null) {
+    this.context = context;
+  }
+
+  requestPermission(permission: PermissionType | string): PermissionStatus {
+    if (this.context === null) {
+      alert(
+        `Permission requested: ${permission}\n(Mock OS context not available)`,
+      );
+      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
+    return 'granted';
+  }
+
+  checkPermission(permission: PermissionType | string): PermissionStatus {
+    if (this.context === null) {
+      alert(`Permission check: ${permission}\n(Mock OS context not available)`);
+      return 'not-determined';
+    }
+
+    console.log(`[Mock OS] Permission checked: ${permission}`);
+    return 'granted';
+  }
+
+  openSettings(): void {
+    if (this.context === null) {
+      alert('Opening Settings\n(Mock OS context not available)');
+      return;
+    }
+
+    console.log('[Mock OS] Opening Settings');
+  }
+}

package/src/mockOS/managers/navigationManager.ts

@@ -0,0 +1,91 @@
+import { MockOSContextValue } from '../context/MockOSContext';
+
+export type NavigationDestination =
+  | 'home'
+  | 'subscriptions'
+  | 'launchApp'
+  | 'settings'
+  | 'profile';
+
+export interface NavigationStackItem {
+  destination: NavigationDestination;
+  timestamp: number;
+}
+
+export class MockNavigationManager {
+  private context: MockOSContextValue | null;
+  private stack: NavigationStackItem[] = [];
+
+  constructor(context: MockOSContextValue | null) {
+    this.context = context;
+  }
+
+  goToHome(): void {
+    if (this.context === null) {
+      alert('Navigate to Home\n(Mock OS context not available)');
+      return;
+    }
+
+    const item: NavigationStackItem = {
+      destination: 'home',
+      timestamp: Date.now(),
+    };
+    this.stack.push(item);
+    console.log('[Mock OS] Navigate to Home', { stack: this.stack });
+  }
+
+  goToSubscriptions(): void {
+    if (this.context === null) {
+      alert('Navigate to Subscriptions\n(Mock OS context not available)');
+      return;
+    }
+
+    const item: NavigationStackItem = {
+      destination: 'subscriptions',
+      timestamp: Date.now(),
+    };
+    this.stack.push(item);
+    console.log('[Mock OS] Navigate to Subscriptions', { stack: this.stack });
+  }
+
+  goToLaunchApp(): void {
+    if (this.context === null) {
+      alert('Navigate to Launch App\n(Mock OS context not available)');
+      return;
+    }
+
+    const item: NavigationStackItem = {
+      destination: 'launchApp',
+      timestamp: Date.now(),
+    };
+    this.stack.push(item);
+    console.log('[Mock OS] Navigate to Launch App', { stack: this.stack });
+  }
+
+  goBack(): boolean {
+    if (this.context === null) {
+      alert('Go Back\n(Mock OS context not available)');
+      return false;
+    }
+
+    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;
+  }
+
+  getStack(): NavigationStackItem[] {
+    return [...this.stack];
+  }
+
+  clearStack(): void {
+    this.stack = [];
+    if (this.context) {
+      console.log('[Mock OS] Navigation stack cleared');
+    }
+  }
+}

package/src/modals/AddComponentModal.tsx

@@ -0,0 +1,313 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import Modal from './Modal';
+import { getPatternByType } from '../utils/patterns';
+
+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;