shkim4
da0e647b49
Drop the category kicker from the 83 sidebar Stories (kicker is now optional; hidden verification Stories keep it) and shorten or remove repeated, obvious or internal page/section descriptions. Required specs, limits, virtual-data and undecided-value notices stay. Story IDs, exports, fixtures, shared state notes and package code are unchanged. Record: docs/reports/storybook-ui-simplification-2026-10-22.md
79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@hm-design/ui"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// Hover Card is a Radix overlay (Portal) for a richer preview than Tooltip. The representative Story shows real triggers
|
|
// (hover or focus to open); the verification Story starts one open. Radix owns the open / close delay and the hover bridge.
|
|
|
|
const longText = "긴 콘텐츠는 카드 폭에서 줄바꿈되고 카드 높이만 늘어납니다. 공백 없는 긴 문자열도 폭을 밀어내지 않습니다. ".repeat(4)
|
|
|
|
function Preview({ defaultOpen }: { defaultOpen?: boolean }) {
|
|
return (
|
|
<HoverCard defaultOpen={defaultOpen}>
|
|
<HoverCardTrigger asChild>
|
|
<a href="#preview" className="text-sm font-medium text-primary underline underline-offset-4">
|
|
한맥 프로젝트
|
|
</a>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent>
|
|
<div className="grid gap-1">
|
|
<p className="font-bold">한맥 프로젝트</p>
|
|
<p>노선과 시설물 정보를 관리하는 프로젝트입니다.</p>
|
|
<p className="pt-1 text-xs text-muted-foreground">담당 김한맥 · 최근 수정 2026-10-02</p>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
)
|
|
}
|
|
|
|
function LongContent() {
|
|
return (
|
|
<HoverCard>
|
|
<HoverCardTrigger asChild>
|
|
<a href="#long" className="text-sm font-medium text-primary underline underline-offset-4">
|
|
긴 콘텐츠
|
|
</a>
|
|
</HoverCardTrigger>
|
|
<HoverCardContent>
|
|
<div className="grid gap-1">
|
|
<p className="font-bold">긴 콘텐츠</p>
|
|
<p>{longText}</p>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCard>
|
|
)
|
|
}
|
|
|
|
const meta = { title: "Components/Overlay/Hover Card", component: HoverCard, parameters: { layout: "centered" } } satisfies Meta<typeof HoverCard>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const All: Story = {
|
|
name: "Hover Card",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader
|
|
title="Hover Card"
|
|
description="링크 hover / focus 시 미리보기"
|
|
/>
|
|
<StorySection title="Overview">
|
|
<Preview />
|
|
</StorySection>
|
|
<StorySection title="Usage" description="카드 폭 고정 · 높이만 늘어남">
|
|
<LongContent />
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const Open: Story = {
|
|
tags: ["verification"],
|
|
parameters: { layout: "fullscreen" },
|
|
render: () => (
|
|
<div className="flex min-h-[260px] justify-center p-8">
|
|
<Preview defaultOpen />
|
|
</div>
|
|
),
|
|
}
|