Foundation · Shared Angular UI · Pattern catalog
Shared Angular UI,
built around clear contracts.
Behind GeoAtlas is a layer of UI libraries that know nothing about GeoAtlas, its parcels or its domain. I built this layer on Angular Aria, CDK, TanStack Table and Signal Forms, adding shared composition for tables, forms, files, windows, commands and an assistant. A working catalog makes the patterns and their states inspectable.
- Problem
- Avoid rebuilding the same interactions differently across product screens.
- My contribution
- Library contracts, pattern composition, design tokens and verification approach.
- Evidence
- A working development catalog, screenshots and dated test inventories.
- 12
- workspace packages under
@ui, including the development catalog - 53
- pattern pages in seven groups
- 2,524
- unit tests, run in jsdom
- 819
- Playwright tests over the catalog
Unit tests are test declarations counted in the sources at revision a591c440 on 1 October 2026; end-to-end figures are the Playwright suites’ own totals as recorded on the same day.
01 / The packages
Small libraries
with one job each.
@ui/gridData grid on TanStack Table: filters, paging, selection, grouping, pinning, editing, CSV, saved views.@ui/formsSignal Forms layouts, controls, validators, form definitions with a renderer, stepper and drafts.@ui/controlsButtons, fields, menus, dialogs, windows, tabs, toolbars, trees and the design tokens.@ui/uploadUpload queue, identifier file import and document slots.@ui/previewOne file viewer for PDF, images and text.@ui/detailsDetail sections rendered from a validated document.@ui/communicatorA message thread with a composer.@ui/commandsA view-free command engine: typed parameters, phrase matching, tool descriptions for a model.@ui/chatAn assistant conversation with tool-call cards, questions and visible model context.@ui/mapMaps of records’ geometries: drawing sessions, range picker, point and area form fields.@ui/serviceAn e-service page composed from a JSON definition over a host port.@ui/catalogThe demo application with every pattern on shared data; left out of production builds.
02 / Ownership
One owner
for every behaviour.
Keyboard, focus and ARIA behaviour come from Angular Aria and the CDK; the grid's data and state are TanStack Table's, wired in a single file; form state belongs to Signal Forms. The libraries add the composition, not a second implementation of the same behaviour.
Each package keeps a pure core — model, state and rules, with no view imports — apart from its Angular view. The look comes only from --ui-* design tokens, so a product restyles the whole layer by overriding properties. Workspace boundary rules prevent the shared libraries from importing application code; framework and third-party dependencies remain explicit.
Controls follow one touch rule: 44 px targets on coarse pointers and compact ones under a mouse, decided once in the library.
03 / The catalog
A working catalog
of patterns and states.
The catalog is a demo application that organises 53 pattern pages into seven groups: data and tables; forms; basic controls; windows, navigation and feedback; map and geometry; files and communication; product compositions. Every demo works on the same sample data, with pretend servers where a backend would be.
It runs in development builds only, so the product's production bundles do not carry it.
04 / How it is tested
Important states,
checked consistently.
- Unit tests in jsdom. The 1 October inventory counted 2,524 test declarations across the UI workspace. A recorded run took under a minute on its CI agent; this is a historical observation, not a current performance guarantee.
- Scenarios per pattern. 819 Playwright tests drive the catalog the way a user would, with the keyboard as well as the pointer.
- Automated accessibility checks. axe checks recorded catalog states at 800 and 1600 px, including overlays. This covers only part of accessibility; keyboard, focus, screen-reader and task review remain necessary.
- Visual baselines. Twenty-two screenshot baselines of the catalog and of the application, desktop and phone, compared only on the CI agent.
05 / Beyond maps
Reuse across products.
Validate the fit.
Grids, forms, document viewers and command palettes recur in many business applications. Keeping product rules outside their shared contracts makes reuse possible. A second domain still needs its own integration, permission, accessibility and workflow checks; the catalog is evidence of the patterns, not proof of a banking or ERP deployment.
Service Studio now reuses these patterns for native form and e-service authoring: editable definitions, conditional sections, map inputs, attachments and searchable PDF summaries. Its local workflow demonstrates drafts and publication revisions.
See the Studio example ↗If your team maintains several Angular applications that solve the same interface problems differently, this is the kind of foundation I can help you build or tidy.
Shared UI for your applications?
Tell me which interfaces your team keeps rebuilding.
contact@clearcraft.dev