ncore-ui-kit 1.0.0-alpha.0

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";
+;

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

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, useLayoutEffect, forwardRef, useEffect, useState, useRef } from "react";
+import { TouchableOpacity, View } from "react-native";
+import stylesheet, { useStyles } from "./stylesheet";
+import { dateSelect } from "./util";
+import { NCoreUIKitLocalize, NCoreUIKitTheme, NCoreUIKitToast } from "../../core/hooks";
+import {} from "../../types";
+import { ChevronRight as ChevronRightIcon, ChevronLeft as ChevronLeftIcon } from "lucide-react-native";
+import moment from "moment";
+import Text from "../text";
+import { webStyle } from "../../utils";
+const YEAR_LINES = [
+    [
+        0,
+        1,
+        2
+    ],
+    [
+        3,
+        4,
+        5
+    ],
+    [
+        6,
+        7,
+        8
+    ],
+    [
+        9,
+        10,
+        11
+    ]
+];
+const YearSelector = ({ multipleSelectMinimumRequiredDayCount, isShowTodayIndicator = true, viewDate: viewDateProp, multipleSelectDayLimit, setIsSheetContentReady, selectMultipleObject, selectObject, dateRange, maxDate, minDate, variant, date }, ref) => {
+    const { radiuses, borders, spaces, colors } = NCoreUIKitTheme.useContext();
+    const { localize } = NCoreUIKitLocalize.useContext();
+    const selectDate = dateSelect({
+        dateRange,
+        variant,
+        date
+    });
+    const [viewDate, setViewDate] = useState(viewDateProp ? viewDateProp : selectDate);
+    const [years, setYears] = useState([]);
+    const allSelectedYears = useRef([]);
+    const { nextPrevToolChevronButton: nextPrevToolChevronButtonDynamicStyle, nextPrevToolContainer: nextPrevToolContainerDynamicStyle, todayIndicator: todayIndicatorDynamicStyle, day: dayDynamicStyle } = useStyles({
+        radiuses,
+        borders,
+        colors,
+        spaces
+    });
+    useEffect(() => {
+        const allYears = getViewYears({
+            tDate: viewDate
+        });
+        setYears(allYears);
+    }, [
+        dateRange,
+        viewDate,
+        date
+    ]);
+    useLayoutEffect(() => {
+        if (years && years.length)
+            setIsSheetContentReady(true);
+    }, [
+        years
+    ]);
+    useEffect(() => {
+        if (viewDateProp) {
+            setViewDate(viewDateProp);
+        }
+    }, [viewDateProp]);
+    useImperativeHandle(ref, () => ({
+        changeCurrentView: (date) => {
+            setViewDate(date);
+        }
+    }), []);
+    const getViewYears = ({ tDate }) => {
+        allSelectedYears.current = [];
+        const targetDate = moment(new Date(tDate));
+        const startOfCalendar = targetDate.clone().subtract(5, "years").startOf("year");
+        const totalYears = 12;
+        const allYears = Array.from({
+            length: totalYears
+        }).map((_, index) => {
+            const currentYear = startOfCalendar.clone().add(index, "years");
+            let isSelected = false;
+            if (variant === "single" && date) {
+                allSelectedYears.current = [date];
+                if (moment(currentYear).isSame(date, "year"))
+                    isSelected = true;
+            }
+            else if (variant === "range" && dateRange && dateRange.start) {
+                if (dateRange.end) {
+                    allSelectedYears.current = Array.from({
+                        length: moment(dateRange.end).diff(dateRange.start, "years") + 1
+                    }, (_, i) => moment(dateRange.start).clone().add(i, "years").toDate());
+                    if (moment(currentYear).isBetween(dateRange.start, dateRange.end, "year", "[]"))
+                        isSelected = true;
+                }
+                else if (moment(currentYear).isSame(dateRange.start, "year")) {
+                    allSelectedYears.current = [dateRange.start];
+                    isSelected = true;
+                }
+            }
+            let isDisabled = false;
+            if (minDate && moment(currentYear).isBefore(moment(minDate).startOf("year"))) {
+                isDisabled = true;
+            }
+            if (maxDate && moment(currentYear).isAfter(moment(maxDate).endOf("year"))) {
+                isDisabled = true;
+            }
+            const currentYearNumber = currentYear.year();
+            return {
+                originalIndex: allSelectedYears.current.findIndex((day) => moment(currentYear).isSame(day, "year")),
+                isToday: currentYear.isSame(moment(), "year"),
+                title: String(currentYearNumber),
+                yearNumber: currentYearNumber,
+                year: currentYearNumber,
+                date: currentYear,
+                isDisabled,
+                isSelected
+            };
+        });
+        return allYears;
+    };
+    const renderDay = ({ yearIndex, yearItem }) => {
+        const isLastItemSelected = yearItem.isSelected && yearItem.originalIndex === allSelectedYears.current.length - 1;
+        const isFirstItemSelected = yearItem.isSelected && yearItem.originalIndex === 0;
+        const selectionStyle = [
+            isFirstItemSelected && allSelectedYears.current.length > 1 ? {
+                borderBottomRightRadius: 0,
+                borderTopRightRadius: 0
+            } : null,
+            isLastItemSelected && allSelectedYears.current.length > 1 ? {
+                borderBottomLeftRadius: 0,
+                borderTopLeftRadius: 0
+            } : null
+        ];
+        let dayTitleColor = "mid";
+        if (yearItem.isSelected && !isLastItemSelected && !isFirstItemSelected) {
+            dayTitleColor = "emphasized";
+            selectionStyle.push({
+                borderBottomRightRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderTopRightRadius: 0,
+                borderTopLeftRadius: 0
+            });
+        }
+        else if (yearItem.isSelected) {
+            dayTitleColor = "onPrimary";
+        }
+        if (yearItem.isDisabled) {
+            dayTitleColor = "disabled";
+        }
+        return _jsxs(TouchableOpacity, { disabled: yearItem.isDisabled, onPress: () => {
+                if (variant === "single") {
+                    const newDate = date;
+                    newDate.setFullYear(yearItem.date.toDate().getFullYear());
+                    selectObject(newDate);
+                }
+                else if (variant === "range") {
+                    if (!dateRange || !dateRange.start) {
+                        selectMultipleObject({
+                            start: new Date(yearItem.date.toDate().setHours(0, 0, 0)),
+                            end: undefined
+                        });
+                        return;
+                    }
+                    if (dateRange && moment(dateRange.start).isSame(yearItem.date, "year")) {
+                        selectMultipleObject({
+                            start: undefined,
+                            end: undefined
+                        });
+                        return;
+                    }
+                    if (dateRange && !dateRange.end) {
+                        if (multipleSelectDayLimit && moment(yearItem.date).diff(dateRange.start, "days") >= multipleSelectDayLimit) {
+                            NCoreUIKitToast.open({
+                                title: localize("maximum-selection-number-of-days-limit-exceeds")
+                            });
+                            return;
+                        }
+                        if (multipleSelectMinimumRequiredDayCount && moment(yearItem.date).diff(dateRange.start, "days") + 1 < multipleSelectMinimumRequiredDayCount) {
+                            NCoreUIKitToast.open({
+                                title: localize("minimum-selection-number-of-days-required-not-provided")
+                            });
+                            return;
+                        }
+                        if (moment(yearItem.date).isBefore(dateRange.start)) {
+                            selectMultipleObject({
+                                start: new Date(yearItem.date.toDate().setHours(0, 0, 0)),
+                                end: undefined
+                            });
+                        }
+                        else {
+                            selectMultipleObject({
+                                end: new Date(yearItem.date.toDate().setHours(23, 59, 59)),
+                                start: dateRange?.start
+                            });
+                        }
+                        return;
+                    }
+                    selectMultipleObject({
+                        start: yearItem.date.toDate(),
+                        end: undefined
+                    });
+                }
+            }, style: [
+                stylesheet.day,
+                dayDynamicStyle,
+                yearItem.isSelected ? {
+                    backgroundColor: colors.content.container.primary,
+                    borderColor: colors.content.container.primary
+                } : null,
+                yearItem.isSelected && !isLastItemSelected && !isFirstItemSelected ? {
+                    backgroundColor: colors.content.container.emphasized,
+                    borderColor: colors.content.container.emphasized
+                } : null,
+                yearItem.isSelected && (yearItem.isDisabled) ? {
+                    opacity: 0.33
+                } : null,
+                ...selectionStyle
+            ], children: [_jsx(Text, { variant: "labelLargeSize", color: dayTitleColor, children: yearItem.title }), isShowTodayIndicator && yearItem.isToday ? _jsx(View, { style: [
+                        stylesheet.todayIndicator,
+                        selectionStyle,
+                        todayIndicatorDynamicStyle,
+                        yearItem.isSelected ? {
+                            borderColor: colors.content.border.subtle
+                        } : null
+                    ] }) : null] }, `year-${yearIndex}`);
+    };
+    const renderNextPrevTool = () => {
+        return _jsxs(View, { style: [
+                stylesheet.nextPrevToolContainer,
+                nextPrevToolContainerDynamicStyle
+            ], children: [_jsx(TouchableOpacity, { onPress: () => {
+                        const prevViewDate = moment(viewDate).clone().subtract(12, "years");
+                        setViewDate(prevViewDate.toDate());
+                    }, style: [
+                        nextPrevToolChevronButtonDynamicStyle
+                    ], children: _jsx(ChevronLeftIcon, { color: colors.content.icon.default, size: 26 }) }), _jsx(Text, { variant: "labelLargeSize", color: "high", children: years && years.length ?
+                        `${moment(years[0]?.date.toDate()).format("YYYY")} - ${moment(years[years.length - 1]?.date.toDate()).format("YYYY")}`
+                        :
+                            null }), _jsx(TouchableOpacity, { onPress: () => {
+                        const nextViewDate = moment(viewDate).clone().add(12, "years");
+                        setViewDate(nextViewDate.toDate());
+                    }, style: [
+                        nextPrevToolChevronButtonDynamicStyle
+                    ], children: _jsx(ChevronRightIcon, { color: colors.content.icon.default, size: 26 }) })] });
+    };
+    return _jsxs(View, { style: [
+            stylesheet.container
+        ], children: [_jsx(View, { children: renderNextPrevTool() }), _jsx(View, { style: [
+                    stylesheet.contentContainer
+                ], children: years && years.length ? YEAR_LINES.map((yItem, yIndex) => {
+                    const currentYears = yItem.map(yI => years[yI]);
+                    return _jsx(View, { style: [
+                            stylesheet.rowContainer,
+                            webStyle({
+                                width: "100%"
+                            })
+                        ], children: currentYears.map((yearItem, yearIndex) => {
+                            return renderDay({
+                                yearItem: yearItem,
+                                yearIndex
+                            });
+                        }) }, `year-row-${yIndex}`);
+                }) : null })] });
+};
+export default forwardRef(YearSelector);

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

@@ -0,0 +1,72 @@
+import { StyleSheet } from "react-native";
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        justifyContent: "space-between",
+        flexDirection: "column",
+        alignItems: "center"
+    },
+    columnContainer: {
+        justifyContent: "center",
+        flexDirection: "column",
+        alignItems: "center",
+        flexShrink: 1,
+        flex: 1
+    },
+    day: {
+        justifyContent: "center",
+        alignItems: "center",
+        position: "relative",
+        flexShrink: 1,
+        width: "100%",
+        flex: 1
+    },
+    todayIndicator: {
+        position: "absolute",
+        zIndex: 999
+    },
+    nextPrevToolContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        flex: 1
+    },
+    rowContainer: {
+        flexDirection: "row"
+    }
+});
+export const useStyles = ({ radiuses, borders, spaces, colors }) => {
+    const styles = {
+        day: {
+            borderBottomRightRadius: radiuses.full,
+            borderBottomLeftRadius: radiuses.full,
+            borderTopRightRadius: radiuses.full,
+            borderTopLeftRadius: radiuses.full,
+            borderColor: "transparent",
+            borderWidth: borders.line,
+            padding: spaces.spacingSm
+        },
+        todayIndicator: {
+            borderColor: colors.content.border.default,
+            borderBottomRightRadius: radiuses.full,
+            borderBottomLeftRadius: radiuses.full,
+            borderTopRightRadius: radiuses.full,
+            borderTopLeftRadius: radiuses.full,
+            borderWidth: borders.line,
+            bottom: spaces.spacingXs,
+            right: spaces.spacingXs,
+            left: spaces.spacingXs,
+            top: spaces.spacingXs
+        },
+        nextPrevToolContainer: {
+            marginBottom: spaces.spacingMd
+        },
+        nextPrevToolChevronButton: {
+            padding: spaces.spacingSm
+        }
+    };
+    return styles;
+};
+export default stylesheet;

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

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

package/lib/src/components/yearSelector/util.js

@@ -0,0 +1,12 @@
+export const dateSelect = ({ dateRange, variant, date }) => {
+    if (variant === "single" && date) {
+        return date;
+    }
+    if (variant === "range" && dateRange && (dateRange.start || dateRange.end)) {
+        if (dateRange.start)
+            return dateRange.start;
+        if (dateRange.end)
+            return dateRange.end;
+    }
+    return new Date();
+};

package/lib/src/context/bottomSheet.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import {} from "../types/bottomSheet";
+import NCoreContext, {} from "ncore-context";
+import BottomSheet from "../components/bottomSheet";
+import { uuid } from "../utils";
+class NCoreUIKitBottomSheet extends NCoreContext {
+    constructor({ data = [] }) {
+        super({
+            close: () => { },
+            open: () => "",
+            data: data
+        }, {
+            key: "NCoreUIKit-BottomSheetContext"
+        });
+    }
+    ;
+    open = (dialogData) => {
+        const currentData = this.state.data;
+        const dialogID = dialogData.id ? dialogData.id : uuid();
+        currentData.push({
+            ...dialogData,
+            id: dialogID
+        });
+        this.setState({
+            data: currentData
+        });
+        return dialogID;
+    };
+    close = (props) => {
+        const currentData = this.state.data;
+        if (props && props.id) {
+            const keyIndex = currentData.findIndex((bottomSheet) => bottomSheet.id === props.id);
+            if (keyIndex !== -1) {
+                currentData.splice(keyIndex, 1);
+                this.setState({
+                    data: currentData
+                });
+            }
+            return;
+        }
+        if (props && props.index !== undefined) {
+            currentData.splice(props.index, 1);
+            this.setState({
+                data: currentData
+            });
+            return;
+        }
+        currentData.pop();
+        this.setState({
+            data: currentData
+        });
+    };
+    Render = ({ children }) => {
+        const { data } = this.useContext();
+        return _jsxs(Fragment, { children: [children, data.map((item) => {
+                    return _jsx(BottomSheet, { id: item.id, isActive: true, onClosed: () => {
+                            if (item.onClosed) {
+                                item.onClosed({
+                                    id: item.id
+                                });
+                            }
+                            if (item.isAutoClosed === undefined || item.isAutoClosed === true) {
+                                this.close({
+                                    id: item.id
+                                });
+                            }
+                        }, ...item }, `NCoreUIKit-BottomSheet-${item.id}`);
+                })] });
+    };
+}
+export default NCoreUIKitBottomSheet;