fix(ui): use BUI Popover and add unavailable dates story in DateRangePicker

- Switch DateRangePicker to use the BUI Popover component (with hideArrow)
  instead of the raw react-aria-components Popover
- Add WithUnavailableDates story showing isDateUnavailable with weekends
  blocked and non-contiguous ranges disallowed (default behaviour)

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
This commit is contained in:
Charles de Dreuille
2026-04-19 06:38:47 +02:00
parent ff68a57b14
commit f221068ab9
@@ -16,8 +16,13 @@
import preview from '../../../../../.storybook/preview';
import { DateRangePicker } from './DateRangePicker';
import { parseDate, today, getLocalTimeZone } from '@internationalized/date';
import { Form } from 'react-aria-components';
import {
parseDate,
today,
getLocalTimeZone,
isWeekend,
} from '@internationalized/date';
import { useLocale, Form } from 'react-aria-components';
import { Button } from '../Button';
const meta = preview.meta({
@@ -128,3 +133,23 @@ export const WithMinMaxValue = meta.story({
maxValue: today(getLocalTimeZone()).add({ days: 30 }),
},
});
/**
* Weekends are marked unavailable. Because `allowsNonContiguousRanges` is not
* set (defaults to false), the picker prevents the user from selecting any
* range that spans across an unavailable date — the selection snaps to avoid
* crossing a weekend.
*/
export const WithUnavailableDates = meta.story({
render: args => {
const { locale } = useLocale();
return (
<DateRangePicker
{...args}
label="Working days only"
description="Weekends are unavailable. You cannot select a range that spans across them."
isDateUnavailable={date => isWeekend(date, locale)}
/>
);
},
});