From 9c251eb200ee257a600f848f11c9d617d8a92ac3 Mon Sep 17 00:00:00 2001 From: Anurag Date: Wed, 21 Oct 2020 19:41:57 +0530 Subject: [PATCH 1/6] chore: added numberinput storybook controls --- .../stories/NumberInput.stories.tsx | 179 +++++++++--------- 1 file changed, 92 insertions(+), 87 deletions(-) diff --git a/src/number-input/stories/NumberInput.stories.tsx b/src/number-input/stories/NumberInput.stories.tsx index e2b58aa79..a41059ac8 100644 --- a/src/number-input/stories/NumberInput.stories.tsx +++ b/src/number-input/stories/NumberInput.stories.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Meta } from "@storybook/react"; +import { Meta, Story } from "@storybook/react"; import { useForm, Controller } from "react-hook-form"; import { NumberInput } from "../NumberInput"; @@ -22,12 +22,100 @@ const NumberInputComp = (props: UseNumberInputProps) => { export default { title: "NumberInput", component: NumberInput, + argTypes: { + min: { control: "number" }, + step: { control: "number" }, + max: { control: "number" }, + precision: { control: "number" }, + defaultValue: { control: "number" }, + isDisabled: { control: "boolean" }, + isReadOnly: { control: "boolean" }, + keepWithinRange: { control: "boolean" }, + clampValueOnBlur: { control: "boolean" }, + focusInputOnChange: { control: "boolean" }, + }, } as Meta; -export const Default = () => { - const props = {}; +const Base: Story = args => { + return ; +}; + +export const Default = Base.bind({}); + +export const DefaultValue = Base.bind({}); +DefaultValue.args = { + defaultValue: 15, + min: 10, + max: 20, +}; + +export const Step = Base.bind({}); +Step.args = { + defaultValue: 15, + min: 10, + max: 30, + step: 5, +}; + +export const Precision = Base.bind({}); +Precision.args = { + defaultValue: 15, + min: 10, + max: 30, + step: 0.2, + precision: 2, +}; + +export const ClampValueOnBlurFalse = Base.bind({}); +ClampValueOnBlurFalse.args = { + defaultValue: 15, + min: 10, + max: 30, + step: 0.2, + precision: 2, + clampValueOnBlur: false, + keepWithinRange: false, +}; + +export const KeepWithinRangeFalse = Base.bind({}); +KeepWithinRangeFalse.args = { + defaultValue: 15, + min: 10, + max: 30, + step: 0.2, + precision: 2, + clampValueOnBlur: false, + keepWithinRange: false, +}; + +export const Disabled = Base.bind({}); +Disabled.args = { + defaultValue: 15, + min: 10, + max: 20, + isDisabled: true, +}; - return ; +export const ReadOnly = Base.bind({}); +ReadOnly.args = { + defaultValue: 15, + min: 10, + max: 20, + isReadOnly: true, +}; + +export const Options = Base.bind({}); +Options.args = { + min: 0, + step: 1, + max: 100, + precision: 1, + defaultValue: 5, + isDisabled: false, + isReadOnly: false, + keepWithinRange: true, + clampValueOnBlur: false, + focusInputOnChange: false, }; const NumberComponent: React.FC = ({ onChange, value, name }) => { @@ -65,86 +153,3 @@ export const ReactHookForm = () => { ); }; - -export const DefaultValue = () => { - const props = { - defaultValue: 15, - min: 10, - max: 20, - }; - - return ; -}; - -export const Step = () => { - const props = { - defaultValue: 15, - min: 10, - max: 30, - step: 5, - }; - - return ; -}; - -export const Precision = () => { - const props = { - defaultValue: 15, - min: 10, - max: 30, - step: 0.2, - precision: 2, - }; - - return ; -}; - -export const ClampValueOnBlurFalse = () => { - const props = { - defaultValue: 15, - min: 10, - max: 30, - step: 0.2, - precision: 2, - clampValueOnBlur: false, - keepWithinRange: false, - }; - - return ; -}; - -export const KeepWithinRangeFalse = () => { - const props = { - defaultValue: 15, - min: 10, - max: 30, - step: 0.2, - precision: 2, - clampValueOnBlur: false, - keepWithinRange: false, - }; - - return ; -}; - -export const Disabled = () => { - const props = { - defaultValue: 15, - min: 10, - max: 20, - isDisabled: true, - }; - - return ; -}; - -export const ReadOnly = () => { - const props = { - defaultValue: 15, - min: 10, - max: 20, - isReadOnly: true, - }; - - return ; -}; From 66eada690d921af5281c60e4b75de9c2f21cd1e3 Mon Sep 17 00:00:00 2001 From: Anurag Date: Thu, 22 Oct 2020 12:27:33 +0530 Subject: [PATCH 2/6] chore: added two way binding in args --- index.d.ts | 2 ++ package.json | 1 + .../stories/NumberInput.stories.tsx | 19 +++++++++++++++++-- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index 6a6940907..789eba1ad 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1 +1,3 @@ import "@testing-library/jest-dom/extend-expect"; + +declare module "@sambego/storybook-state"; diff --git a/package.json b/package.json index ad4e11990..a0d450af3 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "@babel/preset-typescript": "7.12.1", "@commitlint/cli": "11.0.0", "@commitlint/config-conventional": "11.0.0", + "@sambego/storybook-state": "^2.0.1", "@storybook/addon-a11y": "6.0.26", "@storybook/addon-actions": "6.0.26", "@storybook/addon-essentials": "6.0.26", diff --git a/src/number-input/stories/NumberInput.stories.tsx b/src/number-input/stories/NumberInput.stories.tsx index a41059ac8..fe8617a00 100644 --- a/src/number-input/stories/NumberInput.stories.tsx +++ b/src/number-input/stories/NumberInput.stories.tsx @@ -1,5 +1,6 @@ import React from "react"; import { Meta, Story } from "@storybook/react"; +import { useArgs } from "@storybook/client-api"; import { useForm, Controller } from "react-hook-form"; import { NumberInput } from "../NumberInput"; @@ -8,7 +9,9 @@ import { NumberInputIncrementButton } from "../NumberInputIncrementButton"; import { UseNumberInputProps, useNumberInputState } from "../NumberInputState"; const NumberInputComp = (props: UseNumberInputProps) => { - const state = useNumberInputState(props); + const state = useNumberInputState({ + ...props, + }); return (
@@ -23,6 +26,7 @@ export default { title: "NumberInput", component: NumberInput, argTypes: { + value: { control: "number" }, min: { control: "number" }, step: { control: "number" }, max: { control: "number" }, @@ -37,7 +41,18 @@ export default { } as Meta; const Base: Story = args => { - return ; + const [{ value, defaultValue }, updateArgs] = useArgs(); + + return ( + { + updateArgs({ value }); + }} + defaultValue={defaultValue} + value={value || defaultValue} + {...args} + /> + ); }; export const Default = Base.bind({}); From 3d68c39e021f0318f5c0bd683b96b9345d955d10 Mon Sep 17 00:00:00 2001 From: Anurag Date: Thu, 22 Oct 2020 12:52:29 +0530 Subject: [PATCH 3/6] chore: added two way binding in calendar --- src/calendar/stories/Calendar.stories.tsx | 15 ++++++-- .../stories/RangeCalendar.stories.tsx | 36 ++++++++++++------- 2 files changed, 37 insertions(+), 14 deletions(-) diff --git a/src/calendar/stories/Calendar.stories.tsx b/src/calendar/stories/Calendar.stories.tsx index 7b462e45d..9dba56852 100644 --- a/src/calendar/stories/Calendar.stories.tsx +++ b/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 ; + const [{ value }, updateArgs] = useArgs(); + + return ( + + 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 = { diff --git a/src/calendar/stories/RangeCalendar.stories.tsx b/src/calendar/stories/RangeCalendar.stories.tsx index 71b352b89..92ee1c379 100644 --- a/src/calendar/stories/RangeCalendar.stories.tsx +++ b/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 ; + const [argProps, updateArgs] = useArgs(); + + return ( + { + 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), }; From 6a7fb95664b188e3375ff2d4550bad4beb25c6b4 Mon Sep 17 00:00:00 2001 From: Anurag Date: Thu, 22 Oct 2020 13:29:06 +0530 Subject: [PATCH 4/6] chore: added two way binding in datepickers --- src/datepicker/stories/DatePicker.stories.tsx | 23 +++++++++++++++---- .../stories/DateRangePicker.stories.tsx | 22 +++++++++++++++--- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/src/datepicker/stories/DatePicker.stories.tsx b/src/datepicker/stories/DatePicker.stories.tsx index c227cae6c..8f93f7965 100644 --- a/src/datepicker/stories/DatePicker.stories.tsx +++ b/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 ; + const [{ value }, updateArgs] = useArgs(); + + return ( + + 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), }; diff --git a/src/datepicker/stories/DateRangePicker.stories.tsx b/src/datepicker/stories/DateRangePicker.stories.tsx index 15dd05f47..052d84703 100644 --- a/src/datepicker/stories/DateRangePicker.stories.tsx +++ b/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 ; + const [argProps, updateArgs] = useArgs(); + + return ( + { + 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), }; From e66892e497cc482ae45ba5143c5bb385e65e86ef Mon Sep 17 00:00:00 2001 From: Anurag Date: Thu, 22 Oct 2020 19:54:20 +0530 Subject: [PATCH 5/6] chore: remove unused dep --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index a0d450af3..ad4e11990 100644 --- a/package.json +++ b/package.json @@ -66,7 +66,6 @@ "@babel/preset-typescript": "7.12.1", "@commitlint/cli": "11.0.0", "@commitlint/config-conventional": "11.0.0", - "@sambego/storybook-state": "^2.0.1", "@storybook/addon-a11y": "6.0.26", "@storybook/addon-actions": "6.0.26", "@storybook/addon-essentials": "6.0.26", From ee0e9460a28d646f73f87a23e29701f406b0245b Mon Sep 17 00:00:00 2001 From: Anurag Date: Thu, 22 Oct 2020 19:56:15 +0530 Subject: [PATCH 6/6] chore: removed decleration --- index.d.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/index.d.ts b/index.d.ts index 789eba1ad..6a6940907 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,3 +1 @@ import "@testing-library/jest-dom/extend-expect"; - -declare module "@sambego/storybook-state";