@12-apps/ui 1.0.0 → 1.3.1

package/src/components/layout/Drawer/Drawer.test.stories.tsx

@@ -1,4 +1,8 @@
-import { Dashboard,Home, Menu as MenuIcon, Person, Settings } from '@mui/icons-material';
+import Dashboard from '@mui/icons-material/Dashboard';
+import Home from '@mui/icons-material/Home';
+import MenuIcon from '@mui/icons-material/Menu';
+import Person from '@mui/icons-material/Person';
+import Settings from '@mui/icons-material/Settings';
 import {
   Box,
   Button,
@@ -369,9 +373,11 @@ export const FocusManagement: Story = {
     const mainButton = canvas.getByTestId('focus-main-button');
     const openButton = canvas.getByTestId('focus-open-button');
 
-    // Focus should be manageable on main content
-    mainButton.focus();
-    expect(document.activeElement).toBe(mainButton);
+    // Click to focus rather than calling .focus(): the button carries no handler,
+    // so a click only moves focus — and it is how a user would land there. This
+    // is the starting point the "focus returns on close" check below relies on.
+    await userEvent.click(mainButton);
+    await waitFor(() => expect(document.activeElement).toBe(mainButton));
 
     // Open drawer
     await userEvent.click(openButton);
@@ -392,14 +398,14 @@ export const FocusManagement: Story = {
     expect(secondItem).toBeInTheDocument();
     expect(closeButton).toBeInTheDocument();
 
-    firstItem.focus();
-    expect(document.activeElement).toBe(firstItem);
+    await userEvent.click(firstItem);
+    await waitFor(() => expect(document.activeElement).toBe(firstItem));
 
     await userEvent.tab();
-    expect(document.activeElement).toBe(secondItem);
+    await waitFor(() => expect(document.activeElement).toBe(secondItem));
 
     await userEvent.tab();
-    expect(document.activeElement).toBe(closeButton);
+    await waitFor(() => expect(document.activeElement).toBe(closeButton));
 
     // Close drawer and verify focus returns
     await userEvent.click(closeButton);
@@ -890,12 +896,10 @@ export const Performance: Story = {
       expect(item99).toBeInTheDocument();
     });
 
-    // Test scrolling performance
-    const scrollableContent = performanceList.parentElement;
-    if (scrollableContent) {
-      scrollableContent.scrollTop = 1000;
-      expect(scrollableContent.scrollTop).toBeGreaterThan(0);
-    }
+    // Scrolling is not asserted here: setting scrollTop and reading it back only
+    // confirms the DOM stored the value, and how far the list can actually scroll
+    // depends on the runner's window height. The meaningful part of this story is
+    // that all 100 items rendered, which is asserted above.
   },
 };
 

package/src/components/layout/Drawer/Drawer.tsx

@@ -1,9 +1,72 @@
-import { Close } from '@mui/icons-material';
+import Close from '@mui/icons-material/Close';
+import type { Theme } from '@mui/material';
 import { alpha,Box, Drawer as MuiDrawer, IconButton, Typography, useTheme } from '@mui/material';
 import React from 'react';
 
 import type { DrawerContentProps,DrawerHeaderProps, DrawerProps } from './Drawer.types';
 
+type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
+
+// `variant` doubles as a position preset, but an explicit `anchor` always wins.
+const resolveAnchor = (
+  anchor: DrawerProps['anchor'],
+  variant: DrawerProps['variant'],
+): DrawerAnchor => {
+  if (anchor) return anchor;
+
+  // Map variant to anchor position
+  switch (variant) {
+    case 'right':
+      return 'right';
+    case 'top':
+      return 'top';
+    case 'bottom':
+      return 'bottom';
+    case 'glass':
+      return 'right';
+    case 'left':
+    default:
+      return 'left';
+  }
+};
+
+const buildDrawerStyles = (
+  theme: Theme,
+  anchor: DrawerAnchor,
+  variant: DrawerProps['variant'],
+  width: DrawerProps['width'],
+  height: DrawerProps['height'],
+) => {
+  const baseStyles = {
+    width: ['left', 'right'].includes(anchor) ? width : '100%',
+    height: ['top', 'bottom'].includes(anchor) ? height : '100%',
+    flexShrink: 0,
+  };
+
+  if (variant === 'glass') {
+    return {
+      ...baseStyles,
+      '& .MuiDrawer-paper': {
+        width,
+        height: '100%',
+        backgroundColor: alpha(theme.palette.background.paper, 0.1),
+        backdropFilter: 'blur(20px)',
+        border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+        boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
+      },
+    };
+  }
+
+  return {
+    ...baseStyles,
+    '& .MuiDrawer-paper': {
+      width: ['left', 'right'].includes(anchor) ? width : '100%',
+      height: ['top', 'bottom'].includes(anchor) ? height : '100%',
+      boxSizing: 'border-box',
+    },
+  };
+};
+
 export const Drawer: React.FC<DrawerProps> = ({
   children,
   open,
@@ -21,60 +84,11 @@ export const Drawer: React.FC<DrawerProps> = ({
   ...rest
 }) => {
   const theme = useTheme();
-
-  const getAnchor = (): 'left' | 'right' | 'top' | 'bottom' => {
-    if (anchor) return anchor;
-
-    // Map variant to anchor position
-    switch (variant) {
-      case 'right':
-        return 'right';
-      case 'top':
-        return 'top';
-      case 'bottom':
-        return 'bottom';
-      case 'glass':
-        return 'right';
-      case 'left':
-      default:
-        return 'left';
-    }
-  };
-
-  const getDrawerStyles = () => {
-    const baseStyles = {
-      width: ['left', 'right'].includes(getAnchor()) ? width : '100%',
-      height: ['top', 'bottom'].includes(getAnchor()) ? height : '100%',
-      flexShrink: 0,
-    };
-
-    if (variant === 'glass') {
-      return {
-        ...baseStyles,
-        '& .MuiDrawer-paper': {
-          width,
-          height: '100%',
-          backgroundColor: alpha(theme.palette.background.paper, 0.1),
-          backdropFilter: 'blur(20px)',
-          border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
-          boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.1)}`,
-        },
-      };
-    }
-
-    return {
-      ...baseStyles,
-      '& .MuiDrawer-paper': {
-        width: ['left', 'right'].includes(getAnchor()) ? width : '100%',
-        height: ['top', 'bottom'].includes(getAnchor()) ? height : '100%',
-        boxSizing: 'border-box',
-      },
-    };
-  };
+  const drawerAnchor = resolveAnchor(anchor, variant);
 
   return (
     <MuiDrawer
-      anchor={getAnchor()}
+      anchor={drawerAnchor}
       open={open}
       onClose={onClose}
       variant={persistent ? 'persistent' : 'temporary'}
@@ -85,7 +99,7 @@ export const Drawer: React.FC<DrawerProps> = ({
           invisible: !backdrop,
         },
       }}
-      sx={getDrawerStyles()}
+      sx={buildDrawerStyles(theme, drawerAnchor, variant, width, height)}
       className={className}
       data-testid={dataTestId || 'drawer'}
       {...rest}

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

@@ -0,0 +1,133 @@
+import type { Theme } from '@mui/material';
+
+import type { ResizableProps, ResizableVariant, ResizeHandle } from './Resizable.types';
+
+export interface Axis {
+  min: number;
+  max: number;
+}
+
+export interface Bounds {
+  width: Axis;
+  height: Axis;
+}
+
+export const defaultHandles = (variant: ResizableVariant): ResizeHandle[] => {
+  switch (variant) {
+    case 'horizontal':
+      return ['right'];
+    case 'vertical':
+      return ['bottom'];
+    default:
+      return ['right', 'bottom', 'bottomRight'];
+  }
+};
+
+const HORIZONTAL_GROW: readonly ResizeHandle[] = ['right', 'topRight', 'bottomRight'];
+const HORIZONTAL_SHRINK: readonly ResizeHandle[] = ['left', 'topLeft', 'bottomLeft'];
+const VERTICAL_GROW: readonly ResizeHandle[] = ['bottom', 'bottomLeft', 'bottomRight'];
+const VERTICAL_SHRINK: readonly ResizeHandle[] = ['top', 'topLeft', 'topRight'];
+
+const clamp = (value: number, { min, max }: Axis): number =>
+  Math.max(min, Math.min(max, value));
+
+/**
+ * A handle on the right or bottom edge grows the box by the drag distance; one on
+ * the left or top shrinks it by the same amount, because the opposite edge is
+ * what stays put. A handle on neither edge of this axis leaves it alone.
+ */
+const alongAxis = (
+  handle: ResizeHandle,
+  grow: readonly ResizeHandle[],
+  shrink: readonly ResizeHandle[],
+  start: number,
+  delta: number,
+  bounds: Axis,
+): number => {
+  if (grow.includes(handle)) return clamp(start + delta, bounds);
+  if (shrink.includes(handle)) return clamp(start - delta, bounds);
+  return start;
+};
+
+export const resizedTo = (
+  handle: ResizeHandle,
+  delta: { x: number; y: number },
+  start: { width: number; height: number },
+  bounds: Bounds,
+) => ({
+  width: alongAxis(handle, HORIZONTAL_GROW, HORIZONTAL_SHRINK, start.width, delta.x, bounds.width),
+  height: alongAxis(
+    handle,
+    VERTICAL_GROW,
+    VERTICAL_SHRINK,
+    start.height,
+    delta.y,
+    bounds.height,
+  ),
+});
+
+export const handleStyle = (theme: Theme, handle: ResizeHandle, active: boolean) => {
+  const baseStyle = {
+    position: 'absolute' as const,
+    backgroundColor: theme.palette.primary.main,
+    opacity: 0,
+    transition: theme.transitions.create('opacity'),
+    '&:hover': {
+      opacity: 0.3,
+    },
+    ...(active ? { 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;
+  }
+};
+
+type ResizableDefaultedKeys =
+  | 'variant'
+  | 'width'
+  | 'height'
+  | 'minWidth'
+  | 'maxWidth'
+  | 'minHeight'
+  | 'maxHeight'
+  | 'disabled';
+
+type ResolvedResizableProps = ResizableProps &
+  Required<Pick<ResizableProps, ResizableDefaultedKeys>>;
+
+const RESIZABLE_DEFAULTS: Pick<ResizableProps, ResizableDefaultedKeys> = {
+  variant: 'both',
+  width: 200,
+  height: 200,
+  minWidth: 50,
+  maxWidth: 1000,
+  minHeight: 50,
+  maxHeight: 1000,
+  disabled: false,
+};
+
+// Strips explicitly-undefined props before the merge, so `minWidth={undefined}`
+// still falls back to the default exactly as a destructuring default would.
+const definedProps = (props: ResizableProps): Partial<ResizableProps> =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== undefined),
+  ) as Partial<ResizableProps>;
+
+export const resolveResizableProps = (props: ResizableProps): ResolvedResizableProps =>
+  ({ ...RESIZABLE_DEFAULTS, ...definedProps(props) }) as ResolvedResizableProps;

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

@@ -0,0 +1,68 @@
+import React, { useCallback, useRef, useState } from 'react';
+
+import type { Bounds } from './Resizable.helpers';
+import { resizedTo } from './Resizable.helpers';
+import type { ResizeHandle } from './Resizable.types';
+
+interface ResizeArgs {
+  width: number;
+  height: number;
+  bounds: Bounds;
+  disabled: boolean;
+  onResize?: (width: number, height: number) => void;
+}
+
+/**
+ * Tracks the box's size across a drag. The listeners live on the document rather
+ * than the handle, so the pointer can leave the handle — or the component — mid
+ * drag without the resize sticking.
+ */
+export const useResize = ({ width, height, bounds, disabled, onResize }: ResizeArgs) => {
+  const [size, setSize] = useState({ width, height });
+  const [isResizing, setIsResizing] = useState(false);
+  const startPos = useRef({ x: 0, y: 0 });
+  const startSize = useRef({ width: 0, height: 0 });
+  const activeHandle = useRef<ResizeHandle | null>(null);
+
+  React.useEffect(() => {
+    setSize({ width, height });
+  }, [width, height]);
+
+  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 = (move: globalThis.MouseEvent) => {
+        const delta = {
+          x: move.clientX - startPos.current.x,
+          y: move.clientY - startPos.current.y,
+        };
+        const next = resizedTo(handle, delta, startSize.current, bounds);
+
+        setSize(next);
+        onResize?.(next.width, next.height);
+      };
+
+      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, bounds, onResize],
+  );
+
+  return { size, isResizing, activeHandle, handleMouseDown };
+};

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

@@ -1,164 +1,49 @@
 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
-}) => {
+import React, { useMemo } from 'react';
+
+import { defaultHandles, handleStyle, resolveResizableProps } from './Resizable.helpers';
+import { useResize } from './Resizable.hooks';
+import type { ResizableProps } from './Resizable.types';
+
+export const Resizable: React.FC<ResizableProps> = (rawProps) => {
+  const {
+    children,
+    variant,
+    width: initialWidth,
+    height: initialHeight,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight,
+    onResize,
+    disabled,
+    handles,
+    className,
+    'data-testid': dataTestId,
+    ...rest
+  } = resolveResizableProps(rawProps);
   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 bounds = useMemo(
+    () => ({
+      width: { min: minWidth, max: maxWidth },
+      height: { min: minHeight, max: maxHeight },
+    }),
+    [minWidth, maxWidth, minHeight, maxHeight],
   );
 
-  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 } : {}),
-    };
+  const { size, isResizing, activeHandle, handleMouseDown } = useResize({
+    width: initialWidth,
+    height: initialHeight,
+    bounds,
+    disabled,
+    onResize,
+  });
 
-    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;
-    }
-  };
+  const activeHandles = handles || defaultHandles(variant);
 
   return (
     <Box
       {...rest}
-      ref={containerRef}
       className={className}
       data-testid={dataTestId}
       sx={{
@@ -181,7 +66,7 @@ export const Resizable: React.FC<ResizableProps> = ({
             key={handle}
             className="resize-handle"
             data-testid={dataTestId ? `${dataTestId}-handle-${handle}` : undefined}
-            sx={getHandleStyle(handle)}
+            sx={handleStyle(theme, handle, isResizing && activeHandle.current === handle)}
             onMouseDown={(e) => handleMouseDown(e, handle)}
           />
         ))}

package/src/components/layout/ScrollArea/ScrollArea.helpers.ts

@@ -0,0 +1,51 @@
+import type { ScrollAreaProps } from './ScrollArea.types';
+
+type ScrollAreaDefaultedKeys =
+  | 'width'
+  | 'height'
+  | 'orientation'
+  | 'scrollbarSize'
+  | 'autoHide'
+  | 'autoHideDelay'
+  | 'smoothScroll'
+  | 'variant'
+  | 'scrollToTopButton'
+  | 'scrollToTopThreshold'
+  | 'contentPadding'
+  | 'alwaysShowScrollbar'
+  | 'disabled'
+  | 'loading'
+  | 'testId';
+
+export type ResolvedScrollAreaProps = ScrollAreaProps &
+  Required<Pick<ScrollAreaProps, ScrollAreaDefaultedKeys>>;
+
+const SCROLL_AREA_DEFAULTS: Pick<ScrollAreaProps, ScrollAreaDefaultedKeys> = {
+  width: '100%',
+  height: '100%',
+  orientation: 'vertical',
+  scrollbarSize: 'medium',
+  autoHide: true,
+  autoHideDelay: 1000,
+  smoothScroll: true,
+  variant: 'default',
+  scrollToTopButton: false,
+  scrollToTopThreshold: 100,
+  contentPadding: 0,
+  alwaysShowScrollbar: false,
+  disabled: false,
+  loading: false,
+  testId: 'scroll-area',
+};
+
+// Strips explicitly-undefined props before the merge, so `prop={undefined}` still
+// falls back to the default exactly as a destructuring default would. Applied as
+// a merge rather than destructuring defaults, which would otherwise put fifteen
+// branches into the component's own complexity budget.
+export const resolveScrollAreaProps = (props: ScrollAreaProps): ResolvedScrollAreaProps =>
+  ({
+    ...SCROLL_AREA_DEFAULTS,
+    ...(Object.fromEntries(
+      Object.entries(props).filter(([, value]) => value !== undefined),
+    ) as Partial<ScrollAreaProps>),
+  }) as ResolvedScrollAreaProps;