@koine/next 1.0.4 → 1.0.9

package/node/Analytics/AnalyticsGoogle.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticsGoogle = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const router_1 = require("next/router");
+const script_1 = tslib_1.__importDefault(require("next/script"));
+const utils_1 = require("@koine/utils");
+const AnalyticsGoogle = ({ id }) => {
+    const uid = id || process.env["NEXT_PUBLIC_GTM_ID"];
+    const { events, asPath, query } = (0, router_1.useRouter)();
+    const [ready, setReady] = (0, react_1.useState)(false);
+    const [routed, setRouted] = (0, react_1.useState)(false);
+    // const [url, setUrl] = useState("");
+    (0, react_1.useEffect)(() => {
+        const handleRouteChange = () => {
+            setRouted(true);
+        };
+        events.on("routeChangeComplete", handleRouteChange);
+        return () => {
+            events.off("routeChangeComplete", handleRouteChange);
+        };
+    }, [events]);
+    (0, react_1.useEffect)(() => {
+        if (routed && ready && asPath) {
+            // const search = query;
+            (0, utils_1.pageview)(asPath);
+        }
+    }, [asPath, query, routed, ready]);
+    if (!uid) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(script_1.default, { id: "google-tagmanager", src: `https://www.googletagmanager.com/gtag/js?id=${id}`, strategy: "afterInteractive", onLoad: () => setReady(true) }), (0, jsx_runtime_1.jsx)(script_1.default, { id: "google-analytics", strategy: "afterInteractive", children: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){window.dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${id}', { 'send_page_view': false });
+        ` })] }));
+};
+exports.AnalyticsGoogle = AnalyticsGoogle;

package/node/Analytics/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./AnalyticsGoogle"), exports);

package/node/Auth/helpers.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCallbackUrl = exports.getAuthRoutes = exports.AUTH_ROUTES = void 0;
+const utils_1 = require("@koine/utils");
+exports.AUTH_ROUTES = {
+    login: process.env["AUTH_ROUTE_LOGIN"],
+    profile: process.env["AUTH_ROUTE_PROFILE"],
+    register: process.env["AUTH_ROUTE_REGISTER"],
+    secured: JSON.parse(process.env["AUTH_ROUTES_SECURED"] || "[]"),
+};
+function getAuthRoutes(t) {
+    return Object.keys(exports.AUTH_ROUTES).reduce((map, name) => {
+        const routePage = exports.AUTH_ROUTES[name];
+        // @ts-expect-error cannot remember
+        map[name] = (0, utils_1.isString)(routePage) ? t(`~:${exports.AUTH_ROUTES[name]}`) : routePage;
+        return map;
+    }, {});
+}
+exports.getAuthRoutes = getAuthRoutes;
+/**
+ * @param url e.g. "http://localhost:3000/signin?callbackUrl=http://localhost:3000/profile"
+ */
+function getCallbackUrl(url = window.location.href) {
+    return url.split("callbackUrl=")[1] || "";
+}
+exports.getCallbackUrl = getCallbackUrl;

package/node/Auth/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./helpers"), exports);
+tslib_1.__exportStar(require("./useLogin"), exports);
+tslib_1.__exportStar(require("./useLoginUrl"), exports);
+tslib_1.__exportStar(require("./useLogout"), exports);

package/node/Auth/useLogin.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogin = void 0;
+const react_1 = require("react");
+const router_1 = require("next/router");
+const react_2 = require("next-auth/react");
+const utils_1 = require("@koine/utils");
+const I18n_1 = require("../I18n");
+const helpers_1 = require("./helpers");
+function useLogin() {
+    const t = (0, I18n_1.useT)();
+    const { push } = (0, router_1.useRouter)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [ok, setOk] = (0, react_1.useState)(false);
+    const [fail, setFail] = (0, react_1.useState)(false);
+    const submit = (0, react_1.useCallback)((data) => {
+        setLoading(true);
+        (0, react_2.signIn)("credentials", {
+            ...data,
+            redirect: false,
+        })
+            // @ts-expect-error FIXME: at some point...
+            .then(({ ok }) => {
+            setLoading(false);
+            setOk(ok);
+            setFail(!ok);
+            if (ok) {
+                const redirectUrl = (0, utils_1.parseURL)((0, helpers_1.getCallbackUrl)());
+                const { login, register, profile } = (0, helpers_1.getAuthRoutes)(t);
+                if (redirectUrl) {
+                    const redirectPath = redirectUrl.pathname;
+                    if (profile &&
+                        (redirectPath === login || redirectPath === register)) {
+                        push(profile);
+                    }
+                    else {
+                        push(redirectPath + redirectUrl.search);
+                    }
+                }
+                else if (profile) {
+                    push(profile);
+                }
+            }
+        });
+    }, [t, push]);
+    // TODO: useMemo ?
+    return {
+        submit,
+        loading,
+        ok,
+        fail,
+    };
+}
+exports.useLogin = useLogin;

package/node/Auth/useLoginUrl.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLoginUrl = void 0;
+const react_1 = require("react");
+const I18n_1 = require("../I18n");
+const helpers_1 = require("./helpers");
+function useLoginUrl() {
+    const [currentUrl, setCurrentUrl] = (0, react_1.useState)("");
+    const t = (0, I18n_1.useT)();
+    (0, react_1.useEffect)(() => {
+        setCurrentUrl(`?callbackUrl=${window.location.href}`);
+    }, []);
+    return `${(0, helpers_1.getAuthRoutes)(t).login}${currentUrl}`;
+}
+exports.useLoginUrl = useLoginUrl;

package/node/Auth/useLogout.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogout = void 0;
+const react_1 = require("react");
+const router_1 = require("next/router");
+const react_2 = require("next-auth/react");
+const utils_1 = require("@koine/utils");
+const I18n_1 = require("../I18n");
+const helpers_1 = require("./helpers");
+function useLogout() {
+    const t = (0, I18n_1.useT)();
+    const { push } = (0, router_1.useRouter)();
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [ok, setOk] = (0, react_1.useState)(false);
+    const [fail] = (0, react_1.useState)(false);
+    const submit = (0, react_1.useCallback)((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setLoading(true);
+        (0, react_2.signOut)({ redirect: false }).then(() => {
+            setLoading(false);
+            setOk(true);
+            const redirectUrl = (0, utils_1.parseURL)((0, helpers_1.getCallbackUrl)());
+            const currentUrl = (0, utils_1.parseURL)(window.location.href);
+            const { secured } = (0, helpers_1.getAuthRoutes)(t);
+            const signin = t("~:/signin");
+            const profile = t("~:/profile");
+            const targetUrl = redirectUrl || currentUrl;
+            let redirect = "";
+            if (targetUrl) {
+                if (targetUrl.pathname === profile) {
+                    redirect = signin;
+                }
+                else if (secured) {
+                    for (let i = 0; i < secured.length; i++) {
+                        if (targetUrl.pathname.match(secured[i])) {
+                            redirect = signin;
+                            break;
+                        }
+                    }
+                }
+            }
+            if (redirect) {
+                push(redirect);
+            }
+        });
+    }, [t, push]);
+    // TODO: useMemo ?
+    return {
+        submit,
+        loading,
+        ok,
+        fail,
+    };
+}
+exports.useLogout = useLogout;

package/node/Favicon/Favicon.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Favicon = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const head_1 = tslib_1.__importDefault(require("next/head"));
+const react_1 = require("@koine/react");
+const Favicon = (props) => ((0, jsx_runtime_1.jsx)(head_1.default, { children: (0, jsx_runtime_1.jsx)(react_1.FaviconTags, { ...props }) }));
+exports.Favicon = Favicon;

package/node/Favicon/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Favicon"), exports);

package/node/Forms/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useForm"), exports);
+tslib_1.__exportStar(require("./useSubmit"), exports);

package/node/Forms/useForm.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useForm = void 0;
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const yup_1 = require("@hookform/resolvers/yup");
+const I18n_1 = require("../I18n");
+function useForm(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+schema, i18nNamespace, formProps = {}, debug) {
+    const t = (0, I18n_1.useT)(i18nNamespace);
+    // const form = _useForm<InferType<ObjectSchema<T, object>>>({
+    const form = (0, react_hook_form_1.useForm)({
+        // @ts-expect-error FIXME:
+        resolver: (0, yup_1.yupResolver)(schema),
+        // make the form behave more closer as native:
+        // shouldUnregister: true,
+        ...formProps,
+    });
+    // const { control, register, setValue } = form;
+    // const field = { control, register, setValue, t };
+    // if ("production" !== process.env["NODE_ENV"]) {
+    //   if (debug) {
+    //     console.log(
+    //       `Form ${i18nNamespace} data`,
+    //       form.watch(),
+    //       `errors: `,
+    //       form.formState.errors
+    //     );
+    //   }
+    // }
+    // if (formProps.mode === "onChange") {
+    //   return { field, ...form };
+    // }
+    return (0, react_1.useMemo)(() => {
+        const { control, register, setValue } = form;
+        const field = { control, register, setValue, t };
+        return { field, ...form };
+    }, [t, form]);
+}
+exports.useForm = useForm;

package/node/Forms/useSubmit.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSubmit = void 0;
+const react_use_1 = require("react-use");
+const api_1 = require("../utils/api");
+function useSubmit(url, transformData) {
+    const [state, submit] = (0, react_use_1.useAsyncFn)(async (json) => {
+        if (transformData)
+            json = transformData(json);
+        const response = await api_1.api.post(url, {
+            json,
+        });
+        if ("production" !== process.env["NODE_ENV"]) {
+            console.log("[@koine/next] useSubmit response", response);
+        }
+        return response;
+    }, [url, transformData]);
+    const { loading, error, value } = state;
+    const fail = !loading && (!!error || value?.fail);
+    return {
+        submit,
+        loading,
+        ...(value || {}),
+        fail,
+    };
+}
+exports.useSubmit = useSubmit;

package/node/Head/Head.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Head = void 0;
+var head_1 = require("next/head");
+Object.defineProperty(exports, "Head", { enumerable: true, get: function () { return __importDefault(head_1).default; } });

package/node/Head/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Head"), exports);

package/node/I18n/I18n.js

@@ -0,0 +1,82 @@
+"use strict";
+/// <reference types="@koine/next/typings" />
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDateFormat = exports.translationAsOptions = exports.useT = exports.T = void 0;
+const tslib_1 = require("tslib");
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+/**
+ * @file
+ *
+ * About the typescript support for translation strings @see:
+ * - https://github.com/vinissimus/next-translate/issues/721
+ */
+const react_1 = require("react");
+const router_1 = require("next/router");
+const format_1 = tslib_1.__importDefault(require("date-fns/format"));
+const useTranslation_1 = tslib_1.__importDefault(require("next-translate/useTranslation"));
+const react_2 = require("@koine/react");
+var Trans_1 = require("next-translate/Trans");
+Object.defineProperty(exports, "T", { enumerable: true, get: function () { return tslib_1.__importDefault(Trans_1).default; } });
+/**
+ * FIXME: the use of `useMemo` is a hopefully-temporary solution to fix the FOUC
+ * problem of untranslated text during page transitions
+ *
+ * @see https://github.com/vinissimus/next-translate/issues/513#issuecomment-779826418
+ */
+function useT(namespace) {
+    const t = (0, useTranslation_1.default)().t;
+    // const typedT = <
+    //   // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
+    //   R extends unknown = string,
+    //   // Q extends TranslationQuery = TranslationQuery
+    //   // O extends TranslationOptions = TranslationOptions
+    // >(
+    //   s: N extends TranslateNamespace
+    //     ? Paths<Koine.NextTranslations[N]> | AllPaths
+    //     : AllPaths,
+    //   q?: TranslationQuery,
+    //   o?: TranslationOptions
+    // ) =>
+    //   // eslint-disable-next-line
+    //   t.call(
+    //     null,
+    //     namespace ? `${namespace}:${s}` : s,
+    //     q === "obj" ? null : q,
+    //     q === "obj" || o === "obj" ? { returnObjects: true } : o
+    //   // ) as R extends (undefined | never | unknown) ? TranslateReturn<TranslationQuery, TranslationOptions> : R;
+    //   ) as R;
+    // return typedT;
+    const tMemoized = (0, react_1.useMemo)(() => (s, q, o) => t(namespace ? `${namespace}:${s}` : s, q === "obj" ? null : q, q === "obj" || o === "obj" ? { returnObjects: true } : o
+    // ) as R extends (undefined | never | unknown) ? TranslateReturn<TranslationQuery, TranslationOptions> : R;
+    ), [t, namespace]);
+    // return tMemoized as Translate<N>;
+    return tMemoized;
+}
+exports.useT = useT;
+function translationAsOptions(t, i18nKey) {
+    const dictionary = t(i18nKey, undefined, {
+        returnObjects: true,
+    });
+    return Object.keys(dictionary).map((key) => ({
+        value: key,
+        label: dictionary[key],
+    }));
+}
+exports.translationAsOptions = translationAsOptions;
+/**
+ * Automatically returns the `date-fns/format` function with the right locale
+ * passed as option (grabbed from next router value).
+ */
+const useDateFormat = () => {
+    const [formatter, setFormatter] = (0, react_1.useState)(() => (...args) => (0, format_1.default)(...args));
+    const router = (0, router_1.useRouter)();
+    const locale = (0, react_2.useDateLocale)(router.locale);
+    (0, react_1.useEffect)(() => {
+        if (locale) {
+            const newFormatter = (date, _format, options) => (0, format_1.default)(date, _format, { ...(options || {}), locale });
+            setFormatter(() => (...args) => newFormatter(...args));
+        }
+    }, [locale]);
+    return formatter;
+};
+exports.useDateFormat = useDateFormat;

package/node/I18n/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./I18n"), exports);

package/node/Img/Img.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNextImgProps = exports.NextImgSmart = exports.NextImg = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const image_1 = tslib_1.__importDefault(require("next/image"));
+exports.NextImg = image_1.default;
+const NextImgSmart = (props) => {
+    const [$loaded, setLoaded] = (0, react_1.useState)(false);
+    const [$error, setError] = (0, react_1.useState)(false);
+    const { nextImgProps, restProps } = getNextImgProps(props);
+    const { Wrap } = restProps;
+    return nextImgProps.priority ? ((0, jsx_runtime_1.jsx)(image_1.default, { ...nextImgProps })) : ((0, jsx_runtime_1.jsx)(Wrap, { ...restProps, "$loaded": $loaded, "$error": $error, children: (0, jsx_runtime_1.jsx)(image_1.default, { ...nextImgProps, onLoadingComplete: () => setLoaded(true), onError: () => setError(true) }) }));
+};
+exports.NextImgSmart = NextImgSmart;
+function getNextImgProps({ src, alt, layout, blurDataURL, width, height, priority, objectFit, objectPosition, ...restProps }) {
+    const nextImgProps = {
+        src,
+        alt,
+        layout,
+        blurDataURL,
+        width,
+        height,
+        priority,
+        objectFit,
+        objectPosition,
+    };
+    return {
+        nextImgProps,
+        restProps,
+    };
+}
+exports.getNextImgProps = getNextImgProps;

package/node/Img/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Img"), exports);

package/node/Link/Link.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Link = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const link_1 = tslib_1.__importDefault(require("next/link"));
+/**
+ * @see https://next.js.org/docs/api-reference/next/link
+ */
+exports.Link = (0, react_1.forwardRef)(function Link({ href, prefetch, replace, scroll, shallow, locale, Link = "span", ...props }, ref) {
+    return ((0, jsx_runtime_1.jsx)(link_1.default, { href: href, replace: replace, scroll: scroll, shallow: shallow, locale: locale, passHref: true, children: (0, jsx_runtime_1.jsx)(Link, { ref: ref, ...props }) }));
+});

package/node/Link/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Link"), exports);

package/node/NextProgress/NextProgress.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextProgress = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const router_1 = require("next/router");
+const NextProgress = ({ startAt = 0.3, showOnShallow = true, stopDelayMs = 200, Overlay = "div", }) => {
+    const { events } = (0, router_1.useRouter)();
+    // const [progress, setProgress] = useState(0);
+    const [running, setRunning] = (0, react_1.useState)(false);
+    const timer = (0, react_1.useRef)(null);
+    const routeChangeStart = (0, react_1.useCallback)((_, { shallow }) => {
+        if (!shallow || showOnShallow) {
+            // setProgress(startAt);
+            setRunning(true);
+        }
+    }, [showOnShallow]);
+    const routeChangeEnd = (0, react_1.useCallback)((_, { shallow }) => {
+        if (!shallow || showOnShallow) {
+            if (timer.current) {
+                clearTimeout(timer.current);
+            }
+            timer.current = setTimeout(() => {
+                // setProgress(100);
+                setRunning(false);
+            }, stopDelayMs);
+        }
+    }, [showOnShallow, stopDelayMs, timer]);
+    (0, react_1.useEffect)(() => {
+        events.on("routeChangeStart", routeChangeStart);
+        events.on("routeChangeComplete", routeChangeEnd);
+        events.on("routeChangeError", routeChangeEnd);
+        return () => {
+            events.off("routeChangeStart", routeChangeStart);
+            events.off("routeChangeComplete", routeChangeEnd);
+            events.off("routeChangeError", routeChangeEnd);
+        };
+    }, [events, routeChangeStart, routeChangeEnd]);
+    return (0, jsx_runtime_1.jsx)(Overlay, { running: running });
+};
+exports.NextProgress = NextProgress;

package/node/NextProgress/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextProgress = void 0;
+var NextProgress_1 = require("./NextProgress");
+Object.defineProperty(exports, "NextProgress", { enumerable: true, get: function () { return NextProgress_1.NextProgress; } });

package/node/Seo/Seo.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Seo = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const head_1 = tslib_1.__importDefault(require("next/head"));
+const helpers_1 = require("./helpers");
+const _Seo = (props) => {
+    return (0, jsx_runtime_1.jsx)(head_1.default, { children: (0, helpers_1.buildTags)(props) });
+};
+exports.Seo = (0, react_1.memo)(_Seo);

package/node/Seo/SeoDefaults.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeoDefaults = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const head_1 = tslib_1.__importDefault(require("next/head"));
+// import { useRouter } from "next/router";
+// import { getSiteUrl } from "../utils";
+const helpers_1 = require("./helpers");
+const _SeoDefaults = (props) => {
+    // const router = useRouter();
+    // props.openGraph.url = getSiteUrl(router.asPath);
+    return (0, jsx_runtime_1.jsx)(head_1.default, { children: (0, helpers_1.buildTags)(props) });
+};
+exports.SeoDefaults = (0, react_1.memo)(_SeoDefaults);