83 lines
3.9 KiB
Markdown
83 lines
3.9 KiB
Markdown
# 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:
|
|
|
|
```sh
|
|
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:
|
|
|
|
```sh
|
|
# 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:
|
|
|
|
```sh
|
|
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.
|