radtools 0.1.0

package/templates/devtools/tabs/ComponentsTab/DynamicFolderTab.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useDevToolsStore } from '../../store';
+import { ComponentList } from './ComponentList';
+import { Button } from '@/components/ui/Button';
+import type { DiscoveredComponent } from '../../types';
+
+interface DynamicFolderTabProps {
+  folderName: string;
+}
+
+export function DynamicFolderTab({ folderName }: DynamicFolderTabProps) {
+  const { components, isLoading, scanComponents } = useDevToolsStore();
+  const [folderComponents, setFolderComponents] = useState<DiscoveredComponent[]>([]);
+
+  // Scan components from this specific folder
+  useEffect(() => {
+    const scanFolder = async () => {
+      try {
+        const response = await fetch(`/api/devtools/components?folder=${encodeURIComponent(folderName)}`);
+        const data = await response.json();
+        setFolderComponents(data.components || []);
+      } catch (error) {
+        setFolderComponents([]);
+      }
+    };
+
+    scanFolder();
+  }, [folderName]);
+
+  // Try to import preview file if it exists
+  const [PreviewContent, setPreviewContent] = useState<React.ComponentType | null>(null);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const loadPreview = async () => {
+      try {
+        // Dynamic import of preview file
+        const previewModule = await import(`./previews/${folderName}.tsx`);
+        setPreviewContent(() => previewModule.default || previewModule.Preview);
+        setPreviewError(null);
+      } catch (error) {
+        // Preview file doesn't exist yet - that's fine
+        setPreviewContent(null);
+        setPreviewError(null);
+      }
+    };
+
+    loadPreview();
+  }, [folderName]);
+
+  return (
+    <div className="flex flex-col h-full overflow-auto pt-4 pb-4 pl-4 pr-2 bg-[var(--color-white)] border border-black rounded space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h2 className="font-joystix text-sm uppercase text-black">{folderName}</h2>
+        <Button
+          variant="outline"
+          size="sm"
+          iconName="refresh"
+          onClick={async () => {
+            try {
+              const response = await fetch(`/api/devtools/components?folder=${encodeURIComponent(folderName)}`);
+              const data = await response.json();
+              setFolderComponents(data.components || []);
+            } catch (error) {
+              // Failed to refresh
+            }
+          }}
+          disabled={isLoading}
+        >
+          {isLoading ? 'Scanning...' : 'Refresh'}
+        </Button>
+      </div>
+
+      {/* Stats */}
+      <div className="flex gap-4 font-mondwest text-base text-black/60">
+        <span>{folderComponents.length} components found</span>
+        <span>in /components/{folderName}/</span>
+      </div>
+
+      {/* Loading State */}
+      {isLoading && folderComponents.length === 0 && (
+        <div className="text-center py-8 text-black/60 font-mondwest text-base">
+          Scanning components...
+        </div>
+      )}
+
+      {/* Preview Content (if exists) */}
+      {PreviewContent && (
+        <div className="mb-6">
+          <PreviewContent />
+        </div>
+      )}
+
+      {/* Component List */}
+      {!isLoading && folderComponents.length === 0 && (
+        <div className="text-center py-8">
+          <p className="text-black/60 font-mondwest text-base mb-2">No components found</p>
+          <p className="font-mondwest text-sm text-black/60">
+            Create components with default exports in /components/{folderName}/
+          </p>
+        </div>
+      )}
+
+      {folderComponents.length > 0 && (
+        <ComponentList components={folderComponents} folderName={folderName} />
+      )}
+    </div>
+  );
+}
+

package/templates/devtools/tabs/ComponentsTab/PropDisplay.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { Icon } from '@/components/icons';
+import type { DiscoveredComponent } from '../../types';
+
+interface PropDisplayProps {
+  component: DiscoveredComponent;
+}
+
+export function PropDisplay({ component }: PropDisplayProps) {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="font-joystix text-sm uppercase text-black">{component.name}</h3>
+        <span className="font-mondwest text-base text-black/60 font-mono">{component.path}</span>
+      </div>
+
+      {component.props.length > 0 ? (
+        <div className="border border-black rounded-md overflow-hidden">
+          <table className="w-full font-mondwest text-base">
+            <thead className="bg-black/10">
+              <tr>
+                <th className="text-left px-3 py-2 text-black/60 font-joystix text-xs uppercase">Prop</th>
+                <th className="text-left px-3 py-2 text-black/60 font-joystix text-xs uppercase">Type</th>
+                <th className="text-left px-3 py-2 text-black/60 font-joystix text-xs uppercase">Required</th>
+                <th className="text-left px-3 py-2 text-black/60 font-joystix text-xs uppercase">Default</th>
+              </tr>
+            </thead>
+            <tbody>
+              {component.props.map((prop) => (
+                <tr key={prop.name} className="border-t border-black" style={{ borderTopColor: 'var(--border-black-20)' }}>
+                  <td className="px-3 py-2 font-mono text-black">{prop.name}</td>
+                  <td className="px-3 py-2 font-mono text-black/60">{prop.type}</td>
+                  <td className="px-3 py-2">
+                    {prop.required ? (
+                      <Icon name="checkmark-filled" size={14} className="text-error-red" />
+                    ) : (
+                      <span className="text-black/60">—</span>
+                    )}
+                  </td>
+                  <td className="px-3 py-2 font-mono text-black/60">
+                    {prop.defaultValue || '—'}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      ) : (
+        <p className="font-mondwest text-base text-black/60 italic">No props defined for this component</p>
+      )}
+    </div>
+  );
+}
+

package/templates/devtools/tabs/ComponentsTab/index.tsx

@@ -0,0 +1,167 @@
+'use client';
+
+import { useState, useEffect, useMemo } from 'react';
+import { Tabs, TabList, TabTrigger, TabContent, useToast } from '@/components/ui';
+import { DesignSystemTab } from './DesignSystemTab';
+import { DynamicFolderTab } from './DynamicFolderTab';
+import { AddTabButton } from './AddTabButton';
+import { COMPONENT_TABS, type ComponentTabConfig } from './tabConfig';
+
+const STORAGE_KEY = 'devtools-dynamic-component-tabs';
+
+/**
+ * Load dynamic tabs from localStorage
+ */
+function loadDynamicTabs(): ComponentTabConfig[] {
+  if (typeof window === 'undefined') return [];
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Save dynamic tabs to localStorage
+ */
+function saveDynamicTabs(tabs: ComponentTabConfig[]) {
+  if (typeof window === 'undefined') return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(tabs));
+  } catch {
+    // Ignore storage errors
+  }
+}
+
+interface ComponentsTabProps {
+  activeSubTab?: string;
+  searchQuery?: string;
+  onTabsChange?: (tabs: Array<{ id: string; label: string }>) => void;
+  onAddFolder?: (folderName: string) => void;
+}
+
+export function ComponentsTab({
+  activeSubTab = 'design-system',
+  searchQuery = '',
+  onTabsChange,
+  onAddFolder,
+}: ComponentsTabProps) {
+  const [dynamicTabs, setDynamicTabs] = useState<ComponentTabConfig[]>([]);
+  const { addToast } = useToast();
+
+  // Load dynamic tabs on mount
+  useEffect(() => {
+    setDynamicTabs(loadDynamicTabs());
+  }, []);
+
+  // Memoize allTabs to prevent unnecessary re-renders
+  const allTabs = useMemo(() => [...COMPONENT_TABS, ...dynamicTabs], [dynamicTabs]);
+  
+  // Memoize the mapped tabs array to prevent unnecessary effect runs
+  const tabsForParent = useMemo(
+    () => allTabs.map((tab) => ({ id: tab.id, label: tab.label })),
+    [allTabs]
+  );
+  
+  // Notify parent of tabs change
+  useEffect(() => {
+    if (onTabsChange) {
+      onTabsChange(tabsForParent);
+    }
+  }, [tabsForParent, onTabsChange]);
+
+  const handleAddFolder = async (folderName: string) => {
+    // Validate folder name
+    if (!folderName || !/^[a-zA-Z0-9_-]+$/.test(folderName)) {
+      addToast({
+        title: 'Invalid folder name',
+        description: 'Folder name must contain only letters, numbers, underscores, or hyphens',
+        variant: 'warning',
+      });
+      return;
+    }
+
+    // Check if folder already exists
+    if (dynamicTabs.some((tab) => tab.id === `folder-${folderName}`)) {
+      addToast({
+        title: 'Folder exists',
+        description: 'A tab for this folder already exists',
+        variant: 'warning',
+      });
+      return;
+    }
+
+    try {
+      // Create folder via API
+      const response = await fetch('/api/devtools/components/create-folder', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ folderName }),
+      });
+
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Failed to create folder');
+      }
+
+      // Add new tab
+      const newTab: ComponentTabConfig = {
+        id: `folder-${folderName}`,
+        label: folderName,
+        description: `Components from /components/${folderName}/`,
+      };
+
+      const updatedTabs = [...dynamicTabs, newTab];
+      setDynamicTabs(updatedTabs);
+      saveDynamicTabs(updatedTabs);
+
+      // Tabs will be updated via useEffect that calls onTabsChange
+    } catch (error) {
+      console.error('Failed to create folder:', error);
+      addToast({
+        title: 'Failed to create folder',
+        description: error instanceof Error ? error.message : 'Unknown error',
+        variant: 'error',
+      });
+    }
+  };
+
+  // Expose handleAddFolder for footer access
+  useEffect(() => {
+    (window as any).__componentsTabAddFolder = handleAddFolder;
+    return () => {
+      delete (window as any).__componentsTabAddFolder;
+    };
+  }, [dynamicTabs]);
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Tab Content - no internal navigation */}
+      <div className="flex-1 overflow-hidden">
+        {allTabs.map((tab: ComponentTabConfig) => {
+          // Design system tab
+          if (tab.id === 'design-system' && activeSubTab === 'design-system') {
+            return (
+              <div key={tab.id} className="h-full pr-2 pl-2 pb-2 rounded">
+                <DesignSystemTab searchQuery={searchQuery} />
+              </div>
+            );
+          }
+
+          // Dynamic folder tabs
+          if (tab.id.startsWith('folder-') && activeSubTab === tab.id) {
+            const folderName = tab.id.replace('folder-', '');
+            return (
+              <div key={tab.id} className="h-full pr-2 pl-2 pb-2 rounded">
+                <DynamicFolderTab folderName={folderName} />
+              </div>
+            );
+          }
+
+          return null;
+        })}
+      </div>
+    </div>
+  );
+}

package/templates/devtools/tabs/ComponentsTab/previews/.gitkeep

@@ -0,0 +1,4 @@
+# Preview files for dynamic component folders
+# Each folder gets its own preview file (e.g., my-widgets.tsx)
+# These files follow the Section/Row/PropsDisplay pattern from DesignSystemTab.tsx
+

package/templates/devtools/tabs/ComponentsTab/previews/Rad_os.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+import React, { useState } from 'react';
+import { WindowTitleBar } from '@/components/Rad_os/WindowTitleBar';
+
+// ============================================================================
+// Section Component
+// ============================================================================
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="mb-6">
+      <h3
+        className="mb-3 border-b border-black/20 pb-2"
+      >
+        {title}
+      </h3>
+      <div className="space-y-3">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function PropsDisplay({ props }: { props: string }) {
+  return (
+    <code className="bg-black/5 px-2 py-1 rounded-sm block mt-2">
+      {props}
+    </code>
+  );
+}
+
+function Row({ children, props }: {
+  children: React.ReactNode;
+  props?: string;
+}) {
+  return (
+    <div>
+      <div className="flex flex-wrap items-center gap-2">
+        {children}
+      </div>
+      {props && <PropsDisplay props={props} />}
+    </div>
+  );
+}
+
+
+// ============================================================================
+// Preview Content
+// ============================================================================
+
+function WindowTitleBarContent() {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <div className="space-y-6">
+      <div className="p-4 border border-black bg-[var(--color-cream)] rounded flex flex-col gap-4 mb-4">
+        <h3>
+          Basic Usage
+        </h3>
+        <div className="flex flex-col gap-4">
+          <WindowTitleBar
+            title="My Application"
+            windowId="my-app"
+            onClose={() => setIsOpen(false)}
+            data-edit-scope="component-definition"
+            data-component="WindowTitleBar"
+          />
+          <PropsDisplay props='title: string, windowId: string, onClose: () => void' />
+          <WindowTitleBar
+            title="With Icon"
+            windowId="my-app-icon"
+            onClose={() => setIsOpen(false)}
+            iconName="home"
+          />
+          <PropsDisplay props='iconName?: string' />
+        </div>
+      </div>
+
+      <div className="p-4 border border-black bg-[var(--color-cream)] rounded flex flex-col gap-4 mb-4">
+        <h3>
+          Visibility Controls
+        </h3>
+        <div className="flex flex-col gap-4">
+          <WindowTitleBar
+            title="Hidden Title"
+            windowId="no-title"
+            onClose={() => {}}
+            showTitle={false}
+          />
+          <PropsDisplay props='showTitle={false}' />
+          <WindowTitleBar
+            title="No Copy Button"
+            windowId="no-copy"
+            onClose={() => {}}
+            showCopyButton={false}
+          />
+          <PropsDisplay props='showCopyButton={false}' />
+          <WindowTitleBar
+            title="No Close Button"
+            windowId="no-close"
+            onClose={() => {}}
+            showCloseButton={false}
+          />
+          <PropsDisplay props='showCloseButton={false}' />
+          <WindowTitleBar
+            title="Minimal"
+            windowId="minimal"
+            onClose={() => {}}
+            showTitle={false}
+            showCopyButton={false}
+            showCloseButton={false}
+          />
+          <PropsDisplay props='showTitle={false}, showCopyButton={false}, showCloseButton={false}' />
+          <WindowTitleBar
+            title="With Fullscreen"
+            windowId="with-fullscreen"
+            onClose={() => {}}
+            showFullscreenButton={true}
+            onFullscreen={() => alert('Fullscreen clicked!')}
+          />
+          <PropsDisplay props='showFullscreenButton={true}, onFullscreen: () => void' />
+        </div>
+      </div>
+
+      <div className="p-4 border border-black bg-[var(--color-cream)] rounded flex flex-col gap-4 mb-4">
+        <h3>
+          Help Button
+        </h3>
+        <div className="flex flex-col gap-4">
+          <WindowTitleBar
+            title="With Help"
+            windowId="with-help"
+            onClose={() => {}}
+            showHelpButton={true}
+            helpContent={
+              <div>
+                <p className="mb-2">This is the help content.</p>
+                <p>
+                  You can add any React content here to help users understand how to use this window.
+                </p>
+              </div>
+            }
+            helpTitle="Window Help"
+          />
+          <PropsDisplay props='showHelpButton={true}, helpContent: React.ReactNode, helpTitle?: string' />
+          <WindowTitleBar
+            title="Default Help"
+            windowId="default-help"
+            onClose={() => {}}
+            showHelpButton={true}
+          />
+          <PropsDisplay props='showHelpButton={true} (default help content)' />
+        </div>
+      </div>
+
+      <div className="p-4 border border-black bg-[var(--color-cream)] rounded flex flex-col gap-4 mb-4">
+        <h3>
+          Action Button
+        </h3>
+        <div className="flex flex-col gap-4">
+          <WindowTitleBar
+            title="With Action Button"
+            windowId="with-action"
+            onClose={() => {}}
+            showActionButton={true}
+            actionButton={{
+              text: "Connect Wallet",
+              onClick: () => alert('Wallet connect clicked!'),
+            }}
+          />
+          <PropsDisplay props='showActionButton={true}, actionButton: ActionButtonConfig' />
+          <WindowTitleBar
+            title="External Link"
+            windowId="external-link"
+            onClose={() => {}}
+            showActionButton={true}
+            actionButton={{
+              text: "Visit Site",
+              href: "https://example.com",
+              target: "_blank",
+            }}
+          />
+          <PropsDisplay props='actionButton with href' />
+          <WindowTitleBar
+            title="With Icon"
+            windowId="with-icon"
+            onClose={() => {}}
+            showActionButton={true}
+            actionButton={{
+              text: "Download",
+              iconName: "download",
+              onClick: () => alert('Download clicked!'),
+            }}
+          />
+          <PropsDisplay props='actionButton with icon' />
+        </div>
+      </div>
+
+      <div className="p-4 border border-black bg-[var(--color-cream)] rounded flex flex-col gap-4 mb-4">
+        <h3>
+          All Features Combined
+        </h3>
+        <div className="flex flex-col gap-4">
+          <WindowTitleBar
+            title="Full Featured"
+            windowId="full-featured"
+            onClose={() => {}}
+            showHelpButton={true}
+            showActionButton={true}
+            helpContent={
+              <div>
+                <p className="mb-2">Complete Help Guide</p>
+                <ul className="list-disc list-inside space-y-1">
+                  <li>This window has all features enabled</li>
+                  <li>Help button opens contextual help</li>
+                  <li>Action button performs custom actions</li>
+                  <li>Copy button shares the window link</li>
+                </ul>
+              </div>
+            }
+            helpTitle="Complete Guide"
+            actionButton={{
+              text: "Get Started",
+              iconName: "lightning",
+              onClick: () => alert('Get started clicked!'),
+            }}
+          />
+          <PropsDisplay props='All optional props enabled' />
+        </div>
+      </div>
+
+      <div className="p-4 border border-black bg-[var(--color-cream)] rounded flex flex-col gap-4 mb-4">
+        <h3>
+          Custom Styling
+        </h3>
+        <div className="flex flex-col gap-4">
+          <WindowTitleBar
+            title="Custom Styled"
+            windowId="custom-styled"
+            onClose={() => {}}
+            className="bg-sun-yellow/20"
+          />
+          <PropsDisplay props='className: string' />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ============================================================================
+// Main Export
+// ============================================================================
+
+export default function Preview() {
+  return (
+    <div className="space-y-6">
+      <WindowTitleBarContent />
+    </div>
+  );
+}
+

package/templates/devtools/tabs/ComponentsTab/tabConfig.ts

@@ -0,0 +1,53 @@
+/**
+ * Tab Configuration for Components Tab
+ *
+ * This config allows adding new component tabs dynamically.
+ * Each tab can have its own content component.
+ */
+
+export interface ComponentTabConfig {
+  /** Unique identifier for the tab */
+  id: string;
+  /** Display label for the tab */
+  label: string;
+  /** Optional description */
+  description?: string;
+}
+
+/**
+ * Default component tabs configuration
+ *
+ * To add a new tab:
+ * 1. Add an entry here with a unique id and label
+ * 2. Create a corresponding component in the ComponentsTab folder
+ * 3. Update the ComponentsTab index.tsx to render the new component
+ */
+export const COMPONENT_TABS: ComponentTabConfig[] = [
+  {
+    id: 'folder-Rad_os',
+    label: 'RadOS',
+    description: 'RadOS window components (AppWindow, WindowTitleBar, etc.)',
+  },
+  {
+    id: 'design-system',
+    label: 'Design System',
+    description: 'Core UI components from the design system',
+  },
+  // Dynamic folder tabs are added via localStorage and the Add button
+];
+
+/**
+ * Get a tab config by ID
+ */
+export function getTabById(id: string): ComponentTabConfig | undefined {
+  return COMPONENT_TABS.find((tab) => tab.id === id);
+}
+
+/**
+ * Check if a tab ID is valid
+ */
+export function isValidTabId(id: string): boolean {
+  return COMPONENT_TABS.some((tab) => tab.id === id);
+}
+
+export default COMPONENT_TABS;

package/templates/devtools/tabs/MockStatesTab/index.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useDevToolsStore } from '../../store';
+import { Button } from '@/components/ui/Button';
+
+export function MockStatesTab() {
+  const { mockStates, toggleMockState } = useDevToolsStore();
+
+  return (
+    <div className="flex flex-col h-full overflow-auto pt-4 pb-4 pl-4 pr-2 bg-[var(--color-white)] border border-black rounded space-y-4">
+      <h2 className="font-joystix text-sm uppercase text-black">Mock States</h2>
+      <p className="font-mondwest text-base text-black/60">
+        Use <code className="px-1 bg-black/10 rounded-xs font-mono">useMockState('wallet')</code> in your components.
+      </p>
+      <div className="grid grid-cols-1 gap-2">
+        {mockStates.map((state) => (
+          <Button
+            key={state.id}
+            variant={state.active ? 'primary' : 'outline'}
+            fullWidth
+            onClick={() => toggleMockState(state.id)}
+          >
+            {state.name}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}