radtools 0.1.0

package/templates/devtools/components/TypographyFooter.tsx

@@ -0,0 +1,145 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Input } from '@/components/ui/Input';
+import { TYPOGRAPHY_SEARCH_INDEX, type TypographySearchableItem } from '../lib/searchIndexes';
+
+interface TypographyFooterProps {
+  searchQuery: string;
+  onSearchChange: (query: string) => void;
+}
+
+export function TypographyFooter({
+  searchQuery,
+  onSearchChange,
+}: TypographyFooterProps) {
+  const [showAutocomplete, setShowAutocomplete] = useState(false);
+  const [selectedSuggestionIndex, setSelectedSuggestionIndex] = useState(0);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Filter suggestions based on search query
+  const suggestions = searchQuery
+    ? 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);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onSearchChange(e.target.value);
+    setShowAutocomplete(true);
+    setSelectedSuggestionIndex(0);
+  };
+
+  const handleSelectSuggestion = (item: TypographySearchableItem) => {
+    onSearchChange(item.text);
+    setShowAutocomplete(false);
+    // Scroll to the section
+    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]);
+      }
+    } 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]);
+      }
+    } 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-end px-4 py-2 bg-warm-cloud border-t border-black">
+      <div className="relative w-80" ref={containerRef}>
+        <Input
+          ref={inputRef}
+          type="text"
+          placeholder="Search typography (H1, Heading 1, P, Paragraph...)"
+          value={searchQuery}
+          onChange={handleInputChange}
+          onKeyDown={handleKeyDown}
+          onFocus={() => setShowAutocomplete(true)}
+        />
+        {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) => (
+              <button
+                key={`${item.sectionId}-${item.text}-${index}`}
+                type="button"
+                onClick={() => handleSelectSuggestion(item)}
+                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">
+                      {item.sectionId}
+                    </span>
+                    <span>{highlightText(item.text, searchQuery)}</span>
+                  </div>
+                  <span className="text-xs text-black/40 uppercase font-mono">
+                    {`<${item.element}>`}
+                  </span>
+                </div>
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+

package/templates/devtools/hooks/useMockState.ts

@@ -0,0 +1,16 @@
+import { useDevToolsStore } from '../store';
+
+export function useMockState<T = unknown>(category: string): T | undefined {
+  // In production, always return undefined
+  if (process.env.NODE_ENV === 'production') {
+    return undefined;
+  }
+
+  const mockStates = useDevToolsStore((state) => state.mockStates);
+  const activeState = mockStates.find(
+    (s) => s.category === category && s.active
+  );
+
+  return activeState?.values as T | undefined;
+}
+

package/templates/devtools/index.ts

@@ -0,0 +1,17 @@
+// Main exports
+export { DevToolsProvider } from './DevToolsProvider';
+export { useDevToolsStore } from './store';
+export { useMockState } from './hooks/useMockState';
+
+// Re-export types
+export type {
+  BrandColor,
+  ColorMode,
+  DiscoveredComponent,
+  PropDefinition,
+  AssetFile,
+  AssetFolder,
+  MockState,
+  Tab,
+} from './types';
+

package/templates/devtools/lib/componentScanner.ts

@@ -0,0 +1,78 @@
+import type { DiscoveredComponent, PropDefinition } from '../types';
+
+/**
+ * Parse a component file and extract metadata
+ * This runs on the server side via API route
+ */
+export function parseComponent(content: string, filePath: string): DiscoveredComponent | null {
+  // Check for default export
+  const hasDefaultExport = /export\s+default\s+function\s+(\w+)/.test(content) ||
+                           /export\s+default\s+(\w+)/.test(content);
+  
+  if (!hasDefaultExport) return null;
+
+  // Extract component name
+  const nameMatch = content.match(/export\s+default\s+function\s+(\w+)/);
+  const name = nameMatch?.[1] || 'Unknown';
+
+  // Extract props interface
+  const propsMatch = content.match(/interface\s+(\w+Props)\s*\{([^}]+)\}/);
+  const props: PropDefinition[] = [];
+  
+  if (propsMatch) {
+    const propsBody = propsMatch[2];
+    const propLines = propsBody.split('\n').filter((l) => l.trim());
+    
+    for (const line of propLines) {
+      const propMatch = line.match(/(\w+)(\?)?:\s*([^;]+)/);
+      if (propMatch) {
+        props.push({
+          name: propMatch[1],
+          type: propMatch[3].trim(),
+          required: !propMatch[2],
+        });
+      }
+    }
+  }
+
+  // Try inline type annotation if no interface found
+  if (props.length === 0) {
+    const inlineMatch = content.match(/\{\s*([^}]+)\s*\}\s*:\s*\{([^}]+)\}/);
+    if (inlineMatch) {
+      const propsBody = inlineMatch[2];
+      const propLines = propsBody.split(/[,;]/).filter((l) => l.trim());
+      
+      for (const line of propLines) {
+        const propMatch = line.trim().match(/(\w+)(\?)?:\s*(.+)/);
+        if (propMatch) {
+          props.push({
+            name: propMatch[1],
+            type: propMatch[3].trim(),
+            required: !propMatch[2],
+          });
+        }
+      }
+    }
+  }
+
+  // Extract default values from destructuring
+  const destructureMatch = content.match(/\{\s*([^}]+)\s*\}\s*:\s*(?:\w+Props|\{[^}]+\})/);
+  if (destructureMatch) {
+    const destructureBody = destructureMatch[1];
+    for (const prop of props) {
+      const defaultMatch = destructureBody.match(
+        new RegExp(`${prop.name}\\s*=\\s*(['"\`]?[^,}]+['"\`]?)`)
+      );
+      if (defaultMatch) {
+        prop.defaultValue = defaultMatch[1].trim();
+      }
+    }
+  }
+
+  return {
+    name,
+    path: filePath,
+    props,
+  };
+}
+