@kirill.konshin/utils 0.0.14 → 0.0.16

package/src/react/form/form.tsx

@@ -1,4 +1,6 @@
 import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';
+import { createContext, useContext, useMemo } from 'react';
+import clsx from 'clsx';
 
 const nonEmpty = 'This field cannot be empty';
 
@@ -23,16 +25,25 @@ export type Validation<S extends ZodObject> =
           errors?: Errors<S>;
       };
 
-export function create<S extends ZodObject>(schema: S) {
-    const getShape = () =>
-        (schema as z.ZodObject<any>).shape || (schema as z.ZodEffects<z.ZodObject<any>>).sourceType().shape;
+export const FormContext = createContext<{
+    schema: ZodObject;
+}>(null as never);
+
+export const Form = <S extends ZodObject>({ schema, children }: { schema: S; children: any }) => {
+    const value = useMemo(() => ({ schema }), [schema]);
+    return <FormContext.Provider value={value}>{children}</FormContext.Provider>;
+};
 
-    if (!getShape()) {
+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) {
+    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) {
-        const field = getShape()[name];
+        const field = getShape(schema)[name];
         return {
             name,
             id: name,
@@ -73,35 +84,44 @@ export function create<S extends ZodObject>(schema: S) {
         return { success: true, data };
     }
 
-    //FIXME Context?
-    function Field({
-        children,
-        name,
-        errors,
-        hint,
-    }: {
-        children?: any;
-        name: string;
-        errors?: Validation<S>['errors'];
-        hint?: string;
-    }) {
-        const { description } = getShape()[name];
-
-        return (
-            <div className="form-row">
-                {description && <label htmlFor={name}>{description}</label>}
-                {children}
-                {hint && <Hint>{hint}</Hint>}
-                {errors?.[name]?.map((e: string) => (
-                    <Hint error key={e}>
-                        {e}
-                    </Hint>
-                ))}
-            </div>
-        );
-    }
+    return { register, validate, validationError };
+}
+
+function Field<S extends ZodObject>({
+    children,
+    name,
+    errors,
+    hint,
+    className,
+    labelProps,
+    ...props
+}: {
+    children?: any;
+    name: keyof TypeOf<S>;
+    errors?: Validation<S>['errors'];
+    hint?: string;
+    className?: string;
+    labelProps?: any;
+}) {
+    const { schema } = useContext(FormContext);
+    const { description } = getShape(schema)[name];
 
-    return { register, validate, Field, validationError };
+    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 function Hint({ children, error }: { children: any; error?: boolean }) {

package/src/react/index.ts

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

package/src/react/keyboard.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import { useEffect, createContext, useMemo, useState, Dispatch, SetStateAction, useContext } from 'react';
+
+const isCtrlOrMeta = (e: KeyboardEvent) => e.metaKey || e.ctrlKey;
+
+const EVENT = 'keydown';
+
+export type Hotkeys = Record<KeyboardEvent['code'], (e: KeyboardEvent) => void>;
+
+export const HotkeysContext = createContext<{
+    enabled: boolean;
+    setEnabled: Dispatch<SetStateAction<boolean>>;
+}>(null as never);
+
+export const HotkeysProvider = ({ children }) => {
+    const [enabled, setEnabled] = useState(true);
+
+    const control = useMemo(() => ({ enabled, setEnabled }), [enabled, setEnabled]);
+
+    return <HotkeysContext.Provider value={control}>{children}</HotkeysContext.Provider>;
+};
+
+export const useHotkeys = (hotkeys: Hotkeys) => {
+    const { enabled } = useContext(HotkeysContext);
+
+    useEffect(() => {
+        if (typeof document === 'undefined' || !enabled) {
+            return;
+        }
+
+        const listeners = (e: KeyboardEvent) => {
+            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]);
+};

package/src/tailwind/README.md

@@ -0,0 +1,8 @@
+# Usage
+
+https://tailwindcss.com/docs/detecting-classes-in-source-files#explicitly-registering-sources
+
+```css
+@import 'tailwindcss';
+@source "../node_modules/@kirill.konshin/utils/tailwind";
+```

package/tsconfig.json

@@ -9,6 +9,7 @@
     "incremental": false,
     "allowJs": true,
     /* Build-specific options */
+    "module": "esnext",
     "moduleResolution": "bundler",
     "allowImportingTsExtensions": true,
     "isolatedModules": true,
@@ -17,5 +18,5 @@
     "jsx": "react-jsx"
   },
   "include": ["src"],
-  "exclude": ["**/*.test.ts", "**/*.stories.ts", "**/*.stories.tsx"]
+  "exclude": []
 }

package/vite.config.ts

@@ -7,12 +7,14 @@ import { fixExports, formats, entry, external, distDir, generateIndex } from './
 // https://rbardini.com/how-to-build-ts-library-with-vite/
 // https://dev.to/receter/how-to-create-a-react-component-library-using-vites-library-mode-4lma
 
+const isWatch = process.argv.includes('--watch'); // https://github.com/vitejs/vite/discussions/7565#discussioncomment-2939256
+
 export default defineConfig({
     build: {
         ssr: true,
         sourcemap: true,
         outDir: distDir,
-        emptyOutDir: true,
+        emptyOutDir: !isWatch,
         // target: 'esnext',
         lib: {
             entry,
@@ -39,11 +41,16 @@ export default defineConfig({
         {
             name: 'Generate Index & Exports',
             async buildStart() {
-                await generateIndex();
+                if (!isWatch) await generateIndex();
             },
             async closeBundle() {
-                await fixExports();
+                if (!isWatch) await fixExports();
             },
         },
     ],
+    server: {
+        watch: {
+            ignored: ['**/package.json', '**/index.ts'],
+        },
+    },
 });

package/vite.exports.ts

@@ -21,8 +21,8 @@ export const formats = {
 };
 
 export const entryGlob = 'src/*/index.ts';
-export const excludeGlob = 'src/**/*.{stories,test}.{ts,tsx}';
-export const includeGlob = 'src/**/!(*.stories|*.test).{ts,tsx}';
+export const excludeGlob = 'src/**/*.{stories,test,fixture}.{ts,tsx}';
+export const includeGlob = 'src/**/!(*.stories|*.test,fixture).{ts,tsx}';
 export const foldersGlob = 'src/*/';
 
 export const external = [
@@ -104,7 +104,7 @@ export async function fixExports() {
 
     // Write
 
-    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
 
     console.log('Updated package.json with exports');
     // console.log(pkg);

package/demo/cache-demo.ts

@@ -1,343 +0,0 @@
-/* eslint-disable */
-
-import { z, ZodType } from 'zod';
-
-export type EventType = 'request' | 'response';
-
-type MethodReturn<R, M extends keyof R> = R[M] extends (...args: any[]) => any ? Awaited<ReturnType<R[M]>> : never;
-
-type MethodArg<R, M extends keyof R> = R[M] extends (context: any, input: infer I) => any ? I : never;
-
-type Data<R, M extends keyof R, T extends EventType> = T extends 'response' ? MethodReturn<R, M> : MethodArg<R, M>;
-
-// can only be used to create actual contexts, carries the context data
-class ContextSeed<R, M extends keyof R, T extends EventType> {
-    constructor(
-        public responders: R,
-        public message: M,
-        public type: T,
-        public id: string,
-    ) {}
-
-    req<M extends keyof R>(message: M) {
-        return new RequestContext<R, M>(this.responders, message, 'request', this.id);
-    }
-
-    res<M extends keyof R>(message: M) {
-        return new ResponseContext<R, M>(this.responders, message, 'response', this.id);
-    }
-}
-
-// base class with basic non-direction specific methods
-class Context<R, M extends keyof R, T extends EventType> extends ContextSeed<R, M, T> {
-    send(data: Data<R, M, T>): this {
-        return this;
-    }
-
-    listen(
-        callback: (
-            data: Data<R, M, T>,
-            self: this,
-            event: MessageEvent<{ data: Data<R, M, T>; context: Pick<typeof this, 'message' | 'type' | 'id'> }>,
-        ) => void,
-    ): () => void {
-        return () => {};
-    }
-}
-
-class ResponseContext<R, M extends keyof R> extends Context<R, M, 'response'> {
-    send(data: MethodReturn<R, M>): this {
-        return this;
-    }
-}
-
-class RequestContext<R, M extends keyof R> extends Context<R, M, 'request'> {
-    send(data: MethodArg<R, M>): this {
-        return this;
-    }
-
-    fetch(data: MethodArg<R, M>, callback?: (context: RequestContext<R, M>) => void): Promise<MethodReturn<R, M>> {
-        return Promise.resolve(null as any);
-    }
-}
-
-class Dialog<R> {
-    constructor(public responders: R) {}
-
-    req<M extends keyof R>(message: M) {
-        return new RequestContext<R, M>(this.responders, message, 'request', crypto.randomUUID());
-    }
-
-    res<M extends keyof R>(message: M) {
-        return new ResponseContext<R, M>(this.responders, message, 'response', crypto.randomUUID());
-    }
-}
-
-////////////////////////////////////////////////////////////////////////////////
-
-// Worker
-
-class RespondersBase<R> {
-    create<
-        M extends keyof R,
-        S extends ZodType<any, any, any>,
-        F extends (context: Context<R, M, 'response'>, input: z.infer<S>) => any,
-    >(
-        message: M, // <--- this is needed just to tell TS what message this is
-        schema: S,
-        responder: F,
-    ): F {
-        return ((context, input) => {
-            schema.parse(input);
-            return responder(context, input);
-        }) as any;
-    }
-}
-
-/**
- * Works perfectly
- */
-class Responders extends RespondersBase<Responders> {
-    encode = this.create(
-        'encode',
-        z.object({
-            file: z.instanceof(File),
-        }),
-        async (context, { file }) => {
-            // send extra data within same message
-            context.listen((data, ctx) => {
-                data.file;
-            });
-
-            // send extra data within same message
-            context.send({ bitmap: await createImageBitmap(new File([], 'test')) }); // ✅ Valid
-            context.send({ junk: 'xxx' }); // ❌ Bad & should be red
-
-            // send data within different message
-            context.res('progress').send({ progress: 0 }); // ✅ Valid
-            context.res('progress').send({ junk: 'xxx' }); // ❌ Bad & should be red
-
-            // request data
-            context.req('progress').send({ total: 0 }); // ✅ Valid
-            context.req('progress').send({ junk: 'xxx' }); // ❌ Bad & should be red
-
-            // bad names
-            context.req('junk'); // ❌ Bad & should be red
-            context.res('junk'); // ❌ Bad & should be red
-
-            return { bitmap: await createImageBitmap(file) };
-        },
-    );
-
-    progress = this.create(
-        'progress',
-        z.object({
-            total: z.number(),
-        }),
-        (context, { total }: { total: number }) => {
-            return { progress: total / 2 };
-        },
-    );
-}
-
-// Main
-
-// import type { Responders } from './worker';
-
-const dialog = new Dialog({} as Responders);
-
-dialog.res('progress').send({ progress: 0 }); // ✅ Valid
-
-dialog
-    .req('encode')
-    .fetch({ file: new File([], 'test') }, (context) => {
-        context.res('progress').listen((data, ctx) => {
-            // get periodical updates while operation is running
-            console.log(data.progress); // ✅ Valid
-            console.log(data.junk); // ❌ Bad & should be red
-
-            // could be an abort message
-            ctx.res('progress').send({ progress: 0 }); // ✅ Valid
-            ctx.req('progress').send({ total: 0 }); // ✅ Valid
-            ctx.req('progress').send({ junk: 'xxx' }); // ❌ Bad & should be red
-        });
-    })
-    .then((res) => {
-        console.log(res.bitmap);
-    });
-
-dialog.req('junk'); // ❌ Bad & should be red
-
-dialog.req('encode').fetch({ junk: new File([], 'test') }); // ❌ Bad & should be red
-
-////////////////////////////////////////////////////////////////////////////////
-
-type ResSchema = Record<string, [ZodType, ZodType]>;
-type ResSchemaFinal<S extends ResSchema> = { [K in keyof S]: [K, S[K][0], S[K][1]] };
-
-const createSchema = <S extends ResSchema>(s: S): ResSchemaFinal<S> => {
-    return null as any;
-};
-
-/**
- * CREATE function and object
- *
- * Validation works, but navigation does not, plus it's not valid code to use responders2 before creation
- */
-function create<
-    S extends ResSchemaFinal<ResSchema>,
-    M extends keyof S,
-    F extends (key: S[M][0], input: S[M][1]) => S[M][2],
->(schema: S, message: M, responder: F): F {
-    // context: Context<S, M, 'response'>
-    return responder as any;
-}
-
-const schema = createSchema({
-    encode: [
-        z.object({
-            file: z.instanceof(File),
-        }),
-        z.object({
-            bitmap: z.instanceof(ImageBitmap),
-        }),
-    ],
-    preview: [
-        z.object({
-            total: z.number(),
-        }),
-        z.object({
-            progress: z.number(),
-        }),
-    ],
-});
-
-const responders2 = {
-    encode: create(schema, 'encode', async (context, { file }: { file: File }) => {
-        // send extra data within same message
-        context.listen((data, ctx) => {
-            data.file;
-            data.bitmap;
-        });
-
-        // send extra data within same message
-        context.send({ bitmap: await createImageBitmap(new File([], 'test')) }); // ✅ Valid
-        context.send({ junk: 'xxx' }); // ❌ Bad & should be red
-
-        // send data within different message
-        context.res('progress').send({ progress: 0 }); // ✅ Valid
-        context.res('progress').send({ junk: 'xxx' }); // ❌ Bad & should be red
-
-        // request data
-        context.req('progress').send({ total: 0 }); // ✅ Valid
-        context.req('progress').send({ junk: 'xxx' }); // ❌ Bad & should be red
-
-        // bad names
-        context.req('junk'); // ❌ Bad & should be red
-        context.res('junk'); // ❌ Bad & should be red
-
-        return { bitmap: await createImageBitmap(file) };
-    }),
-    progress: create(schema, 'progress', (context, { total }) => {
-        return { progress: total / 2 };
-    }),
-};
-
-////////////////////////////////////////////////////////////////////////////////
-
-////////////////////////////////////////////////////////////////////////////////
-
-type RespondersType<R extends Record<string, (...args: any[]) => any>> = {
-    [K in keyof R]: (context: Context<R, K, 'response'>, input: Parameters<R[K]>[0]) => ReturnType<R[K]>;
-};
-
-/**
- * TYPE DEF and object
- * Works fine but navigation points to type and not the function
- */
-const responders: RespondersType<{
-    encode: (input: { file: File }) => Promise<{ bitmap: ImageBitmap }>;
-    progress: (input: { total: number }) => { progress: number };
-}> = {
-    async encode(context, { file }) {
-        // send extra data within same message
-        context.listen((data, ctx) => {
-            data.file;
-            data.bitmap;
-        });
-
-        // send extra data within same message
-        context.send({ bitmap: await createImageBitmap(new File([], 'test')) }); // ✅ Valid
-        context.send({ junk: 'xxx' }); // ❌ Bad & should be red
-
-        // send data within different message
-        context.res('progress').send({ progress: 0 }); // ✅ Valid
-        context.res('progress').send({ junk: 'xxx' }); // ❌ Bad & should be red
-
-        // request data
-        context.req('progress').send({ total: 0 }); // ✅ Valid
-        context.req('progress').send({ junk: 'xxx' }); // ❌ Bad & should be red
-
-        // bad names
-        context.req('junk'); // ❌ Bad & should be red
-        context.res('junk'); // ❌ Bad & should be red
-
-        return { bitmap: await createImageBitmap(file) };
-    },
-
-    progress(context, { total }) {
-        return { progress: total / 2 };
-    },
-};
-
-////////////////////////////////////////////////////////////////////////////////
-
-export type RespondersMap<R extends Record<string, (...args: any[]) => any>> = {
-    [K in keyof R]: (key: K, input: Parameters<R[K]>[1]) => Awaited<ReturnType<R[K]>>;
-};
-
-/**
- * Broken completely
- */
-const createObject = <R extends Record<string, (...args: any[]) => any>>(
-    creator: (
-        create: <K extends keyof R>(key: K, responder: (context: Context<R, K, any>, input: any) => any) => R[K],
-    ) => R,
-): {
-    [K in keyof R]: (key: K, input: Parameters<R[K]>[1]) => Awaited<ReturnType<R[K]>>;
-} => {
-    const obj = {} as any;
-
-    const create = (key: any, fn: any) => {
-        obj[key] = function (key, input) {
-            return fn.call(this, key, input);
-        };
-    };
-
-    creator(create as any);
-
-    return obj;
-};
-
-const obj = createObject((create) => {
-    return {
-        encode: create('encode', (c, file: File) => {
-            c.res('progress').send({ progress: 0 });
-            return { bitmap: createImageBitmap(file) };
-        }),
-        progress: create('progress', (c, total: number) => {
-            return { progress: total / 2 };
-        }),
-    };
-});
-
-// Usage example
-obj.encode('xxxx', new File([], 'test')).then((result) => {
-    console.log(result.bitmap); // ImageBitmap
-    console.log(result.bitmapxxx); // ImageBitmap
-});
-
-obj.progress('xxxx', 'xxx').then((result) => {
-    console.log(result.progress); // 50
-    console.log(result.progressxxx); // 50
-});