Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions .changeset/bright-owls-approve.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
'@ciscode/ui-notification-kit': minor
---

Ship the first functional release of NotificationKit-UI.

### Added

- Notification provider and hook API (`NotificationProvider`, `useNotification`)
- Notification types: success, error, warning, info, loading, default
- Position support: top-left, top-center, top-right, center, bottom-left, bottom-center, bottom-right
- Configurable animations (slide, fade, scale), durations, auto-dismiss, close button, actions, and custom icons
- Store lifecycle with add/update/dismiss/clear/restore and history tracking
- Route-aware clearing support (`clearOnNavigate`, `navigationKey`)
- Accessibility support (live-region announcements, ARIA roles, keyboard escape-to-dismiss)
- Tailwind + RTL styling support and published style asset export (`./style.css`)
- Test coverage for store behavior, provider behavior, and a11y essentials

### Changed

- Package entry exports updated to align with generated build outputs
- Notification rendering moved to a portal to avoid stacking-context issues in host apps
- Layering hardened so notifications stay above dashboard content

### Notes

- Import styles in host apps using: `@ciscode/ui-notification-kit/style.css`
193 changes: 193 additions & 0 deletions .github/copilot-instructions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
# Copilot Instructions - NotificationKit-UI

> **Purpose**: Development guidelines for NotificationKit-UI - reusable React notification UI components.

---

## 🎯 Package Overview

**Package**: `@ciscode/ui-notification-kit`
**Type**: React Frontend Component Library
**Purpose**: Pre-built notification and alert UI components for React apps

### This Package Provides:

- Notification display components
- Toast/alert components
- Notification context providers
- Notification state management hooks
- TypeScript types for notification state
- Vitest unit tests with 80%+ coverage
- Changesets for version management
- Husky + lint-staged for code quality

---

## 🏗️ Project Structure

```
src/
├── components/ # React components
│ ├── Notification/
│ ├── Toast/
│ └── index.ts
├── hooks/ # Custom hooks
│ ├── useNotification.ts
│ └── useToast.ts
├── context/ # Context providers
│ └── NotificationProvider.tsx
├── types/ # TypeScript types
│ └── notification.types.ts
└── index.ts # Public exports
```

---

## 📝 Naming Conventions

**Components**: `PascalCase.tsx`

- `Notification.tsx`
- `Toast.tsx`
- `Alert.tsx`

**Hooks**: `camelCase.ts` with `use` prefix

- `useNotification.ts`
- `useToast.ts`

**Types**: `kebab-case.ts`

- `notification.types.ts`

---

## 🧪 Testing Standards

### Coverage Target: 80%+

**Unit Tests:**

- ✅ All components
- ✅ All custom hooks
- ✅ Context logic
- ✅ Type definitions

**Component Tests:**

- ✅ Rendering checks
- ✅ User interactions
- ✅ State changes

**Test file location:**

```
Notification/
├── Notification.tsx
└── Notification.test.tsx
```

---

## 📚 Documentation

### JSDoc Required For:

- All exported components
- All exported hooks
- All exported types/interfaces
- All public functions

### Example:

```typescript
/**
* Displays a notification message
* @param message - The notification message
* @param type - Type of notification (success, error, warning, info)
* @returns Notification component
*/
export function Notification({ message, type }: Props): JSX.Element;
```

---

## 🎨 Code Style

- ESLint with TypeScript support (`--max-warnings=0`)
- Prettier formatting
- TypeScript strict mode
- Functional components only
- No `React.FC` - always explicit `JSX.Element` return type

---

## 🔄 Development Workflow

### Branch Naming:

```bash
feature/NK-UI-123-add-notification
bugfix/NK-UI-456-fix-toast-timing
refactor/NK-UI-789-extract-styles
```

### Before Publishing:

- [ ] All tests passing
- [ ] Coverage >= 80%
- [ ] ESLint checks pass
- [ ] TypeScript strict mode passes
- [ ] All public APIs documented
- [ ] Changeset created
- [ ] README updated

---

## 📦 Versioning

**MAJOR** (x.0.0): Breaking API changes
**MINOR** (0.x.0): New features (backward compatible)
**PATCH** (0.0.x): Bug fixes and improvements

Always create a changeset for user-facing changes using `npm run changeset`.

---

## 🔐 Security

- Never expose sensitive data in notifications
- Sanitize notification content
- Validate all notification props
- No `dangerouslySetInnerHTML` without approval

---

## 🚫 Restrictions

**NEVER without approval:**

- Breaking changes to component APIs
- Removing exported components/hooks
- Major dependency upgrades

**CAN do autonomously:**

- Bug fixes (non-breaking)
- Internal refactoring
- Adding new features (additive)
- Test improvements

---

## 💬 Communication

- Brief and direct
- Reference component names when discussing changes
- Flag breaking changes immediately
- This package is consumed by multiple applications

---

_Last Updated: March 3, 2026_
_Version: 0.1.0_
20 changes: 20 additions & 0 deletions .github/dependabot.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
version: 2
updates:
# npm dependencies
- package-ecosystem: 'npm'
directory: '/'
schedule:
interval: 'weekly'
day: 'monday'
time: '03:00'
open-pull-requests-limit: 1

rebase-strategy: 'auto'

# GitHub Actions
- package-ecosystem: 'github-actions'
directory: '/'
schedule:
interval: 'weekly'
day: 'sunday'
time: '03:00'
Loading
Loading