Skip to content

Commit 997e442

Browse files
OmaiiimaZaiidmo
andauthored
Develop (#6)
* add core type system and remove placeholders * add field helper utilities with 35 tests * add 15 core validators with 51 tests * add error formatters and adapters with 35 tests * add useFormField hook with 26 test * add useValidation hook with 20 tests * add useFieldError hook with 25 tests * add Input component with validation, accessibility, and comprehensive tests * add Textarea component with auto-resize, character counter, and 36 tests * add Select component with single/multi selection support and 32 tests * add Checkbox component with indeterminate state support and 31 tests * add RadioGroup component with keyboard navigation and 37 tests * add FormField wrapper component with flexible layout and 28 tests * add ErrorMessage component with severity levels and 26 tests * add Zod adapter for schema validation integration with 28 tests * add React Hook Form adapter with component-specific helpers and 38 tests * add Field Generator with dynamic component creation and 36 tests * add Tailwind base styles to all form components * rename postcss.config.js to postcss.config.cjs for ESM compatibility * remove duplicate postcss.config.js to resolve ESM build error * restore custom error and auto-resize classes for test compatibility with Tailwind styles * restore formkit-textarea-count-over class for character count over limit in Textarea * ensure autoDismiss cancels previous timer in useFieldError for correct error state handling * enhance accessibility with sr-only labels and aria-live on error messages * add responsive design utilities to form components * configure Tailwind v4 CSS build and package exports * ops : updated workflows * polish component states with hover, focus, and disabled styles * docs: addded copilot instructions file * add useForm hook and FormContext for form state management * add Form wrapper component with submit handling * export Form, useForm, and FormContext from package * increase timeout for autoDismiss test stability * add PasswordInput component with visibility toggle and strength meter * add NumberInput component with increment buttons and formatting * add DatePicker component with calendar popup * add PhoneInput component with country code selection * feat: add FileInput component with drag-and-drop and preview * feat: add ColorPicker component with swatches and RGB/HSL inputs * feat: add Switch component with toggle states and customization * chore: standardize workflows and ci/cd - Fix SONAR_PROJECT_KEY (critical bug fix) - Add dependabot.yml for dependency management - Add sonarqube_mcp.instructions.md - Remove push trigger from pr-validation - Standardize branch triggers and Actions versions - Pin SonarQube actions to commit SHA * ops: added sonarqube_mcp-instructions * chore: standardize npm scripts (lint, format, typecheck, test, build, clean, verify, prepublishOnly) * chore: added config files for eslint and prettier * refactor: restrict public API to DynamicForm export only * refactor: restructure codebase to CHM architecture with core/, models/, fields/, and layout/ folders * chore: remove legacy code and consolidate to CHM architecture * docs: add standardized instruction files structure - Add comprehensive instruction files in .github/instructions/ - Includes copilot, testing, bugfix, features, general guidelines - Standardize documentation across all repositories * refactor: move instruction files to .github/instructions/ - Remove deprecated instruction files from .github/ root - Consolidate all docs in .github/instructions/ directory - Improve documentation organization * feat(testing): add test suite achieving 80%+ coverage (192 tests) * docs: enhance JSDoc for FieldType and ConditionalOperator, add changeset * refactor: fix layer import rules and component default exports * style: add field components with improved styling * restore the checkbox field * restore the password field * feat: add PhoneField with country selector and countries.json data (240+ countries, flagcdn.com flags) * password field style adjustments * feat(FileField): add accept, maxFileSize, and multiple config options with client-side validation * adjust radio and checkbox fields styles * adjust szitch field styles * feat: add SliderField with range input, editable value sync, and min/max/step config options * feat: add RangeSliderField with dual-thumb slider and editable from/to inputs * feat: add OTPField with configurable length and Full paste support * feat: add TagsField with multi-tag input, paste support, and configurable limits * feat: add RatingField with star rating, half-star support, and keyboard navigation * feat: add TimeField with step interval * feat: add DateTimeField with combined date and time input * test: add comprehensive tests for new field components * fix: unify checkbox styles across components * feat: add MultiSelectField with search, tags, and keyboard navigation * fix: remove focus styles from rating field * feat: update SelectField to use custom dropdown with search matching MultiSelectField style * fix: update field and form tests * feat: update time, date and dateTime fields styles to have custom dropdowns and pickers * fix: adjust select and multi select fields styles * fix: update dropdowns and pickers positioning and style across components * feat: add responsive measures to form fields * feat: update OTP field styles to support mobile layout * feat(i18n): add internationalization with English and French locale support * feat(form): automatically scroll to first invalid field and focus it on submit * ops: UPDATED publish workflow and dependabot PR limits * feat(ArrayField): refactor to reuse Field components via scoped context * feat: add translation content for Array field and optional params * refactor: remove unused config param * feat(layout): add grid-based layout system with sections and responsive columns * fix(ArrayField): enable per-field Zod validation and error display for nested fields * ops (ci): standardize publish validation and dependabot across all packages - Replace git tag --list strategy with package.json-driven tag validation in all 16 publish workflows; use git rev-parse to verify the exact tag exists rather than guessing the latest repo-wide tag - Update error guidance to reflect feat/** → develop → master flow - Standardize dependabot to npm-only, grouped, monthly cadence across all 16 packages; remove github-actions ecosystem updates - Add missing dependabot.yml to AuthKit-UI, ChartKit-UI, HealthKit, HooksKit, paymentkit, StorageKit * security: added CODEOWNER file for branches security \\ * ops: updated release check workflow * refactore and remove duplicate logic * address and fix the Sonar annotated findings * ops: updated relese check workflow# * ci: update release check workflow * ops: updated release check strategy * fix: formatting issues * Refactore (#2) * polish component states with hover, focus, and disabled styles * add useForm hook and FormContext for form state management * add Form wrapper component with submit handling * export Form, useForm, and FormContext from package * increase timeout for autoDismiss test stability * add PasswordInput component with visibility toggle and strength meter * add NumberInput component with increment buttons and formatting * add DatePicker component with calendar popup * add PhoneInput component with country code selection * feat: add FileInput component with drag-and-drop and preview * feat: add ColorPicker component with swatches and RGB/HSL inputs * feat: add Switch component with toggle states and customization * refactor: restrict public API to DynamicForm export only * refactor: restructure codebase to CHM architecture with core/, models/, fields/, and layout/ folders * chore: remove legacy code and consolidate to CHM architecture * feat(testing): add test suite achieving 80%+ coverage (192 tests) * docs: enhance JSDoc for FieldType and ConditionalOperator, add changeset * refactor: fix layer import rules and component default exports * style: add field components with improved styling * restore the checkbox field * restore the password field * feat: add PhoneField with country selector and countries.json data (240+ countries, flagcdn.com flags) * password field style adjustments * feat(FileField): add accept, maxFileSize, and multiple config options with client-side validation * adjust radio and checkbox fields styles * adjust szitch field styles * feat: add SliderField with range input, editable value sync, and min/max/step config options * feat: add RangeSliderField with dual-thumb slider and editable from/to inputs * feat: add OTPField with configurable length and Full paste support * feat: add TagsField with multi-tag input, paste support, and configurable limits * feat: add RatingField with star rating, half-star support, and keyboard navigation * feat: add TimeField with step interval * feat: add DateTimeField with combined date and time input * test: add comprehensive tests for new field components * fix: unify checkbox styles across components * feat: add MultiSelectField with search, tags, and keyboard navigation * fix: remove focus styles from rating field * feat: update SelectField to use custom dropdown with search matching MultiSelectField style * fix: update field and form tests * feat: update time, date and dateTime fields styles to have custom dropdowns and pickers * fix: adjust select and multi select fields styles * fix: update dropdowns and pickers positioning and style across components * feat: add responsive measures to form fields * feat: update OTP field styles to support mobile layout * feat(i18n): add internationalization with English and French locale support * feat(form): automatically scroll to first invalid field and focus it on submit * feat(ArrayField): refactor to reuse Field components via scoped context * feat: add translation content for Array field and optional params * refactor: remove unused config param * feat(layout): add grid-based layout system with sections and responsive columns * fix(ArrayField): enable per-field Zod validation and error display for nested fields * refactore and remove duplicate logic * address and fix the Sonar annotated findings * fix: formatting issues --------- Co-authored-by: Zaiidmo <zaiidmoumnii@gmail.com> * chore(deps): dedupe coverage plugin dependency * test(coverage): add high-impact branch tests for form fields and i18n/actions * ops: updated unit tests directory for sonar analysis * chore(changeset): remove improved field styles entry * chore(changeset): remove instructions refactor entry * chore(changeset): add consolidated first release notes * ci(sonar): update release check configuration * docs(readme): refresh first release documentation * chore(lockfile): sync dependency lock changes * fix(fields): improve array field interaction behavior * fix(fields): improve date field accessibility * fix(fields): improve date-time field accessibility * fix(fields): improve multi-select interaction semantics * fix(fields): improve time field accessibility * test(fields): extend time field interaction coverage * 0.0.0 * 0.0.1 * fix(fields): guard focused option access in multiselect keyboard selection * fix: adjust input z placement in array field (#5) --------- Co-authored-by: Zaiidmo <zaiidmoumnii@gmail.com>
1 parent 4c34f8a commit 997e442

118 files changed

Lines changed: 20684 additions & 376 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

.changeset/first-release-v0-0-1.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
'@ciscode/ui-form-kit': patch
3+
---
4+
5+
# First release v0.0.1
6+
7+
Prepare the first public release of `@ciscode/ui-form-kit` as `v0.0.1`.
8+
9+
This release includes the full baseline of FormKit-UI capabilities and quality hardening for the initial public version.
10+
11+
- Establish a component-first architecture with clear core utilities, models, hooks, and UI exports.
12+
- Deliver production-ready form primitives with typed APIs and validation-aware behavior.
13+
- Improve accessibility and keyboard interactions across key fields, including date, time, multi-select, switch, and radio patterns.
14+
- Enhance field styling and state feedback (hover, disabled, and valid states) for consistent UX.
15+
- Fix form behavior edge cases in submit and async validation flows.
16+
- Strengthen test coverage with comprehensive component and interaction-path tests, including high-impact branch scenarios.
17+
- Enforce release quality gates via lint, typecheck, coverage, and CI Sonar checks.
18+
- Correct Sonar release-check test path detection and maintain release-safe CI configuration.
19+
- Ship release-ready package documentation and usage guidance in README.

.github/CODEOWNERS

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
* @CISCODE-MA/devops

.github/dependabot.yml

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
version: 2
2+
updates:
3+
- package-ecosystem: npm
4+
directory: '/'
5+
schedule:
6+
interval: monthly
7+
open-pull-requests-limit: 1
8+
groups:
9+
npm-dependencies:
10+
patterns:
11+
- '*'
12+
assignees:
13+
- CISCODE-MA/cloud-devops
14+
labels:
15+
- 'dependencies'
16+
- 'npm'
17+
commit-message:
18+
prefix: 'chore(deps)'
19+
include: 'scope'
20+
rebase-strategy: auto
Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
# Bugfix Instructions - UI Kit Module
2+
3+
> **Last Updated**: February 2026
4+
5+
---
6+
7+
## 🔍 Bug Investigation Process
8+
9+
### Phase 1: Reproduce
10+
11+
**Before writing any code:**
12+
13+
1. **Understand the issue** - Read bug report carefully
14+
2. **Reproduce locally** - Create minimal reproduction
15+
3. **Verify it's a bug** - Not expected behavior
16+
4. **Check browser compatibility** - Test across browsers
17+
18+
**Create failing test FIRST:**
19+
20+
```typescript
21+
describe('Bug: Button not disabled when loading', () => {
22+
it('should disable button during loading', () => {
23+
render(<Button isLoading>Click</Button>);
24+
25+
// This SHOULD pass but currently FAILS
26+
expect(screen.getByRole('button')).toBeDisabled();
27+
});
28+
});
29+
```
30+
31+
### Phase 2: Identify Root Cause
32+
33+
**Investigation tools:**
34+
35+
- **React DevTools** - Inspect component tree
36+
- **Console logs** - Debug state changes
37+
- **Debugger** - Breakpoints in code
38+
- **Browser DevTools** - Check DOM/styles
39+
40+
```typescript
41+
// Debug component props/state
42+
useEffect(() => {
43+
console.log('Props changed:', props);
44+
}, [props]);
45+
```
46+
47+
### Phase 3: Understand Impact
48+
49+
**Critical questions:**
50+
51+
- Which browsers affected?
52+
- Does it break accessibility?
53+
- Is there a workaround?
54+
- Does it affect other components?
55+
56+
---
57+
58+
## 🐛 Common Bug Categories
59+
60+
### 1. State Management Issues
61+
62+
| Bug Type | Symptoms | Solution |
63+
| ----------------- | ------------------------- | -------------------------- |
64+
| **Stale closure** | Old values in callback | Update dependencies |
65+
| **Infinite loop** | Component re-renders | Fix useEffect dependencies |
66+
| **Lost state** | State resets unexpectedly | Check component key |
67+
68+
**Example fix:**
69+
70+
```typescript
71+
// ❌ BUG - Stale closure
72+
const [count, setCount] = useState(0);
73+
74+
useEffect(() => {
75+
const timer = setInterval(() => {
76+
setCount(count + 1); // ❌ Always uses initial count
77+
}, 1000);
78+
return () => clearInterval(timer);
79+
}, []); // Missing count dependency
80+
81+
// ✅ FIX - Functional update
82+
useEffect(() => {
83+
const timer = setInterval(() => {
84+
setCount((prev) => prev + 1); // ✅ Uses current count
85+
}, 1000);
86+
return () => clearInterval(timer);
87+
}, []);
88+
```
89+
90+
### 2. useEffect Issues
91+
92+
| Bug Type | Symptoms | Solution |
93+
| ---------------------- | -------------------- | -------------------- |
94+
| **Memory leak** | Performance degrades | Add cleanup function |
95+
| **Missing cleanup** | Side effects persist | Return cleanup |
96+
| **Wrong dependencies** | Unexpected behavior | Fix dependency array |
97+
98+
**Example fix:**
99+
100+
```typescript
101+
// ❌ BUG - No cleanup
102+
useEffect(() => {
103+
const subscription = api.subscribe(handleData);
104+
}, []);
105+
106+
// ✅ FIX - Cleanup on unmount
107+
useEffect(() => {
108+
const subscription = api.subscribe(handleData);
109+
return () => subscription.unsubscribe();
110+
}, []);
111+
```
112+
113+
### 3. Event Handler Issues
114+
115+
| Bug Type | Symptoms | Solution |
116+
| ---------------------- | ------------------- | -------------------------- |
117+
| **Handler not called** | Click doesn't work | Check event binding |
118+
| **Multiple calls** | Handler fires twice | Remove duplicate listeners |
119+
| **Wrong event** | Unexpected behavior | Use correct event type |
120+
121+
**Example fix:**
122+
123+
```typescript
124+
// ❌ BUG - Handler called immediately
125+
<button onClick={handleClick()}> // ❌ Calls on render
126+
127+
// ✅ FIX - Pass function reference
128+
<button onClick={handleClick}> // ✅ Calls on click
129+
<button onClick={() => handleClick(arg)}> // ✅ With arguments
130+
```
131+
132+
### 4. Rendering Issues
133+
134+
| Bug Type | Symptoms | Solution |
135+
| ---------------------- | -------------------- | ----------------------- |
136+
| **Conditional render** | Component disappears | Fix condition logic |
137+
| **Key prop** | Wrong items update | Use stable unique keys |
138+
| **Forced re-render** | Performance issues | Memoize expensive calcs |
139+
140+
**Example fix:**
141+
142+
```typescript
143+
// ❌ BUG - Index as key
144+
{items.map((item, index) => (
145+
<div key={index}>{item.name}</div>
146+
))}
147+
148+
// ✅ FIX - Unique stable key
149+
{items.map(item => (
150+
<div key={item.id}>{item.name}</div>
151+
))}
152+
```
153+
154+
### 5. Accessibility Bugs
155+
156+
| Bug Type | Symptoms | Solution |
157+
| ------------------- | -------------------- | --------------------- |
158+
| **Missing ARIA** | Screen reader issues | Add ARIA attributes |
159+
| **No keyboard nav** | Can't use keyboard | Add keyboard handlers |
160+
| **Poor contrast** | Hard to read | Fix colors |
161+
162+
**Example fix:**
163+
164+
```typescript
165+
// ❌ BUG - Div as button (not accessible)
166+
<div onClick={handleClick}>
167+
Submit
168+
</div>
169+
170+
// ✅ FIX - Proper button element
171+
<button onClick={handleClick} aria-label="Submit form">
172+
Submit
173+
</button>
174+
```
175+
176+
---
177+
178+
## 🔧 Fix Implementation Process
179+
180+
### 1. Write Failing Test
181+
182+
```typescript
183+
it('should fix the bug', async () => {
184+
render(<Component />);
185+
186+
await userEvent.click(screen.getByRole('button'));
187+
188+
expect(screen.getByText(/expected/i)).toBeInTheDocument();
189+
});
190+
```
191+
192+
### 2. Implement Fix
193+
194+
```typescript
195+
// Fix the component
196+
export function Component() {
197+
// Corrected implementation
198+
return <div>Fixed!</div>;
199+
}
200+
```
201+
202+
### 3. Verify Test Passes
203+
204+
```bash
205+
npm test -- Component.test.tsx
206+
```
207+
208+
### 4. Test in Browser
209+
210+
```bash
211+
npm run dev
212+
# Manually test the fix
213+
```
214+
215+
### 5. Update Documentation
216+
217+
```typescript
218+
/**
219+
* Component that was buggy
220+
*
221+
* @fixed v1.2.3 - Fixed click handler issue
222+
*/
223+
export function Component(props: Props): JSX.Element;
224+
```
225+
226+
---
227+
228+
## ⚠️ Common Gotchas
229+
230+
### 1. Prop Mutation
231+
232+
```typescript
233+
// ❌ Bug - Mutating props
234+
const sortedItems = props.items.sort(); // Mutates!
235+
236+
// ✅ Fix - Create copy
237+
const sortedItems = [...props.items].sort();
238+
```
239+
240+
### 2. Incorrect Comparison
241+
242+
```typescript
243+
// ❌ Bug - Object comparison
244+
if (user === prevUser) {
245+
} // Always false (different references)
246+
247+
// ✅ Fix - Compare values
248+
if (user.id === prevUser.id) {
249+
}
250+
```
251+
252+
### 3. Missing Null Checks
253+
254+
```typescript
255+
// ❌ Bug - No null check
256+
return user.profile.name; // Crashes if profile is null
257+
258+
// ✅ Fix - Optional chaining
259+
return user?.profile?.name ?? 'Unknown';
260+
```
261+
262+
---
263+
264+
## 📋 Bugfix Checklist
265+
266+
- [ ] Bug reproduced in browser
267+
- [ ] Failing test created
268+
- [ ] Root cause identified
269+
- [ ] Fix implemented
270+
- [ ] All tests pass
271+
- [ ] Manually tested in browser
272+
- [ ] Accessibility verified
273+
- [ ] Documentation updated
274+
- [ ] CHANGELOG updated
275+
- [ ] No regression

0 commit comments

Comments
 (0)