@kirill.konshin/utils 0.0.17 → 0.0.19

package/src/bootstrap/error.tsx

@@ -1,19 +1,16 @@
 'use client';
 
-import React from 'react';
+import React, { FC } from 'react';
 import { Alert, AlertProps, Button, ButtonProps } from 'react-bootstrap';
 
-//TODO Create MUI-specific?
-export function ErrorAlert({
-    onRetry,
-    children,
-    buttonProps,
-    ...props
-}: {
+export type ErrorAlertProps = {
     children?: Error | string | any;
     onRetry?: () => any;
     buttonProps?: ButtonProps;
-}) {
+};
+
+//TODO Create MUI-specific?
+export const ErrorAlert: FC<ErrorAlertProps> = function ErrorAlert({ onRetry, children, buttonProps, ...props }) {
     if (!children) return null;
 
     return (
@@ -37,4 +34,4 @@ export function ErrorAlert({
             )}
         </Alert>
     );
-}
+};

package/src/bootstrap/field.tsx

@@ -1,7 +1,15 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { Form, FormGroupProps, FormLabelProps, FormTextProps } from 'react-bootstrap';
 
-export function FieldGroup({
+export type FieldGroupProps = FormGroupProps & {
+    label?: any;
+    labelProps?: FormLabelProps;
+    text?: any;
+    textProps?: FormTextProps;
+    horizontal?: boolean;
+};
+
+export const FieldGroup: FC<FieldGroupProps> = function FieldGroup({
     label,
     labelProps = {},
     text,
@@ -9,12 +17,6 @@ export function FieldGroup({
     horizontal,
     children,
     ...props
-}: FormGroupProps & {
-    label?: any;
-    labelProps?: FormLabelProps;
-    text?: any;
-    textProps?: FormTextProps;
-    horizontal?: boolean;
 }) {
     if (horizontal) {
         props.className = 'hstack gap-3 ' + (props.className || '');
@@ -32,4 +34,4 @@ export function FieldGroup({
             {text && !horizontal && <Form.Text {...textProps}>{text}</Form.Text>}{' '}
         </Form.Group>
     );
-}
+};

package/src/bootstrap/footer.tsx

@@ -1,9 +1,21 @@
-import React from 'react';
+import React, { FC } from 'react';
 import { Nav, Navbar } from 'react-bootstrap';
 import { useBreakpoint } from './responsiveHelper';
 import { AdaptiveContainer } from './adaptiveContainer';
 
-export function FooterNavItem({ href, icon, active = false, children = '' }) {
+export type FooterNavItemProps = {
+    href: any;
+    icon: any;
+    active?: boolean | undefined;
+    children?: string | undefined;
+};
+
+export const FooterNavItem: FC<FooterNavItemProps> = function FooterNavItem({
+    href,
+    icon,
+    active = false,
+    children = '',
+}) {
     // const pathname = usePathname();
 
     const isFilepath = icon.includes('.');
@@ -30,9 +42,9 @@ export function FooterNavItem({ href, icon, active = false, children = '' }) {
     );
 
     return <Nav.Item style={{ flex: 1 }}>{link}</Nav.Item>;
-}
+};
 
-export function Footer({ children }) {
+export const Footer: FC<any> = function Footer({ children }) {
     const { isDesktop } = useBreakpoint();
 
     return (
@@ -46,4 +58,4 @@ export function Footer({ children }) {
             </Navbar>
         </div>
     );
-}
+};

package/src/bootstrap/globalLoading.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { FC } from 'react';
 // import { useLoading, useLoadingTimeout } from '../redux/loadingSlice';
 import { Loading } from './loading';
 
-export function GlobalLoading({ loading }: { loading: boolean }) {
+export type GlobalLoadingProps = { loading: boolean };
+
+export const GlobalLoading: FC<GlobalLoadingProps> = function GlobalLoading({ loading }) {
     // const { loading } = useLoading();
 
     // useLoadingTimeout(15000); // escape latch if something is stuck
@@ -14,4 +16,4 @@ export function GlobalLoading({ loading }: { loading: boolean }) {
             <Loading />
         </div>
     );
-}
+};

package/src/bootstrap/loading.tsx

@@ -1,16 +1,18 @@
 import { Spinner, SpinnerProps, Stack } from 'react-bootstrap';
-import React from 'react';
+import React, { FC, memo } from 'react';
 
-export function Loading({
-    children = 'Loading...' as any,
-    show = true,
-    className = '',
-    size,
-}: {
+export type LoadingProps = {
     children?: any;
     show?: boolean;
     className?: string;
     size?: SpinnerProps['size'];
+};
+
+export const Loading: FC<LoadingProps> = memo(function Loading({
+    children = 'Loading...' as any,
+    show = true,
+    className = '',
+    size,
 }) {
     if (!show) return null;
     return (
@@ -19,4 +21,4 @@ export function Loading({
             <span>{children}</span>
         </Stack>
     );
-}
+});

package/src/bootstrap/responsiveHelper.tsx

@@ -1,11 +1,15 @@
 'use client';
 
-import React from 'react';
+import React, { FC, useEffect, useState } from 'react';
 
-export function useBreakpoint() {
-    const [breakpoint, setBreakpoint] = React.useState('xs');
+export function useBreakpoint(): {
+    breakpoint: string;
+    isMobile: boolean;
+    isDesktop: boolean;
+} {
+    const [breakpoint, setBreakpoint] = useState('xs');
 
-    React.useEffect(() => {
+    useEffect(() => {
         const updateBreakpoint = () => {
             const width = window.innerWidth;
             if (width < 576) {
@@ -24,6 +28,7 @@ export function useBreakpoint() {
         };
 
         updateBreakpoint();
+
         window.addEventListener('resize', updateBreakpoint);
 
         return () => {
@@ -36,7 +41,7 @@ export function useBreakpoint() {
     return { breakpoint, isMobile, isDesktop: !isMobile };
 }
 
-export function ResponsiveHelperBS() {
+export const ResponsiveHelperBS: FC = function ResponsiveHelperBS() {
     return (
         <span className="small position-fixed bottom-0 z-3" style={{ fontSize: '9px', right: 1, lineHeight: 1 }}>
             <small className="d-block d-sm-none">XS</small>
@@ -47,4 +52,4 @@ export function ResponsiveHelperBS() {
             <small className="d-none d-xxl-block">XXL</small>
         </span>
     );
-}
+};

package/src/bootstrap/screen.tsx

@@ -1,10 +1,31 @@
-import React from 'react';
+import React, { FC, memo } from 'react';
 import { Button, Navbar, Nav, Stack } from 'react-bootstrap';
 import { useBreakpoint } from './responsiveHelper';
 import { AdaptiveContainer } from './adaptiveContainer';
 
+export type ScreenProps = {
+    backBtn?: any;
+    backCb?: any;
+    backIcon?: any;
+    forwardBtn?: any;
+    forwardIcon?: any;
+    forwardCb?: any;
+    children: any;
+    contentClassName?: string;
+    noContentPadding?: boolean;
+    header?: any; // resides on top panel in mobile, does not scroll, before content on desktop
+    footer?: any; // resides on bottom menu panel in mobile, does not scroll, or after content on desktop
+    menu?: any;
+    title?: any;
+    centerContent?: boolean;
+    noHeader?: boolean;
+    noFooter?: boolean;
+    noMenu?: boolean;
+    // noFolders?: boolean;
+};
+
 //TODO Footer -> menu
-export function Screen({
+export const Screen: FC<ScreenProps> = memo(function Screen({
     backBtn,
     backCb,
     backIcon,
@@ -23,25 +44,6 @@ export function Screen({
     noFooter = false,
     noMenu = false,
     // noFolders = false,
-}: {
-    backBtn?;
-    backCb?;
-    backIcon?;
-    forwardBtn?;
-    forwardIcon?;
-    forwardCb?;
-    children: any;
-    contentClassName?: string;
-    noContentPadding?: boolean;
-    header?: any; // resides on top panel in mobile, does not scroll, before content on desktop
-    footer?: any; // resides on bottom menu panel in mobile, does not scroll, or after content on desktop
-    menu?: any;
-    title?: any;
-    centerContent?: boolean;
-    noHeader?: boolean;
-    noFooter?: boolean;
-    noMenu?: boolean;
-    // noFolders?: boolean;
 }) {
     // const router = useRouter();
 
@@ -141,4 +143,4 @@ export function Screen({
             )}
         </div>
     );
-}
+});

package/src/bootstrap/toaster.tsx

@@ -1,17 +1,19 @@
 'use client';
 
-import React, { useState } from 'react';
+import React, { useState, FC } 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) {
+export type ToasterProps = {
+    toast: string | { message: string; title?: string; variant?: 'dark' | 'success' | 'danger' };
+} & ToastProps;
+
+export const Toaster: FC<ToasterProps> = function Toaster({ toast }) {
     //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 title = typeof toast === 'string' ? 'Notification' : toast?.title;
     const variant = typeof toast === 'string' ? '' : toast?.variant;
 
     return (
@@ -35,4 +37,4 @@ export function Toaster({
             </Toast.Body>
         </Toast>
     );
-}
+};

package/src/bootstrap/useModal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState, JSX, FC, memo } from 'react';
 import { Button, Modal, ModalProps, Offcanvas, OffcanvasProps, Stack } from 'react-bootstrap';
 
 export type UseModalArgs = { onClose?: any; showOnMount?: boolean };
@@ -14,18 +14,23 @@ export type UseModalProps = {
     containerProps?: ModalProps | OffcanvasProps;
 };
 
-export function useModal({ onClose, showOnMount }: UseModalArgs = {}) {
+export function useModal({ onClose, showOnMount }: UseModalArgs = {}): {
+    show: boolean | undefined;
+    close: () => void;
+    open: () => void;
+    ModalDialog: FC<ModalProps>;
+} {
     const [show, setShow] = useState(showOnMount);
 
-    const close = useCallback(() => {
+    const close = useCallback((): void => {
         setShow(false);
         onClose?.();
     }, [onClose]);
 
-    const open = useCallback(() => setShow(true), []);
+    const open = useCallback((): void => setShow(true), []);
 
     const defaultOnSubmit = useCallback(
-        (e) => {
+        (e: any) => {
             e.preventDefault();
             close();
         },
@@ -34,7 +39,7 @@ export function useModal({ onClose, showOnMount }: UseModalArgs = {}) {
 
     const ModalDialog = useMemo(
         () =>
-            function ModalDialog({
+            memo(function ModalDialog({
                 children,
                 show,
                 onSubmit = defaultOnSubmit,
@@ -80,7 +85,7 @@ export function useModal({ onClose, showOnMount }: UseModalArgs = {}) {
                         </form>
                     </Container>
                 );
-            },
+            }),
         [close, defaultOnSubmit],
     );
 

package/src/bootstrap/useWrappedForm.ts

@@ -1,7 +1,7 @@
 import { useForm, FormState } from 'react-hook-form';
 import { useCallback } from 'react';
 
-export const isFormLoading = (formState: FormState<any>) => formState.isLoading || formState.isSubmitting;
+export const isFormLoading = (formState: FormState<any>): boolean => formState.isLoading || formState.isSubmitting;
 
 export const useWrappedForm: typeof useForm = (options) => {
     const form = useForm(options);
@@ -12,7 +12,7 @@ export const useWrappedForm: typeof useForm = (options) => {
                 try {
                     await onSubmit(data);
                 } catch (e) {
-                    form.setError('root', { type: 'server', message: e.message });
+                    form.setError('root', { type: 'server', message: (e as Error).message });
                     console.error('Error submitting form', e);
                 }
             };
@@ -33,8 +33,10 @@ export const useWrappedForm: typeof useForm = (options) => {
  * 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);
-};
+export const stopPropagation =
+    (callback: any) =>
+    (e: Event): void => {
+        e.stopPropagation();
+        e.preventDefault();
+        callback(e);
+    };

package/src/core/cache.ts

@@ -2,20 +2,20 @@ import ManyKeysMap from 'many-keys-map';
 
 export type MaybePromise<T> = T | Promise<T>;
 
-export const shallowCompare = (prev: any, next: any) =>
+export const shallowCompare = (prev: any, next: any): boolean =>
     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;
+export const equal = (prev: any, next: any): boolean => prev === next;
 
 const UNUSED = Symbol('UNUSED');
-export const ANY = Symbol('*');
+export const ANY: unique symbol = 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) {
+    return function tracker(dependency: Dep): Dep | false {
         // console.log('Tracker', lastDependency, dependency);
 
         if (lastDependency !== UNUSED && comparator(lastDependency, dependency)) {
@@ -61,7 +61,14 @@ export function memo<Key extends any[], Val, SerializedKey extends any[] = Key>(
         invalidate?: (prev: Val, ...key: SerializedKey) => boolean;
         dispose?: (prev: Val, ...key: SerializedKey) => void;
     } = {},
-) {
+): {
+    (...args: Key): Promise<{
+        value?: Val;
+        hit: boolean;
+    }>;
+    clear: (...condition: Key | any[]) => void;
+    size: () => number;
+} {
     const map = new ManyKeysMap<SerializedKey, Val>();
 
     //TODO Extend ManyKeysMap
@@ -194,7 +201,7 @@ export abstract class TransformerMap<Key, Val = Key> extends Map<Key, Val> {
         return oldValue;
     }
 
-    delete(key: Key) {
+    delete(key: Key): boolean {
         const val = this.get(key);
         const has = typeof val !== 'undefined';
         if (has) this.dispose(val, key);
@@ -206,9 +213,9 @@ export abstract class TransformerMap<Key, Val = Key> extends Map<Key, Val> {
      * 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) {}
+    protected dispose(value: Val, key: Key): void {}
 
-    clear() {
+    clear(): void {
         console.log('CLEAR cache', this.name);
         this.forEach(this.dispose);
         super.clear();

package/src/core/errors.ts

@@ -1,5 +1,8 @@
 // @see https://www.youtube.com/watch?v=AdmGHwvgaVs
-export function catchErrors<T, E extends Error = Error>(promise: Promise<T>, errors?: E[]) {
+export function catchErrors<T, E extends Error = Error>(
+    promise: Promise<T>,
+    errors?: E[],
+): Promise<any[] | (T | undefined)[]> {
     return promise
         .then((data) => [undefined, data])
         .catch((error) => {

package/src/core/files.ts

@@ -1,9 +1,13 @@
-import * as saver from 'file-saver';
+export const downloadFile = async (file: File): Promise<void> => {
+    //FIXME https://github.com/eligrey/FileSaver.js/issues/471
+    const { saveAs } = require('file-saver');
 
-export const downloadFile = async (filename, text, type = 'application/json') => {
     //FIXME https://github.com/eligrey/FileSaver.js/issues/731
-    //FIXME https://github.com/eligrey/FileSaver.js/issues/471
-    saver.saveAs(new Blob([text], { type }), filename);
+    return saveAs(file, file.name);
+};
+
+export const createFile = async (text: any, filename = 'file.json', type = 'application/json'): Promise<File> => {
+    return new File([new Blob([text], { type })], filename);
 };
 
 export const openFile = (): Promise<string> =>

package/src/core/ls.ts

@@ -1,11 +1,15 @@
-export function getStorage(pref: string) {
+export function getStorage(pref: string): {
+    read: (key: string) => null | any;
+    write: (key: string, value: any) => void;
+    remove: (key: string) => void;
+} {
     const prefix = (key) => `${pref}-${key}`;
 
     const ls = (typeof window !== 'undefined' ? localStorage : null) as Storage;
 
-    const read = (key: string) => JSON.parse(ls?.getItem(prefix(key)) || 'null');
-    const write = (key: string, value: any) => ls?.setItem(prefix(key), JSON.stringify(value));
-    const remove = (key: string) => ls?.removeItem(prefix(key));
+    const read = (key: string): any => JSON.parse(ls?.getItem(prefix(key)) || 'null');
+    const write = (key: string, value: any): void => ls?.setItem(prefix(key), JSON.stringify(value));
+    const remove = (key: string): void => ls?.removeItem(prefix(key));
 
     return { read, write, remove };
 }

package/src/core/measure.ts

@@ -1,6 +1,13 @@
 import { bold, magenta, cyan, yellow, red, green } from 'colors/safe';
 
-export const colored = {
+export const colored: {
+    important: typeof bold;
+    subject: typeof magenta;
+    arg: typeof cyan;
+    sup: typeof yellow;
+    err: typeof red;
+    ok: typeof green;
+} = {
     important: bold,
     subject: magenta,
     arg: cyan,
@@ -11,7 +18,14 @@ export const colored = {
 
 const noColor = (str) => str;
 
-export const uncolored = {
+export const uncolored: {
+    important: (str: any) => any;
+    subject: (str: any) => any;
+    arg: (str: any) => any;
+    sup: (str: any) => any;
+    err: (str: any) => any;
+    ok: (str: any) => any;
+} = {
     important: noColor,
     subject: noColor,
     arg: noColor,
@@ -20,10 +34,44 @@ export const uncolored = {
     ok: noColor,
 };
 
-export function createMeasurer({ colors = true, prepend = 'LOG', padding = 10 }) {
+export function createMeasurer({
+    colors = true,
+    prepend = 'LOG',
+    padding = 10,
+}: {
+    colors?: boolean;
+    prepend?: string;
+    padding?: number;
+}): {
+    measure: (
+        what: string,
+        step: string,
+        supplemental?: string,
+        ...args: any[]
+    ) => {
+        done: (result?: string, ...args2: any[]) => void;
+        fail: (result?: string, ...args2: any[]) => void;
+        log: (...args2: any[]) => void;
+    };
+    important: (str: any) => any;
+    subject: (str: any) => any;
+    arg: (str: any) => any;
+    sup: (str: any) => any;
+    ok: (str: any) => any;
+    err: (str: any) => any;
+} {
     const { important, subject, arg, sup, ok, err } = colors ? colored : uncolored;
 
-    function measure(what: string, step: string, supplemental: string = '', ...args) {
+    function measure(
+        what: string,
+        step: string,
+        supplemental: string = '',
+        ...args: any[]
+    ): {
+        done: (result?: string, ...args2: any[]) => void;
+        fail: (result?: string, ...args2: any[]) => void;
+        log: (...args2: any[]) => void;
+    } {
         const time = performance.now();
 
         const prefix = [
@@ -34,7 +82,7 @@ export function createMeasurer({ colors = true, prepend = 'LOG', padding = 10 })
             ...args,
         ];
 
-        const done = (result: string = ok('DONE'), ...args2) => {
+        const done = (result: string = ok('DONE'), ...args2: any[]): void => {
             console.log(
                 ...[
                     ...prefix,
@@ -48,9 +96,9 @@ export function createMeasurer({ colors = true, prepend = 'LOG', padding = 10 })
             console.groupEnd();
         };
 
-        const fail = (result: string = err('FAIL'), ...args2) => done(result, ...args2);
+        const fail = (result: string = err('FAIL'), ...args2: any[]): void => done(result, ...args2);
 
-        const log = (...args2) => {
+        const log = (...args2: any[]): void => {
             console.log(...prefix, ...args2);
         };