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

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

@@ -0,0 +1,273 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useImperativeHandle, forwardRef, useState, useRef } from "react";
+import { TextInput as NativeTextInput, TouchableOpacity, Keyboard, Platform, View } from "react-native";
+import {} from "./type";
+import stylesheet, { getTextInputType, useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../core/hooks";
+import {} from "../../types";
+import { BadgeQuestionMark as BadgeQuestionMarkIcon, BadgeAlert as BadgeAlertIcon, BadgeCheck as BadgeCheckIcon, BadgeInfo as BadgeInfoIcon, EyeClosed as EyeClosedIcon, CircleX as CircleXIcon, BadgeX as BadgeXIcon, Eye as EyeIcon } from "lucide-react-native";
+import Text from "../text";
+const TextInputTypeIcon = {
+    "question": BadgeQuestionMarkIcon,
+    "success": BadgeCheckIcon,
+    "warning": BadgeAlertIcon,
+    "info": BadgeInfoIcon,
+    "danger": BadgeXIcon
+};
+const TextInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIconComponentProp, hintTextIcon: HintTextIconProp, spreadBehaviour = "baseline", isShowHideTextButton = true, isShowHintTextIcon = false, icon: IconComponentProp, hintTextContainerStyle, isCleanEnabled = false, contentContainerStyle, subTitle = "Optional", onFocus: onFocusProp, isRequired = false, isDisabled = false, onBlur: onBlurProp, hideTextIconStyle, variant = "text", type = "default", rightIconOnPress, customLocalize, rightIconStyle, isShowSubTitle, cleanIconStyle, onChangeText, initialValue, customTheme, placeholder, iconOnPress, isOptional, validation, inputStyle, iconStyle, hintText, style, title, ...props }, ref) => {
+    const { inlineSpaces, typography, radiuses, borders, spaces, colors } = NCoreUIKitTheme.useContext(customTheme);
+    const { localize } = NCoreUIKitLocalize.useContext(customLocalize);
+    const currentType = getTextInputType({
+        type
+    });
+    const inputRef = useRef(null);
+    const styleType = type === "default" ? "neutral" : type === "question" ? "neutral" : type === "danger" ? "error" : type;
+    const [value, setValue] = useState(initialValue ? initialValue : "");
+    const [hideValue, setHideValue] = useState(true);
+    const [isFocused, setIsFocused] = useState(false);
+    const { hideTextIconContainer: hideTextIconContainerDynamicStyle, titleContainer: titleContainerDynamicStyle, hintTextIcon: hintTextIconDynamicStyle, cleanButton: cleanButtonDynamicStyle, rightIcon: rightIconDynamicStyle, container: containerDynamicStyle, hintText: hintTextDynamicStyle, required: requiredDynamicStyle, subTitle: subTitleDynamicStyle, content: contentDynamicStyle, overlay: overlayDynamicStyle, title: titleDynamicStyle, input: inputDynamicStyle, icon: iconDynamicStyle } = useStyles({
+        icon: IconComponentProp ? true : false,
+        spreadBehaviour,
+        inlineSpaces,
+        currentType,
+        isDisabled,
+        typography,
+        isFocused,
+        radiuses,
+        borders,
+        spaces,
+        colors,
+        title,
+        type
+    });
+    useImperativeHandle(ref, () => ({
+        updateValue,
+        cleanText,
+        focus,
+        blur
+    }), []);
+    const titleProps = {
+        color: currentType.titleColor,
+        variant: "bodyLargeSize"
+    };
+    const iconProps = {
+        size: Number(typography.labelLargeSize.fontSize) + 6,
+        color: currentType.iconColor
+    };
+    if (isDisabled) {
+        iconProps.color = "disabled";
+    }
+    const blur = () => {
+        inputRef.current?.blur();
+    };
+    const focus = () => {
+        inputRef.current?.focus();
+    };
+    const cleanText = () => {
+        setValue("");
+        inputRef.current?.clear();
+        if (onChangeText) {
+            onChangeText("");
+        }
+    };
+    const updateValue = (text) => {
+        setValue(text);
+        inputRef.current?.setNativeProps({
+            text: text
+        });
+    };
+    const onFocus = () => {
+        setIsFocused(true);
+        if (onFocusProp)
+            onFocusProp();
+    };
+    const onBlur = () => {
+        setIsFocused(false);
+        inputRef.current?.blur();
+        if (isAutoKeyboardDismissOnBlur) {
+            Keyboard.dismiss();
+        }
+        if (onBlurProp)
+            onBlurProp();
+    };
+    const toggleValueVisibility = () => {
+        setHideValue(prevState => !prevState);
+    };
+    const renderCleanButton = () => {
+        if (isDisabled) {
+            return null;
+        }
+        if (variant !== "text") {
+            return null;
+        }
+        if (!isCleanEnabled || !value.length) {
+            return null;
+        }
+        return _jsx(TouchableOpacity, { style: [
+                cleanIconStyle,
+                stylesheet.cleanButton,
+                cleanButtonDynamicStyle
+            ], onPress: () => {
+                if (inputRef.current)
+                    inputRef.current.clear();
+                if (onChangeText) {
+                    onChangeText("");
+                }
+                setValue("");
+            }, children: _jsx(CircleXIcon, { color: colors.content.icon[currentType.iconColor], size: 20 }) });
+    };
+    const renderIcon = () => {
+        if (!IconComponentProp) {
+            return null;
+        }
+        return _jsx(TouchableOpacity, { onPress: iconOnPress, style: [
+                iconStyle,
+                stylesheet.icon,
+                iconDynamicStyle
+            ], children: _jsx(IconComponentProp, { color: iconProps.color, size: iconProps.size }) });
+    };
+    const renderRightIcon = () => {
+        if (!RightIconComponentProp) {
+            return null;
+        }
+        if (isShowHideTextButton && variant === "hidden") {
+            return null;
+        }
+        if (isCleanEnabled && value.length > 0 && variant === "text") {
+            return null;
+        }
+        return _jsx(TouchableOpacity, { onPress: rightIconOnPress, style: [
+                rightIconStyle,
+                stylesheet.rightIcon,
+                rightIconDynamicStyle
+            ], children: _jsx(RightIconComponentProp, { color: iconProps.color, size: iconProps.size }) });
+    };
+    const renderHideTextIcon = () => {
+        if (!isShowHideTextButton) {
+            return null;
+        }
+        if (variant !== "hidden") {
+            return null;
+        }
+        return _jsx(TouchableOpacity, { onPress: toggleValueVisibility, style: [
+                hideTextIconStyle,
+                stylesheet.hideTextIconContainer,
+                hideTextIconContainerDynamicStyle
+            ], children: hideValue ?
+                _jsx(EyeIcon, { color: colors.content.icon[iconProps.color], size: 20 }) :
+                _jsx(EyeClosedIcon, { color: colors.content.icon[iconProps.color], size: 20 }) });
+    };
+    const renderHintIcon = () => {
+        if (!isShowHintTextIcon) {
+            return null;
+        }
+        if (HintTextIconProp) {
+            return _jsx(HintTextIconProp, { color: isDisabled ? "disabled" : currentType.hintTextIconColor, size: 20, style: [
+                    stylesheet.hintTextIcon,
+                    hintTextIconDynamicStyle
+                ] });
+        }
+        const CurrentHintIcon = TextInputTypeIcon[type === "default" ? "question" : type];
+        let hintIconColor = colors.content.icon[currentType.hintTextIconColor];
+        if (isDisabled) {
+            hintIconColor = colors.system.state.content.disabled[styleType];
+        }
+        return _jsx(CurrentHintIcon, { color: hintIconColor, size: 20, style: [
+                stylesheet.hintTextIcon,
+                hintTextIconDynamicStyle
+            ] });
+    };
+    const renderHintText = () => {
+        if (!hintText) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                hintTextContainerStyle,
+                stylesheet.hintText,
+                hintTextDynamicStyle
+            ], children: [renderHintIcon(), _jsx(Text, { customColor: isDisabled ? colors.system.state.content.disabled[styleType] : undefined, color: currentType.hintTextColor, variant: "labelSmallSize", children: hintText })] });
+    };
+    const renderRequired = () => {
+        if (!isRequired) {
+            return null;
+        }
+        return _jsx(Text, { color: "danger", style: [
+                stylesheet.required,
+                requiredDynamicStyle
+            ], children: "*" });
+    };
+    const renderSubtitle = () => {
+        if (!isShowSubTitle && !isOptional) {
+            return null;
+        }
+        return _jsxs(Text, { variant: "labelLargeSize", color: titleProps.color, style: [
+                stylesheet.subTitle,
+                subTitleDynamicStyle
+            ], children: ["( ", isOptional ? localize("is-optional") : subTitle, " )"] });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ], children: [renderRequired(), _jsx(Text, { ...titleProps, variant: titleProps.variant, color: titleProps.color, style: [
+                        stylesheet.title,
+                        titleDynamicStyle
+                    ], children: title }), renderSubtitle()] });
+    };
+    const renderInput = () => {
+        return _jsx(NativeTextInput, { ...props, placeholderTextColor: colors.content.text[currentType.placeholderColor], secureTextEntry: variant === "hidden" && hideValue, underlineColorAndroid: "rgba(255,255,255,0)", placeholder: placeholder, allowFontScaling: false, editable: !isDisabled, multiline: false, onFocus: onFocus, onBlur: onBlur, ref: inputRef, onChangeText: (text) => {
+                const inputValue = text.replace(/\n/g, "");
+                if (inputValue === "") {
+                    setValue("");
+                    if (onChangeText)
+                        onChangeText("");
+                    return;
+                }
+                if (validation) {
+                    if (validation(inputValue)) {
+                        setValue(inputValue);
+                        if (onChangeText)
+                            onChangeText(inputValue);
+                    }
+                }
+                else {
+                    setValue(inputValue);
+                    if (onChangeText)
+                        onChangeText(inputValue);
+                }
+            }, style: [
+                inputStyle,
+                stylesheet.input,
+                inputDynamicStyle
+            ] });
+    };
+    const renderOverlay = () => {
+        return _jsx(View, { style: [
+                stylesheet.overlay,
+                overlayDynamicStyle
+            ] });
+    };
+    return _jsxs(TouchableOpacity, { disabled: isDisabled, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], onPress: () => {
+            if (!isDisabled)
+                inputRef.current?.focus();
+        }, ...Platform.select({
+            web: {
+                dataSet: {
+                    disablePressableDownEffect: "true"
+                }
+            },
+            default: {}
+        }), children: [renderTitle(), _jsxs(View, { style: [
+                    contentContainerStyle,
+                    stylesheet.content,
+                    contentDynamicStyle
+                ], children: [renderIcon(), renderInput(), renderCleanButton(), renderHideTextIcon(), renderRightIcon(), renderOverlay()] }), renderHintText()] });
+};
+export default forwardRef(TextInput);

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

@@ -0,0 +1,230 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const TEXT_INPUT_TYPE_STYLES = {
+    default: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "high",
+        inputColor: "mid",
+        iconColor: "mid"
+    },
+    danger: {
+        placeholderColor: "dangerLow",
+        hintTextIconColor: "danger",
+        focusBorderColor: "danger",
+        containerColor: "danger",
+        hintTextColor: "danger",
+        borderColor: "danger",
+        titleColor: "danger",
+        inputColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        placeholderColor: "successLow",
+        hintTextIconColor: "success",
+        focusBorderColor: "success",
+        containerColor: "success",
+        hintTextColor: "success",
+        borderColor: "success",
+        titleColor: "success",
+        inputColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        placeholderColor: "warningLow",
+        hintTextIconColor: "warning",
+        focusBorderColor: "warning",
+        containerColor: "warning",
+        hintTextColor: "warning",
+        borderColor: "warning",
+        titleColor: "warning",
+        inputColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        placeholderColor: "infoLow",
+        hintTextIconColor: "info",
+        focusBorderColor: "info",
+        containerColor: "info",
+        hintTextColor: "info",
+        borderColor: "info",
+        titleColor: "info",
+        inputColor: "info",
+        iconColor: "info"
+    },
+    question: {
+        focusBorderColor: "emphasized",
+        borderColor: "emphasized",
+        hintTextIconColor: "mid",
+        placeholderColor: "low",
+        containerColor: "mid",
+        hintTextColor: "mid",
+        titleColor: "mid",
+        inputColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getTextInputType = ({ type }) => {
+    const currentType = TEXT_INPUT_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "column",
+        boxSizing: "border-box",
+        display: "flex"
+    },
+    content: {
+        boxSizing: "border-box",
+        flexDirection: "row",
+        borderStyle: "solid",
+        alignItems: "center",
+        position: "relative",
+        display: "flex",
+        minWidth: 250
+    },
+    input: {
+        backgroundColor: "transparent",
+        textAlignVertical: "center",
+        borderColor: "transparent",
+        paddingBottom: 0,
+        paddingRight: 0,
+        paddingLeft: 0,
+        borderWidth: 0,
+        paddingTop: 0,
+        minHeight: 20,
+        zIndex: 99,
+        flex: 1
+    },
+    cleanButton: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        display: "flex",
+        zIndex: 99
+    },
+    hideTextIconContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        display: "flex",
+        zIndex: 99,
+        height: 18
+    },
+    titleContainer: {
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {},
+    icon: {
+        justifyContent: "center",
+        alignContent: "center",
+        alignItems: "center",
+        display: "flex",
+        zIndex: 99
+    },
+    required: {},
+    hintTextIcon: {},
+    hintText: {
+        flexDirection: "row",
+        alignItems: "center",
+        display: "flex"
+    },
+    subTitle: {},
+    overlay: {
+        position: "absolute",
+        zIndex: 98,
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    },
+    rightIcon: {
+        justifyContent: "center",
+        alignItems: "center",
+        alignSelf: "center",
+        display: "flex",
+        zIndex: 99
+    }
+});
+export const useStyles = ({ spreadBehaviour, inlineSpaces, currentType, typography, isDisabled, isFocused, radiuses, borders, colors, spaces, type }) => {
+    const styleType = type === "danger" ? "error" : type === "question" ? "neutral" : type;
+    const styles = {
+        container: {},
+        content: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderColor: colors.content.container[currentType.containerColor],
+            paddingBottom: spaces.spacingMd,
+            paddingRight: spaces.spacingMd,
+            borderRadius: radiuses.actions,
+            paddingLeft: spaces.spacingMd,
+            paddingTop: spaces.spacingMd,
+            borderWidth: borders.line
+        },
+        input: {
+            ...typography.labelLargeSize,
+            color: colors.content.text[currentType.inputColor]
+        },
+        cleanButton: {
+            marginLeft: spaces.spacingSm
+        },
+        hideTextIconContainer: {
+            marginLeft: spaces.spacingSm
+        },
+        titleContainer: {
+            marginBottom: spaces.spacingSm
+        },
+        title: {},
+        icon: {
+            marginRight: spaces.spacingSm
+        },
+        required: {
+            marginRight: inlineSpaces.required
+        },
+        hintTextIcon: {
+            marginRight: spaces.spacingXs
+        },
+        hintText: {
+            marginTop: spaces.spacingSm
+        },
+        subTitle: {
+            marginLeft: inlineSpaces.subTitle
+        },
+        overlay: {
+            borderRadius: radiuses.actions - 1
+        },
+        rightIcon: {
+            marginLeft: spaces.spacingSm
+        }
+    };
+    if (isDisabled) {
+        const disableStyleType = styleType === "default" ? "neutral" : styleType;
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[disableStyleType];
+        styles.container.borderColor = colors.system.state.overlay.disabled[disableStyleType];
+        styles.input.color = colors.content.text.disabled;
+    }
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+    if (spreadBehaviour === "stretch") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
+    }
+    if (isFocused && !isDisabled) {
+        if (type === "question" || type === "default") {
+            styles.content.borderColor = colors.content.border.emphasized;
+        }
+        else {
+            styles.content.borderColor = colors.content.border[type];
+        }
+    }
+    return styles;
+};
+export default stylesheet;

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

@@ -0,0 +1,3 @@
+import { TextInput } from "react-native";
+import {} from "../../types";
+;

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

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import { TouchableOpacity } from "react-native";
+import stylesheet, { useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../../../core/hooks";
+import moment from "moment";
+import NumericInput from "../../../numericInput";
+const TimeInput = ({ isWorkWith24HoursFormat = true, selectMultipleObject, setDateRangeValue, rangeValidation, selectObject, setDateValue, rangeType, timeType, maxDate, minDate, variant, ...props }) => {
+    const { typography, radiuses } = NCoreUIKitTheme.useContext();
+    const { container: containerDynamicStyle, input: inputDynamicStyle } = useStyles({
+        typography,
+        radiuses
+    });
+    return _jsx(TouchableOpacity, { style: [
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: _jsx(NumericInput, { ...props, validation: (text, setText) => {
+                let resp = true;
+                if (props.validation && !props.validation(text, setText)) {
+                    return false;
+                }
+                const num = Number(text);
+                if (timeType === "hours") {
+                    if (num < 0) {
+                        setText("0");
+                        resp = false;
+                    }
+                    if (isWorkWith24HoursFormat) {
+                        if (num > 23) {
+                            setText("23");
+                            resp = false;
+                        }
+                    }
+                    else {
+                        if (num > 11) {
+                            setText("11");
+                            resp = false;
+                        }
+                    }
+                }
+                else {
+                    if (num < 0) {
+                        setText("0");
+                        resp = false;
+                    }
+                    if (num > 59) {
+                        setText("59");
+                        resp = false;
+                    }
+                }
+                if (resp) {
+                    if (variant === "range") {
+                        const updateTime = {
+                            rangeType: rangeType
+                        };
+                        updateTime[timeType] = Number(num);
+                        const nDRV = setDateRangeValue(updateTime);
+                        if (nDRV) {
+                            const nDRVMoment = moment(nDRV[rangeType]);
+                            if (minDate && nDRVMoment.isBefore(minDate)) {
+                                setText(moment(minDate).get(timeType).toString());
+                                resp = false;
+                            }
+                            if (maxDate && nDRVMoment.isAfter(maxDate)) {
+                                setText(moment(maxDate).get(timeType).toString());
+                                resp = false;
+                            }
+                            console.log("x:", resp);
+                            if (rangeValidation && !rangeValidation({
+                                rangeType: rangeType,
+                                dateRangeValue: nDRV
+                            }, setText)) {
+                                resp = false;
+                            }
+                        }
+                    }
+                    else {
+                        const nDV = setDateValue({
+                            [timeType]: Number(text)
+                        });
+                        if (minDate && nDV && moment(nDV).isBefore(minDate)) {
+                            setText(moment(minDate).get(timeType).toString());
+                            resp = false;
+                        }
+                        if (maxDate && nDV && moment(nDV).isAfter(maxDate)) {
+                            setText(moment(maxDate).get(timeType).toString());
+                            resp = false;
+                        }
+                    }
+                }
+                return resp;
+            }, onChangeText: (text) => {
+                if (variant === "range") {
+                    const updateTime = {
+                        rangeType: rangeType
+                    };
+                    updateTime[timeType] = Number(text);
+                    const nDRV = setDateRangeValue(updateTime);
+                    selectMultipleObject(nDRV);
+                }
+                else {
+                    const nDV = setDateValue({
+                        [timeType]: Number(text)
+                    });
+                    selectObject(nDV);
+                }
+            }, inputStyle: [
+                stylesheet.input,
+                inputDynamicStyle
+            ], keyboardType: "numeric", textAlign: "center", numberOfLines: 1, maxLength: 2 }) });
+};
+export default TimeInput;

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

@@ -0,0 +1,21 @@
+import { StyleSheet } from "react-native";
+const stylesheet = StyleSheet.create({
+    container: {},
+    input: {
+        textAlignVertical: "center",
+        verticalAlign: "middle",
+        textAlign: "center"
+    }
+});
+export const useStyles = ({ typography, radiuses }) => {
+    const styles = {
+        container: {
+            borderRadius: radiuses.actions
+        },
+        input: {
+            ...typography.titleMediumSize
+        }
+    };
+    return styles;
+};
+export default stylesheet;

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

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