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

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

@@ -0,0 +1,319 @@
+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, { getNumericInputType, 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 NumericInputTypeIcon = {
+    "question": BadgeQuestionMarkIcon,
+    "success": BadgeCheckIcon,
+    "warning": BadgeAlertIcon,
+    "info": BadgeInfoIcon,
+    "danger": BadgeXIcon
+};
+const NumericInput = ({ isAutoKeyboardDismissOnBlur = true, rightIcon: RightIconComponentProp, hintTextIcon: HintTextIconProp, spreadBehaviour = "baseline", isShowHideTextButton = true, isWorkWithDebouncer = false, 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 = getNumericInputType({
+        type
+    });
+    const inputDebouncer = useRef(null);
+    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 [selection, setSelection] = useState({
+        start: 0,
+        end: 0
+    });
+    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 handleTextChange = (text) => {
+        if (props.maxLength &&
+            selection.start >= value.length &&
+            text.length > props.maxLength &&
+            text.length > value.length) {
+            inputRef.current?.setNativeProps({
+                value: value
+            });
+            return;
+        }
+        const cleanedText = text.replace(/\n/g, "").replace(/[^0-9]/g, "");
+        const newValue = props.maxLength ? cleanedText.slice(0, props.maxLength) : cleanedText;
+        if (text === "") {
+            setValue("");
+            if (onChangeText)
+                onChangeText("");
+            return;
+        }
+        const isValid = validation ? validation(newValue, (text) => {
+            if (onChangeText)
+                onChangeText(newValue);
+            setValue(text);
+        }) : true;
+        if (!isValid) {
+            setSelection({
+                start: selection.start,
+                end: selection.end
+            });
+            return;
+        }
+        const isDeleting = text.length < value.length;
+        let nextPosition = selection.start;
+        if (isDeleting) {
+            nextPosition = Math.max(0, selection.start - 1);
+        }
+        else {
+            nextPosition = Math.min(newValue.length, selection.start + 1);
+        }
+        setValue(newValue);
+        if (onChangeText)
+            onChangeText(newValue);
+        setSelection({
+            start: nextPosition,
+            end: nextPosition
+        });
+    };
+    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 = NumericInputTypeIcon[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], onSelectionChange: (e) => setSelection(e.nativeEvent.selection), secureTextEntry: variant === "hidden" && hideValue, underlineColorAndroid: "rgba(255,255,255,0)", onChangeText: (text) => {
+                if (isWorkWithDebouncer) {
+                    if (inputDebouncer.current) {
+                        clearTimeout(inputDebouncer.current);
+                        inputDebouncer.current = null;
+                    }
+                    inputDebouncer.current = setTimeout(() => {
+                        {
+                            handleTextChange(text);
+                        }
+                    }, 550);
+                }
+                else {
+                    handleTextChange(text);
+                }
+            }, placeholder: placeholder, allowFontScaling: false, editable: !isDisabled, maxLength: undefined, selection: selection, multiline: false, onFocus: onFocus, onBlur: onBlur, value: value, ref: inputRef, 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(NumericInput);

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

@@ -0,0 +1,230 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const NUMERIC_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 getNumericInputType = ({ type }) => {
+    const currentType = NUMERIC_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"
+    },
+    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: {
+            minWidth: (typography.labelLargeSize.fontSize * 2) + (spaces.spacingMd * 2),
+            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/numericInput/type.js

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

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

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from "react";
+import { ScrollView, View } from "react-native";
+import stylesheet from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import { SafeAreaView } from "react-native-safe-area-context";
+const PageContainer = ({ backgroundColor = "default", isWrapSafeareaContext = false, safeAreaViewBackgroundColor, isScrollable = false, safeAreaViewStyle, scrollViewStyle, scrollViewProps, renderOverlays, customTheme, children, style, ...props }) => {
+    const { colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const renderScrollview = () => {
+        if (style) {
+            console.error("Hey!. You make wrong things. If you must be use isScrollable={true}, you must be use scrollViewStyle. Do not use style prop for this case.");
+        }
+        if (Object.keys(props).length) {
+            console.error("Hey!. You make wrong things. If you must be use isScrollable={true}, you must be use scrollViewProps. Do not use default view props for this case.");
+        }
+        return _jsx(ScrollView, { keyboardShouldPersistTaps: "handled", ...scrollViewProps, contentContainerStyle: [
+                {
+                    padding: spaces.spacingMd
+                },
+                scrollViewProps?.contentContainerStyle
+            ], style: [
+                {
+                    backgroundColor: colors.content.container[backgroundColor]
+                },
+                stylesheet.container,
+                scrollViewStyle
+            ], children: children });
+    };
+    const renderView = () => {
+        if (scrollViewStyle) {
+            console.error("Hey!. You make wrong things. If you must be use isScrollable={false}, you must be use style. Do not use scrollViewStyle prop for this case.");
+        }
+        if (scrollViewProps) {
+            console.error("Hey!. You make wrong things. If you must be use isScrollable={false}, you musn't use scrollViewProps.");
+        }
+        return _jsx(View, { ...props, style: [
+                {
+                    backgroundColor: colors.content.container[backgroundColor],
+                    padding: spaces.spacingMd
+                },
+                stylesheet.container,
+                style
+            ], children: children });
+    };
+    const renderWithSafeareaView = () => {
+        return _jsxs(SafeAreaView, { style: [
+                safeAreaViewStyle,
+                {
+                    backgroundColor: safeAreaViewBackgroundColor ? colors.content.container[safeAreaViewBackgroundColor] : colors.content.container[backgroundColor]
+                },
+                stylesheet.safeAreaViewContainer
+            ], children: [isScrollable ? renderScrollview() : renderView(), renderOverlays ? renderOverlays() : null] });
+    };
+    const renderWithoutSafeareaView = () => {
+        return isScrollable ? renderScrollview() : renderView();
+    };
+    const renderSafeareaContext = () => {
+        return isWrapSafeareaContext ? renderWithSafeareaView() : _jsxs(Fragment, { children: [renderWithoutSafeareaView(), renderOverlays ? renderOverlays() : null] });
+    };
+    return renderSafeareaContext();
+};
+export default PageContainer;

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

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+const stylesheet = StyleSheet.create({
+    container: {
+        flex: 1
+    },
+    safeAreaViewContainer: {
+        flex: 1
+    }
+});
+export default stylesheet;

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

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