@kirill.konshin/utils 0.0.18 → 0.0.20

package/src/bootstrap/toaster.stories.tsx

@@ -1,32 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-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: Meta<typeof Toaster> = {
-    title: 'Bootstrap / Toaster',
-    component: Toaster,
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {},
-    args: { onClick: fn() },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        toast: 'Hello, World!',
-    },
-};
-
-export const Object: Story = {
-    args: {
-        toast: { message: 'Toast', variant: 'dark' },
-    },
-};

package/src/bootstrap/toaster.tsx

@@ -1,38 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { Toast, ToastProps } from 'react-bootstrap';
-// import { useToaster } from '../redux/toasterSlice';
-
-export function Toaster({
-    toast,
-}: { toast: string | { message: string; title?: string; variant?: 'dark' | 'success' | 'danger' } } & ToastProps) {
-    //const { toast, setToast } = useToaster();
-    const [dismissed, setDismissed] = useState(false);
-
-    const msg = typeof toast === 'string' ? toast : toast?.message;
-    const title = typeof toast === 'string' ? 'Notification' : toast?.title;
-    const variant = typeof toast === 'string' ? '' : toast?.variant;
-
-    return (
-        <Toast
-            onClose={() => setDismissed(true)}
-            show={!dismissed}
-            delay={10000}
-            autohide
-            bg={variant?.toLowerCase()}
-            className="position-fixed top-50 right-50 min-w-200px z-3"
-        >
-            <Toast.Header>
-                <strong className="me-auto">Notification</strong>
-            </Toast.Header>
-            <Toast.Body
-                className={
-                    ['dark', 'success', 'danger'].includes((variant as string)?.toLowerCase()) ? 'text-white' : ''
-                }
-            >
-                {msg}
-            </Toast.Body>
-        </Toast>
-    );
-}

package/src/bootstrap/useModal.stories.tsx

@@ -1,51 +0,0 @@
-import React, { FC } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { useModal, UseModalProps } from './useModal';
-import { Button } from 'react-bootstrap';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<FC<UseModalProps>> = {
-    title: 'Bootstrap / useModal',
-    parameters: {
-        layout: 'centered',
-    },
-    tags: ['autodocs'],
-    argTypes: {
-        children: { control: 'text' },
-        title: { control: 'text' },
-        cancelButton: { control: 'text' },
-        submitButton: { control: 'text' },
-        offcanvas: { control: 'check' },
-    },
-    args: {
-        children: 'Modal Content',
-        title: 'Modal Title',
-    },
-    render: function Demo(args) {
-        const { open, show, close, ModalDialog } = useModal();
-        return (
-            <>
-                <Button onClick={open}>Open Modal</Button>
-                <ModalDialog {...args} show={show}>
-                    {args.children}
-                    <Button onClick={close}>Close Modal</Button>
-                </ModalDialog>
-            </>
-        );
-    },
-    // args: { onSubmit: (e) => e.preventDefault() },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {},
-};
-
-export const Offcanvas: Story = {
-    args: {
-        offcanvas: true,
-    },
-};

package/src/bootstrap/useModal.tsx

@@ -1,88 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { Button, Modal, ModalProps, Offcanvas, OffcanvasProps, Stack } from 'react-bootstrap';
-
-export type UseModalArgs = { onClose?: any; showOnMount?: boolean };
-
-export type UseModalProps = {
-    children?: any;
-    show?: boolean;
-    onSubmit?: (e: any) => void;
-    submitButton?: string | any;
-    cancelButton?: string | any;
-    offcanvas?: boolean;
-    title?: string | any;
-    containerProps?: ModalProps | OffcanvasProps;
-};
-
-export function useModal({ onClose, showOnMount }: UseModalArgs = {}) {
-    const [show, setShow] = useState(showOnMount);
-
-    const close = useCallback(() => {
-        setShow(false);
-        onClose?.();
-    }, [onClose]);
-
-    const open = useCallback(() => setShow(true), []);
-
-    const defaultOnSubmit = useCallback(
-        (e) => {
-            e.preventDefault();
-            close();
-        },
-        [close],
-    );
-
-    const ModalDialog = useMemo(
-        () =>
-            function ModalDialog({
-                children,
-                show,
-                onSubmit = defaultOnSubmit,
-                submitButton = 'Done',
-                cancelButton = 'Cancel',
-                offcanvas = false,
-                title = null as any,
-                containerProps = {},
-            }: ModalProps) {
-                const Container = offcanvas ? Offcanvas : Modal;
-                const containerDefaultProps = offcanvas ? { style: { maxWidth: '85%' } } : {};
-                const Body = offcanvas ? Offcanvas.Body : Modal.Body;
-                const Header = offcanvas ? Offcanvas.Header : Modal.Header;
-                const Title = offcanvas ? Offcanvas.Title : Modal.Title;
-
-                return (
-                    <Container {...{ ...containerDefaultProps, ...containerProps }} show={show} onHide={close}>
-                        <form onSubmit={onSubmit}>
-                            {title && (
-                                <Header closeButton>
-                                    <Title>{title}</Title>
-                                </Header>
-                            )}
-
-                            <Body as={Stack} gap={3}>
-                                {show && children}
-                            </Body>
-
-                            {!offcanvas && (submitButton || cancelButton) && (
-                                <Modal.Footer>
-                                    {cancelButton && (
-                                        <Button variant="outline-secondary" onClick={close}>
-                                            {cancelButton}
-                                        </Button>
-                                    )}
-                                    {submitButton && (
-                                        <Button variant="secondary" type="submit">
-                                            {submitButton}
-                                        </Button>
-                                    )}
-                                </Modal.Footer>
-                            )}
-                        </form>
-                    </Container>
-                );
-            },
-        [close, defaultOnSubmit],
-    );
-
-    return { show, close, open, ModalDialog };
-}

package/src/bootstrap/useWrappedForm.ts

@@ -1,40 +0,0 @@
-import { useForm, FormState } from 'react-hook-form';
-import { useCallback } from 'react';
-
-export const isFormLoading = (formState: FormState<any>) => formState.isLoading || formState.isSubmitting;
-
-export const useWrappedForm: typeof useForm = (options) => {
-    const form = useForm(options);
-
-    const handleSubmit: typeof form.handleSubmit = useCallback(
-        (onSubmit, onError) => {
-            const wrappedSubmit: typeof onSubmit = async (data) => {
-                try {
-                    await onSubmit(data);
-                } catch (e) {
-                    form.setError('root', { type: 'server', message: e.message });
-                    console.error('Error submitting form', e);
-                }
-            };
-            return form.handleSubmit(wrappedSubmit, onError);
-        },
-        [form],
-    );
-
-    return { ...form, handleSubmit };
-};
-
-/**
- * Issue #3: Submit event still propagates to parent when using portal
- * https://reactjs.org/docs/portals.html#event-bubbling-through-portals
- * Event bubbling goes through React DOM instead of HTML DOM
- * Portals don't have an effect on this one, we need to stop event propagation
- * This should be our default form handling method
- * https://codesandbox.io/s/react-hook-form-nested-portal-6x3fvy?file=/src/App.tsx:1905-2261
- * https://github.com/react-hook-form/react-hook-form/issues/1005#issuecomment-988380981
- */
-export const stopPropagation = (callback) => (e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    callback(e);
-};

package/src/core/README.md

@@ -1,91 +0,0 @@
-# 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.test.ts

@@ -1,121 +0,0 @@
-import { expect, describe, test, vi } from 'vitest';
-import { ANY, MaybePromise, memo, TransformerMap } from './cache';
-
-describe('memo', async () => {
-    test('simple', async () => {
-        const random = vi.fn(() => Math.random());
-        const memoized = memo(random);
-
-        const first = await memoized();
-        const second = await memoized();
-
-        expect(first.hit).toBeFalsy();
-        expect(second.hit).toBeTruthy();
-        expect(first.value).toBe(second.value);
-        expect(memoized.size()).toBe(1);
-
-        memoized.clear();
-        expect(memoized.size()).toBe(0);
-
-        const third = await memoized();
-        expect(third.hit).toBeFalsy();
-    });
-
-    test('with key', async () => {
-        const random = vi.fn((arg) => arg + Math.random().toString());
-        const memoized = memo(random);
-
-        const first = await memoized(1);
-        const second = await memoized(2);
-
-        expect(first.hit).toBeFalsy();
-        expect(second.hit).toBeFalsy();
-        expect(first.value).not.toBe(second.value);
-        expect(memoized.size()).toBe(2);
-
-        const first2 = await memoized(1);
-        const second2 = await memoized(2);
-
-        expect(first2.hit).toBeTruthy();
-        expect(first.value).toBe(first2.value);
-        expect(second2.hit).toBeTruthy();
-        expect(second.value).toBe(second2.value);
-
-        memoized.clear(1);
-        expect(memoized.size()).toBe(1);
-        memoized.clear(ANY);
-        expect(memoized.size()).toBe(0);
-    });
-});
-
-describe('TransformerMap', async () => {
-    test('simple', async () => {
-        const dispose = vi.fn();
-
-        class Cache extends TransformerMap<number, any> {
-            write(key, value, oldValue) {
-                value.cached = true;
-                value.read = 0;
-                return value;
-            }
-            read(value, key) {
-                value.read++;
-                return value;
-            }
-            dispose(value, key) {
-                dispose(value, key);
-            }
-        }
-
-        const cache = new Cache('test');
-
-        const obj = { a: 1 };
-
-        const x1 = await cache.memo(1, obj);
-        expect(x1).toStrictEqual({ a: 1, cached: true, read: 0 });
-
-        const x2 = await cache.memo(1, obj);
-        expect(x2).toStrictEqual({ a: 1, cached: true, read: 1 });
-
-        const x3 = await cache.memo(1, { a: 2 });
-        expect(x3).toStrictEqual({ a: 2, cached: true, read: 0 });
-        expect(cache.size).toEqual(1);
-        expect(dispose).toBeCalledTimes(1);
-        expect(dispose).toBeCalledWith({ a: 1, cached: true, read: 1 }, 1);
-
-        const x4 = await cache.memo(2, { a: 20 });
-
-        expect(x4).toStrictEqual({ a: 20, cached: true, read: 0 });
-        expect(cache.size).toEqual(2);
-        expect(dispose).toBeCalledTimes(1);
-    });
-
-    test('key transform', async () => {
-        const dispose = vi.fn();
-
-        class Cache extends TransformerMap<number, any> {
-            write(key, value, oldValue) {
-                return { key, read: 0 };
-            }
-            read(value, key) {
-                value.read++;
-                return value;
-            }
-            dispose(value, key) {
-                dispose(value, key);
-            }
-        }
-
-        const cache = new Cache('test');
-
-        const x1 = await cache.memo(1);
-        expect(x1).toStrictEqual({ key: 1, read: 0 });
-
-        const x2 = await cache.memo(1);
-        expect(x2).toStrictEqual({ key: 1, read: 1 });
-
-        cache.clear();
-        expect(dispose).toBeCalledTimes(1);
-        expect(dispose).toBeCalledWith({ key: 1, read: 1 }, 1);
-    });
-});

package/src/core/cache.ts

@@ -1,239 +0,0 @@
-import ManyKeysMap from 'many-keys-map';
-
-export type MaybePromise<T> = T | Promise<T>;
-
-export const shallowCompare = (prev: any, next: any) =>
-    Array.from(new Set([...Object.keys(prev), ...Object.keys(next)])).every((key) => prev[key] === next[key]);
-
-export const equal = (prev: any, next: any) => prev === next;
-
-const UNUSED = Symbol('UNUSED');
-export const ANY = Symbol('*');
-
-export function createTracker<Dep = any>(whenDifferent: (next: Dep, prev?: Dep) => any, shallow = false) {
-    let lastDependency: Dep = UNUSED as any;
-
-    const comparator = shallow ? shallowCompare : equal;
-
-    return function tracker(dependency: Dep) {
-        // console.log('Tracker', lastDependency, dependency);
-
-        if (lastDependency !== UNUSED && comparator(lastDependency, dependency)) {
-            // console.log('RETAINED cache', { lastDependency, dependency });
-            return false;
-        }
-
-        // console.log('INVALIDATED cache', {lastDependency, dependency});
-
-        const res = whenDifferent(dependency, lastDependency === UNUSED ? undefined : lastDependency) || true;
-
-        lastDependency = dependency;
-
-        return res;
-    };
-}
-
-/**
- * https://github.com/futpib/deep-weak-map
- * https://github.com/fregante/many-keys-map
- * https://github.com/fregante/many-keys-weakmap
- * https://github.com/sindresorhus/memoize?tab=readme-ov-file#example-multiple-non-serializable-arguments
- *
- * ```ts
- * const memoized = memo(
- *   (file, options, ...args) => { ... },
- *   {
- *     key: (file, options, ...args) => [file, JSON.stringify(options), ...args],
- *     invalidate: (bitmap) => !bitmap.width,
- *     dispose: (bitmap) => bitmap.close(),
- *   }
- * );
- * ```
- */
-export function memo<Key extends any[], Val, SerializedKey extends any[] = Key>(
-    fn: (...args: Key) => MaybePromise<Val>,
-    {
-        key = (...k: Key) => k as never as SerializedKey,
-        invalidate,
-        dispose,
-    }: {
-        key?: (...key: Key) => SerializedKey;
-        invalidate?: (prev: Val, ...key: SerializedKey) => boolean;
-        dispose?: (prev: Val, ...key: SerializedKey) => void;
-    } = {},
-) {
-    const map = new ManyKeysMap<SerializedKey, Val>();
-
-    //TODO Extend ManyKeysMap
-    const clear = (...condition: Key | any[]) => {
-        if (!condition?.length) {
-            map.forEach((value, serializedKey) => {
-                dispose?.(value, ...serializedKey);
-            });
-            map.clear();
-            return;
-        }
-
-        const keyToClear = key(...(condition as any));
-
-        map.forEach((value, serializedKey) => {
-            if (!serializedKey.every((kk, i) => keyToClear[i] === ANY || kk === keyToClear[i])) return;
-            dispose?.(value, ...serializedKey);
-            map.delete(serializedKey);
-        });
-    };
-
-    const size = () => map.size;
-
-    async function memoized(...args: Key) {
-        const k = key(...args);
-
-        const has = map.has(k);
-        const old = map.get(k);
-
-        if (has && !invalidate?.(old as never as Val, ...k)) {
-            return { value: map.get(k), hit: true };
-        }
-
-        const value = await fn(...args);
-
-        map.set(k, value);
-
-        return { hit: false, value };
-    }
-
-    memoized.clear = clear;
-    memoized.size = size;
-
-    //TODO return mimic-function(memorized, fn);
-
-    return memoized;
-}
-
-/**
- * Allows to memoize values by key and invalidate them based on the previous value.
- *
- * This makes possible to implement various one-off and subsequent transformations.
- *
- * 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.
- *
- * ```ts
- * class InputCache extends TypedCache<string, ImageBitmap> {
- *     dispose(bitmap: ImageBitmap, key: string) {
- *         bitmap.close();
- *     }
- * }
- *
- * const cache = new InputCache('input');
- *
- * // Cache provided OffscreenCanvas by name and create context once per canvas
- *
- * class CanvasCache extends TypedCache<string, OffscreenCanvas> {
- *     protected write(key: string, canvas: OffscreenCanvas): OffscreenCanvas {
- *         const canvas = newValue.getContext('2d');
- *         canvas.ctx = canvas;
- *         return canvas;
- *     }
- * }
- *
- * // Transfer control to offscreen canvas and track removal of original
- * // When called again, always return null, because canvas is handed to worker, and never returned to main
- *
- * class CanvasCache extends TypedCache<HTMLCanvasElement, OffscreenCanvas> {
- *
- *     protected write(canvas: HTMLCanvasElement): OffscreenCanvas {
- *         let l;
- *         canvas.addEventListener(
- *             'remove',
- *             (l = () => {
- *                 console.log('Removing canvas from cache', key);
- *                 this.delete(canvas);
- *                 key.removeEventListener('remove', l);
- *             }),
- *         );
- *         return canvas.transferControlToOffscreen();
- *     }
- *
- *     protected read() {
- *         return null;
- *     }
- * }
- *
- * // Create bitmap from file and check if was used, return null if used
- * // Since bitmaps are also cached in worker, used bitmaps are not sent
- *
- * class BitmapCache extends TypedCache<File, ImageBitmap, File> {
- *     protected async write(file: File): Promise<ImageBitmap> {
- *         return await createImageBitmap(file);
- *     }
- *
- *     protected read(bitmap: ImageBitmap): Promise<ImageBitmap> | ImageBitmap {
- *         if (!bitmap.width) return null;
- *         return bitmap;
- *     }
- * }
- *
- * ```
- */
-export abstract class TransformerMap<Key, Val = Key> extends Map<Key, Val> {
-    constructor(protected readonly name: string) {
-        // console.warn('CREATE cache', name);
-        super();
-    }
-
-    protected write(key: Key, newValue?: Val, oldValue?: Val): MaybePromise<Val> {
-        return newValue as Val;
-    }
-
-    protected read(oldValue: Val, key: Key): MaybePromise<Val> {
-        return oldValue;
-    }
-
-    delete(key: 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 from cache
-     * For example, close a file or a bitmap
-     */
-    protected dispose(value: Val, key: Key) {}
-
-    clear() {
-        console.log('CLEAR cache', this.name);
-        this.forEach(this.dispose);
-        super.clear();
-    }
-
-    set(key: Key, value: Val): this {
-        throw new Error('Use memo() method instead');
-    }
-
-    async memo(key: Key, newValue?: Val): Promise<Val> {
-        const oldValue = this.get(key);
-
-        if (!!oldValue && (!newValue || newValue === oldValue)) {
-            // console.log('FROM cache', this.name, key, 'old value', oldValue);
-            return this.read?.(oldValue, key);
-        }
-
-        if (this.has(key)) this.delete(key);
-
-        const value = await this.write(key, newValue, oldValue);
-
-        super.set(key, value);
-
-        // console.log('INVALIDATED KEY cache', this.name, key, 'has', has, 'invalidate', invalidate, 'new value', value);
-
-        return value;
-    }
-}