@12-apps/ui 1.0.0

package/src/components/layout/Resizable/Resizable.tsx

@@ -0,0 +1,190 @@
+import { Box, useTheme } from '@mui/material';
+import React, { useCallback, useRef,useState } from 'react';
+
+import type { ResizableProps, ResizeHandle } from './Resizable.types';
+
+export const Resizable: React.FC<ResizableProps> = ({
+  children,
+  variant = 'both',
+  width: initialWidth = 200,
+  height: initialHeight = 200,
+  minWidth = 50,
+  maxWidth = 1000,
+  minHeight = 50,
+  maxHeight = 1000,
+  onResize,
+  disabled = false,
+  handles,
+  className,
+  'data-testid': dataTestId,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const [size, setSize] = useState({ width: initialWidth, height: initialHeight });
+  const [isResizing, setIsResizing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const startPos = useRef({ x: 0, y: 0 });
+  const startSize = useRef({ width: 0, height: 0 });
+  const activeHandle = useRef<ResizeHandle | null>(null);
+
+  const getDefaultHandles = (): ResizeHandle[] => {
+    switch (variant) {
+      case 'horizontal':
+        return ['right'];
+      case 'vertical':
+        return ['bottom'];
+      case 'both':
+        return ['right', 'bottom', 'bottomRight'];
+      default:
+        return ['right', 'bottom', 'bottomRight'];
+    }
+  };
+
+  const activeHandles = handles || getDefaultHandles();
+
+  React.useEffect(() => {
+    setSize({ width: initialWidth, height: initialHeight });
+  }, [initialWidth, initialHeight]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent, handle: ResizeHandle) => {
+      if (disabled) return;
+
+      e.preventDefault();
+      e.stopPropagation();
+
+      setIsResizing(true);
+      activeHandle.current = handle;
+      startPos.current = { x: e.clientX, y: e.clientY };
+      startSize.current = { width: size.width, height: size.height };
+
+      const handleMouseMove = (e: globalThis.MouseEvent) => {
+        const deltaX = e.clientX - startPos.current.x;
+        const deltaY = e.clientY - startPos.current.y;
+
+        let newWidth = startSize.current.width;
+        let newHeight = startSize.current.height;
+
+        switch (handle) {
+          case 'right':
+          case 'topRight':
+          case 'bottomRight':
+            newWidth = Math.max(minWidth, Math.min(maxWidth, startSize.current.width + deltaX));
+            break;
+          case 'left':
+          case 'topLeft':
+          case 'bottomLeft':
+            newWidth = Math.max(minWidth, Math.min(maxWidth, startSize.current.width - deltaX));
+            break;
+        }
+
+        switch (handle) {
+          case 'bottom':
+          case 'bottomLeft':
+          case 'bottomRight':
+            newHeight = Math.max(minHeight, Math.min(maxHeight, startSize.current.height + deltaY));
+            break;
+          case 'top':
+          case 'topLeft':
+          case 'topRight':
+            newHeight = Math.max(minHeight, Math.min(maxHeight, startSize.current.height - deltaY));
+            break;
+        }
+
+        const newSize = { width: newWidth, height: newHeight };
+        setSize(newSize);
+        onResize?.(newWidth, newHeight);
+      };
+
+      const handleMouseUp = () => {
+        setIsResizing(false);
+        activeHandle.current = null;
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+      };
+
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    },
+    [disabled, size, minWidth, maxWidth, minHeight, maxHeight, onResize],
+  );
+
+  const getHandleStyle = (handle: ResizeHandle) => {
+    const baseStyle = {
+      position: 'absolute' as const,
+      backgroundColor: theme.palette.primary.main,
+      opacity: 0,
+      transition: theme.transitions.create('opacity'),
+      '&:hover': {
+        opacity: 0.3,
+      },
+      ...(isResizing && activeHandle.current === handle ? { opacity: 0.5 } : {}),
+    };
+
+    switch (handle) {
+      case 'right':
+        return {
+          ...baseStyle,
+          top: 0,
+          right: -2,
+          width: 4,
+          height: '100%',
+          cursor: 'ew-resize',
+        };
+      case 'bottom':
+        return {
+          ...baseStyle,
+          bottom: -2,
+          left: 0,
+          width: '100%',
+          height: 4,
+          cursor: 'ns-resize',
+        };
+      case 'bottomRight':
+        return {
+          ...baseStyle,
+          bottom: -2,
+          right: -2,
+          width: 8,
+          height: 8,
+          cursor: 'nw-resize',
+          borderRadius: '50%',
+        };
+      default:
+        return baseStyle;
+    }
+  };
+
+  return (
+    <Box
+      {...rest}
+      ref={containerRef}
+      className={className}
+      data-testid={dataTestId}
+      sx={{
+        position: 'relative',
+        width: size.width,
+        height: size.height,
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: theme.spacing(0.5),
+        overflow: 'hidden',
+        userSelect: isResizing ? 'none' : 'auto',
+        '&:hover .resize-handle': {
+          opacity: 0.3,
+        },
+      }}
+    >
+      {children}
+      {!disabled &&
+        activeHandles.map((handle) => (
+          <Box
+            key={handle}
+            className="resize-handle"
+            data-testid={dataTestId ? `${dataTestId}-handle-${handle}` : undefined}
+            sx={getHandleStyle(handle)}
+            onMouseDown={(e) => handleMouseDown(e, handle)}
+          />
+        ))}
+    </Box>
+  );
+};

package/src/components/layout/Resizable/Resizable.types.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+
+export type ResizableVariant = 'horizontal' | 'vertical' | 'both';
+export type ResizeHandle =
+  | 'top'
+  | 'right'
+  | 'bottom'
+  | 'left'
+  | 'topRight'
+  | 'bottomRight'
+  | 'bottomLeft'
+  | 'topLeft';
+
+export interface ResizableProps {
+  children: ReactNode;
+  variant?: ResizableVariant;
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  minHeight?: number;
+  maxHeight?: number;
+  onResize?: (width: number, height: number) => void;
+  disabled?: boolean;
+  handles?: ResizeHandle[];
+  className?: string;
+  /**
+   * The data-testid attribute for the resizable container.
+   * Also generates testIds for child elements:
+   * - `{dataTestId}-container` - Main resizable container
+   * - `{dataTestId}-handle-{handlePosition}` - Individual resize handles (e.g., "resizable-handle-right")
+   */
+  'data-testid'?: string;
+}

package/src/components/layout/Resizable/index.ts

@@ -0,0 +1,2 @@
+export { Resizable } from './Resizable';
+export type { ResizableProps, ResizableVariant, ResizeHandle } from './Resizable.types';

package/src/components/layout/ScrollArea/ScrollArea.md

@@ -0,0 +1,122 @@
+# ScrollArea Component
+
+A custom scrollable area component that provides styled scrollbars and smooth scrolling behavior. The ScrollArea component wraps content in a scrollable container with customizable scrollbar appearance, auto-hide functionality, and native scroll behavior options.
+
+## Features
+
+- **Customizable Scrollbars**: Thin, medium, or thick scrollbar sizes
+- **Visual Variants**: Default, overlay, and glass effect variants
+- **Orientation Support**: Vertical, horizontal, or both scroll directions
+- **Auto-hide Scrollbars**: Scrollbars can automatically hide when not in use
+- **Smooth Scrolling**: Optional smooth scrolling behavior
+- **Scroll-to-Top Button**: Configurable scroll-to-top functionality
+- **Empty State**: Display custom content when no scrollable content is present
+- **Loading State**: Show loading indicator during content loading
+- **Responsive Design**: Supports responsive width and height configurations
+
+## Props
+
+| Prop                   | Type                                   | Default      | Description                                         |
+| ---------------------- | -------------------------------------- | ------------ | --------------------------------------------------- |
+| `children`             | `ReactNode`                            | -            | Content to be rendered inside the scrollable area   |
+| `width`                | `number \| string`                     | `400`        | Width of the scroll area container                  |
+| `height`               | `number \| string`                     | `300`        | Height of the scroll area container                 |
+| `maxHeight`            | `number \| string`                     | -            | Maximum height before scrolling is enabled          |
+| `maxWidth`             | `number \| string`                     | -            | Maximum width before scrolling is enabled           |
+| `orientation`          | `'vertical' \| 'horizontal' \| 'both'` | `'vertical'` | Scroll orientation                                  |
+| `scrollbarSize`        | `'thin' \| 'medium' \| 'thick'`        | `'medium'`   | Size of the scrollbar                               |
+| `autoHide`             | `boolean`                              | `true`       | Whether scrollbars auto-hide when not in use        |
+| `smoothScroll`         | `boolean`                              | `true`       | Enable smooth scrolling behavior                    |
+| `variant`              | `'default' \| 'overlay' \| 'glass'`    | `'default'`  | Visual variant                                      |
+| `scrollToTopButton`    | `boolean`                              | `false`      | Show scroll-to-top button                           |
+| `scrollToTopThreshold` | `number`                               | `100`        | Scroll distance before showing scroll-to-top button |
+| `disabled`             | `boolean`                              | `false`      | Disable scrolling                                   |
+| `loading`              | `boolean`                              | `false`      | Loading state                                       |
+| `emptyContent`         | `ReactNode`                            | -            | Content to display when no scrollable content       |
+| `contentPadding`       | `number`                               | -            | Padding for the scrollable content                  |
+| `scrollbarColor`       | `string`                               | -            | Custom scrollbar color                              |
+| `scrollbarTrackColor`  | `string`                               | -            | Custom scrollbar track color                        |
+| `className`            | `string`                               | -            | Additional CSS class names                          |
+| `sx`                   | `SxProps`                              | -            | MUI sx prop for custom styling                      |
+| `onScroll`             | `(event: Event) => void`               | -            | Scroll event handler                                |
+
+## Usage Examples
+
+### Basic Usage
+
+```tsx
+import { ScrollArea } from '@procurement/ui';
+
+function BasicExample() {
+  return (
+    <ScrollArea width={400} height={300}>
+      <div>{/* Your scrollable content here */}</div>
+    </ScrollArea>
+  );
+}
+```
+
+### Horizontal Scrolling
+
+```tsx
+function HorizontalExample() {
+  return (
+    <ScrollArea width={400} height={200} orientation="horizontal">
+      <div style={{ display: 'flex', width: 'max-content' }}>
+        {/* Wide content that needs horizontal scrolling */}
+      </div>
+    </ScrollArea>
+  );
+}
+```
+
+### Glass Effect Variant
+
+```tsx
+function GlassExample() {
+  return (
+    <div style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
+      <ScrollArea width={400} height={300} variant="glass">
+        <div>{/* Content with glass effect backdrop */}</div>
+      </ScrollArea>
+    </div>
+  );
+}
+```
+
+### With Scroll-to-Top Button
+
+```tsx
+function ScrollToTopExample() {
+  return (
+    <ScrollArea width={400} height={300} scrollToTopButton scrollToTopThreshold={50}>
+      <div>{/* Long content that benefits from scroll-to-top */}</div>
+    </ScrollArea>
+  );
+}
+```
+
+## Accessibility
+
+The ScrollArea component includes comprehensive accessibility features:
+
+- **Keyboard Navigation**: Supports arrow keys, Page Up/Down, Home/End
+- **Screen Reader Support**: Proper ARIA labels and live regions
+- **Focus Management**: Maintains focus within scrollable content
+- **High Contrast**: Scrollbar visibility in high contrast mode
+- **Reduced Motion**: Respects `prefers-reduced-motion` for smooth scrolling
+
+## Best Practices
+
+1. **Performance**: Use virtualization for very large lists instead of ScrollArea
+2. **Mobile**: Consider native scrolling on mobile devices for better performance
+3. **Nesting**: Avoid deeply nested scroll areas as they can confuse users
+4. **Height**: Always provide explicit height or maxHeight for vertical scrolling
+5. **Content**: Use empty state when there's no content to scroll
+6. **Loading**: Show loading state during content fetch operations
+
+## Browser Compatibility
+
+- Modern browsers with CSS custom scrollbar support
+- Fallback to native scrollbars on older browsers
+- Touch device support for mobile scrolling