chore: added number input storybook controls (#108)

* chore: added numberinput storybook controls

* chore: added two way binding in args

* chore: added two way binding in calendar

* chore: added two way binding in datepickers

* chore: remove unused dep

* chore: removed decleration

src/calendar/stories/Calendar.stories.tsx

@@ -1,6 +1,7 @@
 import "./index.css";
 import * as React from "react";
 import { Meta, Story } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
 import { addWeeks, format, subWeeks } from "date-fns";
 
 import { CalendarComponent } from "./CalendarComponent";
@@ -22,13 +23,23 @@ const Base: Story = args => {
   args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
   args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
 
-  return <CalendarComponent {...args} />;
+  const [{ value }, updateArgs] = useArgs();
+
+  return (
+    <CalendarComponent
+      value={value}
+      onChange={date =>
+        updateArgs({ value: format(new Date(date), "yyyy-MM-dd") })
+      }
+      {...args}
+    />
+  );
 };
 
 export const Default = Base.bind({});
 
 export const DefaultValue = Base.bind({});
-DefaultValue.args = { defaultValue: "2001-01-01" };
+DefaultValue.args = { value: "2001-01-01", defaultValue: "2001-01-01" };
 
 export const MinMaxDate = Base.bind({});
 MinMaxDate.args = {

src/calendar/stories/RangeCalendar.stories.tsx

@@ -1,15 +1,10 @@
 import "./range-style.css";
-import {
-  addDays,
-  addWeeks,
-  subDays,
-  format,
-  setDate,
-  subWeeks,
-} from "date-fns";
 import * as React from "react";
 import { Meta, Story } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
+
 import RangeCalendarComponent from "./RangeCalendarComponent";
+import { addDays, addWeeks, subDays, format, subWeeks } from "date-fns";
 
 export default {
   title: "RangeCalendar",
@@ -43,20 +38,37 @@ const Base: Story = args => {
   args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
   args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
 
-  return <RangeCalendarComponent {...args} />;
+  const [argProps, updateArgs] = useArgs();
+
+  return (
+    <RangeCalendarComponent
+      value={{ start: argProps["start"], end: argProps["nd"] }}
+      onChange={date => {
+        updateArgs({
+          start: format(new Date(date.start), "yyyy-MM-dd"),
+          end: format(new Date(date.end), "yyyy-MM-dd"),
+        });
+      }}
+      {...args}
+    />
+  );
 };
 
 export const Default = Base.bind({});
 
 export const DefaultValue = Base.bind({});
 DefaultValue.args = {
-  defaultStart: setDate(new Date(), 10),
-  defaultEnd: new Date(),
+  start: new Date(),
+  end: addWeeks(new Date(), 1),
+  defaultStart: new Date(),
+  defaultEnd: addWeeks(new Date(), 1),
 };
 
 export const MinMaxDefaultDate = Base.bind({});
 MinMaxDefaultDate.args = {
-  minValue: subWeeks(new Date(), 1),
+  start: new Date(),
+  end: addDays(new Date(), 1),
+  minValue: subWeeks(new Date(), 4),
   maxValue: addWeeks(new Date(), 1),
 };
 

src/datepicker/stories/DatePicker.stories.tsx

@@ -1,7 +1,8 @@
 import "./index.css";
 import * as React from "react";
+import { useArgs } from "@storybook/client-api";
 import { Meta, Story } from "@storybook/react";
-import { addWeeks, subWeeks, format } from "date-fns";
+import { addWeeks, subWeeks, format, addDays } from "date-fns";
 
 import DatePickerComponent from "./DatePickerComponent";
 
@@ -22,23 +23,37 @@ const Base: Story = args => {
   args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
   args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
 
-  return <DatePickerComponent {...args} />;
+  const [{ value }, updateArgs] = useArgs();
+
+  return (
+    <DatePickerComponent
+      value={value}
+      onChange={date =>
+        updateArgs({ value: format(new Date(date), "yyyy-MM-dd") })
+      }
+      {...args}
+    />
+  );
 };
 
 export const Default = Base.bind({});
 
 export const InitialDate = Base.bind({});
-InitialDate.args = { defaultDate: "2020-02-29" };
+InitialDate.args = {
+  value: "2020-02-29",
+  defaultDate: "2020-02-29",
+};
 
 export const MinMaxDate = Base.bind({});
 MinMaxDate.args = {
+  value: addDays(new Date(), 2),
   minValue: new Date(),
   maxValue: addWeeks(new Date(), 2),
 };
 
 export const InValidDate = Base.bind({});
 InValidDate.args = {
-  defaultValue: addWeeks(new Date(), 2),
+  value: addWeeks(new Date(), 2),
   minValue: subWeeks(new Date(), 1),
   maxValue: addWeeks(new Date(), 1),
 };

src/datepicker/stories/DateRangePicker.stories.tsx

@@ -2,6 +2,7 @@ import "./index.css";
 import * as React from "react";
 import { format } from "date-fns";
 import { Meta, Story } from "@storybook/react";
+import { useArgs } from "@storybook/client-api";
 import { addWeeks, setDate, subWeeks } from "date-fns";
 
 import DateRangePickerComponent from "./DateRangePickerComponent";
@@ -25,7 +26,20 @@ const Base: Story = args => {
   args.minValue &&= format(new Date(args.minValue), "yyyy-MM-dd");
   args.maxValue &&= format(new Date(args.maxValue), "yyyy-MM-dd");
 
-  return <DateRangePickerComponent {...args} />;
+  const [argProps, updateArgs] = useArgs();
+
+  return (
+    <DateRangePickerComponent
+      value={{ start: argProps["start"], end: argProps["nd"] }}
+      onChange={date => {
+        updateArgs({
+          start: format(new Date(date.start), "yyyy-MM-dd"),
+          end: format(new Date(date.end), "yyyy-MM-dd"),
+        });
+      }}
+      {...args}
+    />
+  );
 };
 
 export const Default = Base.bind({});
@@ -36,8 +50,10 @@ DefaultValue.args = {
   end: new Date(),
 };
 
-export const DateRangePickerComp = Base.bind({});
-DateRangePickerComp.args = {
+export const MinMaxValue = Base.bind({});
+MinMaxValue.args = {
+  start: setDate(new Date(), 10),
+  end: new Date(),
   minValue: subWeeks(new Date(), 1),
   maxValue: addWeeks(new Date(), 1),
 };