radtools 0.1.0

package/templates/devtools/components/PrimaryNavigationFooter.tsx

@@ -0,0 +1,254 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import type { Tab } from '../types';
+import { Input } from '@/components/ui/Input';
+import { Icon } from '@/components/icons';
+import { SEARCH_INDEX, type SearchableItem } from '../tabs/ComponentsTab/DesignSystemTab';
+import { TYPOGRAPHY_SEARCH_INDEX, type TypographySearchableItem } from '../lib/searchIndexes';
+
+interface PrimaryNavigationFooterProps {
+  activeTab: Tab;
+  onTabChange: (tab: Tab) => void;
+  // Search props
+  componentSearchQuery?: string;
+  onComponentSearchChange?: (query: string) => void;
+  typographySearchQuery?: string;
+  onTypographySearchChange?: (query: string) => void;
+}
+
+const TABS_CONFIG: { id: Tab; label: string; iconName?: string }[] = [
+  { id: 'variables', label: 'Variables', iconName: 'settings' },
+  { id: 'typography', label: 'Typography', iconName: 'file-written' },
+  { id: 'components', label: 'Components', iconName: 'wrench' },
+  { id: 'assets', label: 'Assets', iconName: 'folder-open' },
+  { id: 'mockStates', label: 'Mock States', iconName: 'wrench' },
+];
+
+export function PrimaryNavigationFooter({
+  activeTab,
+  onTabChange,
+  componentSearchQuery = '',
+  onComponentSearchChange,
+  typographySearchQuery = '',
+  onTypographySearchChange,
+}: PrimaryNavigationFooterProps) {
+  const [showAutocomplete, setShowAutocomplete] = useState(false);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const showSearch = activeTab === 'components' || activeTab === 'typography';
+  const searchQuery = activeTab === 'components' ? componentSearchQuery : typographySearchQuery;
+  const onSearchChange = activeTab === 'components' ? onComponentSearchChange : onTypographySearchChange;
+
+  // Get matching suggestions
+  const suggestions = searchQuery
+    ? (activeTab === 'components'
+        ? SEARCH_INDEX.filter((item) =>
+            item.text.toLowerCase().includes(searchQuery.toLowerCase())
+          ).slice(0, 10)
+        : TYPOGRAPHY_SEARCH_INDEX.filter((item) => {
+            const queryLower = searchQuery.toLowerCase();
+            return (
+              item.text.toLowerCase().includes(queryLower) ||
+              item.aliases.some((alias) => alias.toLowerCase().includes(queryLower)) ||
+              item.element.toLowerCase().includes(queryLower)
+            );
+          }).slice(0, 10))
+    : [];
+
+  // Close autocomplete when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setShowAutocomplete(false);
+      }
+    };
+
+    if (showSearch) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [showSearch]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (onSearchChange) {
+      onSearchChange(e.target.value);
+    }
+    setShowAutocomplete(true);
+    setSelectedSuggestionIndex(0);
+  };
+
+  const handleSelectSuggestion = (item: SearchableItem | TypographySearchableItem) => {
+    if (onSearchChange) {
+      onSearchChange(item.text);
+    }
+    setShowAutocomplete(false);
+    
+    // Scroll to section for typography
+    if (activeTab === 'typography' && 'sectionId' in item) {
+      const sectionElement = document.getElementById(`typography-${item.sectionId}`);
+      if (sectionElement) {
+        sectionElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      }
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Tab' && suggestions.length > 0 && showAutocomplete) {
+      e.preventDefault();
+      if (suggestions[selectedSuggestionIndex]) {
+        handleSelectSuggestion(suggestions[selectedSuggestionIndex] as SearchableItem | TypographySearchableItem);
+      }
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      setShowAutocomplete(true);
+      setSelectedSuggestionIndex((prev) =>
+        prev < suggestions.length - 1 ? prev + 1 : prev
+      );
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      setSelectedSuggestionIndex((prev) => (prev > 0 ? prev - 1 : 0));
+    } else if (e.key === 'Enter' && suggestions.length > 0 && showAutocomplete) {
+      e.preventDefault();
+      if (suggestions[selectedSuggestionIndex]) {
+        handleSelectSuggestion(suggestions[selectedSuggestionIndex] as SearchableItem | TypographySearchableItem);
+      }
+    } else if (e.key === 'Escape') {
+      setShowAutocomplete(false);
+    }
+  };
+
+  const highlightText = (text: string, query: string) => {
+    const index = text.toLowerCase().indexOf(query.toLowerCase());
+    if (index === -1) return text;
+    return (
+      <>
+        {text.substring(0, index)}
+        <span className="bg-sun-yellow">{text.substring(index, index + query.length)}</span>
+        {text.substring(index + query.length)}
+      </>
+    );
+  };
+
+  return (
+    <div className="flex items-center justify-between gap-4 px-2 py-2 bg-warm-cloud border-t border-black">
+      {/* Left: Primary Tabs */}
+      <div className="flex gap-1 items-center overflow-x-auto">
+        {TABS_CONFIG.map((tab) => (
+          <button
+            key={tab.id}
+            type="button"
+            onClick={() => onTabChange(tab.id)}
+            className={`flex items-center justify-center gap-2 px-4 py-2 font-joystix text-xs uppercase cursor-pointer select-none text-black transition-all duration-200 ease-out relative border border-black rounded-sm flex-none ${
+              activeTab === tab.id ? 'bg-sun-yellow' : 'bg-transparent hover:bg-black/5'
+            }`}
+          >
+            {tab.iconName && <Icon name={tab.iconName} size={14} />}
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Right: Search (only for Components and Typography) */}
+      {showSearch && (
+        <div className="relative flex-shrink-0 w-fit" ref={containerRef}>
+          <Input
+            ref={inputRef}
+            type="text"
+            iconName="search"
+            placeholder={
+              activeTab === 'components'
+                ? 'Search components...'
+                : 'Search typography (H1, Heading 1, P, Paragraph...)'
+            }
+            value={searchQuery}
+            onChange={handleInputChange}
+            onKeyDown={handleKeyDown}
+            onFocus={() => setShowAutocomplete(true)}
+          />
+          {/* Autocomplete */}
+          {showAutocomplete && suggestions.length > 0 && (
+            <div className="absolute z-50 w-full mt-1 bg-warm-cloud border border-black rounded-sm shadow-[4px_4px_0_0_var(--color-black)] max-h-64 overflow-y-auto bottom-full mb-1">
+              {suggestions.map((item, index) => {
+                if (activeTab === 'components') {
+                  const componentItem = item as SearchableItem;
+                  const SECTION_TITLES: Record<string, string> = {
+                    buttons: 'Buttons',
+                    cards: 'Cards',
+                    forms: 'Forms',
+                    feedback: 'Feedback',
+                    navigation: 'Navigation',
+                    overlays: 'Overlays',
+                  };
+                  const sectionTitle = SECTION_TITLES[componentItem.sectionId];
+                  const isSubsection = componentItem.subsectionTitle !== undefined;
+                  const displayTitle = isSubsection ? componentItem.subsectionTitle : sectionTitle;
+
+                  return (
+                    <button
+                      key={`${componentItem.sectionId}-${componentItem.text}-${index}`}
+                      type="button"
+                      onClick={() => {
+                        if (onSearchChange) onSearchChange(componentItem.text);
+                        setShowAutocomplete(false);
+                      }}
+                      className={`w-full text-left px-3 py-2 font-mondwest text-sm transition-colors ${
+                        index === selectedSuggestionIndex
+                          ? 'bg-sun-yellow text-black'
+                          : 'bg-warm-cloud text-black hover:bg-black/5'
+                      } ${isSubsection ? 'pl-6' : ''}`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="flex flex-col gap-0.5">
+                          {displayTitle && (
+                            <span className="font-joystix text-xs font-bold text-black/60 uppercase">
+                              {displayTitle}
+                            </span>
+                          )}
+                          <span>{highlightText(componentItem.text, searchQuery)}</span>
+                        </div>
+                        <span className="text-xs text-black/40 uppercase">{componentItem.type}</span>
+                      </div>
+                    </button>
+                  );
+                } else {
+                  const typographyItem = item as TypographySearchableItem;
+                  return (
+                    <button
+                      key={`${typographyItem.sectionId}-${typographyItem.text}-${index}`}
+                      type="button"
+                      onClick={() => handleSelectSuggestion(typographyItem)}
+                      className={`w-full text-left px-3 py-2 font-mondwest text-sm transition-colors ${
+                        index === selectedSuggestionIndex
+                          ? 'bg-sun-yellow text-black'
+                          : 'bg-warm-cloud text-black hover:bg-black/5'
+                      }`}
+                    >
+                      <div className="flex items-center justify-between">
+                        <div className="flex flex-col gap-0.5">
+                          <span className="font-joystix text-xs font-bold text-black/60 uppercase">
+                            {typographyItem.sectionId}
+                          </span>
+                          <span>{highlightText(typographyItem.text, searchQuery)}</span>
+                        </div>
+                        <span className="text-xs text-black/40 uppercase font-mono">
+                          {`<${typographyItem.element}>`}
+                        </span>
+                      </div>
+                    </button>
+                  );
+                }
+              })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+

package/templates/devtools/components/SearchableColorDropdown.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import React, { useState, useRef, useEffect, useMemo } from 'react';
+import type { BaseColor } from '../types';
+
+interface SearchableColorDropdownProps {
+  /** Available base colors to select from */
+  colors: BaseColor[];
+  /** Currently selected base color ID */
+  value?: string;
+  /** Placeholder text when no value selected */
+  placeholder?: string;
+  /** Change handler - receives the selected BaseColor ID */
+  onChange?: (colorId: string) => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Additional classes */
+  className?: string;
+}
+
+/**
+ * Searchable dropdown for selecting base colors
+ * - Search by display name or hex value
+ * - Shows color swatch preview for each option
+ */
+export function SearchableColorDropdown({
+  colors,
+  value,
+  placeholder = 'Select color...',
+  onChange,
+  disabled = false,
+  className = '',
+}: SearchableColorDropdownProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+        setSearchQuery('');
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  // Focus input when dropdown opens
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  // Find selected color
+  const selectedColor = colors.find(c => c.id === value);
+
+  // Filter colors by search query (name or hex)
+  const filteredColors = useMemo(() => {
+    if (!searchQuery.trim()) return colors;
+    
+    const query = searchQuery.toLowerCase();
+    return colors.filter(color => 
+      color.displayName.toLowerCase().includes(query) ||
+      color.name.toLowerCase().includes(query) ||
+      color.value.toLowerCase().includes(query)
+    );
+  }, [colors, searchQuery]);
+
+  // Group colors by category
+  const groupedColors = useMemo(() => {
+    const brand = filteredColors.filter(c => c.category === 'brand');
+    const neutral = filteredColors.filter(c => c.category === 'neutral');
+    return { brand, neutral };
+  }, [filteredColors]);
+
+  const handleSelect = (colorId: string) => {
+    onChange?.(colorId);
+    setIsOpen(false);
+    setSearchQuery('');
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      setIsOpen(false);
+      setSearchQuery('');
+    }
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`relative w-full ${className}`}
+    >
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`
+          flex items-center justify-between gap-2
+          w-full h-10 px-3
+          font-mondwest text-base
+          bg-warm-cloud text-black
+          border rounded-sm
+          border-black
+          ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+          ${isOpen ? 'shadow-[0_3px_0_0_var(--color-black)] -translate-y-0.5' : 'shadow-[0_1px_0_0_var(--color-black)]'}
+        `}
+      >
+        <div className="flex items-center gap-2 min-w-0">
+          {selectedColor && (
+            <div
+              className="w-4 h-4 rounded-xs border border-black flex-shrink-0"
+              style={{ backgroundColor: selectedColor.value }}
+            />
+          )}
+          <span className={`truncate ${selectedColor ? 'text-black' : 'text-black/40'}`}>
+            {selectedColor?.displayName || placeholder}
+          </span>
+        </div>
+        <span className={`text-black flex-shrink-0 ${isOpen ? 'rotate-180' : ''}`}>▼</span>
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div
+          className={`
+            absolute z-50 top-full left-0 right-0 mt-1
+            bg-warm-cloud
+            border border-black
+            rounded-sm
+            shadow-[2px_2px_0_0_var(--color-black)]
+            overflow-hidden
+            max-h-[300px] flex flex-col
+          `}
+          onKeyDown={handleKeyDown}
+        >
+          {/* Search Input */}
+          <div className="p-2 border-b" style={{ borderColor: 'var(--border-black-20)' }}>
+            <input
+              ref={inputRef}
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="Search by name or hex..."
+              className="
+                w-full h-8 px-2
+                font-mondwest text-sm
+                bg-white text-black
+                border border-black rounded-sm
+                outline-none
+                placeholder:text-black/40
+              "
+            />
+          </div>
+
+          {/* Options List */}
+          <div className="overflow-y-auto flex-1">
+            {filteredColors.length === 0 ? (
+              <div className="px-3 py-2 text-black/50 font-mondwest text-base">
+                No colors found
+              </div>
+            ) : (
+              <>
+                {/* Brand Colors */}
+                {groupedColors.brand.length > 0 && (
+                  <div>
+                    <div 
+                      className="px-3 py-1 text-black/50 font-joystix text-xs uppercase tracking-wider"
+                      style={{ backgroundColor: 'var(--border-black-10)' }}
+                    >
+                      Brand
+                    </div>
+                    {groupedColors.brand.map((color) => (
+                      <ColorOption
+                        key={color.id}
+                        color={color}
+                        isSelected={color.id === value}
+                        onSelect={handleSelect}
+                      />
+                    ))}
+                  </div>
+                )}
+
+                {/* Neutral Colors */}
+                {groupedColors.neutral.length > 0 && (
+                  <div>
+                    <div 
+                      className="px-3 py-1 text-black/50 font-joystix text-xs uppercase tracking-wider"
+                      style={{ backgroundColor: 'var(--border-black-10)' }}
+                    >
+                      Neutrals
+                    </div>
+                    {groupedColors.neutral.map((color) => (
+                      <ColorOption
+                        key={color.id}
+                        color={color}
+                        isSelected={color.id === value}
+                        onSelect={handleSelect}
+                      />
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+// Individual color option
+function ColorOption({
+  color,
+  isSelected,
+  onSelect,
+}: {
+  color: BaseColor;
+  isSelected: boolean;
+  onSelect: (id: string) => void;
+}) {
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(color.id)}
+      className={`
+        w-full px-3 py-2
+        flex items-center gap-2
+        font-mondwest text-base text-left
+        ${isSelected ? 'bg-sun-yellow text-black' : 'text-black hover:bg-sun-yellow'}
+        cursor-pointer
+      `}
+    >
+      {/* Color Swatch */}
+      <div
+        className="w-4 h-4 rounded-xs border border-black flex-shrink-0"
+        style={{ backgroundColor: color.value }}
+      />
+      {/* Name */}
+      <span className="flex-1 truncate">{color.displayName}</span>
+      {/* Hex Value */}
+      <span className="text-sm text-black/50 font-mono uppercase">{color.value}</span>
+    </button>
+  );
+}
+
+export default SearchableColorDropdown;
+

package/templates/devtools/components/SecondaryNavigation.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import type { Tab } from '../types';
+import { ComponentsSecondaryNav } from './ComponentsSecondaryNav';
+
+interface SecondaryNavigationProps {
+  activeTab: Tab;
+  // Components tab props
+  componentSubTab?: string;
+  onComponentSubTabChange?: (tab: string) => void;
+  componentTabs?: Array<{ id: string; label: string }>;
+  onAddComponentFolder?: (folderName: string) => void;
+}
+
+export function SecondaryNavigation({
+  activeTab,
+  componentSubTab,
+  onComponentSubTabChange,
+  componentTabs,
+  onAddComponentFolder,
+}: SecondaryNavigationProps) {
+  // Only show secondary nav for Components tab
+  if (activeTab === 'components') {
+    return (
+      <ComponentsSecondaryNav
+        activeSubTab={componentSubTab || 'design-system'}
+        onSubTabChange={onComponentSubTabChange || (() => {})}
+        tabs={componentTabs || []}
+        onAddFolder={onAddComponentFolder || (() => {})}
+      />
+    );
+  }
+
+  return null;
+}
+

package/templates/devtools/components/TokenDropdown.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useDevToolsStore } from '../store';
+
+interface TokenDropdownProps {
+  value: string;
+  onChange: (value: string) => void;
+  label?: string;
+}
+
+export function TokenDropdown({ value, onChange, label }: TokenDropdownProps) {
+  const baseColors = useDevToolsStore((state) => state.baseColors);
+
+  return (
+    <div className="flex items-center gap-2">
+      {label && (
+        <label className="font-joystix text-xs uppercase text-black/60 min-w-[60px]">{label}</label>
+      )}
+      <select
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        className="flex-1 px-2 py-1.5 font-mondwest text-base bg-warm-cloud border border-black rounded-sm text-black focus:outline-none focus:ring-2 focus:ring-tertiary cursor-pointer"
+      >
+        <option value="">Select a color...</option>
+        <optgroup label="Brand Colors">
+          {baseColors
+            .filter((c) => c.category === 'brand')
+            .map((color) => (
+              <option key={color.id} value={`--brand-${color.name}`}>
+                {color.name} ({color.value})
+              </option>
+            ))}
+        </optgroup>
+        <optgroup label="Neutral Colors">
+          {baseColors
+            .filter((c) => c.category === 'neutral')
+            .map((color) => (
+              <option key={color.id} value={`--neutral-${color.name}`}>
+                {color.name} ({color.value})
+              </option>
+            ))}
+        </optgroup>
+      </select>
+    </div>
+  );
+}
+