@kirill.konshin/react 0.0.5 → 0.0.6

package/src/form/form.tsx

@@ -1,178 +0,0 @@
-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({ 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.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
-          data: SafeTypeOf<S>;
-          errors?: never;
-      }
-    | {
-          success: false;
-          data?: MaybeTypeOf<S>;
-          errors?: Errors<S>;
-      };
-
-export const FormContext: Context<{
-    schema: ZodObject;
-}> = createContext(null as never);
-
-export interface FormProps<S extends ZodObject> {
-    schema: S;
-    children: any;
-}
-
-export const Form: FC<FormProps<any>> = memo(function Form({ schema, children }) {
-    const value = useMemo(() => ({ schema }), [schema]);
-    return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
-});
-
-const getShape = <S extends ZodObject>(schema: S) =>
-    (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 z.output<S>,
-        data?: MaybeTypeOf<S>,
-        errors?: Errors<S>,
-        mui?: boolean,
-    ) => {
-        label?: any;
-        helperText?: string;
-        error?: boolean;
-        name: keyof z.output<S>;
-        id: keyof z.output<S>;
-        required: boolean;
-        maxLength: number;
-        type: string;
-        defaultValue?: Partial<z.output<S>>[keyof z.output<S>];
-    };
-    validate: (formData: FormData) => Validation<S>;
-    validationError: (data: MaybeTypeOf<S>, errors: Errors<S>) => Validation<S>;
-} {
-    if (!getShape(schema)) {
-        throw new Error('Invalid schema: only z.object() or z.object().refine() are supported');
-    }
-
-    function register(
-        name: keyof z.output<S>,
-        data?: MaybeTypeOf<S>,
-        errors?: Errors<S>,
-        mui: boolean = false,
-    ): {
-        label?: any;
-        helperText?: string;
-        error?: boolean;
-        name: keyof z.output<S>;
-        id: keyof z.output<S>;
-        required: boolean;
-        maxLength: number;
-        type: string;
-        defaultValue?: Partial<z.output<S>>[keyof z.output<S>];
-    } {
-        const field = getShape(schema)[name];
-        return {
-            name,
-            id: name,
-            required: isRequired(field),
-            maxLength: maxLength(field),
-            type: field.isEmail ? 'email' : (name as string).includes('password') ? 'password' : 'text',
-            defaultValue: data?.[name],
-            ...(mui
-                ? {
-                      label: field.description,
-                      helperText: errors?.[name]?.join(', '),
-                      error: !!errors?.[name]?.length,
-                  }
-                : {}),
-        };
-    }
-
-    function validationError(data: MaybeTypeOf<S>, errors: Errors<S>): Validation<S> {
-        return {
-            success: false,
-            data, // data is undefined if there are errors
-            errors, // Next.js will butcher error object, so we provide something more primitive
-        };
-    }
-
-    function validate(formData: FormData): Validation<S> {
-        const rawData = Object.fromEntries(formData) as z.output<S>;
-        const result = schema.safeParse(rawData);
-
-        // console.log('Validate result', { error, data, rawData });
-
-        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, z.flattenError(result.error).fieldErrors as any);
-        }
-
-        return { success: true, data: result.data };
-    }
-
-    return { register, validate, validationError };
-}
-
-interface FieldProps<S extends ZodObject> {
-    children?: any;
-    name: keyof z.output<S>;
-    errors?: Validation<S>['errors'];
-    hint?: string;
-    className?: string;
-    labelProps?: any;
-    [key: string]: any;
-}
-
-export const Field: FC<FieldProps<any>> = memo(function Field({
-    children,
-    name,
-    errors,
-    hint,
-    className,
-    labelProps,
-    ...props
-}) {
-    const { schema } = useContext(FormContext);
-    const { description } = getShape(schema)[name];
-
-    return (
-        <div {...props} className={clsx('form-row', className)}>
-            {description && (
-                <label {...labelProps} htmlFor={name}>
-                    {description}
-                </label>
-            )}
-            {children}
-            {hint && <Hint>{hint}</Hint>}
-            {errors?.[name as any]?.map((e: string) => (
-                <Hint error key={e}>
-                    {e}
-                </Hint>
-            ))}
-        </div>
-    );
-});
-
-export interface HintProps {
-    children: any;
-    error?: boolean;
-}
-
-export const Hint: FC<HintProps> = memo(function Hint({ children, error }) {
-    return <div className={`hint ${error ? 'hint-error' : ''}`}>{children}</div>;
-});

package/src/form/index.ts

@@ -1,2 +0,0 @@
-export * from './client';
-export * from './form';

package/src/index.ts

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

package/src/keyboard.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import {
-    useEffect,
-    createContext,
-    useMemo,
-    useState,
-    Dispatch,
-    SetStateAction,
-    useContext,
-    FC,
-    memo,
-    Context,
-} from 'react';
-
-const isCtrlOrMeta = (e: KeyboardEvent) => e.metaKey || e.ctrlKey;
-
-const EVENT = 'keydown';
-
-export type Hotkeys = Record<KeyboardEvent['code'], (e: KeyboardEvent) => void>;
-
-export type HotkeyContextType = {
-    enabled: boolean;
-    setEnabled: Dispatch<SetStateAction<boolean>>;
-};
-
-export const HotkeysContext: Context<HotkeyContextType> = createContext<{
-    enabled: boolean;
-    setEnabled: Dispatch<SetStateAction<boolean>>;
-}>(null as never);
-
-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);
-
-    useEffect(() => {
-        if (typeof document === 'undefined' || !enabled) {
-            return;
-        }
-
-        const ctrl = new AbortController();
-
-        window.addEventListener(
-            EVENT,
-            (e: KeyboardEvent) => {
-                if (!isCtrlOrMeta(e)) return;
-
-                for (const [code, callback] of Object.entries(hotkeys)) {
-                    if (e.code === code) {
-                        callback(e);
-                        return;
-                    }
-                }
-            },
-            { signal: ctrl.signal, capture: true },
-        );
-
-        return () => {
-            ctrl.abort();
-        };
-    }, [hotkeys, enabled]);
-};

package/src/useFetch.test.tsx

@@ -1,424 +0,0 @@
-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);
-    });
-});