From 8ffd4cc68b699faac150416ff3fa2cc19e6911d8 Mon Sep 17 00:00:00 2001 From: rati-101 Date: Mon, 2 Jun 2025 16:46:32 +0900 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20subtitle=20=EC=83=89=EC=83=81?= =?UTF-8?q?=EC=9D=84=20onView1=20->=20onView2=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/lib/ModalBottomSheet/ModalBottomSheet.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx index e5fb8c852..c1e75f2a7 100644 --- a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx +++ b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx @@ -196,7 +196,15 @@ export const ModalBottomSheet = withModalBottomSheetVariation( )} {subtitle ? ( - + {subtitle} ) : null} From 4bc8bd78b4827890f28dfe6b419f29df092224d7 Mon Sep 17 00:00:00 2001 From: rati-101 Date: Mon, 2 Jun 2025 17:25:21 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20buttonDirection=20prop=EC=9D=84=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=ED=95=98=EA=B3=A0=20=EA=B0=80=EB=8A=A5?= =?UTF-8?q?=ED=95=9C=20=EB=B2=84=ED=8A=BC=20=EC=A1=B0=ED=95=A9=EC=97=90=20?= =?UTF-8?q?=EB=8C=80=ED=95=9C=20=EC=8A=A4=ED=8E=99=EC=9D=84=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModalBottomSheet.stories.tsx | 4 +- .../lib/ModalBottomSheet/ModalBottomSheet.tsx | 94 ++++++++++++------- .../ModalBottomSheet/ModalBottomSheetProps.ts | 46 +++++---- 3 files changed, 91 insertions(+), 53 deletions(-) diff --git a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.stories.tsx b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.stories.tsx index 5e14291a9..5b18c8c1c 100644 --- a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.stories.tsx +++ b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.stories.tsx @@ -145,7 +145,7 @@ export const MultipleModal: ComponentStory = () => { ); }; -export const withButtonOptions: ComponentStory = () => ( +export const withButtonOptions: ComponentStory = props => ( = () => )} primaryButtonOptions={{ text: 'primary', disabled: false }} secondaryButtonOptions={{ text: 'secondary', disabled: false }} + subButtonOptions={{ text: 'sub', disabled: false }} + buttonDirection={props.buttonDirection} /> window.removeEventListener('keydown', onKeydown); }, [closeModal, isOpen, dimClosable, showCloseButton]); + // eslint-disable-next-line @typescript-eslint/naming-convention + const SubButton = useMemo( + () => + subButtonOptions ? ( + + subButtonOptions.onClick?.({ close: closeModal })} + disabled={subButtonOptions.disabled} + IconComponent={subButtonOptions.IconComponent} + > + {subButtonOptions.text} + + + ) : null, + [closeModal, subButtonOptions] + ); + return ( <> {opener} @@ -215,7 +235,7 @@ export const ModalBottomSheet = withModalBottomSheetVariation( )} - {isDefined(primaryButtonOptions) && !isDefined(secondaryButtonOptions) && !isDefined(subButtonOptions) && ( + {isDefined(primaryButtonOptions) && !isDefined(secondaryButtonOptions) && ( {primaryButtonOptions.text} + {isDefined(subButtonOptions) && SubButton} )} - {isDefined(primaryButtonOptions) && isDefined(secondaryButtonOptions) && !isDefined(subButtonOptions) && ( - - primaryButtonOptions.onClick?.({ close: closeModal })} - full={true} - disabled={primaryButtonOptions.disabled} - loading={primaryButtonOptions.loading} - IconComponent={primaryButtonOptions.IconComponent} - > - {primaryButtonOptions.text} - + + {!isDefined(primaryButtonOptions) && isDefined(secondaryButtonOptions) && ( + {secondaryButtonOptions.text} + {isDefined(subButtonOptions) && SubButton} )} - {isDefined(primaryButtonOptions) && !isDefined(secondaryButtonOptions) && isDefined(subButtonOptions) && ( - - primaryButtonOptions.onClick?.({ close: closeModal })} - full={true} - disabled={primaryButtonOptions.disabled} - loading={primaryButtonOptions.loading} - IconComponent={primaryButtonOptions.IconComponent} + + {isDefined(primaryButtonOptions) && isDefined(secondaryButtonOptions) && ( + + - {primaryButtonOptions.text} - - - subButtonOptions.onClick?.({ close: closeModal })} - disabled={subButtonOptions.disabled} - IconComponent={subButtonOptions.IconComponent} + primaryButtonOptions.onClick?.({ close: closeModal })} + full={true} + disabled={primaryButtonOptions.disabled} + loading={primaryButtonOptions.loading} + IconComponent={primaryButtonOptions.IconComponent} + > + {primaryButtonOptions.text} + + secondaryButtonOptions.onClick?.({ close: closeModal })} + full={true} + disabled={secondaryButtonOptions.disabled} + loading={secondaryButtonOptions.loading} + IconComponent={secondaryButtonOptions.IconComponent} > - {subButtonOptions.text} - - + {secondaryButtonOptions.text} + + + {isDefined(subButtonOptions) && SubButton} )} diff --git a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheetProps.ts b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheetProps.ts index 4b8f39f83..a463c4234 100644 --- a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheetProps.ts +++ b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheetProps.ts @@ -35,23 +35,35 @@ export type ModalBottomSheetProps = Either< * @default 200 */ native_swipeToCloseVelocity?: number; -} & ( - | { - primaryButtonOptions: ButtonOptions; - secondaryButtonOptions?: ButtonOptions; - subButtonOptions?: never; - } - | { - primaryButtonOptions: ButtonOptions; - secondaryButtonOptions?: never; - subButtonOptions?: Omit; - } - | { - primaryButtonOptions?: never; - secondaryButtonOptions?: never; - subButtonOptions?: never; - } - ); +} & (NoButtons | PrimaryOnly | PrimarySecondary | SecondaryOnly); + +type PrimaryOnly = { + primaryButtonOptions: ButtonOptions; + secondaryButtonOptions?: never; + subButtonOptions?: Omit; + buttonDirection?: never; +}; + +type SecondaryOnly = { + primaryButtonOptions?: never; + secondaryButtonOptions: ButtonOptions; + subButtonOptions?: Omit; + buttonDirection?: never; +}; + +type PrimarySecondary = { + primaryButtonOptions: ButtonOptions; + secondaryButtonOptions: ButtonOptions; + subButtonOptions?: Omit; + buttonDirection?: 'horizontal' | 'vertical'; +}; + +type NoButtons = { + primaryButtonOptions?: never; + secondaryButtonOptions?: never; + subButtonOptions?: never; + buttonDirection?: never; +}; export type ButtonOptions = { kind?: 'primary' | 'secondary' | 'tertiary'; From cc098a3503a5364a8b5dd188a363122abd98a6ef Mon Sep 17 00:00:00 2001 From: rati-101 Date: Mon, 2 Jun 2025 17:28:23 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20primary,=20secondary,=20sub=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=AA=A8=EB=91=90=20=EC=82=AC=EC=9A=A9?= =?UTF-8?q?=ED=95=9C=20=EA=B2=BD=EC=9A=B0=EC=9D=98=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=A5=BC=20=EC=B6=94=EA=B0=80=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModalBottomSheet/ModalBottomSheet.stories.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.stories.tsx b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.stories.tsx index 5b18c8c1c..d481c2cb2 100644 --- a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.stories.tsx +++ b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.stories.tsx @@ -167,7 +167,6 @@ export const withButtonOptions: ComponentStory = props )} primaryButtonOptions={{ text: 'primary', disabled: false }} secondaryButtonOptions={{ text: 'secondary', disabled: false }} - subButtonOptions={{ text: 'sub', disabled: false }} buttonDirection={props.buttonDirection} /> = props primaryButtonOptions={{ text: 'primary', disabled: false }} subButtonOptions={{ text: 'sub', disabled: false }} /> + ( + + Primary + Secondary + Sub + + )} + primaryButtonOptions={{ text: 'primary', disabled: false }} + secondaryButtonOptions={{ text: 'secondary', disabled: false }} + subButtonOptions={{ text: 'sub', disabled: false }} + buttonDirection={props.buttonDirection} + /> ); From 075ae2567a837a8e64ff04dd70bef6c26ef9e786 Mon Sep 17 00:00:00 2001 From: rati-101 Date: Mon, 2 Jun 2025 19:22:16 +0900 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=EB=B2=84=ED=8A=BC=20prop=20?= =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=ED=83=80=EC=9E=85=EB=AA=85=EC=9D=84=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/lib/ModalBottomSheet/ModalBottomSheet.tsx | 9 ++++----- .../src/lib/ModalBottomSheet/ModalBottomSheetProps.ts | 8 ++++---- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx index 4056573db..7196384b9 100644 --- a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx +++ b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.tsx @@ -134,8 +134,7 @@ export const ModalBottomSheet = withModalBottomSheetVariation( return () => window.removeEventListener('keydown', onKeydown); }, [closeModal, isOpen, dimClosable, showCloseButton]); - // eslint-disable-next-line @typescript-eslint/naming-convention - const SubButton = useMemo( + const subButton = useMemo( () => subButtonOptions ? ( @@ -248,7 +247,7 @@ export const ModalBottomSheet = withModalBottomSheetVariation( > {primaryButtonOptions.text} - {isDefined(subButtonOptions) && SubButton} + {isDefined(subButtonOptions) && subButton} )} @@ -265,7 +264,7 @@ export const ModalBottomSheet = withModalBottomSheetVariation( > {secondaryButtonOptions.text} - {isDefined(subButtonOptions) && SubButton} + {isDefined(subButtonOptions) && subButton} )} @@ -302,7 +301,7 @@ export const ModalBottomSheet = withModalBottomSheetVariation( {secondaryButtonOptions.text} - {isDefined(subButtonOptions) && SubButton} + {isDefined(subButtonOptions) && subButton} )} diff --git a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheetProps.ts b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheetProps.ts index a463c4234..f3ad31d70 100644 --- a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheetProps.ts +++ b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheetProps.ts @@ -35,23 +35,23 @@ export type ModalBottomSheetProps = Either< * @default 200 */ native_swipeToCloseVelocity?: number; -} & (NoButtons | PrimaryOnly | PrimarySecondary | SecondaryOnly); +} & (NoButtons | PrimaryButtonOnly | PrimarySecondaryButtons | SecondaryButtonOnly); -type PrimaryOnly = { +type PrimaryButtonOnly = { primaryButtonOptions: ButtonOptions; secondaryButtonOptions?: never; subButtonOptions?: Omit; buttonDirection?: never; }; -type SecondaryOnly = { +type SecondaryButtonOnly = { primaryButtonOptions?: never; secondaryButtonOptions: ButtonOptions; subButtonOptions?: Omit; buttonDirection?: never; }; -type PrimarySecondary = { +type PrimarySecondaryButtons = { primaryButtonOptions: ButtonOptions; secondaryButtonOptions: ButtonOptions; subButtonOptions?: Omit; From 308907dc5378c1877a7e197967ce7c333ba30f0b Mon Sep 17 00:00:00 2001 From: rati-101 Date: Wed, 4 Jun 2025 16:34:48 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20native=EC=97=90=EB=8F=84=20?= =?UTF-8?q?=EB=8F=99=EC=9D=BC=ED=95=9C=20=EC=8A=A4=ED=8E=99=EC=9D=84=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ModalBottomSheet.native.tsx | 115 ++++++++++-------- 1 file changed, 65 insertions(+), 50 deletions(-) diff --git a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.native.tsx b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.native.tsx index d698e555c..7f9fff634 100644 --- a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.native.tsx +++ b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.native.tsx @@ -21,6 +21,7 @@ import { ContainedButton } from '../ContainedButton'; import { GhostButton } from '../GhostButton'; import { HStack } from '../HStack'; import { IconButton } from '../IconButton'; +import { Stack } from '../Stack'; import { Title } from '../Title'; import { VStack } from '../VStack'; import { withModalBottomSheetVariation } from './ModalBottomSheetProps'; @@ -45,6 +46,7 @@ export const ModalBottomSheet = withModalBottomSheetVariation( transitionDuration = 300, native_swipeToCloseThreshold = 0.4, native_swipeToCloseVelocity = 200, + buttonDirection = 'vertical', }) => { const { getResponsiveValue } = useResponsiveValue(); const { generateStyle } = useSafeArea(); @@ -202,6 +204,23 @@ export const ModalBottomSheet = withModalBottomSheetVariation( [isOpen, renderOpener, setIsOpen] ); + const subButton = useMemo( + () => + subButtonOptions ? ( + + subButtonOptions.onClick?.({ close: closeModal })} + disabled={subButtonOptions.disabled} + IconComponent={subButtonOptions.IconComponent} + > + {subButtonOptions.text} + + + ) : null, + [closeModal, subButtonOptions] + ); + return ( <> {opener} @@ -286,27 +305,48 @@ export const ModalBottomSheet = withModalBottomSheetVariation( )} - {isDefined(primaryButtonOptions) && - !isDefined(secondaryButtonOptions) && - !isDefined(subButtonOptions) && ( - - primaryButtonOptions.onClick?.({ close: closeModal })} - full={true} - disabled={primaryButtonOptions.disabled} - loading={primaryButtonOptions.loading} - IconComponent={primaryButtonOptions.IconComponent} - > - {primaryButtonOptions.text} - - - )} - {isDefined(primaryButtonOptions) && - isDefined(secondaryButtonOptions) && - !isDefined(subButtonOptions) && ( - + {isDefined(primaryButtonOptions) && !isDefined(secondaryButtonOptions) && ( + + primaryButtonOptions.onClick?.({ close: closeModal })} + full={true} + disabled={primaryButtonOptions.disabled} + loading={primaryButtonOptions.loading} + IconComponent={primaryButtonOptions.IconComponent} + > + {primaryButtonOptions.text} + + {isDefined(subButtonOptions) && subButton} + + )} + {!isDefined(primaryButtonOptions) && isDefined(secondaryButtonOptions) && ( + + secondaryButtonOptions.onClick?.({ close: closeModal })} + full={true} + disabled={secondaryButtonOptions.disabled} + loading={secondaryButtonOptions.loading} + IconComponent={secondaryButtonOptions.IconComponent} + > + {secondaryButtonOptions.text} + + {isDefined(subButtonOptions) && subButton} + + )} + {isDefined(primaryButtonOptions) && isDefined(secondaryButtonOptions) && ( + + {secondaryButtonOptions.text} - - )} - {isDefined(primaryButtonOptions) && - !isDefined(secondaryButtonOptions) && - isDefined(subButtonOptions) && ( - - primaryButtonOptions.onClick?.({ close: closeModal })} - full={true} - disabled={primaryButtonOptions.disabled} - loading={primaryButtonOptions.loading} - IconComponent={primaryButtonOptions.IconComponent} - > - {primaryButtonOptions.text} - - - subButtonOptions.onClick?.({ close: closeModal })} - disabled={subButtonOptions.disabled} - IconComponent={subButtonOptions.IconComponent} - > - {subButtonOptions.text} - - - - )} + + {isDefined(subButtonOptions) && subButton} + + )} From 863c34bd51cdc0b8ce4527f4b7a87aa8515e05b7 Mon Sep 17 00:00:00 2001 From: rati-101 Date: Wed, 4 Jun 2025 17:58:15 +0900 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20buttonDirection=20horizontal?= =?UTF-8?q?=EC=9D=BC=20=EB=95=8C=20=EB=B2=84=ED=8A=BC=20=EC=88=9C=EC=84=9C?= =?UTF-8?q?=EB=A5=BC=20=EB=B3=80=EA=B2=BD=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/lib/ModalBottomSheet/ModalBottomSheet.native.tsx | 3 ++- .../src/lib/ModalBottomSheet/ModalBottomSheet.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.native.tsx b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.native.tsx index 7f9fff634..ea910b4ea 100644 --- a/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.native.tsx +++ b/packages/vibrant-components/src/lib/ModalBottomSheet/ModalBottomSheet.native.tsx @@ -340,12 +340,13 @@ export const ModalBottomSheet = withModalBottomSheetVariation( {isDefined(primaryButtonOptions) && isDefined(secondaryButtonOptions) && (