feat(alert): add alert atom

[egdev6]

Summary

Adds the Alert atom component with semantic statuses, dismissible behavior, and Storybook/test coverage.

Closes #13

Review scope

• Primary files/areas:
  • src/components/atoms/alert/*
  • src/index.ts
• Out of scope:
  • Compound Alert API; the approved props-and-slots API is preserved.
  • Broader token changes outside the Alert component.
• Review workload: large — new component implementation with tests and stories in one focused PR.

Type of change

• New component
• Existing component update/refactor
• Bug fix
• Accessibility
• Design tokens
• Storybook/docs
• Infrastructure/tooling
• NPM/dependencies

Workflow gates

• Linked issue is present with Closes #NNN or maintainer approved an exception.
• Linked issue has label status:approved before implementation starts.
• Work was started through the Project flow: assignee set, Project status In progress, branch/worktree recorded.
• PR title follows Conventional Commit format: <type>(<optional scope>): <description>.
• Commits follow the same commitlint-enforced format.
• Diff is focused; unrelated work is called out in Review scope.
• MCP/runtime artifacts are absent: .playwright-mcp, page-*.png, page-*.jpeg, *.md.playwright-output.

Component evidence (required for component changes)

• Validated component spec is linked or quoted in the issue.
• Accessibility contract from the spec was implemented or deviations are explained below.
• Follows the 6-file pattern: types.ts, use*.ts, Component.tsx, Component.test.tsx, Component.stories.tsx, index.ts.
• CVA variants live in types.ts; JSX component has no state, CVA calls, or business logic.
• Public props with runtime defaults have matching @default JSDoc in types.ts (node scripts/verify-prop-default-docs.mjs).
• Uses design tokens from theme.css; no hardcoded colors or arbitrary color utilities.
• Storybook covers default, variants, documented states, edge cases, and dark mode when visually different.
• Component audit result is PASS or accepted PASS WITH WARNINGS.
• Visual review result is included when visuals changed.

Accessibility evidence

• Role/name semantics verified with Testing Library queries or equivalent.
• Keyboard-only behavior verified: Tab / Shift+Tab, Enter / Space, Arrow keys, Escape, Home / End / typeahead where applicable.
• Focus lifecycle verified: initial focus, roving/active descendant, focus restore, trap/portal behavior where applicable.
• Disabled, required, invalid/error, loading, and empty states expose the expected semantics where applicable.
• Reduced motion behavior is respected where motion changed.
• Screen reader or axe/manual evidence is included below when applicable.

Validation evidence

• TypeScript: pnpm build ✅
• Unit tests:
  • pnpm test src/components/atoms/alert/Alert.test.tsx ✅ — 20/20
  • pre-push pnpm test ✅ — 33 files, 628 tests
• Build/package: pnpm build ✅
• Storybook or visual check: pnpm storybook-build ✅
• Accessibility check: Alert tests cover role="alert", conditional aria-labelledby / aria-describedby, dismiss label, keyboard dismissal, reduced motion, and focus behavior ✅
• Security/dependency check: no dependency changes

Screenshots or recordings

Manual Storybook visual checks were performed for default, semantic, rich content, long content, custom color, and title-only dismissible states.

Final title-only measurement:

• Alert root height: 56px
• Close button: 36x36px
• Close icon: 14x14px
• Title, close button, and close SVG vertical centers aligned at 89px

Notes for reviewer

• Default Alert is variant="solid" and color="primary"; primary intentionally uses the neutral/default visual treatment.
• Public Alert colors are primary, success, warning, and danger; secondary is intentionally not exposed.
• Public Alert variants are solid, bordered, and flat; faded was removed because it duplicated solid visually.
• Semantic color is used as accent treatment on surface/border/icon; text remains neutral.
• subtitle and children accept ReactNode, including rich inline content.
• Fresh pre-PR review returned PASS after fixing close-icon size and close-button hit target blockers.

[Copilot]

Pull request overview

This PR introduces a new Alert atom to the design system, providing semantic status styling, optional dismiss behavior (controlled/uncontrolled), and accompanying Storybook + unit test coverage. It fits into the atoms layer and is exported from the package entrypoint for consumption by downstream apps.

Changes:

• Added Alert atom implementation (Alert.tsx) driven by a dedicated state/behavior hook (useAlert.ts) and CVA variants (types.ts).
• Added comprehensive unit tests covering a11y wiring, controlled/uncontrolled dismissal, and reduced-motion behavior.
• Added Storybook stories demonstrating defaults, variants, controlled/uncontrolled usage, and rich content cases.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/index.ts	Exports the new Alert atom from the package entrypoint.
src/components/atoms/alert/Alert.tsx	Renders the Alert structure (icon/title/description/end-content/close button) using useAlert.
src/components/atoms/alert/useAlert.ts	Implements controlled/uncontrolled open state, reduced-motion handling, ARIA ids, and class composition.
src/components/atoms/alert/types.ts	Defines Alert variants (CVA), public props, and default icon mapping per semantic color.
src/components/atoms/alert/index.ts	Barrel export for Alert and its types.
src/components/atoms/alert/Alert.test.tsx	Validates behavior + accessibility wiring with Testing Library/Vitest.
src/components/atoms/alert/Alert.stories.tsx	Documents usage/variants and showcases edge cases in Storybook.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.