@kirill.konshin/utils 0.0.13 → 0.0.15

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

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/react/form/form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,CAAC,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAI3E,eAAO,MAAM,cAAc,mBAAgE,CAAC;AAC5F,eAAO,MAAM,SAAS,WAAY,CAAC,CAAC,SAAS,KAAG,MAA+B,CAAC;AAChF,eAAO,MAAM,SAAS,WAAY,CAAC,CAAC,SAAS,KAAG,MAA+B,CAAC;AAChF,eAAO,MAAM,UAAU,WAAY,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,wBAAgB,MAAM,CAAC,CAAC,SAAS,SAAS,EAAE,MAAM,EAAE,CAAC;qBAQzB,MAAM,MAAM,CAAC,CAAC,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,WAAW,MAAM,CAAC,CAAC,CAAC,QAAO,OAAO;;;;;;;;;;;yBA2BpE,QAAQ,KAAG,UAAU,CAAC,CAAC,CAAC;+CAqBjD;QACC,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC;QACjC,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB;4BAlC8B,WAAW,CAAC,CAAC,CAAC,UAAU,MAAM,CAAC,CAAC,CAAC,KAAG,UAAU,CAAC,CAAC,CAAC;EAoDnF;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,2CAE3E"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/react/form/form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,CAAC,EAAE,mBAAmB,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AAM3E,eAAO,MAAM,cAAc,mBAAgE,CAAC;AAC5F,eAAO,MAAM,SAAS,WAAY,CAAC,CAAC,SAAS,KAAG,MAA+B,CAAC;AAChF,eAAO,MAAM,SAAS,WAAY,CAAC,CAAC,SAAS,KAAG,MAA+B,CAAC;AAChF,eAAO,MAAM,UAAU,WAAY,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;YACZ,SAAS;EACJ,CAAC;AAElB,eAAO,MAAM,IAAI,GAAI,CAAC,SAAS,SAAS,wBAAwB;IAAE,MAAM,EAAE,CAAC,CAAC;IAAC,QAAQ,EAAE,GAAG,CAAA;CAAE,4CAG3F,CAAC;AAKF,wBAAgB,MAAM,CAAC,CAAC,SAAS,SAAS,EAAE,MAAM,EAAE,CAAC;qBAKzB,MAAM,MAAM,CAAC,CAAC,CAAC,SAAS,WAAW,CAAC,CAAC,CAAC,WAAW,MAAM,CAAC,CAAC,CAAC,QAAO,OAAO;;;;;;;;;;;yBA2BpE,QAAQ,KAAG,UAAU,CAAC,CAAC,CAAC;4BARrB,WAAW,CAAC,CAAC,CAAC,UAAU,MAAM,CAAC,CAAC,CAAC,KAAG,UAAU,CAAC,CAAC,CAAC;EAwBnF;AAuCD,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE;IAAE,QAAQ,EAAE,GAAG,CAAC;IAAC,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,2CAE3E"}

package/dist/react/form/form.js

@@ -1,18 +1,25 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { z } from "zod";
+import { createContext, useMemo } from "react";
+import "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 = ({ 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) {
-  const getShape = () => schema.shape || schema.sourceType().shape;
-  if (!getShape()) {
+  if (!getShape(schema)) {
     throw new Error("Invalid schema: only z.object() or z.object().refine() are supported");
   }
   function register(name, data, errors, mui = false) {
     var _a, _b;
-    const field = getShape()[name];
+    const field = getShape(schema)[name];
     return {
       name,
       id: name,
@@ -44,27 +51,14 @@ function create(schema) {
     }
     return { success: true, data };
   }
-  function Field({
-    children,
-    name,
-    errors,
-    hint
-  }) {
-    var _a;
-    const { description } = getShape()[name];
-    return /* @__PURE__ */ jsxs("div", { className: "form-row", children: [
-      description && /* @__PURE__ */ jsx("label", { htmlFor: name, children: description }),
-      children,
-      hint && /* @__PURE__ */ jsx(Hint, { children: hint }),
-      (_a = errors == null ? void 0 : errors[name]) == null ? void 0 : _a.map((e) => /* @__PURE__ */ jsx(Hint, { error: true, children: e }, e))
-    ] });
-  }
-  return { register, validate, Field, validationError };
+  return { register, validate, validationError };
 }
 function Hint({ children, error }) {
   return /* @__PURE__ */ jsx("div", { className: `hint ${error ? "hint-error" : ""}`, children });
 }
 export {
+  Form,
+  FormContext,
   Hint,
   create,
   isRequired,

package/dist/react/form/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sources":["../../../src/react/form/form.tsx"],"sourcesContent":["import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';\n\nconst nonEmpty = 'This field cannot be empty';\n\nexport const stringRequired = () => 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 function create<S extends ZodObject>(schema: S) {\n    const getShape = () =>\n        (schema as z.ZodObject<any>).shape || (schema as z.ZodEffects<z.ZodObject<any>>).sourceType().shape;\n\n    if (!getShape()) {\n        throw new Error('Invalid schema: only z.object() or z.object().refine() are supported');\n    }\n\n    function register(name: keyof TypeOf<S>, data?: MaybeTypeOf<S>, errors?: Errors<S>, mui: boolean = false) {\n        const field = getShape()[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    //FIXME Context?\n    function Field({\n        children,\n        name,\n        errors,\n        hint,\n    }: {\n        children?: any;\n        name: string;\n        errors?: Validation<S>['errors'];\n        hint?: string;\n    }) {\n        const { description } = getShape()[name];\n\n        return (\n            <div className=\"form-row\">\n                {description && <label htmlFor={name}>{description}</label>}\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\n    return { register, validate, Field, validationError };\n}\n\nexport function Hint({ children, error }: { children: any; error?: boolean }) {\n    return <div className={`hint ${error ? 'hint-error' : ''}`}>{children}</div>;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,WAAW;AAEJ,MAAA,iBAAiB,MAAM,EAAE,OAAO,EAAE,gBAAgB,UAAU,EAAE,IAAI,GAAG,QAAQ;AACnF,MAAM,YAAY,CAAC,WAAgC,OAAO,aAAa;AACvE,MAAM,YAAY,CAAC,WAAgC,OAAO,aAAa;AACvE,MAAM,aAAa,CAAC,WAAiC,UAAU,MAAM,IAAI;AAkBzE,SAAS,OAA4B,QAAW;AACnD,QAAM,WAAW,MACZ,OAA4B,SAAU,OAA0C,aAAa;AAE9F,MAAA,CAAC,YAAY;AACP,UAAA,IAAI,MAAM,sEAAsE;AAAA,EAAA;AAG1F,WAAS,SAAS,MAAuB,MAAuB,QAAoB,MAAe,OAAO;;AAChG,UAAA,QAAQ,SAAS,EAAE,IAAI;AACtB,WAAA;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,6BAAO;AAAA,MACrB,GAAI,MACE;AAAA,QACI,OAAO,MAAM;AAAA,QACb,aAAY,sCAAS,UAAT,mBAAgB,KAAK;AAAA,QACjC,OAAO,CAAC,GAAC,sCAAS,UAAT,mBAAgB;AAAA,MAAA,IAE7B,CAAA;AAAA,IACV;AAAA,EAAA;AAGK,WAAA,gBAAgB,MAAsB,QAAkC;AACtE,WAAA;AAAA,MACH,SAAS;AAAA,MACT;AAAA;AAAA,MACA;AAAA;AAAA,IACJ;AAAA,EAAA;AAGJ,WAAS,SAAS,UAAmC;AAC3C,UAAA,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,IAAA;AAG/D,WAAA,EAAE,SAAS,MAAM,KAAK;AAAA,EAAA;AAIjC,WAAS,MAAM;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,GAMD;;AACC,UAAM,EAAE,YAAA,IAAgB,SAAA,EAAW,IAAI;AAGnC,WAAA,qBAAC,OAAI,EAAA,WAAU,YACV,UAAA;AAAA,MAAA,eAAgB,oBAAA,SAAA,EAAM,SAAS,MAAO,UAAY,aAAA;AAAA,MAClD;AAAA,MACA,QAAS,oBAAA,MAAA,EAAM,UAAK,KAAA,CAAA;AAAA,OACpB,sCAAS,UAAT,mBAAgB,IAAI,CAAC,MACjB,oBAAA,MAAA,EAAK,OAAK,MACN,UADY,EAAA,GAAA,CAEjB;AAAA,IACH,GACL;AAAA,EAAA;AAIR,SAAO,EAAE,UAAU,UAAU,OAAO,gBAAgB;AACxD;AAEO,SAAS,KAAK,EAAE,UAAU,SAA6C;AACnE,SAAA,oBAAC,SAAI,WAAW,QAAQ,QAAQ,eAAe,EAAE,IAAK,SAAS,CAAA;AAC1E;"}
+{"version":3,"file":"form.js","sources":["../../../src/react/form/form.tsx"],"sourcesContent":["import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';\nimport { createContext, useContext, useMemo } from 'react';\nimport clsx from 'clsx';\n\nconst nonEmpty = 'This field cannot be empty';\n\nexport const stringRequired = () => 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 = createContext<{\n    schema: ZodObject;\n}>(null as never);\n\nexport const Form = <S extends ZodObject>({ schema, children }: { schema: S; children: any }) => {\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>(schema: S) {\n    if (!getShape(schema)) {\n        throw new Error('Invalid schema: only z.object() or z.object().refine() are supported');\n    }\n\n    function register(name: keyof TypeOf<S>, data?: MaybeTypeOf<S>, errors?: Errors<S>, mui: boolean = false) {\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\nfunction Field<S extends ZodObject>({\n    children,\n    name,\n    errors,\n    hint,\n    className,\n    labelProps,\n    ...props\n}: {\n    children?: any;\n    name: keyof TypeOf<S>;\n    errors?: Validation<S>['errors'];\n    hint?: string;\n    className?: string;\n    labelProps?: any;\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 function Hint({ children, error }: { children: any; error?: boolean }) {\n    return <div className={`hint ${error ? 'hint-error' : ''}`}>{children}</div>;\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,WAAW;AAEJ,MAAA,iBAAiB,MAAM,EAAE,OAAO,EAAE,gBAAgB,UAAU,EAAE,IAAI,GAAG,QAAQ;AACnF,MAAM,YAAY,CAAC,WAAgC,OAAO,aAAa;AACvE,MAAM,YAAY,CAAC,WAAgC,OAAO,aAAa;AACvE,MAAM,aAAa,CAAC,WAAiC,UAAU,MAAM,IAAI;AAkBnE,MAAA,cAAc,cAExB,IAAa;AAET,MAAM,OAAO,CAAsB,EAAE,QAAQ,eAA6C;AACvF,QAAA,QAAQ,QAAQ,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC;AAClD,SAAQ,oBAAA,YAAY,UAAZ,EAAqB,OAAe,SAAS,CAAA;AACzD;AAEA,MAAM,WAAW,CAAsB,WAClC,OAA4B,SAAU,OAA0C,aAAa;AAE3F,SAAS,OAA4B,QAAW;AAC/C,MAAA,CAAC,SAAS,MAAM,GAAG;AACb,UAAA,IAAI,MAAM,sEAAsE;AAAA,EAAA;AAG1F,WAAS,SAAS,MAAuB,MAAuB,QAAoB,MAAe,OAAO;;AACtG,UAAM,QAAQ,SAAS,MAAM,EAAE,IAAI;AAC5B,WAAA;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,6BAAO;AAAA,MACrB,GAAI,MACE;AAAA,QACI,OAAO,MAAM;AAAA,QACb,aAAY,sCAAS,UAAT,mBAAgB,KAAK;AAAA,QACjC,OAAO,CAAC,GAAC,sCAAS,UAAT,mBAAgB;AAAA,MAAA,IAE7B,CAAA;AAAA,IACV;AAAA,EAAA;AAGK,WAAA,gBAAgB,MAAsB,QAAkC;AACtE,WAAA;AAAA,MACH,SAAS;AAAA,MACT;AAAA;AAAA,MACA;AAAA;AAAA,IACJ;AAAA,EAAA;AAGJ,WAAS,SAAS,UAAmC;AAC3C,UAAA,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,IAAA;AAG/D,WAAA,EAAE,SAAS,MAAM,KAAK;AAAA,EAAA;AAG1B,SAAA,EAAE,UAAU,UAAU,gBAAgB;AACjD;AAuCO,SAAS,KAAK,EAAE,UAAU,SAA6C;AACnE,SAAA,oBAAC,SAAI,WAAW,QAAQ,QAAQ,eAAe,EAAE,IAAK,SAAS,CAAA;AAC1E;"}

package/dist/react/index.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/react/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/react/index.js

@@ -1,10 +1,15 @@
 import { createClient } from "./form/client.js";
-import { Hint, create, isRequired, maxLength, minLength, stringRequired } from "./form/form.js";
+import { 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 {
+  Form,
+  FormContext,
   Hint,
+  HotkeysContext,
+  HotkeysProvider,
   apiCall,
   create,
   createClient,
@@ -14,6 +19,7 @@ export {
   minLength,
   stringRequired,
   useFetch,
-  useFetcher
+  useFetcher,
+  useHotkeys
 };
 //# sourceMappingURL=index.js.map

package/dist/react/index.js.map

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

package/dist/react/keyboard.d.ts

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

package/dist/react/keyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.d.ts","sourceRoot":"","sources":["../../src/react/keyboard.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA+C,QAAQ,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAM1G,MAAM,MAAM,OAAO,GAAG,MAAM,CAAC,aAAa,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC,CAAC;AAEhF,eAAO,MAAM,cAAc;aACd,OAAO;gBACJ,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;EAChC,CAAC;AAElB,eAAO,MAAM,eAAe;;6CAM3B,CAAC;AAEF,eAAO,MAAM,UAAU,YAAa,OAAO,SAyB1C,CAAC"}

package/dist/react/keyboard.js

@@ -0,0 +1,38 @@
+"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 listeners = (e) => {
+      if (!isCtrlOrMeta(e)) return;
+      for (const [code, callback] of Object.entries(hotkeys)) {
+        if (e.code === code) {
+          callback(e);
+          return;
+        }
+      }
+    };
+    window.addEventListener(EVENT, listeners, true);
+    return () => {
+      window.removeEventListener(EVENT, listeners);
+    };
+  }, [hotkeys, enabled]);
+};
+export {
+  HotkeysContext,
+  HotkeysProvider,
+  useHotkeys
+};
+//# sourceMappingURL=keyboard.js.map

package/dist/react/keyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard.js","sources":["../../src/react/keyboard.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, createContext, useMemo, useState, Dispatch, SetStateAction, useContext } 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 const HotkeysContext = createContext<{\n    enabled: boolean;\n    setEnabled: Dispatch<SetStateAction<boolean>>;\n}>(null as never);\n\nexport const HotkeysProvider = ({ 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) => {\n    const { enabled } = useContext(HotkeysContext);\n\n    useEffect(() => {\n        if (typeof document === 'undefined' || !enabled) {\n            return;\n        }\n\n        const listeners = (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\n        window.addEventListener(EVENT, listeners, true);\n\n        return () => {\n            window.removeEventListener(EVENT, listeners);\n        };\n    }, [hotkeys, enabled]);\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,eAAe,CAAC,MAAqB,EAAE,WAAW,EAAE;AAE1D,MAAM,QAAQ;AAID,MAAA,iBAAiB,cAG3B,IAAa;AAET,MAAM,kBAAkB,CAAC,EAAE,eAAe;AAC7C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAErC,QAAA,UAAU,QAAQ,OAAO,EAAE,SAAS,eAAe,CAAC,SAAS,UAAU,CAAC;AAE9E,6BAAQ,eAAe,UAAf,EAAwB,OAAO,SAAU,UAAS;AAC9D;AAEa,MAAA,aAAa,CAAC,YAAqB;AAC5C,QAAM,EAAE,QAAA,IAAY,WAAW,cAAc;AAE7C,YAAU,MAAM;AACZ,QAAI,OAAO,aAAa,eAAe,CAAC,SAAS;AAC7C;AAAA,IAAA;AAGE,UAAA,YAAY,CAAC,MAAqB;AAChC,UAAA,CAAC,aAAa,CAAC,EAAG;AAEtB,iBAAW,CAAC,MAAM,QAAQ,KAAK,OAAO,QAAQ,OAAO,GAAG;AAChD,YAAA,EAAE,SAAS,MAAM;AACjB,mBAAS,CAAC;AACV;AAAA,QAAA;AAAA,MACJ;AAAA,IAER;AAEO,WAAA,iBAAiB,OAAO,WAAW,IAAI;AAE9C,WAAO,MAAM;AACF,aAAA,oBAAoB,OAAO,SAAS;AAAA,IAC/C;AAAA,EAAA,GACD,CAAC,SAAS,OAAO,CAAC;AACzB;"}

package/dist/react/useFetch.js

@@ -1,3 +1,4 @@
+"use client";
 import { useTransition, useState, useCallback } from "react";
 function useFetch(fn, defaultValue = null) {
   const [isPending, startTransition] = useTransition();

package/dist/react/useFetch.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFetch.js","sources":["../../src/react/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":";AAOgB,SAAA,SACZ,IACA,eAAyB,MACwB;AAGjD,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,YAAY;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgB;AAE1C,QAAM,WAAW;AAAA,IACb,IAAI,SAAgC;AAC1B,YAAA,UAAU,GAAG,GAAG,IAAI;AAE1B,sBAAgB,MAAM,QAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACpD,aAAA;AAAA,IACX;AAAA,IACA,CAAC,EAAE;AAAA,EACP;AAEA,SAAO,CAAC,MAAM,UAAU,WAAW,KAAK;AAC5C;"}
+{"version":3,"file":"useFetch.js","sources":["../../src/react/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":";;AAOgB,SAAA,SACZ,IACA,eAAyB,MACwB;AAGjD,QAAM,CAAC,WAAW,eAAe,IAAI,cAAc;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAmB,YAAY;AACvD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgB;AAE1C,QAAM,WAAW;AAAA,IACb,IAAI,SAAgC;AAC1B,YAAA,UAAU,GAAG,GAAG,IAAI;AAE1B,sBAAgB,MAAM,QAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AACpD,aAAA;AAAA,IACX;AAAA,IACA,CAAC,EAAE;AAAA,EACP;AAEA,SAAO,CAAC,MAAM,UAAU,WAAW,KAAK;AAC5C;"}

package/dist/tailwind/responsiveHelper.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, jsx } from "react/jsx-runtime";
 function ResponsiveHelperTW() {
   return /* @__PURE__ */ jsxs("span", { className: "fixed bottom-0 right-2 z-30 leading-none text-xs", children: [

package/dist/tailwind/responsiveHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsiveHelper.js","sources":["../../src/tailwind/responsiveHelper.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nexport function ResponsiveHelperTW() {\n    return (\n        <span className=\"fixed bottom-0 right-2 z-30 leading-none text-xs\">\n            <small className=\"hidden xs:max-sm:block\">XS</small>\n            <small className=\"hidden sm:max-md:block\">SM</small>\n            <small className=\"hidden md:max-lg:block\">MD</small>\n            <small className=\"hidden lg:max-xl:block\">LG</small>\n            <small className=\"hidden xl:max-2xl:block\">XL</small>\n            <small className=\"hidden 2xl:block\">XXL</small>\n        </span>\n    );\n}\n"],"names":[],"mappings":";AAIO,SAAS,qBAAqB;AAE7B,SAAA,qBAAC,QAAK,EAAA,WAAU,oDACZ,UAAA;AAAA,IAAC,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,2BAA0B,UAAE,MAAA;AAAA,IAC5C,oBAAA,SAAA,EAAM,WAAU,oBAAmB,UAAG,MAAA,CAAA;AAAA,EAAA,GAC3C;AAER;"}
+{"version":3,"file":"responsiveHelper.js","sources":["../../src/tailwind/responsiveHelper.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nexport function ResponsiveHelperTW() {\n    return (\n        <span className=\"fixed bottom-0 right-2 z-30 leading-none text-xs\">\n            <small className=\"hidden xs:max-sm:block\">XS</small>\n            <small className=\"hidden sm:max-md:block\">SM</small>\n            <small className=\"hidden md:max-lg:block\">MD</small>\n            <small className=\"hidden lg:max-xl:block\">LG</small>\n            <small className=\"hidden xl:max-2xl:block\">XL</small>\n            <small className=\"hidden 2xl:block\">XXL</small>\n        </span>\n    );\n}\n"],"names":[],"mappings":";;AAIO,SAAS,qBAAqB;AAE7B,SAAA,qBAAC,QAAK,EAAA,WAAU,oDACZ,UAAA;AAAA,IAAC,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,0BAAyB,UAAE,MAAA;AAAA,IAC3C,oBAAA,SAAA,EAAM,WAAU,2BAA0B,UAAE,MAAA;AAAA,IAC5C,oBAAA,SAAA,EAAM,WAAU,oBAAmB,UAAG,MAAA,CAAA;AAAA,EAAA,GAC3C;AAER;"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kirill.konshin/utils",
   "description": "Utilities",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "type": "module",
   "scripts": {
     "----- BUILD -----": "",
@@ -24,6 +24,7 @@
     "expo-file-system": "^18.0.7",
     "expo-sharing": "^13.0.1",
     "expo-updates": "^0.26.13",
+    "file-saver": "^2.0.5",
     "many-keys-map": "^2.0.1",
     "psd": "^3.4.0",
     "react-hook-form": "^7.54.2",
@@ -43,8 +44,10 @@
     "@storybook/react": "^8.5.2",
     "@storybook/react-vite": "^8.5.2",
     "@storybook/test": "^8.5.2",
+    "@types/file-saver": "^2",
     "@types/psd": "^3.4.3",
     "@vitest/coverage-v8": "^3.0.4",
+    "@vitest/web-worker": "^3.0.5",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
     "create-ts-index": "^1.14.0",
@@ -57,6 +60,7 @@
     "next": "^15.1.6",
     "react-bootstrap": "^2.10.8",
     "react-native": "^0.77.0",
+    "rollup-preserve-directives": "^1.1.3",
     "sass-embedded": "^1.83.4",
     "storybook": "^8.5.2",
     "tailwindcss": "^4.0.1",
@@ -178,4 +182,4 @@
   "main": "./dist/core/index.js",
   "module": "./dist/core/index.js",
   "types": "./dist/core/index.d.ts"
-}
+}

package/src/bootstrap/controls.stories.tsx

@@ -7,7 +7,7 @@ import { Select, Control, Range, Checkbox } from './controls';
 const defaultOptions = { num: 1, bool: false, select: 'bar' };
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
+const meta: Meta<typeof Control> = {
     title: 'Bootstrap / Controls',
     parameters: {
         layout: 'centered',
@@ -32,7 +32,7 @@ const meta = {
 
         return <div style={{ width: '300px' }}>{cloneElement(children as any, { ...safeArgs, ...controlProps })}</div>;
     },
-} satisfies Meta<typeof Control>;
+};
 
 export default meta;
 

package/src/bootstrap/controls.tsx

@@ -4,7 +4,7 @@ const lcFirst = (str) => str[0].toLowerCase() + str.substring(1, str.length);
 
 const toProperty = (str) => lcFirst(str).split(' ').join('');
 
-interface ControlProps {
+export interface ControlProps {
     value?: any;
     setValue?: (v: any) => void;
     defaultValue?: any;
@@ -22,9 +22,9 @@ interface ControlProps {
     hideValue?: boolean;
 }
 
-type LabelProps = Pick<ControlProps, 'name' | 'value' | 'defaultValue'> & { reset: () => void };
+export type LabelProps = Pick<ControlProps, 'name' | 'value' | 'defaultValue'> & { reset: () => void };
 
-const Label = memo<LabelProps>(function Label({ name, reset, value, defaultValue }) {
+export const Label = memo<LabelProps>(function Label({ name, reset, value, defaultValue }) {
     return (
         <label className="flex-grow-1 mb-0 d-flex align-items-center justify-content-start gap-2">
             {name}

package/src/bootstrap/error.stories.tsx

@@ -4,7 +4,7 @@ import { fn } from '@storybook/test';
 import { ErrorAlert } from './error';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
+const meta: Meta<typeof ErrorAlert> = {
     title: 'Bootstrap / ErrorAlert',
     component: ErrorAlert,
     parameters: {
@@ -16,7 +16,7 @@ const meta = {
         children: { control: 'text' },
     },
     args: { onRetry: fn() },
-} satisfies Meta<typeof ErrorAlert>;
+};
 
 export default meta;
 type Story = StoryObj<typeof meta>;
@@ -29,6 +29,6 @@ export const String: Story = {
 
 export const ErrorObject: Story = {
     args: {
-        children: new Error('An error occurred'),
+        children: new Error('An error occurred') as any,
     },
 };

package/src/bootstrap/field.stories.tsx

@@ -6,7 +6,7 @@ import { FieldGroup } from './field';
 import { FormControl } from 'react-bootstrap';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
+const meta: Meta<typeof FieldGroup> = {
     title: 'Bootstrap / FieldGroup',
     component: FieldGroup,
     parameters: {
@@ -19,7 +19,7 @@ const meta = {
         horizontal: { control: 'check' },
     },
     args: { onClick: fn() },
-} satisfies Meta<typeof FieldGroup>;
+};
 
 export default meta;
 

package/src/bootstrap/globalLoading.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { GlobalLoading } from './globalLoading';
 
-const meta = {
+const meta: Meta<typeof GlobalLoading> = {
     title: 'Bootstrap / GlobalLoading',
     component: GlobalLoading,
     parameters: {
@@ -12,7 +12,7 @@ const meta = {
     argTypes: {
         loading: { control: 'check' },
     },
-} satisfies Meta<typeof GlobalLoading>;
+};
 
 export default meta;
 

package/src/bootstrap/loading.stories.tsx

@@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Loading } from './loading';
 
-const meta = {
+const meta: Meta<typeof Loading> = {
     title: 'Bootstrap / Loading',
     component: Loading,
     parameters: {
@@ -14,7 +14,7 @@ const meta = {
         show: { control: 'check' },
         size: { control: 'select', options: ['sm', 'md'] },
     },
-} satisfies Meta<typeof Loading>;
+};
 
 export default meta;
 

package/src/bootstrap/screen.stories.tsx

@@ -45,7 +45,7 @@ const lorem = (
     </>
 );
 
-const meta = {
+const meta: Meta<typeof Screen> = {
     title: 'Bootstrap / Screen',
     component: Screen,
     parameters: {
@@ -75,7 +75,7 @@ const meta = {
         ),
         backCb: fn(),
     },
-} satisfies Meta<typeof Screen>;
+};
 
 export default meta;
 

package/src/bootstrap/toaster.stories.tsx

@@ -4,7 +4,7 @@ import { fn } from '@storybook/test';
 import { Toaster } from './toaster';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
+const meta: Meta<typeof Toaster> = {
     title: 'Bootstrap / Toaster',
     component: Toaster,
     parameters: {
@@ -13,7 +13,7 @@ const meta = {
     tags: ['autodocs'],
     argTypes: {},
     args: { onClick: fn() },
-} satisfies Meta<typeof Toaster>;
+};
 
 export default meta;
 

package/src/bootstrap/useModal.stories.tsx

@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { useModal, UseModalProps } from './useModal';
-import { Button, ButtonGroup } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
+const meta: Meta<FC<UseModalProps>> = {
     title: 'Bootstrap / useModal',
     parameters: {
         layout: 'centered',
@@ -34,7 +34,7 @@ const meta = {
         );
     },
     // args: { onSubmit: (e) => e.preventDefault() },
-} satisfies Meta<FC<UseModalProps>>;
+};
 
 export default meta;
 

package/src/core/README.md

@@ -0,0 +1,91 @@
+# WRPC
+
+TODO
+
+- [ ] Add to readme https://stackoverflow.com/questions/77727664/how-to-get-returned-value-from-async-generator-when-using-for-await
+- [ ] Value passed to next are ignored https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/AsyncGenerator/next#sending_values_to_the_generator
+
+```mermaid
+sequenceDiagram
+    box Main
+    participant Code
+    participant Caller
+    end
+    box Worker
+    participant Worker
+    participant Resolver
+    end
+
+    %% autonumber
+
+    Code->>Caller: caller.generator(payload)
+
+    Caller-->>Code: iterator & promise
+
+    Code->>Code: Start main CONSUMER loop
+
+    Code->>Caller: iterator[Symbol]()
+
+    Caller->>Caller: Start replica GENERATOR loop
+
+    Code->>Caller: iterator.next()
+
+    Caller->>Worker: postMessage(payload)
+
+    Worker->>Resolver: resolver(payload)
+
+    Resolver-->>Worker: iterator
+
+    Worker->>Worker: Start replica CONSUMER loop
+
+    Worker->>Resolver: iterator[Symbol]()
+
+    Resolver->>Resolver: Start GENERATOR loop
+
+    rect rgb(232, 244, 248)
+
+        loop Synchronized iteration
+            Worker->>+Resolver: iterator.next(payload)
+
+            Resolver-->>-Worker: yield value
+
+            Worker-->>Caller: postMessage(value, done=false)
+
+            Note over Worker: Wait for ACK or ABORT
+
+            Caller-->>Code: yield value
+
+            Code->>Caller: iterator.next(nextPayload)
+
+            Caller->>Worker: postMessage(ack, nextPayload)
+        end
+
+    end
+
+    break Break or AbortSignal (maybe)
+        Code-->>Code: Loop exits
+        Code->>Caller: signal.abort()
+
+        Caller-->>Caller: Loop exits
+
+        Caller->>Worker: postMessage(abort)
+
+        Worker-->>Worker: Loop exits via Break
+
+        Resolver-->>Resolver: Loop exits
+    end
+
+    opt Occurs on Error
+        Resolver-->>Worker: throw Error
+
+        Worker-->>Caller: postMessage(error, done=true)
+
+        Caller-->>Code: throw Error
+    end
+
+    Resolver-->>Worker: return value
+
+    Worker-->>Caller: postMessage(value, done=true)
+
+    Caller-->>Code: return value
+```

package/src/core/cache.ts

@@ -64,6 +64,7 @@ export function memo<Key extends any[], Val, SerializedKey extends any[] = Key>(
 ) {
     const map = new ManyKeysMap<SerializedKey, Val>();
 
+    //TODO Extend ManyKeysMap
     const clear = (...condition: Key | any[]) => {
         if (!condition?.length) {
             map.forEach((value, serializedKey) => {
@@ -114,17 +115,12 @@ export function memo<Key extends any[], Val, SerializedKey extends any[] = Key>(
  *
  * This makes possible to implement various one-off and subsequent transformations.
  *
- * 1. `write`: Before writing to cache, called only once if cache is present and valid
- * 2. `read`: After it's read from cache, always called if cache is valid
- * TODO Better names: once, folloing
- * TODO Better names: memoize, recover
- * TODO Better names: writeTransformer, readTransformer
- * TODO Better names: writeModifier, readModifier
- * TODO Better names: write, read
+ * 1. `write`: Transform value BEFORE writing to cache, called only once if cache IS NOT present or IS NOT valid
+ * 2. `read`: Transform value AFTER it's read from cache, always called if cache IS valid, keep in mind this transform is applied on top of BEFORE
  *
  * Both should return same type or null.
  *
- * If newValue is null, old is returned, and no cache is set.
+ * If `newValue` is null, old is returned, and no cache is set.
  *
  * ```ts
  * class InputCache extends TypedCache<string, ImageBitmap> {
@@ -186,7 +182,7 @@ export function memo<Key extends any[], Val, SerializedKey extends any[] = Key>(
  */
 export abstract class TransformerMap<Key, Val = Key> extends Map<Key, Val> {
     constructor(protected readonly name: string) {
-        console.warn('CREATE cache', name);
+        // console.warn('CREATE cache', name);
         super();
     }
 
@@ -199,13 +195,17 @@ export abstract class TransformerMap<Key, Val = Key> extends Map<Key, Val> {
     }
 
     delete(key: Key) {
-        const has = this.has(key);
-        if (has) this.dispose(this.get(key) as Val, key);
+        const val = this.get(key);
+        const has = typeof val !== 'undefined';
+        if (has) this.dispose(val, key);
         super.delete(key);
         return has;
     }
 
-    // do something with the value and key before removing it
+    /**
+     * Do something with the value and key before removing it from cache
+     * For example, close a file or a bitmap
+     */
     protected dispose(value: Val, key: Key) {}
 
     clear() {

package/src/core/files.ts

@@ -0,0 +1,24 @@
+import { saveAs } from 'file-saver';
+
+export const downloadFile = async (filename, text, type = 'application/json') => {
+    //FIXME https://github.com/eligrey/FileSaver.js/issues/731
+    saveAs(new Blob([text], { type }), filename);
+};
+
+export const openFile = (): Promise<string> =>
+    new Promise((res, rej) => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.addEventListener('change', function readFile(e) {
+            input.removeEventListener('change', readFile);
+            // @ts-expect-error file is always there
+            const [file] = e.target.files;
+            if (!file) return;
+            const reader = new FileReader();
+            reader.onload = (e) => res(e.target?.result as string);
+            reader.onerror = rej;
+            reader.onabort = rej;
+            reader.readAsText(file);
+        });
+        input.click();
+    });