From bbdcc7194f6203dfaee0728a4b798ac9144d0c6c Mon Sep 17 00:00:00 2001 From: malangcat Date: Thu, 9 Jan 2025 21:51:25 +0900 Subject: [PATCH] fix: snackbar recipe not applied --- docs/components/example/index.json | 2 + docs/components/example/snackbar-danger.tsx | 37 +++++++++++++++++++ docs/components/example/snackbar-positive.tsx | 37 +++++++++++++++++++ .../docs/react/components/snackbar.mdx | 8 ++++ docs/registry/ui/snackbar.tsx | 1 + packages/qvism-preset/src/index.ts | 3 +- packages/qvism-preset/src/recipes/snackbar.ts | 20 +++++++--- .../src/components/Snackbar/Snackbar.tsx | 19 ++++------ packages/recipe/lib/snackbar.d.ts | 2 +- packages/recipe/lib/snackbar.mjs | 4 -- packages/recipe/lib/snackbarRegion.d.ts | 21 +++++++++++ packages/recipe/lib/snackbarRegion.mjs | 31 ++++++++++++++++ packages/rootage/components/snackbar.yaml | 1 + packages/stylesheet/snackbar.css | 15 +------- packages/stylesheet/snackbarRegion.css | 14 +++++++ 15 files changed, 177 insertions(+), 38 deletions(-) create mode 100644 docs/components/example/snackbar-danger.tsx create mode 100644 docs/components/example/snackbar-positive.tsx create mode 100644 packages/recipe/lib/snackbarRegion.d.ts create mode 100644 packages/recipe/lib/snackbarRegion.mjs create mode 100644 packages/stylesheet/snackbarRegion.css diff --git a/docs/components/example/index.json b/docs/components/example/index.json index bdc730f71..f3b28567b 100644 --- a/docs/components/example/index.json +++ b/docs/components/example/index.json @@ -142,6 +142,8 @@ "skeleton-preview": "import { Flex } from \"seed-design/ui/layout\";\nimport { Skeleton } from \"seed-design/ui/skeleton\";\n\nexport default function SkeletonPreview() {\n return (\n \n \n \n \n \n \n \n );\n}", "skeleton-radius": "import { Skeleton } from \"seed-design/ui/skeleton\";\nimport { Flex } from \"seed-design/ui/layout\";\n\nexport default function SkeletonRadius() {\n return (\n \n \n \n \n \n \n );\n}", "snackbar-avoid-overlap": "import { Flex } from \"@/registry/ui/layout\";\nimport { ActionButton } from \"seed-design/ui/action-button\";\nimport {\n Snackbar,\n SnackbarAvoidOverlap,\n SnackbarProvider,\n useSnackbarAdapter,\n} from \"seed-design/ui/snackbar\";\n\nfunction Component() {\n const adapter = useSnackbarAdapter();\n\n return (\n \n \n adapter.create({\n timeout: 5000,\n onClose: () => {},\n render: () => {}} />,\n })\n }\n >\n 실행\n \n \n \n Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.\n \n \n \n );\n}\n\nexport default function SnackbarPreview() {\n return (\n \n \n \n );\n}", + "snackbar-danger": "import { ActionButton } from \"seed-design/ui/action-button\";\nimport { Snackbar, SnackbarProvider, useSnackbarAdapter } from \"seed-design/ui/snackbar\";\n\nfunction Component() {\n const adapter = useSnackbarAdapter();\n\n return (\n \n adapter.create({\n timeout: 5000,\n onClose: () => {},\n render: () => (\n {}}\n />\n ),\n })\n }\n >\n 실행\n \n );\n}\n\nexport default function SnackbarNegative() {\n return (\n \n \n \n );\n}", + "snackbar-positive": "import { ActionButton } from \"seed-design/ui/action-button\";\nimport { Snackbar, SnackbarProvider, useSnackbarAdapter } from \"seed-design/ui/snackbar\";\n\nfunction Component() {\n const adapter = useSnackbarAdapter();\n\n return (\n \n adapter.create({\n timeout: 5000,\n onClose: () => {},\n render: () => (\n {}}\n />\n ),\n })\n }\n >\n 실행\n \n );\n}\n\nexport default function SnackbarPositive() {\n return (\n \n \n \n );\n}", "snackbar-preview": "import { ActionButton } from \"seed-design/ui/action-button\";\nimport { Snackbar, SnackbarProvider, useSnackbarAdapter } from \"seed-design/ui/snackbar\";\n\nfunction Component() {\n const adapter = useSnackbarAdapter();\n\n return (\n \n adapter.create({\n timeout: 5000,\n onClose: () => {},\n render: () => {}} />,\n })\n }\n >\n 실행\n \n );\n}\n\nexport default function SnackbarPreview() {\n return (\n \n \n \n );\n}", "switch-disabled": "import { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchDisabled() {\n return (\n
\n \n \n
\n );\n}", "switch-medium": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchMedium() {\n const [isChecked, setIsChecked] = useState(false);\n\n return ;\n}", diff --git a/docs/components/example/snackbar-danger.tsx b/docs/components/example/snackbar-danger.tsx new file mode 100644 index 000000000..29d21c37d --- /dev/null +++ b/docs/components/example/snackbar-danger.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { ActionButton } from "seed-design/ui/action-button"; +import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar"; + +function Component() { + const adapter = useSnackbarAdapter(); + + return ( + + adapter.create({ + timeout: 50000000, + onClose: () => {}, + render: () => ( + {}} + /> + ), + }) + } + > + 실행 + + ); +} + +export default function SnackbarNegative() { + return ( + + + + ); +} diff --git a/docs/components/example/snackbar-positive.tsx b/docs/components/example/snackbar-positive.tsx new file mode 100644 index 000000000..d3fd07999 --- /dev/null +++ b/docs/components/example/snackbar-positive.tsx @@ -0,0 +1,37 @@ +"use client"; + +import { ActionButton } from "seed-design/ui/action-button"; +import { Snackbar, SnackbarProvider, useSnackbarAdapter } from "seed-design/ui/snackbar"; + +function Component() { + const adapter = useSnackbarAdapter(); + + return ( + + adapter.create({ + timeout: 5000, + onClose: () => {}, + render: () => ( + {}} + /> + ), + }) + } + > + 실행 + + ); +} + +export default function SnackbarPositive() { + return ( + + + + ); +} diff --git a/docs/content/docs/react/components/snackbar.mdx b/docs/content/docs/react/components/snackbar.mdx index d2b7fb1cb..e3b410c40 100644 --- a/docs/content/docs/react/components/snackbar.mdx +++ b/docs/content/docs/react/components/snackbar.mdx @@ -20,6 +20,14 @@ title: Snackbar ## 예제 +### Positive + + + +### Danger + + + ### Avoid Overlap `` 컴포넌트를 사용하여 스낵바가 겹치지 않아야 하는 영역을 지정할 수 있습니다. diff --git a/docs/registry/ui/snackbar.tsx b/docs/registry/ui/snackbar.tsx index 2193c9c0b..aa8cf9398 100644 --- a/docs/registry/ui/snackbar.tsx +++ b/docs/registry/ui/snackbar.tsx @@ -1,6 +1,7 @@ "use client"; import "@seed-design/stylesheet/snackbar.css"; +import "@seed-design/stylesheet/snackbarRegion.css"; import { Snackbar as SeedSnackbar, diff --git a/packages/qvism-preset/src/index.ts b/packages/qvism-preset/src/index.ts index 821edb944..58ae5dd7a 100644 --- a/packages/qvism-preset/src/index.ts +++ b/packages/qvism-preset/src/index.ts @@ -25,7 +25,7 @@ import screen from "./recipes/screen"; import segmentedControl from "./recipes/segmented-control"; import { selectBox, selectBoxGroup } from "./recipes/select-box"; import skeleton from "./recipes/skeleton"; -import snackbar from "./recipes/snackbar"; +import { snackbar, snackbarRegion } from "./recipes/snackbar"; import switchRecipe from "./recipes/switch"; import tab from "./recipes/tab"; import tabs from "./recipes/tabs"; @@ -70,6 +70,7 @@ const recipes = { chipTabs, skeleton, snackbar, + snackbarRegion, text, textButton, textField, diff --git a/packages/qvism-preset/src/recipes/snackbar.ts b/packages/qvism-preset/src/recipes/snackbar.ts index 91e66dc81..508531a75 100644 --- a/packages/qvism-preset/src/recipes/snackbar.ts +++ b/packages/qvism-preset/src/recipes/snackbar.ts @@ -4,11 +4,11 @@ import { enterAnimation, exitAnimation } from "../utils/animation"; const MAX_Z_INDEX = 2147483647; -const snackbar = defineRecipe({ - name: "snackbar", - slots: ["region", "root", "message", "prefixIcon", "actionButton"], +export const snackbarRegion = defineRecipe({ + name: "snackbarRegion", + slots: ["root"], base: { - region: { + root: { zIndex: MAX_Z_INDEX, display: "flex", flexDirection: "column", @@ -23,6 +23,15 @@ const snackbar = defineRecipe({ transitionDuration: vars.base.enabled.region.offsetDuration, transitionTimingFunction: vars.base.enabled.region.offsetTimingFunction, }, + }, + variants: {}, + defaultVariants: {}, +}); + +export const snackbar = defineRecipe({ + name: "snackbar", + slots: ["root", "message", "prefixIcon", "actionButton"], + base: { root: { boxSizing: "border-box", display: "flex", @@ -36,6 +45,7 @@ const snackbar = defineRecipe({ paddingInline: vars.base.enabled.root.paddingX, paddingBlock: vars.base.enabled.root.paddingY, minHeight: vars.base.enabled.root.minHeight, + gap: vars.base.enabled.root.gap, ...enterAnimation({ timingFunction: vars.base.enabled.root.enterTimingFunction, @@ -124,5 +134,3 @@ const snackbar = defineRecipe({ variant: "default", }, }); - -export default snackbar; diff --git a/packages/react/src/components/Snackbar/Snackbar.tsx b/packages/react/src/components/Snackbar/Snackbar.tsx index 8182a81e4..402c027d4 100644 --- a/packages/react/src/components/Snackbar/Snackbar.tsx +++ b/packages/react/src/components/Snackbar/Snackbar.tsx @@ -1,41 +1,36 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive"; import { Snackbar as SnackbarPrimitive } from "@seed-design/react-snackbar"; import { snackbar, type SnackbarVariantProps } from "@seed-design/recipe/snackbar"; +import { snackbarRegion } from "@seed-design/recipe/snackbarRegion"; import { visuallyHidden } from "@seed-design/recipe/visuallyHidden"; import clsx from "clsx"; import { forwardRef, useMemo } from "react"; import { createStyleContext } from "../../utils/createStyleContext"; import { Icon, type IconProps } from "../private/Icon"; -const { withRootProvider, withContext } = createStyleContext(snackbar); +const { withProvider: withRegionProvider } = createStyleContext(snackbarRegion); +const { withProvider, withContext } = createStyleContext(snackbar); //////////////////////////////////////////////////////////////////////////////////// export interface SnackbarRootProviderProps extends SnackbarPrimitive.RootProviderProps {} -export const SnackbarRootProvider = withRootProvider( - SnackbarPrimitive.RootProvider, - { - defaultProps: { - pauseOnInteraction: false, - }, - }, -); +export const SnackbarRootProvider = SnackbarPrimitive.RootProvider; //////////////////////////////////////////////////////////////////////////////////// export interface SnackbarRegionProps extends SnackbarVariantProps, SnackbarPrimitive.RegionProps {} -export const SnackbarRegion = withContext( +export const SnackbarRegion = withRegionProvider( SnackbarPrimitive.Region, - "region", + "root", ); //////////////////////////////////////////////////////////////////////////////////// export interface SnackbarRootProps extends SnackbarVariantProps, SnackbarPrimitive.RootProps {} -export const SnackbarRoot = withContext( +export const SnackbarRoot = withProvider( SnackbarPrimitive.Root, "root", ); diff --git a/packages/recipe/lib/snackbar.d.ts b/packages/recipe/lib/snackbar.d.ts index 9153e396c..cee9ed8a9 100644 --- a/packages/recipe/lib/snackbar.d.ts +++ b/packages/recipe/lib/snackbar.d.ts @@ -11,7 +11,7 @@ declare type SnackbarVariantMap = { export declare type SnackbarVariantProps = Partial; -export declare type SnackbarSlotName = "region" | "root" | "message" | "prefixIcon" | "actionButton"; +export declare type SnackbarSlotName = "root" | "message" | "prefixIcon" | "actionButton"; export declare const snackbarVariantMap: SnackbarVariantMap; diff --git a/packages/recipe/lib/snackbar.mjs b/packages/recipe/lib/snackbar.mjs index a9adfce60..2da4f18d8 100644 --- a/packages/recipe/lib/snackbar.mjs +++ b/packages/recipe/lib/snackbar.mjs @@ -3,10 +3,6 @@ import { mergeVariants } from "./mergeVariants.mjs"; import { splitVariantProps } from "./splitVariantProps.mjs"; const snackbarSlotNames = [ - [ - "region", - "snackbar__region" - ], [ "root", "snackbar__root" diff --git a/packages/recipe/lib/snackbarRegion.d.ts b/packages/recipe/lib/snackbarRegion.d.ts new file mode 100644 index 000000000..c7f72b720 --- /dev/null +++ b/packages/recipe/lib/snackbarRegion.d.ts @@ -0,0 +1,21 @@ +declare interface SnackbarRegionVariant { + +} + +declare type SnackbarRegionVariantMap = { + [key in keyof SnackbarRegionVariant]: Array; +}; + +export declare type SnackbarRegionVariantProps = Partial; + +export declare type SnackbarRegionSlotName = "root"; + +export declare const snackbarRegionVariantMap: SnackbarRegionVariantMap; + +export declare const snackbarRegion: (( + props?: SnackbarRegionVariantProps, +) => Record) & { + splitVariantProps: ( + props: T, + ) => [SnackbarRegionVariantProps, Omit]; +} \ No newline at end of file diff --git a/packages/recipe/lib/snackbarRegion.mjs b/packages/recipe/lib/snackbarRegion.mjs new file mode 100644 index 000000000..4dbf9e5b3 --- /dev/null +++ b/packages/recipe/lib/snackbarRegion.mjs @@ -0,0 +1,31 @@ +import { createClassName } from "./className.mjs"; +import { mergeVariants } from "./mergeVariants.mjs"; +import { splitVariantProps } from "./splitVariantProps.mjs"; + +const snackbarRegionSlotNames = [ + [ + "root", + "snackbarRegion__root" + ] +]; + +const defaultVariant = {}; + +const compoundVariants = []; + +export const snackbarRegionVariantMap = {}; + +export const snackbarRegionVariantKeys = Object.keys(snackbarRegionVariantMap); + +export function snackbarRegion(props) { + return Object.fromEntries( + snackbarRegionSlotNames.map(([slot, className]) => { + return [ + slot, + createClassName(className, mergeVariants(defaultVariant, props), compoundVariants), + ]; + }), + ); +} + +Object.assign(snackbarRegion, { splitVariantProps: (props) => splitVariantProps(props, snackbarRegionVariantMap) }); \ No newline at end of file diff --git a/packages/rootage/components/snackbar.yaml b/packages/rootage/components/snackbar.yaml index a2af44a51..c48a22a38 100644 --- a/packages/rootage/components/snackbar.yaml +++ b/packages/rootage/components/snackbar.yaml @@ -6,6 +6,7 @@ metadata: data: base: enabled: + # TODO: we might split region out to a separate component region: paddingX: $unit.s2 paddingY: $unit.s2 diff --git a/packages/stylesheet/snackbar.css b/packages/stylesheet/snackbar.css index dc662ba03..c25adb70c 100644 --- a/packages/stylesheet/snackbar.css +++ b/packages/stylesheet/snackbar.css @@ -1,17 +1,3 @@ -.snackbar__region { - z-index: 2147483647; - display: flex; - flex-direction: column; - align-items: center; - left: calc(env(safe-area-inset-left, 0px)); - right: calc(env(safe-area-inset-right, 0px)); - bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px)); - padding-inline: var(--seed-v3-unit-s2); - padding-block: var(--seed-v3-unit-s2); - transition-property: bottom; - transition-duration: var(--seed-v3-duration-s4); - transition-timing-function: var(--seed-v3-timing-function-easing); -} .snackbar__root { box-sizing: border-box; display: flex; @@ -23,6 +9,7 @@ padding-inline: var(--seed-v3-unit-s4); padding-block: var(--seed-v3-unit-s2_5); min-height: 44px; + gap: var(--seed-v3-unit-s2); animation: seed-enter; animation-timing-function: var(--seed-v3-timing-function-enter); animation-duration: var(--seed-v3-duration-s4); diff --git a/packages/stylesheet/snackbarRegion.css b/packages/stylesheet/snackbarRegion.css new file mode 100644 index 000000000..3701a808d --- /dev/null +++ b/packages/stylesheet/snackbarRegion.css @@ -0,0 +1,14 @@ +.snackbarRegion__root { + z-index: 2147483647; + display: flex; + flex-direction: column; + align-items: center; + left: calc(env(safe-area-inset-left, 0px)); + right: calc(env(safe-area-inset-right, 0px)); + bottom: calc(env(safe-area-inset-bottom, 0px) + var(--snackbar-region-offset, 0px)); + padding-inline: var(--seed-v3-unit-s2); + padding-block: var(--seed-v3-unit-s2); + transition-property: bottom; + transition-duration: var(--seed-v3-duration-s4); + transition-timing-function: var(--seed-v3-timing-function-easing) +} \ No newline at end of file