Initial commit: HMDesignSystem baseline

src/components/tooltip.stories.tsx

@@ -0,0 +1,109 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@hm-design/ui"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Tooltip is a Radix overlay (Portal) with short, non-interactive text. The representative Story shows real triggers
+// (hover or focus to open); the verification Story starts one open. Interactive content belongs in Popover / Hover Card.
+
+const longText = "긴 설명은 최대 폭에서 줄바꿈됩니다. 이 정도 길이가 Tooltip의 한계이며, 더 긴 내용은 Popover나 Hover Card를 사용합니다."
+
+function Basic({ defaultOpen }: { defaultOpen?: boolean }) {
+  return (
+    <Tooltip defaultOpen={defaultOpen}>
+      <TooltipTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          기본
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>저장하지 않은 변경 사항이 있습니다</TooltipContent>
+    </Tooltip>
+  )
+}
+
+function Placements() {
+  return (
+    <div className="flex flex-wrap gap-3">
+      {(["top", "right", "bottom", "left"] as const).map((side) => (
+        <Tooltip key={side}>
+          <TooltipTrigger asChild>
+            <Button variant="primary" appearance="outline" size="sm">
+              {side}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side={side}>{`side="${side}"`}</TooltipContent>
+        </Tooltip>
+      ))}
+    </div>
+  )
+}
+
+function LongText() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="primary" appearance="outline">
+          긴 텍스트
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>{longText}</TooltipContent>
+    </Tooltip>
+  )
+}
+
+function Disabled() {
+  // A disabled button gets no pointer events, so the trigger is a wrapper element.
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <span tabIndex={0} className="inline-block">
+          <Button variant="primary" appearance="solid" disabled>
+            비활성
+          </Button>
+        </span>
+      </TooltipTrigger>
+      <TooltipContent>권한이 없어 사용할 수 없습니다</TooltipContent>
+    </Tooltip>
+  )
+}
+
+const meta = { title: "Components/Overlay/Tooltip", component: Tooltip, parameters: { layout: "centered" } } satisfies Meta<typeof Tooltip>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Tooltip",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <TooltipProvider>
+      <StoryPage>
+        <StoryPageHeader
+          kicker={STORY_KICKER.components}
+          title="Tooltip"
+          description="짧고 상호작용 없는 설명을 띄우는 overlay입니다. Trigger에 포인터를 올리거나 포커스하면 열립니다."
+        />
+        <StorySection title="Overview" description="기본 Tooltip입니다.">
+          <Basic />
+        </StorySection>
+        <StorySection title="Variants" description="side: top / right / bottom / left.">
+          <Placements />
+        </StorySection>
+        <StorySection title="Usage" description="긴 문구는 줄바꿈됩니다. Disabled 버튼은 포인터 이벤트가 없으므로 감싼 요소를 Trigger로 씁니다.">
+          <div className="flex flex-wrap gap-3">
+            <LongText />
+            <Disabled />
+          </div>
+        </StorySection>
+      </StoryPage>
+    </TooltipProvider>
+  ),
+}
+
+export const Open: Story = {
+  tags: ["verification"],
+  parameters: { layout: "fullscreen" },
+  render: () => (
+    <div className="flex min-h-[200px] items-end justify-center p-8">
+      <Basic defaultOpen />
+    </div>
+  ),
+}