|
1 | | -# Copilot Instructions - React Component Library |
| 1 | +# Copilot Instructions - HooksKit |
2 | 2 |
|
3 | | -> **Purpose**: Development guidelines for React component libraries - reusable, well-structured components for modern apps. |
| 3 | +> **Purpose**: Development guidelines for HooksKit — production-ready React hooks with zero runtime deps. |
4 | 4 |
|
5 | 5 | --- |
6 | 6 |
|
7 | 7 | ## 🎯 Module Overview |
8 | 8 |
|
9 | | -**Package**: `@ciscode/ui-components` (example) |
10 | | -**Type**: React Component Library |
| 9 | +**Package**: `@ciscode/reactts-developerkit` |
| 10 | +**Epic**: COMPT-2 — HooksKit |
| 11 | +**Type**: React Hooks Library |
11 | 12 | **Framework**: React 18+, TypeScript 5+ |
12 | | -**Build**: Vite/tsup |
| 13 | +**Build**: tsup |
13 | 14 | **Testing**: Vitest + React Testing Library |
14 | 15 | **Distribution**: NPM package |
15 | | -**Purpose**: Reusable, production-ready React components for building modern UIs |
| 16 | +**Purpose**: 12 production-ready React hooks. Zero runtime deps. SSR-safe. |
16 | 17 |
|
17 | | -### Typical Module Responsibilities: |
| 18 | +### Hook Groups: |
18 | 19 |
|
19 | | -- Atomic UI components (Button, Input, Card, etc.) |
20 | | -- Composite components (Form, Modal, Navigation, etc.) |
21 | | -- Hooks for common patterns |
22 | | -- Type definitions and props interfaces |
23 | | -- Accessibility compliance (WCAG 2.1 AA) |
24 | | -- Theming and customization |
25 | | -- Comprehensive documentation |
| 20 | +- **State & Storage** — `useDebounce`, `useLocalStorage`, `useSessionStorage` |
| 21 | +- **DOM & Events** — _(upcoming)_ |
| 22 | +- **Async & Lifecycle** — _(upcoming)_ |
| 23 | + |
| 24 | +### Module Responsibilities: |
| 25 | + |
| 26 | +- Generic, fully-typed hooks with inference at call site |
| 27 | +- SSR-safe (all `window`/`document` access guarded with `typeof window === 'undefined'`) |
| 28 | +- JSON serialization for storage hooks (parse-error fallback to initial value) |
| 29 | +- Zero runtime dependencies |
| 30 | +- WCAG-accessible patterns where applicable |
| 31 | +- Comprehensive tests (hooks ≥ 90% coverage) |
26 | 32 |
|
27 | 33 | --- |
28 | 34 |
|
29 | 35 | ## 🏗️ Module Structure |
30 | 36 |
|
31 | 37 | ``` |
32 | 38 | src/ |
33 | | - ├── components/ # React components |
34 | | - │ ├── Button/ |
35 | | - │ │ ├── Button.tsx # Component |
36 | | - │ │ ├── Button.test.tsx # Tests |
37 | | - │ │ ├── Button.types.ts # Props types |
38 | | - │ │ └── index.ts # Exports |
39 | | - │ ├── Input/ |
40 | | - │ ├── Modal/ |
41 | | - │ └── Form/ |
42 | | - ├── hooks/ # Custom hooks |
43 | | - │ ├── useModal.ts |
44 | | - │ ├── useForm.ts |
45 | | - │ └── useModal.test.ts |
46 | | - ├── context/ # Context providers |
47 | | - │ ├── ThemeContext.tsx |
48 | | - │ └── FormContext.tsx |
49 | | - ├── types/ # TypeScript types |
50 | | - │ └── common.types.ts |
51 | | - ├── utils/ # Utilities |
52 | | - │ └── classNameUtils.ts |
53 | | - └── index.ts # Public API |
| 39 | + ├── components/ # Minimal supporting components |
| 40 | + │ ├── NoopButton.tsx |
| 41 | + │ └── index.ts |
| 42 | + ├── hooks/ # All public hooks |
| 43 | + │ ├── storage.ts # Internal SSR-safe storage helpers |
| 44 | + │ ├── useDebounce.ts # COMPT-30 ✅ |
| 45 | + │ ├── useDebounce.test.ts |
| 46 | + │ ├── useLocalStorage.ts # COMPT-30 ✅ |
| 47 | + │ ├── useLocalStorage.test.ts |
| 48 | + │ ├── useSessionStorage.ts # COMPT-30 ✅ |
| 49 | + │ ├── useSessionStorage.test.ts |
| 50 | + │ └── index.ts # Hook barrel |
| 51 | + ├── utils/ # Framework-agnostic utils |
| 52 | + │ ├── noop.ts |
| 53 | + │ └── index.ts |
| 54 | + └── index.ts # Public API (only entry point) |
54 | 55 | ``` |
55 | 56 |
|
| 57 | +> ⚠️ Only export from `src/index.ts`. Deep imports are forbidden. |
| 58 | +
|
56 | 59 | --- |
57 | 60 |
|
58 | 61 | ## 📝 Naming Conventions |
@@ -277,18 +280,17 @@ export type { ButtonProps, ModalProps, InputProps, FormProps } from './component |
277 | 280 | **1. Branch Creation:** |
278 | 281 |
|
279 | 282 | ```bash |
280 | | -feature/UI-MODULE-123-add-datepicker |
281 | | -bugfix/UI-MODULE-456-fix-modal-focus |
282 | | -refactor/UI-MODULE-789-extract-button-styles |
| 283 | +feat/COMPT-30-state-storage-hooks |
| 284 | +bugfix/COMPT-XX-short-description |
283 | 285 | ``` |
284 | 286 |
|
285 | | -**2. Task Documentation:** |
| 287 | +> Branch names must reference the Jira ticket (COMPT-XX format). Pull from `develop` before opening PR. |
286 | 288 |
|
287 | | -Create task file: |
| 289 | +**PR targets:** |
288 | 290 |
|
289 | | -``` |
290 | | -docs/tasks/active/UI-MODULE-123-add-datepicker.md |
291 | | -``` |
| 291 | +- Feature branches → `develop` |
| 292 | +- `develop` → `master` on Friday release only |
| 293 | +- Never open a PR directly to `master` |
292 | 294 |
|
293 | 295 | **Task structure:** |
294 | 296 |
|
|
0 commit comments