@kadconsulting/dry
Version:
KAD Reusable Component Library
58 lines • 2.33 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { inferThemeType, ThemeAwareStory } from '~internal/index';
import DatePicker from './DatePicker';
import { ThemeProvider } from '~components/ThemeProvider';
import darkTheme from '~themes/default/palette/dark';
import lightTheme from '~themes/default/palette/light';
export default {
title: 'Components/FormInputs/DatePicker',
tags: ['autodocs'],
component: DatePicker,
argTypes: {
initialDate: { control: 'date' },
dateFormat: { control: 'text' },
buttonText: { control: 'text' },
},
};
export const Default = {
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx(DatePicker, { ...args }) }) }));
},
args: {
initialDate: new Date(2022, 0, 1),
dateFormat: 'MM/dd/yyyy',
buttonText: 'Select Date',
},
};
export const RangeLimit = {
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx(DatePicker, { ...args }) }) }));
},
args: {
initialDate: new Date(),
dateFormat: 'MM/dd/yyyy',
buttonText: 'Select Date',
daysUntilBookingAllowed: 1,
rangeLimit: 7,
onMonthChange: (date) => console.log('onMonthChange', date),
showWithoutButton: true,
onDateChange: (date) => console.log('onDateChange', date),
hasYearAndMonthSelector: false,
disabledDates: [],
},
};
const DemoDatePicker = (_, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(ThemeAwareStory, { id: context.id, children: _jsx("div", { children: "Demo content goes here" }) }) }));
};
export const Demo = {
render: (args, context) => DemoDatePicker(args, context),
parameters: {
controls: {
disable: true,
},
},
};
//# sourceMappingURL=DatePicker.stories.js.map