@fragments-sdk/ui 0.7.4 → 0.8.0

package/src/components/DatePicker/DatePicker.module.scss

@@ -0,0 +1,394 @@
+@use '../../tokens/variables' as *;
+@use '../../tokens/mixins' as *;
+
+// ============================================
+// Trigger
+// ============================================
+
+.trigger {
+  @include button-reset;
+  @include interactive-base;
+  @include text-base;
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--fui-space-2, $fui-space-2);
+  width: 100%;
+  min-width: 10rem;
+  height: var(--fui-input-height, $fui-input-height);
+  padding: 0 var(--fui-space-3, $fui-space-3);
+  background-color: var(--fui-bg-elevated, $fui-bg-elevated);
+  border: 1px solid var(--fui-border-strong, $fui-border-strong);
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  text-align: left;
+
+  &:hover:not([data-disabled]) {
+    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
+  }
+
+  &[data-popup-open] {
+    border-color: var(--fui-color-accent, $fui-color-accent);
+  }
+
+  &[data-disabled] {
+    background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
+    color: var(--fui-text-tertiary, $fui-text-tertiary);
+  }
+}
+
+.triggerIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--fui-text-secondary, $fui-text-secondary);
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.triggerValue {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.triggerPlaceholder {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+}
+
+// ============================================
+// Positioner & Popup
+// ============================================
+
+.positioner {
+  z-index: 52;
+  outline: none;
+}
+
+.popup {
+  @include surface-elevated;
+
+  padding: var(--fui-space-3, $fui-space-3);
+  box-shadow: var(--fui-shadow-md, $fui-shadow-md);
+
+  // Animation
+  opacity: 0;
+  transform: scale(0.95);
+  transform-origin: var(--transform-origin);
+  transition:
+    opacity var(--fui-transition-fast, $fui-transition-fast),
+    transform var(--fui-transition-fast, $fui-transition-fast);
+
+  &[data-open] {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+// ============================================
+// Calendar
+// ============================================
+
+.calendar {
+  @include text-base;
+}
+
+.months {
+  display: flex;
+  gap: var(--fui-space-4, $fui-space-4);
+}
+
+.month {
+  // Individual month container
+}
+
+.monthCaption {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-bottom: var(--fui-space-2, $fui-space-2);
+}
+
+.captionLabel {
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  color: var(--fui-text-primary, $fui-text-primary);
+}
+
+// ============================================
+// Navigation
+// ============================================
+
+.nav {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0;
+}
+
+.navButton {
+  @include button-reset;
+  @include interactive-base;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--fui-button-height-sm, $fui-button-height-sm);
+  height: var(--fui-button-height-sm, $fui-button-height-sm);
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    color: var(--fui-text-primary, $fui-text-primary);
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.chevron {
+  display: none; // We use custom chevron icons
+}
+
+// ============================================
+// Grid
+// ============================================
+
+.monthGrid {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+.weekdays {
+  // Weekday header row
+}
+
+.weekday {
+  @include text-base;
+
+  width: 2.286rem;
+  height: 2.286rem;
+  padding: 0;
+  font-size: var(--fui-font-size-xs, $fui-font-size-xs);
+  font-weight: var(--fui-font-weight-medium, $fui-font-weight-medium);
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  text-align: center;
+  vertical-align: middle;
+}
+
+.weeks {
+  // Weeks container
+}
+
+.week {
+  // Week row
+}
+
+// ============================================
+// Day cells
+// ============================================
+
+.day {
+  width: 2.286rem;
+  height: 2.286rem;
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+  position: relative;
+}
+
+.dayButton {
+  @include button-reset;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.286rem;
+  height: 2.286rem;
+  border-radius: var(--fui-radius-md, $fui-radius-md);
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  color: var(--fui-text-primary, $fui-text-primary);
+  transition: background-color var(--fui-transition-fast, $fui-transition-fast),
+    color var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+// ============================================
+// Day states
+// ============================================
+
+.today > .dayButton {
+  border: 1px solid var(--fui-border-strong, $fui-border-strong);
+}
+
+.selected > .dayButton {
+  background-color: var(--fui-color-accent, $fui-color-accent);
+  color: var(--fui-text-inverse, $fui-text-inverse);
+
+  &:hover {
+    background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+  }
+}
+
+.outside > .dayButton {
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  opacity: 0.5;
+}
+
+.disabled > .dayButton {
+  color: var(--fui-text-tertiary, $fui-text-tertiary);
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+.focused > .dayButton {
+  @include focus-ring;
+}
+
+// ============================================
+// Range highlights
+// ============================================
+
+.rangeStart,
+.rangeEnd,
+.rangeMiddle {
+  position: relative;
+}
+
+.rangeMiddle {
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 2px 0;
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    z-index: 0;
+  }
+
+  > .dayButton {
+    position: relative;
+    z-index: 1;
+    color: var(--fui-text-primary, $fui-text-primary);
+    background-color: transparent;
+  }
+}
+
+.rangeStart {
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 2px 0 2px 50%;
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    z-index: 0;
+  }
+
+  > .dayButton {
+    position: relative;
+    z-index: 1;
+    background-color: var(--fui-color-accent, $fui-color-accent);
+    color: var(--fui-text-inverse, $fui-text-inverse);
+
+    &:hover {
+      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+    }
+  }
+
+  // When start equals end, no range band
+  &.rangeEnd::before {
+    display: none;
+  }
+}
+
+.rangeEnd {
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 2px 50% 2px 0;
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+    z-index: 0;
+  }
+
+  > .dayButton {
+    position: relative;
+    z-index: 1;
+    background-color: var(--fui-color-accent, $fui-color-accent);
+    color: var(--fui-text-inverse, $fui-text-inverse);
+
+    &:hover {
+      background-color: var(--fui-color-accent-hover, $fui-color-accent-hover);
+    }
+  }
+}
+
+// ============================================
+// Preset buttons
+// ============================================
+
+.preset {
+  @include button-reset;
+  @include text-base;
+
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--fui-padding-item-xs, $fui-padding-item-xs) var(--fui-padding-item-md, $fui-padding-item-md);
+  border-radius: var(--fui-radius-sm, $fui-radius-sm);
+  font-size: var(--fui-font-size-sm, $fui-font-size-sm);
+  color: var(--fui-text-primary, $fui-text-primary);
+  white-space: nowrap;
+  transition: background-color var(--fui-transition-fast, $fui-transition-fast);
+
+  &:hover {
+    background-color: var(--fui-bg-hover, $fui-bg-hover);
+  }
+
+  &:focus-visible {
+    @include focus-ring;
+  }
+}
+
+// ============================================
+// Reduced motion
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  .popup {
+    transition: none;
+  }
+
+  .dayButton {
+    transition: none;
+  }
+
+  .preset {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,264 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, waitFor, expectNoA11yViolations } from '../../test/utils';
+import { DatePicker } from './index';
+import type { DateRange } from './index';
+
+function renderDatePicker(props: {
+  onSelect?: (date: Date | null) => void;
+  disabled?: boolean;
+  selected?: Date | null;
+  placeholder?: string;
+} = {}) {
+  return render(
+    <DatePicker
+      placeholder={props.placeholder ?? 'Pick a date'}
+      onSelect={props.onSelect}
+      disabled={props.disabled}
+      selected={props.selected}
+    >
+      <DatePicker.Trigger />
+      <DatePicker.Content>
+        <DatePicker.Calendar />
+      </DatePicker.Content>
+    </DatePicker>
+  );
+}
+
+function renderRangePicker(props: {
+  onRangeSelect?: (range: DateRange | null) => void;
+  selectedRange?: DateRange | null;
+  numberOfMonths?: number;
+  placeholder?: string;
+} = {}) {
+  return render(
+    <DatePicker
+      mode="range"
+      placeholder={props.placeholder ?? 'Select date range'}
+      onRangeSelect={props.onRangeSelect}
+      selectedRange={props.selectedRange}
+      numberOfMonths={props.numberOfMonths ?? 2}
+    >
+      <DatePicker.Trigger />
+      <DatePicker.Content>
+        <DatePicker.Calendar />
+      </DatePicker.Content>
+    </DatePicker>
+  );
+}
+
+describe('DatePicker', () => {
+  describe('rendering', () => {
+    it('renders a trigger button', () => {
+      renderDatePicker();
+      expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('shows placeholder text when no value selected', () => {
+      renderDatePicker({ placeholder: 'Choose date' });
+      expect(screen.getByText('Choose date')).toBeInTheDocument();
+    });
+
+    it('shows formatted date when selected', () => {
+      renderDatePicker({ selected: new Date(2025, 0, 15) });
+      // format(date, 'PPP') produces "January 15th, 2025"
+      expect(screen.getByRole('button')).toHaveTextContent('January');
+      expect(screen.getByRole('button')).toHaveTextContent('2025');
+    });
+
+    it('shows formatted range when range selected', () => {
+      const range: DateRange = {
+        from: new Date(2025, 0, 10),
+        to: new Date(2025, 0, 20),
+      };
+      renderRangePicker({ selectedRange: range });
+      expect(screen.getByRole('button')).toHaveTextContent('Jan 10, 2025');
+      expect(screen.getByRole('button')).toHaveTextContent('Jan 20, 2025');
+    });
+  });
+
+  describe('interaction', () => {
+    it('opens on click', async () => {
+      const user = userEvent.setup();
+      renderDatePicker();
+
+      await user.click(screen.getByRole('button'));
+      // DayPicker renders a grid
+      expect(await screen.findByRole('grid')).toBeInTheDocument();
+    });
+
+    it('selects a date on click', async () => {
+      const user = userEvent.setup();
+      const onSelect = vi.fn();
+      renderDatePicker({ onSelect });
+
+      await user.click(screen.getByRole('button'));
+      await screen.findByRole('grid');
+
+      // Click the 15th day button (find any visible "15" in a grid cell)
+      const dayButtons = screen.getAllByRole('gridcell');
+      const day15 = dayButtons.find((cell) => {
+        const btn = cell.querySelector('button');
+        return btn?.textContent === '15';
+      });
+      expect(day15).toBeDefined();
+      const btn = day15!.querySelector('button')!;
+      await user.click(btn);
+
+      expect(onSelect).toHaveBeenCalledWith(expect.any(Date));
+    });
+
+    it('auto-closes after single date selection', async () => {
+      const user = userEvent.setup();
+      renderDatePicker({ onSelect: vi.fn() });
+
+      await user.click(screen.getByRole('button'));
+      await screen.findByRole('grid');
+
+      const dayButtons = screen.getAllByRole('gridcell');
+      const visibleDay = dayButtons.find((cell) => {
+        const btn = cell.querySelector('button');
+        return btn?.textContent === '10';
+      });
+      const btn = visibleDay!.querySelector('button')!;
+      await user.click(btn);
+
+      await waitFor(() => {
+        expect(screen.queryByRole('grid')).not.toBeInTheDocument();
+      }, { timeout: 500 });
+    });
+
+    it('range mode: stays open after both clicks (no auto-close)', async () => {
+      const user = userEvent.setup();
+      const onRangeSelect = vi.fn();
+      renderRangePicker({ onRangeSelect, numberOfMonths: 1 });
+
+      await user.click(screen.getByRole('button'));
+      await screen.findByRole('grid');
+
+      const dayButtons = screen.getAllByRole('gridcell');
+      const day10 = dayButtons.find((cell) => {
+        const btn = cell.querySelector('button');
+        return btn?.textContent === '10';
+      });
+      await user.click(day10!.querySelector('button')!);
+
+      // Should still be open after first click
+      expect(screen.getByRole('grid')).toBeInTheDocument();
+
+      const day20 = dayButtons.find((cell) => {
+        const btn = cell.querySelector('button');
+        return btn?.textContent === '20';
+      });
+      await user.click(day20!.querySelector('button')!);
+
+      // Range mode never auto-closes — user closes via Escape or click-outside
+      expect(screen.getByRole('grid')).toBeInTheDocument();
+    });
+
+    it('preset click selects a date', async () => {
+      const user = userEvent.setup();
+      const onSelect = vi.fn();
+      const presetDate = new Date(2025, 5, 1);
+
+      render(
+        <DatePicker onSelect={onSelect}>
+          <DatePicker.Trigger placeholder="Pick a date" />
+          <DatePicker.Content>
+            <DatePicker.Preset date={presetDate}>June 1st</DatePicker.Preset>
+            <DatePicker.Calendar />
+          </DatePicker.Content>
+        </DatePicker>
+      );
+
+      await user.click(screen.getByRole('button', { name: /pick a date/i }));
+      await user.click(await screen.findByText('June 1st'));
+
+      expect(onSelect).toHaveBeenCalledWith(presetDate);
+    });
+  });
+
+  describe('keyboard', () => {
+    it('Escape closes the calendar', async () => {
+      const user = userEvent.setup();
+      renderDatePicker();
+
+      await user.click(screen.getByRole('button'));
+      await screen.findByRole('grid');
+
+      await user.keyboard('{Escape}');
+      await waitFor(() => {
+        expect(screen.queryByRole('grid')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('disabled', () => {
+    it('trigger is disabled when disabled prop is true', () => {
+      renderDatePicker({ disabled: true });
+      expect(screen.getByRole('button')).toBeDisabled();
+    });
+  });
+
+  describe('controlled', () => {
+    it('reflects external selected value', () => {
+      const date = new Date(2025, 2, 20);
+      renderDatePicker({ selected: date });
+      expect(screen.getByRole('button')).toHaveTextContent('March');
+      expect(screen.getByRole('button')).toHaveTextContent('2025');
+    });
+
+    it('reflects external selectedRange value', () => {
+      const range: DateRange = {
+        from: new Date(2025, 3, 1),
+        to: new Date(2025, 3, 7),
+      };
+      renderRangePicker({ selectedRange: range });
+      expect(screen.getByRole('button')).toHaveTextContent('Apr 01, 2025');
+      expect(screen.getByRole('button')).toHaveTextContent('Apr 07, 2025');
+    });
+  });
+
+  describe('multi-month', () => {
+    it('renders correct number of month panels', async () => {
+      const user = userEvent.setup();
+      renderRangePicker({ numberOfMonths: 2 });
+
+      await user.click(screen.getByRole('button'));
+      const grids = await screen.findAllByRole('grid');
+      expect(grids).toHaveLength(2);
+    });
+  });
+
+  describe('a11y', () => {
+    it('has no accessibility violations (closed)', async () => {
+      const { container } = render(
+        <DatePicker>
+          <DatePicker.Trigger aria-label="Pick a date" placeholder="Pick a date" />
+          <DatePicker.Content>
+            <DatePicker.Calendar />
+          </DatePicker.Content>
+        </DatePicker>
+      );
+      await expectNoA11yViolations(container);
+    });
+
+    it('has no accessibility violations (open)', async () => {
+      const user = userEvent.setup();
+      const { container } = render(
+        <DatePicker>
+          <DatePicker.Trigger aria-label="Pick a date" placeholder="Pick a date" />
+          <DatePicker.Content aria-label="Choose date">
+            <DatePicker.Calendar />
+          </DatePicker.Content>
+        </DatePicker>
+      );
+
+      await user.click(screen.getByRole('button'));
+      await screen.findByRole('grid');
+      // Disable aria-command-name: Base UI focus guard spans have role="button" without names (upstream)
+      await expectNoA11yViolations(container, {
+        disabledRules: ['aria-command-name'],
+      });
+    });
+  });
+});