@kirill.konshin/react 0.0.1 → 0.0.3

package/src/form/form.tsx

@@ -1,18 +1,18 @@
-import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';
+import { z } from 'zod';
 import { Context, createContext, useContext, useMemo, JSX, FC, memo } from 'react';
 import clsx from 'clsx';
 
 const nonEmpty = 'This field cannot be empty';
 
-export const stringRequired = (): z.ZodString => z.string({ required_error: nonEmpty }).min(1, nonEmpty);
+export const stringRequired = (): z.ZodString => z.string({ error: nonEmpty }).min(1, { error: nonEmpty });
 export const maxLength = (schema: z.ZodString): number => schema.maxLength || 0;
 export const minLength = (schema: z.ZodString): number => schema.minLength || 0;
 export const isRequired = (schema: z.ZodString): boolean => minLength(schema) > 0;
 
-export type ZodObject = z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>>; // z.ZodType<any, any, any>
-export type MaybeTypeOf<S extends ZodObject> = Partial<TypeOf<S>>;
-export type SafeTypeOf<S extends ZodObject> = SafeParseReturnType<TypeOf<S>, TypeOf<S>>['data'];
-export type Errors<S extends ZodObject> = typeToFlattenedError<TypeOf<S>>['fieldErrors'];
+export type ZodObject = z.ZodObject<any> | z.ZodPipe<any, any>; // z.ZodType<any, any, any>
+export type MaybeTypeOf<S extends ZodObject> = Partial<z.output<S>>;
+export type SafeTypeOf<S extends ZodObject> = z.core.util.SafeParseResult<z.output<S>>['data'];
+export type Errors<S extends ZodObject> = z.core.$ZodFlattenedError<z.output<S>>['fieldErrors'];
 export type Validation<S extends ZodObject> =
     | {
           success: true; // this is true only if form was validated successfully
@@ -40,13 +40,13 @@ export const Form: FC<FormProps<any>> = memo(function Form({ schema, children })
 });
 
 const getShape = <S extends ZodObject>(schema: S) =>
-    (schema as z.ZodObject<any>).shape || (schema as z.ZodEffects<z.ZodObject<any>>).sourceType().shape;
+    (schema as z.ZodObject<any>).shape || (schema as z.ZodPipe<any, any>).in.shape;
 
 export function create<S extends ZodObject>(
     schema: S,
 ): {
     register: (
-        name: keyof TypeOf<S>,
+        name: keyof z.output<S>,
         data?: MaybeTypeOf<S>,
         errors?: Errors<S>,
         mui?: boolean,
@@ -54,12 +54,12 @@ export function create<S extends ZodObject>(
         label?: any;
         helperText?: string;
         error?: boolean;
-        name: keyof z.TypeOf<S>;
-        id: keyof z.TypeOf<S>;
+        name: keyof z.output<S>;
+        id: keyof z.output<S>;
         required: boolean;
         maxLength: number;
         type: string;
-        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<S>];
+        defaultValue?: Partial<z.output<S>>[keyof z.output<S>];
     };
     validate: (formData: FormData) => Validation<S>;
     validationError: (data: MaybeTypeOf<S>, errors: Errors<S>) => Validation<S>;
@@ -69,7 +69,7 @@ export function create<S extends ZodObject>(
     }
 
     function register(
-        name: keyof TypeOf<S>,
+        name: keyof z.output<S>,
         data?: MaybeTypeOf<S>,
         errors?: Errors<S>,
         mui: boolean = false,
@@ -77,12 +77,12 @@ export function create<S extends ZodObject>(
         label?: any;
         helperText?: string;
         error?: boolean;
-        name: keyof z.TypeOf<S>;
-        id: keyof z.TypeOf<S>;
+        name: keyof z.output<S>;
+        id: keyof z.output<S>;
         required: boolean;
         maxLength: number;
         type: string;
-        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<S>];
+        defaultValue?: Partial<z.output<S>>[keyof z.output<S>];
     } {
         const field = getShape(schema)[name];
         return {
@@ -111,18 +111,18 @@ export function create<S extends ZodObject>(
     }
 
     function validate(formData: FormData): Validation<S> {
-        const rawData = Object.fromEntries(formData) as TypeOf<S>;
-        const { error, data } = schema.safeParse(rawData);
+        const rawData = Object.fromEntries(formData) as z.output<S>;
+        const result = schema.safeParse(rawData);
 
         // console.log('Validate result', { error, data, rawData });
 
-        if (error) {
+        if (!result.success) {
             // data is undefined if there are errors
             // Next.js will butcher error object, so we provide something more primitive
-            return validationError(rawData, error.flatten().fieldErrors as any);
+            return validationError(rawData, z.flattenError(result.error).fieldErrors as any);
         }
 
-        return { success: true, data };
+        return { success: true, data: result.data };
     }
 
     return { register, validate, validationError };
@@ -130,7 +130,7 @@ export function create<S extends ZodObject>(
 
 interface FieldProps<S extends ZodObject> {
     children?: any;
-    name: keyof TypeOf<S>;
+    name: keyof z.output<S>;
     errors?: Validation<S>['errors'];
     hint?: string;
     className?: string;
@@ -159,7 +159,7 @@ export const Field: FC<FieldProps<any>> = memo(function Field({
             )}
             {children}
             {hint && <Hint>{hint}</Hint>}
-            {errors?.[name]?.map((e: string) => (
+            {errors?.[name as any]?.map((e: string) => (
                 <Hint error key={e}>
                     {e}
                 </Hint>

package/src/index.ts

@@ -1,5 +1,5 @@
-export * from './form';
 export * from './apiCall';
 export * from './keyboard';
 export * from './useFetch';
 export * from './useFetcher';
+export * from './form';

package/src/keyboard.tsx

@@ -1,6 +1,17 @@
 'use client';
 
-import { useEffect, createContext, useMemo, useState, Dispatch, SetStateAction, useContext, FC, Context } from 'react';
+import {
+    useEffect,
+    createContext,
+    useMemo,
+    useState,
+    Dispatch,
+    SetStateAction,
+    useContext,
+    FC,
+    memo,
+    Context,
+} from 'react';
 
 const isCtrlOrMeta = (e: KeyboardEvent) => e.metaKey || e.ctrlKey;
 
@@ -18,13 +29,17 @@ export const HotkeysContext: Context<HotkeyContextType> = createContext<{
     setEnabled: Dispatch<SetStateAction<boolean>>;
 }>(null as never);
 
-export const HotkeysProvider: FC<any> = ({ children }) => {
+export type HotkeysProviderProps = {
+    children: any;
+};
+
+export const HotkeysProvider: FC<HotkeysProviderProps> = memo(function HotkeysProvider({ children }) {
     const [enabled, setEnabled] = useState(true);
 
     const control = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);
 
     return <HotkeysContext.Provider value={control}>{children}</HotkeysContext.Provider>;
-};
+});
 
 export const useHotkeys = (hotkeys: Hotkeys): void => {
     const { enabled } = useContext(HotkeysContext);

package/src/useFetch.test.tsx

@@ -0,0 +1,424 @@
+import { expect, describe, test, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
+import { useFetch } from './useFetch';
+import { act } from 'react';
+
+describe('useFetch', () => {
+    test('initializes with default value', () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        const [data, actionFn, isPending, error] = result.current;
+
+        expect(data).toBe('default');
+        expect(typeof actionFn).toBe('function');
+        expect(isPending).toBe(false);
+        expect(error).toBeUndefined();
+    });
+
+    test('executes function and updates data on success', async () => {
+        const mockFn = vi.fn(async () => 'success');
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[2]).toBe(false); // isPending becomes false
+        });
+
+        expect(result.current[0]).toBe('success');
+        expect(result.current[3]).toBeUndefined();
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    test('handles function arguments', async () => {
+        const mockFn = vi.fn(async (a: number, b: string) => `${a}-${b}`);
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1](42, 'test');
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('42-test');
+        });
+
+        expect(mockFn).toHaveBeenCalledWith(42, 'test');
+    });
+
+    test('sets isPending to true during execution', async () => {
+        let resolvePromise: (value: string) => void;
+        const promise = new Promise<string>((resolve) => {
+            resolvePromise = resolve;
+        });
+        const mockFn = vi.fn(async () => promise);
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        act(() => {
+            result.current[1]();
+        });
+
+        // Should be pending immediately
+        expect(result.current[2]).toBe(true);
+
+        await act(async () => {
+            resolvePromise!('resolved');
+            await promise;
+        });
+
+        await waitFor(() => {
+            expect(result.current[2]).toBe(false);
+        });
+
+        expect(result.current[0]).toBe('resolved');
+    });
+
+    test('captures and stores errors', async () => {
+        const error = new Error('Test error');
+        const mockFn = vi.fn(async () => {
+            throw error;
+        });
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[3]).toBe(error);
+        });
+
+        expect(result.current[0]).toBe('default'); // data remains unchanged
+        expect(result.current[2]).toBe(false); // isPending becomes false
+    });
+
+    test('does not update data if component unmounts before resolution', async () => {
+        let resolvePromise: (value: string) => void;
+        const promise = new Promise<string>((resolve) => {
+            resolvePromise = resolve;
+        });
+        const mockFn = vi.fn(async () => promise);
+        const { result, unmount } = renderHook(() => useFetch(mockFn, 'default'));
+
+        act(() => {
+            result.current[1]();
+        });
+
+        unmount();
+
+        await act(async () => {
+            resolvePromise!('resolved');
+            await promise;
+        });
+
+        // No assertions needed - just verifying no errors on unmount
+        expect(mockFn).toHaveBeenCalledTimes(1);
+    });
+
+    test('returns the promise from actionFn', async () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        let returnedPromise: Promise<string>;
+        await act(async () => {
+            returnedPromise = result.current[1]();
+        });
+
+        await expect(returnedPromise!).resolves.toBe('result');
+    });
+
+    test('handles multiple sequential calls', async () => {
+        const mockFn = vi.fn(async (n: number) => `result-${n}`);
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        await act(async () => {
+            result.current[1](1);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result-1');
+        });
+
+        await act(async () => {
+            result.current[1](2);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result-2');
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    test('preserves actionFn reference when fn dependency does not change', () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { result, rerender } = renderHook(() => useFetch(mockFn, 'default'));
+
+        const firstActionFn = result.current[1];
+
+        rerender();
+
+        const secondActionFn = result.current[1];
+
+        expect(firstActionFn).toBe(secondActionFn);
+    });
+
+    test('updates actionFn when fn dependency changes', async () => {
+        const mockFn1 = vi.fn(async () => 'result1');
+        const mockFn2 = vi.fn(async () => 'result2');
+
+        const { result, rerender } = renderHook(({ fn }) => useFetch(fn, 'default'), {
+            initialProps: { fn: mockFn1 },
+        });
+
+        const firstActionFn = result.current[1];
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result1');
+        });
+
+        // Change the function
+        rerender({ fn: mockFn2 });
+
+        const secondActionFn = result.current[1];
+
+        expect(firstActionFn).not.toBe(secondActionFn);
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('result2');
+        });
+
+        expect(mockFn1).toHaveBeenCalledTimes(1);
+        expect(mockFn2).toHaveBeenCalledTimes(1);
+    });
+
+    test('does not trigger execution on rerender', () => {
+        const mockFn = vi.fn(async () => 'result');
+        const { rerender } = renderHook(() => useFetch(mockFn, 'default'));
+
+        rerender();
+        rerender();
+        rerender();
+
+        expect(mockFn).not.toHaveBeenCalled();
+    });
+
+    test('handles concurrent calls correctly', async () => {
+        let callCount = 0;
+        const mockFn = vi.fn(async () => {
+            callCount++;
+            const currentCall = callCount;
+            await new Promise((resolve) => setTimeout(resolve, 10));
+            return `result-${currentCall}`;
+        });
+
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        // Fire multiple calls at once
+        await act(async () => {
+            result.current[1]();
+            result.current[1]();
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[2]).toBe(false);
+        });
+
+        // Last call should win
+        expect(mockFn).toHaveBeenCalledTimes(3);
+        expect(['result-1', 'result-2', 'result-3']).toContain(result.current[0]);
+    });
+
+    test('maintains separate state for different hook instances', async () => {
+        const mockFn1 = vi.fn(async () => 'result1');
+        const mockFn2 = vi.fn(async () => 'result2');
+
+        const { result: result1 } = renderHook(() => useFetch(mockFn1, 'default1'));
+        const { result: result2 } = renderHook(() => useFetch(mockFn2, 'default2'));
+
+        expect(result1.current[0]).toBe('default1');
+        expect(result2.current[0]).toBe('default2');
+
+        await act(async () => {
+            result1.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result1.current[0]).toBe('result1');
+        });
+
+        expect(result2.current[0]).toBe('default2'); // unchanged
+
+        await act(async () => {
+            result2.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result2.current[0]).toBe('result2');
+        });
+
+        expect(result1.current[0]).toBe('result1'); // still unchanged
+    });
+
+    test('handles closure over external state', async () => {
+        let externalValue = 10;
+
+        const { result, rerender } = renderHook(() => {
+            const mockFn = async () => `value-${externalValue}`;
+            return useFetch(mockFn, 'default');
+        });
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('value-10');
+        });
+
+        // Change external value and rerender
+        externalValue = 20;
+        rerender();
+
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('value-20');
+        });
+    });
+
+    test('clears error on successful subsequent call', async () => {
+        const error = new Error('Test error');
+        let shouldError = true;
+
+        const mockFn = vi.fn(async () => {
+            if (shouldError) {
+                throw error;
+            }
+            return 'success';
+        });
+
+        const { result } = renderHook(() => useFetch(mockFn, 'default'));
+
+        // First call errors
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[3]).toBe(error);
+        });
+
+        // Second call succeeds
+        shouldError = false;
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('success');
+        });
+
+        // Error is cleared automatically
+        expect(result.current[3]).toBe(undefined);
+    });
+
+    test('handles callback that returns a function with old value', async () => {
+        const mockFn = vi.fn((increment: number) => (oldValue: number) => oldValue + increment);
+        const { result } = renderHook(() => useFetch(mockFn, 0));
+
+        // First call - should call the function with oldValue (0) and get 0 + 5 = 5
+        await act(async () => {
+            result.current[1](5);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(5);
+        });
+
+        // Second call - should call the function with oldValue (5) and get 5 + 10 = 15
+        await act(async () => {
+            result.current[1](10);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(15);
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    test('handles multiple calls with old value pattern', async () => {
+        const mockFn = vi.fn(
+            (operation: string, value: number) => (oldValue: string) => `${oldValue}-${operation}${value}`,
+        );
+        const { result } = renderHook(() => useFetch(mockFn, 'initial'));
+
+        // First call
+        await act(async () => {
+            result.current[1]('add', 1);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('initial-add1');
+        });
+
+        // Second call - should use the updated value
+        await act(async () => {
+            result.current[1]('multiply', 2);
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe('initial-add1-multiply2');
+        });
+
+        expect(mockFn).toHaveBeenCalledTimes(2);
+    });
+
+    test('handles counter pattern with old value', async () => {
+        const increment = vi.fn(() => (prev: number) => prev + 1);
+        const { result } = renderHook(() => useFetch(increment, 0));
+
+        // First increment: 0 + 1 = 1
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(1);
+        });
+
+        // Second increment: 1 + 1 = 2
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(2);
+        });
+
+        // Third increment: 2 + 1 = 3
+        await act(async () => {
+            result.current[1]();
+        });
+
+        await waitFor(() => {
+            expect(result.current[0]).toBe(3);
+        });
+
+        expect(increment).toHaveBeenCalledTimes(3);
+    });
+});