@swan-io/lake 7.4.5 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "7.4.5",
+  "version": "8.0.0",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"
@@ -30,6 +30,7 @@
     "@react-three/fiber": "^8.16.1",
     "@swan-io/boxed": "^2.1.1",
     "@swan-io/chicane": "^2.0.0",
+    "@swan-io/graphql-client": "^0.1.0",
     "@swan-io/use-form": "^2.0.0",
     "dayjs": "^1.11.10",
     "polished": "^4.3.1",
@@ -42,7 +43,6 @@
     "three": "^0.163.0",
     "ts-dedent": "^2.2.0",
     "ts-pattern": "^5.1.0",
-    "urql": "^4.0.7",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

package/src/components/ToastStack.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Array, Option } from "@swan-io/boxed";
+import { ClientError } from "@swan-io/graphql-client";
 import { t } from "@swan-io/shared-business/src/utils/i18n";
 import { memo, useEffect, useRef, useState } from "react";
 import { Clipboard, StyleSheet, View } from "react-native";
-import { match } from "ts-pattern";
+import { P, match } from "ts-pattern";
 import { animations, colors, shadows } from "../constants/design";
-import { hideToast, useToasts } from "../state/toasts";
-import { isNotNullish, isNotNullishOrEmpty, isNullish } from "../utils/nullish";
-import { isCombinedError } from "../utils/urql";
+import { getErrorToRequestId, hideToast, useToasts } from "../state/toasts";
+import { isNotNullishOrEmpty, isNullish } from "../utils/nullish";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
@@ -69,6 +70,19 @@ const Toast = memo(({ variant, uid, title, description, error, progress, onClose
     const progressBarRef = useRef(null);
     const [visibleState, setVisibleState] = useState("copy");
     const hasDescription = isNotNullishOrEmpty(description);
+    const [requestId] = useState(() => {
+        if (error == undefined) {
+            return Option.None();
+        }
+        return Array.findMap(ClientError.toArray(error), error => {
+            if (error instanceof Error) {
+                return Option.fromNullable(getErrorToRequestId().get(error));
+            }
+            else {
+                return Option.None();
+            }
+        });
+    });
     const colorVariation = match(variant)
         .returnType()
         .with("success", () => "positive")
@@ -99,15 +113,17 @@ const Toast = memo(({ variant, uid, title, description, error, progress, onClose
                                     .with("error", () => (_jsx(Icon, { name: "dismiss-circle-regular", size: 20, color: colors[colorVariation][700] })))
                                     .with("info", () => (_jsx(Icon, { name: "info-regular", size: 20, color: colors[colorVariation][700] })))
                                     .with("warning", () => (_jsx(Icon, { name: "warning-regular", size: 20, color: colors[colorVariation][700] })))
-                                    .exhaustive(), _jsx(Space, { width: 12 }), _jsx(LakeText, { variant: "regular", color: colors[colorVariation][700], children: title })] }), hasDescription && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[700], children: description })] })), isCombinedError(error) && isNotNullish(error.requestId) ? (_jsxs(_Fragment, { children: [_jsx(Space, { height: hasDescription ? 4 : 8 }), _jsx(LakeTooltip, { describedBy: "copy", onHide: () => setVisibleState("copy"), togglableOnFocus: true, placement: "center", containerStyle: styles.copyTooltip, content: visibleState === "copy"
+                                    .exhaustive(), _jsx(Space, { width: 12 }), _jsx(LakeText, { variant: "regular", color: colors[colorVariation][700], children: title })] }), hasDescription && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[700], children: description })] })), match(requestId)
+                            .with(Option.P.None, () => null)
+                            .with(Option.P.Some(P.select()), requestId => (_jsxs(_Fragment, { children: [_jsx(Space, { height: hasDescription ? 4 : 8 }), _jsx(LakeTooltip, { describedBy: "copy", onHide: () => setVisibleState("copy"), togglableOnFocus: true, placement: "center", containerStyle: styles.copyTooltip, content: visibleState === "copy"
                                         ? t("copyButton.copyTooltip")
                                         : t("copyButton.copiedTooltip"), children: _jsxs(Pressable, { style: styles.copyButton, onPress: event => {
-                                            var _a;
                                             event.stopPropagation();
                                             event.preventDefault();
-                                            Clipboard.setString((_a = error.requestId) !== null && _a !== void 0 ? _a : "");
+                                            Clipboard.setString(requestId !== null && requestId !== void 0 ? requestId : "");
                                             setVisibleState("copied");
-                                        }, children: [_jsx(Icon, { color: colors.gray[700], size: 14, name: "copy-regular" }), _jsx(Space, { width: 4 }), _jsxs(LakeText, { numberOfLines: 1, variant: "smallRegular", color: colors.gray[700], children: ["ID: ", error.requestId] })] }) })] })) : null] }), _jsx(Pressable, { onPress: () => onClose(uid), style: styles.closeButton, children: _jsx(Icon, { name: "lake-close", size: 24, color: colors.gray[500] }) }), progress != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(View, { ref: progressBarRef, role: "progressbar", style: [styles.progressBar, { backgroundColor: colors[colorVariation][500] }] })] }))] }) }));
+                                        }, children: [_jsx(Icon, { color: colors.gray[700], size: 14, name: "copy-regular" }), _jsx(Space, { width: 4 }), _jsxs(LakeText, { numberOfLines: 1, variant: "smallRegular", color: colors.gray[700], children: ["ID: ", requestId] })] }) })] })))
+                            .exhaustive()] }), _jsx(Pressable, { onPress: () => onClose(uid), style: styles.closeButton, children: _jsx(Icon, { name: "lake-close", size: 24, color: colors.gray[500] }) }), progress != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(View, { ref: progressBarRef, role: "progressbar", style: [styles.progressBar, { backgroundColor: colors[colorVariation][500] }] })] }))] }) }));
 });
 export const ToastStack = () => {
     const toasts = useToasts();

package/src/state/toasts.d.ts

@@ -19,5 +19,7 @@ type Toast = {
 };
 export declare const useToasts: () => Toast[];
 export declare const hideToast: (uid: string) => void;
+export declare const registerErrorToRequestId: (value: WeakMap<WeakKey, string>) => void;
+export declare const getErrorToRequestId: () => WeakMap<WeakKey, string>;
 export declare const showToast: ({ variant, title, description, error, autoClose }: ToastContent) => string;
 export {};

package/src/state/toasts.js

@@ -13,6 +13,13 @@ export const hideToast = (uid) => {
     (_b = toast.progress) === null || _b === void 0 ? void 0 : _b.stopAnimation();
     toasts.set(toasts => toasts.filter(toast => toast.uid !== uid));
 };
+let errorToRequestId = new WeakMap();
+export const registerErrorToRequestId = (value) => {
+    errorToRequestId = value;
+};
+export const getErrorToRequestId = () => {
+    return errorToRequestId;
+};
 export const showToast = ({ variant, title, description, error, autoClose }) => {
     const uid = `${variant} - ${title} - ${description !== null && description !== void 0 ? description : ""}`;
     const toast = toasts.get().find(toast => toast.uid === uid);

package/src/utils/gql.d.ts

@@ -0,0 +1,8 @@
+import { Result } from "@swan-io/boxed";
+export declare const filterRejectionsToResult: <T extends {
+    __typename: string;
+}>(input: T) => Result<Exclude<T, {
+    __typename: `${string}Rejection`;
+}>, Extract<T, {
+    __typename: `${string}Rejection`;
+}>>;

package/src/utils/gql.js

@@ -0,0 +1,2 @@
+import { Result } from "@swan-io/boxed";
+export const filterRejectionsToResult = (input) => (input.__typename.endsWith("Rejection") ? Result.Error(input) : Result.Ok(input));

package/src/hooks/useUrqlMutation.d.ts

@@ -1,3 +0,0 @@
-import { AsyncData, Future, Result } from "@swan-io/boxed";
-import { AnyVariables, CombinedError, OperationContext, TypedDocumentNode } from "urql";
-export declare const useUrqlMutation: <Data, Variables extends AnyVariables>(query: TypedDocumentNode<Data, Variables>) => readonly [AsyncData<Result<Data, CombinedError>>, (variables: Variables, context?: Partial<OperationContext>) => Future<Result<Data, CombinedError>>];

package/src/hooks/useUrqlMutation.js

@@ -1,30 +0,0 @@
-import { AsyncData, Future, Result } from "@swan-io/boxed";
-import { useCallback, useMemo } from "react";
-import { CombinedError, useMutation, } from "urql";
-import { isNotNullish, isNullish } from "../utils/nullish";
-const toResult = ({ data, error, }) => {
-    if (isNotNullish(error)) {
-        return Result.Error(error);
-    }
-    if (isNullish(data)) {
-        return Result.Error(new CombinedError({ networkError: new Error("No Content") }));
-    }
-    return Result.Ok(data);
-};
-export const useUrqlMutation = (query) => {
-    const [{ fetching, data, error }, execute] = useMutation(query);
-    return [
-        useMemo(() => {
-            if (fetching) {
-                return AsyncData.Loading();
-            }
-            if (isNullish(data) && isNullish(error)) {
-                return AsyncData.NotAsked();
-            }
-            return AsyncData.Done(toResult({ data, error }));
-        }, [fetching, data, error]),
-        useCallback((variables, context) => Future.fromPromise(execute(variables, context))
-            .mapError(error => error)
-            .mapOkToResult(toResult), [execute]),
-    ];
-};

package/src/hooks/useUrqlQuery.d.ts

@@ -1,26 +0,0 @@
-import { AsyncData, Future, Result } from "@swan-io/boxed";
-import { DependencyList } from "react";
-import { AnyVariables, CombinedError, DocumentInput, UseQueryArgs } from "urql";
-type Query<Data> = {
-    isForceReloading: boolean;
-    data: AsyncData<Result<Data, CombinedError>>;
-    nextData: AsyncData<Result<Data, CombinedError>>;
-    reload: () => void;
-    refresh: () => void;
-};
-export declare const useUrqlQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList?: DependencyList) => Query<Data>;
-type PaginatedQuery<Data> = {
-    isForceReloading: boolean;
-    data: AsyncData<Result<Data, CombinedError>>;
-    nextData: AsyncData<Result<Data, CombinedError>>;
-    reload: () => void;
-    setAfter: (cursor: string | undefined) => void;
-};
-export declare const useUrqlPaginatedQuery: <Data, Variables extends AnyVariables>(args: UseQueryArgs<Variables, Data>, dependencyList?: DependencyList) => PaginatedQuery<Data>;
-type DeferredQuery<Data, Variables extends AnyVariables> = {
-    data: AsyncData<Result<Data, CombinedError>>;
-    query: (args: Variables) => Future<Result<Data, CombinedError>>;
-    reset: () => void;
-};
-export declare const useDeferredUrqlQuery: <Data, Variables extends AnyVariables>(document: DocumentInput<Data, Variables>) => DeferredQuery<Data, Variables>;
-export {};

package/src/hooks/useUrqlQuery.js

@@ -1,105 +0,0 @@
-import { AsyncData, Future, Result } from "@swan-io/boxed";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useClient, useQuery, } from "urql";
-import { isNotNullish, isNullish } from "../utils/nullish";
-import { parseOperationResult } from "../utils/urql";
-const EMPTY_DEPENDENCY_LIST = [];
-export const useUrqlQuery = (args, dependencyList = EMPTY_DEPENDENCY_LIST) => {
-    const hasDependencyList = dependencyList !== EMPTY_DEPENDENCY_LIST;
-    const [isDepsListUpdate, setIsDepsListUpdate] = useState(hasDependencyList);
-    const [isForceReloading, setIsForceReloading] = useState(false);
-    const [{ data, fetching, error }, reexecute] = useQuery({
-        ...args,
-        context: useMemo(() => ({ ...args.context, suspense: false }), [args.context]),
-    });
-    useEffect(() => {
-        if (hasDependencyList) {
-            setIsDepsListUpdate(true);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, dependencyList);
-    useEffect(() => {
-        if (!fetching) {
-            setIsDepsListUpdate(false);
-            setIsForceReloading(false);
-        }
-    }, [fetching]);
-    const reload = useCallback(() => {
-        setIsForceReloading(true);
-        reexecute({ requestPolicy: "network-only" });
-    }, [reexecute]);
-    const refresh = useCallback(() => {
-        reexecute({ requestPolicy: "cache-and-network" });
-    }, [reexecute]);
-    const okResult = useMemo(() => (isNullish(data) ? null : AsyncData.Done(Result.Ok(data))), [data]);
-    const errorResult = useMemo(() => (isNullish(error) ? null : AsyncData.Done(Result.Error(error))), [error]);
-    const initialFetching = isNullish(okResult) && isNullish(errorResult);
-    const shouldResetState = isDepsListUpdate || isForceReloading;
-    if (fetching && (initialFetching || shouldResetState)) {
-        return {
-            isForceReloading,
-            data: AsyncData.Loading(),
-            nextData: AsyncData.Loading(),
-            reload,
-            refresh,
-        };
-    }
-    if (isNotNullish(errorResult)) {
-        return {
-            isForceReloading,
-            data: errorResult,
-            nextData: errorResult,
-            reload,
-            refresh,
-        };
-    }
-    if (isNotNullish(okResult)) {
-        return {
-            isForceReloading,
-            data: okResult,
-            nextData: fetching ? AsyncData.Loading() : okResult,
-            reload,
-            refresh,
-        };
-    }
-    return {
-        isForceReloading,
-        data: AsyncData.NotAsked(),
-        nextData: AsyncData.NotAsked(),
-        reload,
-        refresh,
-    };
-};
-export const useUrqlPaginatedQuery = (args, dependencyList = EMPTY_DEPENDENCY_LIST) => {
-    const [after, setAfter] = useState();
-    const { isForceReloading, data, nextData, reload: baseReload, } = useUrqlQuery({ ...args, variables: { ...args.variables, after } }, dependencyList);
-    useEffect(() => {
-        setAfter(undefined);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, dependencyList);
-    const reload = useCallback(() => {
-        setAfter(undefined);
-        baseReload();
-    }, [baseReload]);
-    return {
-        isForceReloading,
-        data,
-        nextData,
-        reload,
-        setAfter,
-    };
-};
-export const useDeferredUrqlQuery = (document) => {
-    const [data, setData] = useState(AsyncData.NotAsked());
-    const client = useClient();
-    const query = useCallback((args) => {
-        setData(AsyncData.Loading());
-        return Future.fromPromise(client.query(document, args).toPromise().then(parseOperationResult)).tap(data => {
-            setData(AsyncData.Done(data));
-        });
-    }, [client, document]);
-    const reset = useCallback(() => {
-        setData(AsyncData.NotAsked());
-    }, []);
-    return { data, query, reset };
-};

package/src/utils/urql.d.ts

@@ -1,21 +0,0 @@
-import { Result } from "@swan-io/boxed";
-import { Except, SetRequired } from "type-fest";
-import { AnyVariables, CombinedError, OperationResult, UseQueryArgs, UseQueryResponse, UseQueryState } from "urql";
-export declare const isCombinedError: (error: unknown) => error is CombinedError;
-export declare const parseOperationResult: <T>({ error, data }: OperationResult<T>) => T;
-export declare const useQueryWithErrorBoundary: <Data = unknown, Variables extends AnyVariables = AnyVariables>(options: UseQueryArgs<Variables, Data>) => [
-    SetRequired<Except<UseQueryState<Data, Variables>, "fetching" | "error">, "data">,
-    UseQueryResponse[1]
-];
-export declare const filterRejectionsToPromise: <T extends {
-    __typename: string;
-}>(input: T) => Promise<Exclude<T, {
-    __typename: `${string}Rejection`;
-}>>;
-export declare const filterRejectionsToResult: <T extends {
-    __typename: string;
-}>(input: T) => Result<Exclude<T, {
-    __typename: `${string}Rejection`;
-}>, Extract<T, {
-    __typename: `${string}Rejection`;
-}>>;

package/src/utils/urql.js

@@ -1,31 +0,0 @@
-import { Result } from "@swan-io/boxed";
-import { CombinedError, useQuery, } from "urql";
-import { isNotNullish, isNullish } from "./nullish";
-export const isCombinedError = (error) => error instanceof CombinedError;
-export const parseOperationResult = ({ error, data }) => {
-    if (isNotNullish(error)) {
-        throw error;
-    }
-    if (isNullish(data)) {
-        throw new CombinedError({
-            networkError: new Error("No Content"),
-        });
-    }
-    return data;
-};
-export const useQueryWithErrorBoundary = (options) => {
-    const [{ fetching, data, error, ...rest }, reexecuteQuery] = useQuery(options);
-    if (isNotNullish(error)) {
-        throw error;
-    }
-    if (isNullish(data)) {
-        throw new CombinedError({
-            networkError: new Error("No Content"),
-        });
-    }
-    return [{ data, ...rest }, reexecuteQuery];
-};
-export const filterRejectionsToPromise = (input) => (input.__typename.endsWith("Rejection")
-    ? Promise.reject(new Error(input.__typename))
-    : Promise.resolve(input));
-export const filterRejectionsToResult = (input) => (input.__typename.endsWith("Rejection") ? Result.Error(input) : Result.Ok(input));