Refactore

.changeset/improved-field-styles.md

@@ -0,0 +1,14 @@
+---
+'@ciscode/ui-form-kit': patch
+---
+
+Improved field component styles with transitions, hover states, and success states
+
+- Added transition-all duration-150 for smooth animations
+- Added hover:border-gray-400 for hover states on inputs
+- Added green success state (border-green-500) when field is valid
+- Improved responsive padding (px-3 py-2 sm:px-4 sm:py-2.5)
+- Better disabled states with hover:border-gray-300
+- Improved checkbox, radio, and switch sizing
+- Better file input button styling with blue background
+- Added aria-live=polite to error messages

.changeset/instructions-refactor.md

@@ -0,0 +1,33 @@
+---
+'@ciscode/ui-form-kit': minor
+---
+
+Refactor codebase to align with copilot-instructions.md guidelines
+
+**Architecture Changes:**
+
+- Restructured to Component-Hook-Model (CHM) architecture
+- Created `src/core/` for framework-free pure functions (validator, conditional, schema-helpers)
+- Created `src/models/` for TypeScript contracts with zero runtime logic
+- Restricted public API exports in `src/index.ts`
+
+**Accessibility Improvements:**
+
+- Fixed RadioGroupField to use proper `role="radiogroup"` with `aria-labelledby`
+- Fixed SwitchField to use proper `role="switch"` with keyboard support (Enter/Space)
+
+**Bug Fixes:**
+
+- Fixed `handleSubmit` to mark fields with errors as touched on validation failure
+- Fixed `useAsyncValidation` to properly handle DOMException AbortError
+
+**Testing:**
+
+- Added comprehensive test suite with 192 tests
+- Achieved 80%+ coverage: 94.64% statements, 83.77% branches, 83.33% functions
+- Coverage tests for core/, hooks/, and components/
+
+**Documentation:**
+
+- Enhanced JSDoc for FieldType enum values
+- Enhanced JSDoc for ConditionalOperator types

.github/instructions/bugfix.instructions.md

@@ -21,7 +21,7 @@
 describe('Bug: Button not disabled when loading', () => {
   it('should disable button during loading', () => {
     render(<Button isLoading>Click</Button>);
-    
+
     // This SHOULD pass but currently FAILS
     expect(screen.getByRole('button')).toBeDisabled();
   });
@@ -59,11 +59,11 @@ useEffect(() => {
 
 ### 1. State Management Issues
 
-| Bug Type              | Symptoms               | Solution                    |
-| --------------------- | ---------------------- | --------------------------- |
-| **Stale closure**     | Old values in callback | Update dependencies         |
-| **Infinite loop**     | Component re-renders   | Fix useEffect dependencies  |
-| **Lost state**        | State resets unexpectedly| Check component key         |
+| Bug Type          | Symptoms                  | Solution                   |
+| ----------------- | ------------------------- | -------------------------- |
+| **Stale closure** | Old values in callback    | Update dependencies        |
+| **Infinite loop** | Component re-renders      | Fix useEffect dependencies |
+| **Lost state**    | State resets unexpectedly | Check component key        |
 
 **Example fix:**
 
@@ -81,19 +81,19 @@ useEffect(() => {
 // ✅ FIX - Functional update
 useEffect(() => {
   const timer = setInterval(() => {
-    setCount(prev => prev + 1); // ✅ Uses current count
+    setCount((prev) => prev + 1); // ✅ Uses current count
   }, 1000);
   return () => clearInterval(timer);
 }, []);
 ```
 
 ### 2. useEffect Issues
 
-| Bug Type              | Symptoms              | Solution                    |
-| --------------------- | --------------------- | --------------------------- |
-| **Memory leak**       | Performance degrades  | Add cleanup function        |
-| **Missing cleanup**   | Side effects persist  | Return cleanup              |
-| **Wrong dependencies**| Unexpected behavior   | Fix dependency array        |
+| Bug Type               | Symptoms             | Solution             |
+| ---------------------- | -------------------- | -------------------- |
+| **Memory leak**        | Performance degrades | Add cleanup function |
+| **Missing cleanup**    | Side effects persist | Return cleanup       |
+| **Wrong dependencies** | Unexpected behavior  | Fix dependency array |
 
 **Example fix:**
 
@@ -112,11 +112,11 @@ useEffect(() => {
 
 ### 3. Event Handler Issues
 
-| Bug Type              | Symptoms              | Solution                    |
-| --------------------- | --------------------- | --------------------------- |
-| **Handler not called**| Click doesn't work    | Check event binding         |
-| **Multiple calls**    | Handler fires twice   | Remove duplicate listeners  |
-| **Wrong event**       | Unexpected behavior   | Use correct event type      |
+| Bug Type               | Symptoms            | Solution                   |
+| ---------------------- | ------------------- | -------------------------- |
+| **Handler not called** | Click doesn't work  | Check event binding        |
+| **Multiple calls**     | Handler fires twice | Remove duplicate listeners |
+| **Wrong event**        | Unexpected behavior | Use correct event type     |
 
 **Example fix:**
 
@@ -131,11 +131,11 @@ useEffect(() => {
 
 ### 4. Rendering Issues
 
-| Bug Type              | Symptoms              | Solution                    |
-| --------------------- | --------------------- | --------------------------- |
-| **Conditional render**| Component disappears  | Fix condition logic         |
-| **Key prop**          | Wrong items update    | Use stable unique keys      |
-| **Forced re-render**  | Performance issues    | Memoize expensive calcs     |
+| Bug Type               | Symptoms             | Solution                |
+| ---------------------- | -------------------- | ----------------------- |
+| **Conditional render** | Component disappears | Fix condition logic     |
+| **Key prop**           | Wrong items update   | Use stable unique keys  |
+| **Forced re-render**   | Performance issues   | Memoize expensive calcs |
 
 **Example fix:**
 
@@ -153,11 +153,11 @@ useEffect(() => {
 
 ### 5. Accessibility Bugs
 
-| Bug Type              | Symptoms              | Solution                    |
-| --------------------- | --------------------- | --------------------------- |
-| **Missing ARIA**      | Screen reader issues  | Add ARIA attributes         |
-| **No keyboard nav**   | Can't use keyboard    | Add keyboard handlers       |
-| **Poor contrast**     | Hard to read          | Fix colors                  |
+| Bug Type            | Symptoms             | Solution              |
+| ------------------- | -------------------- | --------------------- |
+| **Missing ARIA**    | Screen reader issues | Add ARIA attributes   |
+| **No keyboard nav** | Can't use keyboard   | Add keyboard handlers |
+| **Poor contrast**   | Hard to read         | Fix colors            |
 
 **Example fix:**
 
@@ -182,9 +182,9 @@ useEffect(() => {
 ```typescript
 it('should fix the bug', async () => {
   render(<Component />);
-  
+
   await userEvent.click(screen.getByRole('button'));
-  
+
   expect(screen.getByText(/expected/i)).toBeInTheDocument();
 });
 ```
@@ -217,10 +217,10 @@ npm run dev
 ```typescript
 /**
  * Component that was buggy
- * 
+ *
  * @fixed v1.2.3 - Fixed click handler issue
  */
-export function Component(props: Props): JSX.Element
+export function Component(props: Props): JSX.Element;
 ```
 
 ---
@@ -241,10 +241,12 @@ const sortedItems = [...props.items].sort();
 
 ```typescript
 // ❌ Bug - Object comparison
-if (user === prevUser) { } // Always false (different references)
+if (user === prevUser) {
+} // Always false (different references)
 
 // ✅ Fix - Compare values
-if (user.id === prevUser.id) { }
+if (user.id === prevUser.id) {
+}
 ```
 
 ### 3. Missing Null Checks

.github/instructions/components.instructions.md

@@ -7,6 +7,7 @@
 ## 🎯 Component Architecture
 
 ### Component Structure
+
 ```
 ComponentName/
   ├── ComponentName.tsx       # Main component
@@ -17,6 +18,7 @@ ComponentName/
 ```
 
 ### Form Component Template
+
 ```typescript
 import React, { forwardRef } from 'react';
 import { FormFieldProps } from './FormField.types';
@@ -52,6 +54,7 @@ FormField.displayName = 'FormField';
 ## 📝 Props Standards
 
 ### Form Component Props
+
 ```typescript
 export interface FormFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
   /** Field label text */
@@ -66,6 +69,7 @@ export interface FormFieldProps extends React.InputHTMLAttributes<HTMLInputEleme
 ```
 
 ### Required Props Documentation
+
 - ✅ JSDoc for all props
 - ✅ Validation rules clearly stated
 - ✅ onChange/onBlur signatures with examples
@@ -76,6 +80,7 @@ export interface FormFieldProps extends React.InputHTMLAttributes<HTMLInputEleme
 ## ♿ Accessibility (A11y)
 
 ### Form Accessibility
+
 ```typescript
 // ✅ Good - Accessible form field
 <div className="field">
@@ -105,6 +110,7 @@ export interface FormFieldProps extends React.InputHTMLAttributes<HTMLInputEleme
 ```
 
 ### Required Accessibility Features
+
 - ✅ `<label>` with `htmlFor` attribute
 - ✅ `aria-required` for required fields
 - ✅ `aria-invalid` for fields with errors
@@ -117,12 +123,13 @@ export interface FormFieldProps extends React.InputHTMLAttributes<HTMLInputEleme
 ## 🎨 Theming & Styling
 
 ### Theme Support for Forms
+
 ```typescript
 import { useTheme } from '../context/ThemeContext';
 
 export const ThemedInput: React.FC = () => {
   const { theme } = useTheme();
-  
+
   return (
     <input
       style={{
@@ -138,6 +145,7 @@ export const ThemedInput: React.FC = () => {
 ```
 
 ### Form Error States
+
 ```typescript
 const errorStyles = {
   borderColor: theme.colors.error,
@@ -154,6 +162,7 @@ const successStyles = {
 ## 🧪 Form Component Testing
 
 ### Test Coverage Requirements
+
 ```typescript
 describe('FormField', () => {
   it('renders label and input', () => {
@@ -174,7 +183,7 @@ describe('FormField', () => {
   it('calls onChange when value changes', async () => {
     const onChange = jest.fn();
     render(<FormField label="Name" onChange={onChange} />);
-    
+
     await userEvent.type(screen.getByLabelText('Name'), 'John');
     expect(onChange).toHaveBeenCalled();
   });
@@ -188,20 +197,21 @@ describe('FormField', () => {
 ```
 
 ### Validation Testing
+
 ```typescript
 it('validates email format', async () => {
   const { rerender } = render(
     <FormField label="Email" type="email" value="invalid" error={undefined} />
   );
-  
+
   // Trigger validation
   fireEvent.blur(screen.getByLabelText('Email'));
-  
+
   // Update with error
   rerender(
     <FormField label="Email" type="email" value="invalid" error="Invalid email format" />
   );
-  
+
   expect(screen.getByRole('alert')).toHaveTextContent('Invalid email format');
 });
 ```
@@ -211,6 +221,7 @@ it('validates email format', async () => {
 ## 🔄 Form State Management
 
 ### Controlled Components
+
 ```typescript
 const [value, setValue] = useState('');
 
@@ -222,6 +233,7 @@ const [value, setValue] = useState('');
 ```
 
 ### React Hook Form Integration
+
 ```typescript
 import { useForm, Controller } from 'react-hook-form';
 
@@ -242,14 +254,15 @@ const { control, handleSubmit } = useForm();
 ```
 
 ### Form Submission
+
 ```typescript
 const handleSubmit = async (data: FormData) => {
   try {
     await submitForm(data);
   } catch (error) {
     setError('submission', {
       type: 'manual',
-      message: 'Failed to submit form'
+      message: 'Failed to submit form',
     });
   }
 };
@@ -260,6 +273,7 @@ const handleSubmit = async (data: FormData) => {
 ## 📦 Component Exports
 
 ### Public API (index.ts)
+
 ```typescript
 // Export form components
 export { FormField } from './FormField';
@@ -277,6 +291,7 @@ export type { FormSelectProps } from './FormSelect.types';
 ## 🚫 Anti-Patterns to Avoid
 
 ### ❌ Uncontrolled Forms
+
 ```typescript
 // Bad - No state management
 <input type="text" defaultValue="initial" />
@@ -287,6 +302,7 @@ const [value, setValue] = useState('initial');
 ```
 
 ### ❌ Missing Error Handling
+
 ```typescript
 // Bad - Silent failures
 <form onSubmit={handleSubmit}>
@@ -303,6 +319,7 @@ const [value, setValue] = useState('initial');
 ```
 
 ### ❌ Inline Validation on Every Keystroke
+
 ```typescript
 // Bad - Validates on every keystroke (annoying UX)
 <input onChange={(e) => validateEmail(e.target.value)} />