@developer_tribe/react-builder 1.0.2 → 1.0.4

package/src/modals/ColorModal.tsx

@@ -1,39 +1,75 @@
-import React, { useMemo, useRef, useState } from 'react';
+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';
 
-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 = {
+  id: string;
   label?: string;
   value: string;
+  tokenLabel?: string;
+};
+
+type ColorGroup = {
+  title: string;
+  options: ColorOption[];
+  emptyMessage?: string;
 };
 
 type ColorModalProps = {
   value?: string;
-  projectColors?: 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 : [];
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .filter((value) => typeof value === 'string')
+      .map((value) => value.trim().toLowerCase())
+      .filter(Boolean);
   } catch {
     return [];
   }
@@ -48,9 +84,59 @@ const persistSavedColors = (colors: string[]) => {
   }
 };
 
+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 = [],
+  projectColors,
   onSelect,
   onClose,
   onClear,
@@ -58,39 +144,66 @@ export function ColorModal({
   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 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;
+  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.',
       });
-  }, [projectColors]);
+    }
 
-  const projectColorOptions = useMemo<ColorOption[]>(
-    () => uniqueProjectColors.map((color) => ({ value: color })),
-    [uniqueProjectColors],
-  );
+    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) => ({ value: color })),
+    () =>
+      savedColors.map((color, index) => ({
+        id: `saved-${index}-${color}`,
+        label: color,
+        value: color,
+      })),
     [savedColors],
   );
 
-  const handleAddColorClick = () => {
-    colorInputRef.current?.click();
-  };
-
-  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];
@@ -99,11 +212,91 @@ export function ColorModal({
     });
     onSelect(picked);
     onClose();
-    event.target.value = '';
   };
 
-  const handleSelectColor = (hex: string) => {
-    onSelect(hex);
+  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();
   };
 
@@ -124,11 +317,16 @@ export function ColorModal({
 
       <div className="color-modal__selected">
         <div className="color-modal__selected-info">
-          <span
-            aria-hidden
+          <label
+            htmlFor={colorPickerInputId}
+            role="button"
+            aria-label="Open color picker"
+            tabIndex={0}
+            title="Pick a color"
             className="color-modal__selected-preview"
-            style={{ background: value ?? 'transparent' }}
-          />
+            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>
@@ -145,44 +343,74 @@ export function ColorModal({
         ) : null}
       </div>
 
-      <ColorSection
-        title="Project colors"
-        options={projectColorOptions}
-        emptyMessage="No project colors detected yet."
-        activeValue={value}
-        onSelect={handleSelectColor}
-      />
+      <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}
-          >
+          <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}
       />
 
-      <ColorSection
-        title="Popular colors"
-        options={POPULAR_COLORS}
-        emptyMessage="Popular palettes unavailable."
-        activeValue={value}
-        onSelect={handleSelectColor}
-      />
-
       <input
         ref={colorInputRef}
+        id={colorPickerInputId}
         type="color"
         className="color-modal__input"
         onChange={handleColorPicked}
+        defaultValue="#000000"
+        tabIndex={-1}
       />
     </Modal>
   );
@@ -194,7 +422,7 @@ type ColorSectionProps = {
   emptyMessage?: string;
   action?: React.ReactNode;
   activeValue?: string;
-  onSelect: (value: string) => void;
+  onSelect: (option: ColorOption) => void;
 };
 
 function ColorSection({
@@ -215,10 +443,13 @@ function ColorSection({
         <div className="color-section__swatches">
           {options.map((option) => (
             <ColorSwatch
-              key={`${title}-${option.value}`}
+              key={option.id}
               option={option}
-              isActive={option.value === activeValue}
-              onSelect={() => onSelect(option.value)}
+              isActive={
+                (option.tokenLabel && option.tokenLabel === activeValue) ||
+                option.value === activeValue
+              }
+              onSelect={() => onSelect(option)}
             />
           ))}
         </div>
@@ -260,7 +491,11 @@ function ColorSwatch({ option, isActive, onSelect }: ColorSwatchProps) {
       <span className="color-modal__swatch-label">
         {option.label ?? option.value}
       </span>
-      <span className="color-modal__swatch-value">{option.value}</span>
+      <span className="color-modal__swatch-value">
+        {option.tokenLabel
+          ? `${option.tokenLabel} - ${option.value}`
+          : option.value}
+      </span>
     </button>
   );
 }

package/src/modals/LocalicationModal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { JsonEditor } from 'json-edit-react';
+import { JsonTextEditor } from '../components/JsonTextEditor';
 import { Localication } from '../types/PreviewConfig';
 import Modal from './Modal';
 
@@ -38,12 +38,11 @@ export function LocalicationModal({
       </div>
       <div className="localication-modal__body">
         <div className="localication-modal__editor">
-          <JsonEditor
+          <JsonTextEditor
             rootName="localication"
-            data={normalizedData}
-            setData={(next) => onChange(next as Localication)}
+            value={normalizedData}
+            onChange={(next) => onChange(next as Localication)}
             className="localication-modal__json-editor"
-            maxWidth={'100%'}
           />
         </div>
       </div>

package/src/modals/Modal.tsx

@@ -1,4 +1,5 @@
 import React, { useEffect } from 'react';
+import { createPortal } from 'react-dom';
 
 type ModalProps = {
   onClose: () => void;
@@ -33,7 +34,7 @@ export function Modal({
     return () => window.removeEventListener('keydown', handleKeyDown);
   }, [closeOnEsc, onClose]);
 
-  return (
+  const modalNode = (
     <div
       className={`modal${className ? ` ${className}` : ''}`}
       role="dialog"
@@ -52,6 +53,12 @@ export function Modal({
       </div>
     </div>
   );
+
+  if (typeof document === 'undefined') {
+    return modalNode;
+  }
+
+  return createPortal(modalNode, document.body);
 }
 
 export default Modal;