@kirill.konshin/utils 0.0.7 → 0.0.9

package/src/react/form/form.tsx

@@ -0,0 +1,109 @@
+import { typeToFlattenedError, z, SafeParseReturnType, TypeOf } from 'zod';
+
+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 function create<S extends ZodObject>(schema: S) {
+    const getShape = () =>
+        (schema as z.ZodObject<any>).shape || (schema as z.ZodEffects<z.ZodObject<any>>).sourceType().shape;
+
+    if (!getShape()) {
+        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];
+        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 };
+    }
+
+    //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, Field, validationError };
+}
+
+export function Hint({ children, error }: { children: any; error?: boolean }) {
+    return <div className={`hint ${error ? 'hint-error' : ''}`}>{children}</div>;
+}

package/src/react/form/index.ts

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

package/src/react/index.ts

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

package/src/react/useFetch.ts

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

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

@@ -0,0 +1,3 @@
+export * from './share';
+export * from './update';
+export * from './useAppState';

package/src/react-native/share.ts

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

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

@@ -0,0 +1,18 @@
+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/fullpage.tsx

@@ -0,0 +1,11 @@
+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/index.ts

@@ -0,0 +1,2 @@
+export * from './fullpage';
+export * from './responsiveHelper';

package/src/tailwind/responsiveHelper.tsx

@@ -0,0 +1,16 @@
+'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>
+    );
+}

package/src-todo/auth0.tsx

@@ -0,0 +1,177 @@
+// 'use client';
+//
+// import { Auth0Provider, useAuth0 } from '@auth0/auth0-react';
+// import { Button, ButtonProps } from 'react-bootstrap';
+// import { useRouter } from 'next/navigation';
+// import { useEffect } from 'react';
+// import { emitter } from '../api/apiClient';
+// import RestResponse from '../api/restResponse';
+// import { useToaster } from '../redux/toasterSlice';
+// import { end_session } from '../api/miscCommands';
+// import { createAuth0Client, Auth0Client } from '@auth0/auth0-spa-js';
+//
+// const isSSR = typeof window === 'undefined';
+//
+// const origin = !isSSR ? window.location.origin : '';
+//
+// // @ts-ignore
+// export const isReactNative = () => !isSSR && window.ReactNativeWebView?.postMessage;
+//
+// // @ts-ignore
+// export const postMessage = (data: any = null) => window.ReactNativeWebView?.postMessage(JSON.stringify(data));
+//
+// if (isReactNative()) {
+//     const originalConsole = { ...console };
+//
+//     const makeLogger =
+//         (type) =>
+//         (...args) => {
+//             postMessage(
+//                 JSON.stringify({
+//                     type,
+//                     data: args,
+//                 })
+//             );
+//             originalConsole[type].apply(console, args);
+//         };
+//
+//     console.log = makeLogger('log');
+//     console.log = makeLogger('error');
+//     console.log = makeLogger('info');
+//     console.log = makeLogger('warn');
+// }
+//
+// export const externalAuth =
+//     !isSSR && window['auth0data']
+//         ? ({
+//               user: window['auth0data'].user,
+//               getAccessTokenSilently: async () => window['auth0data'].token.accessToken,
+//               isLoading: !window['auth0data'].user,
+//               isAuthenticated: !!window['auth0data'].user,
+//               loginWithRedirect: () => {},
+//               logout: () => postMessage({ type: 'logout' }),
+//           } as any)
+//         : null;
+//
+// export const useAuth = (): ReturnType<typeof useAuth0> => {
+//     const auth0 = useAuth0();
+//     return externalAuth || auth0;
+// };
+//
+// // To support passing parameters and hints to Auth0 we need to use lower level API
+// const auth0Config = {
+//     domain: process.env.NEXT_PUBLIC_AUTH0_DOMAIN as string,
+//     clientId: process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID as string,
+//     redirectUri: origin,
+//     audience: process.env.NEXT_PUBLIC_AUTH0_AUDIENCE,
+// };
+//
+// let auth0ClientInstance: Auth0Client | null = null;
+//
+// const getAuth0Client = async () => {
+//     if (!auth0ClientInstance) {
+//         auth0ClientInstance = await createAuth0Client(auth0Config);
+//     }
+//     return auth0ClientInstance;
+// };
+//
+// export const useExtendedAuth = () => {
+//     const auth = useAuth0();
+//
+//     const extendedLoginWithRedirect = async (options: any) => {
+//         if (options.login_hint || options.screen_hint) {
+//             const auth0Client = await getAuth0Client();
+//             return auth0Client.loginWithRedirect(options);
+//         }
+//
+//         return auth.loginWithRedirect(options);
+//     };
+//
+//     return {
+//         ...auth,
+//         loginWithRedirect: extendedLoginWithRedirect,
+//     };
+// };
+//
+// export const Provider = ({ children, authParams = {} }) => {
+//     return (
+//         <Auth0Provider
+//             domain={process.env.NEXT_PUBLIC_AUTH0_DOMAIN as string}
+//             clientId={process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID as string}
+//             authorizationParams={{
+//                 ...authParams,
+//                 redirect_uri: origin,
+//                 audience: process.env.NEXT_PUBLIC_AUTH0_AUDIENCE,
+//             }}
+//         >
+//             {children}
+//         </Auth0Provider>
+//     );
+// };
+//
+// export const LoginButton = (props: ButtonProps) => {
+//     const { loginWithRedirect } = useAuth(); //FIXME add state
+//     return (
+//         <Button {...props} onClick={() => loginWithRedirect()}>
+//             Log In
+//         </Button>
+//     );
+// };
+//
+// export const LogoutButton = ({ as: Cmp = Button, children, ...props }: any) => {
+//     const { logout, isAuthenticated, isLoading } = useAuth();
+//     if (!isAuthenticated || isLoading) return null;
+//
+//     const handleLogout = async () => {
+//         try {
+//             await end_session();
+//         } catch (e) {
+//             console.error('Cannot end session', e); // will get here if in Native
+//         }
+//         logout({ logoutParams: { returnTo: origin } });
+//     };
+//
+//     return (
+//         <Cmp {...props} onClick={handleLogout} role="button">
+//             {children || 'Log Out'}
+//         </Cmp>
+//     );
+// };
+//
+// export const useLogoutTracker = () => {
+//     const router = useRouter();
+//     const { logout } = useAuth();
+//     const { setToast } = useToaster();
+//
+//     useEffect(() => {
+//         let onError;
+//
+//         emitter.on(
+//             'error',
+//             (onError = (restResponse: RestResponse) => {
+//                 if (restResponse.code === 401 || restResponse.message.includes('(Unauthorized)')) {
+//                     if (restResponse.message.includes('OpenAI API Key')) {
+//                         setToast('Your account is not provisioned yet. Please check your email for instructions.');
+//                         return;
+//                     }
+//
+//                     if (externalAuth) {
+//                         externalAuth.logout();
+//                         return;
+//                     }
+//
+//                     logout({
+//                         async openUrl() {
+//                             router.replace('/' as any); //FIXME Return to the same page
+//                             setToast('You have been logged out');
+//                         },
+//                     });
+//                 }
+//             })
+//         );
+//
+//         return () => {
+//             emitter.off('error', onError);
+//         };
+//     }, [logout, router, setToast]);
+// };

package/tsconfig.json

@@ -1,24 +1,21 @@
 {
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "declarationDir": "dist",
+    "incremental": false,
     "allowJs": true,
-    "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
+    /* Build-specific options */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "isolatedModules": true,
-    "jsx": "preserve",
-    "target": "es2018",
-    "lib": ["dom", "dom.iterable", "esnext", "webworker"],
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "skipLibCheck": true,
-    "strict": false,
-    "strictNullChecks": true,
-    "incremental": true,
-    "outDir": "./build",
-    "declaration": true,
-    "declarationDir": "./build",
-    "rootDir": "src"
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx"
   },
-  "include": ["src"]
+  "include": ["src"],
+  "exclude": ["**/*.test.ts", "**/*.stories.ts", "**/*.stories.tsx"]
 }

package/turbo.json

@@ -2,18 +2,9 @@
   "$schema": "https://turbo.build/schema.json",
   "extends": ["//"],
   "tasks": {
-    "clean": {
-      "cache": false
-    },
     "build": {
-      "outputs": ["build/**/*"]
-    },
-    "start": {
-      "persistent": true,
-      "cache": false
-    },
-    "wait": {
-      "cache": false
+      "dependsOn": ["^build"],
+      "outputs": ["src/**/*/index.ts", "package.json", "dist/**/*"]
     }
   }
 }

package/vite.config.ts

@@ -0,0 +1,47 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import { fixExports, formats, entry, external, distDir, generateIndex } from './vite.exports';
+
+// 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
+
+export default defineConfig({
+    build: {
+        ssr: true,
+        sourcemap: true,
+        outDir: distDir,
+        emptyOutDir: true,
+        // target: 'esnext',
+        lib: {
+            entry,
+            formats: Object.keys(formats) as any,
+        },
+        rollupOptions: {
+            external,
+            output: {
+                preserveModules: true,
+                preserveModulesRoot: 'src',
+            },
+        },
+    },
+    test: {
+        coverage: {
+            reporter: ['text', 'html', 'cobertura'],
+        } as any,
+    },
+    resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'] }, // https://vite.dev/guide/performance#reduce-resolve-operations
+    plugins: [
+        react(),
+        dts(), //TODO Check https://github.com/alloc/vite-dts
+        {
+            name: 'Generate Index & Exports',
+            async buildStart() {
+                await generateIndex();
+            },
+            async closeBundle() {
+                await fixExports();
+            },
+        },
+    ],
+});