@kirill.konshin/utils 0.0.18 → 0.0.20

package/src/next/noSSR.tsx

@@ -1,17 +0,0 @@
-'use client';
-
-import React, { useLayoutEffect, useState } from 'react';
-
-const DefaultOnSSR = () => <span />;
-
-// @see https://github.com/kadirahq/react-no-ssr/blob/master/src/index.js
-// @see https://nextjs.org/docs/messages/react-hydration-error#solution-1-using-useeffect-to-run-on-the-client-only
-export function NoSSR({ children, onSSR = <DefaultOnSSR /> }) {
-    const [canRender, setCanRender] = useState(false);
-
-    useLayoutEffect(() => {
-        setCanRender(true);
-    }, []);
-
-    return canRender ? children : onSSR;
-}

package/src/next/redirect.tsx

@@ -1,13 +0,0 @@
-'use client';
-
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import type { LinkProps } from 'next/link';
-
-export default function Redirect({ to, replace }: { to: LinkProps['href']; replace?: LinkProps['replace'] }) {
-    const router = useRouter();
-    useEffect(() => {
-        router[replace ? 'replace' : 'push'](to.toString()); //TODO Test this
-    }, [replace, router, to]);
-    return null;
-}

package/src/next/useIsInner.ts

@@ -1,13 +0,0 @@
-'use client';
-
-import { useSelectedLayoutSegments } from 'next/navigation';
-
-export const useIsInner = (): boolean => {
-    const pathname = useSelectedLayoutSegments();
-    return pathname.length > 0;
-};
-
-export const useIsIndex = (): boolean => {
-    const pathname = useSelectedLayoutSegments();
-    return pathname.length === 0;
-};

package/src/react/apiCall.ts

@@ -1,25 +0,0 @@
-export const jsonContentType = 'application/json';
-
-export type DataResponse<R> = Response & { data?: R };
-
-export async function apiCall<R>(url: string, init?: RequestInit): Promise<DataResponse<R>> {
-    const useBodyAsIs = !init?.body || init?.body instanceof FormData || typeof init?.body === 'string';
-
-    const res: DataResponse<R> = await fetch(url, {
-        method: 'POST',
-        ...init,
-        body: useBodyAsIs ? init?.body : JSON.stringify(init.body),
-        headers: {
-            ...init?.headers,
-            ...(useBodyAsIs ? {} : { 'Content-Type': jsonContentType }),
-        },
-    });
-
-    if (res.headers.get('Content-Type')?.includes(jsonContentType)) {
-        res.data = await res.json();
-    }
-
-    if (!res.ok) throw new Error(res.statusText, { cause: res });
-
-    return res;
-}

package/src/react/form/client.tsx

@@ -1,62 +0,0 @@
-'use client';
-
-import { useActionState, useCallback, useState, useTransition } from 'react';
-import { create, MaybeTypeOf, Validation } from './form';
-import { z } from 'zod';
-
-const FORM_DEBUG = process.env.NEXT_PUBLIC_FORM_DEBUG === 'true';
-
-export function createClient<S extends z.ZodObject<any>>(schema: S) {
-    const { validate } = create(schema);
-
-    function useValidationCallback(
-        actionFn: (data: FormData) => Promise<Validation<S>>,
-    ): (formData: FormData) => Promise<Validation<S>> {
-        return useCallback(
-            async (formData: FormData) => {
-                const clientRes = validate(formData);
-                console.log('Client validation', FORM_DEBUG ? 'ignored' : 'active', clientRes);
-                if (!clientRes.success && !FORM_DEBUG) return clientRes;
-
-                const serverRes = await actionFn(formData);
-                console.log('Server validation', serverRes);
-                return serverRes;
-            },
-            [actionFn],
-        );
-    }
-
-    function useValidation(
-        actionFn: (data: FormData) => Promise<Validation<S>>,
-        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,
-    ) {
-        const cb = useValidationCallback(actionFn);
-
-        return useActionState<Validation<S>, FormData>(async (_, data) => cb(data), {
-            success: false,
-            data: initialData,
-        });
-    }
-
-    function useValidationTransition(
-        actionFn: (data: FormData) => Promise<Validation<S>>,
-        initialData: MaybeTypeOf<S> = {} as MaybeTypeOf<S>,
-    ): [Validation<S>, (formData: FormData) => Promise<Validation<S>>, boolean] {
-        const [isPending, startTransition] = useTransition();
-        const [state, setState] = useState<Validation<S>>({ success: false, data: initialData });
-        const cb = useValidationCallback(actionFn);
-
-        const wrappedCb = useCallback(
-            (formData: FormData) => {
-                const promise = cb(formData);
-                startTransition(() => promise.then(setState));
-                return promise;
-            },
-            [cb, startTransition],
-        );
-
-        return [state, wrappedCb, isPending];
-    }
-
-    return { useValidation, useValidationTransition };
-}

package/src/react/form/form.tsx

@@ -1,129 +0,0 @@
-import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';
-import { createContext, useContext, useMemo } from 'react';
-import clsx from 'clsx';
-
-const nonEmpty = 'This field cannot be empty';
-
-export const stringRequired = () => z.string({ required_error: nonEmpty }).min(1, nonEmpty);
-export const maxLength = (schema: z.ZodString): number => schema.maxLength || 0;
-export const minLength = (schema: z.ZodString): number => schema.minLength || 0;
-export const isRequired = (schema: z.ZodString): boolean => minLength(schema) > 0;
-
-export type ZodObject = z.ZodObject<any> | z.ZodEffects<z.ZodObject<any>>; // z.ZodType<any, any, any>
-export type MaybeTypeOf<S extends ZodObject> = Partial<TypeOf<S>>;
-export type SafeTypeOf<S extends ZodObject> = SafeParseReturnType<TypeOf<S>, TypeOf<S>>['data'];
-export type Errors<S extends ZodObject> = typeToFlattenedError<TypeOf<S>>['fieldErrors'];
-export type Validation<S extends ZodObject> =
-    | {
-          success: true; // this is true only if form was validated successfully
-          data: SafeTypeOf<S>;
-          errors?: never;
-      }
-    | {
-          success: false;
-          data?: MaybeTypeOf<S>;
-          errors?: Errors<S>;
-      };
-
-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>;
-};
-
-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(schema)[name];
-        return {
-            name,
-            id: name,
-            required: isRequired(field),
-            maxLength: maxLength(field),
-            type: field.isEmail ? 'email' : (name as string).includes('password') ? 'password' : 'text',
-            defaultValue: data?.[name],
-            ...(mui
-                ? {
-                      label: field.description,
-                      helperText: errors?.[name]?.join(', '),
-                      error: !!errors?.[name]?.length,
-                  }
-                : {}),
-        };
-    }
-
-    function validationError(data: MaybeTypeOf<S>, errors: Errors<S>): Validation<S> {
-        return {
-            success: false,
-            data, // data is undefined if there are errors
-            errors, // Next.js will butcher error object, so we provide something more primitive
-        };
-    }
-
-    function validate(formData: FormData): Validation<S> {
-        const rawData = Object.fromEntries(formData) as TypeOf<S>;
-        const { error, data } = schema.safeParse(rawData);
-
-        // console.log('Validate result', { error, data, rawData });
-
-        if (error) {
-            // data is undefined if there are errors
-            // Next.js will butcher error object, so we provide something more primitive
-            return validationError(rawData, error.flatten().fieldErrors as any);
-        }
-
-        return { success: true, data };
-    }
-
-    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 (
-        <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 }) {
-    return <div className={`hint ${error ? 'hint-error' : ''}`}>{children}</div>;
-}

package/src/react/form/index.ts

@@ -1,2 +0,0 @@
-export * from './client';
-export * from './form';

package/src/react/keyboard.tsx

@@ -1,49 +0,0 @@
-'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/react/useFetch.ts

@@ -1,29 +0,0 @@
-'use client';
-
-import { useCallback, useState, useTransition } from 'react';
-
-//TODO useFetch https://use-http.com
-//TODO SWR?
-//TODO Tanstack Query?
-export function useFetch<R>(
-    fn: (...args: any[]) => Promise<R>,
-    defaultValue: R | null = null,
-): [R | null, typeof fn, boolean, Error | undefined] {
-    // An async function was passed to useActionState, but it was dispatched outside of an action context.
-    // This is likely not what you intended. Either pass the dispatch function to an `action` prop, or dispatch manually inside `startTransition`
-    const [isPending, startTransition] = useTransition();
-    const [data, setData] = useState<R | null>(defaultValue);
-    const [error, setError] = useState<Error>();
-
-    const actionFn = useCallback(
-        (...args: Parameters<typeof fn>) => {
-            const promise = fn(...args);
-            // https://react.dev/reference/react/useTransition#react-doesnt-treat-my-state-update-after-await-as-a-transition
-            startTransition(() => promise.then(setData).catch(setError)); //FIXME sub-chain...
-            return promise;
-        },
-        [fn],
-    );
-
-    return [data, actionFn, isPending, error];
-}

package/src/react/useFetcher.ts

@@ -1,49 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-export function useFetcher<T = any>(
-    cb,
-
-    { fetchOnMount = false, onError }: { fetchOnMount?: boolean; onError?: (e: Error) => void } = {},
-) {
-    const [loading, setLoading] = useState(fetchOnMount);
-    const [error, setError] = useState<Error | null>(null);
-    const [data, setData] = useState<T | null>(null);
-
-    const isMounted = useRef(false);
-
-    const trigger = useCallback(
-        async (...args) => {
-            try {
-                setLoading(true);
-                setError(null);
-                const res = await cb(args);
-                if (!isMounted.current) return;
-                setData(res);
-                return res;
-            } catch (e) {
-                console.error('Fetch failed', e);
-                if (!isMounted.current) return;
-                setError(e);
-                (onError as any)?.(e);
-            } finally {
-                if (isMounted.current) setLoading(false);
-            }
-        },
-        [cb, onError],
-    );
-
-    useEffect(() => {
-        if (fetchOnMount) {
-            trigger().catch((e) => console.error('Fetch on mount failed', e)); // catch actually will never happen
-        }
-    }, [fetchOnMount, cb, trigger]);
-
-    useEffect(() => {
-        isMounted.current = true;
-        return () => {
-            isMounted.current = false;
-        };
-    });
-
-    return { loading, error, data, trigger };
-}

package/src/react-native/share.ts

@@ -1,31 +0,0 @@
-import * as FileSystem from 'expo-file-system';
-import * as Sharing from 'expo-sharing';
-
-/**
- * data:text/plain;base64,W29iamV
- * @see https://stackoverflow.com/questions/69738812/problem-to-generate-pdf-from-a-blob-in-an-expo-app-using-filesystem
- * @param base64
- * @param fileName
- * @returns {Promise<void>}
- */
-export const shareDialog = async (base64, fileName) => {
-    const path = `${FileSystem.documentDirectory}/${fileName}`;
-
-    try {
-        if (!(await Sharing.isAvailableAsync())) throw new Error('Sharing is not available');
-
-        const [header, buffer] = base64.split(',');
-        const [, mimeTypeStr] = header.split(':');
-        const [mimeType] = mimeTypeStr.split(';');
-
-        await FileSystem.writeAsStringAsync(`${path}`, buffer, {
-            encoding: FileSystem.EncodingType.Base64,
-        });
-
-        await Sharing.shareAsync(path, { mimeType, UTI: fileName, dialogTitle: 'Save or share document' });
-    } catch (error) {
-        alert('Sharing failed: ' + error.message);
-    } finally {
-        await FileSystem.deleteAsync(path);
-    }
-};

package/src/react-native/update.tsx

@@ -1,40 +0,0 @@
-import * as Updates from 'expo-updates';
-import { useEffect, useState } from 'react';
-import { Text } from 'react-native';
-
-export function Update({ children }) {
-    //FIXME useUpdates https://blog.expo.dev/feature-preview-updates-js-api-for-expo-updates-3b92beb40dab
-    const [updating, setUpdating] = useState(true);
-
-    useEffect(() => {
-        (async () => {
-            try {
-                if (__DEV__) {
-                    setUpdating(false);
-                    return;
-                }
-
-                const update = await Updates.checkForUpdateAsync();
-
-                if (!update.isAvailable) {
-                    setUpdating(false);
-                    return;
-                }
-
-                await Updates.fetchUpdateAsync();
-                alert('Update is available. App will reload.');
-                await Updates.reloadAsync();
-            } catch (error) {
-                // You can also add an alert() to see the error message in case of an error when fetching updates.
-                alert(`Error fetching latest Expo update: ${error}`);
-                setUpdating(false);
-            }
-        })();
-    });
-
-    if (updating) {
-        return <Text>Checking for updates ({Updates.channel})...</Text>;
-    }
-
-    return children;
-}

package/src/react-native/useAppState.ts

@@ -1,18 +0,0 @@
-import { useEffect, useState } from 'react';
-import { AppState } from 'react-native';
-
-export function useAppState() {
-    const [appState, setAppState] = useState(AppState.currentState);
-
-    useEffect(() => {
-        const subscription = AppState.addEventListener('change', (nextAppState) => {
-            setAppState(nextAppState);
-        });
-
-        return () => {
-            subscription.remove();
-        };
-    }, []);
-
-    return appState;
-}

package/src/tailwind/README.md

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

package/src/tailwind/fullpage.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-export const Fullpage = ({ divRef = null, className = '', children, ...props }) => (
-    <div
-        ref={divRef}
-        {...props}
-        className={`container h-screen flex flex-col justify-center items-center ${className}`}
-    >
-        {children}
-    </div>
-);

package/src/tailwind/responsiveHelper.tsx

@@ -1,16 +0,0 @@
-'use client';
-
-import React from 'react';
-
-export function ResponsiveHelperTW() {
-    return (
-        <span className="fixed bottom-0 right-2 z-30 leading-none text-xs">
-            <small className="hidden xs:max-sm:block">XS</small>
-            <small className="hidden sm:max-md:block">SM</small>
-            <small className="hidden md:max-lg:block">MD</small>
-            <small className="hidden lg:max-xl:block">LG</small>
-            <small className="hidden xl:max-2xl:block">XL</small>
-            <small className="hidden 2xl:block">XXL</small>
-        </span>
-    );
-}