shkim4/HMDesign
Private
Public Access
1
0 Fork 0
Code Activity

style(storybook): unify page hierarchy and compact layouts

Browse Source
This commit is contained in:
shkim4 committed 2026-11-11 11:28:58 +09:00
1 parent cda60840d8
commit ff55a805d5
21 files changed
+115 -85
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/chart/area-chart.stories.tsx
+3 -3
View File
@@ -9,7 +9,7 @@ import {
AreaStraightColorLabelExample,
AreaStraightExample,
} from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
// Sample data only. The eight examples share the Line Chart data: connection styles as a plain area (left) and with Dots and
// value Labels (right), then Stacked (running total) and Expanded (each month normalized to 100%).
@@ -26,7 +26,7 @@ export const Area: Story = {
<StoryPage>
<StoryPageHeader title="Area Chart" />
{/* Same grid and order as Line Chart, plus a Stacked | Expanded row. */}
<div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySectionGrid className="grid-cols-1 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySection title="Curve">
<AreaCurveExample />
</StorySection>
@@ -51,7 +51,7 @@ export const Area: Story = {
<StorySection title="Expanded">
<AreaExpandedExample />
</StorySection>
</div>
</StorySectionGrid>
</StoryPage>
),
}
src/chart/bar-chart.stories.tsx
+3 -3
View File
@@ -5,7 +5,7 @@ import {
SignedBarChartExample,
StackedBarChartExample,
} from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
// shadcn/ui Chart (Recharts) with HM tokens, from the public @hm-design/chart entries. All values are sample data.
// Narrow widths: use the toolbar Viewport presets (HM Mobile · 390). The chart is fluid.
@@ -24,7 +24,7 @@ export const Bar: Story = {
{/* Two sections per row from 1024px (HM desktop boundary), one below. Source order is the mobile order; on desktop it reads
row by row: Grouped | Horizontal, then Stacked | Positive / Negative. On desktop every row has the same height and each
card fills its section, so card tops, bottoms and chart areas line up. */}
<div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySectionGrid className="grid-cols-1 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySection title="Grouped">
<BarChartExample />
</StorySection>
@@ -37,7 +37,7 @@ export const Bar: Story = {
<StorySection title="Positive / Negative">
<SignedBarChartExample />
</StorySection>
</div>
</StorySectionGrid>
</StoryPage>
),
}
src/chart/donut-chart.stories.tsx
+6 -6
View File
@@ -6,7 +6,7 @@ import {
DonutPlainExample,
DonutSolidExample,
} from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
// Sample data only. The four examples share one data set, color mapping and item order.
const meta = {
@@ -22,11 +22,11 @@ export const Donut: Story = {
<StoryPage>
<StoryPageHeader title="Donut Chart" />
{/* Same grid as Bar and Line Chart: two per row from 1024px, one below; source order is the mobile order. */}
<div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySection title="기본형">
<StorySectionGrid className="grid-cols-1 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySection title="Basic">
<DonutPlainExample />
</StorySection>
<StorySection title="기본형 + 텍스트">
<StorySection title="Basic · Center Text">
<DonutCenterExample />
</StorySection>
<StorySection title="Active">
@@ -35,10 +35,10 @@ export const Donut: Story = {
<StorySection title="Interactive">
<DonutInteractiveExample />
</StorySection>
<StorySection title="입체형">
<StorySection title="Solid">
<DonutSolidExample />
</StorySection>
</div>
</StorySectionGrid>
</StoryPage>
),
}
src/chart/line-chart.stories.tsx
+3 -3
View File
@@ -7,7 +7,7 @@ import {
LineStraightColorLabelExample,
LineStraightExample,
} from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
// Sample data only. All six examples share one data set and axis range, so connection styles compare directly: curve, straight
// and step, each as a plain line (left) and with Dots and value labels (right).
@@ -25,7 +25,7 @@ export const Line: Story = {
<StoryPageHeader title="Line Chart" />
{/* Same grid as Bar Chart: two per row from 1024px, one below. Source order is the mobile order; desktop reads row by row:
Curve | Curve + labels, Straight | Straight + colored labels, Step | Step + labels. */}
<div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySectionGrid className="grid-cols-1 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySection title="Curve">
<LineCurveExample />
</StorySection>
@@ -44,7 +44,7 @@ export const Line: Story = {
<StorySection title="Step · Dot + Label">
<LineStepDotLabelExample />
</StorySection>
</div>
</StorySectionGrid>
</StoryPage>
),
}
src/chart/pie-chart.stories.tsx
+8 -8
View File
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react-vite"
import { PieLabelExample, PieLabelListExample, PiePlainExample, PieSolidExample, PieStackedExample } from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
// Sample data only. All pies share one item list and color mapping; the stacked pie draws two series as concentric rings.
const meta = {
@@ -16,23 +16,23 @@ export const Pie: Story = {
<StoryPage>
<StoryPageHeader title="Pie Chart" />
{/* Same grid as Bar, Line and Donut Chart: two per row from 1024px, one below; source order is the mobile order. */}
<div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySection title="기본 Pie">
<StorySectionGrid className="grid-cols-1 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySection title="Basic">
<PiePlainExample />
</StorySection>
<StorySection title="Pie + Label">
<StorySection title="Label">
<PieLabelExample />
</StorySection>
<StorySection title="Pie + Label List">
<StorySection title="Label List">
<PieLabelListExample />
</StorySection>
<StorySection title="Pie + Stacked">
<StorySection title="Stacked">
<PieStackedExample />
</StorySection>
<StorySection title="입체형">
<StorySection title="Solid">
<PieSolidExample />
</StorySection>
</div>
</StorySectionGrid>
</StoryPage>
),
}
src/chart/radar-chart.stories.tsx
+7 -7
View File
@@ -1,6 +1,6 @@
import type { Meta, StoryObj } from "@storybook/react-vite"
import { RadarCustomLabelExample, RadarDotExample, RadarLinesOnlyExample, RadarPlainExample } from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
// Sample data only. All radars share one data set (six axes, two series) and the 0-100 axis range.
const meta = {
@@ -16,20 +16,20 @@ export const Radar: Story = {
<StoryPage>
<StoryPageHeader title="Radar Chart" />
{/* Same grid as the other Chart pages: two per row from 1024px, one below. */}
<div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySection title="Radar">
<StorySectionGrid className="grid-cols-1 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySection title="Basic">
<RadarPlainExample />
</StorySection>
<StorySection title="Radar + Dot">
<StorySection title="Dot">
<RadarDotExample />
</StorySection>
<StorySection title="Radar + Lines Only">
<StorySection title="Lines Only">
<RadarLinesOnlyExample />
</StorySection>
<StorySection title="Radar + Custom Label">
<StorySection title="Custom Label">
<RadarCustomLabelExample />
</StorySection>
</div>
</StorySectionGrid>
</StoryPage>
),
}
src/chart/radial-chart.stories.tsx
+9 -9
View File
@@ -7,7 +7,7 @@ import {
RadialStackedExample,
RadialTextExample,
} from "@hm-design/chart/examples"
import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page"
// Sample data only. One example per official shadcn/ui radial chart (radial-simple, -label, -grid, -text, -shape, -stacked).
const meta = {
@@ -23,26 +23,26 @@ export const Radial: Story = {
<StoryPage>
<StoryPageHeader title="Radial Chart" />
{/* Same grid as the other Chart pages: two per row from 1024px, one below; source order is the mobile order. */}
<div className="grid grid-cols-1 gap-x-6 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySection title="Radial Chart">
<StorySectionGrid className="grid-cols-1 lg:auto-rows-fr lg:grid-cols-2 *:flex *:min-w-0 *:flex-col [&_.sb-page-section-body]:flex-1">
<StorySection title="Basic">
<RadialSimpleExample />
</StorySection>
<StorySection title="Radial Chart + Label">
<StorySection title="Label">
<RadialLabelExample />
</StorySection>
<StorySection title="Radial Chart - Grid">
<StorySection title="Grid">
<RadialGridExample />
</StorySection>
<StorySection title="Radial Chart + Text">
<StorySection title="Text">
<RadialTextExample />
</StorySection>
<StorySection title="Radial Chart - Shape">
<StorySection title="Shape">
<RadialShapeExample />
</StorySection>
<StorySection title="Radial Chart + Stacked">
<StorySection title="Stacked">
<RadialStackedExample />
</StorySection>
</div>
</StorySectionGrid>
</StoryPage>
),
}