Angular Component Library Plan

Summary

Create a fresh Angular workspace for @mrarm/ui because the repo currently contains only WEB_DESIGN_STYLE.md. Use Angular 21 LTS for compatibility with Storybook’s current Angular support, and build a reusable component library plus both Storybook and a working demo app.

Sources checked: Angular release support (https://angular.dev/reference/releases), Storybook Angular docs (https://storybook.js.org/docs/get-started/frameworks/angular).

Key Changes

Scaffold an Angular 21 workspace with:
- projects/mrarm-ui as the publishable library package @mrarm/ui
- projects/demo as the route-based demo app
- Storybook configured for isolated component demos and documentation
Use selector prefix mra- and CSS token prefix --mra-.
Build custom visuals from WEB_DESIGN_STYLE.md: compact grey panels, square borders, small typography, dense tables/forms, sparse semantic color, minimal motion.
Use Angular CDK for overlays, focus trapping, menus, portals, accessibility helpers, and keyboard behavior while keeping all styling custom.

Component Set

Foundations: tokens, typography, reset, spacing, borders, focus styles, semantic colors, layout utilities.
Actions: button, icon button, button group, split button, link button, confirmation action.
Status/display: badge, alert, toast, progress bar, loading indicator, empty state, code box, log stream, markdown container.
Forms: field wrapper, input, textarea, select, checkbox, radio, switch, segmented control, slider, number stepper, validation message, form actions.
Navigation/overlays: top bar, tab nav, menu/dropdown, tooltip, popover, dialog, drawer, accordion/disclosure, pagination.
Data: table, sortable header, row actions, filter bar, description list, compact metric block, activity timeline.
Layouts: app shell, main panel, page header/action row, dashboard, list page, detail page, configuration page, review queue, split detail/log layout.

Advanced widgets such as autocomplete/combobox, datepicker/range picker, tree view, command palette, virtualized table, and drag/drop lists should be tracked as phase-two components after the foundation and broad common set are working.

Demo And Documentation

Storybook should include one story per component with default, variants, disabled/loading/error states, keyboard states, and mobile viewport checks.
The demo app should include route-based pages for Dashboard, List, Detail, Configuration, Review Queue, Forms, Tables, Overlays, and Logs.
Demo data should be realistic operational data: statuses, IDs, timestamps, endpoint URLs, logs, row actions, empty states, and validation errors.
Avoid marketing pages, hero sections, decorative cards, gradients, blobs, glass effects, and oversized typography.

Test Plan

Unit tests for component inputs, outputs, disabled states, semantic variants, and keyboard interactions.
Angular CDK harness-style tests where practical for menus, dialogs, tabs, and form controls.
Storybook interaction tests for overlays, forms, menus, and dialogs.
Accessibility checks for labels, focus order, visible focus states, contrast, reduced motion, and non-color-only status communication.
Build checks for library package, demo app, and Storybook.

Assumptions

Package name: @mrarm/ui.
Selector prefix: mra-.
Token prefix: --mra-.
Angular target: 21 LTS.
Demo approach: Storybook plus Angular demo app.
Styling approach: custom CSS variables and component styles, no Angular Material visual theme.

3.6 KiB Raw Permalink Blame History Unescape Escape