@jordan-mace/chaser-design-system 1.2.2 → 1.2.3

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

@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import Drawer from './Drawer';
+import React from 'react';
+
+describe('Drawer', () => {
+  it('renders correctly from left position', async () => {
+    const { container } = await render(
+      <Drawer isOpen={true} onClose={() => {}} position="left" title="Left Drawer">
+        Content
+      </Drawer>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly from right position', async () => {
+    const { container } = await render(
+      <Drawer isOpen={true} onClose={() => {}} position="right" title="Right Drawer">
+        Content
+      </Drawer>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly from top position', async () => {
+    const { container } = await render(
+      <Drawer isOpen={true} onClose={() => {}} position="top" title="Top Drawer">
+        Content
+      </Drawer>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders correctly from bottom position', async () => {
+    const { container } = await render(
+      <Drawer isOpen={true} onClose={() => {}} position="bottom" title="Bottom Drawer">
+        Content
+      </Drawer>
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('does not render when closed', async () => {
+    const { container } = await render(
+      <Drawer isOpen={false} onClose={() => {}} title="Closed Drawer">
+        Content
+      </Drawer>
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,148 @@
+import clsx from 'clsx';
+import React, { useEffect } from 'react';
+import {
+  drawer,
+  drawerPositionVariants,
+  drawerOverlay,
+  drawerHeader,
+  drawerTitle,
+  drawerCloseButton,
+  drawerBody,
+  drawerFooter,
+} from './styles.css';
+import Box from '../Box';
+
+export type DrawerPosition = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerSize = 'small' | 'medium' | 'large' | 'full';
+
+const sizeMap: Record<DrawerPosition, Record<DrawerSize, string>> = {
+  left: {
+    small: '250px',
+    medium: '350px',
+    large: '450px',
+    full: '100vw',
+  },
+  right: {
+    small: '250px',
+    medium: '350px',
+    large: '450px',
+    full: '100vw',
+  },
+  top: {
+    small: '200px',
+    medium: '300px',
+    large: '400px',
+    full: '100vh',
+  },
+  bottom: {
+    small: '200px',
+    medium: '300px',
+    large: '400px',
+    full: '100vh',
+  },
+};
+
+export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  position?: DrawerPosition;
+  size?: DrawerSize;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  showCloseButton?: boolean;
+  closeOnOverlayClick?: boolean;
+}
+
+const Drawer = ({
+  isOpen,
+  onClose,
+  title,
+  position = 'right',
+  size = 'medium',
+  children,
+  footer,
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  className,
+  ...props
+}: DrawerProps) => {
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  const dimensionStyle: React.CSSProperties = {
+    ['--drawer-width' as string]: ['left', 'right'].includes(position)
+      ? sizeMap[position][size]
+      : undefined,
+    ['--drawer-height' as string]: ['top', 'bottom'].includes(position)
+      ? sizeMap[position][size]
+      : undefined,
+  };
+
+  return (
+    <>
+      <Box
+        className={drawerOverlay}
+        onClick={closeOnOverlayClick ? onClose : undefined}
+        aria-hidden="true"
+      />
+      <Box
+        as="div"
+        role="dialog"
+        aria-modal="true"
+        className={clsx(drawer, drawerPositionVariants[position], className)}
+        style={dimensionStyle}
+        {...props}
+      >
+        {title && (
+          <Box as="div" className={drawerHeader}>
+            <Box as="h2" className={drawerTitle}>
+              {title}
+            </Box>
+            {showCloseButton && (
+              <Box
+                as="button"
+                className={drawerCloseButton}
+                onClick={onClose}
+                aria-label="Close drawer"
+                type="button"
+              >
+                ×
+              </Box>
+            )}
+          </Box>
+        )}
+
+        <Box as="div" className={drawerBody}>
+          {children}
+        </Box>
+
+        {footer && <Box as="div" className={drawerFooter}>{footer}</Box>}
+      </Box>
+    </>
+  );
+};
+
+export default Drawer;

package/src/components/Drawer/styles.css.ts

@@ -0,0 +1,138 @@
+import { style, styleVariants, keyframes } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+const slideInFromLeft = keyframes({
+  from: { transform: 'translateX(-100%)' },
+  to: { transform: 'translateX(0)' },
+});
+
+const slideInFromRight = keyframes({
+  from: { transform: 'translateX(100%)' },
+  to: { transform: 'translateX(0)' },
+});
+
+const slideInFromTop = keyframes({
+  from: { transform: 'translateY(-100%)' },
+  to: { transform: 'translateY(0)' },
+});
+
+const slideInFromBottom = keyframes({
+  from: { transform: 'translateY(100%)' },
+  to: { transform: 'translateY(0)' },
+});
+
+const fadeIn = keyframes({
+  from: { opacity: 0 },
+  to: { opacity: 1 },
+});
+
+export const drawerPositionVariants = styleVariants({
+  left: {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    width: 'var(--drawer-width, 300px)',
+    maxWidth: '100vw',
+    animation: `${slideInFromLeft} 0.3s ease-out`,
+  },
+  right: {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: 'var(--drawer-width, 300px)',
+    maxWidth: '100vw',
+    animation: `${slideInFromRight} 0.3s ease-out`,
+  },
+  top: {
+    top: 0,
+    left: 0,
+    right: 0,
+    height: 'var(--drawer-height, 300px)',
+    maxHeight: '100vh',
+    animation: `${slideInFromTop} 0.3s ease-out`,
+  },
+  bottom: {
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 'var(--drawer-height, 300px)',
+    maxHeight: '100vh',
+    animation: `${slideInFromBottom} 0.3s ease-out`,
+  },
+});
+
+export const drawerOverlay = styleWithLayer({
+  position: 'fixed',
+  inset: 0,
+  backgroundColor: 'rgba(0, 0, 0, 0.5)',
+  animation: `${fadeIn} 0.2s ease-out`,
+  zIndex: 40,
+});
+
+export const drawer = styleWithLayer({
+  position: 'fixed',
+  background: vars.colors.backgroundDefault,
+  boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+  zIndex: 50,
+  display: 'flex',
+  flexDirection: 'column',
+  overflow: 'hidden',
+});
+
+export const drawerHeader = styleWithLayer({
+  padding: '1.25rem',
+  borderBottom: `1px solid ${vars.colors.borderMuted}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  gap: '1rem',
+});
+
+export const drawerTitle = styleWithLayer({
+  fontFamily: vars.fontFamily.heading,
+  fontSize: '1.25rem',
+  fontWeight: '600',
+  color: vars.colors.textPrimary,
+  margin: 0,
+});
+
+export const drawerCloseButton = styleWithLayer({
+  background: 'none',
+  border: 'none',
+  padding: '0.5rem',
+  cursor: 'pointer',
+  borderRadius: '0.375rem',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  color: vars.colors.textSecondary,
+  fontSize: '1.5rem',
+  lineHeight: '1',
+  transition: 'background-color 0.2s ease-in-out, color 0.2s ease-in-out',
+  selectors: {
+    '&:hover': {
+      backgroundColor: vars.colors.borderMuted,
+      color: vars.colors.textPrimary,
+    },
+    '&:focus-visible': {
+      outline: '2px solid var(--drawer-focus-ring, currentColor)',
+      outlineOffset: '2px',
+    },
+  },
+});
+
+export const drawerBody = styleWithLayer({
+  padding: '1.25rem',
+  overflowY: 'auto',
+  flex: 1,
+});
+
+export const drawerFooter = styleWithLayer({
+  padding: '1.25rem',
+  borderTop: `1px solid ${vars.colors.borderMuted}`,
+  display: 'flex',
+  gap: '0.75rem',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+});

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { fn } from 'storybook/test';
+import React from 'react';
+import { DropdownMenu } from '.';
+import { Button } from '../Button';
+
+const meta = {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof DropdownMenu>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Open Menu" />,
+    items: [
+      { label: 'Edit', onClick: fn() },
+      { label: 'Duplicate', onClick: fn() },
+      { label: 'Delete', variant: 'destructive', onClick: fn() },
+    ],
+  },
+};
+
+export const WithGroups: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Menu with Groups" />,
+    groups: [
+      {
+        label: 'Actions',
+        items: [
+          { label: 'Edit', onClick: fn() },
+          { label: 'Duplicate', onClick: fn() },
+        ],
+      },
+      {
+        label: 'Danger Zone',
+        items: [
+          { label: 'Archive', onClick: fn() },
+          { label: 'Delete', variant: 'destructive', onClick: fn() },
+        ],
+      },
+    ],
+  },
+};
+
+export const WithIcons: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Menu with Icons" />,
+    items: [
+      { label: 'Edit', icon: '✏️', onClick: fn() },
+      { label: 'Copy', icon: '📋', onClick: fn() },
+      { label: 'Delete', icon: '🗑️', variant: 'destructive', onClick: fn() },
+    ],
+  },
+};
+
+export const PositionBottomRight: Story = {
+  args: {
+    trigger: <Button variant="primary" label="Bottom Right" />,
+    position: 'bottomRight',
+    items: [
+      { label: 'Option 1', onClick: fn() },
+      { label: 'Option 2', onClick: fn() },
+    ],
+  },
+};

package/src/components/DropdownMenu/DropdownMenu.test.tsx

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { render } from 'vitest-browser-react';
+import DropdownMenu from './DropdownMenu';
+import React from 'react';
+import { Button } from '../Button';
+
+describe('DropdownMenu', () => {
+  const items = [
+    { label: 'Option 1', onClick: () => {} },
+    { label: 'Option 2', onClick: () => {} },
+    { label: 'Option 3', variant: 'destructive' as const, onClick: () => {} },
+  ];
+
+  it('renders with button trigger', async () => {
+    const { container } = await render(
+      <DropdownMenu trigger={<Button variant="primary" label="Open Menu" />} items={items} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+
+  it('renders with groups', async () => {
+    const groups = [
+      {
+        label: 'Group 1',
+        items: [
+          { label: 'Item 1', onClick: () => {} },
+          { label: 'Item 2', onClick: () => {} },
+        ],
+      },
+      {
+        label: 'Group 2',
+        items: [
+          { label: 'Item 3', onClick: () => {} },
+        ],
+      },
+    ];
+    
+    const { container } = await render(
+      <DropdownMenu trigger={<Button variant="primary" label="Menu with Groups" />} groups={groups} />
+    );
+    expect(container).toMatchScreenshot();
+  });
+});

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,156 @@
+import clsx from 'clsx';
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  dropdownMenuContainer,
+  dropdownMenuTrigger,
+  dropdownMenuContent,
+  dropdownMenuPositionVariants,
+  dropdownMenuItem,
+  dropdownMenuItemVariants,
+  dropdownMenuSeparator,
+  dropdownMenuGroup,
+  dropdownMenuLabel,
+} from './styles.css';
+import Box from '../Box';
+
+export type DropdownMenuPosition = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+export type DropdownMenuItemVariant = 'default' | 'destructive' | 'disabled';
+
+export interface DropdownMenuItemProps {
+  label: string;
+  onClick?: () => void;
+  variant?: DropdownMenuItemVariant;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface DropdownMenuGroupProps {
+  label?: string;
+  items: DropdownMenuItemProps[];
+}
+
+export interface DropdownMenuProps extends React.HTMLAttributes<HTMLDivElement> {
+  trigger: React.ReactNode;
+  items?: DropdownMenuItemProps[];
+  groups?: DropdownMenuGroupProps[];
+  position?: DropdownMenuPosition;
+  closeOnItemClick?: boolean;
+}
+
+const DropdownMenu = ({
+  trigger,
+  items = [],
+  groups = [],
+  position = 'bottomLeft',
+  closeOnItemClick = true,
+  className,
+  ...props
+}: DropdownMenuProps) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isOpen) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isOpen]);
+
+  const handleItemClick = (item: DropdownMenuItemProps) => {
+    if (item.disabled || item.variant === 'disabled') return;
+    
+    item.onClick?.();
+    if (closeOnItemClick) {
+      setIsOpen(false);
+    }
+  };
+
+  const renderItem = (item: DropdownMenuItemProps, index: number) => (
+    <Box
+      key={index}
+      as="button"
+      className={clsx(
+        dropdownMenuItem,
+        dropdownMenuItemVariants[item.disabled || item.variant === 'disabled' ? 'disabled' : item.variant || 'default'],
+      )}
+      onClick={() => handleItemClick(item)}
+      disabled={item.disabled || item.variant === 'disabled'}
+      role="menuitem"
+      type="button"
+    >
+      {item.icon && <span>{item.icon}</span>}
+      {item.label}
+    </Box>
+  );
+
+  const renderGroup = (group: DropdownMenuGroupProps, index: number) => (
+    <Box key={index} className={dropdownMenuGroup} role="group">
+      {group.label && (
+        <Box as="div" className={dropdownMenuLabel} role="presentation">
+          {group.label}
+        </Box>
+      )}
+      {group.items.map((item, itemIndex) => renderItem(item, itemIndex))}
+    </Box>
+  );
+
+  return (
+    <Box
+      ref={containerRef}
+      className={clsx(dropdownMenuContainer, className)}
+      {...props}
+    >
+      <Box
+        className={dropdownMenuTrigger}
+        onClick={() => setIsOpen(!isOpen)}
+        aria-expanded={isOpen}
+        aria-haspopup="true"
+      >
+        {trigger}
+      </Box>
+      
+      {isOpen && (
+        <Box
+          className={clsx(dropdownMenuContent, dropdownMenuPositionVariants[position])}
+          role="menu"
+          aria-orientation="vertical"
+        >
+          {items.length > 0 && (
+            <Box className={dropdownMenuGroup}>
+              {items.map((item, index) => renderItem(item, index))}
+            </Box>
+          )}
+          
+          {groups.map((group, index) => (
+            <React.Fragment key={index}>
+              {index > 0 && <Box as="div" className={dropdownMenuSeparator} role="separator" />}
+              {renderGroup(group, index)}
+            </React.Fragment>
+          ))}
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default DropdownMenu;

package/src/components/DropdownMenu/styles.css.ts

@@ -0,0 +1,102 @@
+import { style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../../styles/theme.css';
+import { styleWithLayer } from '../../styles/utils';
+
+export const dropdownMenuContainer = styleWithLayer({
+  position: 'relative',
+  display: 'inline-block',
+});
+
+export const dropdownMenuTrigger = styleWithLayer({
+  cursor: 'pointer',
+  userSelect: 'none',
+});
+
+export const dropdownMenuContent = styleWithLayer({
+  position: 'absolute',
+  backgroundColor: vars.colors.backgroundDefault,
+  border: `1px solid ${vars.colors.borderDefault}`,
+  borderRadius: '0.5rem',
+  boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+  minWidth: '160px',
+  zIndex: 50,
+  overflow: 'hidden',
+  marginTop: '0.25rem',
+});
+
+export const dropdownMenuPositionVariants = styleVariants({
+  bottomLeft: {
+    top: '100%',
+    left: 0,
+  },
+  bottomRight: {
+    top: '100%',
+    right: 0,
+  },
+  topLeft: {
+    bottom: '100%',
+    left: 0,
+    marginTop: 0,
+    marginBottom: '0.25rem',
+  },
+  topRight: {
+    bottom: '100%',
+    right: 0,
+    marginTop: 0,
+    marginBottom: '0.25rem',
+  },
+});
+
+export const dropdownMenuItem = styleWithLayer({
+  padding: '0.75rem 1rem',
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.5rem',
+  fontSize: '14px',
+  color: vars.colors.textPrimary,
+  transition: 'background-color 0.15s ease',
+  ':hover': {
+    backgroundColor: vars.colors.backgroundMuted,
+  },
+  ':focus-visible': {
+    outline: 'none',
+    backgroundColor: vars.colors.backgroundMuted,
+  },
+});
+
+export const dropdownMenuItemVariants = styleVariants({
+  default: {},
+  destructive: {
+    color: vars.colors.alertErrorText,
+    ':hover': {
+      backgroundColor: vars.colors.alertErrorBackground,
+    },
+  },
+  disabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+    ':hover': {
+      backgroundColor: 'transparent',
+    },
+  },
+});
+
+export const dropdownMenuSeparator = styleWithLayer({
+  height: '1px',
+  backgroundColor: vars.colors.borderMuted,
+  margin: '0.5rem 0',
+});
+
+export const dropdownMenuGroup = styleWithLayer({
+  padding: '0.5rem 0',
+});
+
+export const dropdownMenuLabel = styleWithLayer({
+  padding: '0.5rem 1rem',
+  fontSize: '12px',
+  fontWeight: '600',
+  color: vars.colors.textSecondary,
+  textTransform: 'uppercase',
+  letterSpacing: '0.05em',
+});