Notification UI

[a-elkhiraooui-ciscode]

Summary

• What does this PR change?

Why

• Why is this change needed?

Checklist

• Added/updated tests (if behavior changed)
• npm run lint passes
• npm run typecheck passes
• npm test passes
• npm run build passes
• Added a changeset (npx changeset) if this affects consumers

Notes

• Anything reviewers should pay attention to?

[sonarqubecloud]

Quality Gate passed

Issues
19 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Copilot]

Pull request overview

Introduces the first functional implementation of NotificationKit-UI as a reusable React component library, including notification state management, provider + hook APIs, UI components, styling build pipeline, and initial test coverage.

Changes:

• Added notification domain models and a NotificationStore, plus NotificationProvider + useNotification hook and supporting UI components.
• Added Tailwind/PostCSS configuration and a CSS build step with a published ./style.css export; updated package exports to ESM .js.
• Replaced template/placeholder utilities/components with real notification implementation; added tests and updated README + changeset.

Reviewed changes

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

Show a summary per file

File	Description
tailwind.config.mjs	Adds Tailwind config (RTL plugin, z-index extension).
tailwind.config.js	Adds Tailwind config duplicate in .js.
src/utils/noop.ts	Removes template noop utility.
src/utils/index.ts	Removes placeholder exports; leaves empty utils barrel.
src/store/notificationStore.ts	Adds notification store (add/update/dismiss/clear/restore + history + provider defaults).
src/store/index.ts	Adds store barrel export.
src/models/notification.ts	Adds notification types/config/state models.
src/models/index.ts	Adds models barrel export.
src/index.ts	Updates public exports to ESM .js paths; exports models/store.
src/hooks/useNotification.ts	Adds hook for accessing notification context.
src/hooks/useNoop.ts	Removes template noop hook.
src/hooks/useClearOnNavigate.ts	Adds route-change clearing helper hook.
src/hooks/useAccessibility.ts	Adds focus trap and live region hooks.
src/hooks/index.ts	Replaces placeholder hook exports with notification hooks.
src/context/NotificationContext.tsx	Adds notification context + value type.
src/components/index.ts	Replaces placeholder component exports with notification components.
src/components/index.css	Adds component CSS entry importing base styles + icon animations.
src/components/NotificationViewport.tsx	Adds portal-based viewport renderer.
src/components/NotificationProvider.tsx	Adds provider that wires store to React context + viewport.
src/components/NotificationProgress.tsx	Adds auto-dismiss progress bar component.
src/components/NotificationItem.tsx	Adds notification UI item rendering, timing/pause logic, and a11y behaviors.
src/components/NotificationIcons.css	Adds keyframes + animation classes for notifications.
src/components/NotificationIcon.tsx	Adds icon rendering (type icons / custom icon / no icon).
src/components/NotificationContainer.tsx	Adds position-based grouping and container rendering.
src/components/NotificationActionList.tsx	Adds rendering for per-notification action buttons.
src/components/NoopButton.tsx	Removes template button component.
src/assets/styles/style.css	Adds Tailwind directives and sr-only utility layer.
src/tests/notificationStore.test.ts	Adds store behavior tests.
src/tests/NotificationProvider.test.tsx	Adds provider + navigationKey behavior tests.
src/tests/NotificationItem.a11y.test.tsx	Adds basic a11y assertions for NotificationItem.
postcss.config.mjs	Adds PostCSS config (tailwindcss + autoprefixer).
postcss.config.js	Adds PostCSS config duplicate in .js.
package.json	Updates exports/module fields to ESM .js, adds CSS export and Tailwind build step + deps.
package-lock.json	Updates lockfile for new build/style dependencies.
README.md	Replaces template README with library docs and usage examples.
.github/workflows/release-check.yml	Minor workflow formatting adjustment.
.github/instructions/testing.instructions.md	Formatting updates in internal testing instructions.
.github/instructions/general.instructions.md	Formatting updates in internal general instructions.
.github/instructions/features.instructions.md	Formatting updates in internal feature instructions.
.github/instructions/copilot-instructions.md	Formatting updates in internal Copilot instructions.
.github/instructions/bugfix.instructions.md	Formatting updates in internal bugfix instructions.
.changeset/bright-owls-approve.md	Adds a changeset for the initial functional release.

---

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

[Copilot]

This effect intentionally omits clearAll from the dependency array, which can lead to a stale callback if the caller ever passes a new clearAll reference. Prefer including clearAll in the dependency array (and requiring it to be stable via useCallback in the caller) so the hook behaves correctly without an eslint disable.

[Copilot]

dismiss expects a string, but state.notifications[0]?.id is string | undefined. This will fail npm run typecheck (tests are under src/ so they’re included by tsconfig) and also calls dismiss(undefined) at runtime when there are no notifications. Guard the click handler (or disable the button) until an id exists.

Suggested change

	return (
	<>
	<button onClick={() => notify({ title: 'Test', message: 'Hello' })}>Show</button>
	<button onClick={() => dismiss(state.notifications[0]?.id)}>Dismiss</button>
	const firstNotificationId = state.notifications[0]?.id;
	return (
	<>
	<button onClick={() => notify({ title: 'Test', message: 'Hello' })}>Show</button>
	<button
	disabled={!firstNotificationId}
	onClick={() => {
	if (firstNotificationId) {
	dismiss(firstNotificationId);
	}
	}}
	>
	Dismiss
	</button>

[Copilot]

The notification container is focusable (tabIndex={0}) and clickable (onClick), but keyboard activation isn’t supported (the key handler only handles Escape). For accessibility, either handle Enter/Space to trigger the click action when item.onClick is present, or avoid making the non-interactive container focusable/clickable and move the action to an actual button/link element.

Suggested change

	onDismiss(item.id);
	}
	onDismiss(item.id);
	return;
	}
	// Enter/Space to activate notification click action when present
	if ((event.key === 'Enter' || event.key === ' ') && item.onClick) {
	event.preventDefault();
	item.onClick();
	}

[Copilot]

defaultIcon defaults to null, and toRecord() assigns icon via config.icon ?? provider.defaultIcon, which makes icon always null by default. With the current NotificationIcon logic, this suppresses icons and makes the built-in type icons unreachable unless consumers explicitly set defaultIcon to undefined. If the intent is “show built-in icons by default, allow opt-out”, default defaultIcon to undefined and reserve null for explicitly disabling icons.

[Copilot]

The CSS build is using src/assets/styles/style.css as the Tailwind input, but key component styles (e.g., NotificationIcons.css defining animate-notify-* keyframes) aren’t included in that file. As a result, dist/style.css will miss the animation/keyframe definitions used by NotificationItem. Consider inlining/importing NotificationIcons.css into the Tailwind input (or switch the input to a single entry CSS that includes all component layers) so the published ./style.css contains all required styles.

Suggested change

	"build:css": "tailwindcss -i ./src/assets/styles/style.css -o ./dist/style.css --minify",
	"build:css": "tailwindcss -i ./src/assets/styles/index.css -o ./dist/style.css --minify",

[Copilot]

exports["./style.css"] encourages consumers to import '@ciscode/ui-notification-kit/style.css', but the package is still marked "sideEffects": false. Some bundlers use this to tree-shake side-effect imports and can drop CSS imports, resulting in missing styles at runtime. Consider setting sideEffects to include CSS (e.g., an array matching **/*.css) or otherwise marking the style entry as side-effectful.

[Copilot]

restore() calls this.add(rest) (which notifies subscribers), then mutates this.state.history to remove the restored item but never calls this.notify() afterward. Subscribers can miss the history removal and remain out of sync until a later store update. Add a final this.notify() (or update history before add) so the restore operation is fully observable.