@swan-io/shared-business 12.4.2 → 13.0.0

package/src/components/Filters.d.ts

@@ -1,123 +0,0 @@
-import { ValidatorResult } from "@swan-io/use-form";
-import { Simplify } from "type-fest";
-import { DateFormat } from "../utils/i18n";
-import { DatePickerDate } from "./DatePicker";
-type Item<T> = {
-    label: string;
-    value: T;
-};
-/**
- * @deprecated
- */
-export type FilterCheckboxDef<T> = {
-    type: "checkbox";
-    label: string;
-    items: Item<T>[];
-    width?: number;
-    checkAllLabel?: string;
-};
-/**
- * @deprecated
- */
-export type FilterRadioDef<T> = {
-    type: "radio";
-    label: string;
-    items: Item<T>[];
-    width?: number;
-};
-/**
- * @deprecated
- */
-export type FilterDateDef<Values = unknown> = {
-    type: "date";
-    label: string;
-    cancelText: string;
-    submitText: string;
-    noValueText: string;
-    dateFormat: DateFormat;
-    isSelectable?: (date: DatePickerDate, filters: Values) => boolean;
-    validate?: (value: string, filters: Values) => ValidatorResult;
-};
-/**
- * @deprecated
- */
-export type FilterInputDef = {
-    type: "input";
-    label: string;
-    noValueText: string;
-    placeholder?: string;
-    validate?: (value: string) => ValidatorResult;
-};
-type Filter<T> = FilterCheckboxDef<T> | FilterRadioDef<T> | FilterDateDef | FilterInputDef;
-type ExtractFilterValue<T extends Filter<unknown>> = T extends {
-    type: "checkbox";
-} ? T["items"][number]["value"][] | undefined : T extends {
-    type: "radio";
-} ? T["items"][number]["value"] | undefined : string | undefined;
-type FiltersDefinition = Record<string, Filter<unknown>>;
-/**
- * @deprecated
- */
-export type FiltersState<T extends FiltersDefinition> = Simplify<{
-    [K in keyof T]: Simplify<ExtractFilterValue<T[K]>>;
-}>;
-type FiltersStackProps<Definition extends FiltersDefinition, State extends FiltersState<Definition> = FiltersState<Definition>> = {
-    definition: Definition;
-    filters: State;
-    openedFilters: (keyof Definition)[];
-    onChangeOpened: (value: (keyof Definition)[]) => void;
-    onChangeFilters: (value: State) => void;
-};
-/**
- * @deprecated
- */
-export declare const FiltersStack: <T extends FiltersDefinition>({ filters, openedFilters, definition, onChangeOpened, onChangeFilters, }: FiltersStackProps<T>) => import("react/jsx-runtime").JSX.Element | null;
-/**
- * @deprecated
- */
-export declare const filter: {
-    readonly checkbox: <T>(config: {
-        label: string;
-        items: Item<T>[];
-    }) => FilterCheckboxDef<T>;
-    readonly date: (config: {
-        label: string;
-        isSelectable?: (date: DatePickerDate, filters: unknown) => boolean;
-        validate?: (value: string, filters: unknown) => ValidatorResult;
-    }) => FilterDateDef;
-    readonly input: (config: {
-        label: string;
-        placeholder?: string;
-        validate?: (value: string) => ValidatorResult;
-    }) => FilterInputDef;
-    readonly radio: <T>(config: {
-        label: string;
-        items: Item<T>[];
-    }) => FilterRadioDef<T>;
-};
-/**
- * @deprecated
- */
-export declare const useFiltersProps: <Definition extends FiltersDefinition, Filters extends Record<string, unknown>>({ available, filters, filtersDefinition, }: {
-    available?: ReadonlyArray<keyof Filters>;
-    filters: Filters;
-    filtersDefinition: Definition;
-}) => {
-    chooser: {
-        availableFilters: {
-            name: keyof Definition;
-            label: string;
-        }[];
-        filters: Filters;
-        label: string;
-        onAddFilter: (filter: keyof Filters) => void;
-        openFilters: (keyof Filters)[];
-    };
-    stack: {
-        definition: Definition;
-        filters: Filters;
-        openedFilters: (keyof Filters)[];
-        onChangeOpened: import("react").Dispatch<import("react").SetStateAction<(keyof Filters)[]>>;
-    };
-};
-export {};

package/src/components/Filters.js

@@ -1,280 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Array, Dict, Option } from "@swan-io/boxed";
-import { Box } from "@swan-io/lake/src/components/Box";
-import { FlatList } from "@swan-io/lake/src/components/FlatList";
-import { Icon } from "@swan-io/lake/src/components/Icon";
-import { LakeCheckbox } from "@swan-io/lake/src/components/LakeCheckbox";
-import { LakeLabel } from "@swan-io/lake/src/components/LakeLabel";
-import { LakeRadio } from "@swan-io/lake/src/components/LakeRadio";
-import { LakeTextInput } from "@swan-io/lake/src/components/LakeTextInput";
-import { Popover } from "@swan-io/lake/src/components/Popover";
-import { Space } from "@swan-io/lake/src/components/Space";
-import { Stack } from "@swan-io/lake/src/components/Stack";
-import { Tag } from "@swan-io/lake/src/components/Tag";
-import { colors, shadows } from "@swan-io/lake/src/constants/design";
-import { useDisclosure } from "@swan-io/lake/src/hooks/useDisclosure";
-import { usePreviousValue } from "@swan-io/lake/src/hooks/usePreviousValue";
-import { isNotNullish, isNullish } from "@swan-io/lake/src/utils/nullish";
-import dayjs from "dayjs";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { P, match } from "ts-pattern";
-import { locale, t } from "../utils/i18n";
-import { DatePickerModal } from "./DatePicker";
-const styles = StyleSheet.create({
-    container: {
-        paddingRight: 12,
-        paddingBottom: 8,
-    },
-    shadowed: {
-        position: "absolute",
-        opacity: 0,
-        width: "100%",
-        height: "100%",
-        borderRadius: 4,
-        boxShadow: shadows.tile,
-        transitionDuration: "150ms",
-        transitionProperty: "opacity",
-    },
-    hovered: {
-        opacity: 1,
-    },
-    dropdown: {
-        maxHeight: 400,
-        minWidth: 200,
-    },
-    itemHovered: {
-        backgroundColor: colors.gray[50],
-    },
-    content: {
-        paddingVertical: 12,
-    },
-    inputContent: {
-        paddingHorizontal: 24,
-        paddingTop: 24,
-        paddingBottom: 16,
-    },
-    radio: {
-        display: "flex",
-        flexDirection: "row",
-        alignItems: "center",
-        height: 32,
-        paddingHorizontal: 24,
-    },
-    itemLabel: {
-        textOverflow: "ellipsis",
-        overflow: "hidden",
-        whiteSpace: "nowrap",
-    },
-    input: {
-        width: 250,
-    },
-    value: {
-        maxWidth: 130,
-        whiteSpace: "nowrap",
-    },
-});
-const FilterTag = ({ ref, onPress, onPressRemove, label, value = "", isActive }) => (_jsx(Pressable, { ref: ref, onPress: onPress, children: ({ hovered }) => (_jsxs(_Fragment, { children: [_jsx(View, { style: [styles.shadowed, hovered && styles.hovered] }), _jsx(Tag, { label: label, color: "current", onPressRemove: onPressRemove, children: _jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(Text, { numberOfLines: 1, style: styles.value, children: value }), _jsx(Space, { width: 4 }), _jsx(Icon, { color: colors.current.primary, name: isActive ? "chevron-up-filled" : "chevron-down-filled", size: 16 })] }) })] })) }));
-const FilterRadio = ({ label, items, width, value, onValueChange, onPressRemove, autoOpen = false, }) => {
-    const inputRef = useRef(null);
-    const [visible, { close, toggle }] = useDisclosure(autoOpen);
-    const currentValue = useMemo(() => items.find(i => i.value === value), [items, value]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: currentValue === null || currentValue === void 0 ? void 0 : currentValue.label }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsx(FlatList, { role: "list", data: items, style: [styles.dropdown, { width }], contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
-                        const isSelected = value === item.value;
-                        return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: () => {
-                                onValueChange(item.value);
-                                close();
-                            }, children: [_jsx(LakeRadio, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { style: styles.itemLabel, children: item.label })] }));
-                    } }) })] }));
-};
-const FilterCheckbox = ({ label, items, width, checkAllLabel, value, onValueChange, onPressRemove, autoOpen = false, }) => {
-    const inputRef = useRef(null);
-    const [visible, { close, toggle }] = useDisclosure(autoOpen);
-    const valueSet = useMemo(() => new Set(value), [value]);
-    const currentValue = useMemo(() => items.filter(item => valueSet.has(item.value)), [items, valueSet]);
-    const allChecked = checkAllLabel != null && valueSet.size === items.length;
-    const listItems = useMemo(() => {
-        if (checkAllLabel == null) {
-            return items;
-        }
-        const checked = valueSet.size === 0 ? false : valueSet.size === items.length ? true : "mixed";
-        const checkAllItem = {
-            label: checkAllLabel,
-            checked,
-        };
-        return [checkAllItem, ...items];
-    }, [items, checkAllLabel, valueSet]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: allChecked ? checkAllLabel : currentValue.map(item => item.label).join(", ") }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsx(FlatList, { role: "list", data: listItems, style: [styles.dropdown, { width }], contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
-                        const isSelected = match(item)
-                            .with({ checked: P.any }, ({ checked }) => checked)
-                            .with({ value: P.any }, ({ value }) => valueSet.has(value))
-                            .exhaustive();
-                        const onPress = match(item)
-                            // Check all item
-                            .with({ checked: P.any }, ({ checked }) => () => {
-                            if (checked === true) {
-                                onValueChange(undefined);
-                            }
-                            else {
-                                onValueChange(items.map(item => item.value));
-                            }
-                        })
-                            // Regular item
-                            .with({ value: P.any }, ({ value }) => () => {
-                            const nextValues = new Set([...valueSet]);
-                            if (isSelected === true) {
-                                nextValues.delete(value);
-                            }
-                            else {
-                                nextValues.add(value);
-                            }
-                            if (nextValues.size === 0) {
-                                onValueChange(undefined);
-                            }
-                            else {
-                                onValueChange([...nextValues]);
-                            }
-                        })
-                            .exhaustive();
-                        return (_jsxs(Pressable, { role: "radio", "aria-checked": isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: onPress, children: [_jsx(LakeCheckbox, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { style: styles.itemLabel, children: item.label })] }));
-                    } }) })] }));
-};
-const FilterDate = ({ label, initialValue, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, onValueChange, onPressRemove, autoOpen = false, }) => {
-    const inputRef = useRef(null);
-    const [visible, { close, toggle }] = useDisclosure(autoOpen);
-    const value = useMemo(() => (isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : ""), [initialValue, dateFormat]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : noValueText }), _jsx(DatePickerModal, { visible: visible, format: dateFormat, firstWeekDay: "monday", label: label, cancelLabel: cancelText, confirmLabel: submitText, value: value, isSelectable: isSelectable, validate: validate, onChange: value => {
-                    const formattedValue = dayjs(value, dateFormat, true).toJSON();
-                    onValueChange(formattedValue);
-                }, onDismiss: close })] }));
-};
-const FilterInput = ({ label, initialValue = "", noValueText, autoOpen = false, placeholder, validate, onValueChange, onPressRemove, }) => {
-    const [visible, { close, toggle }] = useDisclosure(autoOpen);
-    const tagRef = useRef(null);
-    const getValueState = useCallback((inputValue, isInitialValue) => {
-        var _a;
-        const trimmed = inputValue.trim();
-        const error = (_a = validate === null || validate === void 0 ? void 0 : validate(trimmed)) !== null && _a !== void 0 ? _a : undefined;
-        const validValue = isNullish(error) ? trimmed : undefined;
-        if (!isInitialValue) {
-            onValueChange(validValue);
-        }
-        return {
-            inputValue,
-            validValue,
-            error: isInitialValue ? undefined : error,
-        };
-    }, [validate, onValueChange]);
-    const [{ inputValue, validValue, error }, setState] = useState(() => getValueState(initialValue, true));
-    const onChangeText = useCallback((value) => setState(getValueState(value, false)), [getValueState]);
-    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: tagRef, onPressRemove: onPressRemove, isActive: visible, value: validValue !== null && validValue !== void 0 ? validValue : noValueText }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: tagRef, returnFocus: false, visible: visible, children: _jsx(View, { style: [styles.dropdown, styles.inputContent], children: _jsx(LakeLabel, { label: label, render: id => (_jsx(LakeTextInput, { id: id, value: inputValue, error: error, style: styles.input, placeholder: placeholder, onChangeText: onChangeText })) }) }) })] }));
-};
-const getFilterValue = (_type, filters, name) => filters[name];
-/**
- * @deprecated
- */
-export const FiltersStack = ({ filters, openedFilters, definition, onChangeOpened, onChangeFilters, }) => {
-    const previousOpened = usePreviousValue(openedFilters);
-    const lastOpenedFilter = openedFilters.length > previousOpened.length
-        ? openedFilters[openedFilters.length - 1]
-        : undefined;
-    if (openedFilters.length === 0) {
-        return null;
-    }
-    return (_jsx(Stack, { direction: "row", wrap: "wrap", children: openedFilters.map(filterName => {
-            const filterDefinition = definition[filterName];
-            if (typeof filterName !== "string" || filterDefinition == null) {
-                return null;
-            }
-            return (_jsx(View, { children: match(filterDefinition)
-                    .with({ type: "radio" }, ({ type, label, items, width }) => (_jsx(FilterRadio, { label: label, items: items, width: width, autoOpen: lastOpenedFilter === filterName, onPressRemove: () => {
-                        onChangeFilters({ ...filters, [filterName]: undefined });
-                        onChangeOpened(openedFilters.filter(f => f !== filterName));
-                    }, value: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }) })))
-                    .with({ type: "checkbox" }, ({ type, label, items, width, checkAllLabel }) => (_jsx(FilterCheckbox, { label: label, items: items, width: width, checkAllLabel: checkAllLabel, autoOpen: lastOpenedFilter === filterName, value: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
-                        onChangeFilters({ ...filters, [filterName]: undefined });
-                        onChangeOpened(openedFilters.filter(f => f !== filterName));
-                    } })))
-                    .with({ type: "date" }, ({ type, label, noValueText, cancelText, submitText, dateFormat, isSelectable, validate, }) => (_jsx(FilterDate, { label: label, noValueText: noValueText, cancelText: cancelText, submitText: submitText, dateFormat: dateFormat, autoOpen: lastOpenedFilter === filterName, isSelectable: isSelectable ? date => isSelectable(date, filters) : undefined, validate: validate ? value => validate(value, filters) : undefined, initialValue: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
-                        onChangeFilters({ ...filters, [filterName]: undefined });
-                        onChangeOpened(openedFilters.filter(f => f !== filterName));
-                    } })))
-                    .with({ type: "input" }, ({ type, label, placeholder, noValueText, validate }) => (_jsx(FilterInput, { label: label, placeholder: placeholder, noValueText: noValueText, autoOpen: lastOpenedFilter === filterName, validate: validate, initialValue: getFilterValue(type, filters, filterName), onValueChange: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
-                        onChangeFilters({ ...filters, [filterName]: undefined });
-                        onChangeOpened(openedFilters.filter(f => f !== filterName));
-                    } })))
-                    .exhaustive() }, filterName));
-        }) }));
-};
-/**
- * @deprecated
- */
-export const filter = {
-    checkbox: (config) => ({
-        type: "checkbox",
-        label: config.label,
-        items: config.items,
-        checkAllLabel: t("common.filters.all"),
-    }),
-    date: (config) => ({
-        type: "date",
-        label: config.label,
-        cancelText: t("common.filters.cancel"),
-        submitText: t("common.filters.apply"),
-        noValueText: t("common.filters.none"),
-        dateFormat: locale.dateFormat,
-        isSelectable: config.isSelectable,
-        validate: config.validate,
-    }),
-    input: (config) => ({
-        type: "input",
-        label: config.label,
-        noValueText: t("common.filters.none"),
-        placeholder: config.placeholder,
-        validate: config.validate,
-    }),
-    radio: (config) => ({
-        type: "radio",
-        label: config.label,
-        items: config.items,
-    }),
-};
-/**
- * @deprecated
- */
-export const useFiltersProps = ({ available, filters, filtersDefinition, }) => {
-    const availableFilters = useMemo(() => {
-        const availableSet = new Set(isNullish(available) ? Dict.keys(filtersDefinition) : available);
-        return Array.filterMap(Dict.entries(filtersDefinition), ([name, { label }]) => availableSet.has(name) ? Option.Some({ name, label }) : Option.None());
-    }, [available, filtersDefinition]);
-    const [openFilters, setOpenFilters] = useState(() => Dict.entries(filters)
-        .filter(([, value]) => isNotNullish(value))
-        .map(([name]) => name));
-    useEffect(() => {
-        setOpenFilters(openFilters => {
-            const currentlyOpenFilters = new Set(openFilters);
-            const openFiltersNotYetInState = Dict.entries(filters)
-                .filter(([name, value]) => isNotNullish(value) && !currentlyOpenFilters.has(name))
-                .map(([name]) => name);
-            return [...openFilters, ...openFiltersNotYetInState];
-        });
-    }, [filters]);
-    const onAddFilter = useCallback((filter) => {
-        setOpenFilters(openFilters => [...openFilters, filter]);
-    }, []);
-    return {
-        chooser: {
-            availableFilters,
-            filters,
-            label: t("common.filters"),
-            onAddFilter,
-            openFilters,
-        },
-        stack: {
-            definition: filtersDefinition,
-            filters,
-            openedFilters: openFilters,
-            onChangeOpened: setOpenFilters,
-        },
-    };
-};