@fabio.caffarello/react-design-system 1.7.0 → 1.9.0

package/src/ui/extensions/flow/components/PlaygroundDevTools.tsx

@@ -0,0 +1,316 @@
+'use client';
+
+/**
+ * Playground Dev Tools Component
+ * 
+ * Development tools panel with debug, state inspector, profiler, and logger.
+ */
+
+import React, { useState, useCallback, useMemo } from 'react';
+import { X, Wrench } from 'lucide-react';
+import { Card } from '../../../molecules';
+import { Button, Badge, Switch, Label } from '../../../atoms';
+import Collapsible from '../../../atoms/Collapsible/Collapsible';
+import { usePlaygroundContext } from '../context/PlaygroundContext';
+import { 
+  getSpacingClass, 
+  getColorClass, 
+  getTypographyClasses,
+  getRadiusClass
+} from '../../../tokens';
+
+export interface PlaygroundDevToolsProps {
+  enabled?: boolean;
+  position?: 'bottom' | 'top' | 'left' | 'right';
+}
+
+/**
+ * Dev Tools Panel Component
+ */
+export function PlaygroundDevTools({ 
+  enabled = false,
+  position = 'bottom'
+}: PlaygroundDevToolsProps) {
+  if (!enabled) {
+    return null;
+  }
+  
+  const [isOpen, setIsOpen] = useState(false);
+  const [showStateInspector, setShowStateInspector] = useState(false);
+  const [showPerformance, setShowPerformance] = useState(false);
+  const [showEventLog, setShowEventLog] = useState(false);
+  interface EventLogEntry {
+    timestamp: number;
+    type: string;
+    data: unknown;
+  }
+  const [eventLog, setEventLog] = useState<EventLogEntry[]>([]);
+  
+  const {
+    nodes,
+    edges,
+    reactFlowConfig,
+    backgroundConfig,
+    layoutConfig,
+    theme,
+    selectedNodeId,
+    selectedEdgeId,
+    hasPendingChanges,
+    activeTab,
+  } = usePlaygroundContext();
+
+  // Performance metrics
+  const performanceMetrics = useMemo(() => {
+    return {
+      nodeCount: nodes.length,
+      edgeCount: edges.length,
+      selectedItems: (selectedNodeId ? 1 : 0) + (selectedEdgeId ? 1 : 0),
+      hasPendingChanges,
+      activeTab,
+    };
+  }, [nodes.length, edges.length, selectedNodeId, selectedEdgeId, hasPendingChanges, activeTab]);
+
+  // State inspector data - only depend on what we actually use
+  const stateData = useMemo(() => {
+    return {
+      nodes: nodes.length,
+      edges: edges.length,
+      config: reactFlowConfig,
+      background: backgroundConfig,
+      layout: layoutConfig,
+      theme,
+      selection: {
+        node: selectedNodeId,
+        edge: selectedEdgeId,
+      },
+      pendingChanges: hasPendingChanges,
+      activeTab,
+    };
+  }, [nodes.length, edges.length, reactFlowConfig, backgroundConfig, layoutConfig, theme, selectedNodeId, selectedEdgeId, hasPendingChanges, activeTab]);
+
+  const clearEventLog = useCallback(() => {
+    setEventLog([]);
+  }, []);
+
+  const positionClasses = {
+    bottom: 'fixed bottom-4 right-4',
+    top: 'fixed top-20 right-4',
+    left: 'fixed left-4 top-1/2 -translate-y-1/2',
+    right: 'fixed right-4 top-1/2 -translate-y-1/2',
+  };
+
+  if (!isOpen) {
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        onClick={() => setIsOpen(true)}
+        className={`${positionClasses[position]} z-50`}
+        aria-label="Open developer tools"
+      >
+        <Wrench className="h-5 w-5" />
+      </Button>
+    );
+  }
+
+  return (
+    <Card
+      padding="lg"
+      className={`
+        ${positionClasses[position]} 
+        z-50 
+        w-96 
+        max-h-[600px] 
+        overflow-y-auto 
+        shadow-2xl
+      `}
+      role="dialog"
+      aria-label="Developer tools panel"
+    >
+      <div className={`flex flex-col ${getSpacingClass('base', 'gap')}`}>
+        {/* Header */}
+        <div className="flex items-center justify-between">
+          <h3 className={`
+            ${getTypographyClasses('h4')}
+            ${getColorClass('neutral', 'dark', 'text')}
+            m-0
+          `}>
+            Dev Tools
+          </h3>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setIsOpen(false)}
+            aria-label="Close developer tools"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+
+        {/* Performance Metrics */}
+        <Collapsible
+          trigger={
+            <div className="flex items-center justify-between w-full cursor-pointer">
+              <Label className="m-0">Performance Metrics</Label>
+              <span className="text-sm opacity-60">
+                {showPerformance ? '▼' : '▶'}
+              </span>
+            </div>
+          }
+          defaultOpen={showPerformance}
+          onOpenChange={setShowPerformance}
+        >
+          <div className={`${getSpacingClass('md', 'mt')} space-y-2`}>
+            <div className="flex justify-between">
+              <span className={getTypographyClasses('body')}>Nodes:</span>
+              <Badge variant="outline">{performanceMetrics.nodeCount}</Badge>
+            </div>
+            <div className="flex justify-between">
+              <span className={getTypographyClasses('body')}>Edges:</span>
+              <Badge variant="outline">{performanceMetrics.edgeCount}</Badge>
+            </div>
+            <div className="flex justify-between">
+              <span className={getTypographyClasses('body')}>Selected:</span>
+              <Badge variant="outline">{performanceMetrics.selectedItems}</Badge>
+            </div>
+            <div className="flex justify-between">
+              <span className={getTypographyClasses('body')}>Pending Changes:</span>
+              <Badge variant={hasPendingChanges ? 'warning' : 'success'}>
+                {hasPendingChanges ? 'Yes' : 'No'}
+              </Badge>
+            </div>
+          </div>
+        </Collapsible>
+
+        {/* State Inspector */}
+        <Collapsible
+          trigger={
+            <div className="flex items-center justify-between w-full cursor-pointer">
+              <Label className="m-0">State Inspector</Label>
+              <span className="text-sm opacity-60">
+                {showStateInspector ? '▼' : '▶'}
+              </span>
+            </div>
+          }
+          defaultOpen={showStateInspector}
+          onOpenChange={setShowStateInspector}
+        >
+          <div className={`
+            ${getSpacingClass('md', 'mt')} 
+            p-2 
+            ${getColorClass('neutral', 'light', 'bg')} 
+            ${getRadiusClass('md')} 
+            font-mono 
+            text-xs 
+            overflow-auto 
+            max-h-64
+          `}>
+            <pre className="m-0 whitespace-pre-wrap">
+              {JSON.stringify(stateData, null, 2)}
+            </pre>
+          </div>
+        </Collapsible>
+
+        {/* Event Log */}
+        <Collapsible
+          trigger={
+            <div className="flex items-center justify-between w-full cursor-pointer">
+              <Label className="m-0">
+                Event Log
+                {eventLog.length > 0 && (
+                  <Badge variant="outline" size="sm" className="ml-2">
+                    {eventLog.length}
+                  </Badge>
+                )}
+              </Label>
+              <span className="text-sm opacity-60">
+                {showEventLog ? '▼' : '▶'}
+              </span>
+            </div>
+          }
+          defaultOpen={showEventLog}
+          onOpenChange={setShowEventLog}
+        >
+          <div className={`${getSpacingClass('md', 'mt')} space-y-2`}>
+            {eventLog.length === 0 ? (
+              <p className={`
+                ${getTypographyClasses('caption')}
+                ${getColorClass('neutral', 'DEFAULT', 'text')}
+                m-0
+              `}>
+                No events logged yet
+              </p>
+            ) : (
+              <>
+                <div className={`
+                  p-2 
+                  ${getColorClass('neutral', 'light', 'bg')} 
+                  ${getRadiusClass('md')} 
+                  font-mono 
+                  text-xs 
+                  overflow-auto 
+                  max-h-48
+                  space-y-1
+                `}>
+                  {eventLog.slice(-20).reverse().map((event, index) => (
+                    <div key={index} className={`border-b ${getColorClass('neutral', 'DEFAULT', 'border')} pb-1`}>
+                      <div className="flex justify-between">
+                        <span className="font-semibold">{event.type}</span>
+                        <span className={getColorClass('neutral', 'DEFAULT', 'text')}>
+                          {new Date(event.timestamp).toLocaleTimeString()}
+                        </span>
+                      </div>
+                      {event.data && (
+                        <pre className="mt-1 text-xs overflow-x-auto">
+                          {JSON.stringify(event.data, null, 2)}
+                        </pre>
+                      )}
+                    </div>
+                  ))}
+                </div>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={clearEventLog}
+                  className="w-full"
+                >
+                  Clear Log
+                </Button>
+              </>
+            )}
+          </div>
+        </Collapsible>
+
+        {/* Actions */}
+        <div className={`flex flex-col ${getSpacingClass('sm', 'gap')} ${getSpacingClass('md', 'pt')} border-t`}>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              console.log('Playground State:', stateData);
+              console.log('Performance:', performanceMetrics);
+            }}
+            className="w-full"
+          >
+            Log to Console
+          </Button>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => {
+              const data = {
+                state: stateData,
+                performance: performanceMetrics,
+                timestamp: Date.now(),
+              };
+              navigator.clipboard.writeText(JSON.stringify(data, null, 2));
+            }}
+            className="w-full"
+          >
+            Copy State to Clipboard
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+}

package/src/ui/extensions/flow/components/PlaygroundErrorBoundary.tsx

@@ -0,0 +1,121 @@
+/**
+ * Playground Error Boundary
+ * 
+ * Catches errors in the playground and displays a friendly error message.
+ */
+
+import React, { Component, type ReactNode } from 'react';
+import { Card } from '../../../molecules';
+import { Button } from '../../../atoms';
+import { 
+  getSpacingClass, 
+  getColorClass, 
+  getTypographyClasses,
+  getRadiusClass
+} from '../../../tokens';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class PlaygroundErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+         componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+           console.error('Playground Error:', error, errorInfo);
+           // Log to console for debugging
+           console.error('Error Stack:', error.stack);
+           console.error('Component Stack:', errorInfo.componentStack);
+         }
+
+  handleReset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <Card padding="lg" className="m-4">
+          <div className={`flex flex-col ${getSpacingClass('md', 'gap')}`}>
+            <h2
+              className={`
+                ${getTypographyClasses('h3')}
+                ${getColorClass('error', 'dark', 'text')}
+                m-0
+              `}
+            >
+              Something went wrong
+            </h2>
+            <p
+              className={`
+                ${getTypographyClasses('body')}
+                ${getColorClass('neutral', 'DEFAULT', 'text')}
+                m-0
+              `}
+            >
+              An error occurred in the playground. You can try resetting or refreshing the page.
+            </p>
+            {this.state.error && (
+              <details
+                className={`
+                  ${getSpacingClass('sm', 'mt')}
+                  ${getTypographyClasses('caption')}
+                  ${getColorClass('neutral', 'DEFAULT', 'text')}
+                `}
+              >
+                <summary style={{ cursor: 'pointer' }}>Error details</summary>
+                <pre
+                  className={`
+                    ${getSpacingClass('sm', 'mt')}
+                    p-2
+                    ${getColorClass('neutral', 'light', 'bg')}
+                    ${getRadiusClass('md')}
+                    overflow-auto
+                    text-xs
+                  `}
+                >
+                  {this.state.error.toString()}
+                  {this.state.error.stack && (
+                    <div className={getSpacingClass('xs', 'mt')}>
+                      {this.state.error.stack}
+                    </div>
+                  )}
+                </pre>
+              </details>
+            )}
+            <div className={`flex gap-2 ${getSpacingClass('md', 'mt')}`}>
+              <Button variant="primary" onClick={this.handleReset}>
+                Try Again
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => window.location.reload()}
+              >
+                Refresh Page
+              </Button>
+            </div>
+          </div>
+        </Card>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/src/ui/extensions/flow/components/PlaygroundHeader.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+/**
+ * Playground Header Component
+ * 
+ * Professional header for the playground with Apply Changes functionality.
+ * Uses design system tokens for consistent styling.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { FileText, CheckCircle2 } from 'lucide-react';
+import { Button, Badge } from '../../../atoms';
+import Tooltip from '../../../atoms/Tooltip/Tooltip';
+import { PlaygroundBreadcrumbs } from './PlaygroundBreadcrumbs';
+import { PlaygroundSearch } from './PlaygroundSearch';
+import { usePlaygroundContext } from '../context/PlaygroundContext';
+import { useKeyboardShortcuts, PLAYGROUND_SHORTCUTS } from '../hooks/useKeyboardShortcuts';
+import { 
+  getSpacingClass, 
+  getColorClass, 
+  getTypographyClasses,
+  getShadowClass 
+} from '../../../tokens';
+
+export function PlaygroundHeader() {
+  const { 
+    hasPendingChanges, 
+    applyChanges, 
+    discardChanges,
+    canUndo,
+    canRedo,
+    undo,
+    redo,
+    searchQuery,
+    setSearchQuery,
+    searchResults,
+    activeTab = 'nodes-edges',
+  } = usePlaygroundContext();
+  
+  const [showSearch, setShowSearch] = useState(false);
+  const [isApplying, setIsApplying] = useState(false);
+  const [isDiscarding, setIsDiscarding] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+  
+  // Keyboard shortcuts
+  useKeyboardShortcuts({
+    enabled: true,
+    shortcuts: [
+      {
+        ...PLAYGROUND_SHORTCUTS.UNDO,
+        action: () => canUndo && undo(),
+      },
+      {
+        ...PLAYGROUND_SHORTCUTS.REDO,
+        action: () => canRedo && redo(),
+      },
+      {
+        ...PLAYGROUND_SHORTCUTS.SEARCH,
+        action: () => setShowSearch(!showSearch),
+      },
+    ],
+  });
+
+  const handleApplyChanges = useCallback(async () => {
+    setIsApplying(true);
+    try {
+      applyChanges();
+      setShowSuccess(true);
+      setTimeout(() => setShowSuccess(false), 2000);
+    } finally {
+      setTimeout(() => setIsApplying(false), 300);
+    }
+  }, [applyChanges]);
+
+  const handleDiscardChanges = useCallback(async () => {
+    if (!window.confirm('Are you sure you want to discard all pending changes?')) {
+      return;
+    }
+    setIsDiscarding(true);
+    try {
+      discardChanges();
+    } finally {
+      setTimeout(() => setIsDiscarding(false), 300);
+    }
+  }, [discardChanges]);
+
+  return (
+    <header
+      className={`
+        ${getSpacingClass('base', 'px')}
+        ${getSpacingClass('md', 'py')}
+        ${getShadowClass('sm')}
+        border-b
+        ${getColorClass('neutral', 'DEFAULT', 'border')}
+        flex items-center justify-between
+        sticky top-0 z-50
+        transition-all duration-200
+      `}
+      style={{
+        minHeight: '56px',
+        backgroundColor: '#ffffff', // White header for contrast
+      }}
+      role="banner"
+      aria-label="Playground header with navigation and controls"
+    >
+      {/* ARIA live region for status updates */}
+      <div 
+        role="status" 
+        aria-live="polite" 
+        aria-atomic="true" 
+        className="sr-only"
+        id="playground-status"
+      >
+        {hasPendingChanges && 'You have unsaved changes'}
+      </div>
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-3">
+          <FileText className="h-5 w-5" />
+          <h1
+            className={`
+              ${getTypographyClasses('h3')}
+              ${getColorClass('neutral', 'dark', 'text')}
+              m-0
+            `}
+            id="playground-title"
+          >
+            React Flow Playground
+          </h1>
+          {hasPendingChanges && (
+            <Badge 
+              variant="warning" 
+              size="sm"
+              className="animate-pulse"
+            >
+              Unsaved
+            </Badge>
+          )}
+          {showSuccess && (
+            <Badge 
+              variant="success" 
+              size="sm"
+              className="animate-fade-in flex items-center gap-1"
+            >
+              <CheckCircle2 className="h-3 w-3" />
+              Saved
+            </Badge>
+          )}
+        </div>
+      </div>
+      
+      <div className={`flex items-center ${getSpacingClass('sm', 'gap')}`}>
+        {hasPendingChanges && (
+          <Button 
+            variant="outline" 
+            size="sm" 
+            onClick={handleDiscardChanges}
+            disabled={isDiscarding}
+            style={{ minWidth: '80px' }}
+            className="transition-all duration-200"
+          >
+            {isDiscarding ? 'Discarding...' : 'Discard'}
+          </Button>
+        )}
+        <Button
+          variant="primary"
+          size="sm"
+          onClick={handleApplyChanges}
+          disabled={!hasPendingChanges || isApplying}
+          style={{ minWidth: '120px' }}
+          className="transition-all duration-200"
+        >
+          {isApplying ? 'Applying...' : 'Apply Changes'}
+        </Button>
+      </div>
+    </header>
+  );
+}