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

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

@@ -0,0 +1,269 @@
+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 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;

package/lib/src/context/dialog.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import {} from "../types/dialog";
+import NCoreContext, {} from "ncore-context";
+import Dialog from "../components/dialog";
+import { uuid } from "../utils";
+class NCoreUIKitDialog extends NCoreContext {
+    constructor({ data = [] }) {
+        super({
+            close: () => { },
+            open: () => "",
+            data: data
+        }, {
+            key: "NCoreUIKit-DialogContext"
+        });
+    }
+    ;
+    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((dialog) => dialog.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(Dialog, { id: item.id, onClosed: () => {
+                            if (item.onClosed) {
+                                item.onClosed({
+                                    id: item.id
+                                });
+                            }
+                            if (item.isAutoClosed === undefined || item.isAutoClosed === true) {
+                                this.close({
+                                    id: item.id
+                                });
+                            }
+                        }, ...item }, `NCoreUIKit-Dialog-${item.id}`);
+                })] });
+    };
+}
+export default NCoreUIKitDialog;

package/lib/src/context/index.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import NCoreUIKitBottomSheet from "./bottomSheet";
+import NCoreUIKitDialog from "./dialog";
+import NCoreUIKitLocalize from "./localize";
+import NCoreUIKitModal from "./modal";
+import NCoreUIKitSnackBar from "./snackBar";
+import NCoreUIKitTheme from "./theme";
+import NCoreUIKitToast from "./toast";
+import {} from "../types";
+import { Host } from "../helpers/portalize";
+class CoreContext {
+    NCoreUIKitBottomSheet;
+    NCoreUIKitLocalize;
+    NCoreUIKitSnackBar;
+    NCoreUIKitTheme;
+    NCoreUIKitDialog;
+    NCoreUIKitModal;
+    NCoreUIKitToast;
+    constructor(initialState) {
+        this.NCoreUIKitTheme = new NCoreUIKitTheme({
+            initialSelectedActiveSharpness: initialState.initialSelectedActiveSharpness,
+            initialSelectedGapPropagation: initialState.initialSelectedGapPropagation,
+            initialSelectedPalette: initialState.initialSelectedPalette,
+            initialSelectedTheme: initialState.initialSelectedTheme,
+            projectThemes: initialState.projectThemes
+        });
+        this.NCoreUIKitLocalize = new NCoreUIKitLocalize({
+            initialSelectedLocale: initialState.initialSelectedLocale,
+            projectLocales: initialState.projectLocales
+        });
+        this.NCoreUIKitModal = new NCoreUIKitModal({
+            data: []
+        });
+        this.NCoreUIKitToast = new NCoreUIKitToast({
+            data: []
+        });
+        this.NCoreUIKitSnackBar = new NCoreUIKitSnackBar({
+            data: []
+        });
+        this.NCoreUIKitDialog = new NCoreUIKitDialog({
+            data: []
+        });
+        this.NCoreUIKitBottomSheet = new NCoreUIKitBottomSheet({
+            data: []
+        });
+    }
+    Provider = ({ children }) => {
+        const BottomSheetContext = this.NCoreUIKitBottomSheet;
+        const LocalizeContext = this.NCoreUIKitLocalize;
+        const SnackBarContext = this.NCoreUIKitSnackBar;
+        const DialogContext = this.NCoreUIKitDialog;
+        const ModalContext = this.NCoreUIKitModal;
+        const ToastContext = this.NCoreUIKitToast;
+        const ThemeContext = this.NCoreUIKitTheme;
+        return _jsx(ThemeContext.Provider, { children: _jsx(LocalizeContext.Provider, { children: _jsx(Host, { name: "snack-bar-system", children: _jsx(SnackBarContext.Provider, { children: _jsx(SnackBarContext.Render, { children: _jsx(Host, { name: "toast-system", children: _jsx(Host, { name: "modal-system", children: _jsx(ModalContext.Provider, { children: _jsx(ModalContext.Render, { children: _jsx(DialogContext.Provider, { children: _jsx(DialogContext.Render, { children: _jsx(ToastContext.Provider, { children: _jsx(ToastContext.Render, { children: _jsx(Host, { name: "bottomSheet-system", children: _jsx(BottomSheetContext.Provider, { children: _jsx(BottomSheetContext.Render, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }) }) });
+    };
+}
+;
+export default CoreContext;