ncore-ui-kit 1.0.0-pre-alpha.0

package/lib/src/components/timeSelector/index.js

@@ -0,0 +1,141 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { View } from "react-native";
+import stylesheet, { useStyles } from "./stylesheet";
+import TimeInput from "./components/timeInput";
+import { NCoreUIKitLocalize, NCoreUIKitTheme, NCoreUIKitToast } from "../../core/hooks";
+import moment from "moment";
+import { Fragment } from "react/jsx-runtime";
+import Text from "../text";
+const TimeSelector = ({ isTimeSelectWorksWithCenterWhenTimePicker, multipleSelectMinimumRequireMS, isWorkWith24HoursFormat = true, isWorkWithSeconds = false, multipleSelectMaximumMS, setIsSheetContentReady, selectMultipleObject, selectObject, pickerType, dateRange, maxDate, minDate, variant, date }) => {
+    const { spaces } = NCoreUIKitTheme.useContext();
+    const { localize } = NCoreUIKitLocalize.useContext();
+    const { inputsContainer: inputsContainerDynamicStyle, rangeContainer: rangeContainerDynamicStyle, container: containerDynamicStyle, colonText: colonTextDynamicStyle, timeTitle: timeTitleDynamicStyle } = useStyles({
+        isTimeSelectWorksWithCenterWhenTimePicker,
+        pickerType,
+        spaces
+    });
+    useEffect(() => {
+        if (pickerType === "time")
+            setIsSheetContentReady(true);
+    }, []);
+    const setDateRangeValue = ({ rangeType, seconds, minutes, hours }) => {
+        if (!dateRange) {
+            return;
+        }
+        const newRangeDate = dateRange[rangeType] ? dateRange[rangeType] : new Date();
+        if (hours !== undefined) {
+            newRangeDate?.setHours(hours);
+        }
+        if (minutes !== undefined) {
+            newRangeDate?.setMinutes(minutes);
+        }
+        if (seconds !== undefined) {
+            newRangeDate?.setSeconds(seconds);
+        }
+        const newMultipleObject = dateRange;
+        newMultipleObject[rangeType] = newRangeDate;
+        return newMultipleObject;
+    };
+    const setDateValue = ({ seconds, minutes, hours }) => {
+        const newDate = date ? date : new Date();
+        if (hours !== undefined) {
+            newDate?.setHours(hours);
+        }
+        if (minutes !== undefined) {
+            newDate?.setMinutes(minutes);
+        }
+        if (seconds !== undefined) {
+            newDate?.setSeconds(seconds);
+        }
+        return newDate;
+    };
+    const rangeValidation = ({ dateRangeValue, rangeType }) => {
+        const start = rangeType === "start" ? dateRangeValue[rangeType] : dateRange?.start;
+        const end = rangeType === "end" ? dateRangeValue[rangeType] : dateRange?.end;
+        if (start && end) {
+            if (multipleSelectMinimumRequireMS && Math.abs(moment(end).diff(start, "milliseconds")) < multipleSelectMinimumRequireMS) {
+                NCoreUIKitToast.open({
+                    title: localize("selected-start-and-end-times-cannot-be-less-than-x-times-apart", [
+                        moment.duration(multipleSelectMinimumRequireMS).humanize()
+                    ])
+                });
+                return false;
+            }
+            if (multipleSelectMaximumMS && Math.abs(moment(end).diff(start, "milliseconds")) > multipleSelectMaximumMS) {
+                NCoreUIKitToast.open({
+                    title: localize("selected-start-and-end-times-cannot-exceed-x-intervals", [
+                        moment.duration(multipleSelectMaximumMS).humanize()
+                    ])
+                });
+                return false;
+            }
+            if (moment(end).isBefore(start)) {
+                NCoreUIKitToast.open({
+                    title: localize("selected-end-time-cannot-before-from-start-time")
+                });
+                return false;
+            }
+            if (moment(start).isAfter(end)) {
+                NCoreUIKitToast.open({
+                    title: localize("selected-start-time-cannot-after-then-end-time")
+                });
+                return false;
+            }
+        }
+        return true;
+    };
+    const renderTimeInputs = () => {
+        if (variant === "range") {
+            return _jsxs(View, { style: [
+                    stylesheet.rangeContainer,
+                    rangeContainerDynamicStyle
+                ], children: [_jsxs(Text, { variant: "labelMediumSize", style: {
+                            ...stylesheet.timeTitle,
+                            ...timeTitleDynamicStyle
+                        }, children: [localize("start-time"), ":"] }), _jsxs(View, { style: [
+                            stylesheet.inputsContainer,
+                            inputsContainerDynamicStyle,
+                            {
+                                marginBottom: spaces.spacingMd
+                            }
+                        ], children: [_jsx(TimeInput, { initialValue: dateRange?.start?.getHours().toString().padStart(2, "0"), isWorkWith24HoursFormat: isWorkWith24HoursFormat, selectMultipleObject: selectMultipleObject, setDateRangeValue: setDateRangeValue, rangeValidation: rangeValidation, setDateValue: setDateValue, selectObject: selectObject, variant: variant, maxDate: maxDate, minDate: minDate, rangeType: "start", timeType: "hours" }), _jsx(Text, { variant: "titleMediumSize", style: {
+                                    ...stylesheet.colonText,
+                                    ...colonTextDynamicStyle
+                                }, children: ":" }), _jsx(TimeInput, { initialValue: dateRange?.start?.getMinutes().toString().padStart(2, "0"), isWorkWith24HoursFormat: isWorkWith24HoursFormat, selectMultipleObject: selectMultipleObject, setDateRangeValue: setDateRangeValue, rangeValidation: rangeValidation, setDateValue: setDateValue, selectObject: selectObject, timeType: "minutes", variant: variant, maxDate: maxDate, minDate: minDate, rangeType: "start" }), isWorkWithSeconds ? _jsxs(Fragment, { children: [_jsx(Text, { variant: "titleMediumSize", style: {
+                                            ...stylesheet.colonText,
+                                            ...colonTextDynamicStyle
+                                        }, children: ":" }), _jsx(TimeInput, { initialValue: dateRange?.start?.getSeconds().toString().padStart(2, "0"), isWorkWith24HoursFormat: isWorkWith24HoursFormat, selectMultipleObject: selectMultipleObject, setDateRangeValue: setDateRangeValue, rangeValidation: rangeValidation, setDateValue: setDateValue, selectObject: selectObject, timeType: "seconds", variant: variant, maxDate: maxDate, minDate: minDate, rangeType: "start" })] }) : null] }), _jsxs(Text, { variant: "labelMediumSize", style: {
+                            ...stylesheet.timeTitle,
+                            ...timeTitleDynamicStyle
+                        }, children: [localize("end-time"), ":"] }), _jsxs(View, { style: [
+                            stylesheet.inputsContainer,
+                            inputsContainerDynamicStyle
+                        ], children: [_jsx(TimeInput, { initialValue: dateRange?.end?.getHours().toString().padStart(2, "0"), isWorkWith24HoursFormat: isWorkWith24HoursFormat, selectMultipleObject: selectMultipleObject, setDateRangeValue: setDateRangeValue, rangeValidation: rangeValidation, setDateValue: setDateValue, selectObject: selectObject, variant: variant, maxDate: maxDate, minDate: minDate, timeType: "hours", rangeType: "end" }), _jsx(Text, { variant: "titleMediumSize", style: {
+                                    ...stylesheet.colonText,
+                                    ...colonTextDynamicStyle
+                                }, children: ":" }), _jsx(TimeInput, { initialValue: dateRange?.end?.getMinutes().toString().padStart(2, "0"), isWorkWith24HoursFormat: isWorkWith24HoursFormat, selectMultipleObject: selectMultipleObject, setDateRangeValue: setDateRangeValue, rangeValidation: rangeValidation, setDateValue: setDateValue, selectObject: selectObject, timeType: "minutes", variant: variant, maxDate: maxDate, minDate: minDate, rangeType: "end" }), isWorkWithSeconds ? _jsxs(Fragment, { children: [_jsx(Text, { variant: "titleMediumSize", style: {
+                                            ...stylesheet.colonText,
+                                            ...colonTextDynamicStyle
+                                        }, children: ":" }), _jsx(TimeInput, { initialValue: dateRange?.end?.getSeconds().toString().padStart(2, "0"), isWorkWith24HoursFormat: isWorkWith24HoursFormat, selectMultipleObject: selectMultipleObject, setDateRangeValue: setDateRangeValue, rangeValidation: rangeValidation, setDateValue: setDateValue, selectObject: selectObject, timeType: "seconds", variant: variant, maxDate: maxDate, minDate: minDate, rangeType: "end" })] }) : null] })] });
+        }
+        return _jsxs(View, { children: [_jsxs(Text, { variant: "labelMediumSize", style: {
+                        ...stylesheet.timeTitle,
+                        ...timeTitleDynamicStyle
+                    }, children: [localize("end-time"), ":"] }), _jsxs(View, { style: [
+                        stylesheet.inputsContainer,
+                        inputsContainerDynamicStyle
+                    ], children: [_jsx(TimeInput, { initialValue: date?.getHours().toString().padStart(2, "0"), isWorkWith24HoursFormat: isWorkWith24HoursFormat, selectMultipleObject: selectMultipleObject, setDateRangeValue: setDateRangeValue, setDateValue: setDateValue, selectObject: selectObject, variant: variant, maxDate: maxDate, minDate: minDate, timeType: "hours" }), _jsx(Text, { variant: "titleMediumSize", style: {
+                                ...stylesheet.colonText,
+                                ...colonTextDynamicStyle
+                            }, children: ":" }), _jsx(TimeInput, { initialValue: date?.getMinutes().toString().padStart(2, "0"), isWorkWith24HoursFormat: isWorkWith24HoursFormat, selectMultipleObject: selectMultipleObject, setDateRangeValue: setDateRangeValue, setDateValue: setDateValue, selectObject: selectObject, timeType: "minutes", variant: variant, maxDate: maxDate, minDate: minDate }), isWorkWithSeconds ? _jsxs(Fragment, { children: [_jsx(Text, { variant: "titleMediumSize", style: {
+                                        ...stylesheet.colonText,
+                                        ...colonTextDynamicStyle
+                                    }, children: ":" }), _jsx(TimeInput, { initialValue: date?.getSeconds().toString().padStart(2, "0"), isWorkWith24HoursFormat: isWorkWith24HoursFormat, selectMultipleObject: selectMultipleObject, setDateRangeValue: setDateRangeValue, setDateValue: setDateValue, selectObject: selectObject, timeType: "seconds", variant: variant, maxDate: maxDate, minDate: minDate })] }) : null] })] });
+    };
+    return _jsx(View, { style: [
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: renderTimeInputs() });
+};
+export default TimeSelector;

package/lib/src/components/timeSelector/stylesheet.js

@@ -0,0 +1,37 @@
+import { StyleSheet } from "react-native";
+const stylesheet = StyleSheet.create({
+    container: {
+        width: "100%"
+    },
+    rangeContainer: {
+        flexDirection: "column"
+    },
+    inputsContainer: {
+        justifyContent: "flex-start",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    colonText: {},
+    timeTitle: {}
+});
+export const useStyles = ({ isTimeSelectWorksWithCenterWhenTimePicker, pickerType, spaces }) => {
+    const styles = {
+        container: {
+            marginTop: spaces.spacingMd
+        },
+        rangeContainer: {},
+        inputsContainer: {
+            marginTop: spaces.spacingXs
+        },
+        colonText: {
+            marginHorizontal: spaces.spacingXs
+        },
+        timeTitle: {}
+    };
+    if (pickerType === "time" && isTimeSelectWorksWithCenterWhenTimePicker) {
+        styles.inputsContainer.justifyContent = "center";
+        styles.rangeContainer.justifyContent = "center";
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/timeSelector/type.js

@@ -0,0 +1,2 @@
+;
+export {};

package/lib/src/components/toast/index.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { TouchableWithoutFeedback, Animated, Easing, View } from "react-native";
+import stylesheet, { getToastType, useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { X as XIcon } from "lucide-react-native";
+import { Portal } from "../../helpers/portalize";
+import Button from "../button";
+import Text from "../text";
+const Toast = ({ isCloseOnPressActionButton = true, closeAnimationDelay = 350, openAnimationDelay = 200, contentContainerStyle, autoCloseDelay = 3000, isCloseOnPress = true, icon: CustomIcon, type = "neutral", isShowAction, customTheme, onClosed, subTitle, children, action, style, title, id }) => {
+    const { radiuses, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const { bottom } = useSafeAreaInsets();
+    const TRANSFORM_DISTANCE = 75;
+    const transformAnim = useRef(new Animated.Value(TRANSFORM_DISTANCE)).current;
+    const opacityAnim = useRef(new Animated.Value(0)).current;
+    const currentType = getToastType({
+        type
+    });
+    const { contentContainer: contentContainerDynamicStyle, containerObject: containerObjectDynamicStyle, iconContainer: iconContainerDynamicStyle, container: containerDynamicStyle, subTitle: subTitleDynamicStyle, action: actionDynamicStyle, title: titleDynamicStyle } = useStyles({
+        safeAreaBottom: bottom,
+        currentType,
+        radiuses,
+        subTitle,
+        spaces,
+        colors,
+        type
+    });
+    useEffect(() => {
+        Animated.parallel([
+            Animated.timing(opacityAnim, {
+                duration: openAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 1
+            }),
+            Animated.timing(transformAnim, {
+                duration: openAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 0
+            })
+        ]).start();
+        setTimeout(() => {
+            closeAnimation();
+        }, autoCloseDelay);
+    }, []);
+    const closeAnimation = (_onClosed) => {
+        Animated.parallel([
+            Animated.timing(transformAnim, {
+                duration: closeAnimationDelay,
+                toValue: TRANSFORM_DISTANCE,
+                useNativeDriver: true,
+                easing: Easing.linear
+            }),
+            Animated.timing(opacityAnim, {
+                duration: closeAnimationDelay,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 0
+            })
+        ]).start(({ finished }) => {
+            if (finished) {
+                if (onClosed)
+                    onClosed({
+                        id
+                    });
+                if (_onClosed)
+                    _onClosed({
+                        id
+                    });
+            }
+        });
+    };
+    const renderIcon = () => {
+        if (!CustomIcon) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                stylesheet.iconContainer,
+                iconContainerDynamicStyle
+            ], children: _jsx(CustomIcon, { color: currentType.iconColor, size: 18 }) });
+    };
+    const renderContent = () => {
+        return _jsxs(View, { style: [
+                contentContainerStyle,
+                stylesheet.contentContainer,
+                contentContainerDynamicStyle
+            ], children: [_jsx(Text, { color: currentType.titleColor, numberOfLines: 3, style: {
+                        ...stylesheet.title,
+                        ...titleDynamicStyle
+                    }, children: title }), subTitle ?
+                    _jsx(Text, { color: currentType.subTitleColor, variant: "labelSmallSize", numberOfLines: 2, style: {
+                            ...stylesheet.subTitle,
+                            ...subTitleDynamicStyle
+                        }, children: subTitle })
+                    :
+                        null] });
+    };
+    const renderAction = () => {
+        if (!isShowAction) {
+            return null;
+        }
+        return _jsx(Button, { title: action && action.title ? action.title : undefined, isCustomPadding: true, spreadBehaviour: "free", onPress: () => {
+                if (isCloseOnPressActionButton)
+                    closeAnimation();
+                if (action && action.onPress)
+                    action.onPress({
+                        closeAnimation: ({ onClosed: _onClosed }) => closeAnimation(_onClosed)
+                    });
+            }, icon: () => {
+                if (action?.title) {
+                    return null;
+                }
+                return _jsx(XIcon, { color: colors.content.text[currentType.actionColor], size: 18 });
+            }, style: {
+                ...action?.style,
+                ...actionDynamicStyle
+            }, variant: "ghost", size: "small", type: type });
+    };
+    const renderContainer = () => {
+        return _jsxs(View, { style: [
+                stylesheet.containerObject,
+                containerObjectDynamicStyle
+            ], children: [renderIcon(), renderContent(), renderAction()] });
+    };
+    return _jsx(Portal, { name: "toast-system", children: _jsx(Animated.View, { style: [
+                style,
+                stylesheet.container,
+                containerDynamicStyle,
+                {
+                    opacity: opacityAnim,
+                    transform: [{
+                            translateY: transformAnim
+                        }]
+                }
+            ], children: _jsx(TouchableWithoutFeedback, { onPress: () => {
+                    if (isCloseOnPress) {
+                        closeAnimation();
+                    }
+                }, children: children ? children : renderContainer() }) }) });
+};
+export default Toast;

package/lib/src/components/toast/stylesheet.js

@@ -0,0 +1,112 @@
+import { StyleSheet } from "react-native";
+import { windowWidth } from "../../utils";
+export const TOAST_TYPE_STYLES = {
+    primary: {
+        actionColor: "onPrimary",
+        iconColor: "emphasized",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    },
+    danger: {
+        subTitleColor: "dangerLow",
+        containerColor: "danger",
+        actionColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        subTitleColor: "successLow",
+        containerColor: "success",
+        actionColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        subTitleColor: "warningLow",
+        containerColor: "warning",
+        actionColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        subTitleColor: "infoLow",
+        containerColor: "info",
+        actionColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        containerColor: "mid",
+        subTitleColor: "low",
+        actionColor: "mid",
+        titleColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getToastType = ({ type }) => {
+    const currentType = TOAST_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        position: "absolute",
+        alignSelf: "center",
+        zIndex: 99998
+    },
+    containerObject: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    contentContainer: {
+        justifyContent: "center",
+        alignItems: "flex-start",
+        flexDirection: "column",
+        flexShrink: 1
+    },
+    iconContainer: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    title: {
+        textAlign: "left"
+    },
+    subTitle: {
+        textAlign: "left"
+    }
+});
+export const useStyles = ({ safeAreaBottom, currentType, radiuses, subTitle, colors, spaces }) => {
+    const styles = {
+        container: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            maxWidth: windowWidth - (spaces.spacingMd * 2),
+            bottom: safeAreaBottom + 100,
+            borderRadius: radiuses.full
+        },
+        containerObject: {
+            paddingHorizontal: spaces.spacingLg,
+            paddingVertical: spaces.spacingMd
+        },
+        contentContainer: {},
+        title: {},
+        subTitle: {
+            marginTop: spaces.spacingXs
+        },
+        iconContainer: {
+            paddingRight: spaces.spacingSm,
+            marginRight: spaces.spacingSm
+        },
+        action: {
+            paddingBottom: spaces.spacingSm,
+            paddingRight: spaces.spacingSm,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingSm,
+            marginLeft: spaces.spacingMd
+        }
+    };
+    if (subTitle) {
+        styles.container.borderRadius = radiuses.lg;
+    }
+    return styles;
+};
+export default stylesheet;

package/lib/src/components/toast/type.js

@@ -0,0 +1,3 @@
+import {} from "react";
+import {} from "react-native";
+;