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

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

@@ -0,0 +1,271 @@
+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 { webStyle } from "../../types";
+import { ChevronRight as ChevronRightIcon, ChevronLeft as ChevronLeftIcon } from "lucide-react-native";
+import moment from "moment";
+import Text from "../text";
+const MONTH_LINES = [
+    [
+        0,
+        1,
+        2
+    ],
+    [
+        3,
+        4,
+        5
+    ],
+    [
+        6,
+        7,
+        8
+    ],
+    [
+        9,
+        10,
+        11
+    ]
+];
+const MonthSelector = ({ multipleSelectMinimumRequiredDayCount, monthOfYearLengthType = "long", 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 [yearMonths, setYearMonths] = useState([]);
+    const allSelectedMonths = useRef([]);
+    const { nextPrevToolChevronButton: nextPrevToolChevronButtonDynamicStyle, nextPrevToolContainer: nextPrevToolContainerDynamicStyle, todayIndicator: todayIndicatorDynamicStyle, day: dayDynamicStyle } = useStyles({
+        radiuses,
+        borders,
+        colors,
+        spaces
+    });
+    useEffect(() => {
+        const allMonths = getMonthsOfViewYear({
+            tDate: viewDate
+        });
+        setYearMonths(allMonths);
+    }, [
+        dateRange,
+        viewDate,
+        date
+    ]);
+    useLayoutEffect(() => {
+        if (yearMonths && yearMonths.length)
+            setIsSheetContentReady(true);
+    }, [
+        yearMonths
+    ]);
+    useEffect(() => {
+        if (viewDateProp) {
+            setViewDate(viewDateProp);
+        }
+    }, [viewDateProp]);
+    useImperativeHandle(ref, () => ({
+        changeCurrentYear: (date) => {
+            setViewDate(date);
+        }
+    }), []);
+    const getMonthsOfViewYear = ({ tDate }) => {
+        allSelectedMonths.current = [];
+        const targetDate = moment(new Date(tDate));
+        const startOfCalendar = targetDate.clone().startOf("year");
+        const months = monthOfYearLengthType === "short" ? moment.monthsShort() : moment.months();
+        const totalMonths = months.length;
+        const allMonths = Array.from({
+            length: totalMonths
+        }).map((_, index) => {
+            const currentMonth = startOfCalendar.clone().add(index, "months");
+            let isSelected = false;
+            if (variant === "single" && date) {
+                allSelectedMonths.current = [date];
+                if (moment(currentMonth).isSame(date, "month"))
+                    isSelected = true;
+            }
+            else if (variant === "range" && dateRange && dateRange.start) {
+                if (dateRange.end) {
+                    allSelectedMonths.current = Array.from({
+                        length: moment(dateRange.end).diff(dateRange.start, "months") + 1
+                    }, (_, i) => moment(dateRange.start).clone().add(i, "months").toDate());
+                    if (moment(currentMonth).isBetween(dateRange.start, dateRange.end, "month", "[]"))
+                        isSelected = true;
+                }
+                else if (moment(currentMonth).isSame(dateRange.start)) {
+                    allSelectedMonths.current = [dateRange.start];
+                    isSelected = true;
+                }
+            }
+            let isDisabled = false;
+            if (minDate && moment(currentMonth).isBefore(moment(minDate).startOf("month"))) {
+                isDisabled = true;
+            }
+            if (maxDate && moment(currentMonth).isAfter(moment(maxDate).endOf("month"))) {
+                isDisabled = true;
+            }
+            const monthNumber = currentMonth.month();
+            return {
+                originalIndex: allSelectedMonths.current.findIndex((month) => moment(currentMonth).isSame(month, "month")),
+                isCurrentYear: currentMonth.isSame(targetDate, "year"),
+                isToday: currentMonth.isSame(moment(), "month"),
+                title: months[monthNumber],
+                monthNumber: monthNumber + 1,
+                monthOfYear: monthNumber,
+                date: currentMonth,
+                isDisabled,
+                isSelected
+            };
+        });
+        return allMonths;
+    };
+    const renderDay = ({ monthIndex, monthItem }) => {
+        const isLastItemSelected = monthItem.isSelected && monthItem.originalIndex === allSelectedMonths.current.length - 1;
+        const isFirstItemSelected = monthItem.isSelected && monthItem.originalIndex === 0;
+        const selectionStyle = [
+            isFirstItemSelected && allSelectedMonths.current.length > 1 ? {
+                borderBottomRightRadius: 0,
+                borderTopRightRadius: 0
+            } : null,
+            isLastItemSelected && allSelectedMonths.current.length > 1 ? {
+                borderBottomLeftRadius: 0,
+                borderTopLeftRadius: 0
+            } : null
+        ];
+        let dayTitleColor = "mid";
+        if (monthItem.isSelected && !isLastItemSelected && !isFirstItemSelected) {
+            dayTitleColor = "emphasized";
+            selectionStyle.push({
+                borderBottomRightRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderTopRightRadius: 0,
+                borderTopLeftRadius: 0
+            });
+        }
+        else if (monthItem.isSelected) {
+            dayTitleColor = "onPrimary";
+        }
+        if (!monthItem.isCurrentYear || monthItem.isDisabled) {
+            dayTitleColor = "disabled";
+        }
+        return _jsxs(TouchableOpacity, { disabled: !monthItem.isCurrentYear || monthItem.isDisabled, onPress: () => {
+                if (!monthItem.isCurrentYear) {
+                    return;
+                }
+                if (variant === "single") {
+                    const newDate = date;
+                    newDate.setMonth(monthItem.date.toDate().getMonth());
+                    selectObject(newDate);
+                }
+                else if (variant === "range") {
+                    if (!dateRange || !dateRange.start) {
+                        selectMultipleObject({
+                            start: new Date(monthItem.date.toDate().setHours(0, 0, 0)),
+                            end: undefined
+                        });
+                        return;
+                    }
+                    if (dateRange && moment(dateRange.start).isSame(monthItem.date, "month")) {
+                        selectMultipleObject({
+                            start: undefined,
+                            end: undefined
+                        });
+                        return;
+                    }
+                    if (dateRange && !dateRange.end) {
+                        if (multipleSelectDayLimit && moment(monthItem.date).diff(dateRange.start, "month") >= multipleSelectDayLimit) {
+                            NCoreUIKitToast.open({
+                                title: localize("maximum-selection-number-of-days-limit-exceeds")
+                            });
+                            return;
+                        }
+                        if (multipleSelectMinimumRequiredDayCount && moment(monthItem.date).diff(dateRange.start, "month") + 1 < multipleSelectMinimumRequiredDayCount) {
+                            NCoreUIKitToast.open({
+                                title: localize("minimum-selection-number-of-days-required-not-provided")
+                            });
+                            return;
+                        }
+                        if (moment(monthItem.date).isBefore(dateRange.start)) {
+                            selectMultipleObject({
+                                start: new Date(monthItem.date.toDate().setHours(0, 0, 0)),
+                                end: undefined
+                            });
+                        }
+                        else {
+                            selectMultipleObject({
+                                end: new Date(monthItem.date.toDate().setHours(23, 59, 59)),
+                                start: dateRange?.start
+                            });
+                        }
+                        return;
+                    }
+                    selectMultipleObject({
+                        start: monthItem.date.toDate(),
+                        end: undefined
+                    });
+                }
+            }, style: [
+                stylesheet.day,
+                dayDynamicStyle,
+                monthItem.isSelected ? {
+                    backgroundColor: colors.content.container.primary,
+                    borderColor: colors.content.container.primary
+                } : null,
+                monthItem.isSelected && !isLastItemSelected && !isFirstItemSelected ? {
+                    backgroundColor: colors.content.container.emphasized,
+                    borderColor: colors.content.container.emphasized
+                } : null,
+                monthItem.isSelected && (monthItem.isDisabled || !monthItem.isCurrentYear) ? {
+                    opacity: 0.33
+                } : null,
+                ...selectionStyle
+            ], children: [_jsx(Text, { variant: "labelLargeSize", color: dayTitleColor, children: monthItem.title }), isShowTodayIndicator && monthItem.isToday ? _jsx(View, { style: [
+                        stylesheet.todayIndicator,
+                        selectionStyle,
+                        todayIndicatorDynamicStyle,
+                        monthItem.isSelected ? {
+                            borderColor: colors.content.border.subtle
+                        } : null
+                    ] }) : null] }, `month-${monthIndex}`);
+    };
+    const renderNextPrevTool = () => {
+        return _jsxs(View, { style: [
+                stylesheet.nextPrevToolContainer,
+                nextPrevToolContainerDynamicStyle
+            ], children: [_jsx(TouchableOpacity, { onPress: () => {
+                        const prevViewDate = moment(viewDate).clone().subtract(1, "years");
+                        setViewDate(prevViewDate.toDate());
+                    }, style: [
+                        nextPrevToolChevronButtonDynamicStyle
+                    ], children: _jsx(ChevronLeftIcon, { color: colors.content.icon.default, size: 26 }) }), _jsx(Text, { variant: "labelLargeSize", color: "high", children: moment(viewDate).format("YYYY") }), _jsx(TouchableOpacity, { onPress: () => {
+                        const nextViewDate = moment(viewDate).clone().add(1, "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: yearMonths && yearMonths.length ? MONTH_LINES.map((mItem, mIndex) => {
+                    const currentMonths = mItem.map(mI => yearMonths[mI]);
+                    return _jsx(View, { style: [
+                            stylesheet.rowContainer,
+                            webStyle({
+                                width: "100%"
+                            })
+                        ], children: currentMonths.map((monthItem, monthIndex) => {
+                            return renderDay({
+                                monthItem: monthItem,
+                                monthIndex
+                            });
+                        }) }, `month-row-${mIndex}`);
+                }) : null })] });
+};
+export default forwardRef(MonthSelector);

package/lib/src/components/monthSelector/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/monthSelector/type.js

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

package/lib/src/components/monthSelector/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/components/notificationIndicator/index.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { TouchableOpacity, View } from "react-native";
+import stylesheet, { getNotificationIndicatorType, useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import Loading from "../loading";
+import Text from "../text";
+const NotificationIndicator = ({ floorBackgroundColor = "default", titleVariant = "labelSmallSize", spreadBehaviour = "baseline", isDisabled = false, isVisible = true, type = "neutral", customTheme, titleStyle, isLoading, location, children, onPress, title, style, ...props }) => {
+    const { typography, radiuses, borders, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const currentType = getNotificationIndicatorType({
+        type
+    });
+    const { indicatorContainer: indicatorContainerDynamicStyle, titleContainer: titleContainerDynamicStyle, container: containerDynamicStyle, loading: loadingDynamicStyle, overlay: overlayDynamicStyle, title: titleDynamicStyle } = useStyles({
+        floorBackgroundColor,
+        spreadBehaviour,
+        currentType,
+        isDisabled,
+        isLoading,
+        radiuses,
+        borders,
+        colors,
+        spaces,
+        type
+    });
+    const titleProps = {
+        color: currentType.titleColor,
+        variant: titleVariant
+    };
+    const fontSize = typography[titleProps.variant].fontSize;
+    let baseLocation = location ? location : {
+        bottom: undefined,
+        left: undefined,
+        right: 0,
+        top: 2
+    };
+    if (!location && title) {
+        baseLocation = {
+            right: -fontSize / String(title).length,
+            top: -fontSize / 2,
+            bottom: undefined,
+            left: undefined
+        };
+    }
+    if (isDisabled || isLoading) {
+        const stateType = type === "danger" ? "error" : type;
+        titleProps.customColor = colors.system.state.content.disabled[stateType];
+    }
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ], children: [_jsx(Text, { variant: "bodyMediumSize", style: [
+                        titleStyle,
+                        stylesheet.title,
+                        titleDynamicStyle
+                    ], ...titleProps, children: title }), renderOverlay()] });
+    };
+    const renderIndicatorContainer = () => {
+        if (!isVisible) {
+            return null;
+        }
+        if (isLoading) {
+            return _jsx(Loading, { style: [
+                    loadingDynamicStyle
+                ] });
+        }
+        return _jsx(View, { style: [
+                stylesheet.indicatorContainer,
+                indicatorContainerDynamicStyle,
+                baseLocation
+            ], children: renderTitle() });
+    };
+    const renderOverlay = () => {
+        return _jsx(View, { style: [
+                stylesheet.overlay,
+                overlayDynamicStyle
+            ] });
+    };
+    return _jsxs(TouchableOpacity, { ...props, onPress: isDisabled ? undefined : () => {
+            if (onPress)
+                onPress();
+        }, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: [children, renderIndicatorContainer()] });
+};
+export default NotificationIndicator;

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

@@ -0,0 +1,105 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const NOTIFICATION_INDICATOR_TYPE_STYLES = {
+    primary: {
+        containerColor: "emphasized",
+        titleColor: "emphasized",
+        subTitleColor: "low"
+    },
+    danger: {
+        subTitleColor: "dangerLow",
+        containerColor: "danger",
+        titleColor: "danger"
+    },
+    success: {
+        subTitleColor: "successLow",
+        containerColor: "success",
+        titleColor: "success"
+    },
+    warning: {
+        subTitleColor: "warningLow",
+        containerColor: "warning",
+        titleColor: "warning"
+    },
+    info: {
+        subTitleColor: "infoLow",
+        containerColor: "info",
+        titleColor: "info"
+    },
+    neutral: {
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    }
+};
+export const getNotificationIndicatorType = ({ type }) => {
+    const currentType = NOTIFICATION_INDICATOR_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        position: "relative"
+    },
+    indicatorContainer: {
+        borderStyle: "solid",
+        position: "absolute",
+        minHeight: 18,
+        minWidth: 18
+    },
+    titleContainer: {
+        position: "relative"
+    },
+    title: {},
+    loading: {},
+    overlay: {
+        position: "absolute",
+        display: "none",
+        zIndex: 999,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    }
+});
+export const useStyles = ({ floorBackgroundColor, spreadBehaviour, currentType, isDisabled, isLoading, radiuses, borders, colors, spaces, type }) => {
+    const styleType = type === "danger" ? "error" : type;
+    const styles = {
+        container: {
+            padding: spaces.spacingSm
+        },
+        indicatorContainer: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderColor: colors.content.container[floorBackgroundColor],
+            paddingHorizontal: spaces.spacingSm,
+            paddingVertical: spaces.spacingXs,
+            borderWidth: borders.subtract,
+            borderRadius: radiuses.full
+        },
+        titleContainer: {},
+        title: {},
+        loading: {},
+        overlay: {}
+    };
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+    else if (spreadBehaviour === "stretch") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
+    }
+    if (isLoading) {
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+        styles.overlay.display = "flex";
+    }
+    if (isDisabled) {
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+        styles.overlay.display = "flex";
+    }
+    return styles;
+};
+export default stylesheet;

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

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