@kirill.konshin/utils 0.0.8 → 0.0.9

package/src/bootstrap/toaster.stories.tsx

@@ -0,0 +1,32 @@
+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 = {
+    title: 'Bootstrap / Toaster',
+    component: Toaster,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+    args: { onClick: fn() },
+} satisfies Meta<typeof Toaster>;
+
+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

@@ -0,0 +1,38 @@
+'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

@@ -0,0 +1,51 @@
+import React, { FC } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { useModal, UseModalProps } from './useModal';
+import { Button, ButtonGroup } from 'react-bootstrap';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+    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() },
+} satisfies Meta<FC<UseModalProps>>;
+
+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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,40 @@
+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/cache.test.ts

@@ -0,0 +1,121 @@
+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/electron/README.md

@@ -0,0 +1,13 @@
+# Electron Utils
+
+# `createWindow`
+
+```js
+import { createWindow } from '@kirill.konshin/utils/electron';
+
+const window = createWindow({
+    title: 'My App',
+    width: 800,
+    height: 600,
+});
+```

package/src/electron/createWindow.ts

@@ -0,0 +1,234 @@
+import path from 'node:path';
+import https from 'node:https';
+import http from 'node:http';
+import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import url from 'node:url';
+import { Menu, app, BrowserWindow, shell, protocol, Rectangle } from 'electron';
+import defaultMenu from 'electron-default-menu';
+import Store from 'electron-store';
+import { checkForUpdates } from './updater.js';
+
+export const isDev = process.env['NODE_ENV'] === 'development';
+export const appPath = app.getAppPath();
+
+// See https://cs.chromium.org/chromium/src/net/base/net_error_list.h
+const FILE_NOT_FOUND = -6;
+
+const getPath = async (path_, file = '') => {
+    try {
+        const result = await fsp.stat(path_);
+
+        if (result.isFile()) return path_;
+
+        if (result.isDirectory()) return getPath(path.join(path_, `${file}.html`));
+    } catch {
+        /* empty */
+    }
+};
+
+export function createWindow({
+    width = 1000,
+    height = 1000,
+    disableSecurity = true,
+    disableSecurityWarnings = true,
+    quitOnClose = true,
+    onOpen,
+    onClose,
+    localhostUrl = 'http://localhost:3000',
+    productionUrl = '', // in this mode Electron acts as a browser for remote app
+    webPath = path.resolve(appPath, 'web'), // must conform to what is in electron-builder.js files section
+    useStaticInDev = false,
+    updater = false,
+    rememberBounds = true,
+}: {
+    width?: number;
+    height?: number;
+    disableSecurity?: boolean;
+    disableSecurityWarnings?: boolean;
+    quitOnClose?: boolean;
+    onOpen?: (win: BrowserWindow) => void;
+    onClose?: (win: BrowserWindow) => void;
+    localhostUrl?: string;
+    productionUrl?: string;
+    webPath?: string;
+    useStaticInDev?: boolean;
+    updater?: boolean;
+    rememberBounds?: boolean;
+} = {}) {
+    let mainWindow: BrowserWindow | null = null;
+
+    console.log('[APP] Starting Electron', {
+        isDev,
+        appPath,
+        useStaticInDev,
+        localhostUrl,
+        productionUrl,
+        webPath,
+        updater,
+        rememberBounds,
+        quitOnClose,
+        disableSecurity,
+        disableSecurityWarnings,
+    });
+
+    if (!productionUrl && !webPath) {
+        throw new Error('productionUrl or webPath must be defined');
+    }
+
+    if (productionUrl && webPath) {
+        throw new Error('productionUrl and webPath cannot be used together');
+    }
+
+    if (!localhostUrl) {
+        throw new Error('localhostUrl must be defined');
+    }
+
+    const store = new Store<{ bounds: Rectangle }>({
+        schema: {
+            bounds: {
+                type: 'object',
+                properties: {
+                    // Docs: https://electronjs.org/docs/api/structures/rectangle
+                    height: { type: 'number' },
+                    width: { type: 'number' },
+                    x: { type: 'number' },
+                    y: { type: 'number' },
+                },
+            },
+        },
+    });
+
+    if (disableSecurityWarnings) process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
+    process.env['ELECTRON_ENABLE_LOGGING'] = 'true';
+
+    process.on('SIGTERM', () => process.exit(0));
+    process.on('SIGINT', () => process.exit(0));
+
+    const openDevTools = () => {
+        if (!mainWindow) return;
+        mainWindow.setSize(width + 800, height);
+        mainWindow.center();
+        mainWindow.webContents.openDevTools();
+    };
+
+    const createWindow = async () => {
+        mainWindow = new BrowserWindow({
+            width,
+            height,
+            icon: path.resolve(appPath, 'assets/icon.png'),
+            webPreferences: {
+                nodeIntegration: false, // is default value after Electron v5
+                contextIsolation: true, // protect against prototype pollution
+                webSecurity: !disableSecurity,
+                devTools: true,
+            },
+            ...(rememberBounds ? store.get('bounds') : {}),
+        });
+
+        mainWindow.on('move', () => rememberBounds && mainWindow && store.set('bounds', mainWindow.getBounds()));
+
+        mainWindow.once('ready-to-show', () => isDev && openDevTools());
+
+        // Static interceptor
+
+        let interceptor: (() => void) | null = null;
+
+        if (webPath && (!isDev || useStaticInDev)) {
+            console.log(`[APP] Static Server Enabled, ${localhostUrl} will be intercepted to ${webPath}`);
+
+            //TODO https://localhost:3000
+            // @see https://github.com/sindresorhus/electron-serve/blob/main/index.js
+            protocol.interceptStreamProtocol('http', (request, callback) => {
+                if (request.url.startsWith(localhostUrl)) {
+                    let fileUrl = url.parse(request.url, false).pathname;
+
+                    if (!fileUrl) return callback({ error: FILE_NOT_FOUND });
+
+                    if (fileUrl === '/') fileUrl = 'index.html';
+
+                    const filePath = path.join(webPath, fileUrl);
+
+                    const relativePath = path.relative(webPath, fileUrl);
+
+                    const isSafe = !relativePath.startsWith('..') && !path.isAbsolute(relativePath);
+
+                    if (!isSafe && !isDev) return callback({ error: FILE_NOT_FOUND });
+
+                    // const finalPath = await getPath(filePath, options.file);
+                    // const fileExtension = path.extname(filePath);
+
+                    console.log('[APP] Static Server', fileUrl, '->', filePath);
+
+                    // return {path: path.join(webPath, fileUrl)};
+                    callback(fs.createReadStream(filePath));
+
+                    return true;
+                }
+
+                // return {url: request.url};
+                (request.url.startsWith('https') ? https : http).get(request.url, callback);
+
+                return true;
+            });
+
+            interceptor = () => protocol.uninterceptProtocol('http');
+        }
+
+        mainWindow.on('closed', () => {
+            interceptor?.();
+            onClose?.(mainWindow as never);
+            mainWindow = null;
+            interceptor = null;
+        });
+
+        // External URLs
+
+        mainWindow.webContents.setWindowOpenHandler(({ url }) => {
+            shell.openExternal(url).catch((e) => console.error(e));
+            return { action: 'deny' };
+        });
+
+        // Menu
+
+        const menu = defaultMenu(app, shell);
+
+        if (updater) {
+            (menu.at(-1)!.submenu as any).push(
+                { type: 'separator' },
+                {
+                    label: 'Check For Updates',
+                    click: checkForUpdates,
+                },
+            );
+        }
+
+        Menu.setApplicationMenu(Menu.buildFromTemplate(menu)); //TODO onMenu
+
+        // Should be last, after all listeners and menu
+
+        await app.whenReady();
+
+        onOpen?.(mainWindow);
+
+        if (!onOpen && localhostUrl) {
+            await mainWindow.loadURL(productionUrl && !isDev ? productionUrl : `${localhostUrl}/`);
+        }
+
+        console.log('[APP] Main Window Open');
+    };
+
+    app.on('ready', createWindow);
+
+    app.on('window-all-closed', () => {
+        if (process.platform !== 'darwin' || quitOnClose) app.quit();
+    });
+
+    app.on('activate', () => BrowserWindow.getAllWindows().length === 0 && !mainWindow && createWindow());
+
+    return {
+        get mainWindow() {
+            return mainWindow;
+        },
+    };
+}

package/src/electron/index.ts

@@ -0,0 +1,2 @@
+export * from './createWindow';
+export * from './updater';

package/src/electron/updater.ts

@@ -0,0 +1,54 @@
+// https://github.com/electron-userland/electron-builder/blob/docs-deprecated/encapsulated%20manual%20update%20via%20menu.js
+import { dialog } from 'electron';
+import updater from 'electron-updater';
+const { autoUpdater } = updater;
+
+let updateButton;
+
+autoUpdater.autoDownload = false;
+
+autoUpdater.on('error', (error) => {
+    dialog.showErrorBox('Error: ', !error ? 'unknown' : (error.stack || error).toString());
+});
+
+autoUpdater.on('update-available', async () => {
+    const { response } = await dialog.showMessageBox({
+        type: 'info',
+        title: 'Found Updates',
+        message: 'Found updates, do you want update now?',
+        buttons: ['Yes', 'No'],
+    });
+
+    updateButton.enabled = true;
+    updateButton = null;
+
+    if (response === 0) await autoUpdater.downloadUpdate();
+});
+
+autoUpdater.on('update-not-available', async () => {
+    try {
+        await dialog.showMessageBox({
+            title: 'No Updates',
+            message: 'Current version is up-to-date.',
+        });
+    } catch (e) {
+        dialog.showErrorBox('Error: ', e.toString());
+    }
+    updateButton.enabled = true;
+    updateButton = null;
+});
+
+autoUpdater.on('update-downloaded', async () => {
+    await dialog.showMessageBox({
+        title: 'Install Update',
+        message: 'Update downloaded, application will quit for update...',
+    });
+
+    autoUpdater.quitAndInstall();
+});
+
+export function checkForUpdates(menuItem, focusedWindow, event) {
+    updateButton = menuItem;
+    updateButton.enabled = false;
+    autoUpdater.checkForUpdates().catch((e) => console.error('Update error', e));
+}