style(storybook): group overlay, disclosure and navigation story pages
- Sheet + Drawer, Tooltip + Hover Card, Accordion + Collapsible, Dialog + Alert Dialog, Dropdown Menu + Context Menu on one page each (specimens moved to *-examples.tsx; absorbed Stories keep their IDs) - Popover, Tabs content spacing, Breadcrumb, Menubar and Command tidied - Component docs updated to the new representative pages
This commit is contained in:
shkim4 committed
1 parent
71d504407d
commit
bad2acfc49
35 files changed
+649
-521
No files matched your search
@@ -1,101 +1,26 @@
|
||||
import { useState, type ReactNode } from "react"
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite"
|
||||
import { ChevronDownIcon } from "lucide-react"
|
||||
import { Button, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@hm-design/ui"
|
||||
import { StateBoard, type BoardState } from "@/components/story-board"
|
||||
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
||||
import { Collapsible } from "@hm-design/ui"
|
||||
import { StoryPage, StoryPageHeader } from "@/components/story-page"
|
||||
import { ClosedSpecimen, CollapsibleSections, DisabledSpecimen, LongSpecimen, OpenSpecimen } from "./collapsible-examples"
|
||||
|
||||
// The representative "Collapsible" Story shows one independent disclosure per state with real, clickable triggers. The same
|
||||
// sections also exist as Stories tagged `verification` (hidden from the sidebar). Collapsible is a single disclosure: no divider
|
||||
// system and no animation.
|
||||
|
||||
const longText = "긴 텍스트는 줄바꿈으로 전체를 표시합니다. 공백 없는 긴 문자열도 너비를 밀어내지 않고 줄바꿈합니다. ".repeat(6)
|
||||
|
||||
const narrow = (children: ReactNode) => <div className="w-full max-w-md">{children}</div>
|
||||
|
||||
function Frame({ label, defaultOpen, disabled, children }: { label: string; defaultOpen?: boolean; disabled?: boolean; children: ReactNode }) {
|
||||
return narrow(
|
||||
<Collapsible defaultOpen={defaultOpen} disabled={disabled}>
|
||||
<CollapsibleTrigger>
|
||||
{label}
|
||||
<ChevronDownIcon aria-hidden />
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>{children}</CollapsibleContent>
|
||||
</Collapsible>
|
||||
)
|
||||
}
|
||||
|
||||
const ClosedSpecimen = () => <Frame label="고급 설정 보기">추가 옵션이 여기에 표시됩니다.</Frame>
|
||||
const OpenSpecimen = () => (
|
||||
<Frame label="고급 설정 보기" defaultOpen>
|
||||
처음부터 열려 있는 영역입니다.
|
||||
</Frame>
|
||||
)
|
||||
const DisabledSpecimen = () => (
|
||||
<Frame label="비활성 영역" disabled>
|
||||
열 수 없습니다.
|
||||
</Frame>
|
||||
)
|
||||
const LongSpecimen = () => (
|
||||
<Frame label="긴 콘텐츠" defaultOpen>
|
||||
<p>{longText}</p>
|
||||
<p className="mt-2">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
|
||||
</Frame>
|
||||
)
|
||||
|
||||
// Controlled: the parent owns `open`; an HM Button is the trigger through asChild and keeps its style.
|
||||
function ControlledSpecimen() {
|
||||
const [open, setOpen] = useState(false)
|
||||
return narrow(
|
||||
<Collapsible open={open} onOpenChange={setOpen}>
|
||||
<CollapsibleTrigger asChild>
|
||||
<Button variant="primary" appearance="outline">
|
||||
{open ? "접기" : "펼치기"}
|
||||
</Button>
|
||||
</CollapsibleTrigger>
|
||||
<CollapsibleContent>{`controlled: open = ${String(open)}`}</CollapsibleContent>
|
||||
</Collapsible>
|
||||
)
|
||||
}
|
||||
|
||||
const sections = [
|
||||
{ id: "closed", label: "Closed", node: <ClosedSpecimen /> },
|
||||
{ id: "open", label: "Open", node: <OpenSpecimen /> },
|
||||
{ id: "disabled", label: "Disabled", node: <DisabledSpecimen /> },
|
||||
{ id: "long", label: "Long Content", node: <LongSpecimen /> },
|
||||
{ id: "controlled", label: "Button trigger", node: <ControlledSpecimen /> },
|
||||
]
|
||||
// Collapsible is a single disclosure. The specimens live in ./collapsible-examples and are also shown on the Accordion
|
||||
// representative page ("접기·펼치기"), the single sidebar item for both. Every Story here keeps its ID and direct URL but is
|
||||
// hidden from the sidebar (tag `verification`).
|
||||
|
||||
const meta = { title: "Components/Disclosure/Collapsible", component: Collapsible, parameters: { layout: "padded" } } satisfies Meta<typeof Collapsible>
|
||||
export default meta
|
||||
type Story = StoryObj<typeof meta>
|
||||
|
||||
// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), one column
|
||||
// below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so the title, divider and
|
||||
// specimen start line up, unused columns stay empty and `items-start` lets an opened item grow without touching its neighbors.
|
||||
function StateGrid({ states, cols }: { states: BoardState[]; cols: 2 | 3 }) {
|
||||
return (
|
||||
<div className={`grid grid-cols-1 items-start gap-6 ${cols === 3 ? "min-[1000px]:grid-cols-3" : "min-[1000px]:grid-cols-2"}`}>
|
||||
{states.map((state) => (
|
||||
<StateBoard key={state.id} min={10000} states={[state]} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const board = (cols: 2 | 3, ...ids: string[]) => (
|
||||
<StateGrid cols={cols} states={sections.filter((s) => ids.includes(s.id)).map((s) => ({ id: s.id, label: s.label, children: s.node }))} />
|
||||
)
|
||||
|
||||
// Representative Story: the common Story page; the sections group the same specimens.
|
||||
// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Accordion
|
||||
// page shows the same sections.
|
||||
export const All: Story = {
|
||||
tags: ["verification"],
|
||||
name: "Collapsible",
|
||||
parameters: { layout: "fullscreen", controls: { disable: true } },
|
||||
render: () => (
|
||||
<StoryPage>
|
||||
<StoryPageHeader title="Collapsible" />
|
||||
<StorySection title="States">{board(3, "closed", "open", "disabled")}</StorySection>
|
||||
<StorySection title="Usage">{board(3, "long", "controlled")}</StorySection>
|
||||
<CollapsibleSections />
|
||||
</StoryPage>
|
||||
),
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user