@swan-io/shared-business 2.7.37 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swan-io/shared-business",
-  "version": "2.7.37",
+  "version": "3.0.0",
   "engines": {
     "node": ">=18.0.0",
     "yarn": "^1.22.0"

package/src/components/ChoicePicker.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+type Props<T> = {
+    items: T[];
+    large?: boolean;
+    renderItem: (value: T) => ReactNode;
+    value?: T;
+    getId?: (item: T) => unknown;
+    onChange: (value: T) => void;
+    disabled?: boolean;
+};
+export declare const ChoicePicker: <T>({ items, getId, large, renderItem, value, disabled, onChange, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/ChoicePicker.js

@@ -0,0 +1,193 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
+import { LakeRadio } from "@swan-io/lake/src/components/LakeRadio";
+import { Pressable } from "@swan-io/lake/src/components/Pressable";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { Tile } from "@swan-io/lake/src/components/Tile";
+import { commonStyles } from "@swan-io/lake/src/constants/commonStyles";
+import { breakpoints, negativeSpacings, spacings } from "@swan-io/lake/src/constants/design";
+import { useResponsive } from "@swan-io/lake/src/hooks/useResponsive";
+import { clampValue } from "@swan-io/lake/src/utils/math";
+import { detectScrollAnimationEnd } from "@swan-io/lake/src/utils/viewport";
+import { useEffect, useRef, useState } from "react";
+import { ScrollView, StyleSheet, View } from "react-native";
+import { match } from "ts-pattern";
+import { t } from "../utils/i18n";
+const styles = StyleSheet.create({
+    root: {
+        alignSelf: "stretch",
+        alignItems: "stretch",
+        flexGrow: 1,
+        overflow: "hidden",
+        marginHorizontal: negativeSpacings[12],
+    },
+    scrollSnap: {
+        scrollSnapType: "x mandatory",
+    },
+    container: {
+        alignSelf: "stretch",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        alignItems: "stretch",
+        justifyContent: "center",
+    },
+    mobileContainer: {
+        flexWrap: "nowrap",
+        justifyContent: "flex-start",
+        transitionProperty: "transform",
+        transitionDuration: "300ms",
+        transitionTimingFunction: "ease-in-out",
+    },
+    item: {
+        flexGrow: 0,
+        flexBasis: "33.333%",
+        maxWidth: 300,
+        padding: spacings[12],
+    },
+    itemAnimation: {
+        transform: "translateZ(0px)",
+        animationKeyframes: {
+            from: {
+                opacity: 0,
+                transform: "translateZ(0px) translateX(50px)",
+            },
+            to: {
+                opacity: 1,
+                transform: "translateZ(0px) translateX(0px)",
+            },
+        },
+        animationDuration: "200ms",
+        animationFillMode: "backwards",
+        animationTimingFunction: "ease-in-out",
+    },
+    itemLarge: {
+        flexBasis: "50%",
+        maxWidth: "none",
+    },
+    itemSmallViewport: {
+        width: "100%",
+        flexBasis: "auto",
+        maxWidth: "none",
+        scrollSnapAlign: "center",
+    },
+    tileContents: {
+        alignItems: "center",
+        alignSelf: "stretch",
+        flexGrow: 1,
+    },
+    tileRenderedContents: {
+        alignItems: "center",
+        alignSelf: "stretch",
+        flexGrow: 1,
+    },
+    leftButton: {
+        position: "absolute",
+        top: "50%",
+        left: negativeSpacings[24],
+        transform: "translateY(-50%)",
+        borderTopLeftRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderWidth: 1,
+        borderLeftWidth: 0,
+    },
+    rightButton: {
+        position: "absolute",
+        top: "50%",
+        right: negativeSpacings[24],
+        transform: "translateY(-50%)",
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0,
+        borderWidth: 1,
+        borderRightWidth: 0,
+    },
+});
+const identity = (x) => x;
+export const ChoicePicker = ({ items, getId = identity, large = false, renderItem, value, disabled = false, onChange, }) => {
+    const containerRef = useRef(null);
+    const { desktop } = useResponsive(breakpoints.medium);
+    const [mobilePosition, setMobilePosition] = useState("start");
+    useEffect(() => {
+        if (desktop) {
+            return;
+        }
+        // auto scroll to selected value on mobile
+        const scrollContainer = containerRef.current;
+        const index = items.findIndex(item => value === item);
+        if (index !== -1 && scrollContainer instanceof HTMLDivElement) {
+            const width = scrollContainer.offsetWidth;
+            scrollContainer.scrollTo({ x: index * width, animated: false });
+        }
+        // if no value is selected, select first item
+        if (value == null && items[0] != null) {
+            onChange(items[0]);
+        }
+        // disable exhaustive-deps because we only want to run this effect only when screen size go from desktop to mobile
+    }, [desktop]); // eslint-disable-line react-hooks/exhaustive-deps
+    const onScroll = () => {
+        // prevent scroll event when we change screen size from mobile to desktop
+        if (desktop) {
+            return;
+        }
+        const scrollContainer = containerRef.current;
+        if (scrollContainer instanceof HTMLDivElement) {
+            const scrollLeft = scrollContainer.scrollLeft;
+            const width = scrollContainer.offsetWidth;
+            const index = clampValue(0, items.length - 1)(Math.round(scrollLeft / width));
+            const item = items[index];
+            if (item != null) {
+                onChange(item);
+            }
+            match(index)
+                .with(0, () => setMobilePosition("start"))
+                .with(items.length - 1, () => setMobilePosition("end"))
+                .otherwise(() => setMobilePosition("middle"));
+        }
+    };
+    const onPressPrevious = () => {
+        const scrollContainer = containerRef.current;
+        if (scrollContainer instanceof HTMLDivElement) {
+            const scrollLeft = scrollContainer.scrollLeft;
+            const width = scrollContainer.offsetWidth;
+            const index = Math.round(scrollLeft / width);
+            const previousIndex = Math.max(0, index - 1);
+            // remove scroll snap during scroll animation to avoid weird behavior on older browsers
+            scrollContainer.style.scrollSnapType = "none";
+            containerRef.current?.scrollTo({ x: previousIndex * width, animated: true });
+            detectScrollAnimationEnd(scrollContainer).onResolve(() => {
+                // set back scroll snap
+                // @ts-expect-error
+                scrollContainer.style.scrollSnapType = null;
+            });
+        }
+    };
+    const onPressNext = () => {
+        const scrollContainer = containerRef.current;
+        if (scrollContainer instanceof HTMLDivElement) {
+            const scrollLeft = scrollContainer.scrollLeft;
+            const width = scrollContainer.offsetWidth;
+            const index = Math.round(scrollLeft / width);
+            const nextIndex = Math.min(items.length - 1, index + 1);
+            // remove scroll snap during scroll animation to avoid weird behavior on older browsers
+            scrollContainer.style.scrollSnapType = "none";
+            containerRef.current?.scrollTo({ x: nextIndex * width, animated: true });
+            detectScrollAnimationEnd(scrollContainer).onResolve(() => {
+                // set back scroll snap
+                // @ts-expect-error
+                scrollContainer.style.scrollSnapType = null;
+            });
+        }
+    };
+    return (_jsxs(View, { children: [_jsx(View, { style: styles.root, children: _jsx(ScrollView, { ref: containerRef, horizontal: !desktop, onScroll: onScroll, scrollEventThrottle: 200, style: styles.scrollSnap, contentContainerStyle: [
+                        styles.container,
+                        !desktop && styles.mobileContainer,
+                        !desktop && { width: `${items.length * 100}%` },
+                    ], children: items.map((item, index) => (_jsx(Pressable, { disabled: disabled, style: [
+                            styles.item,
+                            disabled && commonStyles.disabled,
+                            desktop && styles.itemAnimation,
+                            desktop && { animationDelay: `${200 + 100 * index}ms` },
+                            large && styles.itemLarge,
+                            !desktop && styles.itemSmallViewport,
+                            !desktop && { width: `${100 / items.length}%` },
+                        ], onPress: () => onChange(item), children: ({ hovered }) => (_jsx(Tile, { hovered: hovered, selected: value != null && getId(item) === getId(value), flexGrow: 1, children: _jsxs(View, { style: styles.tileContents, children: [_jsx(View, { style: styles.tileRenderedContents, children: renderItem(item) }), desktop && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 24 }), _jsx(LakeRadio, { value: value != null && getId(item) === getId(value) })] }))] }) })) }, String(index)))) }) }), !desktop && (_jsx(LakeButton, { icon: "chevron-left-filled", mode: "secondary", forceBackground: true, onPress: onPressPrevious, disabled: mobilePosition === "start" || disabled, style: styles.leftButton, ariaLabel: t("common.previous") })), !desktop && (_jsx(LakeButton, { icon: "chevron-right-filled", mode: "secondary", forceBackground: true, onPress: onPressNext, disabled: mobilePosition === "end" || disabled, style: styles.rightButton, ariaLabel: t("common.next") }))] }));
+};

package/src/components/ConfirmModal.d.ts

@@ -0,0 +1,16 @@
+import { IconName } from "@swan-io/lake/src/components/Icon";
+import { ColorVariants } from "@swan-io/lake/src/constants/design";
+type Props = {
+    visible: boolean;
+    title: string;
+    message?: string;
+    confirmText: string;
+    cancelText?: string;
+    color?: ColorVariants;
+    icon: IconName;
+    loading?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
+export declare const ConfirmModal: ({ visible, title, message, confirmText, cancelText, color, icon, loading, onConfirm, onCancel, }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/ConfirmModal.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box } from "@swan-io/lake/src/components/Box";
+import { LakeButton } from "@swan-io/lake/src/components/LakeButton";
+import { LakeText } from "@swan-io/lake/src/components/LakeText";
+import { Space } from "@swan-io/lake/src/components/Space";
+import { LakeModal } from "@swan-io/shared-business/src/components/LakeModal";
+import { StyleSheet } from "react-native";
+import { t } from "../utils/i18n";
+const styles = StyleSheet.create({
+    confirmButton: {
+        flex: 1,
+    },
+});
+export const ConfirmModal = ({ visible, title, message, confirmText, cancelText, color = "partner", icon, loading, onConfirm, onCancel, }) => {
+    return (_jsxs(LakeModal, { visible: visible, title: title, icon: icon, color: color, children: [message != null && _jsx(LakeText, { children: message }), _jsx(Space, { height: 48 }), _jsxs(Box, { direction: "row", children: [_jsx(LakeButton, { style: styles.confirmButton, mode: "secondary", onPress: onCancel, children: cancelText ?? t("common.cancel") }), _jsx(Space, { width: 24 }), _jsx(LakeButton, { style: styles.confirmButton, color: color, onPress: onConfirm, loading: loading, children: confirmText })] })] }));
+};

package/src/components/DatePicker.d.ts

@@ -0,0 +1,90 @@
+import { Option } from "@swan-io/boxed";
+import { ValidatorResult } from "react-ux-form";
+import { Except } from "type-fest";
+export type MonthNames = readonly [
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string,
+    string
+];
+export type WeekDayNames = readonly [string, string, string, string, string, string, string];
+declare const weekDayIndex: {
+    sunday: number;
+    monday: number;
+    tuesday: number;
+    wednesday: number;
+    thursday: number;
+    friday: number;
+    saturday: number;
+};
+export type DatePickerDate = {
+    day: number;
+    month: number;
+    year: number;
+};
+export type DatePickerRange = {
+    start: Option<DatePickerDate>;
+    end: Option<DatePickerDate>;
+};
+export type DateFormat = "DD/MM/YYYY" | "MM/DD/YYYY";
+export declare const validateDateRangeOrder: (value: {
+    start: string;
+    end: string;
+}, format: DateFormat) => boolean;
+export declare const isTodayOrFutureDate: (date: DatePickerDate) => boolean;
+export declare const isDateInRange: (minDate: Date, maxDate: Date) => (date: DatePickerDate) => boolean;
+export type DatePickerProps = {
+    label: string;
+    value?: string;
+    error?: string;
+    format: DateFormat;
+    firstWeekDay: keyof typeof weekDayIndex;
+    monthNames: MonthNames;
+    weekDayNames: WeekDayNames;
+    isSelectable?: (date: DatePickerDate) => boolean;
+    onChange: (date: string) => void;
+};
+export declare const DatePicker: ({ label, value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+type DatePickerModalProps = Except<DatePickerProps, "error"> & {
+    visible: boolean;
+    cancelLabel: string;
+    confirmLabel: string;
+    validate?: (value: string) => ValidatorResult;
+    onDissmiss: () => void;
+};
+export declare const DatePickerModal: ({ value, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, label, cancelLabel, confirmLabel, validate, onDissmiss, }: DatePickerModalProps) => import("react/jsx-runtime").JSX.Element;
+export type DateRangePickerProps = {
+    value: {
+        start: string;
+        end: string;
+    };
+    error?: string;
+    format: DateFormat;
+    startLabel: string;
+    endLabel: string;
+    firstWeekDay: keyof typeof weekDayIndex;
+    monthNames: MonthNames;
+    weekDayNames: WeekDayNames;
+    isSelectable?: (date: DatePickerDate) => boolean;
+    onChange: (date: {
+        start: string;
+        end: string;
+    }) => void;
+};
+export declare const DateRangePicker: ({ value, error, format, startLabel, endLabel, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, }: DateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+type DateRangePickerModalProps = DateRangePickerProps & {
+    visible: boolean;
+    cancelLabel: string;
+    confirmLabel: string;
+    onDissmiss: () => void;
+};
+export declare const DateRangePickerModal: ({ value, error, format, firstWeekDay, monthNames, weekDayNames, isSelectable, onChange, visible, startLabel, endLabel, cancelLabel, confirmLabel, onDissmiss, }: DateRangePickerModalProps) => import("react/jsx-runtime").JSX.Element;
+export {};