@kirill.konshin/utils 0.0.8 → 0.0.9

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();
+            },
+        },
+    ],
+});

package/vite.exports.ts

@@ -0,0 +1,121 @@
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import * as process from 'node:process';
+import { globSync } from 'glob';
+import { execSync } from 'node:child_process';
+
+export const pkgPath = path.join(process.cwd(), 'package.json');
+
+export const distDir = './dist';
+
+//TODO Re-read in fixExports
+// import pkg from './package.json' assert { type: 'json' };
+// export { pkg };
+export const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+
+export const rootPkg = JSON.parse(fs.readFileSync(path.resolve('../../package.json'), 'utf-8'));
+
+export const formats = {
+    // cjs: ['require', 'js', 'd.ts'],
+    esm: ['import', 'mjs', 'd.ts'],
+};
+
+export const entryGlob = 'src/*/index.ts';
+export const excludeGlob = 'src/**/*.{stories,test}.{ts,tsx}';
+export const includeGlob = 'src/**/!(*.stories|*.test).{ts,tsx}';
+export const foldersGlob = 'src/*/';
+
+export const external = [
+    ...[...Object.keys(pkg.dependencies), ...Object.keys(pkg.devDependencies)].map(
+        (dep) => new RegExp(`^${dep}(/.*)?`),
+    ),
+    /node_modules/,
+    /^node:.*/,
+    /builder-util-runtime/,
+];
+
+export const entry = globSync(entryGlob);
+
+export async function fixExports() {
+    const modules = globSync(foldersGlob).map((file) => path.basename(file));
+
+    // Exports
+
+    pkg.exports = {};
+
+    // https://johnnyreilly.com/dual-publishing-esm-cjs-modules-with-tsup-and-are-the-types-wrong
+    // https://www.npmjs.com/package/@arethetypeswrong/cli
+    // FIXME https://github.com/andrewbranch/example-subpath-exports-ts-compat
+    for (const entry of modules) {
+        const key = `./${entry}`;
+
+        pkg.exports[key] = {};
+
+        for (const [format, ext, type] of Object.values(formats)) {
+            const fileName = `${distDir}/${entry}/index`;
+
+            pkg.exports[key][format] = {
+                [format]: `${fileName}.${ext}`,
+                types: `${fileName}.${type}`,
+            };
+        }
+    }
+
+    const core = pkg.exports['./core'];
+
+    pkg.exports['.'] = core;
+
+    // Main
+
+    pkg.type = 'module';
+    pkg.main = pkg.module = core.import.import;
+    pkg.types = core.import.types;
+
+    // Author & License
+
+    // TODO Move to root build + set private=true for demos + set react version
+    pkg.publishConfig = { access: 'public' };
+    pkg.author = 'Kirill Konshin <kirill@konshin.org> (https://konshin.org)';
+    pkg.license = 'MIT';
+
+    // Scripts
+
+    // pkg.scripts.clean = 'rm -rf dist .tscache tsconfig.tsbuildinfo';
+    // pkg.scripts.build = 'vite build';
+    // pkg.scripts.start = 'yarn build --watch';
+    pkg.scripts.wait = `wait-on ${core.import.import}`;
+
+    // Ensure peer deps are correct & meta is set
+
+    pkg.peerDependenciesMeta = {};
+
+    for (const [key, _] of Object.entries(pkg.peerDependencies)) {
+        const root = rootPkg.devDependencies[key]; // lifted to root
+        const srcPkg = root ? rootPkg : pkg;
+
+        if (!srcPkg.devDependencies[key]) throw new Error(`Key ${key} not found in dependencies`);
+
+        pkg.peerDependenciesMeta[key] = { optional: true };
+
+        const version = srcPkg.devDependencies[key].split('.');
+
+        pkg.peerDependencies[key] = version[0] === '^0' ? `${version[0]}.${version[1]}` : version[0];
+    }
+
+    // Write
+
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+
+    console.log('Updated package.json with exports');
+    // console.log(pkg);
+    // console.log(pkg.exports);
+}
+
+export async function generateIndex() {
+    execSync(`yarn build:index`, { stdio: 'inherit' }); // programmatic call
+    //FIXME https://github.com/imjuni/create-ts-index/issues/70
+    // import { TypeScritIndexWriter } from 'create-ts-index';
+    // const tsiw = new TypeScritIndexWriter();
+    // const options = TypeScritIndexWriter.getDefaultOption('./src');
+    // await tsiw.createEntrypoint(option);
+}