@swan-io/lake 7.1.4 → 7.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "7.1.4",
+  "version": "7.2.1",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/LakeCopyButton.d.ts

@@ -1,9 +1,10 @@
 type Props = {
-    valueToCopy: string;
-    copyText: string;
+    color?: string;
     copiedText: string;
+    copyText: string;
     size?: number;
+    valueToCopy: string;
 };
 export declare const copyButtondefaultSize = 21;
-export declare const LakeCopyButton: ({ valueToCopy, size, copyText, copiedText, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const LakeCopyButton: ({ color, copiedText, copyText, size, valueToCopy, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/LakeCopyButton.js

@@ -5,12 +5,12 @@ import { Icon } from "./Icon";
 import { LakeTooltip } from "./LakeTooltip";
 import { Pressable } from "./Pressable";
 export const copyButtondefaultSize = 21;
-export const LakeCopyButton = ({ valueToCopy, size = copyButtondefaultSize, copyText, copiedText, }) => {
+export const LakeCopyButton = ({ color, copiedText, copyText, size = copyButtondefaultSize, valueToCopy, }) => {
     const [visibleState, setVisibleState] = useState("copy");
     return (_jsx(LakeTooltip, { describedBy: "copy", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyText : copiedText, children: _jsx(Pressable, { onPress: event => {
                 event.stopPropagation();
                 event.preventDefault();
                 Clipboard.setString(valueToCopy);
                 setVisibleState("copied");
-            }, children: _jsx(Icon, { size: size, name: "copy-regular" }) }) }));
+            }, children: _jsx(Icon, { color: color, size: size, name: "copy-regular" }) }) }));
 };

package/src/components/LakeTooltip.d.ts

@@ -21,5 +21,6 @@ export type TooltipRef = {
 export declare const LakeTooltip: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<TooltipRef>>;
 export declare const InformationTooltip: import("react").ForwardRefExoticComponent<{
     text: string;
+    icon?: "lake-building-bank" | "lake-calendar-arrow-swap" | "lake-call" | "lake-card" | "lake-card-add" | "lake-card-filled" | "lake-card-one-off" | "lake-card-physical" | "lake-card-recurring" | "lake-card-single-use" | "lake-card-virtual" | "lake-check" | "lake-chevron-double" | "lake-clipboard-bullet" | "lake-clock" | "lake-clock-arrow-swap" | "lake-close" | "lake-compass" | "lake-currencies" | "lake-delivery-grouped" | "lake-delivery-individual" | "lake-denied" | "lake-document-csv" | "lake-document-jpg" | "lake-document-pdf" | "lake-document-png" | "lake-document-xls" | "lake-email" | "lake-eraser" | "lake-error" | "lake-face-id" | "lake-fingerprint" | "lake-id-card" | "lake-inbox-empty" | "lake-key" | "lake-lock-closed" | "lake-menu" | "lake-people" | "lake-person-arrow-swap" | "lake-person-support" | "lake-phone" | "lake-receipt" | "lake-settings" | "lake-shield" | "lake-signature" | "lake-transfer" | "lake-warning" | "lake-world-map" | "add-circle-filled" | "add-circle-regular" | "add-filled" | "approvals-app-filled" | "apps-list-filled" | "apps-list-regular" | "arrow-counterclockwise-filled" | "arrow-clockwise-filled" | "arrow-down-filled" | "arrow-down-regular" | "arrow-download-filled" | "arrow-left-filled" | "arrow-left-regular" | "arrow-right-filled" | "arrow-right-regular" | "arrow-swap-filled" | "arrow-swap-regular" | "arrow-up-filled" | "arrow-up-regular" | "arrow-upload-filled" | "arrow-upload-regular" | "beaker-filled" | "beaker-regular" | "board-filled" | "board-regular" | "box-regular" | "building-bank-filled" | "building-bank-regular" | "building-filled" | "building-multiple-regular" | "building-regular" | "building-shop-regular" | "calendar-ltr-regular" | "cart-regular" | "chat-help-filled" | "chat-help-regular" | "check-filled" | "check-regular" | "checkmark-circle-regular" | "checkmark-filled" | "checkmark-starburst-regular" | "checkmark-starburst-filled" | "chevron-down-filled" | "chevron-left-filled" | "chevron-right-filled" | "chevron-up-down-regular" | "chevron-up-filled" | "clipboard-search-regular" | "clock-filled" | "clock-regular" | "cloud-sync-filled" | "cloud-sync-regular" | "code-filled" | "code-regular" | "color-regular" | "comment-note-regular" | "copy-filled" | "copy-regular" | "cursor-click-regular" | "database-filled" | "database-regular" | "delete-filled" | "delete-regular" | "desktop-regular" | "device-meeting-room-regular" | "dismiss-circle-regular" | "dismiss-filled" | "dismiss-regular" | "document-regular" | "earth-regular" | "edit-filled" | "edit-regular" | "error-circle-filled" | "error-circle-regular" | "eye-filled" | "eye-off-filled" | "eye-regular" | "eye-off-regular" | "filter-filled" | "flag-filled" | "flag-regular" | "flash-filled" | "flash-regular" | "form-new-filled" | "form-new-regular" | "hand-right-regular" | "image-add-filled" | "image-add-regular" | "image-filled" | "image-regular" | "info-filled" | "info-regular" | "key-regular" | "link-filled" | "live-filled" | "live-regular" | "lock-closed-filled" | "lock-closed-regular" | "lock-open-filled" | "lock-open-regular" | "mail-filled" | "mail-regular" | "money-calculator-regular" | "money-calculator-filled" | "money-regular" | "money-filled" | "more-horizontal-filled" | "more-vertical-filled" | "open-filled" | "open-regular" | "options-regular" | "paint-brush-filled" | "paint-brush-regular" | "panel-left-filled" | "panel-left-regular" | "panel-left-contract-filled" | "panel-left-contract-regular" | "panel-left-expand-filled" | "panel-left-expand-regular" | "pause-regular" | "payment-filled" | "payment-regular" | "people-add-regular" | "people-community-filled" | "people-community-regular" | "people-filled" | "people-regular" | "people-team-regular" | "person-accounts-filled" | "person-accounts-regular" | "person-add-regular" | "person-call-filled" | "person-call-regular" | "person-filled" | "person-lock-regular" | "person-regular" | "phone-filled" | "phone-regular" | "pin-regular" | "play-filled" | "play-regular" | "preview-link-filled" | "qr-code-regular" | "question-circle-regular" | "receipt-money-filled" | "receipt-money-regular" | "rocket-regular" | "search-filled" | "send-filled" | "send-regular" | "settings-filled" | "settings-regular" | "shield-checkmark-filled" | "shield-checkmark-regular" | "shield-error-regular" | "shield-regular" | "sign-out-regular" | "signature-filled" | "signature-regular" | "subtract-circle-filled" | "subtract-circle-regular" | "target-arrow-regular" | "task-list-square-ltr-filled" | "task-list-square-ltr-regular" | "warning-filled" | "warning-regular" | "window-dev-tools-filled" | "window-dev-tools-regular" | undefined;
 } & import("react").RefAttributes<TooltipRef>>;
 export {};

package/src/components/LakeTooltip.js

@@ -14,6 +14,9 @@ import { Portal } from "./Portal";
 import { Polygon, Svg } from "./Svg";
 const { matches: canHover } = window.matchMedia("(hover: hover)");
 const styles = StyleSheet.create({
+    root: {
+        zIndex: 1000,
+    },
     base: {
         position: "absolute",
         pointerEvents: "none",
@@ -110,7 +113,7 @@ const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenc
     useEffect(() => {
         return () => clearTimeout(timeoutRef.current);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(View, { ref: referenceRef, style: containerStyle, children: children }), isNotNullish(rootElement) && position.isSome() && !disabled && (_jsx(Portal, { container: rootElement, children: _jsx(View, { style: position.get().rootStyle, children: _jsxs(View, { role: "tooltip", "aria-describedby": describedBy, style: [styles.base, position.get().style], children: [position.get().verticalPosition === "bottom" ? (_jsx(Box, { direction: "row", justifyContent: match(position.get().horizontalPosition)
+    return (_jsxs(_Fragment, { children: [_jsx(View, { ref: referenceRef, style: containerStyle, children: children }), isNotNullish(rootElement) && position.isSome() && !disabled && (_jsx(Portal, { container: rootElement, children: _jsx(View, { style: [position.get().rootStyle, styles.root], children: _jsxs(View, { role: "tooltip", "aria-describedby": describedBy, style: [styles.base, position.get().style], children: [position.get().verticalPosition === "bottom" ? (_jsx(Box, { direction: "row", justifyContent: match(position.get().horizontalPosition)
                                     .with("left", () => "start")
                                     .with("center", () => "center")
                                     .with("right", () => "end")
@@ -120,4 +123,4 @@ const Tooltip = memo(forwardRef(({ children, content, describedBy, matchReferenc
                                     .with("right", () => "end")
                                     .exhaustive(), style: [styles.arrowBar, styles.arrowBarBottom], children: _jsx(Svg, { width: 16, height: 8, viewBox: "0 0 16 8", children: _jsx(Polygon, { points: "8 8 16 0 0 0", fill: hideArrow ? "transparent" : colors.gray[900] }) }) })) : null] }) }) }))] }));
 }));
-export const InformationTooltip = forwardRef(({ text }, forwardedRef) => (_jsx(LakeTooltip, { ref: forwardedRef, describedBy: "copy", placement: "right", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: "info-regular", size: 24, color: colors.gray[900] }) }) })));
+export const InformationTooltip = forwardRef(({ text, icon = "info-regular" }, forwardedRef) => (_jsx(LakeTooltip, { ref: forwardedRef, describedBy: "copy", placement: "right", togglableOnFocus: true, width: 300, content: text, children: _jsx(View, { style: styles.info, children: _jsx(Icon, { name: icon, size: 24, color: colors.gray[900] }) }) })));

package/src/components/Tick.d.ts

@@ -0,0 +1,8 @@
+import { ColorValue, StyleProp, ViewStyle } from "react-native";
+type Props = {
+    style?: StyleProp<ViewStyle>;
+    color: ColorValue;
+    size?: "small" | "medium" | "large";
+};
+export declare const Tick: ({ color, style, size }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/Tick.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { View } from "react-native";
+import { match } from "ts-pattern";
+import { radii, spacings } from "../constants/design";
+export const Tick = ({ color, style, size = "medium" }) => (_jsx(View, { style: [
+        {
+            backgroundColor: color,
+            ...match(size)
+                .with("small", () => ({
+                width: spacings[8],
+                height: spacings[8],
+                borderRadius: radii[4],
+            }))
+                .with("large", () => ({
+                width: spacings[16],
+                height: spacings[16],
+                borderRadius: radii[8],
+            }))
+                .otherwise(() => ({
+                width: spacings[12],
+                height: spacings[12],
+                borderRadius: radii[6],
+            })),
+        },
+        style,
+    ] }));

package/src/components/ToastStack.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { t } from "@swan-io/shared-business/src/utils/i18n";
 import { memo, useEffect, useRef, useState } from "react";
-import { StyleSheet, View } from "react-native";
+import { Clipboard, StyleSheet, View } from "react-native";
 import { match } from "ts-pattern";
 import { animations, colors, shadows } from "../constants/design";
 import { hideToast, useToasts } from "../state/toasts";
-import { isNullish } from "../utils/nullish";
+import { isNotNullish, isNotNullishOrEmpty, isNullish } from "../utils/nullish";
+import { isCombinedError } from "../utils/urql";
 import { Box } from "./Box";
 import { Icon } from "./Icon";
 import { LakeText } from "./LakeText";
+import { LakeTooltip } from "./LakeTooltip";
 import { Portal } from "./Portal";
 import { Pressable } from "./Pressable";
 import { Space } from "./Space";
@@ -52,9 +55,20 @@ const styles = StyleSheet.create({
         height: 2,
         transformOrigin: "left",
     },
+    copyTooltip: {
+        alignSelf: "flex-start",
+    },
+    copyButton: {
+        alignItems: "center",
+        flexDirection: "row",
+        flexGrow: 1,
+        flexShrink: 1,
+    },
 });
-const Toast = memo(({ variant, uid, title, description, progress, onClose }) => {
+const Toast = memo(({ variant, uid, title, description, error, progress, onClose }) => {
     const progressBarRef = useRef(null);
+    const [visibleState, setVisibleState] = useState("copy");
+    const hasDescription = isNotNullishOrEmpty(description);
     const colorVariation = match(variant)
         .returnType()
         .with("success", () => "positive")
@@ -85,7 +99,15 @@ const Toast = memo(({ variant, uid, title, description, 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 })] }), description != null && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(LakeText, { variant: "smallRegular", color: colors.gray[700], children: description })] }))] }), _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] }] })] }))] }) }));
+                                    .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"
+                                        ? 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 : "");
+                                            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] }] })] }))] }) }));
 });
 export const ToastStack = () => {
     const toasts = useToasts();
@@ -102,5 +124,5 @@ export const ToastStack = () => {
     if (rootElement == null) {
         return null;
     }
-    return (_jsx(Portal, { container: rootElement, children: _jsx(TransitionGroupView, { style: styles.list, enter: animations.fadeAndSlideInFromRight.enter, leave: animations.fadeAndSlideInFromRight.leave, children: toasts.map(toast => (_jsx(Toast, { uid: toast.uid, variant: toast.variant, progress: toast.progress, title: toast.title, description: toast.description, onClose: hideToast }, toast.uid))) }) }));
+    return (_jsx(Portal, { container: rootElement, children: _jsx(TransitionGroupView, { style: styles.list, enter: animations.fadeAndSlideInFromRight.enter, leave: animations.fadeAndSlideInFromRight.leave, children: toasts.map(toast => (_jsx(Toast, { uid: toast.uid, variant: toast.variant, title: toast.title, description: toast.description, error: toast.error, progress: toast.progress, onClose: hideToast }, toast.uid))) }) }));
 };

package/src/state/toasts.d.ts

@@ -5,6 +5,7 @@ type ToastContent = {
     variant: ToastVariant;
     title: string;
     description?: string;
+    error?: Error;
     autoClose?: boolean;
 };
 type Toast = {
@@ -12,10 +13,11 @@ type Toast = {
     variant: ToastVariant;
     title: string;
     description?: string;
+    error?: Error;
     progress?: Animated.Value;
     timeout?: ControllableTimeout;
 };
 export declare const useToasts: () => Toast[];
 export declare const hideToast: (uid: string) => void;
-export declare const showToast: ({ variant, title, description, autoClose }: ToastContent) => string;
+export declare const showToast: ({ variant, title, description, error, autoClose }: ToastContent) => string;
 export {};

package/src/state/toasts.js

@@ -13,7 +13,7 @@ export const hideToast = (uid) => {
     (_b = toast.progress) === null || _b === void 0 ? void 0 : _b.stopAnimation();
     toasts.set(toasts => toasts.filter(toast => toast.uid !== uid));
 };
-export const showToast = ({ variant, title, description, autoClose }) => {
+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);
     if (toast != null) {
@@ -58,6 +58,6 @@ export const showToast = ({ variant, title, description, autoClose }) => {
             },
         })
         : undefined;
-    toasts.set(toasts => [{ uid, variant, title, description, progress, timeout }, ...toasts]);
+    toasts.set(toasts => [{ uid, variant, title, description, error, progress, timeout }, ...toasts]);
     return uid;
 };

package/src/utils/urql.d.ts

@@ -1,6 +1,7 @@
 import { Result } from "@swan-io/boxed";
 import { Except, SetRequired } from "type-fest";
-import { AnyVariables, OperationResult, UseQueryArgs, UseQueryResponse, UseQueryState } from "urql";
+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">,

package/src/utils/urql.js

@@ -1,6 +1,7 @@
 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;