@developer_tribe/react-builder 1.1.0 → 1.2.1

package/src/modals/ColorModal.tsx

@@ -0,0 +1,503 @@
+import React, { useId, useMemo, useRef, useState } from 'react';
+import type { ProjectColorTokenMap, ProjectColors } from '../types/Project';
+import Modal from './Modal';
+
+const SAVED_COLORS_KEY = 'attributes-editor-saved-colors';
+
+type ColorOption = {
+  id: string;
+  label?: string;
+  value: string;
+  tokenLabel?: string;
+};
+
+type ColorGroup = {
+  title: string;
+  options: ColorOption[];
+  emptyMessage?: string;
+};
+
+type ColorModalProps = {
+  value?: string;
+  projectColors?: ProjectColors;
+  onSelect: (color: string) => void;
+  onClose: () => void;
+  onClear: () => void;
+};
+
+const formatTokenLabel = (token: string) =>
+  token
+    .split(/[_-]/g)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
+    .join(' ');
+
+type MapTokensOptions = {
+  groupKey?: string;
+  tokenLabelPrefix?: string;
+};
+
+const mapTokensToOptions = (
+  tokenMap?: ProjectColorTokenMap,
+  options?: MapTokensOptions,
+): ColorOption[] => {
+  if (!tokenMap) return [];
+  const prefix = options?.groupKey ?? 'group';
+  return Object.entries(tokenMap)
+    .filter(([, value]) => typeof value === 'string' && value.trim().length > 0)
+    .map(([token, value]) => {
+      const trimmedValue = value.trim();
+      const tokenLabel = options?.tokenLabelPrefix
+        ? `${options.tokenLabelPrefix}.${token}`
+        : undefined;
+      return {
+        id: `${prefix}-${token}`,
+        label: formatTokenLabel(token),
+        value: trimmedValue,
+        tokenLabel,
+      };
+    });
+};
+
+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);
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .filter((value) => typeof value === 'string')
+      .map((value) => value.trim().toLowerCase())
+      .filter(Boolean);
+  } catch {
+    return [];
+  }
+};
+
+const persistSavedColors = (colors: string[]) => {
+  if (typeof window === 'undefined') return;
+  try {
+    window.localStorage.setItem(SAVED_COLORS_KEY, JSON.stringify(colors));
+  } catch {
+    // no-op
+  }
+};
+
+const STATIC_PREFIX = 'STATIC_COLORS.';
+const THEME_PREFIX = 'THEME_COLORS.';
+
+export const resolveProjectColorValue = (
+  candidate?: string,
+  projectColors?: ProjectColors,
+): string | undefined => {
+  if (!candidate || typeof candidate !== 'string' || !projectColors) {
+    return undefined;
+  }
+  const trimmedCandidate = candidate.trim();
+  if (!trimmedCandidate) return undefined;
+
+  if (trimmedCandidate.startsWith(STATIC_PREFIX)) {
+    const token = trimmedCandidate.slice(STATIC_PREFIX.length);
+    const resolved = projectColors.STATIC_COLORS?.[token];
+    return typeof resolved === 'string' && resolved.trim()
+      ? resolved.trim()
+      : undefined;
+  }
+
+  if (trimmedCandidate.startsWith(THEME_PREFIX)) {
+    const remainder = trimmedCandidate.slice(THEME_PREFIX.length);
+    if (!remainder) return undefined;
+    const themeParts = remainder.split('.');
+    if (themeParts.length === 1) {
+      const token = themeParts[0];
+      const themes = projectColors.THEME_COLORS;
+      if (!themes) return undefined;
+      for (const themeTokens of Object.values(themes)) {
+        const resolved = themeTokens?.[token];
+        if (typeof resolved === 'string' && resolved.trim()) {
+          return resolved.trim();
+        }
+      }
+      return undefined;
+    }
+    const [themeName, ...tokenSegments] = themeParts;
+    const token = tokenSegments.join('.');
+    if (!themeName || !token) return undefined;
+    const themeTokens = projectColors.THEME_COLORS?.[themeName];
+    const resolved = themeTokens?.[token];
+    return typeof resolved === 'string' && resolved.trim()
+      ? resolved.trim()
+      : undefined;
+  }
+
+  return undefined;
+};
+
+export function ColorModal({
+  value,
+  projectColors,
+  onSelect,
+  onClose,
+  onClear,
+}: ColorModalProps) {
+  const [savedColors, setSavedColors] = useState<string[]>(() =>
+    readSavedColors(),
+  );
+  const [useColorNames, setUseColorNames] = useState(true);
+  const colorInputRef = useRef<HTMLInputElement | null>(null);
+  const colorNameToggleId = useId();
+  const colorPickerInputId = useId();
+
+  const selectedColorPreview = useMemo(
+    () => resolveProjectColorValue(value, projectColors) ?? value,
+    [value, projectColors],
+  );
+
+  const projectColorGroups = useMemo<ColorGroup[]>(() => {
+    if (!projectColors) return [];
+    const groups: ColorGroup[] = [];
+
+    const staticOptions = mapTokensToOptions(projectColors.STATIC_COLORS, {
+      groupKey: 'static',
+      tokenLabelPrefix: 'STATIC_COLORS',
+    });
+    if (staticOptions.length) {
+      groups.push({
+        title: 'Static colors',
+        options: staticOptions,
+        emptyMessage: 'No static colors defined.',
+      });
+    }
+
+    const themeColors = projectColors.THEME_COLORS ?? {};
+    Object.entries(themeColors).forEach(([themeName, themeTokens]) => {
+      const options = mapTokensToOptions(themeTokens, {
+        groupKey: `theme-${themeName || 'default'}`,
+        tokenLabelPrefix: 'THEME_COLORS',
+      });
+      if (!options.length) return;
+      const normalizedThemeName = themeName?.trim()
+        ? formatTokenLabel(themeName)
+        : 'Theme';
+      groups.push({
+        title: `Theme: ${normalizedThemeName}`,
+        options,
+        emptyMessage: `No colors defined for ${normalizedThemeName}.`,
+      });
+    });
+
+    return groups;
+  }, [projectColors]);
+
+  const savedColorOptions = useMemo<ColorOption[]>(
+    () =>
+      savedColors.map((color, index) => ({
+        id: `saved-${index}-${color}`,
+        label: color,
+        value: color,
+      })),
+    [savedColors],
+  );
+
+  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];
+      persistSavedColors(next);
+      return next;
+    });
+    onSelect(picked);
+    onClose();
+  };
+
+  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) => {
+    const nextValue =
+      useColorNames && option.tokenLabel ? option.tokenLabel : option.value;
+    onSelect(nextValue);
+    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">
+          <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' }}
+            onKeyDown={handlePreviewKeyDown}
+          ></label>
+          <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>
+
+      <div className="color-modal__toggle">
+        <label
+          htmlFor={colorNameToggleId}
+          className="color-modal__toggle-label"
+        >
+          <input
+            id={colorNameToggleId}
+            type="checkbox"
+            className="color-modal__toggle-input"
+            checked={useColorNames}
+            onChange={(event) => setUseColorNames(event.target.checked)}
+          />
+          Use color names
+        </label>
+        <p className="color-modal__toggle-description">
+          Output tokens like STATIC_COLORS.PRIMARY instead of raw values.
+        </p>
+      </div>
+
+      {projectColorGroups.length ? (
+        projectColorGroups.map((group) => (
+          <ColorSection
+            key={group.title}
+            title={group.title}
+            options={group.options}
+            emptyMessage={group.emptyMessage}
+            activeValue={value}
+            onSelect={handleSelectColor}
+          />
+        ))
+      ) : (
+        <ColorSection
+          title="Project colors"
+          options={[]}
+          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={
+          <span className="color-modal__link-button color-modal__add-color">
+            Add color
+            <input
+              type="color"
+              className="color-modal__add-color-input"
+              onChange={handleColorPicked}
+              defaultValue="#000000"
+              aria-label="Add color"
+            />
+          </span>
+        }
+        activeValue={value}
+        onSelect={handleSelectColor}
+      />
+
+      <input
+        ref={colorInputRef}
+        id={colorPickerInputId}
+        type="color"
+        className="color-modal__input"
+        onChange={handleColorPicked}
+        defaultValue="#000000"
+        tabIndex={-1}
+      />
+    </Modal>
+  );
+}
+
+type ColorSectionProps = {
+  title: string;
+  options: ColorOption[];
+  emptyMessage?: string;
+  action?: React.ReactNode;
+  activeValue?: string;
+  onSelect: (option: ColorOption) => 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={option.id}
+              option={option}
+              isActive={
+                (option.tokenLabel && option.tokenLabel === activeValue) ||
+                option.value === activeValue
+              }
+              onSelect={() => onSelect(option)}
+            />
+          ))}
+        </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.tokenLabel
+          ? `${option.tokenLabel} - ${option.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/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: 'hsl(var(--card, var(--rb-card, 0 0% 100%)))',
+                  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>
+  );
+}