shkim4
4c29894e56
Drop page / section descriptions, state notes and repeated captions from the representative Stories of 44 components, the Patterns, Center Graphic and OrgChart pages. Value readouts, spec lists and captions hide only on the representative page; hidden verification Stories keep them. Tabs Default API and the Filter Bar draft / applied counts move to the hidden DefaultApi and DraftApplied Stories; Center Overview is hidden with its direct URL kept. Story IDs are unchanged. Align the component, pattern and OrgChart docs with the pages, point the quality reference check at the DraftApplied Story, and make the P8 styles check expect no section header on the preview-only Expanded page.
75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { Card, CardContent, CardHeader, Skeleton } from "@hm-design/ui"
|
|
import { StateBoard } from "@/components/story-board"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// Skeleton is a visual placeholder; size and shape come from `className` (layout classes here are Story composition).
|
|
// There is no data fetching. The representative Story shows text lines, an avatar, and a card / list loading composition.
|
|
|
|
function TextLines() {
|
|
return (
|
|
<div className="grid gap-2">
|
|
<Skeleton className="h-4 w-3/4" />
|
|
<Skeleton className="h-4 w-full" />
|
|
<Skeleton className="h-4 w-1/2" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function AvatarRow() {
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<Skeleton className="size-10 rounded-full" />
|
|
<div className="grid flex-1 gap-2">
|
|
<Skeleton className="h-4 w-1/3" />
|
|
<Skeleton className="h-3 w-2/3" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function CardLoading() {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<Skeleton className="h-5 w-1/2" />
|
|
</CardHeader>
|
|
<CardContent className="grid gap-3">
|
|
<Skeleton className="h-24 w-full" />
|
|
<AvatarRow />
|
|
<AvatarRow />
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|
|
|
|
const sections = [
|
|
{ id: "text", label: "Text", node: <TextLines /> },
|
|
{ id: "avatar", label: "Avatar + text", node: <AvatarRow /> },
|
|
{ id: "card", label: "Card / list loading", node: <CardLoading /> },
|
|
]
|
|
|
|
const meta = { title: "Components/Data & Display/Skeleton", component: Skeleton, parameters: { layout: "padded" } } satisfies Meta<typeof Skeleton>
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
const board = (...ids: string[]) => (
|
|
<StateBoard min={320} 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.
|
|
export const All: Story = {
|
|
name: "Skeleton",
|
|
parameters: { layout: "fullscreen", controls: { disable: true } },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Skeleton" />
|
|
<StorySection title="Overview">{board("text")}</StorySection>
|
|
<StorySection title="Usage">{board("avatar", "card")}</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
|
|
export const Text: Story = { tags: ["verification"], render: () => <TextLines /> }
|
|
export const CardList: Story = { tags: ["verification"], name: "Card List", render: () => <CardLoading /> }
|