feat(org-chart): separate fixed and auto layout previews

src/org-chart/org-chart-expanded.stories.tsx

@@ -0,0 +1,39 @@
+import { StrictMode, useId, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@hm-design/ui';
+import { OrgChart } from '@hm-design/org-chart-react';
+import { companyColorPresets, getCompanyColorPreset, JsonOrgChartDataSource } from '@hm-design/org-chart';
+import engineUrl from '@hm-design/org-chart/engine.css?url';
+import coreUrl from '@hm-design/org-chart/style.css?url';
+import expandedFixture from '../../examples/org-chart/data-expanded.json';
+import './org-chart-stories.css';
+
+const expandedSource = new JsonOrgChartDataSource(expandedFixture);
+const compositionStylesheets = { engine: engineUrl, core: coreUrl };
+
+/** P5-1A establishes the Core rendering boundary and initial 1Depth groups.
+ * Automatic hierarchy placement belongs to P5-1B; this host owns no layout. */
+function ExpandedPreview() {
+  const id = useId();
+  const [companyId, setCompanyId] = useState('hanmac');
+  const preset = getCompanyColorPreset(companyId);
+  return <section className="hm-orgchart-story" aria-label="Expanded OrgChart · P5-1A">
+    <p className="hm-orgchart-story-note"><strong>P5-1A · 확장형 조직도 초기 화면</strong> — 대표자와 예시 1Depth 그룹, 기존 카드 및 회사 컬러 프리셋을 표시합니다. 자동 계층 배치·재계산은 P5-1B, 접기·펼치기와 Zoom/Pan은 후속 작업입니다. 모든 직원 정보는 가상 데이터입니다.</p>
+    <div className="hm-orgchart-story-controls">
+      <div className="hm-orgchart-story-instance">
+        <Label id={`${id}-company-label`} htmlFor={`${id}-company`}>회사별 컬러 테마</Label>
+        <Select value={companyId} onValueChange={setCompanyId}>
+          <SelectTrigger id={`${id}-company`} aria-labelledby={`${id}-company-label`} size="medium"><SelectValue /></SelectTrigger>
+          <SelectContent>{Object.values(companyColorPresets).map(company => <SelectItem key={company.companyId} value={company.companyId}>{company.companyName}</SelectItem>)}</SelectContent>
+        </Select>
+      </div>
+    </div>
+    {preset && <p className="hm-orgchart-story-note" aria-live="polite">{preset.companyName} · Main {preset.primary} · 보조 컬러 {preset.secondary.length ? preset.secondary.join(', ') : '등록 없음'}</p>}
+    <OrgChart dataSource={expandedSource} stylesheetUrls={compositionStylesheets} displayMode="readOnly" layoutMode="auto" companyId={companyId} className="hm-orgchart-story-chart" />
+  </section>;
+}
+
+const meta = { title: 'OrgChart', component: ExpandedPreview, parameters: { layout: 'padded', controls: { disable: true } }, decorators: [(Story) => <StrictMode><Story /></StrictMode>] } satisfies Meta<typeof ExpandedPreview>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const ExpandedOrgChart: Story = { name: 'Expanded OrgChart' };