@kirill.konshin/react 0.0.1

package/.ctirc

@@ -0,0 +1,11 @@
+{
+  "addNewline": true,
+  "fileExcludePatterns": [
+    "*.stories.*",
+    "*.test.*",
+    "*.fixture.*"
+  ],
+  "verbose": false,
+  "withoutBackupFile": true,
+  "withoutComment": true
+}

package/.turbo/turbo-build.log

@@ -0,0 +1,44 @@
+vite v7.0.6 building SSR bundle for production...
+create succeeded: /home/runner/work/utils/utils/packages/react/src
+transforming...
+✓ 8 modules transformed.
+rendering chunks...
+
+[vite:dts] Start generate declaration files...
+src/form/form.tsx:1:10 - error TS2724: '"zod"' has no exported member named 'typeToFlattenedError'. Did you mean 'ZodFlattenedError'?
+
+1 import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';
+           ~~~~~~~~~~~~~~~~~~~~
+src/form/form.tsx:1:35 - error TS2614: Module '"zod"' has no exported member 'SafeParseReturnType'. Did you mean to use 'import SafeParseReturnType from "zod"' instead?
+
+1 import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';
+                                    ~~~~~~~~~~~~~~~~~~~
+src/form/form.tsx:7:61 - error TS2769: No overload matches this call.
+  Overload 1 of 2, '(params?: string | { error?: string | $ZodErrorMap<$ZodIssueInvalidType<unknown>> | undefined; message?: string | undefined; } | undefined): ZodString', gave the following error.
+    Object literal may only specify known properties, and 'required_error' does not exist in type '{ error?: string | $ZodErrorMap<$ZodIssueInvalidType<unknown>> | undefined; message?: string | undefined; }'.
+  Overload 2 of 2, '(params?: string | { error?: string | $ZodErrorMap<$ZodIssueInvalidType<unknown>> | undefined; message?: string | undefined; } | undefined): $ZodType<...>', gave the following error.
+    Object literal may only specify known properties, and 'required_error' does not exist in type '{ error?: string | $ZodErrorMap<$ZodIssueInvalidType<unknown>> | undefined; message?: string | undefined; }'.
+
+7 export const stringRequired = (): z.ZodString => z.string({ required_error: nonEmpty }).min(1, nonEmpty);
+                                                              ~~~~~~~~~~~~~~
+
+src/form/form.tsx:12:46 - error TS2694: Namespace '"/home/runner/work/utils/utils/node_modules/zod/v4/classic/external"' has no exported member 'ZodEffects'.
+
+12 export type ZodObject = z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>>; // z.ZodType<any, any, any>
+                                                ~~~~~~~~~~
+src/form/form.tsx:43:56 - error TS2694: Namespace '"/home/runner/work/utils/utils/node_modules/zod/v4/classic/external"' has no exported member 'ZodEffects'.
+
+43     (schema as z.ZodObject<any>).shape || (schema as z.ZodEffects<z.ZodObject<any>>).sourceType().shape;
+                                                          ~~~~~~~~~~
+
+dist/useFetch.js     0.57 kB │ map: 1.69 kB
+dist/index.js        0.67 kB │ map: 0.10 kB
+dist/apiCall.js      0.69 kB │ map: 1.45 kB
+dist/useFetcher.js   1.18 kB │ map: 2.62 kB
+dist/keyboard.js     1.24 kB │ map: 2.61 kB
+dist/form/client.js  1.58 kB │ map: 3.88 kB
+dist/form/form.js    2.87 kB │ map: 7.95 kB
+[vite:dts] Declaration files built in 1680ms.
+
+✓ built in 2.40s
+Updated package.json with exports

package/dist/apiCall.d.ts

@@ -0,0 +1,6 @@
+export declare const jsonContentType = "application/json";
+export type DataResponse<R> = Response & {
+    data?: R;
+};
+export declare function apiCall<R>(url: string, init?: RequestInit): Promise<DataResponse<R>>;
+//# sourceMappingURL=apiCall.d.ts.map

package/dist/apiCall.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"apiCall.d.ts","sourceRoot":"","sources":["../src/apiCall.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,eAAe,qBAAqB,CAAC;AAElD,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,QAAQ,GAAG;IAAE,IAAI,CAAC,EAAE,CAAC,CAAA;CAAE,CAAC;AAEtD,wBAAsB,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAoB1F"}

package/dist/apiCall.js

@@ -0,0 +1,23 @@
+const jsonContentType = "application/json";
+async function apiCall(url, init) {
+  const useBodyAsIs = !init?.body || init?.body instanceof FormData || typeof init?.body === "string";
+  const res = await fetch(url, {
+    method: "POST",
+    ...init,
+    body: useBodyAsIs ? init?.body : JSON.stringify(init.body),
+    headers: {
+      ...init?.headers,
+      ...useBodyAsIs ? {} : { "Content-Type": jsonContentType }
+    }
+  });
+  if (res.headers.get("Content-Type")?.includes(jsonContentType)) {
+    res.data = await res.json();
+  }
+  if (!res.ok) throw new Error(res.statusText, { cause: res });
+  return res;
+}
+export {
+  apiCall,
+  jsonContentType
+};
+//# sourceMappingURL=apiCall.js.map

package/dist/apiCall.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"apiCall.js","sources":["../src/apiCall.ts"],"sourcesContent":["export const jsonContentType = 'application/json';\n\nexport type DataResponse<R> = Response & { data?: R };\n\nexport async function apiCall<R>(url: string, init?: RequestInit): Promise<DataResponse<R>> {\n    const useBodyAsIs = !init?.body || init?.body instanceof FormData || typeof init?.body === 'string';\n\n    const res: DataResponse<R> = await fetch(url, {\n        method: 'POST',\n        ...init,\n        body: useBodyAsIs ? init?.body : JSON.stringify(init.body),\n        headers: {\n            ...init?.headers,\n            ...(useBodyAsIs ? {} : { 'Content-Type': jsonContentType }),\n        },\n    });\n\n    if (res.headers.get('Content-Type')?.includes(jsonContentType)) {\n        res.data = await res.json();\n    }\n\n    if (!res.ok) throw new Error(res.statusText, { cause: res });\n\n    return res;\n}\n"],"names":[],"mappings":"AAAO,MAAM,kBAAkB;AAI/B,eAAsB,QAAW,KAAa,MAA8C;AACxF,QAAM,cAAc,CAAC,MAAM,QAAQ,MAAM,gBAAgB,YAAY,OAAO,MAAM,SAAS;AAE3F,QAAM,MAAuB,MAAM,MAAM,KAAK;AAAA,IAC1C,QAAQ;AAAA,IACR,GAAG;AAAA,IACH,MAAM,cAAc,MAAM,OAAO,KAAK,UAAU,KAAK,IAAI;AAAA,IACzD,SAAS;AAAA,MACL,GAAG,MAAM;AAAA,MACT,GAAI,cAAc,CAAA,IAAK,EAAE,gBAAgB,gBAAA;AAAA,IAAgB;AAAA,EAC7D,CACH;AAED,MAAI,IAAI,QAAQ,IAAI,cAAc,GAAG,SAAS,eAAe,GAAG;AAC5D,QAAI,OAAO,MAAM,IAAI,KAAA;AAAA,EACzB;AAEA,MAAI,CAAC,IAAI,GAAI,OAAM,IAAI,MAAM,IAAI,YAAY,EAAE,OAAO,KAAK;AAE3D,SAAO;AACX;"}

package/dist/form/client.d.ts

@@ -0,0 +1,7 @@
+import { MaybeTypeOf, Validation } from './form';
+import { z } from 'zod';
+export declare function createClient<S extends z.ZodObject<any>>(schema: S): {
+    useValidation: (actionFn: (data: FormData) => Promise<Validation<S>>, initialData?: MaybeTypeOf<S>) => [state: Validation<S>, dispatch: (payload: FormData) => void, isPending: boolean];
+    useValidationTransition: (actionFn: (data: FormData) => Promise<Validation<S>>, initialData?: MaybeTypeOf<S>) => [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean];
+};
+//# sourceMappingURL=client.d.ts.map

package/dist/form/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../../src/form/client.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAU,WAAW,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AACzD,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAIxB,wBAAgB,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,EACnD,MAAM,EAAE,CAAC,GACV;IACC,aAAa,EAAE,CACX,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EACpD,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAC3B,CAAC,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;IACvF,uBAAuB,EAAE,CACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EACpD,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAC3B,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC;CACjF,CAqDA"}

package/dist/form/client.js

@@ -0,0 +1,46 @@
+"use client";
+import { useTransition, useState, useCallback, useActionState } from "react";
+import { create } from "./form.js";
+const FORM_DEBUG = process.env.NEXT_PUBLIC_FORM_DEBUG === "true";
+function createClient(schema) {
+  const { validate } = create(schema);
+  function useValidationCallback(actionFn) {
+    return useCallback(
+      async (formData) => {
+        const clientRes = validate(formData);
+        console.log("Client validation", FORM_DEBUG ? "ignored" : "active", clientRes);
+        if (!clientRes.success && !FORM_DEBUG) return clientRes;
+        const serverRes = await actionFn(formData);
+        console.log("Server validation", serverRes);
+        return serverRes;
+      },
+      [actionFn]
+    );
+  }
+  function useValidation(actionFn, initialData = {}) {
+    const cb = useValidationCallback(actionFn);
+    return useActionState(async (_, data) => cb(data), {
+      success: false,
+      data: initialData
+    });
+  }
+  function useValidationTransition(actionFn, initialData = {}) {
+    const [isPending, startTransition] = useTransition();
+    const [state, setState] = useState({ success: false, data: initialData });
+    const cb = useValidationCallback(actionFn);
+    const wrappedCb = useCallback(
+      (formData) => {
+        const promise = cb(formData);
+        startTransition(() => promise.then(setState));
+        return promise;
+      },
+      [cb, startTransition]
+    );
+    return [state, wrappedCb, isPending];
+  }
+  return { useValidation, useValidationTransition };
+}
+export {
+  createClient
+};
+//# sourceMappingURL=client.js.map

package/dist/form/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sources":["../../src/form/client.tsx"],"sourcesContent":["'use client';\n\nimport { useActionState, useCallback, useState, useTransition } from 'react';\nimport { create, MaybeTypeOf, Validation } from './form';\nimport { z } from 'zod';\n\nconst FORM_DEBUG = process.env.NEXT_PUBLIC_FORM_DEBUG === 'true';\n\nexport function createClient<S extends z.ZodObject<any>>(\n    schema: S,\n): {\n    useValidation: (\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n        initialData?: MaybeTypeOf<S>,\n    ) => [state: Validation<S>, dispatch: (payload: FormData) => void, isPending: boolean];\n    useValidationTransition: (\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n        initialData?: MaybeTypeOf<S>,\n    ) => [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean];\n} {\n    const { validate } = create(schema);\n\n    function useValidationCallback(\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n    ): (formData: FormData) => Promise<Validation<S>> {\n        return useCallback(\n            async (formData: FormData) => {\n                const clientRes = validate(formData);\n                console.log('Client validation', FORM_DEBUG ? 'ignored' : 'active', clientRes);\n                if (!clientRes.success && !FORM_DEBUG) return clientRes;\n\n                const serverRes = await actionFn(formData);\n                console.log('Server validation', serverRes);\n                return serverRes;\n            },\n            [actionFn],\n        );\n    }\n\n    function useValidation(\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,\n    ): [state: Validation<S>, dispatch: (payload: FormData) => void, isPending: boolean] {\n        const cb = useValidationCallback(actionFn);\n\n        return useActionState<Validation<S>, FormData>(async (_, data) => cb(data), {\n            success: false,\n            data: initialData,\n        });\n    }\n\n    function useValidationTransition(\n        actionFn: (data: FormData) => Promise<Validation<S>>,\n        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,\n    ): [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean] {\n        const [isPending, startTransition] = useTransition();\n        const [state, setState] = useState<Validation<S>>({ success: false, data: initialData });\n        const cb = useValidationCallback(actionFn);\n\n        const wrappedCb = useCallback(\n            (formData: FormData) => {\n                const promise = cb(formData);\n                startTransition(() => promise.then(setState));\n                return promise;\n            },\n            [cb, startTransition],\n        );\n\n        return [state, wrappedCb, isPending];\n    }\n\n    return { useValidation, useValidationTransition };\n}\n"],"names":[],"mappings":";;;AAMA,MAAM,aAAa,QAAQ,IAAI,2BAA2B;AAEnD,SAAS,aACZ,QAUF;AACE,QAAM,EAAE,SAAA,IAAa,OAAO,MAAM;AAElC,WAAS,sBACL,UAC8C;AAC9C,WAAO;AAAA,MACH,OAAO,aAAuB;AAC1B,cAAM,YAAY,SAAS,QAAQ;AACnC,gBAAQ,IAAI,qBAAqB,aAAa,YAAY,UAAU,SAAS;AAC7E,YAAI,CAAC,UAAU,WAAW,CAAC,WAAY,QAAO;AAE9C,cAAM,YAAY,MAAM,SAAS,QAAQ;AACzC,gBAAQ,IAAI,qBAAqB,SAAS;AAC1C,eAAO;AAAA,MACX;AAAA,MACA,CAAC,QAAQ;AAAA,IAAA;AAAA,EAEjB;AAEA,WAAS,cACL,UACA,cAA8B,IACmD;AACjF,UAAM,KAAK,sBAAsB,QAAQ;AAEzC,WAAO,eAAwC,OAAO,GAAG,SAAS,GAAG,IAAI,GAAG;AAAA,MACxE,SAAS;AAAA,MACT,MAAM;AAAA,IAAA,CACT;AAAA,EACL;AAEA,WAAS,wBACL,UACA,cAA8B,IAC0C;AACxE,UAAM,CAAC,WAAW,eAAe,IAAI,cAAA;AACrC,UAAM,CAAC,OAAO,QAAQ,IAAI,SAAwB,EAAE,SAAS,OAAO,MAAM,aAAa;AACvF,UAAM,KAAK,sBAAsB,QAAQ;AAEzC,UAAM,YAAY;AAAA,MACd,CAAC,aAAuB;AACpB,cAAM,UAAU,GAAG,QAAQ;AAC3B,wBAAgB,MAAM,QAAQ,KAAK,QAAQ,CAAC;AAC5C,eAAO;AAAA,MACX;AAAA,MACA,CAAC,IAAI,eAAe;AAAA,IAAA;AAGxB,WAAO,CAAC,OAAO,WAAW,SAAS;AAAA,EACvC;AAEA,SAAO,EAAE,eAAe,wBAAA;AAC5B;"}

package/dist/form/form.d.ts

@@ -0,0 +1,59 @@
+import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';
+import { Context, FC } from 'react';
+export declare const stringRequired: () => z.ZodString;
+export declare const maxLength: (schema: z.ZodString) => number;
+export declare const minLength: (schema: z.ZodString) => number;
+export declare const isRequired: (schema: z.ZodString) => boolean;
+export type ZodObject = z.ZodObject<any> | z.ZodEffects<z.ZodObject<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 Validation<S extends ZodObject> = {
+    success: true;
+    data: SafeTypeOf<S>;
+    errors?: never;
+} | {
+    success: false;
+    data?: MaybeTypeOf<S>;
+    errors?: Errors<S>;
+};
+export declare const FormContext: Context<{
+    schema: ZodObject;
+}>;
+export interface FormProps<S extends ZodObject> {
+    schema: S;
+    children: any;
+}
+export declare const Form: FC<FormProps<any>>;
+export declare function create<S extends ZodObject>(schema: S): {
+    register: (name: keyof TypeOf<S>, data?: MaybeTypeOf<S>, errors?: Errors<S>, mui?: boolean) => {
+        label?: any;
+        helperText?: string;
+        error?: boolean;
+        name: keyof z.TypeOf<S>;
+        id: keyof z.TypeOf<S>;
+        required: boolean;
+        maxLength: number;
+        type: string;
+        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<S>];
+    };
+    validate: (formData: FormData) => Validation<S>;
+    validationError: (data: MaybeTypeOf<S>, errors: Errors<S>) => Validation<S>;
+};
+interface FieldProps<S extends ZodObject> {
+    children?: any;
+    name: keyof TypeOf<S>;
+    errors?: Validation<S>['errors'];
+    hint?: string;
+    className?: string;
+    labelProps?: any;
+    [key: string]: any;
+}
+export declare const Field: FC<FieldProps<any>>;
+export interface HintProps {
+    children: any;
+    error?: boolean;
+}
+export declare const Hint: FC<HintProps>;
+export {};
+//# sourceMappingURL=form.d.ts.map

package/dist/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/form/form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,CAAC,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAC3E,OAAO,EAAE,OAAO,EAA2C,EAAE,EAAQ,MAAM,OAAO,CAAC;AAKnF,eAAO,MAAM,cAAc,QAAO,CAAC,CAAC,SAAoE,CAAC;AACzG,eAAO,MAAM,SAAS,GAAI,QAAQ,CAAC,CAAC,SAAS,KAAG,MAA+B,CAAC;AAChF,eAAO,MAAM,SAAS,GAAI,QAAQ,CAAC,CAAC,SAAS,KAAG,MAA+B,CAAC;AAChF,eAAO,MAAM,UAAU,GAAI,QAAQ,CAAC,CAAC,SAAS,KAAG,OAAgC,CAAC;AAElF,MAAM,MAAM,SAAS,GAAG,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC;AAC1E,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AAClE,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,SAAS,IAAI,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAChG,MAAM,MAAM,MAAM,CAAC,CAAC,SAAS,SAAS,IAAI,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;AACzF,MAAM,MAAM,UAAU,CAAC,CAAC,SAAS,SAAS,IACpC;IACI,OAAO,EAAE,IAAI,CAAC;IACd,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC;IACpB,MAAM,CAAC,EAAE,KAAK,CAAC;CAClB,GACD;IACI,OAAO,EAAE,KAAK,CAAC;IACf,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;CACtB,CAAC;AAER,eAAO,MAAM,WAAW,EAAE,OAAO,CAAC;IAC9B,MAAM,EAAE,SAAS,CAAC;CACrB,CAAgC,CAAC;AAElC,MAAM,WAAW,SAAS,CAAC,CAAC,SAAS,SAAS;IAC1C,MAAM,EAAE,CAAC,CAAC;IACV,QAAQ,EAAE,GAAG,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAAC,GAAG,CAAC,CAGlC,CAAC;AAKH,wBAAgB,MAAM,CAAC,CAAC,SAAS,SAAS,EACtC,MAAM,EAAE,CAAC,GACV;IACC,QAAQ,EAAE,CACN,IAAI,EAAE,MAAM,MAAM,CAAC,CAAC,CAAC,EACrB,IAAI,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EACrB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,EAClB,GAAG,CAAC,EAAE,OAAO,KACZ;QACD,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACxB,EAAE,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;QACtB,QAAQ,EAAE,OAAO,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;KAC1D,CAAC;IACF,QAAQ,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC;IAChD,eAAe,EAAE,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,CAAC;CAC/E,CA+DA;AAED,UAAU,UAAU,CAAC,CAAC,SAAS,SAAS;IACpC,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,IAAI,EAAE,MAAM,MAAM,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,GAAG,CAAC;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,eAAO,MAAM,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CA4BpC,CAAC;AAEH,MAAM,WAAW,SAAS;IACtB,QAAQ,EAAE,GAAG,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,SAAS,CAE7B,CAAC"}

package/dist/form/form.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { z } from "zod";
+import { createContext, memo, useMemo, useContext } from "react";
+import clsx from "clsx";
+const nonEmpty = "This field cannot be empty";
+const stringRequired = () => z.string({ required_error: nonEmpty }).min(1, nonEmpty);
+const maxLength = (schema) => schema.maxLength || 0;
+const minLength = (schema) => schema.minLength || 0;
+const isRequired = (schema) => minLength(schema) > 0;
+const FormContext = createContext(null);
+const Form = memo(function Form2({ schema, children }) {
+  const value = useMemo(() => ({ schema }), [schema]);
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value, children });
+});
+const getShape = (schema) => schema.shape || schema.sourceType().shape;
+function create(schema) {
+  if (!getShape(schema)) {
+    throw new Error("Invalid schema: only z.object() or z.object().refine() are supported");
+  }
+  function register(name, data, errors, mui = false) {
+    const field = getShape(schema)[name];
+    return {
+      name,
+      id: name,
+      required: isRequired(field),
+      maxLength: maxLength(field),
+      type: field.isEmail ? "email" : name.includes("password") ? "password" : "text",
+      defaultValue: data?.[name],
+      ...mui ? {
+        label: field.description,
+        helperText: errors?.[name]?.join(", "),
+        error: !!errors?.[name]?.length
+      } : {}
+    };
+  }
+  function validationError(data, errors) {
+    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) {
+    const rawData = Object.fromEntries(formData);
+    const { error, data } = schema.safeParse(rawData);
+    if (error) {
+      return validationError(rawData, error.flatten().fieldErrors);
+    }
+    return { success: true, data };
+  }
+  return { register, validate, validationError };
+}
+const Field = memo(function Field2({
+  children,
+  name,
+  errors,
+  hint,
+  className,
+  labelProps,
+  ...props
+}) {
+  const { schema } = useContext(FormContext);
+  const { description } = getShape(schema)[name];
+  return /* @__PURE__ */ jsxs("div", { ...props, className: clsx("form-row", className), children: [
+    description && /* @__PURE__ */ jsx("label", { ...labelProps, htmlFor: name, children: description }),
+    children,
+    hint && /* @__PURE__ */ jsx(Hint, { children: hint }),
+    errors?.[name]?.map((e) => /* @__PURE__ */ jsx(Hint, { error: true, children: e }, e))
+  ] });
+});
+const Hint = memo(function Hint2({ children, error }) {
+  return /* @__PURE__ */ jsx("div", { className: `hint ${error ? "hint-error" : ""}`, children });
+});
+export {
+  Field,
+  Form,
+  FormContext,
+  Hint,
+  create,
+  isRequired,
+  maxLength,
+  minLength,
+  stringRequired
+};
+//# sourceMappingURL=form.js.map

package/dist/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sources":["../../src/form/form.tsx"],"sourcesContent":["import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';\nimport { Context, createContext, useContext, useMemo, JSX, FC, memo } from 'react';\nimport clsx from 'clsx';\n\nconst nonEmpty = 'This field cannot be empty';\n\nexport const stringRequired = (): z.ZodString => z.string({ required_error: nonEmpty }).min(1, nonEmpty);\nexport const maxLength = (schema: z.ZodString): number => schema.maxLength || 0;\nexport const minLength = (schema: z.ZodString): number => schema.minLength || 0;\nexport const isRequired = (schema: z.ZodString): boolean => minLength(schema) > 0;\n\nexport type ZodObject = z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>>; // z.ZodType<any, any, any>\nexport type MaybeTypeOf<S extends ZodObject> = Partial<TypeOf<S>>;\nexport type SafeTypeOf<S extends ZodObject> = SafeParseReturnType<TypeOf<S>, TypeOf<S>>['data'];\nexport type Errors<S extends ZodObject> = typeToFlattenedError<TypeOf<S>>['fieldErrors'];\nexport type Validation<S extends ZodObject> =\n    | {\n          success: true; // this is true only if form was validated successfully\n          data: SafeTypeOf<S>;\n          errors?: never;\n      }\n    | {\n          success: false;\n          data?: MaybeTypeOf<S>;\n          errors?: Errors<S>;\n      };\n\nexport const FormContext: Context<{\n    schema: ZodObject;\n}> = createContext(null as never);\n\nexport interface FormProps<S extends ZodObject> {\n    schema: S;\n    children: any;\n}\n\nexport const Form: FC<FormProps<any>> = memo(function Form({ schema, children }) {\n    const value = useMemo(() => ({ schema }), [schema]);\n    return <FormContext.Provider value={value}>{children}</FormContext.Provider>;\n});\n\nconst getShape = <S extends ZodObject>(schema: S) =>\n    (schema as z.ZodObject<any>).shape || (schema as z.ZodEffects<z.ZodObject<any>>).sourceType().shape;\n\nexport function create<S extends ZodObject>(\n    schema: S,\n): {\n    register: (\n        name: keyof TypeOf<S>,\n        data?: MaybeTypeOf<S>,\n        errors?: Errors<S>,\n        mui?: boolean,\n    ) => {\n        label?: any;\n        helperText?: string;\n        error?: boolean;\n        name: keyof z.TypeOf<S>;\n        id: keyof z.TypeOf<S>;\n        required: boolean;\n        maxLength: number;\n        type: string;\n        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<S>];\n    };\n    validate: (formData: FormData) => Validation<S>;\n    validationError: (data: MaybeTypeOf<S>, errors: Errors<S>) => Validation<S>;\n} {\n    if (!getShape(schema)) {\n        throw new Error('Invalid schema: only z.object() or z.object().refine() are supported');\n    }\n\n    function register(\n        name: keyof TypeOf<S>,\n        data?: MaybeTypeOf<S>,\n        errors?: Errors<S>,\n        mui: boolean = false,\n    ): {\n        label?: any;\n        helperText?: string;\n        error?: boolean;\n        name: keyof z.TypeOf<S>;\n        id: keyof z.TypeOf<S>;\n        required: boolean;\n        maxLength: number;\n        type: string;\n        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<S>];\n    } {\n        const field = getShape(schema)[name];\n        return {\n            name,\n            id: name,\n            required: isRequired(field),\n            maxLength: maxLength(field),\n            type: field.isEmail ? 'email' : (name as string).includes('password') ? 'password' : 'text',\n            defaultValue: data?.[name],\n            ...(mui\n                ? {\n                      label: field.description,\n                      helperText: errors?.[name]?.join(', '),\n                      error: !!errors?.[name]?.length,\n                  }\n                : {}),\n        };\n    }\n\n    function validationError(data: MaybeTypeOf<S>, errors: Errors<S>): Validation<S> {\n        return {\n            success: false,\n            data, // data is undefined if there are errors\n            errors, // Next.js will butcher error object, so we provide something more primitive\n        };\n    }\n\n    function validate(formData: FormData): Validation<S> {\n        const rawData = Object.fromEntries(formData) as TypeOf<S>;\n        const { error, data } = schema.safeParse(rawData);\n\n        // console.log('Validate result', { error, data, rawData });\n\n        if (error) {\n            // data is undefined if there are errors\n            // Next.js will butcher error object, so we provide something more primitive\n            return validationError(rawData, error.flatten().fieldErrors as any);\n        }\n\n        return { success: true, data };\n    }\n\n    return { register, validate, validationError };\n}\n\ninterface FieldProps<S extends ZodObject> {\n    children?: any;\n    name: keyof TypeOf<S>;\n    errors?: Validation<S>['errors'];\n    hint?: string;\n    className?: string;\n    labelProps?: any;\n    [key: string]: any;\n}\n\nexport const Field: FC<FieldProps<any>> = memo(function Field({\n    children,\n    name,\n    errors,\n    hint,\n    className,\n    labelProps,\n    ...props\n}) {\n    const { schema } = useContext(FormContext);\n    const { description } = getShape(schema)[name];\n\n    return (\n        <div {...props} className={clsx('form-row', className)}>\n            {description && (\n                <label {...labelProps} htmlFor={name}>\n                    {description}\n                </label>\n            )}\n            {children}\n            {hint && <Hint>{hint}</Hint>}\n            {errors?.[name]?.map((e: string) => (\n                <Hint error key={e}>\n                    {e}\n                </Hint>\n            ))}\n        </div>\n    );\n});\n\nexport interface HintProps {\n    children: any;\n    error?: boolean;\n}\n\nexport const Hint: FC<HintProps> = memo(function Hint({ children, error }) {\n    return <div className={`hint ${error ? 'hint-error' : ''}`}>{children}</div>;\n});\n"],"names":["Form","Field","Hint"],"mappings":";;;;AAIA,MAAM,WAAW;AAEV,MAAM,iBAAiB,MAAmB,EAAE,OAAO,EAAE,gBAAgB,UAAU,EAAE,IAAI,GAAG,QAAQ;AAChG,MAAM,YAAY,CAAC,WAAgC,OAAO,aAAa;AACvE,MAAM,YAAY,CAAC,WAAgC,OAAO,aAAa;AACvE,MAAM,aAAa,CAAC,WAAiC,UAAU,MAAM,IAAI;AAkBzE,MAAM,cAER,cAAc,IAAa;AAOzB,MAAM,OAA2B,KAAK,SAASA,MAAK,EAAE,QAAQ,YAAY;AAC7E,QAAM,QAAQ,QAAQ,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC;AAClD,SAAO,oBAAC,YAAY,UAAZ,EAAqB,OAAe,SAAA,CAAS;AACzD,CAAC;AAED,MAAM,WAAW,CAAsB,WAClC,OAA4B,SAAU,OAA0C,aAAa;AAE3F,SAAS,OACZ,QAoBF;AACE,MAAI,CAAC,SAAS,MAAM,GAAG;AACnB,UAAM,IAAI,MAAM,sEAAsE;AAAA,EAC1F;AAEA,WAAS,SACL,MACA,MACA,QACA,MAAe,OAWjB;AACE,UAAM,QAAQ,SAAS,MAAM,EAAE,IAAI;AACnC,WAAO;AAAA,MACH;AAAA,MACA,IAAI;AAAA,MACJ,UAAU,WAAW,KAAK;AAAA,MAC1B,WAAW,UAAU,KAAK;AAAA,MAC1B,MAAM,MAAM,UAAU,UAAW,KAAgB,SAAS,UAAU,IAAI,aAAa;AAAA,MACrF,cAAc,OAAO,IAAI;AAAA,MACzB,GAAI,MACE;AAAA,QACI,OAAO,MAAM;AAAA,QACb,YAAY,SAAS,IAAI,GAAG,KAAK,IAAI;AAAA,QACrC,OAAO,CAAC,CAAC,SAAS,IAAI,GAAG;AAAA,MAAA,IAE7B,CAAA;AAAA,IAAC;AAAA,EAEf;AAEA,WAAS,gBAAgB,MAAsB,QAAkC;AAC7E,WAAO;AAAA,MACH,SAAS;AAAA,MACT;AAAA;AAAA,MACA;AAAA;AAAA,IAAA;AAAA,EAER;AAEA,WAAS,SAAS,UAAmC;AACjD,UAAM,UAAU,OAAO,YAAY,QAAQ;AAC3C,UAAM,EAAE,OAAO,KAAA,IAAS,OAAO,UAAU,OAAO;AAIhD,QAAI,OAAO;AAGP,aAAO,gBAAgB,SAAS,MAAM,QAAA,EAAU,WAAkB;AAAA,IACtE;AAEA,WAAO,EAAE,SAAS,MAAM,KAAA;AAAA,EAC5B;AAEA,SAAO,EAAE,UAAU,UAAU,gBAAA;AACjC;AAYO,MAAM,QAA6B,KAAK,SAASC,OAAM;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACP,GAAG;AACC,QAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,QAAM,EAAE,YAAA,IAAgB,SAAS,MAAM,EAAE,IAAI;AAE7C,SACI,qBAAC,SAAK,GAAG,OAAO,WAAW,KAAK,YAAY,SAAS,GAChD,UAAA;AAAA,IAAA,mCACI,SAAA,EAAO,GAAG,YAAY,SAAS,MAC3B,UAAA,aACL;AAAA,IAEH;AAAA,IACA,QAAQ,oBAAC,MAAA,EAAM,UAAA,KAAA,CAAK;AAAA,IACpB,SAAS,IAAI,GAAG,IAAI,CAAC,MAClB,oBAAC,MAAA,EAAK,OAAK,MACN,UAAA,EAAA,GADY,CAEjB,CACH;AAAA,EAAA,GACL;AAER,CAAC;AAOM,MAAM,OAAsB,KAAK,SAASC,MAAK,EAAE,UAAU,SAAS;AACvE,SAAO,oBAAC,SAAI,WAAW,QAAQ,QAAQ,eAAe,EAAE,IAAK,SAAA,CAAS;AAC1E,CAAC;"}

package/dist/form/index.d.ts

@@ -0,0 +1,3 @@
+export * from './client';
+export * from './form';
+//# sourceMappingURL=index.d.ts.map

package/dist/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './form';
+export * from './apiCall';
+export * from './keyboard';
+export * from './useFetch';
+export * from './useFetcher';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,26 @@
+import { createClient } from "./form/client.js";
+import { Field, Form, FormContext, Hint, create, isRequired, maxLength, minLength, stringRequired } from "./form/form.js";
+import { apiCall, jsonContentType } from "./apiCall.js";
+import { HotkeysContext, HotkeysProvider, useHotkeys } from "./keyboard.js";
+import { useFetch } from "./useFetch.js";
+import { useFetcher } from "./useFetcher.js";
+export {
+  Field,
+  Form,
+  FormContext,
+  Hint,
+  HotkeysContext,
+  HotkeysProvider,
+  apiCall,
+  create,
+  createClient,
+  isRequired,
+  jsonContentType,
+  maxLength,
+  minLength,
+  stringRequired,
+  useFetch,
+  useFetcher,
+  useHotkeys
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/keyboard.d.ts

@@ -0,0 +1,10 @@
+import { Dispatch, SetStateAction, FC, Context } from 'react';
+export type Hotkeys = Record<KeyboardEvent['code'], (e: KeyboardEvent) => void>;
+export type HotkeyContextType = {
+    enabled: boolean;
+    setEnabled: Dispatch<SetStateAction<boolean>>;
+};
+export declare const HotkeysContext: Context<HotkeyContextType>;
+export declare const HotkeysProvider: FC<any>;
+export declare const useHotkeys: (hotkeys: Hotkeys) => void;
+//# sourceMappingURL=keyboard.d.ts.map

package/dist/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../src/keyboard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+C,QAAQ,EAAE,cAAc,EAAc,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAMvH,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC,CAAC;AAEhF,MAAM,MAAM,iBAAiB,GAAG;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CACjD,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,OAAO,CAAC,iBAAiB,CAGrC,CAAC;AAElB,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,GAAG,CAMnC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,SAAS,OAAO,KAAG,IA6B7C,CAAC"}

package/dist/keyboard.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useState, useMemo, useContext, useEffect } from "react";
+const isCtrlOrMeta = (e) => e.metaKey || e.ctrlKey;
+const EVENT = "keydown";
+const HotkeysContext = createContext(null);
+const HotkeysProvider = ({ children }) => {
+  const [enabled, setEnabled] = useState(true);
+  const control = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);
+  return /* @__PURE__ */ jsx(HotkeysContext.Provider, { value: control, children });
+};
+const useHotkeys = (hotkeys) => {
+  const { enabled } = useContext(HotkeysContext);
+  useEffect(() => {
+    if (typeof document === "undefined" || !enabled) {
+      return;
+    }
+    const ctrl = new AbortController();
+    window.addEventListener(
+      EVENT,
+      (e) => {
+        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]);
+};
+export {
+  HotkeysContext,
+  HotkeysProvider,
+  useHotkeys
+};
+//# sourceMappingURL=keyboard.js.map

package/dist/keyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.js","sources":["../src/keyboard.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, createContext, useMemo, useState, Dispatch, SetStateAction, useContext, FC, Context } from 'react';\n\nconst isCtrlOrMeta = (e: KeyboardEvent) => e.metaKey || e.ctrlKey;\n\nconst EVENT = 'keydown';\n\nexport type Hotkeys = Record<KeyboardEvent['code'], (e: KeyboardEvent) => void>;\n\nexport type HotkeyContextType = {\n    enabled: boolean;\n    setEnabled: Dispatch<SetStateAction<boolean>>;\n};\n\nexport const HotkeysContext: Context<HotkeyContextType> = createContext<{\n    enabled: boolean;\n    setEnabled: Dispatch<SetStateAction<boolean>>;\n}>(null as never);\n\nexport const HotkeysProvider: FC<any> = ({ children }) => {\n    const [enabled, setEnabled] = useState(true);\n\n    const control = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);\n\n    return <HotkeysContext.Provider value={control}>{children}</HotkeysContext.Provider>;\n};\n\nexport const useHotkeys = (hotkeys: Hotkeys): void => {\n    const { enabled } = useContext(HotkeysContext);\n\n    useEffect(() => {\n        if (typeof document === 'undefined' || !enabled) {\n            return;\n        }\n\n        const ctrl = new AbortController();\n\n        window.addEventListener(\n            EVENT,\n            (e: KeyboardEvent) => {\n                if (!isCtrlOrMeta(e)) return;\n\n                for (const [code, callback] of Object.entries(hotkeys)) {\n                    if (e.code === code) {\n                        callback(e);\n                        return;\n                    }\n                }\n            },\n            { signal: ctrl.signal, capture: true },\n        );\n\n        return () => {\n            ctrl.abort();\n        };\n    }, [hotkeys, enabled]);\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,eAAe,CAAC,MAAqB,EAAE,WAAW,EAAE;AAE1D,MAAM,QAAQ;AASP,MAAM,iBAA6C,cAGvD,IAAa;AAET,MAAM,kBAA2B,CAAC,EAAE,eAAe;AACtD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAE3C,QAAM,UAAU,QAAQ,OAAO,EAAE,SAAS,eAAe,CAAC,SAAS,UAAU,CAAC;AAE9E,6BAAQ,eAAe,UAAf,EAAwB,OAAO,SAAU,UAAS;AAC9D;AAEO,MAAM,aAAa,CAAC,YAA2B;AAClD,QAAM,EAAE,QAAA,IAAY,WAAW,cAAc;AAE7C,YAAU,MAAM;AACZ,QAAI,OAAO,aAAa,eAAe,CAAC,SAAS;AAC7C;AAAA,IACJ;AAEA,UAAM,OAAO,IAAI,gBAAA;AAEjB,WAAO;AAAA,MACH;AAAA,MACA,CAAC,MAAqB;AAClB,YAAI,CAAC,aAAa,CAAC,EAAG;AAEtB,mBAAW,CAAC,MAAM,QAAQ,KAAK,OAAO,QAAQ,OAAO,GAAG;AACpD,cAAI,EAAE,SAAS,MAAM;AACjB,qBAAS,CAAC;AACV;AAAA,UACJ;AAAA,QACJ;AAAA,MACJ;AAAA,MACA,EAAE,QAAQ,KAAK,QAAQ,SAAS,KAAA;AAAA,IAAK;AAGzC,WAAO,MAAM;AACT,WAAK,MAAA;AAAA,IACT;AAAA,EACJ,GAAG,CAAC,SAAS,OAAO,CAAC;AACzB;"}

package/dist/useFetch.d.ts

@@ -0,0 +1,2 @@
+export declare function useFetch<R>(fn: (...args: any[]) => Promise<R>, defaultValue?: R | null): [R | null, typeof fn, boolean, Error | undefined];
+//# sourceMappingURL=useFetch.d.ts.map

package/dist/useFetch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetch.d.ts","sourceRoot":"","sources":["../src/useFetch.ts"],"names":[],"mappings":"AAOA,wBAAgB,QAAQ,CAAC,CAAC,EACtB,EAAE,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,EAClC,YAAY,GAAE,CAAC,GAAG,IAAW,GAC9B,CAAC,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,KAAK,GAAG,SAAS,CAAC,CAkBnD"}

package/dist/useFetch.js

@@ -0,0 +1,20 @@
+"use client";
+import { useTransition, useState, useCallback } from "react";
+function useFetch(fn, defaultValue = null) {
+  const [isPending, startTransition] = useTransition();
+  const [data, setData] = useState(defaultValue);
+  const [error, setError] = useState();
+  const actionFn = useCallback(
+    (...args) => {
+      const promise = fn(...args);
+      startTransition(() => promise.then(setData).catch(setError));
+      return promise;
+    },
+    [fn]
+  );
+  return [data, actionFn, isPending, error];
+}
+export {
+  useFetch
+};
+//# sourceMappingURL=useFetch.js.map

package/dist/useFetch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetch.js","sources":["../src/useFetch.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useState, useTransition } from 'react';\n\n//TODO useFetch https://use-http.com\n//TODO SWR?\n//TODO Tanstack Query?\nexport function useFetch<R>(\n    fn: (...args: any[]) => Promise<R>,\n    defaultValue: R | null = null,\n): [R | null, typeof fn, boolean, Error | undefined] {\n    // An async function was passed to useActionState, but it was dispatched outside of an action context.\n    // This is likely not what you intended. Either pass the dispatch function to an `action` prop, or dispatch manually inside `startTransition`\n    const [isPending, startTransition] = useTransition();\n    const [data, setData] = useState<R | null>(defaultValue);\n    const [error, setError] = useState<Error>();\n\n    const actionFn = useCallback(\n        (...args: Parameters<typeof fn>) => {\n            const promise = fn(...args);\n            // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition\n            startTransition(() => promise.then(setData).catch(setError)); //FIXME sub-chain...\n            return promise;\n        },\n        [fn],\n    );\n\n    return [data, actionFn, isPending, error];\n}\n"],"names":[],"mappings":";;AAOO,SAAS,SACZ,IACA,eAAyB,MACwB;AAGjD,QAAM,CAAC,WAAW,eAAe,IAAI,cAAA;AACrC,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,YAAY;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAA;AAE1B,QAAM,WAAW;AAAA,IACb,IAAI,SAAgC;AAChC,YAAM,UAAU,GAAG,GAAG,IAAI;AAE1B,sBAAgB,MAAM,QAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC3D,aAAO;AAAA,IACX;AAAA,IACA,CAAC,EAAE;AAAA,EAAA;AAGP,SAAO,CAAC,MAAM,UAAU,WAAW,KAAK;AAC5C;"}

package/dist/useFetcher.d.ts

@@ -0,0 +1,10 @@
+export declare function useFetcher<T = any>(cb: any, { fetchOnMount, onError }?: {
+    fetchOnMount?: boolean;
+    onError?: (e: Error) => void;
+}): {
+    loading: boolean;
+    error: Error | null;
+    data: T | null;
+    trigger: (...args: any[]) => Promise<any>;
+};
+//# sourceMappingURL=useFetcher.d.ts.map

package/dist/useFetcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetcher.d.ts","sourceRoot":"","sources":["../src/useFetcher.ts"],"names":[],"mappings":"AAEA,wBAAgB,UAAU,CAAC,CAAC,GAAG,GAAG,EAC9B,EAAE,EAAE,GAAG,EAEP,EAAE,YAAoB,EAAE,OAAO,EAAE,GAAE;IAAE,YAAY,CAAC,EAAE,OAAO,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;CAAO,GACjG;IACC,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;IACf,OAAO,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;CAC7C,CA0CA"}

package/dist/useFetcher.js

@@ -0,0 +1,43 @@
+import { useState, useRef, useCallback, useEffect } from "react";
+function useFetcher(cb, { fetchOnMount = false, onError } = {}) {
+  const [loading, setLoading] = useState(fetchOnMount);
+  const [error, setError] = useState(null);
+  const [data, setData] = useState(null);
+  const isMounted = useRef(false);
+  const trigger = useCallback(
+    async (...args) => {
+      try {
+        setLoading(true);
+        setError(null);
+        const res = await cb(args);
+        if (!isMounted.current) return;
+        setData(res);
+        return res;
+      } catch (e) {
+        console.error("Fetch failed", e);
+        if (!isMounted.current) return;
+        setError(e);
+        onError?.(e);
+      } finally {
+        if (isMounted.current) setLoading(false);
+      }
+    },
+    [cb, onError]
+  );
+  useEffect(() => {
+    if (fetchOnMount) {
+      trigger().catch((e) => console.error("Fetch on mount failed", e));
+    }
+  }, [fetchOnMount, cb, trigger]);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  });
+  return { loading, error, data, trigger };
+}
+export {
+  useFetcher
+};
+//# sourceMappingURL=useFetcher.js.map

package/dist/useFetcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetcher.js","sources":["../src/useFetcher.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\n\nexport function useFetcher<T = any>(\n    cb: any,\n\n    { fetchOnMount = false, onError }: { fetchOnMount?: boolean; onError?: (e: Error) => void } = {},\n): {\n    loading: boolean;\n    error: Error | null;\n    data: T | null;\n    trigger: (...args: any[]) => Promise<any>;\n} {\n    const [loading, setLoading] = useState(fetchOnMount);\n    const [error, setError] = useState<Error | null>(null);\n    const [data, setData] = useState<T | null>(null);\n\n    const isMounted = useRef(false);\n\n    const trigger = useCallback(\n        async (...args: any[]): Promise<any> => {\n            try {\n                setLoading(true);\n                setError(null);\n                const res = await cb(args);\n                if (!isMounted.current) return;\n                setData(res);\n                return res;\n            } catch (e) {\n                console.error('Fetch failed', e);\n                if (!isMounted.current) return;\n                setError(e);\n                (onError as any)?.(e);\n            } finally {\n                if (isMounted.current) setLoading(false);\n            }\n        },\n        [cb, onError],\n    );\n\n    useEffect(() => {\n        if (fetchOnMount) {\n            trigger().catch((e) => console.error('Fetch on mount failed', e)); // catch actually will never happen\n        }\n    }, [fetchOnMount, cb, trigger]);\n\n    useEffect(() => {\n        isMounted.current = true;\n        return () => {\n            isMounted.current = false;\n        };\n    });\n\n    return { loading, error, data, trigger };\n}\n"],"names":[],"mappings":";AAEO,SAAS,WACZ,IAEA,EAAE,eAAe,OAAO,QAAA,IAAsE,IAMhG;AACE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,YAAY;AACnD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAuB,IAAI;AACrD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,IAAI;AAE/C,QAAM,YAAY,OAAO,KAAK;AAE9B,QAAM,UAAU;AAAA,IACZ,UAAU,SAA8B;AACpC,UAAI;AACA,mBAAW,IAAI;AACf,iBAAS,IAAI;AACb,cAAM,MAAM,MAAM,GAAG,IAAI;AACzB,YAAI,CAAC,UAAU,QAAS;AACxB,gBAAQ,GAAG;AACX,eAAO;AAAA,MACX,SAAS,GAAG;AACR,gBAAQ,MAAM,gBAAgB,CAAC;AAC/B,YAAI,CAAC,UAAU,QAAS;AACxB,iBAAS,CAAC;AACT,kBAAkB,CAAC;AAAA,MACxB,UAAA;AACI,YAAI,UAAU,QAAS,YAAW,KAAK;AAAA,MAC3C;AAAA,IACJ;AAAA,IACA,CAAC,IAAI,OAAO;AAAA,EAAA;AAGhB,YAAU,MAAM;AACZ,QAAI,cAAc;AACd,cAAA,EAAU,MAAM,CAAC,MAAM,QAAQ,MAAM,yBAAyB,CAAC,CAAC;AAAA,IACpE;AAAA,EACJ,GAAG,CAAC,cAAc,IAAI,OAAO,CAAC;AAE9B,YAAU,MAAM;AACZ,cAAU,UAAU;AACpB,WAAO,MAAM;AACT,gBAAU,UAAU;AAAA,IACxB;AAAA,EACJ,CAAC;AAED,SAAO,EAAE,SAAS,OAAO,MAAM,QAAA;AACnC;"}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@kirill.konshin/react",
+  "description": "Utilities",
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "----- BUILD -----": "",
+    "clean": "rm -rf dist .tscache tsconfig.tsbuildinfo",
+    "build": "vite build",
+    "build:index": "cti create ./src",
+    "build:check-types": "attw --pack .",
+    "start": "yarn build --watch",
+    "wait": "wait-on ./dist/index.js",
+    "----- TEST -----": "",
+    "test:disabled": "vitest run --coverage",
+    "test:watch": "vitest watch --coverage",
+    "----- STORYBOOK -----": "",
+    "storybook:start": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "zod": "^4.0.14"
+  },
+  "devDependencies": {
+    "@kirill.konshin/utils-private": "*",
+    "react": "^19.1.1"
+  },
+  "peerDependencies": {
+    "react": "^19"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Kirill Konshin <kirill@konshin.org> (https://konshin.org)",
+  "license": "MIT",
+  "exports": {
+    "./form": {
+      "import": {
+        "import": "./dist/form/index.js",
+        "types": "./dist/form/index.d.ts"
+      }
+    },
+    ".": {
+      "import": {
+        "import": "./dist/index.js",
+        "types": "./dist/index.d.ts"
+      }
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}

package/src/apiCall.ts

@@ -0,0 +1,25 @@
+export const jsonContentType = 'application/json';
+
+export type DataResponse<R> = Response & { data?: R };
+
+export async function apiCall<R>(url: string, init?: RequestInit): Promise<DataResponse<R>> {
+    const useBodyAsIs = !init?.body || init?.body instanceof FormData || typeof init?.body === 'string';
+
+    const res: DataResponse<R> = await fetch(url, {
+        method: 'POST',
+        ...init,
+        body: useBodyAsIs ? init?.body : JSON.stringify(init.body),
+        headers: {
+            ...init?.headers,
+            ...(useBodyAsIs ? {} : { 'Content-Type': jsonContentType }),
+        },
+    });
+
+    if (res.headers.get('Content-Type')?.includes(jsonContentType)) {
+        res.data = await res.json();
+    }
+
+    if (!res.ok) throw new Error(res.statusText, { cause: res });
+
+    return res;
+}

package/src/form/client.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useActionState, useCallback, useState, useTransition } from 'react';
+import { create, MaybeTypeOf, Validation } from './form';
+import { z } from 'zod';
+
+const FORM_DEBUG = process.env.NEXT_PUBLIC_FORM_DEBUG === 'true';
+
+export function createClient<S extends z.ZodObject<any>>(
+    schema: S,
+): {
+    useValidation: (
+        actionFn: (data: FormData) => Promise<Validation<S>>,
+        initialData?: MaybeTypeOf<S>,
+    ) => [state: Validation<S>, dispatch: (payload: FormData) => void, isPending: boolean];
+    useValidationTransition: (
+        actionFn: (data: FormData) => Promise<Validation<S>>,
+        initialData?: MaybeTypeOf<S>,
+    ) => [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean];
+} {
+    const { validate } = create(schema);
+
+    function useValidationCallback(
+        actionFn: (data: FormData) => Promise<Validation<S>>,
+    ): (formData: FormData) => Promise<Validation<S>> {
+        return useCallback(
+            async (formData: FormData) => {
+                const clientRes = validate(formData);
+                console.log('Client validation', FORM_DEBUG ? 'ignored' : 'active', clientRes);
+                if (!clientRes.success && !FORM_DEBUG) return clientRes;
+
+                const serverRes = await actionFn(formData);
+                console.log('Server validation', serverRes);
+                return serverRes;
+            },
+            [actionFn],
+        );
+    }
+
+    function useValidation(
+        actionFn: (data: FormData) => Promise<Validation<S>>,
+        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,
+    ): [state: Validation<S>, dispatch: (payload: FormData) => void, isPending: boolean] {
+        const cb = useValidationCallback(actionFn);
+
+        return useActionState<Validation<S>, FormData>(async (_, data) => cb(data), {
+            success: false,
+            data: initialData,
+        });
+    }
+
+    function useValidationTransition(
+        actionFn: (data: FormData) => Promise<Validation<S>>,
+        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,
+    ): [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean] {
+        const [isPending, startTransition] = useTransition();
+        const [state, setState] = useState<Validation<S>>({ success: false, data: initialData });
+        const cb = useValidationCallback(actionFn);
+
+        const wrappedCb = useCallback(
+            (formData: FormData) => {
+                const promise = cb(formData);
+                startTransition(() => promise.then(setState));
+                return promise;
+            },
+            [cb, startTransition],
+        );
+
+        return [state, wrappedCb, isPending];
+    }
+
+    return { useValidation, useValidationTransition };
+}

package/src/form/form.tsx

@@ -0,0 +1,178 @@
+import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } 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 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 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.ZodEffects<z.ZodObject<any>>).sourceType().shape;
+
+export function create<S extends ZodObject>(
+    schema: S,
+): {
+    register: (
+        name: keyof TypeOf<S>,
+        data?: MaybeTypeOf<S>,
+        errors?: Errors<S>,
+        mui?: boolean,
+    ) => {
+        label?: any;
+        helperText?: string;
+        error?: boolean;
+        name: keyof z.TypeOf<S>;
+        id: keyof z.TypeOf<S>;
+        required: boolean;
+        maxLength: number;
+        type: string;
+        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<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 TypeOf<S>,
+        data?: MaybeTypeOf<S>,
+        errors?: Errors<S>,
+        mui: boolean = false,
+    ): {
+        label?: any;
+        helperText?: string;
+        error?: boolean;
+        name: keyof z.TypeOf<S>;
+        id: keyof z.TypeOf<S>;
+        required: boolean;
+        maxLength: number;
+        type: string;
+        defaultValue?: Partial<z.TypeOf<S>>[keyof z.TypeOf<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 TypeOf<S>;
+        const { error, data } = schema.safeParse(rawData);
+
+        // console.log('Validate result', { error, data, rawData });
+
+        if (error) {
+            // 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 { success: true, data };
+    }
+
+    return { register, validate, validationError };
+}
+
+interface FieldProps<S extends ZodObject> {
+    children?: any;
+    name: keyof TypeOf<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]?.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

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

package/src/index.ts

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

package/src/keyboard.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect, createContext, useMemo, useState, Dispatch, SetStateAction, useContext, FC, 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 const HotkeysProvider: FC<any> = ({ 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.ts

@@ -0,0 +1,29 @@
+'use client';
+
+import { useCallback, useState, useTransition } from 'react';
+
+//TODO useFetch https://use-http.com
+//TODO SWR?
+//TODO Tanstack Query?
+export function useFetch<R>(
+    fn: (...args: any[]) => Promise<R>,
+    defaultValue: R | null = null,
+): [R | null, typeof fn, boolean, Error | undefined] {
+    // An async function was passed to useActionState, but it was dispatched outside of an action context.
+    // This is likely not what you intended. Either pass the dispatch function to an `action` prop, or dispatch manually inside `startTransition`
+    const [isPending, startTransition] = useTransition();
+    const [data, setData] = useState<R | null>(defaultValue);
+    const [error, setError] = useState<Error>();
+
+    const actionFn = useCallback(
+        (...args: Parameters<typeof fn>) => {
+            const promise = fn(...args);
+            // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition
+            startTransition(() => promise.then(setData).catch(setError)); //FIXME sub-chain...
+            return promise;
+        },
+        [fn],
+    );
+
+    return [data, actionFn, isPending, error];
+}

package/src/useFetcher.ts

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+export function useFetcher<T = any>(
+    cb: any,
+
+    { fetchOnMount = false, onError }: { fetchOnMount?: boolean; onError?: (e: Error) => void } = {},
+): {
+    loading: boolean;
+    error: Error | null;
+    data: T | null;
+    trigger: (...args: any[]) => Promise<any>;
+} {
+    const [loading, setLoading] = useState(fetchOnMount);
+    const [error, setError] = useState<Error | null>(null);
+    const [data, setData] = useState<T | null>(null);
+
+    const isMounted = useRef(false);
+
+    const trigger = useCallback(
+        async (...args: any[]): Promise<any> => {
+            try {
+                setLoading(true);
+                setError(null);
+                const res = await cb(args);
+                if (!isMounted.current) return;
+                setData(res);
+                return res;
+            } catch (e) {
+                console.error('Fetch failed', e);
+                if (!isMounted.current) return;
+                setError(e);
+                (onError as any)?.(e);
+            } finally {
+                if (isMounted.current) setLoading(false);
+            }
+        },
+        [cb, onError],
+    );
+
+    useEffect(() => {
+        if (fetchOnMount) {
+            trigger().catch((e) => console.error('Fetch on mount failed', e)); // catch actually will never happen
+        }
+    }, [fetchOnMount, cb, trigger]);
+
+    useEffect(() => {
+        isMounted.current = true;
+        return () => {
+            isMounted.current = false;
+        };
+    });
+
+    return { loading, error, data, trigger };
+}

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../utils-private/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "declarationDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": []
+}

package/turbo.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build"],
+      "outputs": ["src/**/*/index.ts", "package.json", "dist/**/*"]
+    }
+  }
+}

package/vite.config.ts

@@ -0,0 +1,2 @@
+import config from '../utils-private/vite.config';
+export default config;