@developer_tribe/react-builder 1.0.2 → 1.0.3

package/src/modals/ColorModal.tsx

@@ -1,32 +1,64 @@
-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 {
@@ -48,9 +80,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,29 +140,58 @@ export function ColorModal({
   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 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],
   );
 
@@ -88,6 +199,14 @@ export function ColorModal({
     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;
@@ -102,8 +221,10 @@ export function ColorModal({
     event.target.value = '';
   };
 
-  const handleSelectColor = (hex: string) => {
-    onSelect(hex);
+  const handleSelectColor = (option: ColorOption) => {
+    const nextValue =
+      useColorNames && option.tokenLabel ? option.tokenLabel : option.value;
+    onSelect(nextValue);
     onClose();
   };
 
@@ -125,9 +246,14 @@ export function ColorModal({
       <div className="color-modal__selected">
         <div className="color-modal__selected-info">
           <span
-            aria-hidden
+            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' }}
+            onClick={handleAddColorClick}
+            onKeyDown={handlePreviewKeyDown}
           />
           <div>
             <p className="color-modal__selected-label">Selected color</p>
@@ -145,13 +271,45 @@ 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"
@@ -170,14 +328,6 @@ export function ColorModal({
         onSelect={handleSelectColor}
       />
 
-      <ColorSection
-        title="Popular colors"
-        options={POPULAR_COLORS}
-        emptyMessage="Popular palettes unavailable."
-        activeValue={value}
-        onSelect={handleSelectColor}
-      />
-
       <input
         ref={colorInputRef}
         type="color"
@@ -194,7 +344,7 @@ type ColorSectionProps = {
   emptyMessage?: string;
   action?: React.ReactNode;
   activeValue?: string;
-  onSelect: (value: string) => void;
+  onSelect: (option: ColorOption) => void;
 };
 
 function ColorSection({
@@ -215,10 +365,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 +413,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>
   );
 }