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.
54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { useState } from "react"
|
|
import type { Meta, StoryObj } from "@storybook/react-vite"
|
|
import { Button, LoadingScreen } from "@hm-design/ui"
|
|
import { StateBoard } from "@/components/story-board"
|
|
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
|
|
|
|
// Loading Screen is a Dashboard-local pattern (ui-viz LoadingScreen). Inline fills its parent; fullscreen covers the viewport. The
|
|
// fullscreen demo is mounted and removed by local state only; there is no async task, cancel or close control in the pattern.
|
|
|
|
function Fullscreen() {
|
|
const [open, setOpen] = useState(false)
|
|
return (
|
|
<>
|
|
<Button appearance="outline" onClick={() => setOpen(true)}>전체화면 미리보기</Button>
|
|
{open ? (
|
|
<>
|
|
<LoadingScreen fullscreen>데이터를 불러오는 중</LoadingScreen>
|
|
<Button className="fixed top-7 right-7 z-[10000]" onClick={() => setOpen(false)}>닫기</Button>
|
|
</>
|
|
) : null}
|
|
</>
|
|
)
|
|
}
|
|
|
|
const meta = { title: "Patterns/Layout/Loading Screen", parameters: { layout: "padded", controls: { disable: true } } } satisfies Meta
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
// The inline specimen fills its parent inside the common page Inner.
|
|
export const All: Story = {
|
|
name: "Loading Screen",
|
|
parameters: { layout: "fullscreen" },
|
|
render: () => (
|
|
<StoryPage>
|
|
<StoryPageHeader title="Loading Screen" />
|
|
<StorySection title="Overview">
|
|
<LoadingScreen />
|
|
</StorySection>
|
|
<StorySection title="Variants">
|
|
<StateBoard
|
|
states={[
|
|
{ id: "label", label: "Custom label", children: <LoadingScreen>데이터를 불러오는 중</LoadingScreen> },
|
|
{ id: "narrow", label: "Narrow parent (240px)", children: <div style={{ width: 240 }}><LoadingScreen /></div> },
|
|
]}
|
|
/>
|
|
</StorySection>
|
|
<StorySection title="Usage">
|
|
<Fullscreen />
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
export const Inline: Story = { tags: ["verification"], render: () => <LoadingScreen /> }
|