tharaday 0.8.2 → 0.8.3

package/src/components/Drawer/Drawer.module.css

@@ -0,0 +1,126 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  background-color: var(--ds-overlay);
+  z-index: 1000;
+  display: flex;
+}
+
+.drawer {
+  background-color: var(--ds-surface-0);
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--ds-shadow-lg);
+  overflow: hidden;
+  font-family: var(--ds-font-family-base);
+}
+
+/* Placement */
+.right {
+  margin-left: auto;
+  height: 100%;
+}
+.left {
+  margin-right: auto;
+  height: 100%;
+}
+.top {
+  width: 100%;
+  margin-bottom: auto;
+}
+.bottom {
+  width: 100%;
+  margin-top: auto;
+}
+
+/* Sizes — width for left/right */
+.left.sm,
+.right.sm {
+  width: var(--ds-content-width-sm);
+}
+.left.md,
+.right.md {
+  width: var(--ds-content-width-md);
+}
+.left.lg,
+.right.lg {
+  width: var(--ds-content-width-lg);
+}
+.left.xl,
+.right.xl {
+  width: var(--ds-content-width-xl);
+}
+.left.full,
+.right.full {
+  width: 100%;
+}
+
+/* Sizes — height for top/bottom */
+.top.sm,
+.bottom.sm {
+  height: 20vh;
+}
+.top.md,
+.bottom.md {
+  height: 40vh;
+}
+.top.lg,
+.bottom.lg {
+  height: 60vh;
+}
+.top.xl,
+.bottom.xl {
+  height: 80vh;
+}
+.top.full,
+.bottom.full {
+  height: 100%;
+}
+
+.header {
+  padding: var(--ds-space-4);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--ds-border-2);
+  flex-shrink: 0;
+}
+
+.title {
+  margin: 0;
+  font-size: var(--ds-font-size-lg);
+  font-weight: var(--ds-font-weight-bold);
+  color: var(--ds-text-1);
+}
+
+/* Double class for specificity over Button size rules */
+.closeButton.closeButton {
+  padding: 0;
+  width: var(--ds-space-8);
+  height: var(--ds-space-8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  padding: var(--ds-space-6);
+  overflow-y: auto;
+  flex: 1;
+}
+
+.footer {
+  padding: var(--ds-space-4);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--ds-space-3);
+  border-top: 1px solid var(--ds-border-2);
+  background-color: var(--ds-surface-1);
+  flex-shrink: 0;
+}
+
+.loading {
+  opacity: 0.7;
+  pointer-events: none;
+}

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

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { Button } from '../Button/Button.tsx';
+import { Drawer } from './Drawer.tsx';
+
+const meta = {
+  title: 'Components/Drawer',
+  component: Drawer,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    placement: { control: 'select', options: ['left', 'right', 'top', 'bottom'] },
+    size: { control: 'select', options: ['sm', 'md', 'lg', 'xl', 'full'] },
+  },
+  args: {
+    isOpen: false,
+    onClose: () => {},
+  },
+} satisfies Meta<typeof Drawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const DrawerDemo = (args: React.ComponentProps<typeof Drawer>) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>Open drawer</Button>
+      <Drawer {...args} isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    </>
+  );
+};
+
+export const Right: Story = {
+  render: (args) => <DrawerDemo {...args} />,
+  args: {
+    title: 'Drawer title',
+    placement: 'right',
+    children: <p style={{ margin: 0 }}>Drawer content goes here.</p>,
+  },
+};
+
+export const Left: Story = {
+  render: (args) => <DrawerDemo {...args} />,
+  args: {
+    title: 'Left drawer',
+    placement: 'left',
+    children: <p style={{ margin: 0 }}>Drawer content goes here.</p>,
+  },
+};
+
+export const WithFooter: Story = {
+  render: (args) => <DrawerDemo {...args} />,
+  args: {
+    title: 'Confirm action',
+    children: <p style={{ margin: 0 }}>Are you sure you want to proceed?</p>,
+    footer: (
+      <>
+        <Button variant="subtle">Cancel</Button>
+        <Button intent="danger">Delete</Button>
+      </>
+    ),
+  },
+};
+
+export const Small: Story = {
+  render: (args) => <DrawerDemo {...args} />,
+  args: { title: 'Small drawer', size: 'sm', children: <p style={{ margin: 0 }}>Content.</p> },
+};

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

@@ -0,0 +1,49 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Drawer } from './Drawer.tsx';
+
+describe('Drawer', () => {
+  it('renders nothing when closed', () => {
+    render(<Drawer isOpen={false} onClose={vi.fn()} title="Test" />);
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('renders when open', () => {
+    render(<Drawer isOpen onClose={vi.fn()} title="Test drawer" />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+    expect(screen.getByText('Test drawer')).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    render(
+      <Drawer isOpen onClose={vi.fn()}>
+        <p>Drawer content</p>
+      </Drawer>
+    );
+    expect(screen.getByText('Drawer content')).toBeInTheDocument();
+  });
+
+  it('renders footer when provided', () => {
+    render(
+      <Drawer isOpen onClose={vi.fn()} footer={<button>Confirm</button>}>
+        Content
+      </Drawer>
+    );
+    expect(screen.getByRole('button', { name: 'Confirm' })).toBeInTheDocument();
+  });
+
+  it('calls onClose when close button is clicked', async () => {
+    const onClose = vi.fn();
+    render(<Drawer isOpen onClose={onClose} title="Test" />);
+    await userEvent.click(screen.getByRole('button', { name: 'Close drawer' }));
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+
+  it('calls onClose when Escape is pressed', async () => {
+    const onClose = vi.fn();
+    render(<Drawer isOpen onClose={onClose} title="Test" />);
+    await userEvent.keyboard('{Escape}');
+    expect(onClose).toHaveBeenCalledOnce();
+  });
+});

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,77 @@
+import classnames from 'classnames';
+import { createPortal } from 'react-dom';
+
+import { useComponentId } from '../../hooks/useComponentId.ts';
+import { useFocusTrap } from '../../hooks/useFocusTrap.ts';
+import { Button } from '../Button/Button.tsx';
+import styles from './Drawer.module.css';
+import type { DrawerProps } from './Drawer.types.ts';
+
+export const Drawer = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  footer,
+  placement = 'right',
+  size = 'md',
+  isLoading = false,
+  className,
+  id,
+}: DrawerProps) => {
+  const drawerRef = useFocusTrap<HTMLDivElement>({ isOpen, onClose, isLoading });
+  const componentId = useComponentId('drawer', id);
+  const titleId = `${componentId}-title`;
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return createPortal(
+    <div className={styles.overlay} onClick={() => !isLoading && onClose()}>
+      <div
+        id={componentId}
+        ref={drawerRef}
+        className={classnames(
+          styles.drawer,
+          styles[placement],
+          styles[size],
+          isLoading && styles.loading,
+          className
+        )}
+        onClick={(e) => e.stopPropagation()}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={title ? titleId : undefined}
+      >
+        <div className={styles.header}>
+          {title && (
+            <h2 id={titleId} className={styles.title}>
+              {title}
+            </h2>
+          )}
+          <Button
+            variant="subtle"
+            size="sm"
+            onClick={onClose}
+            className={styles.closeButton}
+            aria-label="Close drawer"
+            disabled={isLoading}
+          >
+            <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+              <path
+                d="M1 1L9 9M9 1L1 9"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+              />
+            </svg>
+          </Button>
+        </div>
+        <div className={styles.content}>{children}</div>
+        {footer && <div className={styles.footer}>{footer}</div>}
+      </div>
+    </div>,
+    document.body
+  );
+};

package/src/components/Drawer/Drawer.types.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from 'react';
+
+export type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+export type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface DrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  children?: ReactNode;
+  footer?: ReactNode;
+  placement?: DrawerPlacement;
+  size?: DrawerSize;
+  isLoading?: boolean;
+  className?: string;
+  id?: string;
+}

package/src/components/EmptyState/EmptyState.module.css

@@ -0,0 +1,73 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  font-family: var(--ds-font-family-base);
+}
+
+.sm {
+  gap: var(--ds-space-3);
+  padding: var(--ds-space-6);
+}
+.md {
+  gap: var(--ds-space-4);
+  padding: var(--ds-space-10);
+}
+.lg {
+  gap: var(--ds-space-6);
+  padding: var(--ds-space-14);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--ds-text-disabled);
+}
+.sm .icon {
+  width: var(--ds-space-8);
+  height: var(--ds-space-8);
+}
+.md .icon {
+  width: var(--ds-space-10);
+  height: var(--ds-space-10);
+}
+.lg .icon {
+  width: var(--ds-space-14);
+  height: var(--ds-space-14);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-space-2);
+}
+
+.title {
+  margin: 0;
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-1);
+}
+.sm .title {
+  font-size: var(--ds-font-size-sm);
+}
+.md .title {
+  font-size: var(--ds-font-size-base);
+}
+.lg .title {
+  font-size: var(--ds-font-size-lg);
+}
+
+.description {
+  margin: 0;
+  font-size: var(--ds-font-size-sm);
+  color: var(--ds-text-2);
+}
+.lg .description {
+  font-size: var(--ds-font-size-base);
+}
+
+.action {
+  margin-top: var(--ds-space-2);
+}

package/src/components/EmptyState/EmptyState.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../Button/Button.tsx';
+import { EmptyState } from './EmptyState.tsx';
+
+const SearchIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+    <circle cx="11" cy="11" r="7" />
+    <path d="M16.5 16.5L21 21" strokeLinecap="round" />
+  </svg>
+);
+
+const meta = {
+  title: 'Components/EmptyState',
+  component: EmptyState,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+  },
+} satisfies Meta<typeof EmptyState>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: 'No results found',
+    description: 'Try adjusting your search or filters.',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    title: 'No results found',
+    description: 'Try adjusting your search or filters.',
+    icon: <SearchIcon />,
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    title: 'No items yet',
+    description: 'Get started by creating your first item.',
+    icon: <SearchIcon />,
+    action: <Button size="sm">Create item</Button>,
+  },
+};
+
+export const Small: Story = {
+  args: {
+    title: 'Nothing here',
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    title: 'No results found',
+    description: "Try adjusting your search or filters to find what you're looking for.",
+    icon: <SearchIcon />,
+    action: <Button>Reset filters</Button>,
+    size: 'lg',
+  },
+};

package/src/components/EmptyState/EmptyState.test.tsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+
+import { EmptyState } from './EmptyState.tsx';
+
+describe('EmptyState', () => {
+  it('renders title', () => {
+    render(<EmptyState title="No results" />);
+    expect(screen.getByText('No results')).toBeInTheDocument();
+  });
+
+  it('renders description when provided', () => {
+    render(<EmptyState title="No results" description="Try a different search." />);
+    expect(screen.getByText('Try a different search.')).toBeInTheDocument();
+  });
+
+  it('does not render description when omitted', () => {
+    render(<EmptyState title="No results" />);
+    expect(screen.queryByText('Try a different search.')).toBeNull();
+  });
+
+  it('renders action when provided', () => {
+    render(<EmptyState title="No results" action={<button>Reset</button>} />);
+    expect(screen.getByRole('button', { name: 'Reset' })).toBeInTheDocument();
+  });
+
+  it('forwards extra props', () => {
+    render(<EmptyState title="No results" data-testid="empty" />);
+    expect(screen.getByTestId('empty')).toBeInTheDocument();
+  });
+});

package/src/components/EmptyState/EmptyState.tsx

@@ -0,0 +1,29 @@
+import classnames from 'classnames';
+
+import styles from './EmptyState.module.css';
+import type { EmptyStateProps } from './EmptyState.types.ts';
+
+export const EmptyState = ({
+  title,
+  description,
+  icon,
+  action,
+  size = 'md',
+  className,
+  ...props
+}: EmptyStateProps) => {
+  return (
+    <div className={classnames(styles.root, styles[size], className)} {...props}>
+      {icon && (
+        <div className={styles.icon} aria-hidden="true">
+          {icon}
+        </div>
+      )}
+      <div className={styles.content}>
+        <p className={styles.title}>{title}</p>
+        {description && <p className={styles.description}>{description}</p>}
+      </div>
+      {action && <div className={styles.action}>{action}</div>}
+    </div>
+  );
+};

package/src/components/EmptyState/EmptyState.types.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type EmptyStateSize = 'sm' | 'md' | 'lg';
+
+export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+  title: string;
+  description?: string;
+  icon?: ReactNode;
+  action?: ReactNode;
+  size?: EmptyStateSize;
+  className?: string;
+}

package/src/components/Header/Header.test.tsx

@@ -20,12 +20,12 @@ describe('Header', () => {
   });
 
   it('renders Log in button when onLogin is provided and no user', () => {
-    render(<Header onLogin={() => {}} />);
+    render(<Header onLogin={vi.fn()} />);
     expect(screen.getByRole('button', { name: 'Log in' })).toBeInTheDocument();
   });
 
   it('renders Sign up button when onCreateAccount is provided and no user', () => {
-    render(<Header onCreateAccount={() => {}} />);
+    render(<Header onCreateAccount={vi.fn()} />);
     expect(screen.getByRole('button', { name: 'Sign up' })).toBeInTheDocument();
   });
 
@@ -44,13 +44,13 @@ describe('Header', () => {
   });
 
   it('renders welcome message with user name when user is provided', () => {
-    render(<Header user={{ name: 'Alice' }} onLogout={() => {}} />);
+    render(<Header user={{ name: 'Alice' }} onLogout={vi.fn()} />);
     expect(screen.getByText(/Welcome/)).toBeInTheDocument();
     expect(screen.getByText('Alice')).toBeInTheDocument();
   });
 
   it('renders Log out button when user is provided', () => {
-    render(<Header user={{ name: 'Alice' }} onLogout={() => {}} />);
+    render(<Header user={{ name: 'Alice' }} onLogout={vi.fn()} />);
     expect(screen.getByRole('button', { name: 'Log out' })).toBeInTheDocument();
   });
 
@@ -62,7 +62,7 @@ describe('Header', () => {
   });
 
   it('does not render Log in or Sign up when user is present', () => {
-    render(<Header user={{ name: 'Alice' }} onLogin={() => {}} onCreateAccount={() => {}} />);
+    render(<Header user={{ name: 'Alice' }} onLogin={vi.fn()} onCreateAccount={vi.fn()} />);
     expect(screen.queryByRole('button', { name: 'Log in' })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: 'Sign up' })).not.toBeInTheDocument();
   });

package/src/components/Modal/Modal.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
-import { useEffect, useRef } from 'react';
 
 import { useComponentId } from '../../hooks/useComponentId.ts';
+import { useFocusTrap } from '../../hooks/useFocusTrap.ts';
 import { createPortal } from 'react-dom';
 
 import styles from './Modal.module.css';
@@ -19,70 +19,10 @@ export const Modal = ({
   className,
   id,
 }: ModalProps) => {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const previousFocus = useRef<HTMLElement | null>(null);
-  const onCloseRef = useRef(onClose);
+  const modalRef = useFocusTrap<HTMLDivElement>({ isOpen, onClose, isLoading });
   const componentId = useComponentId('modal', id);
   const titleId = `${componentId}-title`;
 
-  useEffect(() => {
-    onCloseRef.current = onClose;
-  }, [onClose]);
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && !isLoading) {
-        onCloseRef.current();
-        return;
-      }
-
-      if (event.key === 'Tab' && modalRef.current) {
-        const focusableElements = modalRef.current.querySelectorAll<HTMLElement>(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        const firstElement = focusableElements[0];
-        const lastElement = focusableElements[focusableElements.length - 1];
-
-        if (!firstElement || !lastElement) {
-          return;
-        }
-
-        if (event.shiftKey) {
-          if (document.activeElement === firstElement) {
-            lastElement.focus();
-            event.preventDefault();
-          }
-        } else {
-          if (document.activeElement === lastElement) {
-            firstElement.focus();
-            event.preventDefault();
-          }
-        }
-      }
-    };
-
-    if (isOpen) {
-      previousFocus.current = document.activeElement as HTMLElement;
-      document.body.style.overflow = 'hidden';
-      window.addEventListener('keydown', handleKeyDown);
-
-      requestAnimationFrame(() => {
-        const focusableElements = modalRef.current?.querySelectorAll<HTMLElement>(
-          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-        );
-        if (focusableElements && focusableElements.length > 0) {
-          focusableElements[0].focus();
-        }
-      });
-    }
-
-    return () => {
-      document.body.style.overflow = 'unset';
-      window.removeEventListener('keydown', handleKeyDown);
-      previousFocus.current?.focus();
-    };
-  }, [isOpen, isLoading]);
-
   if (!isOpen) {
     return null;
   }