UI
Two front-ends coexist while the Angular application is ported to React. This section is the entry point to both, and to the component library they are converging on.
The two applications
| package | worker | local | |
|---|---|---|---|
| React — the target | apps/ui | adb-ui | pnpm dev:react, :4200 |
| Angular — the reference | adb-ui/ behind apps/ui-legacy | adb-ui-legacy | pnpm dev:angular, :8787 |
The Angular application is read-only: it is the oracle every parity measurement is taken against, never edited. It keeps serving the production hostname until the React Worker takes it, which is a routes.jsonc appearing next to apps/ui/wrangler.jsonc.
Both fronts proxy to the same service Workers on :8787, so the only difference between the two commands above is which SPA renders them.
The component library
packages/ui-kit holds the shared components. It is not a design system for its own sake: a component earns its place there when an Angular MODULE shares it across feature modules, and its header records the call-site count that justified the move.
Storybook
Storybook renders the kit's components and the ported screens, and its stories are executed as tests in a real browser — pnpm --filter @adb/ui-kit test:stories is a gate, not a preview. It has caught defects that unit tests missed, including a story that claimed nine coloured rows where the browser measured eight.
Browse it here: Storybook.
That link is served from this site's static assets. Build it before browsing:
pnpm --filter @adb/ui-storybook build:docs
To work on components with hot reload instead, run Storybook's own dev server on :6006:
pnpm --filter @adb/ui-storybook dev
Storybook used to be deployed as its own Cloudflare Worker (
adb-ui-storybook). That Worker was retired to keep the Worker count down; Storybook is built into this documentation site instead.
Where the port stands
The migration's own record lives with the code rather than here, because it is checked by gates that run in the repository:
apps/ui/docs/orchestration/HANDOFF.md— state, what is left, and the traps that cost the programme real time;apps/ui/docs/parity/gaps.md— every measured divergence from the Angular reference;apps/ui/docs/parity/<route>.ported.md— one sheet per screen, what was delivered.