3.9 KiB
OrgChart React public-package consumer
P3 follow-up
p1.html?mode=readOnly uses the updated common Core with the position matrix,
group links and employee information dialog. No navigation URLs are preset.
The development-only window.OrgChartP1React.setOptions({ organizationLinks, onEmployeeClick }) helper applies public React props to the current fixture;
it is not a new Core handle method. setData remains available.
After building Core/Wrapper and both examples, run the focused
node examples/org-chart/verify-p3.mjs. Evidence goes to
test-results/org-chart-p3; prior P1/P2 scripts and results remain unchanged.
This independent Vite consumer imports the built public entries of
@hm-design/org-chart-react, @hm-design/org-chart and @hm-design/ui/theme.css.
It imports the original Vanilla v1/v2 JSON files directly. It is a verification
example, with fictitious data and a window.OrgChartReactDemo inspection seam;
it has no server/login integration or production business controls.
From the repository root, build packages before the consumer:
npm run build:packages
npm run build:org-chart-react-example
npm run dev:org-chart-react-example
Development URL: http://127.0.0.1:6026/ (strict port). Strict Mode effect replay
is checked in development. The production output has its own HTTP browser smoke
and update checks. This ESM output is for HTTP deployment; it is not a direct-open
file:// artifact. The existing Vanilla examples/org-chart/dist/classic.html
remains the direct-open example.
Core CSS URL imports become deployment assets and are passed into each Shadow DOM.
The public HM Theme import emits its existing font assets. Grid/flex consumers
must allow their chart-containing items to shrink (min-width: 0); horizontal
overflow belongs to the Core viewport rather than the document.
Browser tooling is supplied by the verification environment, not added to the
package dependencies. Configure ORGCHART_PLAYWRIGHT_MODULE and optionally
ORGCHART_CHROME, using absolute paths. Start the separate Storybook server on
6025 and consumer on 6026, then:
# Set these environment variables using your shell's syntax:
# ORGCHART_CONSUMER_URL=http://127.0.0.1:6026
# ORGCHART_STORYBOOK_URL=http://127.0.0.1:6025
npm run test:org-chart-react-browser
node examples/org-chart-react/verify-boundaries.mjs
verify.mjs inspects real Core DOM, compares Vanilla/React snapshots, exercises
React and Storybook lifecycles and records screenshots/metrics at four widths.
verify-boundaries.mjs checks production updates, source identity semantics,
actual horizontal scrolling, global CSS isolation and direct-open Vanilla smoke.
Both write evidence under ignored test-results/org-chart-react/.
To check the actual package archive and declarations without another build:
npm pack -w @hm-design/org-chart --ignore-scripts --pack-destination test-results
npm pack -w @hm-design/org-chart-react --ignore-scripts --pack-destination test-results
node examples/org-chart-react/verify-package.mjs
The tarball test uses extracted Core/Wrapper packages with the environment's React/compiler; it does not establish a fresh remote-registry installation.
P2 read-only Full Composition
Open p1.html?mode=readOnly to use the same read-only Core composition as the
Vanilla example and Storybook orgchart--full-composition. Plain p1.html
retains the existing interactive mode. The query changes presentation only.
All displayed names are 홍 길 동; the employee fixture and aggregation remain
unchanged. Department leaders use card assets by actual ancestry depth.
After building the Core, preparing the HTML example and building this consumer,
run node examples/org-chart/verify-p2.mjs from the repository root. Set
ORGCHART_STORYBOOK_URL to the current Storybook server when checking dev.
The focused verifier records screenshots and measurements in
test-results/org-chart-p2; it preserves existing v0/P1 test expectations.