@developer_tribe/react-builder 1.0.1 → 1.0.2

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;

package/src/modals/ColorModal.tsx

@@ -0,0 +1,268 @@
+import React, { useMemo, useRef, useState } from 'react';
+import Modal from './Modal';
+
+const SAVED_COLORS_KEY = 'attributes-editor-saved-colors';
+
+const POPULAR_COLORS: Array<{ label: string; value: string }> = [
+  { label: 'White', value: '#FFFFFF' },
+  { label: 'Black', value: '#000000' },
+  { label: 'Text Gray', value: '#1F1F1F' },
+  { label: 'Muted Text', value: '#4A4A4A' },
+  { label: 'Background', value: '#F5F5F5' },
+  { label: 'Primary Blue', value: '#0A84FF' },
+  { label: 'Success Green', value: '#34C759' },
+  { label: 'Accent Purple', value: '#AF52DE' },
+];
+
+type ColorOption = {
+  label?: string;
+  value: string;
+};
+
+type ColorModalProps = {
+  value?: string;
+  projectColors?: string[];
+  onSelect: (color: string) => void;
+  onClose: () => void;
+  onClear: () => void;
+};
+
+const readSavedColors = (): string[] => {
+  if (typeof window === 'undefined') return [];
+  try {
+    const stored = window.localStorage.getItem(SAVED_COLORS_KEY);
+    if (!stored) return [];
+    const parsed = JSON.parse(stored);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch {
+    return [];
+  }
+};
+
+const persistSavedColors = (colors: string[]) => {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(SAVED_COLORS_KEY, JSON.stringify(colors));
+  } catch {
+    // no-op
+  }
+};
+
+export function ColorModal({
+  value,
+  projectColors = [],
+  onSelect,
+  onClose,
+  onClear,
+}: ColorModalProps) {
+  const [savedColors, setSavedColors] = useState<string[]>(() =>
+    readSavedColors(),
+  );
+  const colorInputRef = useRef<HTMLInputElement | null>(null);
+
+  const uniqueProjectColors = useMemo(() => {
+    const seen = new Set<string>();
+    return projectColors
+      .map((color) => color?.trim())
+      .filter(
+        (color): color is string =>
+          Boolean(color) && !seen.has(color!.toLowerCase()),
+      )
+      .map((color) => {
+        seen.add(color.toLowerCase());
+        return color;
+      });
+  }, [projectColors]);
+
+  const projectColorOptions = useMemo<ColorOption[]>(
+    () => uniqueProjectColors.map((color) => ({ value: color })),
+    [uniqueProjectColors],
+  );
+
+  const savedColorOptions = useMemo<ColorOption[]>(
+    () => savedColors.map((color) => ({ value: color })),
+    [savedColors],
+  );
+
+  const handleAddColorClick = () => {
+    colorInputRef.current?.click();
+  };
+
+  const handleColorPicked = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const picked = event.target.value;
+    if (!picked) return;
+    setSavedColors((prev) => {
+      if (prev.includes(picked)) return prev;
+      const next = [...prev, picked];
+      persistSavedColors(next);
+      return next;
+    });
+    onSelect(picked);
+    onClose();
+    event.target.value = '';
+  };
+
+  const handleSelectColor = (hex: string) => {
+    onSelect(hex);
+    onClose();
+  };
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="color-picker-title"
+      contentClassName="color-modal"
+    >
+      <div className="modal__header">
+        <h3 id="color-picker-title" className="modal__title">
+          Pick a color
+        </h3>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+
+      <div className="color-modal__selected">
+        <div className="color-modal__selected-info">
+          <span
+            aria-hidden
+            className="color-modal__selected-preview"
+            style={{ background: value ?? 'transparent' }}
+          />
+          <div>
+            <p className="color-modal__selected-label">Selected color</p>
+            <p className="color-modal__selected-value">{value ?? 'None'}</p>
+          </div>
+        </div>
+        {value ? (
+          <button
+            type="button"
+            className="color-modal__link-button"
+            onClick={onClear}
+          >
+            Clear
+          </button>
+        ) : null}
+      </div>
+
+      <ColorSection
+        title="Project colors"
+        options={projectColorOptions}
+        emptyMessage="No project colors detected yet."
+        activeValue={value}
+        onSelect={handleSelectColor}
+      />
+
+      <ColorSection
+        title="Saved colors"
+        options={savedColorOptions}
+        emptyMessage="Add colors you use often for quick access."
+        action={
+          <button
+            type="button"
+            className="color-modal__link-button"
+            onClick={handleAddColorClick}
+          >
+            Add color
+          </button>
+        }
+        activeValue={value}
+        onSelect={handleSelectColor}
+      />
+
+      <ColorSection
+        title="Popular colors"
+        options={POPULAR_COLORS}
+        emptyMessage="Popular palettes unavailable."
+        activeValue={value}
+        onSelect={handleSelectColor}
+      />
+
+      <input
+        ref={colorInputRef}
+        type="color"
+        className="color-modal__input"
+        onChange={handleColorPicked}
+      />
+    </Modal>
+  );
+}
+
+type ColorSectionProps = {
+  title: string;
+  options: ColorOption[];
+  emptyMessage?: string;
+  action?: React.ReactNode;
+  activeValue?: string;
+  onSelect: (value: string) => void;
+};
+
+function ColorSection({
+  title,
+  options,
+  emptyMessage,
+  action,
+  activeValue,
+  onSelect,
+}: ColorSectionProps) {
+  return (
+    <section className="color-section">
+      <div className="color-section__header">
+        <p className="color-section__title">{title}</p>
+        {action}
+      </div>
+      {options.length ? (
+        <div className="color-section__swatches">
+          {options.map((option) => (
+            <ColorSwatch
+              key={`${title}-${option.value}`}
+              option={option}
+              isActive={option.value === activeValue}
+              onSelect={() => onSelect(option.value)}
+            />
+          ))}
+        </div>
+      ) : (
+        <p className="color-section__empty">
+          {emptyMessage ?? 'No colors available.'}
+        </p>
+      )}
+    </section>
+  );
+}
+
+type ColorSwatchProps = {
+  option: ColorOption;
+  isActive?: boolean;
+  onSelect: () => void;
+};
+
+function ColorSwatch({ option, isActive, onSelect }: ColorSwatchProps) {
+  const isLight =
+    option.value?.trim().toLowerCase() === '#ffffff' ||
+    option.value?.trim().toLowerCase() === '#fff';
+
+  return (
+    <button
+      type="button"
+      onClick={onSelect}
+      className={`color-modal__swatch${
+        isActive ? ' color-modal__swatch--active' : ''
+      }`}
+    >
+      <span
+        aria-hidden
+        className={`color-modal__swatch-preview${
+          isLight ? ' color-modal__swatch-preview--light' : ''
+        }`}
+        style={{ background: option.value ?? 'transparent' }}
+      />
+      <span className="color-modal__swatch-label">
+        {option.label ?? option.value}
+      </span>
+      <span className="color-modal__swatch-value">{option.value}</span>
+    </button>
+  );
+}
+
+export default ColorModal;

package/src/modals/DeviceSelectorModal.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Device } from '../types/Device';
+import Modal from './Modal';
+import { DeviceButton } from '../components/DeviceButton';
+
+type DeviceSelectorModalProps = {
+  devices: Device[];
+  selectedDevice: Device | null;
+  onSelect: (device: Device) => void;
+  onClose: () => void;
+};
+
+export function DeviceSelectorModal({
+  devices,
+  selectedDevice,
+  onSelect,
+  onClose,
+}: DeviceSelectorModalProps) {
+  const handleDeviceSelect = (device: Device) => {
+    onSelect(device);
+    onClose();
+  };
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="device-selector-title"
+      contentClassName="device-selector-modal"
+    >
+      <div className="modal__header">
+        <h3 id="device-selector-title" className="modal__title">
+          Select a device
+        </h3>
+        <button
+          type="button"
+          className="editor-button"
+          aria-label="Close device selector"
+          onClick={onClose}
+        >
+          Close
+        </button>
+      </div>
+      <div className="device-selector-modal__grid" role="list">
+        {devices.map((device) => (
+          <DeviceButton
+            key={device.name}
+            device={device}
+            selectedDevice={selectedDevice}
+            onSelect={handleDeviceSelect}
+          />
+        ))}
+      </div>
+    </Modal>
+  );
+}
+
+export default DeviceSelectorModal;

package/src/modals/LocalicationModal.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { JsonEditor } from 'json-edit-react';
+import { Localication } from '../types/PreviewConfig';
+import Modal from './Modal';
+
+type LocalicationModalProps = {
+  data: Localication;
+  onChange: (next: Localication) => void;
+  onClose: () => void;
+};
+
+export function LocalicationModal({
+  data,
+  onChange,
+  onClose,
+}: LocalicationModalProps) {
+  const normalizedData = data ?? {};
+
+  return (
+    <Modal
+      onClose={onClose}
+      ariaLabelledBy="localication-modal-title"
+      className="modal--large modal--scrollable localication-modal"
+      contentClassName="localication-modal__content"
+    >
+      <div className="modal__header localication-modal__header">
+        <div className="localication-modal__header-main">
+          <h3 id="localication-modal-title" className="modal__title">
+            Localization data
+          </h3>
+          <p className="localication-modal__description">
+            Manage your translations directly from the JSON structure.
+          </p>
+        </div>
+        <button type="button" className="editor-button" onClick={onClose}>
+          Close
+        </button>
+      </div>
+      <div className="localication-modal__body">
+        <div className="localication-modal__editor">
+          <JsonEditor
+            rootName="localication"
+            data={normalizedData}
+            setData={(next) => onChange(next as Localication)}
+            className="localication-modal__json-editor"
+            maxWidth={'100%'}
+          />
+        </div>
+      </div>
+    </Modal>
+  );
+}
+
+export default LocalicationModal;