puppy-lib-components
Version:
A modern TypeScript React component library with generic UI components and football pickem domain components
273 lines (272 loc) • 8.64 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { DateRangePicker } from './DateRangePicker';
import { Box, Stack, Typography } from '@mui/material';
const meta = {
title: 'Components/DateRangePicker',
component: DateRangePicker,
parameters: {
layout: 'centered',
docs: {
description: {
component: 'A comprehensive date range picker component with desktop and mobile support, built using only base MUI components.',
},
},
},
argTypes: {
value: {
control: false,
description: 'The selected date range value',
},
onChange: {
action: 'changed',
description: 'Callback fired when the value changes',
},
onAccept: {
action: 'accepted',
description: 'Callback fired when the value is accepted',
},
onClose: {
action: 'closed',
description: 'Callback fired when the picker closes',
},
onOpen: {
action: 'opened',
description: 'Callback fired when the picker opens',
},
label: {
control: 'text',
description: 'The label for the input field',
},
placeholder: {
control: 'text',
description: 'The placeholder text',
},
disabled: {
control: 'boolean',
description: 'Whether the component is disabled',
},
readOnly: {
control: 'boolean',
description: 'Whether the component is read-only',
},
required: {
control: 'boolean',
description: 'Whether the component is required',
},
error: {
control: 'boolean',
description: 'Whether the component is in an error state',
},
errorMessage: {
control: 'text',
description: 'Error message to display',
},
helperText: {
control: 'text',
description: 'Helper text to display',
},
format: {
control: 'text',
description: 'The format for displaying dates',
},
minDate: {
control: 'date',
description: 'The minimum selectable date',
},
maxDate: {
control: 'date',
description: 'The maximum selectable date',
},
disableFuture: {
control: 'boolean',
description: 'Whether to disable future dates',
},
disablePast: {
control: 'boolean',
description: 'Whether to disable past dates',
},
closeOnSelect: {
control: 'boolean',
description: 'Whether the picker should close after selecting both dates',
},
calendars: {
control: { type: 'select' },
options: [1, 2, 3],
description: 'The number of calendars to show on desktop',
},
showDaysOutsideCurrentMonth: {
control: 'boolean',
description: 'Whether to show days outside the current month',
},
displayWeekNumber: {
control: 'boolean',
description: 'Whether to display week numbers',
},
size: {
control: { type: 'select' },
options: ['small', 'medium'],
description: 'The size of the input field',
},
clearable: {
control: 'boolean',
description: 'Whether to show the clear button',
},
},
};
export default meta;
export const Default = {
args: {
label: 'Select Date Range',
placeholder: 'Choose start and end dates',
},
};
export const WithValue = {
args: {
label: 'Date Range',
value: {
start: new Date(2024, 0, 15),
end: new Date(2024, 0, 25),
},
},
};
export const SingleCalendar = {
args: {
label: 'Single Calendar',
calendars: 1,
placeholder: 'Select date range',
},
};
export const ThreeCalendars = {
args: {
label: 'Three Calendars',
calendars: 3,
placeholder: 'Select date range',
},
};
export const WithMinMaxDates = {
args: {
label: 'Restricted Date Range',
minDate: new Date(2024, 0, 1),
maxDate: new Date(2024, 11, 31),
placeholder: 'Select date range (2024 only)',
},
};
export const DisableFuture = {
args: {
label: 'No Future Dates',
disableFuture: true,
placeholder: 'Select date range (past dates only)',
},
};
export const DisablePast = {
args: {
label: 'No Past Dates',
disablePast: true,
placeholder: 'Select date range (future dates only)',
},
};
export const WithCustomFormat = {
args: {
label: 'Custom Format',
format: 'dd/MM/yyyy',
placeholder: 'Select date range (DD/MM/YYYY)',
},
};
export const WithValidation = {
args: {
label: 'Required Date Range',
required: true,
error: false,
helperText: 'Please select a date range',
placeholder: 'Select date range',
},
};
export const WithError = {
args: {
label: 'Date Range with Error',
error: true,
errorMessage: 'Please select a valid date range',
placeholder: 'Select date range',
},
};
export const Disabled = {
args: {
label: 'Disabled Date Range',
disabled: true,
value: {
start: new Date(2024, 0, 15),
end: new Date(2024, 0, 25),
},
},
};
export const ReadOnly = {
args: {
label: 'Read Only Date Range',
readOnly: true,
value: {
start: new Date(2024, 0, 15),
end: new Date(2024, 0, 25),
},
},
};
export const SmallSize = {
args: {
label: 'Small Date Range Picker',
size: 'small',
placeholder: 'Select date range',
},
};
export const NotClearable = {
args: {
label: 'Not Clearable',
clearable: false,
value: {
start: new Date(2024, 0, 15),
end: new Date(2024, 0, 25),
},
},
};
export const ShowDaysOutsideMonth = {
args: {
label: 'Show Days Outside Month',
showDaysOutsideCurrentMonth: true,
placeholder: 'Select date range',
},
};
export const CustomShouldDisableDate = {
args: {
label: 'Custom Disabled Dates',
shouldDisableDate: (date) => {
// Disable weekends
return date.getDay() === 0 || date.getDay() === 6;
},
placeholder: 'Select date range (weekdays only)',
},
};
export const Controlled = {
args: {
label: 'Controlled Date Range',
open: false,
rangePosition: 'start',
placeholder: 'Select date range',
},
render: (args) => {
const [open, setOpen] = React.useState(false);
const [rangePosition, setRangePosition] = React.useState('start');
const [value, setValue] = React.useState({
start: null,
end: null,
});
return (_jsxs(Box, { sx: { width: 300 }, children: [_jsx(DateRangePicker, { ...args, open: open, onOpen: () => setOpen(true), onClose: () => setOpen(false), rangePosition: rangePosition, onRangePositionChange: setRangePosition, value: value, onChange: setValue }), _jsxs(Box, { sx: { mt: 2 }, children: [_jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Selected: ", value.start?.toLocaleDateString(), " - ", value.end?.toLocaleDateString()] }), _jsxs(Typography, { variant: "body2", color: "text.secondary", children: ["Position: ", rangePosition] })] })] }));
},
};
export const AllVariants = {
render: () => (_jsxs(Stack, { spacing: 3, sx: { width: 400 }, children: [_jsx(DateRangePicker, { label: "Default", placeholder: "Select date range" }), _jsx(DateRangePicker, { label: "With Value", value: {
start: new Date(2024, 0, 15),
end: new Date(2024, 0, 25),
} }), _jsx(DateRangePicker, { label: "Disabled", disabled: true, value: {
start: new Date(2024, 0, 15),
end: new Date(2024, 0, 25),
} }), _jsx(DateRangePicker, { label: "Error State", error: true, errorMessage: "Please select a valid date range" }), _jsx(DateRangePicker, { label: "Small Size", size: "small", placeholder: "Select date range" })] })),
};