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

package/src/components/numericInput/stylesheet.ts

@@ -0,0 +1,278 @@
+import {
+    type ViewStyle,
+    type TextStyle,
+    StyleSheet
+} from "react-native";
+import {
+    type NumericInputDynamicStyleType,
+    type NumericInputTypes,
+    type NumericInputType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+export const NUMERIC_INPUT_TYPE_STYLES: Record<
+    NumericInputType,
+    NumericInputTypes
+> = {
+    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
+}: {
+    type: NumericInputType;
+}) => {
+    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
+}: NumericInputDynamicStyleType) => {
+    const styleType = type === "danger" ? "error" : type === "question" ? "neutral" : type;
+
+    const styles = {
+        container: {
+        } as Mutable<ViewStyle>,
+        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
+        } as Mutable<ViewStyle>,
+        input: {
+            ...typography.labelLargeSize,
+            color: colors.content.text[currentType.inputColor]
+        } as Mutable<TextStyle>,
+        cleanButton: {
+            marginLeft: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        hideTextIconContainer: {
+            marginLeft: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        titleContainer: {
+            marginBottom: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        title: {
+        } as Mutable<TextStyle>,
+        icon: {
+            marginRight: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        required: {
+            marginRight: inlineSpaces.required
+        } as Mutable<ViewStyle>,
+        hintTextIcon: {
+            marginRight: spaces.spacingXs
+        } as Mutable<ViewStyle>,
+        hintText: {
+            marginTop: spaces.spacingSm
+        } as Mutable<TextStyle>,
+        subTitle: {
+            marginLeft: inlineSpaces.subTitle
+        } as Mutable<TextStyle>,
+        overlay: {
+            borderRadius: radiuses.actions - 1
+        } as Mutable<ViewStyle>,
+        rightIcon: {
+            marginLeft: spaces.spacingSm
+        } as Mutable<ViewStyle>
+    };
+
+    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/src/components/numericInput/type.ts

@@ -0,0 +1,109 @@
+import type {
+    ComponentRef
+} from "react";
+import {
+    type TextInputProps,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+    TextInput
+} from "react-native";
+import {
+    type NCoreUIKitIcon
+} from "../../types";
+
+export type INumericInputRef = {
+    updateValue: (text: string) => void;
+    cleanText: () => void;
+    focus: () => void;
+    blur: () => void;
+};
+
+export type NumericInputDynamicStyleType = {
+    inlineSpaces: NCoreUIKit.ActivePalette["inlineSpaces"];
+    typography: NCoreUIKit.ActivePalette["typography"];
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    spreadBehaviour?: NumericInputSpreadBehaviour;
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    currentType: NumericInputTypes;
+    borders: NCoreUIKit.Borders;
+    type: NumericInputType;
+    isDisabled?: boolean;
+    isFocused: boolean;
+    title?: string;
+    icon?: boolean;
+};
+
+export type NumericInputTypes = {
+    containerColor: keyof NCoreUIKit.ContainerContentColors;
+    focusBorderColor: keyof NCoreUIKit.BorderContentColors;
+    hintTextIconColor: keyof NCoreUIKit.IconContentColors;
+    placeholderColor: keyof NCoreUIKit.TextContentColors;
+    hintTextColor: keyof NCoreUIKit.TextContentColors;
+    borderColor: keyof NCoreUIKit.BorderContentColors;
+    inputColor: keyof NCoreUIKit.TextContentColors;
+    titleColor: keyof NCoreUIKit.TextContentColors;
+    iconColor: keyof NCoreUIKit.IconContentColors;
+};
+
+export type NumericInputType = "default" | "danger" | "warning" | "question" | "success" | "info";
+
+export type NumericInputInstance = NonNullable<ComponentRef<typeof TextInput>>;
+
+export type NumericInputSpreadBehaviour = "baseline" | "stretch" | "free";
+
+export type NumericInputVariant = "text" | "hidden";
+
+interface INumericInputProps extends TextInputProps {
+    inputStyle?: StyleProp<TextStyle> | Array<StyleProp<TextStyle>>;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    customLocalize?: {
+        activeLocale?: keyof NCoreUIKit.LocaleKey;
+    };
+    spreadBehaviour?: NumericInputSpreadBehaviour;
+    onChangeText?: (value: string) => void;
+    validation?: (
+        text: string,
+        setText: (text: string) => void
+    ) => boolean;
+    isAutoKeyboardDismissOnBlur?: boolean;
+    hintTextContainerStyle?: ViewStyle;
+    contentContainerStyle?: ViewStyle;
+    isShowHideTextButton?: boolean;
+    isWorkWithDebouncer?: boolean;
+    hideTextIconStyle?: ViewStyle;
+    rightIconOnPress?: () => void;
+    hintTextIcon?: NCoreUIKitIcon;
+    variant?: NumericInputVariant;
+    isShowHintTextIcon?: boolean;
+    cleanIconStyle?: ViewStyle;
+    rightIconStyle?: ViewStyle;
+    rightIcon?: NCoreUIKitIcon;
+    isShowSubTitle?: boolean;
+    isCleanEnabled?: boolean;
+    iconOnPress?: () => void;
+    type?: NumericInputType;
+    initialValue?: string;
+    iconStyle?: ViewStyle;
+    icon?: NCoreUIKitIcon;
+    placeholder?: string;
+    isRequired?: boolean;
+    isDisabled?: boolean;
+    isOptional?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    hintText?: string;
+    subTitle?: string;
+    style?: ViewStyle;
+    title?: string;
+    id?: string;
+};
+export type {
+    INumericInputProps as default
+};

package/src/components/pageContainer/index.tsx

@@ -0,0 +1,119 @@
+import {
+    Fragment,
+    type FC
+} from "react";
+import {
+    ScrollView,
+    View
+} from "react-native";
+import type IPageContainerProps from "./type";
+import stylesheet from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import {
+    SafeAreaView
+} from "react-native-safe-area-context";
+
+const PageContainer: FC<IPageContainerProps> = ({
+    backgroundColor = "default" as keyof NCoreUIKit.ContainerContentColors,
+    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 <ScrollView
+            keyboardShouldPersistTaps="handled"
+            {...scrollViewProps}
+            contentContainerStyle={[
+                {
+                    padding: spaces.spacingMd
+                },
+                scrollViewProps?.contentContainerStyle
+            ]}
+            style={[
+                {
+                    backgroundColor: colors.content.container[backgroundColor]
+                },
+                stylesheet.container,
+                scrollViewStyle
+            ]}
+        >
+            {children}
+        </ScrollView>;
+    };
+
+    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 <View
+            {...props}
+            style={[
+                {
+                    backgroundColor: colors.content.container[backgroundColor],
+                    padding: spaces.spacingMd
+                },
+                stylesheet.container,
+                style
+            ]}
+        >
+            {children}
+        </View>;
+    };
+
+    const renderWithSafeareaView = () => {
+        return <SafeAreaView
+            style={[
+                safeAreaViewStyle,
+                {
+                    backgroundColor: safeAreaViewBackgroundColor ? colors.content.container[safeAreaViewBackgroundColor] : colors.content.container[backgroundColor]
+                },
+                stylesheet.safeAreaViewContainer
+            ]}
+        >
+            {isScrollable ? renderScrollview() : renderView()}
+            {renderOverlays ? renderOverlays() : null}
+        </SafeAreaView>;
+    };
+
+    const renderWithoutSafeareaView = () => {
+        return isScrollable ? renderScrollview() : renderView();
+    };
+
+    const renderSafeareaContext = () => {
+        return isWrapSafeareaContext ? renderWithSafeareaView() : <Fragment>
+            {renderWithoutSafeareaView()}
+            {renderOverlays ? renderOverlays() : null}
+        </Fragment>;
+    };
+
+    return renderSafeareaContext();
+};
+export default PageContainer;

package/src/components/pageContainer/stylesheet.ts

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

package/src/components/pageContainer/type.ts

@@ -0,0 +1,30 @@
+import {
+    type ReactNode
+} from "react";
+import type {
+    ScrollViewProps,
+    StyleProp,
+    ViewStyle
+} from "react-native";
+
+interface IPageContainerProps {
+    safeAreaViewBackgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    safeAreaViewStyle?: StyleProp<ViewStyle>;
+    scrollViewStyle?: StyleProp<ViewStyle>;
+    scrollViewProps?: ScrollViewProps;
+    renderOverlays?: () => ReactNode;
+    isWrapSafeareaContext?: boolean;
+    style?: StyleProp<ViewStyle>;
+    isScrollable?: boolean;
+    children?: ReactNode;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+}
+export type {
+    IPageContainerProps as default
+};