@swan-io/lake 8.18.11 → 8.18.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/lake",
-  "version": "8.18.11",
+  "version": "8.18.12",
   "engines": {
     "node": ">=20.9.0",
     "yarn": "^1.22.0"

package/src/components/Cells.d.ts

@@ -0,0 +1,68 @@
+import { ComponentProps, ReactNode } from "react";
+import { ColorVariants } from "../constants/design";
+import { TextVariant } from "./LakeText";
+import { LakeTooltip } from "./LakeTooltip";
+type Justify = "flex-start" | "center" | "flex-end";
+type SortDirection = "Desc" | "Asc";
+export declare const SimpleHeaderCell: ({ text, sort, justifyContent, onPress, }: {
+    text: string;
+    justifyContent?: Justify;
+    sort?: SortDirection;
+    onPress?: (direction: SortDirection) => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const ColorPatchCell: ({ isHovered, alternativeText, color, }: {
+    isHovered: boolean;
+    alternativeText?: string;
+    color: ColorVariants;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SimpleTitleCell: ({ isHighlighted, text, tooltip, }: {
+    isHighlighted?: boolean;
+    text: string;
+    tooltip?: Omit<ComponentProps<typeof LakeTooltip>, "children">;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const SimpleRegularTextCell: ({ variant, text, textAlign, color, }: {
+    variant?: TextVariant;
+    text: string;
+    textAlign?: "left" | "center" | "right";
+    color?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CopyableRegularTextCell: ({ variant, text, textToCopy, copyWording, copiedWording, tooltip, }: {
+    variant?: TextVariant;
+    text: string;
+    textToCopy?: string;
+    copyWording: string;
+    copiedWording: string;
+    tooltip?: Omit<ComponentProps<typeof LakeTooltip>, "children">;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const BalanceCell: ({ value, currency, originalValue, formatCurrency, textAlign, variant, }: {
+    value: number;
+    currency: string;
+    originalValue?: {
+        value: number;
+        currency: string;
+    };
+    formatCurrency: (value: number, currency: string) => string;
+    textAlign?: "left" | "center" | "right";
+    variant?: TextVariant;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const LinkCell: ({ children, external, onPress, variant, tooltip, buttonPosition, }: {
+    children: ReactNode;
+    onPress: () => void;
+    external?: boolean;
+    variant?: TextVariant;
+    tooltip?: Omit<ComponentProps<typeof LakeTooltip>, "children">;
+    buttonPosition?: "start" | "end";
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const StartAlignedCell: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CenteredCell: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const EndAlignedCell: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const CellAction: ({ children }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/Cells.js

@@ -0,0 +1,164 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { match } from "ts-pattern";
+import { visuallyHiddenStyle } from "../constants/commonStyles";
+import { colors, spacings } from "../constants/design";
+import { setClipboardText } from "../utils/clipboard";
+import { isNotNullish, isNullish } from "../utils/nullish";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { LakeText } from "./LakeText";
+import { LakeTooltip } from "./LakeTooltip";
+import { Pressable } from "./Pressable";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    cellContainer: {
+        display: "flex",
+        flexGrow: 1,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    balanceCellContainer: {
+        width: "100%",
+    },
+    cell: {
+        display: "flex",
+        paddingHorizontal: spacings[16],
+        flexGrow: 1,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    disabledCellHeader: {
+        cursor: "text",
+    },
+    icon: {
+        alignSelf: "stretch",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingHorizontal: spacings[4],
+    },
+    iconContainer: {
+        flexDirection: "row",
+        alignSelf: "stretch",
+        alignItems: "stretch",
+        justifyContent: "center",
+    },
+    centeredCell: {
+        justifyContent: "center",
+    },
+    endAlignedCell: {
+        justifyContent: "flex-end",
+    },
+    regularText: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        width: 1,
+        flexGrow: 1,
+        whiteSpace: "nowrap",
+    },
+    mediumText: {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        width: 1,
+        flexGrow: 1,
+        whiteSpace: "nowrap",
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    colorPatch: {
+        flexGrow: 1,
+    },
+    alternativeText: visuallyHiddenStyle,
+    sortIcon: {
+        transitionProperty: "transform",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+    },
+    sortIconReversed: {
+        transform: "rotate(-180deg)",
+    },
+    cellAction: {
+        paddingVertical: spacings[16],
+        paddingHorizontal: spacings[8],
+    },
+    underline: {
+        boxShadow: "inset 0 -2px currentColor",
+    },
+    sortHorizontalBar: {
+        position: "absolute",
+        width: "100%",
+        height: 2,
+        bottom: -10,
+        backgroundColor: colors.current[500],
+        borderBottomColor: colors.current[500],
+    },
+});
+export const SimpleHeaderCell = ({ text, sort, justifyContent = "flex-start", onPress, }) => {
+    const sortActive = isNotNullish(sort) && isNotNullish(onPress);
+    const disabled = isNullish(onPress);
+    return (_jsx(Pressable, { onPress: () => {
+            onPress === null || onPress === void 0 ? void 0 : onPress(match(sort)
+                .returnType()
+                .with("Desc", () => "Asc")
+                .with("Asc", () => "Desc")
+                .otherwise(() => "Desc"));
+        }, disabled: disabled, style: [styles.cellContainer, disabled && styles.disabledCellHeader], role: "columnheader", children: ({ hovered }) => (_jsx(View, { style: [styles.cell, { justifyContent }], children: _jsxs(View, { children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(LakeText, { numberOfLines: 1, variant: "medium", color: sortActive ? colors.current[500] : colors.gray[900], style: {
+                                    textAlign: match(justifyContent)
+                                        .with("flex-start", () => "left")
+                                        .with("center", () => "center")
+                                        .with("flex-end", () => "right")
+                                        .exhaustive(),
+                                }, children: text }), isNotNullish(onPress) ? (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(Box, { style: [styles.sortIcon, sort === "Asc" && styles.sortIconReversed], children: _jsx(Icon, { size: 15, color: sortActive ? colors.current[500] : colors.gray[500], name: sortActive ? "arrow-down-filled" : "chevron-up-down-regular" }) })] })) : null] }), sortActive ? (_jsx(View, { style: styles.sortHorizontalBar })) : hovered ? (_jsx(View, { style: [styles.sortHorizontalBar, { backgroundColor: colors.gray[900] }] })) : null] }) })) }));
+};
+export const ColorPatchCell = ({ isHovered, alternativeText, color, }) => {
+    return isHovered ? (_jsx(View, { style: [styles.colorPatch, { backgroundColor: colors[color].primary }], children: isNotNullish(alternativeText) ? (_jsx(LakeText, { style: styles.alternativeText, children: alternativeText })) : null })) : null;
+};
+export const SimpleTitleCell = ({ isHighlighted = false, text, tooltip, }) => (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { numberOfLines: 1, color: isHighlighted ? colors.current.primary : colors.gray[900], style: styles.regularText, variant: "medium", tooltip: tooltip, children: text }) }));
+export const SimpleRegularTextCell = ({ variant = "regular", text, textAlign = "left", color = colors.gray[900], }) => {
+    return (_jsx(View, { style: styles.cell, children: _jsx(LakeText, { align: textAlign, color: color, style: styles.regularText, variant: variant, children: text }) }));
+};
+export const CopyableRegularTextCell = ({ variant = "regular", text, textToCopy, copyWording, copiedWording, tooltip, }) => {
+    const [visibleState, setVisibleState] = useState("copy");
+    const clipboardText = textToCopy !== null && textToCopy !== void 0 ? textToCopy : text;
+    const onPress = useCallback((event) => {
+        event.preventDefault();
+        setClipboardText(clipboardText);
+        setVisibleState("copied");
+    }, [clipboardText]);
+    return (_jsxs(View, { style: styles.cell, children: [_jsx(LakeTooltip, { placement: "right", onHide: () => setVisibleState("copy"), togglableOnFocus: true, content: visibleState === "copy" ? copyWording : copiedWording, containerStyle: styles.iconContainer, children: _jsx(Pressable, { role: "button", "aria-label": copyWording, onPress: onPress, style: ({ hovered }) => [styles.icon, hovered && styles.underline], children: ({ hovered }) => (_jsx(Icon, { name: hovered ? "copy-filled" : "copy-regular", color: "currentColor", size: 14 })) }) }), _jsx(Space, { width: 4 }), _jsx(LakeText, { tooltip: tooltip, color: colors.gray[900], style: styles.regularText, variant: variant, children: text })] }));
+};
+// TODO: handle `+` sign properly
+export const BalanceCell = ({ value, currency, originalValue, formatCurrency, textAlign = "right", variant = "medium", }) => {
+    return (_jsxs(View, { style: styles.balanceCellContainer, children: [_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { align: textAlign, color: colors.gray[900], variant: variant, style: [
+                        styles.mediumText,
+                        {
+                            justifyContent: match(textAlign)
+                                .with("left", () => "flex-start")
+                                .with("center", () => "center")
+                                .with("right", () => "flex-end")
+                                .exhaustive(),
+                        },
+                        value > 0 && { color: colors.positive.primary },
+                        value < 0 && { color: colors.negative.primary },
+                    ], children: [value > 0 && "+", formatCurrency(value, currency)] }) }), isNotNullish(originalValue) && originalValue.currency !== currency && (_jsx(View, { style: styles.cell, children: _jsxs(LakeText, { style: styles.mediumText, align: textAlign, color: colors.gray[500], variant: "smallRegular", children: [originalValue.value > 0 && "+", formatCurrency(originalValue.value, originalValue.currency)] }) }))] }));
+};
+export const LinkCell = ({ children, external = false, onPress, variant = "medium", tooltip, buttonPosition = "start", }) => {
+    const ArrowButton = () => (_jsx(Pressable, { style: ({ hovered }) => [styles.icon, hovered && styles.underline], onPress: event => {
+            event.preventDefault();
+            onPress();
+        }, children: _jsx(Icon, { size: 14, name: external ? "open-regular" : "arrow-right-filled" }) }));
+    return (_jsxs(View, { style: styles.cell, children: [buttonPosition === "start" && (_jsxs(_Fragment, { children: [_jsx(ArrowButton, {}), _jsx(Space, { width: 8 })] })), _jsx(LakeText, { color: colors.gray[900], variant: variant, style: styles.mediumText, tooltip: tooltip, children: children }), buttonPosition === "end" && (_jsxs(_Fragment, { children: [_jsx(Space, { width: 8 }), _jsx(ArrowButton, {})] }))] }));
+};
+export const StartAlignedCell = ({ children }) => {
+    return _jsx(View, { style: styles.cell, children: children });
+};
+export const CenteredCell = ({ children }) => {
+    return _jsx(View, { style: [styles.cell, styles.centeredCell], children: children });
+};
+export const EndAlignedCell = ({ children }) => {
+    return _jsx(View, { style: [styles.cell, styles.endAlignedCell], children: children });
+};
+export const CellAction = ({ children }) => {
+    return _jsx(View, { style: styles.cellAction, children: children });
+};

package/src/components/EmptyView.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import { IconName } from "./Icon";
+import { SpacingValue } from "./Space";
+type Props = {
+    icon: IconName;
+    borderedIcon?: boolean;
+    borderedIconPadding?: SpacingValue | 0;
+    title?: string;
+    subtitle?: ReactNode;
+    children?: ReactNode;
+};
+export declare const EmptyView: ({ icon, borderedIcon, borderedIconPadding, title, subtitle, children, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/EmptyView.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { View } from "@react-three/drei";
+import { StyleSheet } from "react-native";
+import { colors } from "../constants/design";
+import { BorderedIcon } from "./BorderedIcon";
+import { Icon } from "./Icon";
+import { LakeHeading } from "./LakeHeading";
+import { LakeText } from "./LakeText";
+import { Space } from "./Space";
+const styles = StyleSheet.create({
+    emptyList: {
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+    },
+});
+export const EmptyView = ({ icon, borderedIcon = false, borderedIconPadding, title, subtitle, children, }) => (_jsxs(View, { style: styles.emptyList, children: [borderedIcon ? (_jsx(BorderedIcon, { name: icon, padding: borderedIconPadding })) : (_jsx(Icon, { name: icon, size: 96, color: colors.current.primary })), _jsx(Space, { height: 24 }), title != null ? (_jsxs(_Fragment, { children: [_jsx(LakeHeading, { align: "center", level: 3, variant: "h5", children: title }), _jsx(Space, { height: 8 })] })) : null, subtitle != null && _jsx(LakeText, { align: "center", children: subtitle }), children] }));

package/src/components/PlainListView.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from "react";
 import { PressableStateCallbackType, ViewStyle } from "react-native";
-import { ColumnCellConfig, ColumnTitleConfig, LinkConfig } from "./FixedListView";
+import { ColumnCellConfig, ColumnTitleConfig, LinkConfig } from "./VirtualizedList";
 export type ColumnConfig<T, ExtraInfo> = {
     id: string;
     width: number | "grow";
@@ -39,4 +39,11 @@ type Props<T, ExtraInfo> = {
     headerBackgroundColor?: string;
 };
 export declare const PlainListView: <T, ExtraInfo>({ data: originalData, keyExtractor, rowHeight, groupHeaderHeight, headerHeight, columns, smallColumns, extraInfo, onEndReached, onEndReachedThresholdPx, headerStyle, rowStyle, getRowLink, activeRowId, renderEmptyList, onActiveRowChange, groupBy, loading, breakpoint, withoutScroll, stickyOffset, headerBackgroundColor, }: Props<T, ExtraInfo>) => import("react/jsx-runtime").JSX.Element;
+export declare const PlainListViewPlaceholder: ({ count, rowHeight, groupHeaderHeight, headerHeight, marginHorizontal, }: {
+    count: number;
+    rowHeight: number;
+    groupHeaderHeight?: number;
+    headerHeight?: number;
+    marginHorizontal?: string;
+}) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/components/PlainListView.js

@@ -5,10 +5,10 @@ import { commonStyles } from "../constants/commonStyles";
 import { backgroundColor, breakpoints, colors, spacings } from "../constants/design";
 import { useHover } from "../hooks/useHover";
 import { isNotNullish, isNullish } from "../utils/nullish";
-import { PlainListViewPlaceholder, } from "./FixedListView";
 import { LakeHeading } from "./LakeHeading";
 import { ResponsiveContainer } from "./ResponsiveContainer";
 import { ScrollView } from "./ScrollView";
+import { VirtualizedListPlaceholder, } from "./VirtualizedList";
 const INHERIT = "inherit";
 const styles = StyleSheet.create({
     root: {
@@ -216,7 +216,8 @@ export const PlainListView = ({ data: originalData, keyExtractor, rowHeight, gro
                                                     children: (_jsx(Row, { id: key, rowHeight: rowHeight, columns: displayColumns, item: item, index: index, extraInfo: extraInfo, isActive: isActive, isHovered: isHovered, large: large, style: rowStyle, onMouseEnter: setHoveredRow, onMouseLeave: removeHoveredRow })),
                                                 });
                                             })] }, groupName));
-                                }) }), _jsx(View, { children: _jsx(View, { "aria-busy": isLoading, style: styles.loadingPlaceholder, children: isLoading ? (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight, rowVerticalSpacing: 0, paddingHorizontal: 0 })) : null }) }), isEmpty && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { style: [styles.scrollTracker, { height: onEndReachedThresholdPx }], ref: scrollTrackerRef })] })),
+                                }) }), _jsx(View, { children: _jsx(View, { "aria-busy": isLoading, style: styles.loadingPlaceholder, children: isLoading ? (_jsx(PlainListViewPlaceholder, { count: loading.count, rowHeight: rowHeight })) : null }) }), isEmpty && isNotNullish(renderEmptyList) && !isLoading ? (_jsx(View, { style: styles.emptyListContainer, children: renderEmptyList() })) : null, _jsx(View, { style: [styles.scrollTracker, { height: onEndReachedThresholdPx }], ref: scrollTrackerRef })] })),
                 }) }));
         } }));
 };
+export const PlainListViewPlaceholder = VirtualizedListPlaceholder;

package/src/components/VirtualizedList.d.ts

@@ -27,7 +27,6 @@ export type VirtualizedListProps<T, ExtraInfo> = {
     variant: "default" | "accented";
     data: T[];
     keyExtractor: (item: T, index: number) => string;
-    highlightedRowId?: string;
     headerHeight: number;
     rowHeight: number;
     extraInfo: ExtraInfo;