tharaday 0.8.2 → 0.8.4

package/src/components/Divider/Divider.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Divider } from './Divider.tsx';
 import { Box } from '../Box/Box.tsx';
 import { Text } from '../Text/Text.tsx';
+import { Divider } from './Divider.tsx';
 
 const meta = {
   title: 'Components/Divider',

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,71 @@
+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/Dropdown/Dropdown.tsx

@@ -1,10 +1,9 @@
 import classnames from 'classnames';
-import { useState, useRef, useEffect, type KeyboardEvent } from 'react';
+import { type KeyboardEvent, useEffect, useRef, useState } from 'react';
 
 import { useComponentId } from '../../hooks/useComponentId.ts';
-
 import styles from './Dropdown.module.css';
-import type { DropdownProps, DropdownOption } from './Dropdown.types.ts';
+import type { DropdownOption, DropdownProps } from './Dropdown.types.ts';
 
 export const Dropdown = ({
   options,
@@ -74,11 +73,13 @@ export const Dropdown = ({
       }
       idx += direction;
     }
+
     return from;
   };
 
   const firstEnabled = () => {
     const idx = options.findIndex((opt) => !opt.disabled);
+
     return idx >= 0 ? idx : 0;
   };
 
@@ -87,6 +88,7 @@ export const Dropdown = ({
     while (idx >= 0 && options[idx].disabled) {
       idx -= 1;
     }
+
     return idx >= 0 ? idx : options.length - 1;
   };
 
@@ -173,6 +175,7 @@ export const Dropdown = ({
     };
 
     document.addEventListener('mousedown', handleClickOutside);
+
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
@@ -242,6 +245,7 @@ export const Dropdown = ({
             {options.map((option, index) => {
               const isSelected = option.value === currentValue;
               const isFocused = index === focusedIndex;
+
               return (
                 <li
                   key={option.value}

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/Header/Header.tsx

@@ -1,9 +1,9 @@
 import classnames from 'classnames';
 
-import styles from './Header.module.css';
-import type { HeaderProps } from './Header.types.ts';
 import { Button } from '../Button/Button.tsx';
 import type { ButtonProps } from '../Button/Button.types.ts';
+import styles from './Header.module.css';
+import type { HeaderProps } from './Header.types.ts';
 
 export const Header = ({
   id,

package/src/components/Input/Input.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
-import { Input } from './Input.tsx';
 import { Box } from '../Box/Box.tsx';
+import { Input } from './Input.tsx';
 
 const meta = {
   title: 'Components/Input',

package/src/components/Input/Input.tsx

@@ -1,6 +1,6 @@
 import classnames from 'classnames';
-import { useComponentId } from '../../hooks/useComponentId.ts';
 
+import { useComponentId } from '../../hooks/useComponentId.ts';
 import styles from './Input.module.css';
 import type { InputProps } from './Input.types.ts';