feat(org-chart): add core cards and fixed-layout integration

examples/org-chart-react/app.tsx

@@ -0,0 +1,91 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { OrgChart, type OrgChartProps } from '@hm-design/org-chart-react';
+import { JsonOrgChartDataSource, type OrgChartDataSource, type OrgChartState } 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 v1 from '../org-chart/data-v1.json';
+import v2 from '../org-chart/data-v2.json';
+import './index.css';
+
+// An independent production-built consumer of public package entries. This
+// inspection seam exercises React Props only; it never reaches into the engine.
+const events: { instance: string; callback: number; state: OrgChartState }[] = [];
+const lifecycleErrors: string[] = [];
+const requests: Record<string, { loads: number; aborts: number }> = {};
+function track(name: string, source: OrgChartDataSource): OrgChartDataSource {
+  requests[name] = { loads: 0, aborts: 0 };
+  return {
+    load(options) {
+      requests[name].loads++;
+      options?.signal?.addEventListener('abort', () => { requests[name].aborts++; }, { once: true });
+      return source.load(options);
+    },
+  };
+}
+const noEmployees = structuredClone(v1);
+noEmployees.employees = [];
+for (const organization of noEmployees.organizations) organization.leaderId = null;
+const noOrganizations = structuredClone(v1);
+noOrganizations.organizations = [];
+const sources = {
+  v1: track('v1', new JsonOrgChartDataSource(v1)),
+  v2: track('v2', new JsonOrgChartDataSource(v2)),
+  zeroEmployees: track('zeroEmployees', new JsonOrgChartDataSource(noEmployees)),
+  zeroOrganizations: track('zeroOrganizations', new JsonOrgChartDataSource(noOrganizations)),
+  error: track('error', { async load() { throw new Error('Fictitious source failure'); } }),
+};
+let releaseSlow: (() => void) | undefined;
+const slowSource = track('slow', {
+  load() { return new Promise(resolve => { releaseSlow = () => resolve(structuredClone(v1)); }); },
+});
+type Configuration = {
+  sourceA: OrgChartDataSource;
+  sourceB: OrgChartDataSource;
+  mountedA: boolean;
+  mountedB: boolean;
+  callback: number;
+  aggregationPolicy: OrgChartProps['aggregationPolicy'];
+  stylesheetUrls: OrgChartProps['stylesheetUrls'];
+  className: string;
+};
+let configuration: Configuration = {
+  sourceA: sources.v1, sourceB: sources.v2, mountedA: true, mountedB: false,
+  callback: 1, aggregationPolicy: undefined,
+  stylesheetUrls: { engine: engineUrl, core: coreUrl }, className: 'consumer-chart',
+};
+const root = createRoot(document.getElementById('root')!);
+function render(patch: Partial<Configuration> = {}) {
+  configuration = { ...configuration, ...patch };
+  const callback = configuration.callback;
+  const chart = (instance: 'A' | 'B', source: OrgChartDataSource) => (
+    <section key={instance} aria-label={`OrgChart ${instance}`} data-instance={instance}>
+      <OrgChart
+        dataSource={source}
+        aggregationPolicy={configuration.aggregationPolicy}
+        stylesheetUrls={configuration.stylesheetUrls}
+        className={configuration.className}
+        onStateChange={state => { events.push({ instance, callback, state }); }}
+        onLifecycleError={error => { lifecycleErrors.push(error instanceof Error ? error.message : String(error)); }}
+      />
+    </section>
+  );
+  root.render(
+    <StrictMode>
+      <p className="consumer-note">가상 JSON 데이터 · React Strict Mode · 공개 OrgChart 패키지 사용</p>
+      <div className="consumer-charts">
+        {configuration.mountedA && chart('A', configuration.sourceA)}
+        {configuration.mountedB && chart('B', configuration.sourceB)}
+      </div>
+    </StrictMode>,
+  );
+}
+const demo = {
+  render, sources, slowSource, events, lifecycleErrors, requests,
+  releaseSlow: () => releaseSlow?.(),
+  get configuration() { return configuration; },
+  destroy: () => root.unmount(),
+};
+declare global { interface Window { OrgChartReactDemo: typeof demo } }
+window.OrgChartReactDemo = demo;
+render();