tharaday 0.8.2 → 0.8.3

package/src/components/DatePicker/DatePicker.module.css

@@ -0,0 +1,212 @@
+.root {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--ds-space-2);
+  font-family: var(--ds-font-family-base);
+}
+
+.label {
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-1);
+}
+
+.trigger {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--ds-space-2);
+  height: var(--ds-space-10);
+  padding: 0 var(--ds-space-3);
+  border: 1px solid var(--ds-border-1);
+  border-radius: var(--ds-radius-md);
+  background-color: var(--ds-surface-0);
+  color: var(--ds-text-1);
+  font-size: var(--ds-font-size-sm);
+  font-family: var(--ds-font-family-base);
+  cursor: pointer;
+  min-width: 12rem;
+  box-sizing: border-box;
+  transition:
+    border-color 0.15s,
+    box-shadow 0.15s;
+}
+.trigger:hover:not(:disabled) {
+  border-color: var(--ds-neutral);
+}
+.trigger:focus-visible {
+  outline: none;
+  border-color: var(--ds-ring);
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+.trigger.disabled,
+.trigger:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.triggerText {
+  flex: 1;
+  text-align: left;
+}
+.placeholder {
+  color: var(--ds-text-disabled);
+}
+
+.calendarIcon {
+  color: var(--ds-text-2);
+  flex-shrink: 0;
+}
+
+/* Calendar panel */
+.calendar {
+  position: absolute;
+  top: calc(100% + var(--ds-space-2));
+  left: 0;
+  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-3);
+  min-width: 16rem;
+}
+
+.calendarHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--ds-space-3);
+}
+
+.monthYear {
+  font-size: var(--ds-font-size-sm);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-1);
+}
+
+.navButton {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: var(--ds-radius-sm);
+  cursor: pointer;
+  color: var(--ds-text-2);
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+.navButton:hover {
+  background-color: var(--ds-surface-1);
+  color: var(--ds-text-1);
+}
+.navButton:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+
+.weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  margin-bottom: var(--ds-space-1);
+}
+
+.weekday {
+  text-align: center;
+  font-size: var(--ds-font-size-xs);
+  font-weight: var(--ds-font-weight-medium);
+  color: var(--ds-text-2);
+  padding: var(--ds-space-1) 0;
+}
+
+.days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 2px;
+}
+
+.dayEmpty {
+  aspect-ratio: 1;
+}
+
+.day {
+  all: unset;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1;
+  border-radius: var(--ds-radius-sm);
+  font-size: var(--ds-font-size-xs);
+  cursor: pointer;
+  color: var(--ds-text-1);
+  transition:
+    background-color 0.1s,
+    color 0.1s;
+}
+.day:hover:not(:disabled) {
+  background-color: var(--ds-surface-1);
+}
+.day:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}
+
+.daySelected {
+  background-color: var(--ds-info);
+  color: var(--ds-text-on-brand);
+  font-weight: var(--ds-font-weight-medium);
+}
+.daySelected:hover {
+  background-color: var(--ds-info-hover);
+}
+
+.dayToday {
+  font-weight: var(--ds-font-weight-bold);
+  color: var(--ds-info);
+}
+
+.dayDisabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.calendarFooter {
+  margin-top: var(--ds-space-3);
+  padding-top: var(--ds-space-2);
+  border-top: 1px solid var(--ds-border-2);
+  display: flex;
+  justify-content: flex-end;
+}
+
+.clearButton {
+  all: unset;
+  font-size: var(--ds-font-size-xs);
+  color: var(--ds-text-2);
+  cursor: pointer;
+  padding: var(--ds-space-1) var(--ds-space-2);
+  border-radius: var(--ds-radius-sm);
+  transition:
+    background-color 0.15s,
+    color 0.15s;
+}
+.clearButton:hover {
+  background-color: var(--ds-surface-1);
+  color: var(--ds-text-1);
+}
+.clearButton:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+}

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useState } from 'react';
+
+import { DatePicker } from './DatePicker.tsx';
+
+const meta = {
+  title: 'Components/DatePicker',
+  component: DatePicker,
+  tags: ['autodocs'],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Controlled = (args: React.ComponentProps<typeof DatePicker>) => {
+  const [value, setValue] = useState<Date | null>(null);
+  return <DatePicker {...args} value={value} onChange={setValue} />;
+};
+
+const Preselected = (args: React.ComponentProps<typeof DatePicker>) => {
+  const [value, setValue] = useState<Date | null>(new Date(2026, 0, 15));
+  return <DatePicker {...args} value={value} onChange={setValue} />;
+};
+
+const WithMinMaxDemo = (args: React.ComponentProps<typeof DatePicker>) => {
+  const [value, setValue] = useState<Date | null>(null);
+  return <DatePicker {...args} value={value} onChange={setValue} />;
+};
+
+export const Default: Story = {
+  render: (args) => <Controlled {...args} />,
+  args: { label: 'Date', placeholder: 'Select date' },
+};
+
+export const WithPreselectedDate: Story = {
+  render: (args) => <Preselected {...args} />,
+  args: { label: 'Date' },
+};
+
+export const Disabled: Story = {
+  args: { label: 'Date', disabled: true },
+};
+
+export const WithMinMax: Story = {
+  render: (args) => <WithMinMaxDemo {...args} />,
+  args: {
+    label: 'Date',
+    min: new Date(2026, 3, 1),
+    max: new Date(2026, 3, 30),
+    placeholder: 'April 2026 only',
+  },
+};

package/src/components/DatePicker/DatePicker.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { DatePicker } from './DatePicker.tsx';
+
+describe('DatePicker', () => {
+  it('renders placeholder when no value', () => {
+    render(<DatePicker placeholder="Pick a date" />);
+    expect(screen.getByText('Pick a date')).toBeInTheDocument();
+  });
+
+  it('renders formatted value when provided', () => {
+    render(<DatePicker value={new Date(2026, 0, 15)} />);
+    expect(screen.getByText('Jan 15, 2026')).toBeInTheDocument();
+  });
+
+  it('renders label when provided', () => {
+    render(<DatePicker label="Due date" />);
+    expect(screen.getByText('Due date')).toBeInTheDocument();
+  });
+
+  it('opens calendar on trigger click', async () => {
+    render(<DatePicker />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('closes calendar on Escape', async () => {
+    render(<DatePicker />);
+    await userEvent.click(screen.getByRole('button'));
+    await userEvent.keyboard('{Escape}');
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('calls onChange when a day is selected', async () => {
+    const onChange = vi.fn();
+    render(<DatePicker onChange={onChange} />);
+    await userEvent.click(screen.getByRole('button'));
+    const dayButtons = screen
+      .getAllByRole('button')
+      .filter((b) => /^\d+$/.test(b.textContent ?? ''));
+    await userEvent.click(dayButtons[0]);
+    expect(onChange).toHaveBeenCalledOnce();
+    expect(onChange.mock.calls[0][0]).toBeInstanceOf(Date);
+  });
+
+  it('does not open when disabled', async () => {
+    render(<DatePicker disabled />);
+    await userEvent.click(screen.getByRole('button'));
+    expect(screen.queryByRole('dialog')).toBeNull();
+  });
+
+  it('navigates to previous month', async () => {
+    render(<DatePicker value={new Date(2026, 3, 1)} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Apr 1, 2026' }));
+    const monthYear = screen.getByText('April 2026');
+    expect(monthYear).toBeInTheDocument();
+    await userEvent.click(screen.getByRole('button', { name: 'Previous month' }));
+    expect(screen.getByText('March 2026')).toBeInTheDocument();
+  });
+});

package/src/components/DatePicker/DatePicker.tsx

@@ -0,0 +1,269 @@
+import classnames from 'classnames';
+import { useRef, useState } from 'react';
+
+import { useClickOutside } from '../../hooks/useClickOutside.ts';
+import { useComponentId } from '../../hooks/useComponentId.ts';
+import styles from './DatePicker.module.css';
+import type { DatePickerProps } from './DatePicker.types.ts';
+
+const DAYS_OF_WEEK = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+const formatDate = (date: Date): string =>
+  date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+
+const isSameDay = (a: Date, b: Date): boolean =>
+  a.getFullYear() === b.getFullYear() &&
+  a.getMonth() === b.getMonth() &&
+  a.getDate() === b.getDate();
+
+const isToday = (date: Date): boolean => isSameDay(date, new Date());
+
+export const DatePicker = ({
+  value,
+  onChange,
+  placeholder = 'Select date',
+  disabled = false,
+  min,
+  max,
+  id,
+  label,
+  className,
+}: DatePickerProps) => {
+  const today = new Date();
+  const [isOpen, setIsOpen] = useState(false);
+  const [viewYear, setViewYear] = useState((value ?? today).getFullYear());
+  const [viewMonth, setViewMonth] = useState((value ?? today).getMonth());
+  const rootRef = useRef<HTMLDivElement>(null);
+  const componentId = useComponentId('datepicker', id);
+  const inputId = `${componentId}-input`;
+  const calendarId = `${componentId}-calendar`;
+
+  useClickOutside(rootRef, () => setIsOpen(false), isOpen);
+
+  const open = () => {
+    if (disabled) {
+      return;
+    }
+    if (value) {
+      setViewYear(value.getFullYear());
+      setViewMonth(value.getMonth());
+    }
+    setIsOpen(true);
+  };
+
+  const selectDate = (date: Date) => {
+    onChange?.(date);
+    setIsOpen(false);
+  };
+
+  const prevMonth = () => {
+    if (viewMonth === 0) {
+      setViewMonth(11);
+      setViewYear((y) => y - 1);
+    } else {
+      setViewMonth((m) => m - 1);
+    }
+  };
+
+  const nextMonth = () => {
+    if (viewMonth === 11) {
+      setViewMonth(0);
+      setViewYear((y) => y + 1);
+    } else {
+      setViewMonth((m) => m + 1);
+    }
+  };
+
+  const isDisabledDate = (date: Date): boolean => {
+    const dateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    if (min) {
+      const minOnly = new Date(min.getFullYear(), min.getMonth(), min.getDate());
+      if (dateOnly < minOnly) {
+        return true;
+      }
+    }
+    if (max) {
+      const maxOnly = new Date(max.getFullYear(), max.getMonth(), max.getDate());
+      if (dateOnly > maxOnly) {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+  const firstDayOfMonth = new Date(viewYear, viewMonth, 1).getDay();
+
+  const cells: Array<Date | null> = [
+    ...Array<null>(firstDayOfMonth).fill(null),
+    ...Array.from({ length: daysInMonth }, (_, i) => new Date(viewYear, viewMonth, i + 1)),
+  ];
+  while (cells.length % 7 !== 0) {
+    cells.push(null);
+  }
+
+  return (
+    <div ref={rootRef} className={classnames(styles.root, className)}>
+      {label && (
+        <label htmlFor={inputId} className={styles.label}>
+          {label}
+        </label>
+      )}
+      <button
+        type="button"
+        id={inputId}
+        className={classnames(styles.trigger, disabled && styles.disabled)}
+        onClick={open}
+        aria-haspopup="dialog"
+        aria-expanded={isOpen}
+        aria-controls={calendarId}
+        disabled={disabled}
+      >
+        <span className={classnames(styles.triggerText, !value && styles.placeholder)}>
+          {value ? formatDate(value) : placeholder}
+        </span>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          aria-hidden="true"
+          className={styles.calendarIcon}
+        >
+          <rect
+            x="1"
+            y="2"
+            width="12"
+            height="11"
+            rx="1.5"
+            stroke="currentColor"
+            strokeWidth="1.5"
+          />
+          <path d="M1 5.5H13" stroke="currentColor" strokeWidth="1.5" />
+          <path d="M4.5 1V3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+          <path d="M9.5 1V3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+        </svg>
+      </button>
+
+      {isOpen && (
+        <div
+          id={calendarId}
+          role="dialog"
+          aria-label="Date picker calendar"
+          aria-modal="false"
+          className={styles.calendar}
+        >
+          <div className={styles.calendarHeader}>
+            <button
+              type="button"
+              className={styles.navButton}
+              onClick={prevMonth}
+              aria-label="Previous month"
+            >
+              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+                <path
+                  d="M6.5 2L3.5 5L6.5 8"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </button>
+            <span className={styles.monthYear}>
+              {MONTHS[viewMonth]} {viewYear}
+            </span>
+            <button
+              type="button"
+              className={styles.navButton}
+              onClick={nextMonth}
+              aria-label="Next month"
+            >
+              <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+                <path
+                  d="M3.5 2L6.5 5L3.5 8"
+                  stroke="currentColor"
+                  strokeWidth="1.5"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+
+          <div className={styles.weekdays} aria-hidden="true">
+            {DAYS_OF_WEEK.map((d) => (
+              <span key={d} className={styles.weekday}>
+                {d}
+              </span>
+            ))}
+          </div>
+
+          <div className={styles.days}>
+            {cells.map((date, i) => {
+              if (!date) {
+                return <span key={`empty-${i}`} className={styles.dayEmpty} aria-hidden="true" />;
+              }
+              const selected = value ? isSameDay(date, value) : false;
+              const todayFlag = isToday(date);
+              const disabledFlag = isDisabledDate(date);
+              return (
+                <button
+                  key={date.toISOString()}
+                  type="button"
+                  className={classnames(
+                    styles.day,
+                    selected && styles.daySelected,
+                    todayFlag && !selected && styles.dayToday,
+                    disabledFlag && styles.dayDisabled
+                  )}
+                  onClick={() => !disabledFlag && selectDate(date)}
+                  disabled={disabledFlag}
+                  aria-selected={selected}
+                  aria-label={date.toLocaleDateString('en-US', {
+                    weekday: 'long',
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                  })}
+                  tabIndex={disabledFlag ? -1 : 0}
+                >
+                  {date.getDate()}
+                </button>
+              );
+            })}
+          </div>
+
+          {value && (
+            <div className={styles.calendarFooter}>
+              <button
+                type="button"
+                className={styles.clearButton}
+                onClick={() => {
+                  onChange?.(null);
+                  setIsOpen(false);
+                }}
+              >
+                Clear
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/DatePicker/DatePicker.types.ts

@@ -0,0 +1,11 @@
+export interface DatePickerProps {
+  value?: Date | null;
+  onChange?: (date: Date | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  min?: Date;
+  max?: Date;
+  id?: string;
+  label?: string;
+  className?: string;
+}