@swan-io/lake 1.4.4 → 1.5.1

package/src/components/MultilineInput.js

@@ -1,55 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, memo, useId } from "react";
-import { StyleSheet, View } from "react-native";
-import { colors } from "../constants/colors";
-import { typography } from "../constants/typography";
-import { isNotNullish } from "../utils/nullish";
-import { InputError } from "./InputError";
-import { Label } from "./Label";
-import { PressableTextInput } from "./Pressable";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    base: {
-        ...typography.bodyLarge,
-        backgroundColor: colors.white,
-        borderColor: colors.gray[10],
-        borderRadius: 4,
-        borderWidth: 1,
-        flexGrow: 1,
-        flexShrink: 1,
-        maxWidth: "100%",
-        minHeight: 128,
-        outlineStyle: "none",
-        padding: 16,
-        placeholderTextColor: colors.gray[30],
-        resize: "vertical",
-        transitionProperty: ["border-color", "box-shadow"],
-        transitionDuration: "150ms",
-    },
-    focused: {
-        borderColor: colors.gray[30],
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.12,
-        shadowOffset: { height: 0, width: 0 },
-        shadowRadius: 2,
-    },
-    hovered: {
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.06,
-        shadowOffset: { height: 4, width: 0 },
-        shadowRadius: 8,
-    },
-    errored: {
-        borderColor: colors.red[100],
-        paddingRight: 48,
-    },
-});
-export const MultilineInput = memo(forwardRef(({ disabled = false, error, label, onBlur, onSubmitEditing, onValueChange, placeholder, readOnly = false, value = "", }, forwardedRef) => {
-    const id = `input-${useId()}`;
-    return (_jsxs(View, { children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(Space, { height: 8 }), _jsx(PressableTextInput, { nativeID: id, ref: forwardedRef, allowFontScaling: false, autoComplete: "off", editable: !readOnly && !disabled, multiline: true, onBlur: onBlur, onChangeText: onValueChange, onSubmitEditing: onSubmitEditing, placeholder: placeholder, value: value, style: ({ hovered, focused }) => [
-                    styles.base,
-                    focused ? styles.focused : hovered && styles.hovered,
-                    isNotNullish(error) && styles.errored,
-                ] }), _jsx(InputError, { message: error })] }));
-}));
-MultilineInput.displayName = "MultilineInput";

package/src/components/Picker.d.ts

@@ -1,26 +0,0 @@
-import { ReactNode } from "react";
-import { StyleProp, ViewStyle } from "react-native";
-type Props<V, I extends {
-    value: V;
-}> = {
-    value: V;
-    items: I[];
-    onValueChange: (item: V) => void;
-    renderItem: (item: I) => ReactNode | null;
-    renderValue?: (item: I) => ReactNode | null;
-    itemHeight?: number;
-    describedBy?: string;
-    size?: "large" | "small";
-    label?: string | (() => ReactNode);
-    info?: ReactNode;
-    disabled?: boolean;
-    style?: StyleProp<ViewStyle>;
-    pickerStyle?: StyleProp<ViewStyle>;
-    hideErrorMessage?: boolean;
-};
-export declare const Picker: (<V, I extends {
-    value: V;
-}>(props: Props<V, I>) => JSX.Element | null) & {
-    displayName?: string | undefined;
-};
-export {};

package/src/components/Picker.js

@@ -1,116 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo as reactMemo, useMemo, useRef } from "react";
-import isEqual from "react-fast-compare";
-import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
-import { colors } from "../constants/colors";
-import { commonStyles } from "../constants/commonStyles";
-import { typography } from "../constants/typography";
-import { useBoolean } from "../hooks/useBoolean";
-import { Fill } from "./Fill";
-import { Icon } from "./Icon";
-import { InputError } from "./InputError";
-import { Label } from "./Label";
-import { Popover } from "./Popover";
-import { Space } from "./Space";
-const ELEMENT_HEIGHT = 48;
-const styles = StyleSheet.create({
-    base: {
-        alignItems: "center",
-        backgroundColor: colors.white,
-        borderColor: colors.gray[10],
-        borderRadius: 4,
-        borderWidth: 1,
-        flexDirection: "row",
-        flexGrow: 1,
-        flexShrink: 1,
-        height: 48,
-        outlineStyle: "none",
-        paddingHorizontal: 16,
-        transitionDuration: "150ms",
-        transitionProperty: ["border-color", "box-shadow"],
-    },
-    small: {
-        height: 40,
-    },
-    focused: {
-        borderColor: colors.gray[20],
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.12,
-        shadowOffset: { height: 0, width: 0 },
-        shadowRadius: 2,
-    },
-    hovered: {
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.06,
-        shadowOffset: { height: 4, width: 0 },
-        shadowRadius: 8,
-    },
-    disabled: {
-        backgroundColor: colors.gray[3],
-        borderColor: colors.gray[3],
-        cursor: "not-allowed",
-    },
-    list: {
-        maxHeight: ELEMENT_HEIGHT * 4.5,
-        backgroundColor: colors.white,
-        borderRadius: 4,
-        shadowColor: colors.gray[100],
-        shadowOpacity: 0.12,
-        shadowOffset: { height: 6, width: 0 },
-        shadowRadius: 24,
-    },
-    item: {
-        alignItems: "center",
-        flexDirection: "row",
-        flexGrow: 1,
-        flexShrink: 1,
-        paddingHorizontal: 16,
-        paddingVertical: 0,
-        transitionProperty: "background-color",
-        transitionDuration: "200ms",
-    },
-    hoveredItem: {
-        backgroundColor: colors.gray[3],
-    },
-    pressedItem: {
-        backgroundColor: colors.gray[10],
-    },
-    itemText: {
-        ...typography.bodyLarge,
-    },
-});
-const isReactText = (node) => ["string", "number"].includes(typeof node);
-const memo = reactMemo;
-export const Picker = memo(({ value, items, onValueChange, renderItem, renderValue = renderItem, itemHeight = ELEMENT_HEIGHT, describedBy, size = "large", label = "", info = "", disabled = false, style, pickerStyle, hideErrorMessage = false, }) => {
-    const buttonRef = useRef(null);
-    const [visible, setVisible] = useBoolean(false);
-    const selectedItem = items.find(item => item.value === value);
-    const selectedRendered = selectedItem ? renderValue(selectedItem) : undefined;
-    const getItemLayout = useMemo(() => (data, index) => ({
-        length: itemHeight,
-        offset: itemHeight * index,
-        index,
-    }), [itemHeight]);
-    return (_jsxs(View, { style: style, children: [typeof label === "function"
-                ? label()
-                : label !== "" && (_jsxs(_Fragment, { children: [_jsx(Label, { children: label }), _jsx(Space, { height: 8 })] })), _jsxs(Pressable, { ref: buttonRef, accessibilityRole: "button", disabled: disabled, onPress: setVisible.toggle, style: ({ hovered, focused }) => [
-                    styles.base,
-                    size === "small" && styles.small,
-                    pickerStyle,
-                    focused || visible ? styles.focused : hovered && styles.hovered,
-                    disabled && styles.disabled,
-                ], children: [selectedItem ? (_jsx(View, { style: commonStyles.fill, children: isReactText(selectedRendered) ? (_jsx(Text, { numberOfLines: 1, style: styles.itemText, children: selectedRendered })) : (selectedRendered) })) : (_jsx(Fill, {})), !disabled && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(Icon, { name: visible ? "chevron-up-filled" : "chevron-down-filled", color: colors.gray[30], size: 18 })] }))] }), info !== "" && (_jsxs(_Fragment, { children: [_jsx(Space, { height: 8 }), _jsx(View, { children: info })] })), !hideErrorMessage && _jsx(InputError, {}), _jsx(Popover, { referenceRef: buttonRef, matchReferenceWidth: true, describedBy: describedBy, visible: visible, onDismiss: setVisible.toggle, children: _jsx(FlatList, { getItemLayout: getItemLayout, accessibilityRole: "list", data: items, style: styles.list, keyExtractor: item => `option-${item.value}`, renderItem: ({ item }) => {
-                        const selected = item.value === value;
-                        const rendered = renderItem(item);
-                        return (_jsxs(Pressable, { accessibilityRole: "listitem", accessibilitySelected: selected, style: ({ hovered, pressed }) => [
-                                styles.item,
-                                (hovered || selected) && styles.hoveredItem,
-                                pressed && styles.pressedItem,
-                                { height: itemHeight },
-                            ], onPress: () => {
-                                onValueChange(item.value);
-                                setVisible.toggle();
-                            }, children: [isReactText(rendered) ? (_jsx(Text, { numberOfLines: 1, style: styles.itemText, children: rendered })) : (rendered), selected && (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 16 }), _jsx(Icon, { name: "checkmark-filled", color: colors.green[100], size: 20 })] }))] }));
-                    } }) })] }));
-}, isEqual);
-Picker.displayName = "Picker";

package/src/components/ProgressBar.d.ts

@@ -1,11 +0,0 @@
-/// <reference types="react" />
-type Props = {
-    color: string;
-    label: string;
-    progressLabel: string;
-    minValue: number;
-    maxValue: number;
-    value: number;
-};
-export declare const ProgressBar: ({ color, label, progressLabel, minValue, maxValue, value }: Props) => JSX.Element;
-export {};

package/src/components/ProgressBar.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
-import { StyleSheet, Text, View } from "react-native";
-import { colors } from "../constants/colors";
-import { typography } from "../constants/typography";
-import { useComputedColors } from "../hooks/useComputedColors";
-import { interpolate } from "../utils/math";
-import { Box } from "./Box";
-import { Fill } from "./Fill";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    label: {
-        ...typography.bodySmall,
-        lineHeight: typography.lineHeights.title,
-        color: colors.gray[50],
-    },
-    progressLabel: {
-        ...typography.bodySmall,
-        fontWeight: typography.fontWeights.demi,
-        color: colors.gray[100],
-        whiteSpace: "nowrap",
-    },
-    bar: {
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: colors.gray[10],
-    },
-    progressBar: {
-        height: "100%",
-        borderRadius: 4,
-    },
-});
-export const ProgressBar = ({ color, label, progressLabel, minValue, maxValue, value }) => {
-    const computedColors = useComputedColors(color);
-    const labelId = `label-${useId()}`;
-    const percentage = interpolate({
-        inputRange: [minValue, maxValue],
-        outputRange: [0, 100],
-        clamp: true,
-    })(value);
-    const fillWidth = `${Math.round(percentage)}%`;
-    return (_jsxs(View, { accessibilityRole: "progressbar", accessibilityLabelledBy: labelId, accessibilityValueMin: minValue, accessibilityValueMax: maxValue, accessibilityValueNow: value, accessibilityValueText: progressLabel, children: [_jsxs(Box, { direction: "row", alignItems: "center", children: [_jsx(Text, { nativeID: labelId, style: styles.label, children: label }), _jsx(Fill, { minWidth: 16 }), _jsx(Text, { style: styles.progressLabel, children: progressLabel })] }), _jsx(Space, { height: 8 }), _jsx(View, { style: styles.bar, children: _jsx(View, { style: [
-                        styles.progressBar,
-                        { backgroundColor: computedColors.progress, width: fillWidth },
-                    ] }) })] }));
-};

package/src/components/SegmentedControl.d.ts

@@ -1,19 +0,0 @@
-import { ReactNode } from "react";
-import { StyleProp, ViewStyle } from "react-native";
-type Props<V, I extends {
-    value: V;
-}> = {
-    value: V;
-    items: I[];
-    onValueChange: (value: V) => void;
-    renderItem: (item: I) => ReactNode | null;
-    horizontal?: boolean;
-    label: string;
-    style?: StyleProp<ViewStyle>;
-};
-export declare const SegmentedControl: (<V, I extends {
-    value: V;
-}>(props: Props<V, I>) => JSX.Element | null) & {
-    displayName?: string | undefined;
-};
-export {};

package/src/components/SegmentedControl.js

@@ -1,74 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo as reactMemo } from "react";
-import isEqual from "react-fast-compare";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import { colors } from "../constants/colors";
-import { typography } from "../constants/typography";
-import { Fill } from "./Fill";
-import { Icon } from "./Icon";
-import { Label } from "./Label";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    base: {
-        backgroundColor: colors.white,
-        borderWidth: 1,
-        borderColor: colors.gray[10],
-        borderRadius: 4,
-        overflow: "hidden",
-    },
-    horizontalBase: {
-        flexDirection: "row",
-    },
-    item: {
-        alignItems: "center",
-        flexDirection: "row",
-        flexGrow: 1,
-        flexShrink: 1,
-        minHeight: 48,
-        overflow: "hidden",
-        paddingHorizontal: 16,
-        transitionProperty: "background-color",
-        transitionDuration: "200ms",
-    },
-    horizontalItem: {
-        flexBasis: "0%",
-        flexDirection: "column",
-        flexGrow: 1,
-        flexShrink: 1,
-        justifyContent: "center",
-    },
-    hoveredItem: {
-        backgroundColor: colors.gray[3],
-    },
-    pressedItem: {
-        backgroundColor: colors.gray[10],
-    },
-    rightBorder: {
-        borderRightColor: colors.gray[10],
-        borderRightWidth: 1,
-    },
-    bottomBorder: {
-        borderBottomColor: colors.gray[10],
-        borderBottomWidth: 1,
-    },
-    itemText: {
-        ...typography.bodyLarge,
-    },
-});
-const isReactText = (node) => ["string", "number"].includes(typeof node);
-const memo = reactMemo;
-export const SegmentedControl = memo(({ items, horizontal = false, label, onValueChange, renderItem, style, value }) => {
-    const lastIndex = items.length - 1;
-    return (_jsxs(View, { children: [_jsx(Label, { children: label }), _jsx(Space, { height: 8 }), _jsx(View, { accessibilityRole: "radiogroup", style: [styles.base, horizontal && styles.horizontalBase, style], children: items.map((item, index) => {
-                    const selected = item.value === value;
-                    const rendered = renderItem(item);
-                    return (_jsx(Pressable, { accessibilitySelected: selected, accessibilityRole: "radio", onPress: () => onValueChange(item.value), style: ({ hovered, pressed }) => [
-                            styles.item,
-                            horizontal && styles.horizontalItem,
-                            (hovered || selected) && styles.hoveredItem,
-                            pressed && styles.pressedItem,
-                            index !== lastIndex && (horizontal ? styles.rightBorder : styles.bottomBorder),
-                        ], children: _jsxs(_Fragment, { children: [isReactText(rendered) ? (_jsx(Text, { style: styles.itemText, children: rendered })) : (rendered), !horizontal && selected ? (_jsxs(_Fragment, { children: [_jsx(Fill, { minWidth: 16 }), _jsx(Icon, { name: "checkmark-filled", color: colors.green[100], size: 20 })] })) : null] }) }, `option-${item.value}`));
-                }) })] }));
-}, isEqual);
-SegmentedControl.displayName = "SegmentedControl";

package/src/components/Table.d.ts

@@ -1,34 +0,0 @@
-import { ComponentProps, ComponentType, ReactElement, ReactNode } from "react";
-import { FlatList, StyleProp, ViewStyle } from "react-native";
-/**
- * `fixed` set the column width in px
- * `percentage` set the column with in remaining percentage (by using flex-basis)
- */
-type ColumnWidth = {
-    type: "fixed";
-    value: number;
-} | {
-    type: "remainingPercent";
-    value: number;
-};
-export type TableColumn<T> = {
-    key: string;
-    width: ColumnWidth;
-    label: string;
-    render: (item: T) => ReactNode;
-};
-type Props<T> = {
-    keyExtractor?: (item: T, index: number) => string;
-    columns: TableColumn<T>[];
-    data: T[];
-    hideColumns?: boolean;
-    ListEmptyComponent?: ComponentType<unknown> | ReactElement | null;
-    ListFooterComponent?: ComponentType<unknown> | ReactElement | null;
-    ListHeaderComponent?: ComponentType<unknown> | ReactElement | null;
-    onPressLine?: (item: T) => void;
-    isDisabledLine?: (item: T) => boolean;
-    onEndReached?: ComponentProps<typeof FlatList>["onEndReached"];
-    contentContainerStyle?: StyleProp<ViewStyle>;
-};
-export declare function Table<T>({ keyExtractor, columns, data, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, onPressLine, isDisabledLine, onEndReached, contentContainerStyle, hideColumns, }: Props<T>): JSX.Element;
-export {};

package/src/components/Table.js

@@ -1,79 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useEffect, } from "react";
-import { FlatList, Pressable, StyleSheet, Text, View } from "react-native";
-import { match } from "ts-pattern";
-import { colors } from "../constants/colors";
-import { commonStyles } from "../constants/commonStyles";
-import { typography } from "../constants/typography";
-import { Box } from "./Box";
-import { Separator } from "./Separator";
-import { Space } from "./Space";
-const styles = StyleSheet.create({
-    content: {
-        flexGrow: 1,
-    },
-    header: {
-        height: 44,
-        paddingHorizontal: 16,
-    },
-    head: {
-        ...typography.bodySmall,
-        fontWeight: typography.fontWeights.demi,
-        color: colors.gray[100],
-    },
-    row: {
-        flexDirection: "row",
-        alignItems: "center",
-        height: 56,
-        paddingHorizontal: 16,
-        transitionDuration: "300ms",
-        transitionProperty: "background-color",
-    },
-    rowHover: {
-        backgroundColor: colors.gray[3],
-    },
-    rowPressed: {
-        opacity: 0.75,
-    },
-    text: {
-        ...typography.bodySmall,
-        color: colors.gray[80],
-    },
-});
-const getColumnStyle = (width) => {
-    return match(width.type)
-        .with("remainingPercent", () => ({
-        flexBasis: `${width.value}%`,
-        flexShrink: 1,
-    }))
-        .with("fixed", () => ({
-        width: width.value,
-        flexShrink: 0,
-    }))
-        .exhaustive();
-};
-const isText = (node) => ["string", "number"].includes(typeof node);
-export function Table({ keyExtractor, columns, data, ListEmptyComponent, ListFooterComponent, ListHeaderComponent, onPressLine, isDisabledLine, onEndReached, contentContainerStyle, hideColumns = false, }) {
-    // Add width checker which run only during development
-    if (process.env.NODE_ENV === "development") {
-        // We use useEffect to avoid spaming development console with warning message
-        // eslint-disable-next-line react-hooks/rules-of-hooks
-        useEffect(() => {
-            const columnsInPercent = columns.filter(({ width }) => width.type === "remainingPercent");
-            const percentWidth = columnsInPercent.reduce((acc, { width }) => acc + width.value, 0);
-            if (process.env.NODE_ENV === "development" && percentWidth !== 100) {
-                console.warn(`Invalid Table width: total remaining width is ${percentWidth}, please check columns config where 'width.type' is 'remainingPercent'`);
-            }
-        }, [columns]);
-    }
-    return (_jsxs(View, { style: commonStyles.fill, children: [!hideColumns && (_jsx(Box, { direction: "row", alignItems: "center", style: styles.header, children: columns.map(({ key, width, label }, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx(Space, { width: 4 }), _jsx(Text, { numberOfLines: 1, style: [styles.head, getColumnStyle(width)], children: label })] }, key))) })), _jsx(FlatList, { keyExtractor: keyExtractor, contentContainerStyle: StyleSheet.flatten([styles.content, contentContainerStyle]), accessibilityRole: "list", data: data, ListHeaderComponent: ListHeaderComponent, ListFooterComponent: ListFooterComponent, onEndReached: onEndReached, onEndReachedThreshold: 0.5, ItemSeparatorComponent: Separator, renderItem: ({ item }) => {
-                    return (_jsx(Pressable, { style: ({ hovered, pressed }) => [
-                            styles.row,
-                            hovered && styles.rowHover,
-                            pressed && styles.rowPressed,
-                        ], disabled: !onPressLine || isDisabledLine?.(item) === true, onPress: () => onPressLine?.(item), children: columns.map(({ key, width, render }, index) => {
-                            const content = render(item);
-                            return (_jsxs(Fragment, { children: [index > 0 && _jsx(Space, { width: 4 }), _jsx(View, { style: getColumnStyle(width), children: isText(content) ? (_jsx(Text, { numberOfLines: 1, style: styles.text, children: content })) : (content) })] }, key));
-                        }) }));
-                }, ListEmptyComponent: ListEmptyComponent })] }));
-}

package/src/hooks/useLazyRef.d.ts

@@ -1,2 +0,0 @@
-import { MutableRefObject } from "react";
-export declare const useLazyRef: <T>(getInitialValue: () => T) => MutableRefObject<T>;

package/src/hooks/useLazyRef.js

@@ -1,9 +0,0 @@
-import { useRef } from "react";
-const UNSET = Symbol("unset");
-export const useLazyRef = (getInitialValue) => {
-    const ref = useRef(UNSET);
-    if (ref.current === UNSET) {
-        ref.current = getInitialValue();
-    }
-    return ref;
-};