From e0f58c4cd432ad3fb44ed45e907c298e3535a051 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 3 Sep 2024 18:00:39 +0900 Subject: [PATCH 01/31] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Toast/index.tsx | 75 +++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 packages/wow-ui/src/components/Toast/index.tsx diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx new file mode 100644 index 00000000..c7f1a724 --- /dev/null +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -0,0 +1,75 @@ +"use client"; + +import { css } from "@styled-system/css"; +import type { FlexProps } from "@styled-system/jsx"; +import { Flex, styled } from "@styled-system/jsx"; +import type { CSSProperties, ReactNode } from "react"; +import { forwardRef } from "react"; +import { Close, RightArrow } from "wowds-icons"; + +/** + * @description 토스트 컴포넌트입니다. + * + * @param {string} id - 토스트 컴포넌트의 id. + * @param {"default"|"close"|"arrow"} type - 토스트 컴포넌트의 타입. + * @param {string} text - 토스트 컴포넌트의 메인 텍스트. + * @param {ReactNode} icon - 토스트 컴포넌트의 좌측에 들어갈 아이콘. + * @param {string} [subText] - 토스트 컴포넌트의 보조 텍스트. + * @param {CSSProperties} [style] - 커스텀 스타일을 적용하기 위한 객체. + * @param {string} [className] - 커스텀 클래스를 적용하기 위한 문자열. + */ + +export interface ToastProps extends FlexProps { + id: string; + type: "default" | "close" | "arrow"; + text: string; + icon?: ReactNode; + subText?: string; + style?: CSSProperties; + className?: string; +} + +export const Toast = forwardRef( + ({ text, subText, type, icon, ...rest }: ToastProps) => { + const TypeIconComponent = () => { + if (type === "close") return ; + else if (type === "arrow") return ; + return null; + }; + + return ( + + + {icon} + + + {text} + + + {subText} + + + + + + ); + } +); + +const toastContainerStyle = css({ + width: "22.375rem", + padding: "0.75rem 1rem", + + borderRadius: "md", + + zIndex: 9999, + + background: "backgroundDimmer", + backdropFilter: "blur(30px)", + boxShadow: "mono", +}); From 50df9c57882260f83ad0bb4baaa7c50daacd61ec Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 3 Sep 2024 18:01:09 +0900 Subject: [PATCH 02/31] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Toast/Toast.stories.tsx | 89 +++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 packages/wow-ui/src/components/Toast/Toast.stories.tsx diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx new file mode 100644 index 00000000..6574bd19 --- /dev/null +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -0,0 +1,89 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import { Warn } from "wowds-icons"; + +import { Toast } from "."; + +const meta: Meta = { + title: "UI/Toast", + component: Toast, + tags: ["autodocs"], + parameters: { + componentSubtitle: "Toast 컴포넌트", + }, + argTypes: { + text: { + description: "Toast에 들어갈 메인 텍스트를 나타냅니다.", + control: { type: "text" }, + }, + subText: { + description: "Toast에 들어갈 보조 텍스트를 나타냅니다.", + control: { type: "text" }, + }, + type: { + description: "Toast의 타입을 나타냅니다.", + control: { type: "radio" }, + }, + id: { + description: "Toast 컴포넌트의 id를 나타냅니다.", + control: false, + }, + icon: { + description: "Toast 좌측에 들어갈 아이콘을 나타냅니다.", + control: false, + }, + style: { + description: "Toast에 커스텀 스타일을 적용하기 위한 객체를 나타냅니다.", + control: false, + }, + className: { + description: "Toast에 커스텀 클래스를 적용하기 위한 문자열을 나타냅니다.", + control: false, + }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + text: "Text", + subText: "subtext", + type: "default", + }, +}; + +export const Close: Story = { + args: { + text: "Text", + subText: "subtext", + type: "close", + }, +}; + +export const Arrow: Story = { + args: { + text: "Text", + subText: "subtext", + type: "arrow", + }, +}; + +export const Icon: Story = { + args: { + text: "Text", + subText: "subtext", + type: "default", + icon: , + }, +}; + +export const IconArrow: Story = { + args: { + text: "Text", + subText: "subtext", + type: "arrow", + icon: , + }, +}; From 418256a3538d92366e8116d189271fb1b994ccdb Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 3 Sep 2024 18:01:45 +0900 Subject: [PATCH 03/31] =?UTF-8?q?chore:=20package.json=20=EB=B0=8F=20rollu?= =?UTF-8?q?p=20=EC=B6=94=EA=B0=80?= 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 a1278468..0a7ae388 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -20,6 +20,11 @@ "type": "module", "exports": { "./styles.css": "./dist/styles.css", + "./Toast": { + "types": "./dist/components/Toast/index.d.ts", + "require": "./dist/Toast.cjs", + "import": "./dist/Toast.js" + }, "./TextField": { "types": "./dist/components/TextField/index.d.ts", "require": "./dist/TextField.cjs", diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index 28c0c666..aee30342 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -20,6 +20,7 @@ process.env.BABEL_ENV = "production"; export default { input: { + Toast: "./src/components/Toast", TextField: "./src/components/TextField", TextButton: "./src/components/TextButton", Tag: "./src/components/Tag", From 0d07e3beb0eb7fae1e6d0ce43025ded131d10f2f Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 3 Sep 2024 18:04:30 +0900 Subject: [PATCH 04/31] =?UTF-8?q?chore:=20displayName=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20=EB=B0=8F=20export=20=ED=98=95=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Toast/Toast.stories.tsx | 2 +- packages/wow-ui/src/components/Toast/index.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index 6574bd19..50639722 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import { Warn } from "wowds-icons"; -import { Toast } from "."; +import Toast from "."; const meta: Meta = { title: "UI/Toast", diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index c7f1a724..3c658ed0 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -29,7 +29,7 @@ export interface ToastProps extends FlexProps { className?: string; } -export const Toast = forwardRef( +const Toast = forwardRef( ({ text, subText, type, icon, ...rest }: ToastProps) => { const TypeIconComponent = () => { if (type === "close") return ; @@ -73,3 +73,6 @@ const toastContainerStyle = css({ backdropFilter: "blur(30px)", boxShadow: "mono", }); + +Toast.displayName = "Toast"; +export default Toast; From 81aead7426aadf2a0628e11b0d39694356841ed1 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 3 Sep 2024 18:23:16 +0900 Subject: [PATCH 05/31] =?UTF-8?q?design:=20=EB=91=90=20=EC=A4=84=EC=9D=B8?= =?UTF-8?q?=20=EA=B2=BD=EC=9A=B0=20=EC=A4=84=EB=B0=94=EA=BF=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Toast/Toast.stories.tsx | 7 +++++++ packages/wow-ui/src/components/Toast/index.tsx | 6 +++++- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index 50639722..6d588ab7 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -87,3 +87,10 @@ export const IconArrow: Story = { icon: , }, }; + +export const TwoLines: Story = { + args: { + text: "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText", + type: "default", + }, +}; diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index 3c658ed0..90f4652e 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -47,7 +47,11 @@ const Toast = forwardRef( {icon} - + {text} From 5a8cc12a1d936a50655f070ee5bb927820cfd2c1 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 3 Sep 2024 18:25:59 +0900 Subject: [PATCH 06/31] =?UTF-8?q?fix:=20type=20=EC=98=B5=EC=85=94=EB=84=90?= =?UTF-8?q?=EB=A1=9C=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Toast/Toast.stories.tsx | 3 --- packages/wow-ui/src/components/Toast/index.tsx | 6 +++--- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index 6d588ab7..fc726c55 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -50,7 +50,6 @@ export const Default: Story = { args: { text: "Text", subText: "subtext", - type: "default", }, }; @@ -74,7 +73,6 @@ export const Icon: Story = { args: { text: "Text", subText: "subtext", - type: "default", icon: , }, }; @@ -91,6 +89,5 @@ export const IconArrow: Story = { export const TwoLines: Story = { args: { text: "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText", - type: "default", }, }; diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index 90f4652e..fd54e56e 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -11,7 +11,7 @@ import { Close, RightArrow } from "wowds-icons"; * @description 토스트 컴포넌트입니다. * * @param {string} id - 토스트 컴포넌트의 id. - * @param {"default"|"close"|"arrow"} type - 토스트 컴포넌트의 타입. + * @param {"default"|"close"|"arrow"} [type] - 토스트 컴포넌트의 타입. * @param {string} text - 토스트 컴포넌트의 메인 텍스트. * @param {ReactNode} icon - 토스트 컴포넌트의 좌측에 들어갈 아이콘. * @param {string} [subText] - 토스트 컴포넌트의 보조 텍스트. @@ -21,7 +21,7 @@ import { Close, RightArrow } from "wowds-icons"; export interface ToastProps extends FlexProps { id: string; - type: "default" | "close" | "arrow"; + type?: "default" | "close" | "arrow"; text: string; icon?: ReactNode; subText?: string; @@ -30,7 +30,7 @@ export interface ToastProps extends FlexProps { } const Toast = forwardRef( - ({ text, subText, type, icon, ...rest }: ToastProps) => { + ({ text, subText, type = "default", icon, ...rest }: ToastProps) => { const TypeIconComponent = () => { if (type === "close") return ; else if (type === "arrow") return ; From a0de86b366bf2b73d1398179d7162ff34db76d74 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Tue, 3 Sep 2024 18:40:39 +0900 Subject: [PATCH 07/31] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EC=82=AC?= =?UTF-8?q?=EB=9D=BC=EC=A7=80=EA=B2=8C=20=ED=95=98=EB=8A=94=20=ED=9A=A8?= =?UTF-8?q?=EA=B3=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Toast/Toast.stories.tsx | 4 ++ .../wow-ui/src/components/Toast/index.tsx | 39 ++++++++++++++++++- 2 files changed, 41 insertions(+), 2 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index fc726c55..99c9bdd5 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -27,6 +27,10 @@ const meta: Meta = { description: "Toast 컴포넌트의 id를 나타냅니다.", control: false, }, + onRemove: { + description: "Toast 컴포넌트가 사라지도록 하는 트리거 함수를 나타냅니다.", + control: false, + }, icon: { description: "Toast 좌측에 들어갈 아이콘을 나타냅니다.", control: false, diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index fd54e56e..1c855ac8 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -4,7 +4,7 @@ import { css } from "@styled-system/css"; import type { FlexProps } from "@styled-system/jsx"; import { Flex, styled } from "@styled-system/jsx"; import type { CSSProperties, ReactNode } from "react"; -import { forwardRef } from "react"; +import { forwardRef, useEffect, useState } from "react"; import { Close, RightArrow } from "wowds-icons"; /** @@ -14,6 +14,7 @@ import { Close, RightArrow } from "wowds-icons"; * @param {"default"|"close"|"arrow"} [type] - 토스트 컴포넌트의 타입. * @param {string} text - 토스트 컴포넌트의 메인 텍스트. * @param {ReactNode} icon - 토스트 컴포넌트의 좌측에 들어갈 아이콘. + * @param {()=>void} onRemove - 토스트 컴포넌트가 사라지도록 하는 트리거 함수. * @param {string} [subText] - 토스트 컴포넌트의 보조 텍스트. * @param {CSSProperties} [style] - 커스텀 스타일을 적용하기 위한 객체. * @param {string} [className] - 커스텀 클래스를 적용하기 위한 문자열. @@ -23,25 +24,59 @@ export interface ToastProps extends FlexProps { id: string; type?: "default" | "close" | "arrow"; text: string; + onRemove: () => void; icon?: ReactNode; subText?: string; style?: CSSProperties; className?: string; } +const TOAST_DURATION = 2000; +const ANIMATION_DURATION = 200; + const Toast = forwardRef( - ({ text, subText, type = "default", icon, ...rest }: ToastProps) => { + ({ + id, + text, + subText, + onRemove, + type = "default", + icon, + ...rest + }: ToastProps) => { const TypeIconComponent = () => { if (type === "close") return ; else if (type === "arrow") return ; return null; }; + const [opacity, setOpacity] = useState(0.2); + + useEffect(() => { + setOpacity(1); + const timeoutForRemove = setTimeout(() => { + onRemove(); + }, TOAST_DURATION); + + const timeoutForVisible = setTimeout(() => { + setOpacity(0); + }, TOAST_DURATION - ANIMATION_DURATION); + + return () => { + clearTimeout(timeoutForRemove); + clearTimeout(timeoutForVisible); + }; + }, [id, onRemove]); + return ( From 1ad9dc4d52cc765ac5865b3ca47795b2eac17ece Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 15 Sep 2024 17:44:49 +0900 Subject: [PATCH 08/31] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=ED=98=B8=EC=B6=9C=ED=95=A0=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=B6=94=EA=B0=80,=20=EB=B0=B0=EA=B2=BD?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Toast/index.tsx | 79 +++++++++++++------ 1 file changed, 53 insertions(+), 26 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index 1c855ac8..e37e3d80 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -15,6 +15,7 @@ import { Close, RightArrow } from "wowds-icons"; * @param {string} text - 토스트 컴포넌트의 메인 텍스트. * @param {ReactNode} icon - 토스트 컴포넌트의 좌측에 들어갈 아이콘. * @param {()=>void} onRemove - 토스트 컴포넌트가 사라지도록 하는 트리거 함수. + * @param {()=>void} [onClickArrowIcon] - 화살표 아이콘을 클릭했을 때 호출되는 함수. * @param {string} [subText] - 토스트 컴포넌트의 보조 텍스트. * @param {CSSProperties} [style] - 커스텀 스타일을 적용하기 위한 객체. * @param {string} [className] - 커스텀 클래스를 적용하기 위한 문자열. @@ -25,6 +26,7 @@ export interface ToastProps extends FlexProps { type?: "default" | "close" | "arrow"; text: string; onRemove: () => void; + onClickArrowIcon?: () => void; icon?: ReactNode; subText?: string; style?: CSSProperties; @@ -40,13 +42,29 @@ const Toast = forwardRef( text, subText, onRemove, + onClickArrowIcon, type = "default", icon, ...rest }: ToastProps) => { const TypeIconComponent = () => { - if (type === "close") return ; - else if (type === "arrow") return ; + if (type === "close") + return ( + + ); + else if (type === "arrow") + return ( + + ); return null; }; @@ -70,31 +88,42 @@ const Toast = forwardRef( return ( - - {icon} - - - {text} - - - {subText} - + + + {icon} + + + {text} + + + {subText} + + + - ); } @@ -106,8 +135,6 @@ const toastContainerStyle = css({ borderRadius: "md", - zIndex: 9999, - background: "backgroundDimmer", backdropFilter: "blur(30px)", boxShadow: "mono", From 73152810d88ce88503dd8e995d940fba3005cf7a Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 15 Sep 2024 17:45:36 +0900 Subject: [PATCH 09/31] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=ED=95=A8=EC=88=98=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=20=EC=B6=94=EA=B0=80,=20state=20=ED=99=9C=EC=9A=A9=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Toast/Toast.stories.tsx | 57 +++++++++++++++---- 1 file changed, 46 insertions(+), 11 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index 99c9bdd5..4832971e 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -1,4 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react"; +import { useState } from "react"; import { Warn } from "wowds-icons"; import Toast from "."; @@ -31,6 +32,11 @@ const meta: Meta = { description: "Toast 컴포넌트가 사라지도록 하는 트리거 함수를 나타냅니다.", control: false, }, + onClickArrowIcon: { + description: + "Toast 컴포넌트의 화살표 아이콘을 클릭했을 때 호출되는 함수를 나타냅니다.", + control: false, + }, icon: { description: "Toast 좌측에 들어갈 아이콘을 나타냅니다.", control: false, @@ -50,48 +56,77 @@ export default meta; type Story = StoryObj; -export const Default: Story = { - args: { - text: "Text", - subText: "subtext", - }, +export const Default = () => { + const [open, setOpen] = useState(false); + + return ( + <> + + {open && ( + setOpen(false)} + /> + )} + + ); }; -export const Close: Story = { - args: { - text: "Text", - subText: "subtext", - type: "close", - }, +export const Close = () => { + const [open, setOpen] = useState(true); + + return ( + open && ( + setOpen(false)} + /> + ) + ); }; export const Arrow: Story = { args: { + id: "toast3", text: "Text", subText: "subtext", type: "arrow", + onRemove: () => {}, }, }; export const Icon: Story = { args: { + id: "toast4", text: "Text", subText: "subtext", icon: , + onRemove: () => {}, }, }; export const IconArrow: Story = { args: { + id: "toast5", text: "Text", subText: "subtext", type: "arrow", icon: , + onRemove: () => {}, }, }; export const TwoLines: Story = { args: { + id: "toast6", text: "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText", + onRemove: () => {}, }, }; From 645f0056d5bd0ae5941320901650681b698aaefb Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 15 Sep 2024 18:04:36 +0900 Subject: [PATCH 10/31] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=EC=A1=B0=EC=A0=95=20=EB=B0=8F=20=EB=B0=B0?= =?UTF-8?q?=EA=B2=BD=20=EC=8A=A4=ED=83=80=EC=9D=BC=20prop=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Toast/Toast.stories.tsx | 5 +++++ packages/wow-ui/src/components/Toast/index.tsx | 11 ++++++++--- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index 4832971e..bbdb521b 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -41,6 +41,11 @@ const meta: Meta = { description: "Toast 좌측에 들어갈 아이콘을 나타냅니다.", control: false, }, + backgroundStyle: { + description: + "Toast의 배경에 커스텀 스타일을 적용하기 위한 객체를 나타냅니다.", + control: false, + }, style: { description: "Toast에 커스텀 스타일을 적용하기 위한 객체를 나타냅니다.", control: false, diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index e37e3d80..36849f0c 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -17,6 +17,7 @@ import { Close, RightArrow } from "wowds-icons"; * @param {()=>void} onRemove - 토스트 컴포넌트가 사라지도록 하는 트리거 함수. * @param {()=>void} [onClickArrowIcon] - 화살표 아이콘을 클릭했을 때 호출되는 함수. * @param {string} [subText] - 토스트 컴포넌트의 보조 텍스트. + * @param {CSSProperties} [backgroundStyle] - 토스트 컴포넌트의 배경 커스텀 스타일을 적용하기 위한 객체. * @param {CSSProperties} [style] - 커스텀 스타일을 적용하기 위한 객체. * @param {string} [className] - 커스텀 클래스를 적용하기 위한 문자열. */ @@ -29,6 +30,7 @@ export interface ToastProps extends FlexProps { onClickArrowIcon?: () => void; icon?: ReactNode; subText?: string; + backgroundStyle?: CSSProperties; style?: CSSProperties; className?: string; } @@ -45,6 +47,7 @@ const Toast = forwardRef( onClickArrowIcon, type = "default", icon, + backgroundStyle, ...rest }: ToastProps) => { const TypeIconComponent = () => { @@ -88,12 +91,12 @@ const Toast = forwardRef( return ( @@ -131,7 +134,9 @@ const Toast = forwardRef( const toastContainerStyle = css({ width: "22.375rem", + height: "fit-content", padding: "0.75rem 1rem", + marginTop: "1.5rem", borderRadius: "md", From 0508da67d63aa072e00dbecaf8159c8ac0ff5140 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 15 Sep 2024 19:45:41 +0900 Subject: [PATCH 11/31] =?UTF-8?q?feat:=20toast=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EB=A1=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EA=B0=80=EB=8A=A5?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=A1=9C=EC=A7=81=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Toast/Toast.stories.tsx | 132 ++++++++---------- .../src/components/Toast/ToastContext.ts | 22 +++ .../src/components/Toast/ToastProvider.tsx | 49 +++++++ .../wow-ui/src/components/Toast/index.tsx | 67 ++++----- .../wow-ui/src/components/Toast/useToast.ts | 12 ++ 5 files changed, 172 insertions(+), 110 deletions(-) create mode 100644 packages/wow-ui/src/components/Toast/ToastContext.ts create mode 100644 packages/wow-ui/src/components/Toast/ToastProvider.tsx create mode 100644 packages/wow-ui/src/components/Toast/useToast.ts diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index bbdb521b..a1a5ec3c 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -1,8 +1,10 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { useState } from "react"; +import { useEffect } from "react"; import { Warn } from "wowds-icons"; import Toast from "."; +import ToastProvider from "./ToastProvider"; +import useToast from "./useToast"; const meta: Meta = { title: "UI/Toast", @@ -11,6 +13,13 @@ const meta: Meta = { parameters: { componentSubtitle: "Toast 컴포넌트", }, + decorators: [ + (Story) => ( + + + + ), + ], argTypes: { text: { description: "Toast에 들어갈 메인 텍스트를 나타냅니다.", @@ -28,10 +37,6 @@ const meta: Meta = { description: "Toast 컴포넌트의 id를 나타냅니다.", control: false, }, - onRemove: { - description: "Toast 컴포넌트가 사라지도록 하는 트리거 함수를 나타냅니다.", - control: false, - }, onClickArrowIcon: { description: "Toast 컴포넌트의 화살표 아이콘을 클릭했을 때 호출되는 함수를 나타냅니다.", @@ -41,11 +46,6 @@ const meta: Meta = { description: "Toast 좌측에 들어갈 아이콘을 나타냅니다.", control: false, }, - backgroundStyle: { - description: - "Toast의 배경에 커스텀 스타일을 적용하기 위한 객체를 나타냅니다.", - control: false, - }, style: { description: "Toast에 커스텀 스타일을 적용하기 위한 객체를 나타냅니다.", control: false, @@ -62,76 +62,66 @@ export default meta; type Story = StoryObj; export const Default = () => { - const [open, setOpen] = useState(false); - - return ( - <> - - {open && ( - setOpen(false)} - /> - )} - - ); + const { toast } = useToast(); + useEffect(() => { + toast({ + text: "Text", + subText: "subtext", + }); + }, []); }; export const Close = () => { - const [open, setOpen] = useState(true); - - return ( - open && ( - setOpen(false)} - /> - ) - ); + const { toast } = useToast(); + useEffect(() => { + toast({ + text: "Text", + subText: "subtext", + type: "close", + }); + }, []); }; -export const Arrow: Story = { - args: { - id: "toast3", - text: "Text", - subText: "subtext", - type: "arrow", - onRemove: () => {}, - }, +export const Arrow = () => { + const { toast } = useToast(); + useEffect(() => { + toast({ + text: "Text", + subText: "subtext", + type: "arrow", + }); + }, []); }; -export const Icon: Story = { - args: { - id: "toast4", - text: "Text", - subText: "subtext", - icon: , - onRemove: () => {}, - }, +export const Icon = () => { + const { toast } = useToast(); + useEffect(() => { + toast({ + text: "Text", + subText: "subtext", + icon: , + }); + }, []); }; -export const IconArrow: Story = { - args: { - id: "toast5", - text: "Text", - subText: "subtext", - type: "arrow", - icon: , - onRemove: () => {}, - }, +export const IconArrow = () => { + const { toast } = useToast(); + useEffect(() => { + toast({ + text: "Text", + subText: "subtext", + type: "arrow", + icon: , + }); + }, []); }; -export const TwoLines: Story = { - args: { - id: "toast6", - text: "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText", - onRemove: () => {}, - }, +export const TwoLines = () => { + const { toast } = useToast(); + useEffect(() => { + toast({ + text: "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText", + icon: , + }); + }, []); }; diff --git a/packages/wow-ui/src/components/Toast/ToastContext.ts b/packages/wow-ui/src/components/Toast/ToastContext.ts new file mode 100644 index 00000000..aff6f0f2 --- /dev/null +++ b/packages/wow-ui/src/components/Toast/ToastContext.ts @@ -0,0 +1,22 @@ +import { createContext } from "react"; + +import useSafeContext from "@/hooks/useSafeContext"; + +import type { ToastProps } from "."; + +interface ToastContextProps { + toasts: ToastProps[]; + addToast: ( + toast: Omit & Partial> + ) => void; + removeToast: (id: string) => void; +} + +export const ToastContext = createContext( + undefined +); + +export const useToastContext = () => { + const context = useSafeContext(ToastContext); + return context; +}; diff --git a/packages/wow-ui/src/components/Toast/ToastProvider.tsx b/packages/wow-ui/src/components/Toast/ToastProvider.tsx new file mode 100644 index 00000000..9b110204 --- /dev/null +++ b/packages/wow-ui/src/components/Toast/ToastProvider.tsx @@ -0,0 +1,49 @@ +"use client"; + +import { Flex } from "@styled-system/jsx"; +import type { ReactNode } from "react"; +import { useState } from "react"; + +import type { ToastProps } from "."; +import Toast from "."; +import { ToastContext } from "./ToastContext"; + +const ToastProvider = ({ children }: { children: ReactNode }) => { + const [toasts, setToasts] = useState([]); + + const addToast = ( + props: Omit & Partial> + ) => { + const newToast = { + ...props, + id: props.id || Date.now().toString(), + }; + setToasts((prev) => [...prev, newToast]); + }; + + const removeToast = (id: string) => { + setToasts((prev) => prev.filter((toast) => toast.id !== id)); + }; + + return ( + + + {toasts?.map((toast: ToastProps) => ( + + ))} + + {children} + + ); +}; + +export default ToastProvider; diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index 36849f0c..7b659f35 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -7,6 +7,8 @@ import type { CSSProperties, ReactNode } from "react"; import { forwardRef, useEffect, useState } from "react"; import { Close, RightArrow } from "wowds-icons"; +import useToast from "./useToast"; + /** * @description 토스트 컴포넌트입니다. * @@ -14,10 +16,8 @@ import { Close, RightArrow } from "wowds-icons"; * @param {"default"|"close"|"arrow"} [type] - 토스트 컴포넌트의 타입. * @param {string} text - 토스트 컴포넌트의 메인 텍스트. * @param {ReactNode} icon - 토스트 컴포넌트의 좌측에 들어갈 아이콘. - * @param {()=>void} onRemove - 토스트 컴포넌트가 사라지도록 하는 트리거 함수. * @param {()=>void} [onClickArrowIcon] - 화살표 아이콘을 클릭했을 때 호출되는 함수. * @param {string} [subText] - 토스트 컴포넌트의 보조 텍스트. - * @param {CSSProperties} [backgroundStyle] - 토스트 컴포넌트의 배경 커스텀 스타일을 적용하기 위한 객체. * @param {CSSProperties} [style] - 커스텀 스타일을 적용하기 위한 객체. * @param {string} [className] - 커스텀 클래스를 적용하기 위한 문자열. */ @@ -26,11 +26,9 @@ export interface ToastProps extends FlexProps { id: string; type?: "default" | "close" | "arrow"; text: string; - onRemove: () => void; onClickArrowIcon?: () => void; icon?: ReactNode; subText?: string; - backgroundStyle?: CSSProperties; style?: CSSProperties; className?: string; } @@ -43,13 +41,13 @@ const Toast = forwardRef( id, text, subText, - onRemove, onClickArrowIcon, type = "default", icon, - backgroundStyle, ...rest }: ToastProps) => { + const { removeToast } = useToast(); + const TypeIconComponent = () => { if (type === "close") return ( @@ -57,7 +55,7 @@ const Toast = forwardRef( stroke="outline" style={{ cursor: "pointer" }} width={14} - onClick={onRemove} + onClick={() => removeToast(id)} /> ); else if (type === "arrow") @@ -76,7 +74,7 @@ const Toast = forwardRef( useEffect(() => { setOpacity(1); const timeoutForRemove = setTimeout(() => { - onRemove(); + removeToast(id); }, TOAST_DURATION); const timeoutForVisible = setTimeout(() => { @@ -87,46 +85,37 @@ const Toast = forwardRef( clearTimeout(timeoutForRemove); clearTimeout(timeoutForVisible); }; - }, [id, onRemove]); + }, [id, removeToast]); return ( - - - {icon} - - - {text} - + + {icon} + + + {text} + + {subText && ( {subText} - + )} - + ); } diff --git a/packages/wow-ui/src/components/Toast/useToast.ts b/packages/wow-ui/src/components/Toast/useToast.ts new file mode 100644 index 00000000..31c618d7 --- /dev/null +++ b/packages/wow-ui/src/components/Toast/useToast.ts @@ -0,0 +1,12 @@ +import { useToastContext } from "./ToastContext"; + +const useToast = () => { + const { addToast, removeToast } = useToastContext(); + + return { + toast: addToast, + removeToast, + }; +}; + +export default useToast; From b27b03c65e878018eb25af60029820de54111fcb Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 15 Sep 2024 19:53:47 +0900 Subject: [PATCH 12/31] =?UTF-8?q?fix:=20=ED=86=A0=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=EA=B0=80=20=EC=97=AC=EB=9F=AC=EA=B0=9C=EC=9D=BC=20=EB=95=8C=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Toast/Toast.stories.tsx | 2 -- packages/wow-ui/src/components/Toast/ToastProvider.tsx | 7 ++++--- packages/wow-ui/src/components/Toast/index.tsx | 1 - 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index a1a5ec3c..2398bb9d 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -59,8 +59,6 @@ const meta: Meta = { export default meta; -type Story = StoryObj; - export const Default = () => { const { toast } = useToast(); useEffect(() => { diff --git a/packages/wow-ui/src/components/Toast/ToastProvider.tsx b/packages/wow-ui/src/components/Toast/ToastProvider.tsx index 9b110204..663fe925 100644 --- a/packages/wow-ui/src/components/Toast/ToastProvider.tsx +++ b/packages/wow-ui/src/components/Toast/ToastProvider.tsx @@ -28,12 +28,13 @@ const ToastProvider = ({ children }: { children: ReactNode }) => { return ( diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index 7b659f35..c3140257 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -125,7 +125,6 @@ const toastContainerStyle = css({ width: "22.375rem", height: "fit-content", padding: "0.75rem 1rem", - marginTop: "1.5rem", borderRadius: "md", From b8f1eeb95b8a6455a16a78d146bf90efeea71cda Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 15 Sep 2024 20:01:12 +0900 Subject: [PATCH 13/31] =?UTF-8?q?chore:=20useToast=20=EB=B9=8C=EB=93=9C=20?= =?UTF-8?q?=ED=8F=AC=ED=95=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/scripts/generateBuildConfig.ts | 13 +++++++++---- packages/wow-ui/package.json | 10 ++++++++++ packages/wow-ui/rollup.config.js | 2 ++ 3 files changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/scripts/generateBuildConfig.ts b/packages/scripts/generateBuildConfig.ts index c9bed9e1..613353d5 100644 --- a/packages/scripts/generateBuildConfig.ts +++ b/packages/scripts/generateBuildConfig.ts @@ -26,17 +26,22 @@ const excludedComponents = [ "CollectionContext", "DropDownOptionList", "pickerComponents", + "ToastContext", ]; +// 추가할 컴포넌트 목록 +const includedComponents = ["useToast"]; + const getFilteredComponentFiles = async (directoryPath: string) => { const files = await fs.readdir(directoryPath, { recursive: true }); return files.filter( (file) => - file.endsWith(".tsx") && - !file.includes("test") && - !file.includes("stories") && - !excludedComponents.some((excluded) => file.includes(excluded)) + (file.endsWith(".tsx") && + !file.includes("test") && + !file.includes("stories") && + !excludedComponents.some((excluded) => file.includes(excluded))) || + includedComponents.some((included) => file.includes(included)) ); }; diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index 0a7ae388..4be8f5cd 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -20,11 +20,21 @@ "type": "module", "exports": { "./styles.css": "./dist/styles.css", + "./ToastProvider": { + "types": "./dist/components/Toast/ToastProvider.d.ts", + "require": "./dist/ToastProvider.cjs", + "import": "./dist/ToastProvider.js" + }, "./Toast": { "types": "./dist/components/Toast/index.d.ts", "require": "./dist/Toast.cjs", "import": "./dist/Toast.js" }, + "./useToast": { + "types": "./dist/components/Toast/useToast.d.ts", + "require": "./dist/useToast.cjs", + "import": "./dist/useToast.js" + }, "./TextField": { "types": "./dist/components/TextField/index.d.ts", "require": "./dist/TextField.cjs", diff --git a/packages/wow-ui/rollup.config.js b/packages/wow-ui/rollup.config.js index aee30342..b0a3ef70 100644 --- a/packages/wow-ui/rollup.config.js +++ b/packages/wow-ui/rollup.config.js @@ -20,7 +20,9 @@ process.env.BABEL_ENV = "production"; export default { input: { + ToastProvider: "./src/components/Toast/ToastProvider", Toast: "./src/components/Toast", + useToast: "./src/components/Toast/useToast", TextField: "./src/components/TextField", TextButton: "./src/components/TextButton", Tag: "./src/components/Tag", From 438a2781b0f76c1c9cc31e625314f2a9fc66613d Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 15 Sep 2024 20:08:44 +0900 Subject: [PATCH 14/31] =?UTF-8?q?fix:=20color=20contrast=20=EA=B2=80?= =?UTF-8?q?=EC=82=AC=20=ED=86=B5=EA=B3=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Toast/Toast.stories.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index 2398bb9d..b2bf09ba 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta, StoryObj } from "@storybook/react"; +import type { Meta } from "@storybook/react"; import { useEffect } from "react"; import { Warn } from "wowds-icons"; @@ -12,6 +12,11 @@ const meta: Meta = { tags: ["autodocs"], parameters: { componentSubtitle: "Toast 컴포넌트", + a11y: { + config: { + rules: [{ id: "color-contrast", enabled: false }], + }, + }, }, decorators: [ (Story) => ( From cfbcf150d95846a1113de23096222dabb1cabd3d Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 22 Sep 2024 11:15:33 +0900 Subject: [PATCH 15/31] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20dur?= =?UTF-8?q?ation=20=EB=B0=9B=EC=9D=84=20=EC=88=98=20=EC=9E=88=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Toast/Toast.stories.tsx | 15 +++++++++++++++ packages/wow-ui/src/components/Toast/index.tsx | 7 ++++--- 2 files changed, 19 insertions(+), 3 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index b2bf09ba..ca21bb0e 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -51,6 +51,10 @@ const meta: Meta = { description: "Toast 좌측에 들어갈 아이콘을 나타냅니다.", control: false, }, + toastDuration: { + description: "Toast가 보여지는 시간을 나타냅니다.", + control: { type: "number" }, + }, style: { description: "Toast에 커스텀 스타일을 적용하기 위한 객체를 나타냅니다.", control: false, @@ -128,3 +132,14 @@ export const TwoLines = () => { }); }, []); }; + +export const Slow = () => { + const { toast } = useToast(); + useEffect(() => { + toast({ + text: "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText", + icon: , + toastDuration: 5000, + }); + }, []); +}; diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index c3140257..a2919727 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -29,13 +29,11 @@ export interface ToastProps extends FlexProps { onClickArrowIcon?: () => void; icon?: ReactNode; subText?: string; + toastDuration?: number; style?: CSSProperties; className?: string; } -const TOAST_DURATION = 2000; -const ANIMATION_DURATION = 200; - const Toast = forwardRef( ({ id, @@ -44,8 +42,11 @@ const Toast = forwardRef( onClickArrowIcon, type = "default", icon, + toastDuration, ...rest }: ToastProps) => { + const TOAST_DURATION = toastDuration || 2000; + const ANIMATION_DURATION = 200; const { removeToast } = useToast(); const TypeIconComponent = () => { From d31914134548388b257888a4de9273a83e44ec9f Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 22 Sep 2024 11:37:26 +0900 Subject: [PATCH 16/31] =?UTF-8?q?feat:=20overlay=20zIndex=20=ED=86=A0?= =?UTF-8?q?=ED=81=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-theme/src/tokens/zIndex.ts | 3 + packages/wow-tokens/src/zIndex.ts | 1 + packages/wow-ui/styled-system/styles.css | 273 +----------------- packages/wow-ui/styled-system/tokens/index.js | 4 + .../wow-ui/styled-system/tokens/tokens.d.ts | 3 +- 5 files changed, 11 insertions(+), 273 deletions(-) diff --git a/packages/wow-theme/src/tokens/zIndex.ts b/packages/wow-theme/src/tokens/zIndex.ts index 879fc4ab..628e6787 100644 --- a/packages/wow-theme/src/tokens/zIndex.ts +++ b/packages/wow-theme/src/tokens/zIndex.ts @@ -5,4 +5,7 @@ export const zIndex = defineTokens.zIndex({ dropdown: { value: wowZIndex.dropdown, }, + overlay: { + value: wowZIndex.overlay, + }, }); diff --git a/packages/wow-tokens/src/zIndex.ts b/packages/wow-tokens/src/zIndex.ts index fb2a7f3f..79e30bc3 100644 --- a/packages/wow-tokens/src/zIndex.ts +++ b/packages/wow-tokens/src/zIndex.ts @@ -1 +1,2 @@ export const dropdown = 10; +export const overlay = 9999; diff --git a/packages/wow-ui/styled-system/styles.css b/packages/wow-ui/styled-system/styles.css index 49dc1210..47d2f26a 100644 --- a/packages/wow-ui/styled-system/styles.css +++ b/packages/wow-ui/styled-system/styles.css @@ -1,272 +1 @@ -:host, -html { - --font-fallback: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, - "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - -webkit-text-size-adjust: 100%; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -moz-tab-size: 4; - tab-size: 4; - -webkit-tap-highlight-color: transparent; - line-height: 1.5; - font-family: var(--global-font-body, var(--font-fallback)); -} -*, -::backdrop, -::file-selector-button, -:after, -:before { - margin: 0px; - padding: 0px; - box-sizing: border-box; - border-width: 0px; - border-style: solid; - border-color: var(--global-color-border, currentColor); -} -hr { - height: 0px; - color: inherit; - border-top-width: 1px; -} -body { - height: 100%; - line-height: inherit; -} -img { - border-style: none; -} -audio, -canvas, -embed, -iframe, -img, -object, -svg, -video { - display: block; - vertical-align: middle; -} -img, -video { - max-width: 100%; - height: auto; -} -h1, -h2, -h3, -h4, -h5, -h6 { - text-wrap: balance; - font-size: inherit; - font-weight: inherit; -} -h1, -h2, -h3, -h4, -h5, -h6, -p { - overflow-wrap: break-word; -} -menu, -ol, -ul { - list-style: none; -} -::file-selector-button, -button, -input:where([type="button"], [type="reset"], [type="submit"]) { - appearance: button; - -webkit-appearance: button; -} -::file-selector-button, -button, -input, -optgroup, -select, -textarea { - font: inherit; - font-feature-settings: inherit; - font-variation-settings: inherit; - letter-spacing: inherit; - color: inherit; - background: transparent; -} -::placeholder { - opacity: 1; - --placeholder-fallback: color-mix(in srgb, currentColor 50%, transparent); - color: var(--global-color-placeholder, var(--placeholder-fallback)); -} -textarea { - resize: vertical; -} -table { - text-indent: 0px; - border-collapse: collapse; - border-color: inherit; -} -summary { - display: list-item; -} -small { - font-size: 80%; -} -sub, -sup { - position: relative; - vertical-align: baseline; - font-size: 75%; - line-height: 0; -} -sub { - bottom: -0.25em; -} -sup { - top: -0.5em; -} -dialog { - padding: 0px; -} -a { - color: inherit; - text-decoration: inherit; -} -abbr:where([title]) { - text-decoration: underline dotted; -} -b, -strong { - font-weight: bolder; -} -code, -kbd, -pre, -samp { - --font-mono-fallback: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, - "Liberation Mono", "Courier New"; - font-feature-settings: normal; - font-variation-settings: normal; - font-family: var(--global-font-mono, var(--font-mono-fallback)); - font-size: 1em; -} -progress { - vertical-align: baseline; -} -::-webkit-search-cancel-button, -::-webkit-search-decoration { - -webkit-appearance: none; -} -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} -:-moz-ui-invalid { - box-shadow: none; -} -:-moz-focusring { - outline: auto; -} -[hidden]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - display: none !important; -} -:where(:root, :host):not(#\#):not(#\#) { - --colors-red-400: #ee695d; - --colors-red-500: #ea4335; - --colors-blue-100: #d7e9fd; - --colors-blue-400: #5ea5f9; - --colors-primary: #368ff7; - --colors-dark-disabled: #c2c2c2; - --colors-blue-pressed: #5ea5f9; - --colors-blue-background-pressed: #ebf4fe; -} -.textStyle_body2:not(#\#):not(#\#):not(#\#):not(#\#) { - letter-spacing: -0.00875rem; - font-size: 0.875rem; - line-height: 160%; - font-weight: 500; -} -.bg_blue\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - background: var(--colors-blue-100); -} -.px_4:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - padding-inline: 4px; -} -.py_3:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - padding-block: 3px; -} -.rounded_md:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-radius: md; -} -.bg_red\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - background: var(--colors-red-400); -} -.w_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - width: 20px; -} -.h_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - height: 20px; -} -.rounded_9999:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-radius: 9999px; -} -.d_flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - display: flex; -} -.bg_blueBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - background: var(--colors-blue-background-pressed); -} -.w_10:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - width: 10px; -} -.h_10:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - height: 10px; -} -.bg_primary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - background: var(--colors-primary); -} -.gap_8:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - gap: 8px; -} -.d_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - display: none; -} -.gap_0\.5rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - gap: 0.5rem; -} -.font_Inter:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - font-family: Inter; -} -.border-w_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-width: 1px; -} -.items_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - align-items: center; -} -.justify_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - justify-content: center; -} -.border_primary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-color: var(--colors-primary); -} -.border_darkDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-color: var(--colors-dark-disabled); -} -.border_bluePressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - border-color: var(--colors-blue-pressed); -} -.flex_column:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) { - flex-direction: column; -} -.hover\:bg_blue\.400:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not( - #\# - ):not(#\#) { - background: var(--colors-blue-400); -} -.hover\:bg_red\.500:is(:hover, [data-hover]):not(#\#):not(#\#):not(#\#):not( - #\# - ):not(#\#) { - background: var(--colors-red-500); -} +:host,html{--font-fallback:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif,'Apple Color Emoji','Segoe UI Emoji','Segoe UI Symbol','Noto Color Emoji';-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent;line-height:1.5;font-family:var(--global-font-body,var(--font-fallback))}*,::backdrop,::file-selector-button,:after,:before{margin:0px;padding:0px;box-sizing:border-box;border-width:0px;border-style:solid;border-color:var(--global-color-border,currentColor)}hr{height:0px;color:inherit;border-top-width:1px}body{height:100%;line-height:inherit}img{border-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{text-wrap:balance;font-size:inherit;font-weight:inherit}h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word}menu,ol,ul{list-style:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){appearance:button;-webkit-appearance:button}::file-selector-button,button,input,optgroup,select,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;background:transparent}::placeholder{opacity:1;--placeholder-fallback:color-mix(in srgb,currentColor 50%,transparent);color:var(--global-color-placeholder,var(--placeholder-fallback))}textarea{resize:vertical}table{text-indent:0px;border-collapse:collapse;border-color:inherit}summary{display:list-item}small{font-size:80%}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-0.25em}sup{top:-0.5em}dialog{padding:0px}a{color:inherit;text-decoration:inherit}abbr:where([title]){text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{--font-mono-fallback:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New';font-feature-settings:normal;font-variation-settings:normal;font-family:var(--global-font-mono,var(--font-mono-fallback));font-size:1em}progress{vertical-align:baseline}::-webkit-search-cancel-button,::-webkit-search-decoration{-webkit-appearance:none}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}:-moz-ui-invalid{box-shadow:none}:-moz-focusring{outline:auto}[hidden]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){display:none!important}body:not(#\#){div:border-box;button:border-box}:where(:root,:host):not(#\#):not(#\#){--colors-red-50:#FDECEB;--colors-red-100:#FBD9D7;--colors-red-150:#F9C7C2;--colors-red-200:#F7B4AE;--colors-red-300:#F28E86;--colors-red-400:#EE695D;--colors-red-500:#EA4335;--colors-red-600:#BB362A;--colors-red-700:#8C2820;--colors-red-800:#5E1B15;--colors-red-850:#461410;--colors-red-900:#2F0D0B;--colors-red-950:#170705;--colors-blue-50:#EBF4FE;--colors-blue-100:#D7E9FD;--colors-blue-150:#C3DDFD;--colors-blue-200:#AFD2FC;--colors-blue-300:#86BCFA;--colors-blue-400:#5EA5F9;--colors-blue-500:#368FF7;--colors-blue-600:#2B72C6;--colors-blue-700:#205694;--colors-blue-800:#163963;--colors-blue-850:#102B4A;--colors-blue-900:#0B1D31;--colors-blue-950:#050E19;--colors-yellow-50:#FEF7E6;--colors-yellow-100:#FEEECC;--colors-yellow-150:#FDE6B3;--colors-yellow-200:#FDDD99;--colors-yellow-300:#FBCD66;--colors-yellow-400:#FABC33;--colors-yellow-500:#F9AB00;--colors-yellow-600:#C78900;--colors-yellow-700:#956700;--colors-yellow-800:#644400;--colors-yellow-850:#4B3300;--colors-yellow-900:#322200;--colors-yellow-950:#191100;--colors-green-50:#EBF6EE;--colors-green-100:#D6EEDD;--colors-green-150:#C2E5CB;--colors-green-200:#AEDCBA;--colors-green-300:#85CB98;--colors-green-400:#5DB975;--colors-green-500:#34A853;--colors-green-600:#2A8642;--colors-green-700:#1F6532;--colors-green-800:#154321;--colors-green-850:#103219;--colors-green-900:#0A2211;--colors-green-950:#051108;--colors-mono-50:#F7F7F7;--colors-mono-100:#F0F0F0;--colors-mono-150:#E8E8E8;--colors-mono-200:#E1E1E1;--colors-mono-300:#D1D1D1;--colors-mono-400:#C2C2C2;--colors-mono-500:#B3B3B3;--colors-mono-600:#8F8F8F;--colors-mono-700:#6B6B6B;--colors-mono-800:#484848;--colors-mono-900:#242424;--colors-mono-950:#121212;--colors-white:#FFFFFF;--colors-black:#000000;--spacing-xxs:0.25rem;--spacing-xs:0.5rem;--spacing-sm:0.75rem;--spacing-lg:1.25rem;--spacing-xl:1.5rem;--radii-sm:0.25rem;--radii-md:0.5rem;--radii-full:2.5rem;--border-widths-button:1px;--z-index-dropdown:10;--shadows-blue:0px 4px 8px 0px rgba(16,43,74,0.2);--shadows-mono:0px 4px 8px 0px rgba(0,0,0,0.2);--colors-primary:#368FF7;--colors-success:#2A8642;--colors-error:#BB362A;--colors-background-normal:#FFFFFF;--colors-background-alternative:#F7F7F7;--colors-background-dimmer:rgba(0,0,0,0.8);--colors-sub:#6B6B6B;--colors-outline:#C2C2C2;--colors-text-black:#121212;--colors-text-white:#FFFFFF;--colors-dark-disabled:#C2C2C2;--colors-light-disabled:#E1E1E1;--colors-blue-hover:#2B72C6;--colors-mono-hover:#121212;--colors-elevated-hover:rgba(16,43,74,0.2);--colors-blue-pressed:#5EA5F9;--colors-blue-background-pressed:#EBF4FE;--colors-mono-background-pressed:#F7F7F7;--colors-shadow-small:rgba(0,0,0,0.1);--colors-shadow-medium:rgba(0,0,0,0.2);--colors-blue-shadow:rgba(16,43,74,0.2);--colors-discord:#5566FB;--colors-github:#000000;--colors-secondary-yellow:#F9AB00;--colors-secondary-green:#34A853;--colors-secondary-red:#EA4335;--colors-error-background:#FBD9D7;--colors-blue-disabled:#D7E9FD;--colors-text-blue-disabled:#AFD2FC}.textStyle_h3:not(#\#):not(#\#):not(#\#):not(#\#){letter-spacing:-0.01rem;font-size:1rem;line-height:130%;font-weight:600}.textStyle_body1:not(#\#):not(#\#):not(#\#):not(#\#){letter-spacing:-0.01rem;font-size:1rem;line-height:160%;font-weight:500}.textStyle_label3:not(#\#):not(#\#):not(#\#):not(#\#){font-size:0.75rem;line-height:100%;font-weight:600}.textStyle_label1:not(#\#):not(#\#):not(#\#):not(#\#){letter-spacing:-0.01rem;font-size:1rem;line-height:100%;font-weight:600}.textStyle_label2:not(#\#):not(#\#):not(#\#):not(#\#){letter-spacing:-0.01rem;font-size:0.875rem;line-height:100%;font-weight:600}.textStyle_h2:not(#\#):not(#\#):not(#\#):not(#\#){letter-spacing:-0.01125rem;font-size:1.125rem;line-height:130%;font-weight:600}.textStyle_body2:not(#\#):not(#\#):not(#\#):not(#\#){letter-spacing:-0.00875rem;font-size:0.875rem;line-height:160%;font-weight:500}.textStyle_body3:not(#\#):not(#\#):not(#\#):not(#\#){font-size:0.75rem;line-height:140%;font-weight:500}.text_blue\.50:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-50)}.text_blue\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-100)}.text_blue\.150:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-150)}.text_blue\.200:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-200)}.text_blue\.300:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-300)}.text_blue\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-400)}.text_blue\.500:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-500)}.text_blue\.600:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-600)}.text_blue\.700:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-700)}.text_blue\.800:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-800)}.text_blue\.850:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-850)}.text_blue\.900:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-900)}.text_blue\.950:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-950)}.text_yellow\.50:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-50)}.text_yellow\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-100)}.text_yellow\.150:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-150)}.text_yellow\.200:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-200)}.text_yellow\.300:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-300)}.text_yellow\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-400)}.text_yellow\.500:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-500)}.text_yellow\.600:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-600)}.text_yellow\.700:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-700)}.text_yellow\.800:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-800)}.text_yellow\.850:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-850)}.text_yellow\.900:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-900)}.text_yellow\.950:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-yellow-950)}.text_green\.50:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-50)}.text_green\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-100)}.text_green\.150:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-150)}.text_green\.200:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-200)}.text_green\.300:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-300)}.text_green\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-400)}.text_green\.500:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-500)}.text_green\.600:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-600)}.text_green\.700:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-700)}.text_green\.800:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-800)}.text_green\.850:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-850)}.text_green\.900:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-900)}.text_green\.950:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-green-950)}.text_red\.50:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-50)}.text_red\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-100)}.text_red\.150:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-150)}.text_red\.200:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-200)}.text_red\.300:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-300)}.text_red\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-400)}.text_red\.500:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-500)}.text_red\.600:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-600)}.text_red\.700:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-700)}.text_red\.800:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-800)}.text_red\.850:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-850)}.text_red\.900:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-900)}.text_red\.950:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-red-950)}.text_mono\.50:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-50)}.text_mono\.100:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-100)}.text_mono\.150:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-150)}.text_mono\.200:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-200)}.text_mono\.300:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-300)}.text_mono\.400:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-400)}.text_mono\.500:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-500)}.text_mono\.600:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-600)}.text_mono\.700:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-700)}.text_mono\.800:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-800)}.text_mono\.850:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:mono.850}.text_mono\.900:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-900)}.text_mono\.950:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-950)}.text_white:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-white)}.text_black:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-black)}.text_whiteOpacity\.20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:whiteOpacity.20}.text_whiteOpacity\.40:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:whiteOpacity.40}.text_whiteOpacity\.60:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:whiteOpacity.60}.text_whiteOpacity\.80:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:whiteOpacity.80}.text_blackOpacity\.20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:blackOpacity.20}.text_blackOpacity\.40:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:blackOpacity.40}.text_blackOpacity\.60:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:blackOpacity.60}.text_blackOpacity\.80:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:blackOpacity.80}.text_primary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-primary)}.text_success:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-success)}.text_error:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-error)}.text_backgroundNormal:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-background-normal)}.text_backgroundAlternative:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-background-alternative)}.text_backgroundDimmer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-background-dimmer)}.text_errorBackground:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-error-background)}.text_sub:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-sub)}.text_outline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-outline)}.text_textBlack:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-text-black)}.text_textWhite:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-text-white)}.text_darkDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-dark-disabled)}.text_lightDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-light-disabled)}.text_blueDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-disabled)}.text_textBlueDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-text-blue-disabled)}.text_blueHover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-hover)}.text_monoHover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-hover)}.text_elevatedHover:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-elevated-hover)}.text_bluePressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-pressed)}.text_blueBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-background-pressed)}.text_monoBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-mono-background-pressed)}.text_shadowSmall:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-shadow-small)}.text_shadowMedium:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-shadow-medium)}.text_blueShadow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-shadow)}.text_discord:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-discord)}.text_github:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-github)}.text_secondaryYellow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-secondary-yellow)}.text_secondaryGreen:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-secondary-green)}.text_secondaryRed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-secondary-red)}.text_blueGradientDark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:blueGradientDark}.text_blueGradientLight:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:blueGradientLight}.text_redGradientDark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:redGradientDark}.text_redGradientLight:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:redGradientLight}.text_greenGradientDark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:greenGradientDark}.text_greenGradientLight:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:greenGradientLight}.text_yellowGradientDark:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:yellowGradientDark}.text_yellowGradientLight:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:yellowGradientLight}.d_flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){display:flex}.gap_sm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){gap:var(--spacing-sm)}.gap_xs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){gap:var(--spacing-xs)}.text_GrayText:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:GrayText}.gap_lg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){gap:var(--spacing-lg)}.w_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:100%}.gap_xxs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){gap:var(--spacing-xxs)}.h_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:20px}.w_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:20px}.h_24:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:24px}.w_24:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:24px}.px_xl:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-inline:var(--spacing-xl)}.rounded_md:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:var(--radii-md)}.border_1px_solid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border:1px solid}.cursor_pointer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){cursor:pointer}.cursor_default:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){cursor:default}.p_1rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding:1rem}.p_0\.75rem_1\.25rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding:0.75rem 1.25rem}.rounded_full:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:var(--radii-full)}.bg_primary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-primary)}.bg_background:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:background}.bg_blueBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-blue-background-pressed)}.cursor_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){cursor:none}.gap_0px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){gap:0px}.pointer-events_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){pointer-events:none}.pointer-events_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){pointer-events:auto}.w_fit-content:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:fit-content}.pos_relative:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){position:relative}.pos_absolute:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){position:absolute}.transform_translate\(-50\%\,_-50\%\):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translate(-50%,-50%)}.stroke_darkDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){stroke:var(--colors-dark-disabled)}.stroke_primary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){stroke:var(--colors-primary)}.appearance_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){appearance:none;-webkit-appearance:none}.w_1\.25rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:1.25rem}.h_1\.25rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:1.25rem}.rounded_sm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:var(--radii-sm)}.ring_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){outline:2px solid transparent;outline-offset:2px}.cursor_inherit:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){cursor:inherit}.bg_white:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-white)}.bg_lightDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-light-disabled)}.d_inline-block:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){display:inline-block}.min-w_3\.5rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){min-width:3.5rem}.h_1\.875rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:1.875rem}.rounded_1\.25rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:1.25rem}.py_xs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-block:var(--spacing-xs)}.px_sm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-inline:var(--spacing-sm)}.h_0\.075rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:0.075rem}.rounded_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:100%}.vis_visible:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){visibility:visible}.vis_hidden:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){visibility:hidden}.z_dropdown:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){z-index:var(--z-index-dropdown)}.max-h_18\.75rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){max-height:18.75rem}.overflow_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){overflow:auto}.stroke_sub:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){stroke:var(--colors-sub)}.stroke_outline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){stroke:var(--colors-outline)}.transition_transform_1s_ease:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transition:transform 1s ease}.transform_rotate\(180deg\):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:rotate(180deg)}.transform_rotate\(0deg\):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:rotate(0deg)}.w_auto:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:auto}.pos_horizontal:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){position:horizontal}.gap_20:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){gap:20px}.gap_0\.75rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){gap:0.75rem}.gap_2\.25rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){gap:2.25rem}.w_19\.75rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:19.75rem}.w_2\.3125rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:2.3125rem}.px_0\.4rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-inline:0.4rem}.text-align_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){text-align:center}.bg_backgroundAlternative:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-background-alternative)}.rounded_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:0}.bg_monoBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-mono-background-pressed)}.px_1rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-inline:1rem}.py_1\.25rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-block:1.25rem}.shadow_mono:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){box-shadow:var(--shadows-mono)}.w_17\.75rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:17.75rem}.bg_Background:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:Background}.cursor_not-allowed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){cursor:not-allowed}.h_2\.625rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:2.625rem}.max-h_7\.5rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){max-height:7.5rem}.h_1\.2px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:1.2px}.min-w_17\.375rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){min-width:17.375rem}.select_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){-webkit-user-select:none;user-select:none}.transform_translateX\(-50\%\):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transform:translateX(-50%)}.h_1\.5rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:1.5rem}.w_1\.5rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:1.5rem}.d_inline-flex:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){display:inline-flex}.w_3\.25rem\!:not(#\#):not(#\#){width:3.25rem!important}.h_1\.75rem\!:not(#\#):not(#\#){height:1.75rem!important}.opacity_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){opacity:0}.w_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:0}.h_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:0}.overflow_hidden:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){overflow:hidden}.rounded_50\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-radius:50%}.bg_backgroundNormal:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-background-normal)}.bg_darkDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-dark-disabled)}.px_xs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-inline:var(--spacing-xs)}.py_xxs:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-block:var(--spacing-xxs)}.border_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border:none}.text-decor_underline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){text-decoration:underline}.resize_none:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){resize:none}.h_100vh:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:100vh}.pos_fixed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){position:fixed}.w_100vw:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:100vw}.z_9999:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){z-index:9999}.w_14:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:14px}.transition_opacity:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transition-property:var(--transition-prop,opacity);transition-timing-function:var(--transition-easing,cubic-bezier(0.4,0,0.2,1));transition-duration:var(--transition-duration,150ms)}.gap_0\.25rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){gap:0.25rem}.break_break-all:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){word-break:break-all}.w_22\.375rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:22.375rem}.h_fit-content:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){height:fit-content}.p_0\.75rem_1rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding:0.75rem 1rem}.bg_backgroundDimmer:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-background-dimmer)}.backdrop_blur\(30px\):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)}.flex_column:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){flex-direction:column}.flex_row:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){flex-direction:row}.items_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){align-items:center}.justify_space-between:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){justify-content:space-between}.pt_xl:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--spacing-xl)}.pb_lg:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:var(--spacing-lg)}.bg_white:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-white)}.border_outline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-outline)}.border_primary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-primary)}.border_error:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-error)}.justify_center:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){justify-content:center}.border-w_1:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-width:1px}.border-style_solid:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-style:solid}.flex_column-reverse:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){flex-direction:column-reverse}.left_50\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){left:50%}.top_50\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){top:50%}.border_darkDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-dark-disabled)}.bg_lightDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-light-disabled)}.border-w_0\.0625rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-width:0.0625rem}.bg_darkDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-dark-disabled)}.bg_blueBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-blue-background-pressed)}.top_calc\(100\%_\+_0\.5rem\):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){top:calc(100% + 0.5rem)}.left_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){left:0}.bg_backgroundNormal:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-background-normal)}.border_sub:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-sub)}.bg_background:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:background}.border_textBlack:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-text-black)}.border-w_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-width:0}.border-w_button:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-width:var(--border-widths-button)}.bg_backgroundAlternative:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-background-alternative)}.overflow-y_hidden:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){overflow-y:hidden}.bg_outline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-outline)}.bg_primary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-primary)}.mt_14px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){margin-top:14px}.border-w_1px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-width:1px}.top_0\.125rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){top:0.125rem}.left_0\.125rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){left:0.125rem}.left_1\.625rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){left:1.625rem}.bg_monoBackgroundPressed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-mono-background-pressed)}.border_secondaryRed:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-secondary-red)}.border_secondaryGreen:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-secondary-green)}.border_secondaryYellow:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-secondary-yellow)}.bg_blueDisabled:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-blue-disabled)}.bg_errorBackground:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-error-background)}.items_flex-end:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){align-items:flex-end}.border_success:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-success)}.top_1\.5rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){top:1.5rem}.delay_0\.5:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){transition-delay:0.5px}.ease_ease-in-out:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){--transition-easing:ease-in-out;transition-timing-function:ease-in-out}.shrink_0:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){flex-shrink:0}.disabled\:bg_monoBackgroundPressed:is(:disabled,[disabled],[data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-mono-background-pressed)}.disabled\:text_outline:is(:disabled,[disabled],[data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-outline)}.disabled\:pointer-events_none:is(:disabled,[disabled],[data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){pointer-events:none}.disabled\:text_darkDisabled:is(:disabled,[disabled],[data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-dark-disabled)}.disabled\:text_blueDisabled:is(:disabled,[disabled],[data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-disabled)}.pressed\:bg_blueBackgroundPressed:is([aria-pressed=true],[data-pressed]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-blue-background-pressed)}.scrollbarThumb\:w_2px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar-thumb,.scrollbar\:w_2px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar{width:2px}.scrollbarThumb\:h_65px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar-thumb{height:65px}.scrollbarThumb\:rounded_sm:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar-thumb{border-radius:var(--radii-sm)}.before\:w_0\.625rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before{width:0.625rem}.before\:h_0\.625rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before{height:0.625rem}.before\:rounded_full:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before{border-radius:var(--radii-full)}.before\:bg_primary:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before{background:var(--colors-primary)}.\[\&\[data-readonly\=true\]\]\:bg_lightDisabled[data-readonly=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-light-disabled)}.\[\&\[data-readonly\=true\]\]\:cursor_not-allowed[data-readonly=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){cursor:not-allowed}.\[\&\[data-pressed\=true\]\]\:bg_blueBackgroundPressed[data-pressed=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-blue-background-pressed)}.disabled\:bg_lightDisabled:is(:disabled,[disabled],[data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-light-disabled)}.disabled\:cursor_not-allowed:is(:disabled,[disabled],[data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){cursor:not-allowed}.placeholder\:text_outline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::placeholder,.placeholder\:text_outline[data-placeholder]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-outline)}.pressed\:bg_monoBackgroundPressed:is([aria-pressed=true],[data-pressed]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-mono-background-pressed)}.disabled\:text_lightDisabled:is(:disabled,[disabled],[data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-light-disabled)}.disabled\:border_darkDisabled:is(:disabled,[disabled],[data-disabled]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-dark-disabled)}.pressed\:border_bluePressed:is([aria-pressed=true],[data-pressed]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-blue-pressed)}.\[\&\[data-selected\=true\]\]\:bg_blue\.500[data-selected=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-blue-500)}.\[\&\[data-selected\=false\]\]\:bg_white[data-selected=false]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-white)}.\[\&\[data-selected\=false\]\]\:border-w_0\.0625rem[data-selected=false]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-width:0.0625rem}.\[\&\[data-selected\=false\]\]\:border_mono\.600[data-selected=false]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-mono-600)}.scrollbarThumb\:bg_outline:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar-thumb{background-color:var(--colors-outline)}.scrollbarTrack\:mt_2px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar-track{margin-top:2px}.scrollbarTrack\:mb_2px:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#)::-webkit-scrollbar-track{margin-bottom:2px}.pressed\:bg_monoBackgroundPressed:is([aria-pressed=true],[data-pressed]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-mono-background-pressed)}.before\:content_\"\":not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before{content:""}.\[\&\[data-readonly\=true\]\]\:border_darkDisabled[data-readonly=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-dark-disabled)}.\[\&\[data-pressed\=true\]\]\:border_bluePressed[data-pressed=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-blue-pressed)}.pressed\:bg_bluePressed:is([aria-pressed=true],[data-pressed]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-blue-pressed)}.focus\:ring_none:is(:focus,[data-focus]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){outline:2px solid transparent;outline-offset:2px}.hover\:shadow_blue:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){box-shadow:var(--shadows-blue)}.hover\:text_blueHover:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-hover)}.hover\:text_textBlack:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-text-black)}.hover\:text_sub:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-sub)}.hover\:border_blueHover:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-blue-hover)}.hover\:border_textBlack:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-text-black)}.hover\:border_sub:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-sub)}.hover\:bg_blueHover:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-blue-hover)}.hover\:bg_sub:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-sub)}.active\:bg_bluePressed:is(:active,[data-active]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-blue-pressed)}.active\:bg_blueBackgroundPressed:is(:active,[data-active]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-blue-background-pressed)}.active\:text_bluePressed:is(:active,[data-active]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-blue-pressed)}.active\:bg_blueDisabled:is(:active,[data-active]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-blue-disabled)}.active\:bg_monoBackgroundPressed:is(:active,[data-active]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-mono-background-pressed)}.active\:text_textBlack:is(:active,[data-active]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-text-black)}.active\:text_sub:is(:active,[data-active]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){color:var(--colors-sub)}.active\:border_bluePressed:is(:active,[data-active]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-blue-pressed)}.active\:border_outline:is(:active,[data-active]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-outline)}.active\:border-w_1:is(:active,[data-active]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-width:1px}.active\:border_sub:is(:active,[data-active]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-sub)}.\[\&\[data-selected\=true\]\]\:hover\:shadow_0px_0\.25rem_0\.5rem_0px_rgba\(16\,_43\,_74\,_0\.20\)[data-selected=true]:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){box-shadow:0px 0.25rem 0.5rem 0px rgba(16,43,74,0.20)}.\[\&\[data-readonly\=true\]\]\:before\:bg_darkDisabled[data-readonly=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before{background:var(--colors-dark-disabled)}.\[\&\[data-pressed\=true\]\]\:before\:bg_bluePressed[data-pressed=true]:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#):before{background:var(--colors-blue-pressed)}.\[\&\[data-selected\=true\]\]\:hover\:bg_blue\.500[data-selected=true]:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-blue-500)}.\[\&\[data-selected\=true\]\]\:pressed\:bg_blue\.400[data-selected=true]:is([aria-pressed=true],[data-pressed]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-blue-400)}.\[\&\[data-selected\=false\]\]\:hover\:border_mono\.950[data-selected=false]:is(:hover,[data-hover]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-mono-950)}.\[\&\[data-selected\=false\]\]\:pressed\:border_mono\.400[data-selected=false]:is([aria-pressed=true],[data-pressed]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){border-color:var(--colors-mono-400)}.\[\&\[data-selected\=false\]\]\:pressed\:bg_mono\.50[data-selected=false]:is([aria-pressed=true],[data-pressed]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-mono-50)}.hover\:pressed\:bg_blueBackgroundPressed:is(:hover,[data-hover]):is([aria-pressed=true],[data-pressed]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-blue-background-pressed)}.hover\:pressed\:bg_monoBackgroundPressed:is(:hover,[data-hover]):is([aria-pressed=true],[data-pressed]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background:var(--colors-mono-background-pressed)}.hover\:pressed\:bg_bluePressed:is(:hover,[data-hover]):is([aria-pressed=true],[data-pressed]):not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){background-color:var(--colors-blue-pressed)}@media screen and (min-width: 56.25rem){.md\:max-w_40\.75rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){max-width:40.75rem}.md\:min-w_19\.75rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){min-width:19.75rem}}@media screen and (min-width: 80rem){.lgOnly\:max-w_316:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){max-width:316px}.lg\:max-w_22\.375rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){max-width:22.375rem}.lg\:min-w_19\.75rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){min-width:19.75rem}.lg\:max-w_40\.75rem:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){max-width:40.75rem}}@media screen and (max-width: 37.4975rem){.smDown\:w_100\%:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#){width:100%}} \ No newline at end of file diff --git a/packages/wow-ui/styled-system/tokens/index.js b/packages/wow-ui/styled-system/tokens/index.js index 930662c7..a6ec6779 100644 --- a/packages/wow-ui/styled-system/tokens/index.js +++ b/packages/wow-ui/styled-system/tokens/index.js @@ -343,6 +343,10 @@ const tokens = { value: 10, variable: "var(--z-index-dropdown)", }, + "zIndex.overlay": { + value: 9999, + variable: "var(--z-index-overlay)", + }, "shadows.blue": { value: "0px 4px 8px 0px rgba(16, 43, 74, 0.2)", variable: "var(--shadows-blue)", diff --git a/packages/wow-ui/styled-system/tokens/tokens.d.ts b/packages/wow-ui/styled-system/tokens/tokens.d.ts index 24b9c593..45319136 100644 --- a/packages/wow-ui/styled-system/tokens/tokens.d.ts +++ b/packages/wow-ui/styled-system/tokens/tokens.d.ts @@ -86,6 +86,7 @@ export type Token = | "borderWidths.button" | "borderWidths.arrow" | "zIndex.dropdown" + | "zIndex.overlay" | "shadows.blue" | "shadows.mono" | "breakpoints.xs" @@ -323,7 +324,7 @@ export type RadiusToken = "sm" | "md" | "full"; export type BorderWidthToken = "button" | "arrow"; -export type ZIndexToken = "dropdown"; +export type ZIndexToken = "dropdown" | "overlay"; export type ShadowToken = "blue" | "mono"; From 403b7af3ea2f139f4c4e8d2a6d442b7f03b0c5e5 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 22 Sep 2024 11:39:53 +0900 Subject: [PATCH 17/31] =?UTF-8?q?refactor:=20zIndex=20=ED=86=A0=ED=81=B0?= =?UTF-8?q?=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Toast/ToastProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/wow-ui/src/components/Toast/ToastProvider.tsx b/packages/wow-ui/src/components/Toast/ToastProvider.tsx index 663fe925..f66885ab 100644 --- a/packages/wow-ui/src/components/Toast/ToastProvider.tsx +++ b/packages/wow-ui/src/components/Toast/ToastProvider.tsx @@ -36,7 +36,7 @@ const ToastProvider = ({ children }: { children: ReactNode }) => { position="fixed" top="1.5rem" width="100vw" - zIndex="9999" + zIndex="overlay" > {toasts?.map((toast: ToastProps) => ( From a0ab0985b19dde1b50cf44e8b2d17de1b6733b18 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 22 Sep 2024 12:09:48 +0900 Subject: [PATCH 18/31] =?UTF-8?q?feat:=20=EA=B3=B5=ED=86=B5=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=ED=8C=8C=EC=9D=BC=20=EB=82=B4=EB=B3=B4=EB=82=B4?= =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EC=8A=A4=ED=81=AC=EB=A6=BD=ED=8A=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/scripts/generateReactComponentFromSvg.ts | 4 +++- packages/wow-icons/package.json | 1 - packages/wow-icons/src/component/index.ts | 1 + 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/scripts/generateReactComponentFromSvg.ts b/packages/scripts/generateReactComponentFromSvg.ts index a08f184c..d7cb2be9 100644 --- a/packages/scripts/generateReactComponentFromSvg.ts +++ b/packages/scripts/generateReactComponentFromSvg.ts @@ -138,7 +138,9 @@ const generateExportFile = async (components: string[]) => { ) .join("\n"); - await fs.writeFile(EXPORT_FILE_PATH, exportFileContent); + const finalExportFileContent = `export * from "../types/Icon.ts";\n${exportFileContent}`; + + await fs.writeFile(EXPORT_FILE_PATH, finalExportFileContent); }; (async () => { diff --git a/packages/wow-icons/package.json b/packages/wow-icons/package.json index 447ce8c2..d01d72fd 100644 --- a/packages/wow-icons/package.json +++ b/packages/wow-icons/package.json @@ -16,7 +16,6 @@ "package.json" ], "type": "module", - "types": "./dist/index.d.ts", "exports": { ".": { "types": "./dist/component/index.d.ts", diff --git a/packages/wow-icons/src/component/index.ts b/packages/wow-icons/src/component/index.ts index 6e0a57b6..80f5a998 100644 --- a/packages/wow-icons/src/component/index.ts +++ b/packages/wow-icons/src/component/index.ts @@ -1,3 +1,4 @@ +export * from "../types/Icon.ts"; export { default as BlueAvatar } from "./BlueAvatar.tsx"; export { default as Calendar } from "./Calendar.tsx"; export { default as Check } from "./Check.tsx"; From 7e00b06a29bed2c4c6ab7b14cedb124b5d7cefc7 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 22 Sep 2024 12:10:34 +0900 Subject: [PATCH 19/31] =?UTF-8?q?refactor:=20TypeIconComponent=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EA=B3=B5?= =?UTF-8?q?=ED=86=B5=20prop=20=EB=B9=BC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Toast/index.tsx | 22 +++++-------------- 1 file changed, 5 insertions(+), 17 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index a2919727..3d49f10c 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -5,6 +5,7 @@ import type { FlexProps } from "@styled-system/jsx"; import { Flex, styled } from "@styled-system/jsx"; import type { CSSProperties, ReactNode } from "react"; import { forwardRef, useEffect, useState } from "react"; +import type { IconProps } from "wowds-icons"; import { Close, RightArrow } from "wowds-icons"; import useToast from "./useToast"; @@ -49,24 +50,11 @@ const Toast = forwardRef( const ANIMATION_DURATION = 200; const { removeToast } = useToast(); - const TypeIconComponent = () => { + const IconComponentByType = (props: IconProps) => { if (type === "close") - return ( - removeToast(id)} - /> - ); + return removeToast(id)} {...props} />; else if (type === "arrow") - return ( - - ); + return ; return null; }; @@ -116,7 +104,7 @@ const Toast = forwardRef( )} - + ); } From 689cc2a98e427dcf517d6a9df3afdc1bcaa5001a Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 22 Sep 2024 12:17:40 +0900 Subject: [PATCH 20/31] =?UTF-8?q?fix:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=8A=B8=EB=A6=AC=EA=B1=B0=20=EC=A1=B4=EC=9E=AC=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20=EC=8A=A4=ED=86=A0=EB=A6=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80,=20=ED=86=A0=EC=8A=A4=ED=8A=B8=EA=B0=80=20?= =?UTF-8?q?=EC=97=86=EC=9D=84=20=EB=95=8C=20=EC=98=A4=EB=B2=84=EB=A0=88?= =?UTF-8?q?=EC=9D=B4=20=EA=B3=B5=EA=B0=84=20=EC=B0=A8=EC=A7=80=ED=95=98?= =?UTF-8?q?=EC=A7=80=20=EC=95=8A=EB=8F=84=EB=A1=9D=20=EC=A1=B0=EA=B1=B4?= =?UTF-8?q?=EB=B6=80=20=EB=A0=8C=EB=8D=94=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Toast/Toast.stories.tsx | 16 ++++++++-- .../src/components/Toast/ToastProvider.tsx | 32 ++++++++++--------- 2 files changed, 31 insertions(+), 17 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index ca21bb0e..e3871b41 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -2,6 +2,8 @@ import type { Meta } from "@storybook/react"; import { useEffect } from "react"; import { Warn } from "wowds-icons"; +import Button from "@/components/Button"; + import Toast from "."; import ToastProvider from "./ToastProvider"; import useToast from "./useToast"; @@ -78,6 +80,16 @@ export const Default = () => { }, []); }; +export const WithTrigger = () => { + const { toast } = useToast(); + + return ( + + ); +}; + export const Close = () => { const { toast } = useToast(); useEffect(() => { @@ -137,8 +149,8 @@ export const Slow = () => { const { toast } = useToast(); useEffect(() => { toast({ - text: "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText", - icon: , + text: "Text", + subText: "subtext", toastDuration: 5000, }); }, []); diff --git a/packages/wow-ui/src/components/Toast/ToastProvider.tsx b/packages/wow-ui/src/components/Toast/ToastProvider.tsx index f66885ab..91b96332 100644 --- a/packages/wow-ui/src/components/Toast/ToastProvider.tsx +++ b/packages/wow-ui/src/components/Toast/ToastProvider.tsx @@ -27,21 +27,23 @@ const ToastProvider = ({ children }: { children: ReactNode }) => { return ( - - {toasts?.map((toast: ToastProps) => ( - - ))} - + {toasts.length > 0 && ( + + {toasts?.map((toast: ToastProps) => ( + + ))} + + )} {children} ); From 301b804792dffedae584caa7da40f3fce09d8cf0 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 22 Sep 2024 12:23:02 +0900 Subject: [PATCH 21/31] =?UTF-8?q?docs:=20ToastProvider=20=EB=82=B4?= =?UTF-8?q?=EC=9A=A9=20=EC=95=88=EB=82=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Toast/Toast.stories.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index e3871b41..790ba477 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -19,6 +19,12 @@ const meta: Meta = { rules: [{ id: "color-contrast", enabled: false }], }, }, + docs: { + description: { + component: + "토스트가 필요한 레이아웃에서 children을 ToastProvider로 감싸 사용합니다.", + }, + }, }, decorators: [ (Story) => ( From 71d2fe95294a5232b9908d4a90123c0d5ab326ce Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 22 Sep 2024 12:40:11 +0900 Subject: [PATCH 22/31] =?UTF-8?q?docs:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20radio=20=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EB=B0=8F=20=EA=B8=B0=EB=B3=B8=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Toast/Toast.stories.tsx | 26 ++++++++++++------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index 790ba477..d018c28b 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -1,4 +1,4 @@ -import type { Meta } from "@storybook/react"; +import type { Meta, StoryObj } from "@storybook/react"; import { useEffect } from "react"; import { Warn } from "wowds-icons"; @@ -44,7 +44,12 @@ const meta: Meta = { }, type: { description: "Toast의 타입을 나타냅니다.", - control: { type: "radio" }, + table: { + type: { summary: "default | close | arrow" }, + defaultValue: { summary: "default" }, + }, + control: "radio", + options: ["default", "close", "arrow"], }, id: { description: "Toast 컴포넌트의 id를 나타냅니다.", @@ -76,14 +81,15 @@ const meta: Meta = { export default meta; -export const Default = () => { - const { toast } = useToast(); - useEffect(() => { - toast({ - text: "Text", - subText: "subtext", - }); - }, []); +type Story = StoryObj; + +export const Default: Story = { + args: { + id: "1", + text: "Text", + subText: "subtext", + toastDuration: 60 * 60 * 1000, + }, }; export const WithTrigger = () => { From 786e1bc70d76286762044b5a81915e43c6ae38d8 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 22 Sep 2024 12:46:44 +0900 Subject: [PATCH 23/31] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=A0=9C=EA=B1=B0=20?= =?UTF-8?q?=EC=9D=B4=ED=9B=84=20=EC=8B=A4=ED=96=89=EB=90=98=EB=8A=94=20?= =?UTF-8?q?=ED=95=A8=EC=88=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-ui/src/components/Toast/Toast.stories.tsx | 4 ++++ packages/wow-ui/src/components/Toast/index.tsx | 5 +++++ 2 files changed, 9 insertions(+) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index d018c28b..d6f96119 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -60,6 +60,10 @@ const meta: Meta = { "Toast 컴포넌트의 화살표 아이콘을 클릭했을 때 호출되는 함수를 나타냅니다.", control: false, }, + onRemove: { + description: "Toast 컴포넌트가 닫힌 이후 호출되는 함수를 나타냅니다.", + control: false, + }, icon: { description: "Toast 좌측에 들어갈 아이콘을 나타냅니다.", control: false, diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index 3d49f10c..7257c0e1 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -18,7 +18,9 @@ import useToast from "./useToast"; * @param {string} text - 토스트 컴포넌트의 메인 텍스트. * @param {ReactNode} icon - 토스트 컴포넌트의 좌측에 들어갈 아이콘. * @param {()=>void} [onClickArrowIcon] - 화살표 아이콘을 클릭했을 때 호출되는 함수. + * @param {()=>void} [onRemove] - 토스트 컴포넌트가 닫히고 나서 호출되는 함수. * @param {string} [subText] - 토스트 컴포넌트의 보조 텍스트. + * @param {string} [toastDuration] - 토스트 컴포넌트의 보여지는 시간. * @param {CSSProperties} [style] - 커스텀 스타일을 적용하기 위한 객체. * @param {string} [className] - 커스텀 클래스를 적용하기 위한 문자열. */ @@ -28,6 +30,7 @@ export interface ToastProps extends FlexProps { type?: "default" | "close" | "arrow"; text: string; onClickArrowIcon?: () => void; + onRemove?: () => void; icon?: ReactNode; subText?: string; toastDuration?: number; @@ -41,6 +44,7 @@ const Toast = forwardRef( text, subText, onClickArrowIcon, + onRemove, type = "default", icon, toastDuration, @@ -64,6 +68,7 @@ const Toast = forwardRef( setOpacity(1); const timeoutForRemove = setTimeout(() => { removeToast(id); + onRemove?.(); }, TOAST_DURATION); const timeoutForVisible = setTimeout(() => { From fa6a9f29e88b2eda62d8a345de6d3673248dfb0e Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sun, 22 Sep 2024 13:00:11 +0900 Subject: [PATCH 24/31] =?UTF-8?q?feat:=20docs=EC=97=90=EB=8F=84overlay=20?= =?UTF-8?q?=ED=86=A0=ED=81=B0=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/wow-docs/styled-system/tokens/index.js | 4 ++++ apps/wow-docs/styled-system/tokens/tokens.d.ts | 3 ++- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/apps/wow-docs/styled-system/tokens/index.js b/apps/wow-docs/styled-system/tokens/index.js index 930662c7..a6ec6779 100644 --- a/apps/wow-docs/styled-system/tokens/index.js +++ b/apps/wow-docs/styled-system/tokens/index.js @@ -343,6 +343,10 @@ const tokens = { value: 10, variable: "var(--z-index-dropdown)", }, + "zIndex.overlay": { + value: 9999, + variable: "var(--z-index-overlay)", + }, "shadows.blue": { value: "0px 4px 8px 0px rgba(16, 43, 74, 0.2)", variable: "var(--shadows-blue)", diff --git a/apps/wow-docs/styled-system/tokens/tokens.d.ts b/apps/wow-docs/styled-system/tokens/tokens.d.ts index 24b9c593..45319136 100644 --- a/apps/wow-docs/styled-system/tokens/tokens.d.ts +++ b/apps/wow-docs/styled-system/tokens/tokens.d.ts @@ -86,6 +86,7 @@ export type Token = | "borderWidths.button" | "borderWidths.arrow" | "zIndex.dropdown" + | "zIndex.overlay" | "shadows.blue" | "shadows.mono" | "breakpoints.xs" @@ -323,7 +324,7 @@ export type RadiusToken = "sm" | "md" | "full"; export type BorderWidthToken = "button" | "arrow"; -export type ZIndexToken = "dropdown"; +export type ZIndexToken = "dropdown" | "overlay"; export type ShadowToken = "blue" | "mono"; From cefebe990171c275089fa775295b6baa94ceba84 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 26 Sep 2024 11:44:38 +0900 Subject: [PATCH 25/31] =?UTF-8?q?fix:=20type=20->=20rightIcon=20=EB=84=A4?= =?UTF-8?q?=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Toast/Toast.stories.tsx | 16 ++++++++-------- packages/wow-ui/src/components/Toast/index.tsx | 12 ++++++------ 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index d6f96119..aaa822cd 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -42,14 +42,14 @@ const meta: Meta = { description: "Toast에 들어갈 보조 텍스트를 나타냅니다.", control: { type: "text" }, }, - type: { - description: "Toast의 타입을 나타냅니다.", + rightIcon: { + description: "Toast의 우측에 들어갈 아이콘을 나타냅니다.", table: { - type: { summary: "default | close | arrow" }, - defaultValue: { summary: "default" }, + type: { summary: "none | close | arrow" }, + defaultValue: { summary: "none" }, }, control: "radio", - options: ["default", "close", "arrow"], + options: ["none", "close", "arrow"], }, id: { description: "Toast 컴포넌트의 id를 나타냅니다.", @@ -112,7 +112,7 @@ export const Close = () => { toast({ text: "Text", subText: "subtext", - type: "close", + rightIcon: "close", }); }, []); }; @@ -123,7 +123,7 @@ export const Arrow = () => { toast({ text: "Text", subText: "subtext", - type: "arrow", + rightIcon: "arrow", }); }, []); }; @@ -145,7 +145,7 @@ export const IconArrow = () => { toast({ text: "Text", subText: "subtext", - type: "arrow", + rightIcon: "arrow", icon: , }); }, []); diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index 7257c0e1..18093d5f 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -27,7 +27,7 @@ import useToast from "./useToast"; export interface ToastProps extends FlexProps { id: string; - type?: "default" | "close" | "arrow"; + rightIcon?: "none" | "close" | "arrow"; text: string; onClickArrowIcon?: () => void; onRemove?: () => void; @@ -45,7 +45,7 @@ const Toast = forwardRef( subText, onClickArrowIcon, onRemove, - type = "default", + rightIcon = "none", icon, toastDuration, ...rest @@ -54,10 +54,10 @@ const Toast = forwardRef( const ANIMATION_DURATION = 200; const { removeToast } = useToast(); - const IconComponentByType = (props: IconProps) => { - if (type === "close") + const RightIcon = (props: IconProps) => { + if (rightIcon === "close") return removeToast(id)} {...props} />; - else if (type === "arrow") + else if (rightIcon === "arrow") return ; return null; }; @@ -109,7 +109,7 @@ const Toast = forwardRef( )} - + ); } From 73eee2d1d4a78d6813c7d0793a54db7d2c8ea3be Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 26 Sep 2024 11:49:01 +0900 Subject: [PATCH 26/31] =?UTF-8?q?docs:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=20=EC=84=A4=EB=AA=85=20=EB=B0=8F=20=ED=83=80=EC=9D=B4?= =?UTF-8?q?=ED=8B=80=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/src/components/Toast/Toast.stories.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index aaa822cd..997d8674 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -69,7 +69,7 @@ const meta: Meta = { control: false, }, toastDuration: { - description: "Toast가 보여지는 시간을 나타냅니다.", + description: "Toast가 보여지는 시간(ms)을 나타냅니다.", control: { type: "number" }, }, style: { @@ -106,7 +106,7 @@ export const WithTrigger = () => { ); }; -export const Close = () => { +export const WithCloseIcon = () => { const { toast } = useToast(); useEffect(() => { toast({ @@ -117,7 +117,7 @@ export const Close = () => { }, []); }; -export const Arrow = () => { +export const WithArrowIcon = () => { const { toast } = useToast(); useEffect(() => { toast({ @@ -128,7 +128,7 @@ export const Arrow = () => { }, []); }; -export const Icon = () => { +export const WithLeftIcon = () => { const { toast } = useToast(); useEffect(() => { toast({ @@ -139,7 +139,7 @@ export const Icon = () => { }, []); }; -export const IconArrow = () => { +export const WithLeftAndArrowIcons = () => { const { toast } = useToast(); useEffect(() => { toast({ From 3f5ca3b0431a04341aeb84cffaf5dcc921c96527 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 26 Sep 2024 11:51:50 +0900 Subject: [PATCH 27/31] =?UTF-8?q?fix:=20=EC=8A=A4=ED=81=AC=EB=A6=BD?= =?UTF-8?q?=ED=8A=B8=20content=20=EB=B3=80=EC=88=98=20=EB=84=A4=EC=9D=B4?= =?UTF-8?q?=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/scripts/generateReactComponentFromSvg.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/scripts/generateReactComponentFromSvg.ts b/packages/scripts/generateReactComponentFromSvg.ts index d7cb2be9..ad7ec5db 100644 --- a/packages/scripts/generateReactComponentFromSvg.ts +++ b/packages/scripts/generateReactComponentFromSvg.ts @@ -138,9 +138,9 @@ const generateExportFile = async (components: string[]) => { ) .join("\n"); - const finalExportFileContent = `export * from "../types/Icon.ts";\n${exportFileContent}`; + const resolvedExportFileContent = `export * from "../types/Icon.ts";\n${exportFileContent}`; - await fs.writeFile(EXPORT_FILE_PATH, finalExportFileContent); + await fs.writeFile(EXPORT_FILE_PATH, resolvedExportFileContent); }; (async () => { From e51aa8ec105912edeafc202b82d6fa73bc936bb0 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 26 Sep 2024 14:32:49 +0900 Subject: [PATCH 28/31] =?UTF-8?q?fix:=20icon=20prop=20=EB=B6=88=EB=A6=AC?= =?UTF-8?q?=EC=96=B8=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Toast/Toast.stories.tsx | 12 ++++++------ packages/wow-ui/src/components/Toast/index.tsx | 10 +++++----- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/Toast.stories.tsx b/packages/wow-ui/src/components/Toast/Toast.stories.tsx index 997d8674..11451a3f 100644 --- a/packages/wow-ui/src/components/Toast/Toast.stories.tsx +++ b/packages/wow-ui/src/components/Toast/Toast.stories.tsx @@ -64,9 +64,9 @@ const meta: Meta = { description: "Toast 컴포넌트가 닫힌 이후 호출되는 함수를 나타냅니다.", control: false, }, - icon: { - description: "Toast 좌측에 들어갈 아이콘을 나타냅니다.", - control: false, + showLeftIcon: { + description: "Toast 좌측에 들어갈 아이콘의 노출 여부를 나타냅니다.", + control: "boolean", }, toastDuration: { description: "Toast가 보여지는 시간(ms)을 나타냅니다.", @@ -134,7 +134,7 @@ export const WithLeftIcon = () => { toast({ text: "Text", subText: "subtext", - icon: , + showLeftIcon: true, }); }, []); }; @@ -145,8 +145,8 @@ export const WithLeftAndArrowIcons = () => { toast({ text: "Text", subText: "subtext", + showLeftIcon: true, rightIcon: "arrow", - icon: , }); }, []); }; @@ -155,8 +155,8 @@ export const TwoLines = () => { const { toast } = useToast(); useEffect(() => { toast({ + showLeftIcon: true, text: "TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText", - icon: , }); }, []); }; diff --git a/packages/wow-ui/src/components/Toast/index.tsx b/packages/wow-ui/src/components/Toast/index.tsx index 18093d5f..efd10216 100644 --- a/packages/wow-ui/src/components/Toast/index.tsx +++ b/packages/wow-ui/src/components/Toast/index.tsx @@ -3,10 +3,10 @@ import { css } from "@styled-system/css"; import type { FlexProps } from "@styled-system/jsx"; import { Flex, styled } from "@styled-system/jsx"; -import type { CSSProperties, ReactNode } from "react"; +import type { CSSProperties } from "react"; import { forwardRef, useEffect, useState } from "react"; import type { IconProps } from "wowds-icons"; -import { Close, RightArrow } from "wowds-icons"; +import { Close, RightArrow, Warn } from "wowds-icons"; import useToast from "./useToast"; @@ -27,11 +27,11 @@ import useToast from "./useToast"; export interface ToastProps extends FlexProps { id: string; + showLeftIcon?: boolean; rightIcon?: "none" | "close" | "arrow"; text: string; onClickArrowIcon?: () => void; onRemove?: () => void; - icon?: ReactNode; subText?: string; toastDuration?: number; style?: CSSProperties; @@ -46,7 +46,7 @@ const Toast = forwardRef( onClickArrowIcon, onRemove, rightIcon = "none", - icon, + showLeftIcon = false, toastDuration, ...rest }: ToastProps) => { @@ -93,7 +93,7 @@ const Toast = forwardRef( {...rest} > - {icon} + {showLeftIcon && } Date: Thu, 26 Sep 2024 14:44:03 +0900 Subject: [PATCH 29/31] =?UTF-8?q?refactor:=20=ED=98=84=EC=9E=AC=20?= =?UTF-8?q?=EC=8B=9C=EA=B0=81=20=EB=8C=80=EC=8B=A0=20uuid=EB=A1=9C=20?= =?UTF-8?q?=ED=86=A0=EC=8A=A4=ED=8A=B8=20id=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/wow-ui/package.json | 4 +++- .../wow-ui/src/components/Toast/ToastProvider.tsx | 4 +++- pnpm-lock.yaml | 15 +++++++++++++++ 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/packages/wow-ui/package.json b/packages/wow-ui/package.json index 4be8f5cd..8d6e35a2 100644 --- a/packages/wow-ui/package.json +++ b/packages/wow-ui/package.json @@ -194,12 +194,14 @@ "plop": "^4.0.1", "rollup-plugin-peer-deps-external": "^2.2.4", "storybook": "^8.1.9", - "typescript": "^5.3.3" + "typescript": "^5.3.3", + "@types/uuid": "^10.0.0" }, "dependencies": { "clsx": "^2.1.1", "lottie-react": "^2.4.0", "react-day-picker": "^9.0.8", + "uuid": "^10.0.0", "wowds-icons": "workspace:^" }, "peerDependencies": { diff --git a/packages/wow-ui/src/components/Toast/ToastProvider.tsx b/packages/wow-ui/src/components/Toast/ToastProvider.tsx index 91b96332..991375d4 100644 --- a/packages/wow-ui/src/components/Toast/ToastProvider.tsx +++ b/packages/wow-ui/src/components/Toast/ToastProvider.tsx @@ -3,6 +3,7 @@ import { Flex } from "@styled-system/jsx"; import type { ReactNode } from "react"; import { useState } from "react"; +import { v4 as uuidv4 } from "uuid"; import type { ToastProps } from "."; import Toast from "."; @@ -16,8 +17,9 @@ const ToastProvider = ({ children }: { children: ReactNode }) => { ) => { const newToast = { ...props, - id: props.id || Date.now().toString(), + id: props.id || uuidv4(), }; + console.log(newToast.id); setToasts((prev) => [...prev, newToast]); }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9f85f6f4..2118e5d4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -268,6 +268,9 @@ importers: react-day-picker: specifier: ^9.0.8 version: 9.0.8(react@18.2.0) + uuid: + specifier: ^10.0.0 + version: 10.0.0 wowds-icons: specifier: workspace:^ version: link:../wow-icons @@ -323,6 +326,9 @@ importers: '@types/react-dom': specifier: ^18.2.19 version: 18.2.19 + '@types/uuid': + specifier: ^10.0.0 + version: 10.0.0 axe-playwright: specifier: ^2.0.1 version: 2.0.1(playwright@1.45.0) @@ -5445,6 +5451,10 @@ packages: resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==} dev: true + /@types/uuid@10.0.0: + resolution: {integrity: sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==} + dev: true + /@types/uuid@9.0.8: resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==} dev: true @@ -15658,6 +15668,11 @@ packages: engines: {node: '>= 0.4.0'} dev: true + /uuid@10.0.0: + resolution: {integrity: sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==} + hasBin: true + dev: false + /uuid@8.3.2: resolution: {integrity: sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==} hasBin: true From 1d800bdf20a0097567cb2e38afd9847c2a0fe4f9 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Thu, 26 Sep 2024 14:52:27 +0900 Subject: [PATCH 30/31] =?UTF-8?q?feat:=20=EC=A0=95=EA=B7=9C=EC=8B=9D=20?= =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20=ED=95=B4=EB=8B=B9=20=EC=A0=95?= =?UTF-8?q?=EA=B7=9C=EC=8B=9D=EC=9D=84=20=EB=A7=8C=EC=A1=B1=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EC=95=84=EC=9D=B4=EB=94=94=EB=A5=BC=20=EA=B0=80?= =?UTF-8?q?=EC=A7=84=20=ED=86=A0=EC=8A=A4=ED=8A=B8=EB=A7=8C=20=EB=B3=B4?= =?UTF-8?q?=EC=97=AC=EC=A3=BC=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../wow-ui/src/components/Toast/ToastProvider.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/packages/wow-ui/src/components/Toast/ToastProvider.tsx b/packages/wow-ui/src/components/Toast/ToastProvider.tsx index 991375d4..aa766870 100644 --- a/packages/wow-ui/src/components/Toast/ToastProvider.tsx +++ b/packages/wow-ui/src/components/Toast/ToastProvider.tsx @@ -9,7 +9,12 @@ import type { ToastProps } from "."; import Toast from "."; import { ToastContext } from "./ToastContext"; -const ToastProvider = ({ children }: { children: ReactNode }) => { +interface ToastProviderProps { + children: ReactNode; + idPattern?: RegExp; +} + +const ToastProvider = ({ children, idPattern }: ToastProviderProps) => { const [toasts, setToasts] = useState([]); const addToast = ( @@ -19,7 +24,7 @@ const ToastProvider = ({ children }: { children: ReactNode }) => { ...props, id: props.id || uuidv4(), }; - console.log(newToast.id); + setToasts((prev) => [...prev, newToast]); }; @@ -27,6 +32,10 @@ const ToastProvider = ({ children }: { children: ReactNode }) => { setToasts((prev) => prev.filter((toast) => toast.id !== id)); }; + const filteredToasts = idPattern + ? toasts.filter((toast) => idPattern.test(toast.id)) + : toasts; + return ( {toasts.length > 0 && ( @@ -41,7 +50,7 @@ const ToastProvider = ({ children }: { children: ReactNode }) => { width="100vw" zIndex="overlay" > - {toasts?.map((toast: ToastProps) => ( + {filteredToasts?.map((toast: ToastProps) => ( ))} From ed47550f09f0af7039e5d1825dc4baa08fe17553 Mon Sep 17 00:00:00 2001 From: hamo-o Date: Sat, 12 Oct 2024 23:20:19 +0900 Subject: [PATCH 31/31] =?UTF-8?q?chore:=20changeset=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .changeset/green-feet-teach.md | 6 ++++++ .changeset/pretty-cooks-join.md | 5 +++++ .changeset/seven-eggs-wait.md | 5 +++++ 3 files changed, 16 insertions(+) create mode 100644 .changeset/green-feet-teach.md create mode 100644 .changeset/pretty-cooks-join.md create mode 100644 .changeset/seven-eggs-wait.md diff --git a/.changeset/green-feet-teach.md b/.changeset/green-feet-teach.md new file mode 100644 index 00000000..c0095ff2 --- /dev/null +++ b/.changeset/green-feet-teach.md @@ -0,0 +1,6 @@ +--- +"wowds-tokens": patch +"wowds-theme": patch +--- + +zIndex 토큰을 추가합니다. diff --git a/.changeset/pretty-cooks-join.md b/.changeset/pretty-cooks-join.md new file mode 100644 index 00000000..06c59008 --- /dev/null +++ b/.changeset/pretty-cooks-join.md @@ -0,0 +1,5 @@ +--- +"wowds-icons": patch +--- + +Icon 공통 타입을 내보내기합니다. diff --git a/.changeset/seven-eggs-wait.md b/.changeset/seven-eggs-wait.md new file mode 100644 index 00000000..55c9b204 --- /dev/null +++ b/.changeset/seven-eggs-wait.md @@ -0,0 +1,5 @@ +--- +"wowds-ui": patch +--- + +Toast 컴포넌트를 추가합니다.