From edd7c5a7d4103b9955440356cd92f9ef26049f67 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 04:49:35 +0900 Subject: [PATCH 01/53] =?UTF-8?q?chore:=20day=20picker=20=EC=84=A4?= =?UTF-8?q?=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/package.json | 1 + pnpm-lock.yaml | 16 ++++++++++++++++ 2 files changed, 17 insertions(+) diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index cd521102..23ca5881 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -154,6 +154,7 @@ "dependencies": { "clsx": "^2.1.1", "lottie-react": "^2.4.0", + "react-day-picker": "^9.0.8", "wowds-icons": "workspace:^" }, "peerDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cfe22fd4..9f85f6f4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -265,6 +265,9 @@ importers: react: specifier: ^18.2.0 version: 18.2.0 + react-day-picker: + specifier: ^9.0.8 + version: 9.0.8(react@18.2.0) wowds-icons: specifier: workspace:^ version: link:../wow-icons @@ -7671,6 +7674,10 @@ packages: is-data-view: 1.0.1 dev: true + /date-fns@3.6.0: + resolution: {integrity: sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==} + dev: false + /date-format@4.0.3: resolution: {integrity: sha512-7P3FyqDcfeznLZp2b+OMitV9Sz2lUnsT87WaTat9nVwqsBkTzPG3lPLNwW3en6F4pHUiWzr6vb8CLhjdK9bcxQ==} engines: {node: '>=4.0'} @@ -13436,6 +13443,15 @@ packages: tween-functions: 1.2.0 dev: true + /react-day-picker@9.0.8(react@18.2.0): + resolution: {integrity: sha512-dZM94abRNnc2jC/wkWn56358GHJcfAHfyC2Th9asyIUQhFIC5D2Ef5qUG9n1b5t8PeCJst7eCWJ6b+XZaAjxhA==} + peerDependencies: + react: '>=16.8.0' + dependencies: + date-fns: 3.6.0 + react: 18.2.0 + dev: false + /react-docgen-typescript@2.2.2(typescript@5.3.3): resolution: {integrity: sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg==} peerDependencies: From 97589efa3377b3c3f3b0294da6d91c3ed4590667 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 06:41:30 +0900 Subject: [PATCH 02/53] =?UTF-8?q?feat:=20LeftArrow=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-icons/src/component/LeftArrow.tsx | 42 +++++++++++++++++++ packages/wow-icons/src/component/index.ts | 1 + packages/wow-icons/src/svg/left-arrow.svg | 3 ++ 3 files changed, 46 insertions(+) create mode 100644 packages/wow-icons/src/component/LeftArrow.tsx create mode 100644 packages/wow-icons/src/svg/left-arrow.svg diff --git a/packages/wow-icons/src/component/LeftArrow.tsx b/packages/wow-icons/src/component/LeftArrow.tsx new file mode 100644 index 00000000..10aad208 --- /dev/null +++ b/packages/wow-icons/src/component/LeftArrow.tsx @@ -0,0 +1,42 @@ +import { forwardRef } from "react"; +import { color } from "wowds-tokens"; + +import type { IconProps } from "@/types/Icon.ts"; + +const LeftArrow = forwardRef( + ( + { + className, + width = "20", + height = "20", + viewBox = "0 0 20 20", + stroke = "white", + ...rest + }, + ref + ) => { + return ( + + + + ); + } +); + +LeftArrow.displayName = "LeftArrow"; +export default LeftArrow; diff --git a/packages/wow-icons/src/component/index.ts b/packages/wow-icons/src/component/index.ts index ef0816dd..41a17fc8 100644 --- a/packages/wow-icons/src/component/index.ts +++ b/packages/wow-icons/src/component/index.ts @@ -3,6 +3,7 @@ export { default as Close } from "./Close.tsx"; export { default as DownArrow } from "./DownArrow.tsx"; export { default as Edit } from "./Edit.tsx"; export { default as Help } from "./Help.tsx"; +export { default as LeftArrow } from "./LeftArrow.tsx"; export { default as Link } from "./Link.tsx"; export { default as Plus } from "./Plus.tsx"; export { default as Reload } from "./Reload.tsx"; diff --git a/packages/wow-icons/src/svg/left-arrow.svg b/packages/wow-icons/src/svg/left-arrow.svg new file mode 100644 index 00000000..2d9aed25 --- /dev/null +++ b/packages/wow-icons/src/svg/left-arrow.svg @@ -0,0 +1,3 @@ + + + From 06c1f6722640088a4adee81726911eac09db6d90 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 06:41:52 +0900 Subject: [PATCH 03/53] =?UTF-8?q?feat:=20DatePicker=20UI=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/package.json | 5 + packages/wow-ui/rollup.config.js | 1 + .../components/Picker/DatePicker.stories.tsx | 23 +++ .../src/components/Picker/DatePicker.tsx | 158 ++++++++++++++++++ 4 files changed, 187 insertions(+) create mode 100644 packages/wow-ui/src/components/Picker/DatePicker.stories.tsx create mode 100644 packages/wow-ui/src/components/Picker/DatePicker.tsx diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index 23ca5881..f94c0b58 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -70,6 +70,11 @@ "require": "./dist/RadioGroup.cjs", "import": "./dist/RadioGroup.js" }, + "./DatePicker": { + "types": "./dist/components/Picker/DatePicker.d.ts", + "require": "./dist/DatePicker.cjs", + "import": "./dist/DatePicker.js" + }, "./MultiGroup": { "types": "./dist/components/MultiGroup/index.d.ts", "require": "./dist/MultiGroup.cjs", diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index f03811d6..3ab59a1c 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -30,6 +30,7 @@ export default { SearchBar: "./src/components/SearchBar", RadioButton: "./src/components/RadioGroup/RadioButton", RadioGroup: "./src/components/RadioGroup/RadioGroup", + DatePicker: "./src/components/Picker/DatePicker", MultiGroup: "./src/components/MultiGroup", DropDownOption: "./src/components/DropDown/DropDownOption", DropDown: "./src/components/DropDown", diff --git a/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx new file mode 100644 index 00000000..c3993b61 --- /dev/null +++ b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx @@ -0,0 +1,23 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import DatePicker from "@/components/Picker/DatePicker"; + +const meta = { + title: "UI/DatePicker", + component: DatePicker, + tags: ["autodocs"], + parameters: { + componentSubtitle: "DatePicker 컴포넌트", + }, + argTypes: {}, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + mode: "single", + }, +}; diff --git a/packages/wow-ui/src/components/Picker/DatePicker.tsx b/packages/wow-ui/src/components/Picker/DatePicker.tsx new file mode 100644 index 00000000..cef5e357 --- /dev/null +++ b/packages/wow-ui/src/components/Picker/DatePicker.tsx @@ -0,0 +1,158 @@ +"use client"; + +import { css, cva, cx } from "@styled-system/css"; +import { Flex, styled } from "@styled-system/jsx"; +import type { ComponentProps } from "react"; +import { useState } from "react"; +import { DayPicker } from "react-day-picker"; +import { DownArrow, LeftArrow, RightArrow } from "wowds-icons"; + +import TextField from "@/components/TextField"; + +export type CalendarProps = ComponentProps & { + label: string; +}; + +const DatePicker = ({ + className, + classNames, + label, + ...rest +}: CalendarProps) => { + const [selected, setSelected] = useState(new Date()); + return ( + + + { + return ( + + {["S", "M", "T", "W", "T", "F", "S"].map((week: string) => ( + + {week} + + ))} + + ); + }, + MonthCaption: (props) => { + const date = props.calendarMonth.date; + const year = date.getFullYear(); + const month = date.getMonth().toString().padStart(2, "0"); + return ( + {`${year}.${month}`} + ); + }, + Chevron: (props) => { + switch (props.orientation) { + case "left": + return ; + case "right": + return ; + case "down": + return ; + default: + return ; + } + }, + }} + {...rest} + /> + + ); +}; + +const buttonStyle = cva({ + base: { + paddingX: "xs", + + borderRadius: "sm", + textStyle: "body1", + textAlign: "center", + cursor: "pointer", + }, + variants: { + variant: { + time: { + color: "sub", + background: "background", + _selected: { + borderWidth: 1, + borderColor: "textBlack", + }, + _pressed: { + borderWidth: 1, + background: "monoBackgroundPressed", + }, + }, + date: { + color: "sub", + _active: { + background: "monoBackgroundPressed", + }, + }, + month: { color: "sub", cursor: "default" }, + }, + state: { + default: {}, + selected: { + background: "primary", + color: "textWhite", + }, + disabled: { + color: "lightDisabled", + cursor: "not-allowed", + }, + }, + }, +}); + +DatePicker.displayName = "DatePicker"; +export default DatePicker; From 61b98b9758605255f6aafdf3cef08f838564bedf Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 06:49:57 +0900 Subject: [PATCH 04/53] =?UTF-8?q?fix:=20Date=20Button=20UI=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Picker/DatePicker.tsx | 29 +++++++------------ 1 file changed, 10 insertions(+), 19 deletions(-) diff --git a/packages/wow-ui/src/components/Picker/DatePicker.tsx b/packages/wow-ui/src/components/Picker/DatePicker.tsx index cef5e357..d555f94d 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.tsx @@ -33,9 +33,15 @@ const DatePicker = ({ paddingY: "1.25rem", background: "background", - borderRadius: "sm", + borderRadius: "md", shadow: "mono", }), + nav: css({ + width: "17.75rem", + display: "flex", + justifyContent: "space-between", + position: "absolute", + }), month: css({ display: "flex", flexDirection: "column", @@ -43,25 +49,10 @@ const DatePicker = ({ alignItems: "center", }), month_grid: css({ width: "100%" }), - nav: css({ - width: "17.75rem", - display: "flex", - justifyContent: "space-between", - position: "absolute", - }), weekday: buttonStyle({ variant: "date", state: "default" }), - - head_row: "flex", - head_cell: - "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", - row: "flex w-full mt-2", - cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", day: buttonStyle({ variant: "date", state: "default" }), - day_selected: buttonStyle({ variant: "date", state: "selected" }), - day_today: buttonStyle({ variant: "date", state: "selected" }), - day_outside: buttonStyle({ variant: "date", state: "disabled" }), - day_disabled: buttonStyle({ variant: "date", state: "disabled" }), - day_hidden: buttonStyle({ variant: "date", state: "disabled" }), + outside: buttonStyle({ variant: "date", state: "disabled" }), + selected: buttonStyle({ variant: "date", state: "selected" }), ...classNames, }} components={{ @@ -148,7 +139,7 @@ const buttonStyle = cva({ }, disabled: { color: "lightDisabled", - cursor: "not-allowed", + pointerEvents: "none", }, }, }, From 22cf031db74254fb145724a1a4f22bb7a65a6395 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 06:55:28 +0900 Subject: [PATCH 05/53] =?UTF-8?q?feat:=20Calendar=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-icons/src/component/Calendar.tsx | 50 +++++++++++++++++++ packages/wow-icons/src/component/index.ts | 1 + packages/wow-icons/src/svg/calendar.svg | 8 +++ 3 files changed, 59 insertions(+) create mode 100644 packages/wow-icons/src/component/Calendar.tsx create mode 100644 packages/wow-icons/src/svg/calendar.svg diff --git a/packages/wow-icons/src/component/Calendar.tsx b/packages/wow-icons/src/component/Calendar.tsx new file mode 100644 index 00000000..98b3601c --- /dev/null +++ b/packages/wow-icons/src/component/Calendar.tsx @@ -0,0 +1,50 @@ +import { forwardRef } from "react"; +import { color } from "wowds-tokens"; + +import type { IconProps } from "@/types/Icon.ts"; + +const Calendar = forwardRef( + ( + { + className, + width = "24", + height = "24", + viewBox = "0 0 24 24", + stroke = "white", + ...rest + }, + ref + ) => { + return ( + + + + + + + + + ); + } +); + +Calendar.displayName = "Calendar"; +export default Calendar; diff --git a/packages/wow-icons/src/component/index.ts b/packages/wow-icons/src/component/index.ts index 41a17fc8..11ab8e7f 100644 --- a/packages/wow-icons/src/component/index.ts +++ b/packages/wow-icons/src/component/index.ts @@ -1,3 +1,4 @@ +export { default as Calendar } from "./Calendar.tsx"; export { default as Check } from "./Check.tsx"; export { default as Close } from "./Close.tsx"; export { default as DownArrow } from "./DownArrow.tsx"; diff --git a/packages/wow-icons/src/svg/calendar.svg b/packages/wow-icons/src/svg/calendar.svg new file mode 100644 index 00000000..e7ea74b1 --- /dev/null +++ b/packages/wow-icons/src/svg/calendar.svg @@ -0,0 +1,8 @@ + + + + + + + + From 33f8ef224644f87857b235aaaaa0176839b17ebb Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 07:23:53 +0900 Subject: [PATCH 06/53] =?UTF-8?q?feat:=20Date=20=EC=A0=84=EC=9A=A9=20DropD?= =?UTF-8?q?own=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Picker/DateDropDown.tsx | 92 +++++++++ .../components/Picker/DatePicker.stories.tsx | 1 + .../src/components/Picker/DatePicker.tsx | 177 ++++++++++-------- 3 files changed, 192 insertions(+), 78 deletions(-) create mode 100644 packages/wow-ui/src/components/Picker/DateDropDown.tsx diff --git a/packages/wow-ui/src/components/Picker/DateDropDown.tsx b/packages/wow-ui/src/components/Picker/DateDropDown.tsx new file mode 100644 index 00000000..30707aa8 --- /dev/null +++ b/packages/wow-ui/src/components/Picker/DateDropDown.tsx @@ -0,0 +1,92 @@ +"use client"; + +import { cva } from "@styled-system/css"; +import { Flex, styled } from "@styled-system/jsx"; +import { Calendar } from "wowds-icons"; + +interface DateDropDownProps { + label: string; + selectedValue?: string; + placeholder?: string; + onClick: () => void; +} + +const DateDropDown = ({ + placeholder, + label, + selectedValue, + onClick, +}: DateDropDownProps) => { + return ( + + + {label} + + + + {selectedValue ? selectedValue : placeholder} + + + + + ); +}; + +export default DateDropDown; + +const dropdownStyle = cva({ + base: { + lg: { + maxWidth: "22.375rem", + }, + smDown: { + width: "100%", + }, + backgroundColor: "background", + + border: "1px solid", + borderRadius: "sm", + borderColor: "outline", + + paddingY: "xs", + paddingX: "sm", + }, +}); + +const placeholderStyle = cva({ + base: { + textStyle: "body1", + }, + variants: { + type: { + default: { + color: "outline", + _hover: { + color: "sub", + }, + }, + focused: { + color: "primary", + }, + selected: { + color: "textBlack", + }, + }, + }, +}); diff --git a/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx index c3993b61..25a5f597 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx @@ -19,5 +19,6 @@ type Story = StoryObj; export const Primary: Story = { args: { mode: "single", + label: "종료 날짜", }, }; diff --git a/packages/wow-ui/src/components/Picker/DatePicker.tsx b/packages/wow-ui/src/components/Picker/DatePicker.tsx index d555f94d..702f163a 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.tsx @@ -4,98 +4,119 @@ import { css, cva, cx } from "@styled-system/css"; import { Flex, styled } from "@styled-system/jsx"; import type { ComponentProps } from "react"; import { useState } from "react"; +import type { PropsBase, PropsSingle } from "react-day-picker"; import { DayPicker } from "react-day-picker"; import { DownArrow, LeftArrow, RightArrow } from "wowds-icons"; -import TextField from "@/components/TextField"; +import DateDropDown from "@/components/Picker/DateDropDown"; -export type CalendarProps = ComponentProps & { - label: string; -}; +export type CalendarProps = PropsBase & + PropsSingle & { + label: string; + placeholder?: string; + }; const DatePicker = ({ className, classNames, label, + placeholder = "YYYY-MM-DD", ...rest }: CalendarProps) => { - const [selected, setSelected] = useState(new Date()); + const [selected, setSelected] = useState(); + const [open, setOpen] = useState(false); + + const year = selected?.getFullYear(); + const month = selected?.getMonth().toString().padStart(2, "0"); + const day = selected?.getDate().toString().padStart(2, "0"); + return ( - - { - return ( - - {["S", "M", "T", "W", "T", "F", "S"].map((week: string) => ( - - {week} - - ))} - - ); - }, - MonthCaption: (props) => { - const date = props.calendarMonth.date; - const year = date.getFullYear(); - const month = date.getMonth().toString().padStart(2, "0"); - return ( - {`${year}.${month}`} - ); - }, - Chevron: (props) => { - switch (props.orientation) { - case "left": - return ; - case "right": - return ; - case "down": - return ; - default: - return ; - } - }, - }} - {...rest} + setOpen((prev) => !prev)} /> + {open && ( + { + return ( + + {["S", "M", "T", "W", "T", "F", "S"].map( + (week: string, index: number) => ( + + {week} + + ) + )} + + ); + }, + MonthCaption: (props) => { + const date = props.calendarMonth.date; + const year = date.getFullYear(); + const month = date.getMonth().toString().padStart(2, "0"); + return ( + {`${year}.${month}`} + ); + }, + Chevron: (props) => { + switch (props.orientation) { + case "left": + return ; + case "right": + return ; + case "down": + return ; + default: + return ; + } + }, + }} + onSelect={setSelected} + {...rest} + /> + )} ); }; From 3f66d4770665a2f73f08dffe05a5f182eb2e3b0f Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 07:25:57 +0900 Subject: [PATCH 07/53] =?UTF-8?q?fix:=20thead=20=EA=B4=80=EB=A0=A8=20?= =?UTF-8?q?=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95,=20=ED=95=84=EC=9A=94?= =?UTF-8?q?=20=EC=97=86=EB=8A=94=20import=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Picker/DatePicker.tsx | 35 ++++++++++--------- 1 file changed, 18 insertions(+), 17 deletions(-) diff --git a/packages/wow-ui/src/components/Picker/DatePicker.tsx b/packages/wow-ui/src/components/Picker/DatePicker.tsx index 702f163a..bd88d35c 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.tsx @@ -1,8 +1,7 @@ "use client"; -import { css, cva, cx } from "@styled-system/css"; +import { css, cva } from "@styled-system/css"; import { Flex, styled } from "@styled-system/jsx"; -import type { ComponentProps } from "react"; import { useState } from "react"; import type { PropsBase, PropsSingle } from "react-day-picker"; import { DayPicker } from "react-day-picker"; @@ -75,21 +74,23 @@ const DatePicker = ({ components={{ Weekdays: () => { return ( - - {["S", "M", "T", "W", "T", "F", "S"].map( - (week: string, index: number) => ( - - {week} - - ) - )} - + + + {["S", "M", "T", "W", "T", "F", "S"].map( + (week: string, index: number) => ( + + {week} + + ) + )} + + ); }, MonthCaption: (props) => { From 857c112000e96e5bba26eaa60436854bb12c104d Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 08:09:09 +0900 Subject: [PATCH 08/53] =?UTF-8?q?feat:=20button=20=ED=81=B4=EB=A6=AD=20?= =?UTF-8?q?=EC=98=81=EC=97=AD=20=ED=99=95=EB=8C=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Picker/DatePicker.tsx | 49 ++++++++++--------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/packages/wow-ui/src/components/Picker/DatePicker.tsx b/packages/wow-ui/src/components/Picker/DatePicker.tsx index bd88d35c..29383be5 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.tsx @@ -64,14 +64,40 @@ const DatePicker = ({ gap: "lg", alignItems: "center", }), - month_grid: css({ width: "100%" }), + month_grid: css({ + width: "100%", + }), weekday: buttonStyle({ variant: "date", state: "default" }), day: buttonStyle({ variant: "date", state: "default" }), + day_button: css({ + width: "100%", + cursor: "pointer", + }), outside: buttonStyle({ variant: "date", state: "disabled" }), selected: buttonStyle({ variant: "date", state: "selected" }), ...classNames, }} components={{ + Chevron: (props) => { + switch (props.orientation) { + case "left": + return ; + case "right": + return ; + case "down": + return ; + default: + return ; + } + }, + MonthCaption: (props) => { + const date = props.calendarMonth.date; + const year = date.getFullYear(); + const month = date.getMonth().toString().padStart(2, "0"); + return ( + {`${year}.${month}`} + ); + }, Weekdays: () => { return ( @@ -93,26 +119,6 @@ const DatePicker = ({ ); }, - MonthCaption: (props) => { - const date = props.calendarMonth.date; - const year = date.getFullYear(); - const month = date.getMonth().toString().padStart(2, "0"); - return ( - {`${year}.${month}`} - ); - }, - Chevron: (props) => { - switch (props.orientation) { - case "left": - return ; - case "right": - return ; - case "down": - return ; - default: - return ; - } - }, }} onSelect={setSelected} {...rest} @@ -129,7 +135,6 @@ const buttonStyle = cva({ borderRadius: "sm", textStyle: "body1", textAlign: "center", - cursor: "pointer", }, variants: { variant: { From 34d7207e899e2ac4e269739f66e8604b7ca73114 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 13 Aug 2024 08:15:21 +0900 Subject: [PATCH 09/53] =?UTF-8?q?feat:=20single=20mode=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=9C=ED=95=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Picker/DatePicker.stories.tsx | 1 - packages/wow-ui/src/components/Picker/DatePicker.tsx | 5 +++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx index 25a5f597..9ed78129 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx @@ -18,7 +18,6 @@ type Story = StoryObj; export const Primary: Story = { args: { - mode: "single", label: "종료 날짜", }, }; diff --git a/packages/wow-ui/src/components/Picker/DatePicker.tsx b/packages/wow-ui/src/components/Picker/DatePicker.tsx index 29383be5..c4f12889 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.tsx @@ -9,8 +9,8 @@ import { DownArrow, LeftArrow, RightArrow } from "wowds-icons"; import DateDropDown from "@/components/Picker/DateDropDown"; -export type CalendarProps = PropsBase & - PropsSingle & { +export type CalendarProps = Omit & + Omit & { label: string; placeholder?: string; }; @@ -41,6 +41,7 @@ const DatePicker = ({ Date: Tue, 13 Aug 2024 08:18:16 +0900 Subject: [PATCH 10/53] =?UTF-8?q?feat:=20DateDropDown=20=EB=B9=8C=EB=93=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/package.json | 5 +++++ packages/wow-ui/rollup.config.js | 1 + 2 files changed, 6 insertions(+) diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index f94c0b58..6cec7bf9 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -70,6 +70,11 @@ "require": "./dist/RadioGroup.cjs", "import": "./dist/RadioGroup.js" }, + "./DateDropDown": { + "types": "./dist/components/Picker/DateDropDown.d.ts", + "require": "./dist/DateDropDown.cjs", + "import": "./dist/DateDropDown.js" + }, "./DatePicker": { "types": "./dist/components/Picker/DatePicker.d.ts", "require": "./dist/DatePicker.cjs", diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index 3ab59a1c..f8d5dd3a 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -30,6 +30,7 @@ export default { SearchBar: "./src/components/SearchBar", RadioButton: "./src/components/RadioGroup/RadioButton", RadioGroup: "./src/components/RadioGroup/RadioGroup", + DateDropDown: "./src/components/Picker/DateDropDown", DatePicker: "./src/components/Picker/DatePicker", MultiGroup: "./src/components/MultiGroup", DropDownOption: "./src/components/DropDown/DropDownOption", From 96989058117fe22ffb75fc8d945503821ea5570c Mon Sep 17 00:00:00 2001 From: hamo-o Date: Fri, 16 Aug 2024 13:16:04 +0900 Subject: [PATCH 11/53] =?UTF-8?q?feat:=20usePickerState=20=ED=9B=85=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Picker/DatePicker.stories.tsx | 59 ++++- .../src/components/Picker/DatePicker.tsx | 238 +++++++++--------- packages/wow-ui/src/hooks/usePickerState.ts | 27 ++ 3 files changed, 204 insertions(+), 120 deletions(-) create mode 100644 packages/wow-ui/src/hooks/usePickerState.ts diff --git a/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx index 9ed78129..a08c7af1 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx @@ -1,6 +1,7 @@ -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta } from "@storybook/react"; import DatePicker from "@/components/Picker/DatePicker"; +import usePickerState from "@/hooks/usePickerState"; const meta = { title: "UI/DatePicker", @@ -9,15 +10,59 @@ const meta = { parameters: { componentSubtitle: "DatePicker 컴포넌트", }, - argTypes: {}, + argTypes: { + label: { + description: "DatePicker의 라벨을 나타냅니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: undefined }, + }, + }, + selected: { + description: "DatePicker의 선택된 날짜 값을 나타냅니다.", + table: { + type: { summary: "Date" }, + defaultValue: { summary: undefined }, + }, + }, + setSelected: { + description: "DatePicker의 날짜를 선택할 수 있는 함수를 나타냅니다.", + table: { + type: { summary: "function" }, + defaultValue: { + summary: undefined, + }, + }, + }, + date: { + description: "DatePicker에서 쓰일 날짜 객체를 나타냅니다.", + table: { + type: { summary: "Object" }, + defaultValue: { summary: undefined }, + }, + }, + placeholder: { + description: + "DatePicker의 드롭다운에 들어갈 placeholder 텍스트를 나타냅니다.", + table: { + type: { summary: "string" }, + defaultValue: { summary: undefined }, + }, + }, + }, } satisfies Meta; export default meta; -type Story = StoryObj; +export const Default = () => { + const { selected, setSelected, date } = usePickerState(); -export const Primary: Story = { - args: { - label: "종료 날짜", - }, + return ( + + ); }; diff --git a/packages/wow-ui/src/components/Picker/DatePicker.tsx b/packages/wow-ui/src/components/Picker/DatePicker.tsx index c4f12889..682270f2 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.tsx @@ -2,132 +2,144 @@ import { css, cva } from "@styled-system/css"; import { Flex, styled } from "@styled-system/jsx"; -import { useState } from "react"; +import { forwardRef, useState } from "react"; import type { PropsBase, PropsSingle } from "react-day-picker"; import { DayPicker } from "react-day-picker"; import { DownArrow, LeftArrow, RightArrow } from "wowds-icons"; import DateDropDown from "@/components/Picker/DateDropDown"; -export type CalendarProps = Omit & +export interface StringDate { + year?: string; + month?: string; + day?: string; +} + +export type DatePickerProps = Omit & Omit & { label: string; + selected: Date | undefined; + setSelected: React.Dispatch>; + date: StringDate; placeholder?: string; }; -const DatePicker = ({ - className, - classNames, - label, - placeholder = "YYYY-MM-DD", - ...rest -}: CalendarProps) => { - const [selected, setSelected] = useState(); - const [open, setOpen] = useState(false); - - const year = selected?.getFullYear(); - const month = selected?.getMonth().toString().padStart(2, "0"); - const day = selected?.getDate().toString().padStart(2, "0"); - - return ( - - setOpen((prev) => !prev)} - /> - {open && ( - ( + ( + { + className, + classNames, + selected, + setSelected, + date, + label, + placeholder = "YYYY-MM-DD", + ...rest + }, + ref + ) => { + const [open, setOpen] = useState(false); - background: "background", - borderRadius: "md", - shadow: "mono", - }), - nav: css({ - width: "17.75rem", - display: "flex", - justifyContent: "space-between", - position: "absolute", - }), - month: css({ - display: "flex", - flexDirection: "column", - gap: "lg", - alignItems: "center", - }), - month_grid: css({ - width: "100%", - }), - weekday: buttonStyle({ variant: "date", state: "default" }), - day: buttonStyle({ variant: "date", state: "default" }), - day_button: css({ - width: "100%", - cursor: "pointer", - }), - outside: buttonStyle({ variant: "date", state: "disabled" }), - selected: buttonStyle({ variant: "date", state: "selected" }), - ...classNames, - }} - components={{ - Chevron: (props) => { - switch (props.orientation) { - case "left": - return ; - case "right": - return ; - case "down": - return ; - default: - return ; - } - }, - MonthCaption: (props) => { - const date = props.calendarMonth.date; - const year = date.getFullYear(); - const month = date.getMonth().toString().padStart(2, "0"); - return ( - {`${year}.${month}`} - ); - }, - Weekdays: () => { - return ( - - - {["S", "M", "T", "W", "T", "F", "S"].map( - (week: string, index: number) => ( - - {week} - - ) - )} - - - ); - }, - }} - onSelect={setSelected} - {...rest} + return ( + + setOpen((prev) => !prev)} /> - )} - - ); -}; + {open && ( + { + switch (props.orientation) { + case "left": + return ; + case "right": + return ; + case "down": + return ; + default: + return ; + } + }, + MonthCaption: (props) => { + const date = props.calendarMonth.date; + const year = date.getFullYear(); + const month = date.getMonth().toString().padStart(2, "0"); + return ( + {`${year}.${month}`} + ); + }, + Weekdays: () => { + return ( + + + {["S", "M", "T", "W", "T", "F", "S"].map( + (week: string, index: number) => ( + + {week} + + ) + )} + + + ); + }, + }} + onSelect={setSelected} + {...rest} + /> + )} + + ); + } +); const buttonStyle = cva({ base: { diff --git a/packages/wow-ui/src/hooks/usePickerState.ts b/packages/wow-ui/src/hooks/usePickerState.ts new file mode 100644 index 00000000..5907e453 --- /dev/null +++ b/packages/wow-ui/src/hooks/usePickerState.ts @@ -0,0 +1,27 @@ +import { useState } from "react"; + +interface PickerStateProps { + initialDate?: Date; +} + +const usePickerState = ({ + initialDate = new Date(), +}: PickerStateProps = {}) => { + const [selected, setSelected] = useState(initialDate); + + const year = selected?.getFullYear().toString(); + const month = selected?.getMonth().toString().padStart(2, "0"); + const day = selected?.getDate().toString().padStart(2, "0"); + + return { + selected, + setSelected, + date: { + year, + month, + day, + }, + }; +}; + +export default usePickerState; From 92e0dcf69a5b2be282c1a15f76c9d6ab9f9f42b0 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Fri, 16 Aug 2024 13:58:06 +0900 Subject: [PATCH 12/53] =?UTF-8?q?feat:=20Picker=20button=20style=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Picker/DatePicker.tsx | 63 ++++--------------- .../Picker/pickerButtonStyle.css.ts | 45 +++++++++++++ 2 files changed, 58 insertions(+), 50 deletions(-) create mode 100644 packages/wow-ui/src/components/Picker/pickerButtonStyle.css.ts diff --git a/packages/wow-ui/src/components/Picker/DatePicker.tsx b/packages/wow-ui/src/components/Picker/DatePicker.tsx index 682270f2..63e4695c 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.tsx @@ -1,6 +1,6 @@ "use client"; -import { css, cva } from "@styled-system/css"; +import { css } from "@styled-system/css"; import { Flex, styled } from "@styled-system/jsx"; import { forwardRef, useState } from "react"; import type { PropsBase, PropsSingle } from "react-day-picker"; @@ -8,6 +8,7 @@ import { DayPicker } from "react-day-picker"; import { DownArrow, LeftArrow, RightArrow } from "wowds-icons"; import DateDropDown from "@/components/Picker/DateDropDown"; +import { pickerButtonStyle } from "@/components/Picker/pickerButtonStyle.css"; export interface StringDate { year?: string; @@ -79,14 +80,20 @@ const DatePicker = forwardRef( month_grid: css({ width: "100%", }), - weekday: buttonStyle({ variant: "date", state: "default" }), - day: buttonStyle({ variant: "date", state: "default" }), + weekday: pickerButtonStyle({ variant: "date", state: "default" }), + day: pickerButtonStyle({ variant: "date", state: "default" }), day_button: css({ width: "100%", cursor: "pointer", }), - outside: buttonStyle({ variant: "date", state: "disabled" }), - selected: buttonStyle({ variant: "date", state: "selected" }), + outside: pickerButtonStyle({ + variant: "date", + state: "disabled", + }), + selected: pickerButtonStyle({ + variant: "date", + state: "selected", + }), ...classNames, }} components={{ @@ -118,7 +125,7 @@ const DatePicker = forwardRef( (week: string, index: number) => ( ( } ); -const buttonStyle = cva({ - base: { - paddingX: "xs", - - borderRadius: "sm", - textStyle: "body1", - textAlign: "center", - }, - variants: { - variant: { - time: { - color: "sub", - background: "background", - _selected: { - borderWidth: 1, - borderColor: "textBlack", - }, - _pressed: { - borderWidth: 1, - background: "monoBackgroundPressed", - }, - }, - date: { - color: "sub", - _active: { - background: "monoBackgroundPressed", - }, - }, - month: { color: "sub", cursor: "default" }, - }, - state: { - default: {}, - selected: { - background: "primary", - color: "textWhite", - }, - disabled: { - color: "lightDisabled", - pointerEvents: "none", - }, - }, - }, -}); - DatePicker.displayName = "DatePicker"; export default DatePicker; diff --git a/packages/wow-ui/src/components/Picker/pickerButtonStyle.css.ts b/packages/wow-ui/src/components/Picker/pickerButtonStyle.css.ts new file mode 100644 index 00000000..94be2628 --- /dev/null +++ b/packages/wow-ui/src/components/Picker/pickerButtonStyle.css.ts @@ -0,0 +1,45 @@ +import { cva } from "@styled-system/css"; + +export const pickerButtonStyle = cva({ + base: { + paddingX: "xs", + + borderRadius: "sm", + textStyle: "body1", + textAlign: "center", + }, + variants: { + variant: { + time: { + color: "sub", + background: "background", + _selected: { + borderWidth: 1, + borderColor: "textBlack", + }, + _pressed: { + borderWidth: 1, + background: "monoBackgroundPressed", + }, + }, + date: { + color: "sub", + _active: { + background: "monoBackgroundPressed", + }, + }, + month: { color: "sub", cursor: "default" }, + }, + state: { + default: {}, + selected: { + background: "primary", + color: "textWhite", + }, + disabled: { + color: "lightDisabled", + pointerEvents: "none", + }, + }, + }, +}); From b48737063ec8f9b340a08951125c73b77a2c28d5 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Fri, 16 Aug 2024 13:58:49 +0900 Subject: [PATCH 13/53] =?UTF-8?q?feat:=20TimePicker=20=EC=B4=88=EA=B8=B0?= =?UTF-8?q?=20UI?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Picker/DatePicker.stories.tsx | 17 +++++ .../src/components/Picker/TimePicker.tsx | 62 +++++++++++++++++++ packages/wow-ui/src/hooks/usePickerState.ts | 11 ++++ 3 files changed, 90 insertions(+) create mode 100644 packages/wow-ui/src/components/Picker/TimePicker.tsx diff --git a/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx index a08c7af1..09477f44 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx @@ -1,6 +1,7 @@ import type { Meta } from "@storybook/react"; import DatePicker from "@/components/Picker/DatePicker"; +import TimePicker from "@/components/Picker/TimePicker"; import usePickerState from "@/hooks/usePickerState"; const meta = { @@ -66,3 +67,19 @@ export const Default = () => { /> ); }; + +export const WithTimePicker = () => { + const { selected, setSelected, date } = usePickerState(); + + return ( + <> + + + + ); +}; diff --git a/packages/wow-ui/src/components/Picker/TimePicker.tsx b/packages/wow-ui/src/components/Picker/TimePicker.tsx new file mode 100644 index 00000000..9caa4c5f --- /dev/null +++ b/packages/wow-ui/src/components/Picker/TimePicker.tsx @@ -0,0 +1,62 @@ +import { Flex, styled } from "@styled-system/jsx"; +import { useMemo, useState } from "react"; + +import DropDown from "@/components/DropDown"; +import DropDownOption from "@/components/DropDown/DropDownOption"; +import { pickerButtonStyle } from "@/components/Picker/pickerButtonStyle.css"; + +const TimePicker = () => { + const hours = useMemo( + () => new Array(24).fill(0).map((_, i) => i.toString()), + [] + ); + const minutes = useMemo( + () => new Array(60).fill(0).map((_, i) => i.toString()), + [] + ); + + const [isAM, setIsAM] = useState(true); + + return ( + + setIsAM((prev) => !prev)} + > + {isAM ? "AM" : "PM"} + + + 00 + + } + > + {hours.map((hour) => ( + + ))} + + + 00 + + } + > + {minutes.map((minute) => ( + + ))} + + + ); +}; + +export default TimePicker; diff --git a/packages/wow-ui/src/hooks/usePickerState.ts b/packages/wow-ui/src/hooks/usePickerState.ts index 5907e453..ebaa9645 100644 --- a/packages/wow-ui/src/hooks/usePickerState.ts +++ b/packages/wow-ui/src/hooks/usePickerState.ts @@ -4,10 +4,21 @@ interface PickerStateProps { initialDate?: Date; } +interface TimePicker { + time: "AM" | "PM"; + hour: number; + minute: number; +} + const usePickerState = ({ initialDate = new Date(), }: PickerStateProps = {}) => { const [selected, setSelected] = useState(initialDate); + const [timeValue, setTimeValue] = useState({ + time: "AM", + hour: 0, + minute: 0, + }); const year = selected?.getFullYear().toString(); const month = selected?.getMonth().toString().padStart(2, "0"); From fd62548bd9c77ab1efb331027776263c70de2eee Mon Sep 17 00:00:00 2001 From: hamo-o Date: Fri, 16 Aug 2024 15:29:30 +0900 Subject: [PATCH 14/53] =?UTF-8?q?feat:=20TimePicker=EB=A5=BC=20usePickerSt?= =?UTF-8?q?ate=20=ED=9B=85=EC=9D=84=20=EC=9D=B4=EC=9A=A9=ED=95=B4=EC=84=9C?= =?UTF-8?q?=20=EB=8F=99=EC=9E=91=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Picker/DatePicker.stories.tsx | 10 +- .../src/components/Picker/TimePicker.tsx | 143 +++++++++++------- packages/wow-ui/src/hooks/usePickerState.ts | 30 +++- 3 files changed, 120 insertions(+), 63 deletions(-) diff --git a/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx index 09477f44..636ca5f0 100644 --- a/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx +++ b/packages/wow-ui/src/components/Picker/DatePicker.stories.tsx @@ -69,7 +69,8 @@ export const Default = () => { }; export const WithTimePicker = () => { - const { selected, setSelected, date } = usePickerState(); + const { selected, setSelected, setTime, time, selectedTime, date } = + usePickerState(); return ( <> @@ -79,7 +80,12 @@ export const WithTimePicker = () => { selected={selected} setSelected={setSelected} /> - + ); }; diff --git a/packages/wow-ui/src/components/Picker/TimePicker.tsx b/packages/wow-ui/src/components/Picker/TimePicker.tsx index 9caa4c5f..23594a53 100644 --- a/packages/wow-ui/src/components/Picker/TimePicker.tsx +++ b/packages/wow-ui/src/components/Picker/TimePicker.tsx @@ -1,62 +1,97 @@ import { Flex, styled } from "@styled-system/jsx"; -import { useMemo, useState } from "react"; +import { forwardRef, useMemo, useState } from "react"; import DropDown from "@/components/DropDown"; import DropDownOption from "@/components/DropDown/DropDownOption"; import { pickerButtonStyle } from "@/components/Picker/pickerButtonStyle.css"; -const TimePicker = () => { - const hours = useMemo( - () => new Array(24).fill(0).map((_, i) => i.toString()), - [] - ); - const minutes = useMemo( - () => new Array(60).fill(0).map((_, i) => i.toString()), - [] - ); - - const [isAM, setIsAM] = useState(true); - - return ( - - setIsAM((prev) => !prev)} - > - {isAM ? "AM" : "PM"} - - - 00 - - } - > - {hours.map((hour) => ( - - ))} - - - 00 - - } - > - {minutes.map((minute) => ( - - ))} - - - ); -}; +interface Time { + hour: T; + minute: T; +} +interface TimePickerProps { + label: string; + selectedTime: Time; + setTime: (time: Time) => void; + time: Time; +} + +const TimePicker = forwardRef( + ({ setTime, selectedTime, time, label, ...rest }, ref) => { + const hours = useMemo( + () => new Array(12).fill(0).map((_, i) => (i + 1).toString()), + [] + ); + const minutes = useMemo( + () => new Array(60).fill(0).map((_, i) => i.toString()), + [] + ); + + const [isAM, setIsAM] = useState(true); + + const handleChangeHour = (value: { + selectedValue: string; + selectedText: React.ReactNode; + }) => { + console.log(value.selectedValue); + setTime({ + hour: isAM ? +value.selectedValue : +value.selectedValue + 12, + minute: selectedTime.minute, + }); + }; + + const handleChangeMinute = (value: { + selectedValue: string; + selectedText: React.ReactNode; + }) => { + setTime({ hour: selectedTime.hour, minute: +value.selectedValue }); + }; + + return ( + + setIsAM((prev) => !prev)} + > + {isAM ? "AM" : "PM"} + + + {time.hour} + + } + onChange={handleChangeHour} + > + {hours.map((hour) => ( + + ))} + + + {time.minute} + + } + onChange={handleChangeMinute} + > + {minutes.map((minute) => ( + + ))} + + + ); + } +); + +TimePicker.displayName = "TimePicker"; export default TimePicker; diff --git a/packages/wow-ui/src/hooks/usePickerState.ts b/packages/wow-ui/src/hooks/usePickerState.ts index ebaa9645..06f3c66c 100644 --- a/packages/wow-ui/src/hooks/usePickerState.ts +++ b/packages/wow-ui/src/hooks/usePickerState.ts @@ -4,8 +4,7 @@ interface PickerStateProps { initialDate?: Date; } -interface TimePicker { - time: "AM" | "PM"; +interface Time { hour: number; minute: number; } @@ -14,24 +13,41 @@ const usePickerState = ({ initialDate = new Date(), }: PickerStateProps = {}) => { const [selected, setSelected] = useState(initialDate); - const [timeValue, setTimeValue] = useState({ - time: "AM", - hour: 0, - minute: 0, - }); + const [time, setTime] = useState