@swan-io/lake 1.0.0

package/src/components/Filters.js

@@ -0,0 +1,229 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import dayjs from "dayjs";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
+import { hasDefinedKeys, useForm } from "react-ux-form";
+import { Rifm } from "rifm";
+import { match, P } from "ts-pattern";
+import { colors, shadows, spacings } from "../constants/design";
+import { useDisclosure } from "../hooks/useDisclosure";
+import { useMergeRefs } from "../hooks/useMergeRefs";
+import { usePreviousValue } from "../hooks/usePreviousValue";
+import { isNotNullish } from "../utils/nullish";
+import { Box } from "./Box";
+import { Icon } from "./Icon";
+import { Input } from "./Input";
+import { LakeButton } from "./LakeButton";
+import { LakeCheckbox } from "./LakeCheckbox";
+import { LakeRadio } from "./LakeRadio";
+import { Popover } from "./Popover";
+import { Space } from "./Space";
+import { Stack } from "./Stack";
+import { Tag } from "./Tag";
+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: {
+        marginTop: 4,
+        maxHeight: 400,
+        minWidth: 200,
+    },
+    itemHovered: {
+        backgroundColor: colors.gray[50],
+    },
+    content: {
+        paddingVertical: 12,
+    },
+    inputContent: {
+        padding: 24,
+    },
+    radio: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        height: 32,
+        paddingHorizontal: 24,
+    },
+    dateInput: {
+        width: 200,
+    },
+    value: {
+        maxWidth: 130,
+        whiteSpace: "nowrap",
+    },
+    buttonContainer: {
+        paddingHorizontal: spacings[24],
+    },
+});
+const FilterTag = forwardRef(({ onPress, onPressRemove, label, value = "", isActive }, forwardRef) => {
+    const ref = useRef(null);
+    const mergedRef = useMergeRefs(ref, forwardRef);
+    return (_jsx(Pressable, { ref: mergedRef, 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 })] }) })] })) }));
+});
+function FilterRadio({ label, items, 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?.label }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsx(View, { style: styles.dropdown, children: _jsx(FlatList, { accessibilityRole: "list", data: items, contentContainerStyle: styles.content, keyExtractor: (_, index) => `filter-item-${index}`, renderItem: ({ item }) => {
+                            const isSelected = value === item.value;
+                            return (_jsxs(Pressable, { accessibilityRole: "radio", accessibilityChecked: isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: () => {
+                                    onValueChange(item.value);
+                                    close();
+                                }, children: [_jsx(LakeRadio, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { children: item.label })] }));
+                        } }) }) })] }));
+}
+function FilterCheckbox({ label, items, checkAllLabel, value, onValueChange, applyButtonLabel, onPressRemove, autoOpen = false, }) {
+    const inputRef = useRef(null);
+    const [visible, { close, toggle }] = useDisclosure(autoOpen);
+    const [localValue, setLocalValue] = useState(value);
+    const values = useMemo(() => new Set(localValue), [localValue]);
+    const currentValue = useMemo(() => items.filter(item => values.has(item.value)), [items, values]);
+    const allChecked = checkAllLabel != null && values.size === items.length;
+    const listItems = useMemo(() => {
+        if (checkAllLabel == null) {
+            return items;
+        }
+        const checked = values.size === 0 ? false : values.size === items.length ? true : "mixed";
+        const checkAllItem = {
+            label: checkAllLabel,
+            checked,
+        };
+        return [checkAllItem, ...items];
+    }, [items, checkAllLabel, values]);
+    const save = useCallback(() => {
+        onValueChange(localValue);
+        close();
+    }, [onValueChange, localValue, close]);
+    useEffect(() => {
+        if (!visible) {
+            setLocalValue(value);
+        }
+    }, [visible, value]);
+    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: _jsxs(View, { style: styles.dropdown, children: [_jsx(FlatList, { accessibilityRole: "list", data: listItems, 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 }) => values.has(value))
+                                    .exhaustive();
+                                const onPress = match(item)
+                                    // Check all item
+                                    .with({ checked: P.any }, ({ checked }) => () => {
+                                    if (checked === true) {
+                                        setLocalValue(undefined);
+                                    }
+                                    else {
+                                        setLocalValue(items.map(item => item.value));
+                                    }
+                                })
+                                    // Regular item
+                                    .with({ value: P.any }, ({ value }) => () => {
+                                    const nextValues = new Set([...values]);
+                                    if (isSelected === true) {
+                                        nextValues.delete(value);
+                                    }
+                                    else {
+                                        nextValues.add(value);
+                                    }
+                                    if (nextValues.size === 0) {
+                                        setLocalValue(undefined);
+                                    }
+                                    else {
+                                        setLocalValue([...nextValues]);
+                                    }
+                                })
+                                    .exhaustive();
+                                return (_jsxs(Pressable, { accessibilityRole: "radio", accessibilityChecked: isSelected, style: ({ hovered }) => [styles.radio, hovered && styles.itemHovered], onPress: onPress, children: [_jsx(LakeCheckbox, { value: isSelected }), _jsx(Space, { width: 12 }), _jsx(Text, { children: item.label })] }));
+                            } }), _jsx(Space, { height: 8 }), _jsx(View, { style: styles.buttonContainer, children: _jsx(LakeButton, { color: "current", onPress: save, children: applyButtonLabel }) }), _jsx(Space, { height: 24 })] }) })] }));
+}
+function FilterDate({ label, initialValue, noValueText, submitText, dateFormat, rifmProps, validate, onSave, onPressRemove, autoOpen = false, }) {
+    const inputRef = useRef(null);
+    const [visible, { close, toggle }] = useDisclosure(autoOpen);
+    const { Field, submitForm, setFieldValue } = useForm({
+        date: {
+            initialValue: isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : "",
+            validate,
+        },
+    });
+    useEffect(() => {
+        setFieldValue("date", isNotNullish(initialValue) ? dayjs(initialValue).format(dateFormat) : "");
+    }, [initialValue, dateFormat, setFieldValue]);
+    const onSubmit = () => {
+        submitForm(values => {
+            if (hasDefinedKeys(values, ["date"])) {
+                const date = dayjs(values.date, dateFormat, true).toJSON();
+                onSave(date);
+                close();
+            }
+        });
+    };
+    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(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "date", children: ({ value, onChange, error }) => (_jsx(Rifm, { value: value, onChange: onChange, ...rifmProps, children: ({ value, onChange }) => (_jsx(Input, { label: label, error: error, size: "small", style: styles.dateInput, placeholder: dateFormat, value: value, onChange: onChange })) })) }), _jsx(LakeButton, { color: "current", onPress: onSubmit, children: submitText })] }) })] }));
+}
+function FilterInput({ label, initialValue = "", noValueText, submitText, autoOpen = false, placeholder, validate, onSave, onPressRemove, }) {
+    const inputRef = useRef(null);
+    const [visible, { close, toggle }] = useDisclosure(autoOpen);
+    const [value, setValue] = useState(initialValue);
+    const { Field, submitForm } = useForm({
+        input: {
+            initialValue,
+            validate,
+        },
+    });
+    const onSubmit = () => {
+        submitForm(values => {
+            if (hasDefinedKeys(values, ["input"])) {
+                setValue(values.input);
+                onSave(values.input);
+                close();
+            }
+        });
+    };
+    return (_jsxs(View, { style: styles.container, children: [_jsx(FilterTag, { label: label, onPress: toggle, ref: inputRef, onPressRemove: onPressRemove, isActive: visible, value: value === "" ? noValueText : value }), _jsx(Popover, { role: "listbox", matchReferenceWidth: false, onDismiss: close, referenceRef: inputRef, returnFocus: false, visible: visible, children: _jsxs(View, { style: [styles.dropdown, styles.inputContent], children: [_jsx(Field, { name: "input", children: ({ error, value, onChange }) => (_jsx(Input, { label: label, size: "small", error: error, style: styles.dateInput, placeholder: placeholder, value: value, onValueChange: onChange })) }), _jsx(LakeButton, { size: "small", color: "current", onPress: onSubmit, children: submitText })] }) })] }));
+}
+const getFilterValue = (_type, filters, name) => filters[name];
+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: true, 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 }) => (_jsx(FilterRadio, { label: label, items: items, 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, checkAllLabel, submitText }) => (_jsx(FilterCheckbox, { label: label, items: items, checkAllLabel: checkAllLabel, autoOpen: lastOpenedFilter === filterName, applyButtonLabel: submitText, 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, submitText, dateFormat, rifmProps, validate }) => (_jsx(FilterDate, { label: label, noValueText: noValueText, submitText: submitText, autoOpen: lastOpenedFilter === filterName, dateFormat: dateFormat, rifmProps: rifmProps, validate: validate, initialValue: getFilterValue(type, filters, filterName), onSave: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
+                        onChangeFilters({ ...filters, [filterName]: undefined });
+                        onChangeOpened(openedFilters.filter(f => f !== filterName));
+                    } })))
+                    .with({ type: "input" }, ({ type, label, placeholder, noValueText, submitText, validate }) => (_jsx(FilterInput, { label: label, placeholder: placeholder, noValueText: noValueText, submitText: submitText, autoOpen: lastOpenedFilter === filterName, validate: validate, initialValue: getFilterValue(type, filters, filterName), onSave: value => onChangeFilters({ ...filters, [filterName]: value }), onPressRemove: () => {
+                        onChangeFilters({ ...filters, [filterName]: undefined });
+                        onChangeOpened(openedFilters.filter(f => f !== filterName));
+                    } })))
+                    .exhaustive() }, filterName));
+        }) }));
+};

package/src/components/FixedListView.d.ts

@@ -0,0 +1,104 @@
+/**
+ * ## FixedListView
+ *
+ * The FixedListView is a component designed to render big amounts of tabular data.
+ *
+ * For usability, the data can be display in three types of columns:
+ *
+ * - Sticked to start columns (usually the main identifier, always visible)
+ * - Center columns (scrollable columns, with additional information)
+ * - Sticked to end columns (so that some actions are always accesible at the end of each line)
+ *
+ * ┌────────────────────────────────────────────────────────────────────────────────────────┐
+ * │ ┌────────────────┐ ┌────────────────────────────────────────┐ ┌────────────────┐       │
+ * │ │ ╔════════════╗ │ │ ╔════════════════════════════════════╗ │ │ ╔════════════╗ │       │
+ * │ │ ║   Header   ║ │ │ ║               Header               ║ │ │ ║   Header   ║ │ ▲     │
+ * │ │ ║            ║ │ │ ║◀──────────────────────────────────▶║ │ │ ║            ║ │ │     │
+ * │ │ ╚════════════╝ │ │ ╚════════════════════════════════════╝ │ │ ╚════════════╝ │ │     │
+ * │ │                │ │                                        │ │                │ │     │
+ * │ │ ┌───────────┐  │ │ ┌────────────────────────────────────┐ │ │ ┌────────────┐ │ │     │
+ * │ │ │  Cell A1  │──┼─┼▷│              Cell B1               ├─┼─┼─▷  Cell C1   │ │ │     │
+ * │ │ └───────────┘  │ │ └────────────────────────────────────┘ │ │ └────────────┘ │ │     │
+ * │ │ ┌───────────┐  │ │ ┌────────────────────────────────────┐ │ │ ┌────────────┐ │ │     │
+ * │ │ │  Cell A2  │──┼─┼▷│              Cell B2               │─┼─┼─▷  Cell C2   │ │ │     │
+ * │ │ └───────────┘  │ │ └────────────────────────────────────┘ │ │ └────────────┘ │ │     │
+ * │ │                │ │                                        │ │                │ │     │
+ * │ │                │ │ ◀────────────────────────────────────▶ │ │                │ ▼     │
+ * └─┴────────────────┴─┴────────────────────────────────────────┴─┴────────────────┴───────┘
+ *
+ * ╔════╗
+ * ║    ║   Sticky
+ * ╚════╝
+ * ◀────▶   Scrollable
+ * ─────▷   Emulated tab order
+ *
+ */
+import { ReactElement, ReactNode } from "react";
+import { IconName } from "./Icon";
+export type ColumnTitleConfig<ExtraInfo> = {
+    title: string;
+    extraInfo: ExtraInfo;
+    id: string;
+};
+export type ColumnCellConfig<T, ExtraInfo> = {
+    columnId: string;
+    item: T;
+    index: number;
+    extraInfo: ExtraInfo;
+    isHovered: boolean;
+};
+export type LinkConfig<T, ExtraInfo> = {
+    item: T;
+    index: number;
+    extraInfo: ExtraInfo;
+};
+export type ColumnConfig<T, ExtraInfo> = {
+    id: string;
+    width: number;
+    title: string;
+    renderTitle: (props: ColumnTitleConfig<ExtraInfo>) => ReactNode;
+    renderCell: (props: ColumnCellConfig<T, ExtraInfo>) => ReactNode;
+};
+type Mode = "tile" | "plain";
+export type FixedListViewProps<T, ExtraInfo> = {
+    mode?: Mode;
+    data: T[];
+    keyExtractor: (item: T, index: number) => string;
+    highlightedRowId?: string;
+    headerHeight: number;
+    rowHeight: number;
+    rowVerticalSpacing: number;
+    extraInfo: ExtraInfo;
+    stickedToStartColumns?: ColumnConfig<T, ExtraInfo>[];
+    columns: ColumnConfig<T, ExtraInfo>[];
+    stickedToEndColumns?: ColumnConfig<T, ExtraInfo>[];
+    renderThreshold?: number;
+    onEndReached?: () => void;
+    onEndReachedThresholdPx?: number;
+    getRowLink?: (config: LinkConfig<T, ExtraInfo>) => ReactElement | undefined;
+    renderEmptyList?: () => ReactNode;
+    loading?: {
+        isLoading: boolean;
+        count: number;
+    };
+};
+export declare const FixedListView: <T, ExtraInfo>({ data: originalData, mode, keyExtractor, highlightedRowId, rowHeight, rowVerticalSpacing, headerHeight, renderThreshold, stickedToStartColumns: initialStickedToStartColumns, columns: initialColumns, stickedToEndColumns: initialStickedToEndColumns, extraInfo, onEndReached, onEndReachedThresholdPx, getRowLink, renderEmptyList, loading, }: FixedListViewProps<T, ExtraInfo>) => JSX.Element;
+type PlaceholderProps = {
+    count: number;
+    rowHeight: number;
+    rowVerticalSpacing: number;
+    groupHeaderHeight?: number;
+    headerHeight?: number;
+    paddingHorizontal?: number;
+};
+export declare const FixedListViewPlaceholder: ({ count, rowHeight, rowVerticalSpacing, groupHeaderHeight, headerHeight, paddingHorizontal, }: PlaceholderProps) => JSX.Element;
+export declare const PlainListViewPlaceholder: ({ count, rowHeight, rowVerticalSpacing, groupHeaderHeight, headerHeight, paddingHorizontal, }: PlaceholderProps) => JSX.Element;
+type EmptyProps = {
+    icon: IconName;
+    borderedIcon?: boolean;
+    title?: string;
+    subtitle?: ReactNode;
+    children?: ReactNode;
+};
+export declare const FixedListViewEmpty: ({ icon, borderedIcon, title, subtitle, children, }: EmptyProps) => JSX.Element;
+export {};