fieldwise 0.1.0

package/dist/test/fieldwise.test.js

@@ -0,0 +1,177 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { fieldwise } from '../fieldwise';
+import { z } from 'zod';
+import { validateZodSchema } from '../validateZodSchema';
+describe('fieldwise', () => {
+    describe('useForm hook', () => {
+        it('should return initial values', () => {
+            const { useForm } = fieldwise({ name: '', email: '' }).hooks();
+            const { result } = renderHook(() => useForm());
+            expect(result.current.fields.name.value).toBe('');
+            expect(result.current.fields.email.value).toBe('');
+        });
+        it('should update field value', () => {
+            const { useForm } = fieldwise({ name: '' }).hooks();
+            const { result } = renderHook(() => useForm());
+            act(() => {
+                result.current.emit('change', 'name', 'John');
+            });
+            expect(result.current.fields.name.value).toBe('John');
+        });
+        it('should mark field as touched after change', async () => {
+            const { useForm } = fieldwise({ name: '' }).hooks();
+            const { result } = renderHook(() => useForm());
+            expect(result.current.isTouched).toBe(false);
+            await act(async () => {
+                result.current.emit('change', 'name', 'John');
+                await new Promise((resolve) => setTimeout(resolve, 0));
+            });
+            expect(result.current.isTouched).toBe(true);
+        });
+        it('should reset form', async () => {
+            const { useForm } = fieldwise({ name: 'John' }).hooks();
+            const { result } = renderHook(() => useForm());
+            await act(async () => {
+                result.current.emit('change', 'name', 'Jane');
+                await new Promise((resolve) => setTimeout(resolve, 0));
+            });
+            expect(result.current.fields.name.value).toBe('Jane');
+            await act(async () => {
+                result.current.emit('reset');
+                await new Promise((resolve) => setTimeout(resolve, 0));
+            });
+            expect(result.current.fields.name.value).toBe('John');
+        });
+    });
+    describe('useSlice hook', () => {
+        it('should only include specified fields', () => {
+            const { useSlice } = fieldwise({ name: '', email: '', age: 0 }).hooks();
+            const { result } = renderHook(() => useSlice(['name', 'email']));
+            expect(result.current.fields).toHaveProperty('name');
+            expect(result.current.fields).toHaveProperty('email');
+            expect(result.current.fields).not.toHaveProperty('age');
+        });
+        it('should update when subscribed field changes', () => {
+            const { useSlice } = fieldwise({ name: '', email: '' }).hooks();
+            const { result } = renderHook(() => useSlice(['name']));
+            act(() => {
+                result.current.emit('change', 'name', 'John');
+            });
+            expect(result.current.fields.name.value).toBe('John');
+        });
+    });
+    describe('input helper (i)', () => {
+        it('should generate input props', () => {
+            const { useForm } = fieldwise({ email: '' }).hooks();
+            const { result } = renderHook(() => useForm());
+            const props = result.current.i('email');
+            expect(props.name).toBe('email');
+            expect(props.value).toBe('');
+            expect(props.error).toBe(null);
+            expect(typeof props.onChange).toBe('function');
+        });
+        it('should update value through onChange', () => {
+            const { useForm } = fieldwise({ email: '' }).hooks();
+            const { result } = renderHook(() => useForm());
+            act(() => {
+                result.current.i('email').onChange('test@example.com');
+            });
+            expect(result.current.fields.email.value).toBe('test@example.com');
+        });
+    });
+    describe('validation', () => {
+        it('should validate with Zod schema', async () => {
+            const schema = z.object({
+                email: z.string().email('Invalid email')
+            });
+            const { useForm } = fieldwise({ email: '' })
+                .use(validateZodSchema(schema))
+                .hooks();
+            const { result } = renderHook(() => useForm());
+            await act(async () => {
+                let errors = null;
+                result.current.once('validated', ({ errors: validationErrors }) => {
+                    errors = validationErrors;
+                    if (validationErrors) {
+                        result.current.emit('errors', validationErrors);
+                    }
+                });
+                result.current.emit('validate');
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.fields.email.error).toBe('Invalid email');
+        });
+        it('should clear errors on valid input', async () => {
+            const schema = z.object({
+                email: z.string().email('Invalid email')
+            });
+            const { useForm } = fieldwise({ email: '' })
+                .use(validateZodSchema(schema))
+                .hooks();
+            const { result } = renderHook(() => useForm());
+            // First, validate with invalid email
+            await act(async () => {
+                result.current.once('validated', ({ errors: validationErrors }) => {
+                    if (validationErrors) {
+                        result.current.emit('errors', validationErrors);
+                    }
+                });
+                result.current.emit('validate');
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.fields.email.error).toBe('Invalid email');
+            // Then, update to valid email and validate again
+            await act(async () => {
+                result.current.emit('change', 'email', 'valid@example.com');
+                result.current.once('validated', ({ errors: validationErrors }) => {
+                    if (validationErrors) {
+                        result.current.emit('errors', validationErrors);
+                    }
+                });
+                result.current.emit('validate');
+                await new Promise((resolve) => setTimeout(resolve, 10));
+            });
+            expect(result.current.fields.email.error).toBe(null);
+        });
+    });
+    describe('touch events', () => {
+        it('should mark field as touched', async () => {
+            const { useForm } = fieldwise({ name: 'John' }).hooks();
+            const { result } = renderHook(() => useForm());
+            expect(result.current.fields.name.isTouched).toBe(false);
+            await act(async () => {
+                result.current.emit('touch', 'name');
+                await new Promise((resolve) => setTimeout(resolve, 0));
+            });
+            expect(result.current.fields.name.isTouched).toBe(true);
+            expect(result.current.fields.name.value).toBe('John');
+        });
+        it('should mark multiple fields as touched', async () => {
+            const { useForm } = fieldwise({ name: '', email: '', age: 0 }).hooks();
+            const { result } = renderHook(() => useForm());
+            await act(async () => {
+                result.current.emit('touchSome', ['name', 'email']);
+                await new Promise((resolve) => setTimeout(resolve, 0));
+            });
+            expect(result.current.fields.name.isTouched).toBe(true);
+            expect(result.current.fields.email.isTouched).toBe(true);
+            expect(result.current.fields.age.isTouched).toBe(false);
+        });
+    });
+    describe('emit.later', () => {
+        it('should defer event to microtask', async () => {
+            const { useForm } = fieldwise({ name: '' }).hooks();
+            const { result } = renderHook(() => useForm());
+            let validationRan = false;
+            result.current.once('validate', () => {
+                validationRan = true;
+            });
+            result.current.emit.later('validate');
+            expect(validationRan).toBe(false);
+            // Wait for setTimeout to execute
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            expect(validationRan).toBe(true);
+        });
+    });
+});

package/dist/test/setup.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=setup.d.ts.map

package/dist/test/setup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"setup.d.ts","sourceRoot":"","sources":["../../src/test/setup.ts"],"names":[],"mappings":""}

package/dist/test/setup.js

@@ -0,0 +1,9 @@
+import { expect, afterEach } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import * as matchers from '@testing-library/jest-dom/matchers';
+// Extend Vitest's expect with jest-dom matchers
+expect.extend(matchers);
+// Cleanup after each test
+afterEach(() => {
+    cleanup();
+});

package/dist/validateZodSchema.d.ts

@@ -0,0 +1,4 @@
+import { z } from 'zod';
+import type { Form, Values } from './Form';
+export declare function validateZodSchema<T extends Values>(schema: z.ZodSchema<T>): (form: Form<T>) => void;
+//# sourceMappingURL=validateZodSchema.d.ts.map

package/dist/validateZodSchema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validateZodSchema.d.ts","sourceRoot":"","sources":["../src/validateZodSchema.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,EAAU,MAAM,QAAQ,CAAC;AAEnD,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IACvD,MAAM,IAAI,CAAC,CAAC,CAAC,KAAG,IAAI,CA6BtC"}

package/dist/validateZodSchema.js

@@ -0,0 +1,29 @@
+export function validateZodSchema(schema) {
+    return function (form) {
+        form.on('validate', () => {
+            const values = form.getValues();
+            const result = schema.safeParse(values);
+            if (result.success) {
+                // Validation successful - emit with null errors
+                form.emit('validated', {
+                    values,
+                    errors: null
+                });
+            }
+            else {
+                // Validation failed - convert Zod errors to our format
+                const errors = {};
+                result.error.issues.forEach((issue) => {
+                    const path = issue.path[0];
+                    if (path && typeof path === 'string' && !errors[path]) {
+                        errors[path] = issue.message;
+                    }
+                });
+                form.emit('validated', {
+                    values,
+                    errors
+                });
+            }
+        });
+    };
+}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "fieldwise",
+  "version": "0.1.0",
+  "description": "Type-safe, reactive form management for React with fine-grained field subscriptions",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/akuzko/fieldwise.git"
+  },
+  "bugs": {
+    "url": "https://github.com/akuzko/fieldwise/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "forms",
+    "validation",
+    "zod",
+    "typescript"
+  ],
+  "author": "Artem Kuzko <a.kuzko@gmail.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "zod": "^3.0.0 || ^4.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/react": "^18.0.0",
+    "@vitest/coverage-v8": "^4.0.16",
+    "@vitest/ui": "^4.0.16",
+    "jsdom": "^23.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.16",
+    "zod": "^4.3.5"
+  }
+}