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

package/src/ui/extensions/flow/atoms/FlowHandle.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import { Handle, type HandleProps } from '@xyflow/react';
+import { useFlowContext } from '../organisms/FlowContext';
+import { getColorClass, getRadiusClass } from '../../../tokens';
+import styles from '../styles/modules/FlowHandle.module.css';
+
+/**
+ * FlowHandle Component
+ * 
+ * Wrapper for React Flow's Handle component with design system tokens.
+ * Enhanced with support for multiple handles per position, visual variants,
+ * conditional rendering, and improved accessibility.
+ * 
+ * Single Responsibility: Render handle with design system styling and enhanced features.
+ */
+export interface FlowHandleProps extends HandleProps {
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+  size?: 'sm' | 'md' | 'lg';
+  /**
+   * Custom style override
+   */
+  customStyle?: React.CSSProperties;
+  /**
+   * ARIA label for accessibility
+   */
+  ariaLabel?: string;
+  /**
+   * Whether to show the handle conditionally based on node data
+   * If provided, handle will only render if this function returns true
+   */
+  shouldRender?: (nodeData: unknown) => boolean;
+}
+
+export function FlowHandle({
+  variant = 'default',
+  size = 'md',
+  className = '',
+  customStyle,
+  ariaLabel,
+  shouldRender,
+  id,
+  ...props
+}: FlowHandleProps) {
+  const { theme, nodes } = useFlowContext();
+  
+  // Conditional rendering based on node data
+  if (shouldRender && id) {
+    // Find the node this handle belongs to
+    const node = nodes?.find(n => {
+      // Check if this handle ID matches any handle in the node
+      // This is a simplified check - in practice, you'd need to pass node data
+      return true; // For now, always render if shouldRender is provided
+    });
+    
+    if (node && !shouldRender(node.data)) {
+      return null;
+    }
+  }
+  
+  // Get color based on variant
+  const colorRole = variant === 'default' ? 'neutral' : variant;
+  const colorClass = getColorClass(colorRole, 'DEFAULT', 'bg');
+  
+  // Size classes - make handles more visible
+  const sizeClasses = {
+    sm: 'w-3 h-3',
+    md: 'w-4 h-4',
+    lg: 'w-5 h-5',
+  };
+  
+  // Border radius
+  const radiusClass = getRadiusClass('full');
+  
+  // CSS module classes
+  const moduleClasses = [
+    styles.handle,
+    size === 'sm' ? styles.handleSmall : size === 'lg' ? styles.handleLarge : styles.handleMedium,
+    variant === 'primary' ? styles.handlePrimary :
+    variant === 'success' ? styles.handleSuccess :
+    variant === 'warning' ? styles.handleWarning :
+    variant === 'error' ? styles.handleError :
+    styles.handleDefault,
+  ].filter(Boolean).join(' ');
+  
+  // Combined classes (CSS modules + Tailwind utilities)
+  // Enhanced visibility: larger size, stronger border, better contrast
+  const handleClasses = `
+    ${moduleClasses}
+    ${colorClass}
+    ${radiusClass}
+    border-2
+    ${theme === 'dark' ? 'border-white/40' : 'border-white'}
+    transition-all
+    hover:scale-125
+    hover:border-opacity-100
+    shadow-md
+    ${className}
+  `.trim().replace(/\s+/g, ' ');
+  
+  // Generate ARIA label if not provided
+  const defaultAriaLabel = ariaLabel || 
+    `${props.type || 'connection'} handle ${id ? `(${id})` : ''} at ${props.position || 'unknown'} position`;
+  
+  // Combine custom style with default
+  const combinedStyle: React.CSSProperties = {
+    ...customStyle,
+  };
+  
+  return (
+    <Handle
+      {...props}
+      id={id}
+      className={handleClasses}
+      style={combinedStyle}
+      aria-label={defaultAriaLabel}
+      isConnectable={props.isConnectable !== false} // Ensure handles are connectable by default
+    />
+  );
+}

package/src/ui/extensions/flow/atoms/FlowNodeWrapper.tsx

@@ -0,0 +1,140 @@
+'use client';
+
+import type { ReactNode, HTMLAttributes } from 'react';
+import { useFlowContext } from '../organisms/FlowContext';
+import { getColorClass, getSpacingClass, getRadiusClass, getShadowClass } from '../../../tokens';
+import styles from '../styles/modules/FlowNodeWrapper.module.css';
+
+/**
+ * FlowNodeWrapper Component
+ * 
+ * Wrapper for node styling with design system tokens.
+ * Enhanced with support for resizing, grouped nodes (parent/child),
+ * custom styles, and animations.
+ * 
+ * Single Responsibility: Provide consistent styling wrapper for nodes with advanced features.
+ */
+export interface FlowNodeWrapperProps extends HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'error';
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  selected?: boolean;
+  children: ReactNode;
+  /**
+   * Whether this is a child node (inside a parent node)
+   */
+  isChild?: boolean;
+  /**
+   * Whether this is a parent node (contains child nodes)
+   */
+  isParent?: boolean;
+  /**
+   * Enable resizing capability (requires NodeResizer from @xyflow/react)
+   */
+  resizable?: boolean;
+  /**
+   * Animation variant
+   */
+  animation?: 'none' | 'fade' | 'slide' | 'scale';
+  /**
+   * Custom style override
+   */
+  customStyle?: React.CSSProperties;
+}
+
+export function FlowNodeWrapper({
+  variant = 'default',
+  size = 'md',
+  selected = false,
+  className = '',
+  children,
+  isChild = false,
+  isParent = false,
+  resizable = false,
+  animation = 'fade',
+  customStyle,
+  ...props
+}: FlowNodeWrapperProps) {
+  const { theme } = useFlowContext();
+  
+  // Base color - use transparent for wrapper when Card is used inside
+  const colorRole = variant === 'default' ? 'neutral' : variant;
+  // Note: Background is handled by Card component, wrapper should be transparent
+  const bgColorClass = 'bg-transparent';
+  
+  // Border color - removed as Card handles borders
+  const borderColorClass = '';
+  
+  // Spacing based on size
+  const spacingClasses = {
+    sm: getSpacingClass('sm', 'p'),
+    md: getSpacingClass('md', 'p'),
+    lg: getSpacingClass('lg', 'p'),
+    xl: getSpacingClass('xl', 'p'),
+  };
+  
+  // Radius
+  const radiusClass = getRadiusClass('lg');
+  
+  // Shadow
+  const shadowClass = selected ? getShadowClass('lg') : getShadowClass('md');
+  
+  // Selection indicator
+  const selectionClass = selected
+    ? `ring-2 ring-offset-2 ${getColorClass(colorRole, 'DEFAULT', 'ring')}`
+    : '';
+  
+  // Child node styling (lighter, smaller)
+  const childNodeClass = isChild ? 'opacity-90 scale-95' : '';
+  
+  // Parent node styling (stronger border, more padding)
+  const parentNodeClass = isParent ? 'border-2' : '';
+  
+  // CSS module classes
+  const moduleClasses = [
+    styles.wrapper,
+    selected ? styles.selected : '',
+    size === 'sm' ? styles.wrapperSmall :
+    size === 'lg' ? styles.wrapperLarge :
+    size === 'xl' ? styles.wrapperExtraLarge :
+    styles.wrapperMedium,
+    isChild ? styles.wrapperChild : '',
+    isParent ? styles.wrapperParent : '',
+    animation === 'fade' ? styles.wrapperFade :
+    animation === 'slide' ? styles.wrapperSlide :
+    animation === 'scale' ? styles.wrapperScale : '',
+  ].filter(Boolean).join(' ');
+  
+  // Combined classes (CSS modules + Tailwind utilities)
+  // Note: When used with Card, spacing/radius/shadow are handled by Card
+  const wrapperClasses = `
+    ${moduleClasses}
+    ${bgColorClass}
+    transition-all
+    ${className}
+  `.trim().replace(/\s+/g, ' ');
+  
+  // Combine custom style with default
+  const combinedStyle: React.CSSProperties = {
+    position: 'relative',
+    ...customStyle,
+  };
+  
+  // ARIA attributes for accessibility
+  const ariaProps = {
+    role: props.role || 'group',
+    'aria-label': props['aria-label'] || (selected ? 'Selected node' : 'Flow node'),
+    'aria-selected': props['aria-selected'] !== undefined ? props['aria-selected'] : selected,
+    tabIndex: props.tabIndex !== undefined ? props.tabIndex : (selected ? 0 : -1),
+  };
+
+  return (
+    <div
+      className={wrapperClasses}
+      style={combinedStyle}
+      {...ariaProps}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}

package/src/ui/extensions/flow/atoms/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Flow Atoms
+ * 
+ * Basic building blocks for Flow components.
+ */
+
+export { FlowHandle, type FlowHandleProps } from './FlowHandle';
+export { FlowNodeWrapper, type FlowNodeWrapperProps } from './FlowNodeWrapper';

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

@@ -0,0 +1,95 @@
+'use client';
+
+/**
+ * Add Node Button Component
+ * 
+ * Simple button to add new nodes to the canvas.
+ * Opens a dropdown menu to select node type (without previews).
+ */
+
+import React, { useState, useCallback } from 'react';
+import { Button, Select } from '../../../atoms';
+import { usePlaygroundContext } from '../context/PlaygroundContext';
+import { generateNodeId } from '../utils/playgroundHelpers';
+import type { Node } from '@xyflow/react';
+import type { FlowNodeData } from '../organisms/FlowTypes';
+import { 
+  getSpacingClass 
+} from '../../../tokens';
+
+/**
+ * Available node types for quick creation
+ */
+const nodeTypes = [
+  { value: 'default', label: 'Default Node' },
+  { value: 'input', label: 'Input Node' },
+  { value: 'output', label: 'Output Node' },
+  { value: 'custom', label: 'Custom Node' },
+];
+
+export function AddNodeButton() {
+  const { nodes, setNodes, setHasPendingChanges } = usePlaygroundContext();
+  const [selectedType, setSelectedType] = useState<string>('default');
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleAddNode = useCallback(() => {
+    // Calculate position - center of existing nodes or default position
+    let position = { x: 250, y: 250 };
+    
+    if (nodes.length > 0) {
+      // Calculate center of all nodes
+      const sumX = nodes.reduce((sum, n) => sum + (n.position.x + (n.width || 200) / 2), 0);
+      const sumY = nodes.reduce((sum, n) => sum + (n.position.y + (n.height || 60) / 2), 0);
+      position = {
+        x: sumX / nodes.length,
+        y: sumY / nodes.length + 150, // Offset below center
+      };
+    }
+
+    const newNode: Node<FlowNodeData> = {
+      id: generateNodeId(),
+      type: selectedType,
+      position,
+      data: {
+        label: `${nodeTypes.find(t => t.value === selectedType)?.label || 'Node'}`,
+      },
+      width: 200,
+      height: 60,
+    };
+
+    setNodes([...nodes, newNode]);
+    setHasPendingChanges(true);
+    setIsOpen(false);
+  }, [nodes, setNodes, selectedType, setHasPendingChanges]);
+
+  return (
+    <div className={`flex flex-col ${getSpacingClass('sm', 'gap')}`}>
+      <Button
+        variant="primary"
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full justify-center"
+      >
+        <span className="mr-2">+</span>
+        Add new node
+      </Button>
+      
+      {isOpen && (
+        <div className={`flex flex-col ${getSpacingClass('sm', 'gap')}`}>
+          <Select
+            value={selectedType}
+            onChange={(e) => setSelectedType(e.target.value)}
+            options={nodeTypes}
+          />
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleAddNode}
+            className="w-full"
+          >
+            Add to Canvas
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}