58 lines
2.5 KiB
TypeScript
58 lines
2.5 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 { STORY_KICKER, 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
|
|
kicker={STORY_KICKER.patterns}
|
|
title="Loading Screen"
|
|
description="Dashboard 안에서 데이터를 불러오는 동안 표시하는 화면입니다. Inline은 부모 영역을 채우고, fullscreen은 viewport 전체를 덮습니다."
|
|
/>
|
|
<StorySection title="Overview" description="Inline: 부모 영역(여기서는 공통 Inner 폭)을 채웁니다.">
|
|
<LoadingScreen />
|
|
</StorySection>
|
|
<StorySection title="Variants" description="사용자 문구와 좁은 부모 영역입니다.">
|
|
<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" description="fullscreen은 viewport 전체를 덮습니다. 버튼으로 열고 오른쪽 위 닫기로 닫습니다.">
|
|
<Fullscreen />
|
|
</StorySection>
|
|
</StoryPage>
|
|
),
|
|
}
|
|
export const Inline: Story = { tags: ["verification"], render: () => <LoadingScreen /> }
|