feat: updated storybook to reflect controlled and uncontrolled model

packages/ui/src/components/Datepicker/Datepicker.stories.tsx

@@ -32,7 +32,7 @@ export default {
  },
 } as Meta;
 
-const Template: StoryFn<DatepickerProps> = (args) => {
+const ControlledTemplate: StoryFn<DatepickerProps> = (args) => {
  const [selectedDate, setSelectedDate] = useState<Date | null>(args.value ?? null);
 
  const handleChange = (date: Date | null) => {
@@ -57,8 +57,28 @@ const Template: StoryFn<DatepickerProps> = (args) => {
 
  return <Datepicker {...args} value={selectedDate} onChange={handleChange}/>;
 };
-export const DefaultEmpty = Template.bind({});
-DefaultEmpty.args = {
+
+const Template: StoryFn<DatepickerProps> = (args) => {
+ // https://github.com/storybookjs/storybook/issues/11822
+ if (args.minDate) {
+ args.minDate = new Date(args.minDate);
+ }
+ if (args.maxDate) {
+ args.maxDate = new Date(args.maxDate);
+ }
+
+ // update defaultDate based on the range
+ if (args.minDate && args.maxDate) {
+ if (args.defaultDate) {
+ args.defaultDate = getFirstDateInRange(args.defaultDate, args.minDate, args.maxDate);
+ }
+ }
+
+ return <Datepicker {...args}/>;
+};
+
+export const ControlledDefaultEmpty = ControlledTemplate.bind({});
+ControlledDefaultEmpty.args = {
  open: false,
  autoHide: true,
  showClearButton: true,
@@ -103,7 +123,6 @@ DateValueSet.args = {
  autoHide: true,
  showClearButton: true,
  showTodayButton: true,
- customValue: new Date(2022, 11, 25),
  minDate: undefined,
  maxDate: undefined,
  language: "en",