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

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

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { TouchableOpacity, View } from "react-native";
+import stylesheet, { getChipType, useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import { X as XIcon } from "lucide-react-native";
+import Text from "../text";
+import Loading from "../loading";
+const Chip = ({ displayBehaviourWhileLoading = "disabled", spreadBehaviour = "baseline", isClosable = true, type = "neutral", customTitleColor, customIconColor, size = "medium", icon: IconProp, customColor, customTheme, titleStyle, isDisabled, isLoading, onPress, title, style, ...props }) => {
+    const { typography, radiuses, spaces, colors } = NCoreUIKitTheme.useContext(customTheme);
+    const currentType = getChipType({
+        type
+    });
+    const { titleContainer: titleContainerDynamicStyle, container: containerDynamicStyle, loading: loadingDynamicStyle, overlay: overlayDynamicStyle, close: closeDynamicStyle, title: titleDynamicStyle, icon: iconDynamicStyle } = useStyles({
+        displayBehaviourWhileLoading,
+        spreadBehaviour,
+        customColor,
+        currentType,
+        isDisabled,
+        isClosable,
+        isLoading,
+        radiuses,
+        spaces,
+        colors,
+        size,
+        type
+    });
+    const iconProps = {
+        color: customIconColor ? customIconColor : currentType.iconColor
+    };
+    const titleProps = {
+        color: customTitleColor ? customTitleColor : currentType.titleColor
+    };
+    if (isDisabled || (displayBehaviourWhileLoading === "disabled" && isLoading)) {
+        const stateType = type === "danger" ? "error" : type;
+        titleProps.customColor = colors.system.state.content.disabled[stateType];
+        iconProps.customColor = colors.system.state.content.disabled[stateType];
+    }
+    const contentSize = size === "large" ? "bodyLargeSize" : size === "medium" ? "bodyMediumSize" : "bodySmallSize";
+    const renderIcon = () => {
+        const iconSize = typography[contentSize].fontSize + 4;
+        if (isLoading) {
+            return _jsx(Loading, { ...iconProps, style: loadingDynamicStyle, size: iconSize });
+        }
+        if (!IconProp) {
+            return null;
+        }
+        return _jsx(IconProp, { ...iconProps, color: iconProps.color, style: iconDynamicStyle, size: iconSize });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ], children: _jsx(Text, { style: [
+                    titleStyle,
+                    stylesheet.title,
+                    titleDynamicStyle
+                ], variant: contentSize, ...titleProps, children: title }) });
+    };
+    const renderClose = () => {
+        if (!isClosable) {
+            return null;
+        }
+        return _jsx(XIcon, { color: isDisabled || (displayBehaviourWhileLoading && isLoading) ? colors.content.icon.disabled : type === "neutral" ? colors.content.icon.low : colors.content.icon[type === "primary" ? "onPrimary" : type], size: typography[contentSize].fontSize + 4, style: closeDynamicStyle });
+    };
+    const renderOverlay = () => {
+        return _jsx(View, { style: [
+                stylesheet.overlay,
+                overlayDynamicStyle
+            ] });
+    };
+    return _jsxs(TouchableOpacity, { ...props, disabled: isDisabled || isLoading, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], onPress: isDisabled || isLoading ? undefined : () => {
+            if (onPress)
+                onPress();
+        }, children: [renderIcon(), renderTitle(), renderClose(), renderOverlay()] });
+};
+export default Chip;

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

@@ -0,0 +1,117 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const CHECK_BOX_TYPE_STYLES = {
+    primary: {
+        containerColor: "mid",
+        titleColor: "mid",
+        iconColor: "mid"
+    },
+    danger: {
+        containerColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        containerColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        containerColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        containerColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        containerColor: "mid",
+        titleColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getChipType = ({ type }) => {
+    const currentType = CHECK_BOX_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center",
+        position: "relative"
+    },
+    titleContainer: {
+        justifyContent: "flex-start",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {
+        textAlign: "center",
+        zIndex: 99,
+        margin: 0
+    },
+    overlay: {
+        position: "absolute",
+        display: "none",
+        zIndex: 98,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    }
+});
+export const useStyles = ({ displayBehaviourWhileLoading, spreadBehaviour, customColor, currentType, isClosable, isDisabled, isLoading, radiuses, spaces, colors, size, type }) => {
+    const styleType = type === "danger" ? "error" : type;
+    const styles = {
+        container: {
+            paddingHorizontal: size === "small" ? spaces.spacingSm : spaces.spacingMd,
+            paddingVertical: size === "small" ? spaces.spacingXs : spaces.spacingSm,
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderRadius: radiuses.chip
+        },
+        titleContainer: {},
+        title: {},
+        icon: {
+            marginRight: spaces.spacingXs
+        },
+        close: {
+            marginLeft: spaces.spacingXs
+        },
+        loading: {},
+        overlay: {}
+    };
+    if (customColor) {
+        styles.container.backgroundColor = colors.content.container[customColor];
+    }
+    if (isClosable) {
+        styles.container.paddingHorizontal = 0;
+        styles.container.paddingLeft = size === "small" ? spaces.spacingSm : spaces.spacingMd;
+        styles.container.paddingRight = spaces.spacingSm;
+    }
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+    if (isLoading) {
+        if (displayBehaviourWhileLoading === "disabled") {
+            styles.overlay.display = "flex";
+            if (displayBehaviourWhileLoading === "disabled") {
+                styles.container.borderColor = colors.system.state.overlay.disabled[styleType];
+                styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+                styles.overlay.display = "flex";
+            }
+        }
+        styles.titleContainer.marginLeft = spaces.spacingXs;
+    }
+    if (isDisabled) {
+        styles.container.borderColor = colors.system.state.overlay.disabled[styleType];
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+        styles.overlay.display = "flex";
+    }
+    return styles;
+};
+export default stylesheet;

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

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

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

@@ -0,0 +1,251 @@
+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 { ChevronRight as ChevronRightIcon, ChevronLeft as ChevronLeftIcon } from "lucide-react-native";
+import moment from "moment";
+import Text from "../text";
+const DateSelector = ({ multipleSelectMinimumRequiredDayCount, isShowTodayIndicator = true, localeBasedFirstDayOfWeek, dayOfWeekLength = "long", 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 [monthDays, setMonthDays] = useState([]);
+    const allSelectedDays = useRef([]);
+    const { nextPrevToolChevronButton: nextPrevToolChevronButtonDynamicStyle, nextPrevToolContainer: nextPrevToolContainerDynamicStyle, todayIndicator: todayIndicatorDynamicStyle, dayOfWeek: dayOfWeekDynamicStyle, day: dayDynamicStyle } = useStyles({
+        radiuses,
+        borders,
+        colors,
+        spaces
+    });
+    useEffect(() => {
+        const allDays = getDaysOfViewMonth({
+            tDate: viewDate
+        });
+        setMonthDays(allDays);
+    }, [
+        dateRange,
+        viewDate,
+        date
+    ]);
+    useLayoutEffect(() => {
+        if (monthDays)
+            setIsSheetContentReady(true);
+    }, [
+        monthDays
+    ]);
+    useEffect(() => {
+        if (viewDateProp) {
+            setViewDate(viewDateProp);
+        }
+    }, [viewDateProp]);
+    useImperativeHandle(ref, () => ({
+        changeCurrentMonth: (date) => {
+            setViewDate(date);
+        }
+    }), []);
+    const getDaysOfViewMonth = ({ tDate }) => {
+        allSelectedDays.current = [];
+        const targetDate = moment(new Date(tDate));
+        const startOfCalendar = targetDate.clone().startOf("month").startOf("week");
+        const endOfCalendar = targetDate.clone().endOf("month").endOf("week");
+        const totalDays = endOfCalendar.diff(startOfCalendar, "days") + 1;
+        const allDays = Array.from({
+            length: totalDays
+        }).map((_, index) => {
+            const currentDay = startOfCalendar.clone().add(index, "days");
+            let isSelected = false;
+            if (variant === "single" && date) {
+                allSelectedDays.current = [date];
+                if (moment(currentDay).isSame(date, "day"))
+                    isSelected = true;
+            }
+            else if (variant === "range" && dateRange && dateRange.start) {
+                if (dateRange.end) {
+                    allSelectedDays.current = Array.from({
+                        length: moment(dateRange.end).diff(dateRange.start, "days") + 1
+                    }, (_, i) => moment(dateRange.start).clone().add(i, "days").toDate());
+                    if (moment(currentDay).isBetween(dateRange.start, dateRange.end, "day", "[]"))
+                        isSelected = true;
+                }
+                else if (moment(currentDay).isSame(dateRange.start)) {
+                    allSelectedDays.current = [dateRange.start];
+                    isSelected = true;
+                }
+            }
+            let isDisabled = false;
+            if (minDate && moment(currentDay).isBefore(minDate)) {
+                isDisabled = true;
+            }
+            if (maxDate && moment(currentDay).isAfter(maxDate)) {
+                isDisabled = true;
+            }
+            return {
+                originalIndex: allSelectedDays.current.findIndex((day) => moment(currentDay).isSame(day, "day")),
+                isCurrentMonth: currentDay.isSame(targetDate, "month"),
+                isToday: currentDay.isSame(moment(), "day"),
+                dayOfWeek: currentDay.weekday(),
+                dayNumber: currentDay.date(),
+                date: currentDay,
+                isDisabled,
+                isSelected
+            };
+        });
+        return allDays;
+    };
+    const renderDay = ({ weekIndex, dayIndex, dayItem }) => {
+        const isLastItemSelected = dayItem.isSelected && dayItem.originalIndex === allSelectedDays.current.length - 1;
+        const isFirstItemSelected = dayItem.isSelected && dayItem.originalIndex === 0;
+        const selectionStyle = [
+            isFirstItemSelected && allSelectedDays.current.length > 1 ? {
+                borderBottomRightRadius: 0,
+                borderTopRightRadius: 0
+            } : null,
+            isLastItemSelected && allSelectedDays.current.length > 1 ? {
+                borderBottomLeftRadius: 0,
+                borderTopLeftRadius: 0
+            } : null
+        ];
+        let dayTitleColor = "mid";
+        if (dayItem.isSelected && !isLastItemSelected && !isFirstItemSelected) {
+            dayTitleColor = "emphasized";
+            selectionStyle.push({
+                borderBottomRightRadius: 0,
+                borderBottomLeftRadius: 0,
+                borderTopRightRadius: 0,
+                borderTopLeftRadius: 0
+            });
+        }
+        else if (dayItem.isSelected) {
+            dayTitleColor = "onPrimary";
+        }
+        if (!dayItem.isCurrentMonth || dayItem.isDisabled) {
+            dayTitleColor = "disabled";
+        }
+        return _jsxs(TouchableOpacity, { disabled: !dayItem.isCurrentMonth || dayItem.isDisabled, onPress: () => {
+                if (!dayItem.isCurrentMonth) {
+                    return;
+                }
+                if (variant === "single") {
+                    selectObject(dayItem.date.toDate());
+                }
+                else if (variant === "range") {
+                    if (!dateRange || !dateRange.start) {
+                        selectMultipleObject({
+                            start: new Date(dayItem.date.toDate().setHours(0, 0, 0)),
+                            end: undefined
+                        });
+                        return;
+                    }
+                    if (dateRange && moment(dateRange.start).isSame(dayItem.date, "day")) {
+                        selectMultipleObject({
+                            start: undefined,
+                            end: undefined
+                        });
+                        return;
+                    }
+                    if (dateRange && !dateRange.end) {
+                        if (multipleSelectDayLimit && moment(dayItem.date).diff(dateRange.start, "days") >= multipleSelectDayLimit) {
+                            NCoreUIKitToast.open({
+                                title: localize("maximum-selection-number-of-days-limit-exceeds")
+                            });
+                            return;
+                        }
+                        if (multipleSelectMinimumRequiredDayCount && moment(dayItem.date).diff(dateRange.start, "days") + 1 < multipleSelectMinimumRequiredDayCount) {
+                            NCoreUIKitToast.open({
+                                title: localize("minimum-selection-number-of-days-required-not-provided")
+                            });
+                            return;
+                        }
+                        if (moment(dayItem.date).isBefore(dateRange.start)) {
+                            selectMultipleObject({
+                                start: new Date(dayItem.date.toDate().setHours(0, 0, 0)),
+                                end: undefined
+                            });
+                        }
+                        else {
+                            selectMultipleObject({
+                                end: new Date(dayItem.date.toDate().setHours(23, 59, 59)),
+                                start: dateRange?.start
+                            });
+                        }
+                        return;
+                    }
+                    selectMultipleObject({
+                        start: dayItem.date.toDate(),
+                        end: undefined
+                    });
+                }
+            }, style: [
+                stylesheet.day,
+                dayDynamicStyle,
+                dayItem.isSelected ? {
+                    backgroundColor: colors.content.container.primary,
+                    borderColor: colors.content.container.primary
+                } : null,
+                dayItem.isSelected && !isLastItemSelected && !isFirstItemSelected ? {
+                    backgroundColor: colors.content.container.emphasized,
+                    borderColor: colors.content.container.emphasized
+                } : null,
+                dayItem.isSelected && (dayItem.isDisabled || !dayItem.isCurrentMonth) ? {
+                    opacity: 0.33
+                } : null,
+                ...selectionStyle
+            ], children: [_jsx(Text, { variant: "labelLargeSize", color: dayTitleColor, children: dayItem.dayNumber }), isShowTodayIndicator && dayItem.isToday ? _jsx(View, { style: [
+                        stylesheet.todayIndicator,
+                        selectionStyle,
+                        todayIndicatorDynamicStyle,
+                        dayItem.isSelected ? {
+                            borderColor: colors.content.border.subtle
+                        } : null
+                    ] }) : null] }, `day-${weekIndex}-${dayIndex}`);
+    };
+    const renderNextPrevTool = () => {
+        return _jsxs(View, { style: [
+                stylesheet.nextPrevToolContainer,
+                nextPrevToolContainerDynamicStyle
+            ], children: [_jsx(TouchableOpacity, { onPress: () => {
+                        const prevViewDate = moment(viewDate).clone().subtract(1, "months");
+                        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("MMMM YYYY") }), _jsx(TouchableOpacity, { onPress: () => {
+                        const nextViewDate = moment(viewDate).clone().add(1, "months");
+                        setViewDate(nextViewDate.toDate());
+                    }, style: [
+                        nextPrevToolChevronButtonDynamicStyle
+                    ], children: _jsx(ChevronRightIcon, { color: colors.content.icon.default, size: 26 }) })] });
+    };
+    let weekDays = moment.weekdays(localeBasedFirstDayOfWeek ? true : false);
+    if (dayOfWeekLength === "short") {
+        weekDays = moment.weekdaysShort(localeBasedFirstDayOfWeek ? true : false);
+    }
+    else if (dayOfWeekLength === "very-short") {
+        weekDays = moment.weekdaysMin(localeBasedFirstDayOfWeek ? true : false);
+    }
+    return _jsxs(View, { style: [
+            stylesheet.container
+        ], children: [_jsx(View, { children: renderNextPrevTool() }), _jsx(View, { style: [
+                    stylesheet.contentContainer
+                ], children: weekDays.map((weekItem, weekIndex) => {
+                    const days = monthDays.filter((dayItem) => dayItem.dayOfWeek === weekIndex);
+                    return _jsxs(View, { style: [
+                            stylesheet.columnContainer
+                        ], children: [_jsx(Text, { variant: "labelMediumSize", color: "low", style: {
+                                    ...dayOfWeekDynamicStyle
+                                }, children: weekItem }), days.map((dayItem, dayIndex) => {
+                                return renderDay({
+                                    weekIndex,
+                                    dayIndex,
+                                    dayItem
+                                });
+                            })] }, `day-column-${weekIndex}`);
+                }) })] });
+};
+export default forwardRef(DateSelector);

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

@@ -0,0 +1,74 @@
+import { StyleSheet } from "react-native";
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    contentContainer: {
+        justifyContent: "space-between",
+        flexDirection: "row",
+        alignItems: "center",
+        flexShrink: 1,
+        flex: 1
+    },
+    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
+    }
+});
+export const useStyles = ({ radiuses, borders, spaces, colors }) => {
+    const styles = {
+        dayOfWeek: {
+            marginBottom: spaces.spacingMd
+        },
+        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/dateSelector/type.js

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

package/lib/src/components/dateSelector/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();
+};