@koine/next 1.0.4 → 1.0.9

package/Analytics/AnalyticsGoogle.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-export declare type AnalyticsGoogleProps = {
-    /** Falls back to `.env` variable `NEXT_PUBLIC_GTM_ID` */
-    id?: string;
-};
-export declare const AnalyticsGoogle: ({ id }: AnalyticsGoogleProps) => JSX.Element | null;
+export declare type AnalyticsGoogleProps = {
+    /** Falls back to `.env` variable `NEXT_PUBLIC_GTM_ID` */
+    id?: string;
+};
+export declare const AnalyticsGoogle: ({ id }: AnalyticsGoogleProps) => JSX.Element | null;

package/Analytics/AnalyticsGoogle.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useRouter } from "next/router";
+import Script from "next/script";
+import { pageview } from "@koine/utils";
+export const AnalyticsGoogle = ({ id }) => {
+    const uid = id || process.env["NEXT_PUBLIC_GTM_ID"];
+    const { events, asPath, query } = useRouter();
+    const [ready, setReady] = useState(false);
+    const [routed, setRouted] = useState(false);
+    // const [url, setUrl] = useState("");
+    useEffect(() => {
+        const handleRouteChange = () => {
+            setRouted(true);
+        };
+        events.on("routeChangeComplete", handleRouteChange);
+        return () => {
+            events.off("routeChangeComplete", handleRouteChange);
+        };
+    }, [events]);
+    useEffect(() => {
+        if (routed && ready && asPath) {
+            // const search = query;
+            pageview(asPath);
+        }
+    }, [asPath, query, routed, ready]);
+    if (!uid) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(Script, { id: "google-tagmanager", src: `https://www.googletagmanager.com/gtag/js?id=${id}`, strategy: "afterInteractive", onLoad: () => setReady(true) }), _jsx(Script, { 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 });
+        ` })] }));
+};

package/Analytics/index.d.ts

@@ -1 +1 @@
-export * from "./AnalyticsGoogle";
+export * from "./AnalyticsGoogle";

package/Analytics/index.js

@@ -0,0 +1 @@
+export * from "./AnalyticsGoogle";

package/Analytics/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Analytics/index.js",
+  "types": "./index.d.ts"
+}

package/Auth/helpers.d.ts

@@ -1,17 +1,17 @@
-import type { Translate } from "../I18n";
-/**
- * @see next/auth `pages` mapping: https://next-auth.js.org/configuration/pages`
- */
-export declare type AuthRoutesMap = {
-    login?: string;
-    profile?: string;
-    register?: string;
-    /** Array of regexes to match pathnames of protected routes */
-    secured?: RegExp[];
-};
-export declare const AUTH_ROUTES: AuthRoutesMap;
-export declare function getAuthRoutes(t: Translate): AuthRoutesMap;
-/**
- * @param url e.g. "http://localhost:3000/signin?callbackUrl=http://localhost:3000/profile"
- */
-export declare function getCallbackUrl(url?: string): string;
+import type { Translate } from "../I18n";
+/**
+ * @see next/auth `pages` mapping: https://next-auth.js.org/configuration/pages`
+ */
+export declare type AuthRoutesMap = {
+    login?: string;
+    profile?: string;
+    register?: string;
+    /** Array of regexes to match pathnames of protected routes */
+    secured?: RegExp[];
+};
+export declare const AUTH_ROUTES: AuthRoutesMap;
+export declare function getAuthRoutes(t: Translate): AuthRoutesMap;
+/**
+ * @param url e.g. "http://localhost:3000/signin?callbackUrl=http://localhost:3000/profile"
+ */
+export declare function getCallbackUrl(url?: string): string;

package/Auth/helpers.js

@@ -0,0 +1,21 @@
+import { isString } from "@koine/utils";
+export const 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"] || "[]"),
+};
+export function getAuthRoutes(t) {
+    return Object.keys(AUTH_ROUTES).reduce((map, name) => {
+        const routePage = AUTH_ROUTES[name];
+        // @ts-expect-error cannot remember
+        map[name] = isString(routePage) ? t(`~:${AUTH_ROUTES[name]}`) : routePage;
+        return map;
+    }, {});
+}
+/**
+ * @param url e.g. "http://localhost:3000/signin?callbackUrl=http://localhost:3000/profile"
+ */
+export function getCallbackUrl(url = window.location.href) {
+    return url.split("callbackUrl=")[1] || "";
+}

package/Auth/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./helpers";
-export * from "./useLogin";
-export * from "./useLoginUrl";
-export * from "./useLogout";
+export * from "./helpers";
+export * from "./useLogin";
+export * from "./useLoginUrl";
+export * from "./useLogout";

package/Auth/index.js

@@ -0,0 +1,4 @@
+export * from "./helpers";
+export * from "./useLogin";
+export * from "./useLoginUrl";
+export * from "./useLogout";

package/Auth/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Auth/index.js",
+  "types": "./index.d.ts"
+}

package/Auth/useLogin.d.ts

@@ -1,7 +1,7 @@
-import { SubmitHandler } from "react-hook-form";
-export declare function useLogin<LoginForm = {}>(): {
-    submit: SubmitHandler<LoginForm>;
-    loading: boolean;
-    ok: boolean;
-    fail: boolean;
-};
+import { SubmitHandler } from "react-hook-form";
+export declare function useLogin<LoginForm extends {} = {}>(): {
+    submit: SubmitHandler<LoginForm>;
+    loading: boolean;
+    ok: boolean;
+    fail: boolean;
+};

package/Auth/useLogin.js

@@ -0,0 +1,50 @@
+import { useState, useCallback } from "react";
+import { useRouter } from "next/router";
+import { signIn } from "next-auth/react";
+import { parseURL } from "@koine/utils";
+import { useT } from "../I18n";
+import { getAuthRoutes, getCallbackUrl } from "./helpers";
+export function useLogin() {
+    const t = useT();
+    const { push } = useRouter();
+    const [loading, setLoading] = useState(false);
+    const [ok, setOk] = useState(false);
+    const [fail, setFail] = useState(false);
+    const submit = useCallback((data) => {
+        setLoading(true);
+        signIn("credentials", {
+            ...data,
+            redirect: false,
+        })
+            // @ts-expect-error FIXME: at some point...
+            .then(({ ok }) => {
+            setLoading(false);
+            setOk(ok);
+            setFail(!ok);
+            if (ok) {
+                const redirectUrl = parseURL(getCallbackUrl());
+                const { login, register, profile } = 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,
+    };
+}

package/Auth/useLoginUrl.d.ts

@@ -1 +1 @@
-export declare function useLoginUrl(): string;
+export declare function useLoginUrl(): string;

package/Auth/useLoginUrl.js

@@ -0,0 +1,11 @@
+import { useEffect, useState } from "react";
+import { useT } from "../I18n";
+import { getAuthRoutes } from "./helpers";
+export function useLoginUrl() {
+    const [currentUrl, setCurrentUrl] = useState("");
+    const t = useT();
+    useEffect(() => {
+        setCurrentUrl(`?callbackUrl=${window.location.href}`);
+    }, []);
+    return `${getAuthRoutes(t).login}${currentUrl}`;
+}

package/Auth/useLogout.d.ts

@@ -1,6 +1,6 @@
-export declare function useLogout(): {
-    submit: (event: React.SyntheticEvent<HTMLFormElement>) => void;
-    loading: boolean;
-    ok: boolean;
-    fail: boolean;
-};
+export declare function useLogout(): {
+    submit: (event: React.SyntheticEvent<HTMLFormElement>) => void;
+    loading: boolean;
+    ok: boolean;
+    fail: boolean;
+};

package/Auth/useLogout.js

@@ -0,0 +1,52 @@
+import { useState, useCallback } from "react";
+import { useRouter } from "next/router";
+import { signOut } from "next-auth/react";
+import { parseURL } from "@koine/utils";
+import { useT } from "../I18n";
+import { getAuthRoutes, getCallbackUrl } from "./helpers";
+export function useLogout() {
+    const t = useT();
+    const { push } = useRouter();
+    const [loading, setLoading] = useState(false);
+    const [ok, setOk] = useState(false);
+    const [fail] = useState(false);
+    const submit = useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setLoading(true);
+        signOut({ redirect: false }).then(() => {
+            setLoading(false);
+            setOk(true);
+            const redirectUrl = parseURL(getCallbackUrl());
+            const currentUrl = parseURL(window.location.href);
+            const { secured } = 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,
+    };
+}

package/Favicon/Favicon.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import { FaviconTagsProps } from "@koine/react";
-export declare type FaviconProps = FaviconTagsProps;
-export declare const Favicon: (props: FaviconTagsProps) => JSX.Element;
+import { FaviconTagsProps } from "@koine/react";
+export declare type FaviconProps = FaviconTagsProps;
+export declare const Favicon: (props: FaviconTagsProps) => JSX.Element;

package/Favicon/Favicon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Head from "next/head";
+import { FaviconTags } from "@koine/react";
+export const Favicon = (props) => (_jsx(Head, { children: _jsx(FaviconTags, { ...props }) }));

package/Favicon/index.d.ts

@@ -1 +1 @@
-export * from "./Favicon";
+export * from "./Favicon";

package/Favicon/index.js

@@ -0,0 +1 @@
+export * from "./Favicon";

package/Favicon/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Favicon/index.js",
+  "types": "./index.d.ts"
+}

package/Forms/index.d.ts

@@ -1,2 +1,2 @@
-export * from "./useForm";
-export * from "./useSubmit";
+export * from "./useForm";
+export * from "./useSubmit";

package/Forms/index.js

@@ -0,0 +1,2 @@
+export * from "./useForm";
+export * from "./useSubmit";

package/Forms/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Forms/index.js",
+  "types": "./index.d.ts"
+}

package/Forms/useForm.d.ts

@@ -1,32 +1,32 @@
-import type { UseFormProps, FieldValues } from "react-hook-form";
-import type { ObjectSchema } from "yup";
-import { TranslateNamespace } from "../I18n";
-export declare function useForm<T extends FieldValues>(schema: ObjectSchema<any>, i18nNamespace: TranslateNamespace, formProps?: UseFormProps, debug?: boolean): {
-    watch: import("react-hook-form").UseFormWatch<T>;
-    getValues: import("react-hook-form").UseFormGetValues<T>;
-    getFieldState: import("react-hook-form").UseFormGetFieldState<T>;
-    setError: import("react-hook-form").UseFormSetError<T>;
-    clearErrors: import("react-hook-form").UseFormClearErrors<T>;
-    setValue: import("react-hook-form").UseFormSetValue<T>;
-    trigger: import("react-hook-form").UseFormTrigger<T>;
-    formState: import("react-hook-form").FormState<T>;
-    resetField: import("react-hook-form").UseFormResetField<T>;
-    reset: import("react-hook-form").UseFormReset<T>;
-    handleSubmit: import("react-hook-form").UseFormHandleSubmit<T>;
-    unregister: import("react-hook-form").UseFormUnregister<T>;
-    control: import("react-hook-form").Control<T, any>;
-    register: import("react-hook-form").UseFormRegister<T>;
-    setFocus: import("react-hook-form").UseFormSetFocus<T>;
-    field: {
-        control: import("react-hook-form").Control<T, any>;
-        register: import("react-hook-form").UseFormRegister<T>;
-        setValue: import("react-hook-form").UseFormSetValue<T>;
-        t: <R extends unknown = string>(s: string, q?: "obj" | {
-            [key: string]: string | number | boolean;
-        } | null | undefined, o?: "obj" | {
-            returnObjects?: boolean | undefined;
-            fallback?: string | string[] | undefined;
-            default?: string | undefined;
-        } | undefined) => R;
-    };
-};
+import type { UseFormProps, FieldValues } from "react-hook-form";
+import type { ObjectSchema } from "yup";
+import { TranslateNamespace } from "../I18n";
+export declare function useForm<T extends FieldValues>(schema: ObjectSchema<any>, i18nNamespace: TranslateNamespace, formProps?: UseFormProps, debug?: boolean): {
+    watch: import("react-hook-form").UseFormWatch<T>;
+    getValues: import("react-hook-form").UseFormGetValues<T>;
+    getFieldState: import("react-hook-form").UseFormGetFieldState<T>;
+    setError: import("react-hook-form").UseFormSetError<T>;
+    clearErrors: import("react-hook-form").UseFormClearErrors<T>;
+    setValue: import("react-hook-form").UseFormSetValue<T>;
+    trigger: import("react-hook-form").UseFormTrigger<T>;
+    formState: import("react-hook-form").FormState<T>;
+    resetField: import("react-hook-form").UseFormResetField<T>;
+    reset: import("react-hook-form").UseFormReset<T>;
+    handleSubmit: import("react-hook-form").UseFormHandleSubmit<T>;
+    unregister: import("react-hook-form").UseFormUnregister<T>;
+    control: import("react-hook-form").Control<T, any>;
+    register: import("react-hook-form").UseFormRegister<T>;
+    setFocus: import("react-hook-form").UseFormSetFocus<T>;
+    field: {
+        control: import("react-hook-form").Control<T, any>;
+        register: import("react-hook-form").UseFormRegister<T>;
+        setValue: import("react-hook-form").UseFormSetValue<T>;
+        t: <R extends unknown = string>(s: string, q?: "obj" | {
+            [key: string]: string | number | boolean;
+        } | null | undefined, o?: "obj" | {
+            returnObjects?: boolean | undefined;
+            fallback?: string | string[] | undefined;
+            default?: string | undefined;
+        } | undefined) => R;
+    };
+};

package/Forms/useForm.js

@@ -0,0 +1,37 @@
+import { useMemo } from "react";
+import { useForm as _useForm } from "react-hook-form";
+import { yupResolver as resolver } from "@hookform/resolvers/yup";
+import { useT } from "../I18n";
+export function useForm(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+schema, i18nNamespace, formProps = {}, debug) {
+    const t = useT(i18nNamespace);
+    // const form = _useForm<InferType<ObjectSchema<T, object>>>({
+    const form = _useForm({
+        // @ts-expect-error FIXME:
+        resolver: resolver(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 useMemo(() => {
+        const { control, register, setValue } = form;
+        const field = { control, register, setValue, t };
+        return { field, ...form };
+    }, [t, form]);
+}

package/Forms/useSubmit.d.ts

@@ -1,24 +1,24 @@
-import type { UnpackNestedValue } from "react-hook-form";
-import { KoineApi } from "../utils/api";
-export declare function useSubmit<RequestBody extends {}, ResponseSuccesfull extends KoineApi.ResponseSuccesfull = {}, ResponseFailed extends KoineApi.ResponseFailed = Record<keyof RequestBody, string | string[]>>(url: string, transformData?: (json: UnpackNestedValue<RequestBody>) => any): {
-    submit: (json: any) => Promise<KoineApi.Response<ResponseSuccesfull, ResponseFailed>>;
-    loading: boolean;
-} & {
-    status: number;
-    msg: string;
-} & ({
-    ok?: boolean | undefined;
-    fail?: boolean | undefined;
-    loading: true;
-    data?: undefined;
-} | {
-    ok: true;
-    fail?: false | undefined;
-    loading?: false | undefined;
-    data: ResponseSuccesfull;
-} | {
-    ok?: false | undefined;
-    fail: true;
-    loading?: false | undefined;
-    data: ResponseFailed;
-});
+import type { UnpackNestedValue } from "react-hook-form";
+import { KoineApi } from "../utils/api";
+export declare function useSubmit<RequestBody extends {}, ResponseSuccesfull extends KoineApi.ResponseSuccesfull = {}, ResponseFailed extends KoineApi.ResponseFailed = Record<keyof RequestBody, string | string[]>>(url: string, transformData?: (json: UnpackNestedValue<RequestBody>) => any): {
+    submit: (json: any) => Promise<KoineApi.Response<ResponseSuccesfull, ResponseFailed>>;
+    loading: boolean;
+} & {
+    status: number;
+    msg: string;
+} & ({
+    ok?: boolean | undefined;
+    fail?: boolean | undefined;
+    loading: true;
+    data?: undefined;
+} | {
+    ok: true;
+    fail?: false | undefined;
+    loading?: false | undefined;
+    data: ResponseSuccesfull;
+} | {
+    ok?: false | undefined;
+    fail: true;
+    loading?: false | undefined;
+    data: ResponseFailed;
+});

package/Forms/useSubmit.js

@@ -0,0 +1,23 @@
+import { useAsyncFn } from "react-use";
+import { api } from "../utils/api";
+export function useSubmit(url, transformData) {
+    const [state, submit] = useAsyncFn(async (json) => {
+        if (transformData)
+            json = transformData(json);
+        const response = await 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,
+    };
+}

package/Head/Head.d.ts

@@ -1 +1 @@
-export { default as Head } from "next/head";
+export { default as Head } from "next/head";

package/Head/Head.js

@@ -0,0 +1 @@
+export { default as Head } from "next/head";

package/Head/index.d.ts

@@ -1 +1 @@
-export * from "./Head";
+export * from "./Head";

package/Head/index.js

@@ -0,0 +1 @@
+export * from "./Head";

package/Head/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/Head/index.js",
+  "types": "./index.d.ts"
+}