@developer_tribe/react-builder 1.0.1 → 1.0.3

package/src/modals/ColorModal.tsx

@@ -0,0 +1,425 @@
+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);
+    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
+  }
+};
+
+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 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 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;
+    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 = (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">
+          <span
+            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}
+          />
+          <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={
+          <button
+            type="button"
+            className="color-modal__link-button"
+            onClick={handleAddColorClick}
+          >
+            Add color
+          </button>
+        }
+        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: (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/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;

package/src/modals/Modal.tsx

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+
+type ModalProps = {
+  onClose: () => void;
+  ariaLabelledBy?: string;
+  children: React.ReactNode;
+  className?: string;
+  contentClassName?: string;
+  closeOnOverlayClick?: boolean;
+  closeOnEsc?: boolean;
+};
+
+export function Modal({
+  onClose,
+  ariaLabelledBy,
+  children,
+  className,
+  contentClassName,
+  closeOnOverlayClick = true,
+  closeOnEsc = true,
+}: ModalProps) {
+  useEffect(() => {
+    if (!closeOnEsc) return undefined;
+    if (typeof window === 'undefined') return undefined;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [closeOnEsc, onClose]);
+
+  return (
+    <div
+      className={`modal${className ? ` ${className}` : ''}`}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={ariaLabelledBy}
+    >
+      <div
+        className="modal__overlay"
+        onClick={closeOnOverlayClick ? onClose : undefined}
+      />
+      <div
+        className={`modal__content${contentClassName ? ` ${contentClassName}` : ''}`}
+        role="document"
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Modal;

package/src/modals/index.ts

@@ -0,0 +1,5 @@
+export { default as Modal } from './Modal';
+export { AddComponentModal } from './AddComponentModal';
+export { DeviceSelectorModal } from './DeviceSelectorModal';
+export { ColorModal } from './ColorModal';
+export { LocalicationModal } from './LocalicationModal';