@capillarytech/creatives-library 8.0.207 → 8.0.209

package/v2Components/HtmlEditor/components/SplitContainer/SplitContainer.js

@@ -0,0 +1,276 @@
+/**
+ * SplitContainer - Smooth and functional resizable split panel
+ *
+ * Features:
+ * - Smooth dragging with proper event handling
+ * - Percentage-based sizing that works correctly
+ * - Proper constraints and boundaries
+ * - Clean visual feedback
+ * - Touch support for mobile devices
+ * - Memory of split position
+ */
+
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+
+// Styles
+import './_splitContainer.scss';
+
+// Constants
+const SPLIT_CONSTRAINTS = {
+  MIN_PERCENT: 10,
+  MAX_PERCENT: 90,
+  DEFAULT_MIN_SIZE: 200
+};
+
+const DIRECTIONS = {
+  HORIZONTAL: 'horizontal',
+  VERTICAL: 'vertical'
+};
+
+const SplitContainer = ({
+  children,
+  className = '',
+  defaultSplit = 50,
+  minSize = SPLIT_CONSTRAINTS.DEFAULT_MIN_SIZE,
+  maxSize = null,
+  direction = DIRECTIONS.HORIZONTAL,
+  onSplitChange = null
+}) => {
+  const [splitSize, setSplitSize] = useState(defaultSplit);
+  const [isDragging, setIsDragging] = useState(false);
+
+  // Refs for drag handling
+  const containerRef = useRef(null);
+  const startPositionRef = useRef(0);
+  const startSplitRef = useRef(0);
+
+  const handleMouseDown = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setIsDragging(true);
+    startPositionRef.current = direction === DIRECTIONS.HORIZONTAL ? e.clientX : e.clientY;
+    startSplitRef.current = splitSize;
+
+    // Add global styles for dragging
+    const { body } = document;
+    body.style.cursor = direction === DIRECTIONS.HORIZONTAL ? 'col-resize' : 'row-resize';
+    body.style.userSelect = 'none';
+    body.style.pointerEvents = 'none';
+
+    // Prevent text selection during drag
+    document.onselectstart = () => false;
+
+    // Re-enable pointer events on the container
+    if (containerRef.current) {
+      containerRef.current.style.pointerEvents = 'auto';
+    }
+  }, [direction, splitSize]);
+
+  const handleMouseMove = useCallback((e) => {
+    if (!isDragging || !containerRef.current) return;
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    const container = containerRef.current;
+    const containerRect = container.getBoundingClientRect();
+    const isHorizontal = direction === DIRECTIONS.HORIZONTAL;
+    const containerSize = isHorizontal ? containerRect.width : containerRect.height;
+
+    if (containerSize === 0) return; // Avoid division by zero
+
+    const currentPosition = isHorizontal ? e.clientX : e.clientY;
+    const containerStart = isHorizontal ? containerRect.left : containerRect.top;
+    const relativePosition = currentPosition - containerStart;
+
+    // Calculate new split percentage
+    let newSplit = (relativePosition / containerSize) * 100;
+
+    // Apply constraints
+    const minPercent = (minSize / containerSize) * 100;
+    const maxPercent = maxSize
+      ? ((containerSize - maxSize) / containerSize) * 100
+      : SPLIT_CONSTRAINTS.MAX_PERCENT;
+
+    // Clamp the values
+    const { MIN_PERCENT, MAX_PERCENT } = SPLIT_CONSTRAINTS;
+    newSplit = Math.max(MIN_PERCENT, Math.min(MAX_PERCENT, newSplit)); // Overall limits
+    newSplit = Math.max(minPercent, Math.min(100 - minPercent, newSplit)); // Min size limits
+
+    if (maxSize) {
+      newSplit = Math.min(maxPercent, newSplit);
+    }
+
+    setSplitSize(newSplit);
+    onSplitChange?.(newSplit); // Optional chaining
+  }, [isDragging, direction, minSize, maxSize, onSplitChange]);
+
+  const handleMouseUp = useCallback(() => {
+    if (!isDragging) return;
+
+    setIsDragging(false);
+
+    // Reset global styles
+    const { body } = document;
+    body.style.cursor = '';
+    body.style.userSelect = '';
+    body.style.pointerEvents = '';
+
+    // Reset text selection prevention
+    document.onselectstart = null;
+
+    containerRef.current?.style && (containerRef.current.style.pointerEvents = '');
+  }, [isDragging]);
+
+  // Touch support - convert touch events to mouse events
+  const handleTouchStart = useCallback((e) => {
+    const touch = e.touches?.[0];
+    if (!touch) return;
+
+    const mouseEvent = new MouseEvent('mousedown', {
+      clientX: touch.clientX,
+      clientY: touch.clientY
+    });
+    handleMouseDown(mouseEvent);
+  }, [handleMouseDown]);
+
+  const handleTouchMove = useCallback((e) => {
+    if (!isDragging) return;
+    e.preventDefault();
+
+    const touch = e.touches?.[0];
+    if (!touch) return;
+
+    const mouseEvent = new MouseEvent('mousemove', {
+      clientX: touch.clientX,
+      clientY: touch.clientY
+    });
+    handleMouseMove(mouseEvent);
+  }, [isDragging, handleMouseMove]);
+
+  const handleTouchEnd = useCallback(() => {
+    handleMouseUp();
+  }, [handleMouseUp]);
+
+  // Event listeners
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener('mousemove', handleMouseMove, { passive: false });
+      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener('touchmove', handleTouchMove, { passive: false });
+      document.addEventListener('touchend', handleTouchEnd);
+
+      return () => {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener('touchmove', handleTouchMove);
+        document.removeEventListener('touchend', handleTouchEnd);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp, handleTouchMove, handleTouchEnd]);
+
+  // Prevent text selection during drag
+  useEffect(() => {
+    if (isDragging) {
+      // Named handlers to prevent text selection and dragging during resize
+      const selectStartHandler = (e) => {
+        e.preventDefault();
+        return false;
+      };
+
+      const dragStartHandler = (e) => {
+        e.preventDefault();
+        return false;
+      };
+
+      document.addEventListener('selectstart', selectStartHandler);
+      document.addEventListener('dragstart', dragStartHandler);
+
+      return () => {
+        document.removeEventListener('selectstart', selectStartHandler);
+        document.removeEventListener('dragstart', dragStartHandler);
+      };
+    }
+  }, [isDragging]);
+
+  // Cleanup effect to reset global styles on unmount
+  useEffect(() => {
+    return () => {
+      // Reset global body styles if component unmounts while dragging
+      if (isDragging) {
+        const { body } = document;
+        body.style.cursor = '';
+        body.style.userSelect = '';
+        body.style.pointerEvents = '';
+
+        // Reset container pointer events if ref is still available
+        if (containerRef.current) {
+          containerRef.current.style.pointerEvents = '';
+        }
+      }
+    };
+  }, [isDragging]);
+
+  // Generate CSS classes
+  const containerClasses = [
+    'split-container',
+    `split-container--${direction}`,
+    isDragging ? 'split-container--dragging' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  // Generate CSS custom properties for dynamic sizing
+  const containerStyle = {
+    '--split-size': `${splitSize}%`,
+    '--remaining-size': `${100 - splitSize}%`
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={containerClasses}
+      style={containerStyle}
+    >
+      <CapRow className="split-container__panel split-container__panel--first">
+        {children?.[0]}
+      </CapRow>
+
+      <div
+        className="split-container__splitter"
+        onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
+        role="separator"
+        tabIndex={0}
+        aria-label={`Resize ${direction === DIRECTIONS.HORIZONTAL ? 'horizontal' : 'vertical'} split`}
+        aria-orientation={direction === DIRECTIONS.HORIZONTAL ? 'vertical' : 'horizontal'}
+        aria-valuenow={Math.round(splitSize)}
+        aria-valuemin={SPLIT_CONSTRAINTS.MIN_PERCENT}
+        aria-valuemax={SPLIT_CONSTRAINTS.MAX_PERCENT}
+      >
+        <div className="split-container__splitter-handle">
+          <div className="split-container__splitter-line" />
+        </div>
+      </div>
+
+      <CapRow className="split-container__panel split-container__panel--second">
+        {children?.[1]}
+      </CapRow>
+    </div>
+  );
+};
+
+SplitContainer.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  className: PropTypes.string,
+  defaultSplit: PropTypes.number,
+  minSize: PropTypes.number,
+  maxSize: PropTypes.number,
+  direction: PropTypes.oneOf(Object.values(DIRECTIONS)),
+  onSplitChange: PropTypes.func
+};
+
+export default SplitContainer;

package/v2Components/HtmlEditor/components/SplitContainer/__tests__/SplitContainer.test.js

@@ -0,0 +1,295 @@
+/**
+ * SplitContainer Component Tests
+ *
+ * Tests for the SplitContainer component that provides resizable split panels.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import SplitContainer from '../SplitContainer';
+
+describe('SplitContainer', () => {
+  const defaultProps = {
+    children: [
+      <div key="left" data-testid="left-panel">Left Panel</div>,
+      <div key="right" data-testid="right-panel">Right Panel</div>
+    ]
+  };
+
+  beforeEach(() => {
+    // Setup window.getComputedStyle mock - returns a CSSStyleDeclaration-like object
+    window.getComputedStyle = jest.fn(() => ({
+      getPropertyValue: (prop) => {
+        const values = {
+          'width': '800px',
+          'height': '600px',
+        };
+        return values[prop] || '0px';
+      },
+      width: '800px',
+      height: '600px',
+    }));
+
+    // Mock getBoundingClientRect
+    Element.prototype.getBoundingClientRect = jest.fn(() => ({
+      width: 800,
+      height: 600,
+      left: 0,
+      top: 0,
+      right: 800,
+      bottom: 600
+    }));
+  });
+
+  afterEach(() => {
+    // Clean up any global state
+    document.body.innerHTML = '';
+
+    // Reset any global mocks
+    if (document.onselectstart) {
+      document.onselectstart = null;
+    }
+    if (document.ondragstart) {
+      document.ondragstart = null;
+    }
+  });
+
+  it('renders with default horizontal layout', () => {
+    render(<SplitContainer {...defaultProps} />);
+
+    expect(screen.getByTestId('left-panel')).toBeInTheDocument();
+    expect(screen.getByTestId('right-panel')).toBeInTheDocument();
+
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+    expect(container).toHaveClass('split-container--horizontal');
+  });
+
+  it('renders with vertical layout when specified', () => {
+    render(<SplitContainer {...defaultProps} direction="vertical" />);
+
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+    expect(container).toHaveClass('split-container--vertical');
+  });
+
+  it('applies default 50/50 split', () => {
+    render(<SplitContainer {...defaultProps} />);
+
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+
+    // Check CSS custom properties are set correctly
+    expect(container.style.getPropertyValue('--split-size')).toBe('50%');
+    expect(container.style.getPropertyValue('--remaining-size')).toBe('50%');
+  });
+
+  it('applies custom default split', () => {
+    render(<SplitContainer {...defaultProps} defaultSplit={30} />);
+
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+
+    // Check CSS custom properties are set correctly
+    expect(container.style.getPropertyValue('--split-size')).toBe('30%');
+    expect(container.style.getPropertyValue('--remaining-size')).toBe('70%');
+  });
+
+  it('renders splitter handle', () => {
+    render(<SplitContainer {...defaultProps} />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+    const handle = document.querySelector('.split-container__splitter-handle');
+    const line = document.querySelector('.split-container__splitter-line');
+
+    expect(splitter).toBeInTheDocument();
+    expect(handle).toBeInTheDocument();
+    expect(line).toBeInTheDocument();
+  });
+
+  it('handles mouse down on splitter', () => {
+    render(<SplitContainer {...defaultProps} />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+
+    fireEvent.mouseDown(splitter, { clientX: 400, clientY: 300 });
+
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+    expect(container).toHaveClass('split-container--dragging');
+  });
+
+  it('handles mouse move during drag', () => {
+    render(<SplitContainer {...defaultProps} />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+
+    // Start drag
+    fireEvent.mouseDown(splitter, { clientX: 400, clientY: 300 });
+
+    // Move mouse
+    fireEvent.mouseMove(document, { clientX: 300, clientY: 300 });
+
+    // Should update split position via CSS custom properties
+    const splitSize = container.style.getPropertyValue('--split-size');
+    expect(splitSize).toBeTruthy();
+    expect(splitSize).toMatch(/^\d+(\.\d+)?%$/); // Should be a percentage
+  });
+
+  it('handles mouse up to end drag', () => {
+    render(<SplitContainer {...defaultProps} />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+
+    // Start and end drag
+    fireEvent.mouseDown(splitter, { clientX: 400, clientY: 300 });
+    fireEvent.mouseUp(document);
+
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+    expect(container).not.toHaveClass('split-container--dragging');
+  });
+
+  it('handles touch events', () => {
+    render(<SplitContainer {...defaultProps} />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+
+    // Touch start
+    fireEvent.touchStart(splitter, {
+      touches: [{ clientX: 400, clientY: 300 }]
+    });
+
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+    expect(container).toHaveClass('split-container--dragging');
+  });
+
+  it('respects minimum size constraints', () => {
+    render(<SplitContainer {...defaultProps} minSize={100} />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+
+    // Try to drag to a very small size
+    fireEvent.mouseDown(splitter, { clientX: 400, clientY: 300 });
+    fireEvent.mouseMove(document, { clientX: 50, clientY: 300 }); // Very small
+
+    const firstPanel = screen.getByTestId('left-panel').closest('.split-container__panel--first');
+    const container = firstPanel.closest('.split-container');
+
+    // Read the CSS variable directly from the inline style
+    const splitSizeValue = container.style.getPropertyValue('--split-size');
+    const parsedPercent = parseFloat(splitSizeValue.trim().replace('%', ''));
+
+    // Should respect minimum size (100px out of 800px = 12.5%)
+    expect(parsedPercent).toBeGreaterThanOrEqual(12.5);
+  });
+
+  it('respects maximum size constraints', () => {
+    render(<SplitContainer {...defaultProps} maxSize={100} />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+
+    // Try to drag to a very large size
+    fireEvent.mouseDown(splitter, { clientX: 400, clientY: 300 });
+    fireEvent.mouseMove(document, { clientX: 750, clientY: 300 }); // Very large
+
+    const splitSize = container.style.getPropertyValue('--split-size');
+    const widthPercent = parseFloat(splitSize);
+
+    // Should respect maximum size constraint
+    expect(widthPercent).toBeLessThanOrEqual(90); // Should be clamped
+  });
+
+  it('calls onSplitChange when split changes', () => {
+    const onSplitChange = jest.fn();
+    render(<SplitContainer {...defaultProps} onSplitChange={onSplitChange} />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+
+    fireEvent.mouseDown(splitter, { clientX: 400, clientY: 300 });
+    fireEvent.mouseMove(document, { clientX: 300, clientY: 300 });
+
+    expect(onSplitChange).toHaveBeenCalled();
+  });
+
+  it('applies custom className', () => {
+    render(<SplitContainer {...defaultProps} className="custom-split" />);
+
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+    expect(container).toHaveClass('custom-split');
+  });
+
+  it('handles vertical direction correctly', () => {
+    render(<SplitContainer {...defaultProps} direction="vertical" />);
+
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+
+    // In vertical mode, CSS custom properties are still used the same way
+    expect(container.style.getPropertyValue('--split-size')).toBe('50%');
+    expect(container.style.getPropertyValue('--remaining-size')).toBe('50%');
+  });
+
+  it('handles drag in vertical direction', () => {
+    render(<SplitContainer {...defaultProps} direction="vertical" />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+    const container = screen.getByTestId('left-panel').closest('.split-container');
+
+    // Start vertical drag
+    fireEvent.mouseDown(splitter, { clientX: 400, clientY: 300 });
+    fireEvent.mouseMove(document, { clientX: 400, clientY: 200 }); // Move vertically
+
+    // Should update split position via CSS custom properties
+    const splitSize = container.style.getPropertyValue('--split-size');
+    expect(splitSize).toBeTruthy();
+    expect(splitSize).toMatch(/^\d+(\.\d+)?%$/); // Should be a percentage
+  });
+
+  it('prevents text selection during drag', () => {
+    render(<SplitContainer {...defaultProps} />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+
+    fireEvent.mouseDown(splitter, { clientX: 400, clientY: 300 });
+
+    // Should set document.onselectstart to prevent selection
+    expect(document.onselectstart).toBeDefined();
+    expect(document.onselectstart()).toBe(false);
+  });
+
+  it('cleans up event listeners on unmount', () => {
+    const removeEventListenerSpy = jest.spyOn(document, 'removeEventListener');
+
+    const { unmount } = render(<SplitContainer {...defaultProps} />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+    fireEvent.mouseDown(splitter, { clientX: 400, clientY: 300 });
+
+    unmount();
+
+    // Should clean up listeners
+    expect(removeEventListenerSpy).toHaveBeenCalled();
+
+    removeEventListenerSpy.mockRestore();
+  });
+
+  it('handles edge case with zero container size', () => {
+    // Mock zero-size container
+    Element.prototype.getBoundingClientRect = jest.fn(() => ({
+      width: 0,
+      height: 0,
+      left: 0,
+      top: 0,
+      right: 0,
+      bottom: 0
+    }));
+
+    render(<SplitContainer {...defaultProps} />);
+
+    const splitter = document.querySelector('.split-container__splitter');
+
+    // Should not crash with zero-size container
+    fireEvent.mouseDown(splitter, { clientX: 400, clientY: 300 });
+    fireEvent.mouseMove(document, { clientX: 300, clientY: 300 });
+
+    expect(screen.getByTestId('left-panel')).toBeInTheDocument();
+  });
+});
+