tharaday 0.8.2 → 0.8.3

package/src/components/Popover/Popover.module.css

@@ -0,0 +1,52 @@
+.root {
+  position: relative;
+  display: inline-block;
+}
+
+.trigger {
+  display: inline-block;
+}
+
+.content {
+  position: absolute;
+  z-index: 500;
+  background-color: var(--ds-surface-0);
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-md);
+  box-shadow: var(--ds-shadow-md);
+  padding: var(--ds-space-4);
+  min-width: 12rem;
+  font-family: var(--ds-font-family-base);
+  font-size: var(--ds-font-size-sm);
+  color: var(--ds-text-1);
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+  transition:
+    opacity 0.15s,
+    visibility 0.15s;
+}
+
+.visible {
+  opacity: 1;
+  pointer-events: auto;
+  visibility: visible;
+}
+
+/* Placements */
+.bottom {
+  top: calc(100% + var(--ds-space-2));
+  left: 0;
+}
+.top {
+  bottom: calc(100% + var(--ds-space-2));
+  left: 0;
+}
+.right {
+  left: calc(100% + var(--ds-space-2));
+  top: 0;
+}
+.left {
+  right: calc(100% + var(--ds-space-2));
+  top: 0;
+}

package/src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from '../Box/Box.tsx';
+import { Button } from '../Button/Button.tsx';
+import { Text } from '../Text/Text.tsx';
+import { Popover } from './Popover.tsx';
+
+const meta = {
+  title: 'Components/Popover',
+  component: Popover,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    placement: { control: 'select', options: ['top', 'bottom', 'left', 'right'] },
+  },
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    trigger: <Button size="sm">Open popover</Button>,
+    children: (
+      <Box display="flex" flexDirection="column" gap={2}>
+        <Text variant="body-sm" weight="medium">
+          Popover title
+        </Text>
+        <Text variant="body-sm" color="subtle">
+          This is some popover content.
+        </Text>
+      </Box>
+    ),
+  },
+};
+
+export const Top: Story = {
+  args: {
+    trigger: <Button size="sm">Above</Button>,
+    placement: 'top',
+    children: <Text variant="body-sm">Placed above the trigger.</Text>,
+  },
+};
+
+export const Right: Story = {
+  args: {
+    trigger: <Button size="sm">Right</Button>,
+    placement: 'right',
+    children: <Text variant="body-sm">Placed to the right.</Text>,
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    trigger: <Button size="sm">Options</Button>,
+    children: (
+      <Box display="flex" flexDirection="column" gap={2}>
+        <Button variant="subtle" fullWidth>
+          Edit
+        </Button>
+        <Button variant="subtle" intent="danger" fullWidth>
+          Delete
+        </Button>
+      </Box>
+    ),
+  },
+};

package/src/components/Popover/Popover.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Button } from '../Button/Button.tsx';
+import { Popover } from './Popover.tsx';
+
+const trigger = <Button>Open</Button>;
+const content = <p>Popover content</p>;
+
+describe('Popover', () => {
+  it('renders trigger', () => {
+    render(<Popover trigger={trigger}>{content}</Popover>);
+    expect(screen.getByRole('button', { name: 'Open' })).toBeInTheDocument();
+  });
+
+  it('content is hidden by default', () => {
+    render(<Popover trigger={trigger}>{content}</Popover>);
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('shows content when trigger is clicked', async () => {
+    render(<Popover trigger={trigger}>{content}</Popover>);
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    expect(screen.getByRole('dialog')).toHaveAttribute('aria-hidden', 'false');
+  });
+
+  it('hides content when trigger is clicked again', async () => {
+    render(<Popover trigger={trigger}>{content}</Popover>);
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('closes on Escape', async () => {
+    render(<Popover trigger={trigger}>{content}</Popover>);
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }));
+    await userEvent.keyboard('{Escape}');
+    expect(screen.getByRole('dialog', { hidden: true })).toHaveAttribute('aria-hidden', 'true');
+  });
+});

package/src/components/Popover/Popover.tsx

@@ -0,0 +1,78 @@
+import classnames from 'classnames';
+import {
+  cloneElement,
+  isValidElement,
+  useCallback,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react';
+
+import { useClickOutside } from '../../hooks/useClickOutside.ts';
+import { useComponentId } from '../../hooks/useComponentId.ts';
+import styles from './Popover.module.css';
+import type { PopoverProps } from './Popover.types.ts';
+
+export const Popover = ({
+  trigger,
+  children,
+  placement = 'bottom',
+  isOpen: controlledOpen,
+  onOpenChange,
+  className,
+  id,
+}: PopoverProps) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const componentId = useComponentId('popover', id);
+  const contentId = `${componentId}-content`;
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const close = useCallback(() => {
+    if (!isControlled) {
+      setUncontrolledOpen(false);
+    }
+    onOpenChange?.(false);
+  }, [isControlled, onOpenChange]);
+
+  const toggle = () => {
+    const next = !isOpen;
+    if (!isControlled) {
+      setUncontrolledOpen(next);
+    }
+    onOpenChange?.(next);
+  };
+
+  useClickOutside(rootRef, close, isOpen);
+
+  const triggerElement = isValidElement(trigger)
+    ? cloneElement(trigger as ReactElement<Record<string, unknown>>, {
+        onClick: (e: React.MouseEvent) => {
+          const existing = (trigger as ReactElement<Record<string, unknown>>).props.onClick;
+          if (typeof existing === 'function') {
+            existing(e);
+          }
+          toggle();
+        },
+        'aria-expanded': isOpen,
+        'aria-controls': contentId,
+        'aria-haspopup': 'dialog',
+      })
+    : trigger;
+
+  return (
+    <div ref={rootRef} className={classnames(styles.root, className)}>
+      <div className={styles.trigger}>{triggerElement}</div>
+      <div
+        id={contentId}
+        role="dialog"
+        aria-modal="false"
+        aria-hidden={!isOpen}
+        className={classnames(styles.content, styles[placement], isOpen && styles.visible)}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/components/Popover/Popover.types.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+
+export type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface PopoverProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  placement?: PopoverPlacement;
+  isOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  id?: string;
+}

package/src/components/Tag/Tag.module.css

@@ -0,0 +1,115 @@
+.root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-space-1);
+  font-family: var(--ds-font-family-base);
+  font-weight: var(--ds-font-weight-medium);
+  border-radius: var(--ds-radius-full);
+  border: 1px solid transparent;
+  white-space: nowrap;
+  transition:
+    background-color 0.15s,
+    border-color 0.15s;
+}
+
+/* Sizes */
+.sm {
+  height: var(--ds-space-5);
+  padding: 0 var(--ds-space-2);
+  font-size: var(--ds-font-size-xs);
+}
+.md {
+  height: var(--ds-space-6);
+  padding: 0 var(--ds-space-3);
+  font-size: var(--ds-font-size-xs);
+}
+.lg {
+  height: var(--ds-space-8);
+  padding: 0 var(--ds-space-4);
+  font-size: var(--ds-font-size-sm);
+}
+
+/* Intents */
+.neutral {
+  background-color: var(--ds-surface-1);
+  color: var(--ds-text-1);
+  border-color: var(--ds-border-1);
+}
+.success {
+  background-color: var(--ds-success-subtle);
+  color: var(--ds-success-active);
+  border-color: var(--ds-success);
+}
+.warning {
+  background-color: var(--ds-warning-subtle);
+  color: var(--ds-warning-active);
+  border-color: var(--ds-warning);
+}
+.danger {
+  background-color: var(--ds-danger-subtle);
+  color: var(--ds-danger-active);
+  border-color: var(--ds-danger);
+}
+.info {
+  background-color: var(--ds-info-subtle);
+  color: var(--ds-info-active);
+  border-color: var(--ds-info);
+}
+
+/* Clickable */
+.clickable {
+  cursor: pointer;
+}
+.clickable:hover {
+  filter: brightness(0.95);
+}
+.clickable:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+
+.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.label {
+  line-height: 1;
+}
+
+.removeButton {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  border-radius: var(--ds-radius-full);
+  padding: 0.125rem;
+  margin-left: var(--ds-space-1);
+  margin-right: calc(-1 * var(--ds-space-1));
+  opacity: 0.6;
+  transition:
+    opacity 0.15s,
+    background-color 0.15s;
+}
+.removeButton:hover {
+  opacity: 1;
+  background-color: color-mix(in srgb, currentColor 15%, transparent);
+}
+.removeButton:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+.removeButton:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Box } from '../Box/Box.tsx';
+import { Tag } from './Tag.tsx';
+
+const meta = {
+  title: 'Components/Tag',
+  component: Tag,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+  argTypes: {
+    intent: { control: 'select', options: ['neutral', 'success', 'warning', 'danger', 'info'] },
+    size: { control: 'select', options: ['sm', 'md', 'lg'] },
+  },
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { label: 'Design' },
+};
+
+export const Dismissible: Story = {
+  args: { label: 'React', onRemove: () => {} },
+};
+
+export const Clickable: Story = {
+  args: { label: 'Clickable', onClick: () => {} },
+};
+
+export const WithIcon: Story = {
+  args: {
+    label: 'With icon',
+    icon: (
+      <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+        <circle cx="5" cy="5" r="4" stroke="currentColor" strokeWidth="1.5" />
+      </svg>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Disabled', onRemove: () => {}, disabled: true },
+};
+
+export const Gallery: Story = {
+  name: 'Gallery',
+  args: { label: '' },
+  render: () => (
+    <Box display="flex" flexDirection="column" gap={6}>
+      {(['neutral', 'success', 'warning', 'danger', 'info'] as const).map((intent) => (
+        <Box key={intent} display="flex" gap={3} alignItems="center">
+          {(['sm', 'md', 'lg'] as const).map((size) => (
+            <Tag key={size} label={intent} intent={intent} size={size} onRemove={() => {}} />
+          ))}
+        </Box>
+      ))}
+    </Box>
+  ),
+};

package/src/components/Tag/Tag.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Tag } from './Tag.tsx';
+
+describe('Tag', () => {
+  it('renders label', () => {
+    render(<Tag label="React" />);
+    expect(screen.getByText('React')).toBeInTheDocument();
+  });
+
+  it('renders remove button when onRemove is provided', () => {
+    render(<Tag label="React" onRemove={vi.fn()} />);
+    expect(screen.getByRole('button', { name: 'Remove React' })).toBeInTheDocument();
+  });
+
+  it('calls onRemove when remove button is clicked', async () => {
+    const onRemove = vi.fn();
+    render(<Tag label="React" onRemove={onRemove} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Remove React' }));
+    expect(onRemove).toHaveBeenCalledOnce();
+  });
+
+  it('calls onClick when clickable tag is clicked', async () => {
+    const onClick = vi.fn();
+    render(<Tag label="React" onClick={onClick} />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+
+  it('does not call onClick when disabled', async () => {
+    const onClick = vi.fn();
+    render(<Tag label="React" onClick={onClick} disabled />);
+    const tag = screen.queryByRole('button');
+    expect(tag).toBeNull();
+  });
+
+  it('forwards extra props', () => {
+    render(<Tag label="React" data-testid="tag" />);
+    expect(screen.getByTestId('tag')).toBeInTheDocument();
+  });
+});

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,74 @@
+import classnames from 'classnames';
+import type { KeyboardEvent } from 'react';
+
+import styles from './Tag.module.css';
+import type { TagProps } from './Tag.types.ts';
+
+export const Tag = ({
+  label,
+  intent = 'neutral',
+  size = 'md',
+  onRemove,
+  onClick,
+  icon,
+  disabled = false,
+  className,
+  ...props
+}: TagProps) => {
+  const isClickable = !!onClick && !disabled;
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLSpanElement>) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onClick?.();
+    }
+  };
+
+  return (
+    <span
+      className={classnames(
+        styles.root,
+        styles[intent],
+        styles[size],
+        isClickable && styles.clickable,
+        disabled && styles.disabled,
+        className
+      )}
+      onClick={isClickable ? onClick : undefined}
+      role={isClickable ? 'button' : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      aria-disabled={disabled || undefined}
+      onKeyDown={isClickable ? handleKeyDown : undefined}
+      {...props}
+    >
+      {icon && (
+        <span className={styles.icon} aria-hidden="true">
+          {icon}
+        </span>
+      )}
+      <span className={styles.label}>{label}</span>
+      {onRemove && (
+        <button
+          type="button"
+          className={styles.removeButton}
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          aria-label={`Remove ${label}`}
+          disabled={disabled}
+          tabIndex={disabled ? -1 : 0}
+        >
+          <svg width="8" height="8" viewBox="0 0 8 8" fill="none" aria-hidden="true">
+            <path
+              d="M1 1L7 7M7 1L1 7"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+            />
+          </svg>
+        </button>
+      )}
+    </span>
+  );
+};

package/src/components/Tag/Tag.types.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+export type TagIntent = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
+export type TagSize = 'sm' | 'md' | 'lg';
+
+export interface TagProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'> {
+  label: string;
+  intent?: TagIntent;
+  size?: TagSize;
+  onRemove?: () => void;
+  onClick?: () => void;
+  icon?: ReactNode;
+  disabled?: boolean;
+  className?: string;
+}