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

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

@@ -0,0 +1,23 @@
+import { StyleSheet } from "react-native";
+import { windowWidth } from "../../utils";
+const stylesheet = StyleSheet.create({
+    container: {
+        transformOrigin: "bottom",
+        position: "absolute",
+        zIndex: 99999,
+        bottom: 0,
+        right: 0,
+        left: 0
+    },
+    handleContainer: {
+        justifyContent: "center",
+        alignItems: "center",
+        position: "absolute",
+        right: 0,
+        left: 0
+    },
+    handle: {
+        width: windowWidth / 10
+    }
+});
+export default stylesheet;

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

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

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { TouchableOpacity, View } from "react-native";
+import stylesheet, { getButtonVariant, getButtonSize, getButtonType, useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import Loading from "../loading";
+import Text from "../text";
+/**
+ * A generic button
+ * @param props {@link IButtonProps}
+ * @returns Element
+ */
+const Button = ({ displayBehaviourWhileLoading = "disabled", spreadBehaviour = "baseline", isCustomPadding = false, icon: IconComponentProp, iconDirection = "left", variant = "filled", isDisabled = false, type = "primary", size = "medium", renderLoading, customTheme, titleStyle, isLoading, onPress, title, style, ...props }) => {
+    const { typography, radiuses, borders, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const currentSize = getButtonSize({
+        spaces,
+        size
+    });
+    const currentVariant = getButtonVariant({
+        variant,
+    });
+    const currentType = getButtonType({
+        type,
+    });
+    const { container: containerDynamicStyle, loading: loadingDynamicStyle, overlay: overlayDynamicStyle, title: titleDynamicStyle } = useStyles({
+        displayBehaviourWhileLoading,
+        icon: IconComponentProp,
+        isCustomPadding,
+        spreadBehaviour,
+        currentVariant,
+        iconDirection,
+        currentType,
+        currentSize,
+        isDisabled,
+        isLoading,
+        radiuses,
+        variant,
+        borders,
+        colors,
+        spaces,
+        title,
+        type
+    });
+    const titleProps = {
+        color: currentType.titleColor,
+    };
+    const iconProps = {
+        size: Number(typography[currentSize.fontSize].fontSize),
+        color: currentType.iconColor
+    };
+    if (currentVariant.titleColor !== "type") {
+        titleProps.color = currentType.titleColor;
+    }
+    if (currentVariant.iconColor !== "type") {
+        iconProps.color = currentType.iconColor;
+    }
+    if (type === "primary" && variant === "filled") {
+        iconProps.color = "onPrimary";
+        titleProps.color = "onPrimary";
+    }
+    if (type === "primary" && variant !== "filled") {
+        iconProps.color = "emphasized";
+        titleProps.color = "emphasized";
+    }
+    if (isDisabled || isLoading) {
+        const stateType = type === "danger" ? "error" : type;
+        titleProps.customColor = colors.system.state.content.disabled[stateType];
+        iconProps.customColor = colors.system.state.content.disabled[stateType];
+    }
+    const renderIcon = () => {
+        if (isLoading) {
+            if (renderLoading) {
+                return renderLoading();
+            }
+            return _jsx(Loading, { ...iconProps, style: [
+                    loadingDynamicStyle
+                ] });
+        }
+        if (!IconComponentProp) {
+            return null;
+        }
+        return _jsx(IconComponentProp, { ...iconProps });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsx(Text, { variant: currentSize.fontSize, style: [
+                titleStyle,
+                stylesheet.title,
+                titleDynamicStyle
+            ], ...titleProps, children: title });
+    };
+    const renderOverlay = () => {
+        return _jsx(View, { style: [
+                stylesheet.loading,
+                stylesheet.overlay,
+                overlayDynamicStyle
+            ] });
+    };
+    return _jsxs(TouchableOpacity, { ...props, onPress: isDisabled || isLoading ? () => null : onPress, disabled: isDisabled || isLoading, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: [renderIcon(), renderTitle(), renderOverlay()] });
+};
+export default Button;

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

@@ -0,0 +1,209 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const BUTTON_SIZES = {
+    small: {
+        paddingHorizontal: "spacingMd",
+        paddingVertical: "spacingSm",
+        fontSize: "labelSmallSize"
+    },
+    medium: {
+        paddingHorizontal: "spacingLg",
+        paddingVertical: "spacingMd",
+        fontSize: "labelMediumSize"
+    },
+    large: {
+        paddingHorizontal: "spacingXl",
+        paddingVertical: "spacingLg",
+        fontSize: "labelLargeSize"
+    }
+};
+export const BUTTON_VARIANT_STYLES = {
+    filled: {
+        borderColor: "container",
+        containerColor: "type",
+        titleColor: "type",
+        iconColor: "type"
+    },
+    outline: {
+        containerColor: "transparent",
+        borderColor: "type",
+        titleColor: "type",
+        iconColor: "type"
+    },
+    ghost: {
+        containerColor: "transparent",
+        borderColor: "transparent",
+        titleColor: "type",
+        iconColor: "type"
+    }
+};
+export const BUTTON_TYPE_STYLES = {
+    primary: {
+        containerColor: "primary",
+        borderColor: "emphasized",
+        titleColor: "onPrimary",
+        iconColor: "onPrimary"
+    },
+    danger: {
+        containerColor: "danger",
+        borderColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        containerColor: "success",
+        borderColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        containerColor: "warning",
+        borderColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        containerColor: "info",
+        borderColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        containerColor: "subtle",
+        borderColor: "subtle",
+        titleColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getButtonType = ({ type }) => {
+    const currentType = BUTTON_TYPE_STYLES[type];
+    return currentType;
+};
+export const getButtonVariant = ({ variant }) => {
+    const currentVariant = BUTTON_VARIANT_STYLES[variant];
+    return currentVariant;
+};
+export const getButtonSize = ({ spaces, size }) => {
+    const currentSize = BUTTON_SIZES[size];
+    return {
+        paddingHorizontal: spaces[currentSize.paddingHorizontal],
+        paddingVertical: spaces[currentSize.paddingVertical],
+        fontSize: currentSize.fontSize
+    };
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        flexDirection: "row",
+        borderStyle: "solid",
+        alignItems: "center",
+        position: "relative",
+        display: "flex"
+    },
+    title: {
+        margin: "0",
+    },
+    loading: {},
+    overlay: {
+        position: "absolute",
+        display: "none",
+        bottom: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    }
+});
+export const useStyles = ({ displayBehaviourWhileLoading, spreadBehaviour, isCustomPadding, currentVariant, iconDirection, currentType, currentSize, isDisabled, isLoading, radiuses, variant, borders, colors, spaces, title, icon, type }) => {
+    const styleType = type === "danger" ? "error" : type;
+    const styles = {
+        container: {
+            paddingRight: currentSize.paddingHorizontal,
+            paddingBottom: currentSize.paddingVertical,
+            paddingLeft: currentSize.paddingHorizontal,
+            paddingTop: currentSize.paddingVertical,
+            borderRadius: radiuses.actions,
+            borderWidth: borders.line
+        },
+        title: {},
+        loading: {},
+        overlay: {
+            borderRadius: radiuses.actions - 2
+        }
+    };
+    if (currentVariant.containerColor === "type") {
+        styles.container.backgroundColor = colors.content.container[currentType.containerColor];
+    }
+    else {
+        styles.container.backgroundColor = "transparent";
+    }
+    if (currentVariant.borderColor === "type") {
+        styles.container.borderColor = colors.content.border[currentType.borderColor];
+    }
+    else if (currentVariant.borderColor === "container") {
+        styles.container.borderColor = styles.container.backgroundColor;
+    }
+    else {
+        styles.container.borderColor = "transparent";
+    }
+    if (isLoading) {
+        styles.title.marginLeft = spaces.spacingSm;
+        styles.overlay.display = "flex";
+        if (displayBehaviourWhileLoading === "disabled") {
+            if (variant !== "ghost") {
+                styles.container.borderColor = colors.system.state.overlay.disabled[styleType];
+                if (variant === "filled") {
+                    styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+                }
+            }
+        }
+    }
+    if (isLoading && spreadBehaviour === "stretch") {
+        styles.title.marginLeft = spaces.spacingSm;
+        styles.title.margin = "initial";
+    }
+    if (icon && !isLoading) {
+        styles.title.marginLeft = spaces.spacingSm;
+        styles.title.margin = "initial";
+    }
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+    else if (spreadBehaviour === "stretch") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
+    }
+    if (isDisabled) {
+        if (variant !== "ghost") {
+            styles.container.borderColor = colors.system.state.overlay.disabled[styleType];
+            if (variant === "filled") {
+                styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+            }
+        }
+    }
+    if (icon && title) {
+        if (iconDirection === "left") {
+            styles.title.marginLeft = spaces.spacingSm;
+        }
+        else {
+            styles.title.marginRight = spaces.spacingSm;
+        }
+    }
+    if (icon && !title) {
+        styles.container.paddingBottom = currentSize.paddingVertical;
+        styles.container.paddingRight = currentSize.paddingVertical;
+        styles.container.paddingLeft = currentSize.paddingVertical;
+        styles.container.paddingTop = currentSize.paddingVertical;
+    }
+    if (isCustomPadding) {
+        delete styles.container.paddingBottom;
+        delete styles.container.paddingRight;
+        delete styles.container.paddingLeft;
+        delete styles.container.paddingTop;
+    }
+    return styles;
+};
+export default stylesheet;

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

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

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

@@ -0,0 +1,133 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import { TouchableOpacity, Platform, View } from "react-native";
+import stylesheet, { getCheckBoxType, useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../core/hooks";
+import { Check, Minus } from "lucide-react-native";
+import Loading from "../loading";
+import Text from "../text";
+const CheckBox = ({ displayBehaviourWhileLoading = "disabled", spreadBehaviour = "baseline", isOptional = false, isDisabled = false, type = "neutral", isFlip = false, customLocalize, subTitleStyle, optionalText, customTheme, titleStyle, isChecked, isLoading, subTitle, onPress, title, style, ...props }) => {
+    const { inlineSpaces, radiuses, borders, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const { localize } = NCoreUIKitLocalize.useContext(customLocalize);
+    const currentType = getCheckBoxType({
+        type
+    });
+    const { indicatorContainer: indicatorContainerDynamicStyle, contentContainer: contentContainerDynamicStyle, titleContainer: titleContainerDynamicStyle, optionalText: optionalTextDynamicStyle, container: containerDynamicStyle, subTitle: subTitleDynamicStyle, loading: loadingDynamicStyle, overlay: overlayDynamicStyle, title: titleDynamicStyle } = useStyles({
+        displayBehaviourWhileLoading,
+        spreadBehaviour,
+        inlineSpaces,
+        currentType,
+        isDisabled,
+        isChecked,
+        isLoading,
+        radiuses,
+        borders,
+        isFlip,
+        colors,
+        spaces,
+        type
+    });
+    const titleProps = {
+        color: currentType.titleColor,
+    };
+    const subTitleProps = {
+        color: currentType.subTitleColor,
+    };
+    const indicatorIconProps = {
+        color: currentType.indicatorColor
+    };
+    if (isDisabled || isLoading) {
+        const stateType = type === "danger" ? "error" : type;
+        subTitleProps.customColor = colors.system.state.content.disabled[stateType];
+        titleProps.customColor = colors.system.state.content.disabled[stateType];
+        if (isChecked && stateType === "neutral") {
+            indicatorIconProps.customColor = colors.system.state.border.disabled.primary;
+        }
+        else {
+            indicatorIconProps.customColor = colors.system.state.border.disabled[stateType];
+        }
+    }
+    const renderOptionalText = () => {
+        if (!isOptional && !optionalText) {
+            return null;
+        }
+        return _jsxs(Text, { variant: "labelLargeSize", color: titleProps.color, style: [
+                optionalTextDynamicStyle
+            ], ...titleProps, children: ["( ", isOptional ? localize("is-optional") : optionalText, " )"] });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ], children: [_jsx(Text, { variant: "bodyMediumSize", style: [
+                        titleStyle,
+                        stylesheet.title,
+                        titleDynamicStyle
+                    ], ...titleProps, children: title }), renderOptionalText()] });
+    };
+    const renderCheckIcon = () => {
+        if (!isChecked) {
+            return _jsx(View, { style: {
+                    height: 16,
+                    width: 16
+                } });
+        }
+        const selectedColor = indicatorIconProps.customColor ? indicatorIconProps.customColor : colors.content.border[indicatorIconProps.color];
+        if (isChecked === "partially") {
+            return _jsx(Minus, { color: selectedColor, size: 16 });
+        }
+        return _jsx(Check, { color: selectedColor, size: 16 });
+    };
+    const renderCheckIndicator = () => {
+        if (isLoading) {
+            return _jsx(Loading, { style: [
+                    loadingDynamicStyle
+                ] });
+        }
+        return _jsxs(View, { style: [
+                stylesheet.indicatorContainer,
+                indicatorContainerDynamicStyle
+            ], children: [renderCheckIcon(), renderOverlay()] });
+    };
+    const renderOverlay = () => {
+        return _jsx(View, { style: [
+                stylesheet.overlay,
+                overlayDynamicStyle
+            ] });
+    };
+    const renderSubtitle = () => {
+        if (!subTitle) {
+            return null;
+        }
+        return _jsx(Text, { ...subTitleProps, style: [
+                subTitleStyle,
+                stylesheet.subTitle,
+                subTitleDynamicStyle
+            ], children: subTitle });
+    };
+    const renderContent = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsxs(View, { style: [
+                stylesheet.contentContainer,
+                contentContainerDynamicStyle
+            ], children: [renderTitle(), renderSubtitle()] });
+    };
+    return (_jsxs(TouchableOpacity, { ...props, onPress: isDisabled || isLoading ? () => null : onPress ? onPress : undefined, disabled: isDisabled || isLoading || !onPress, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], ...Platform.select({
+            web: {
+                dataSet: {
+                    disablePressableDownEffect: "true"
+                }
+            },
+            default: {}
+        }), children: [isFlip ? null : renderCheckIndicator(), renderContent(), isFlip ? renderCheckIndicator() : null] }));
+};
+export default CheckBox;

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

@@ -0,0 +1,166 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const CHECK_BOX_TYPE_STYLES = {
+    primary: {
+        indicatorColor: "emphasized",
+        borderColor: "emphasized",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    },
+    danger: {
+        subTitleColor: "dangerLow",
+        indicatorColor: "danger",
+        containerColor: "danger",
+        borderColor: "danger",
+        titleColor: "danger"
+    },
+    success: {
+        subTitleColor: "successLow",
+        indicatorColor: "success",
+        containerColor: "success",
+        borderColor: "success",
+        titleColor: "success"
+    },
+    warning: {
+        subTitleColor: "warningLow",
+        indicatorColor: "warning",
+        containerColor: "warning",
+        borderColor: "warning",
+        titleColor: "warning"
+    },
+    info: {
+        subTitleColor: "infoLow",
+        indicatorColor: "info",
+        containerColor: "info",
+        borderColor: "info",
+        titleColor: "info"
+    },
+    neutral: {
+        indicatorColor: "emphasized",
+        containerColor: "mid",
+        borderColor: "subtle",
+        subTitleColor: "low",
+        titleColor: "mid"
+    }
+};
+export const getCheckBoxType = ({ type }) => {
+    const currentType = CHECK_BOX_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        borderColor: "transparent",
+        flexDirection: "row",
+        borderStyle: "solid",
+        alignItems: "center",
+        display: "flex"
+    },
+    indicatorContainer: {
+        position: "relative"
+    },
+    contentContainer: {
+        justifyContent: "center",
+        flexDirection: "column"
+    },
+    titleContainer: {
+        justifyContent: "flex-start",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {
+        textAlign: "left",
+        margin: 0
+    },
+    subTitle: {
+        textAlign: "left"
+    },
+    loading: {},
+    overlay: {
+        position: "absolute",
+        display: "none",
+        zIndex: 999,
+        bottom: -2,
+        right: -2,
+        left: -2,
+        top: -2
+    }
+});
+export const useStyles = ({ displayBehaviourWhileLoading, spreadBehaviour, inlineSpaces, currentType, isDisabled, isLoading, isChecked, radiuses, borders, colors, isFlip, spaces, type }) => {
+    const styleType = type === "danger" ? "error" : type;
+    const styles = {
+        container: {
+            padding: spaces.spacingSm
+        },
+        indicatorContainer: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderColor: colors.content.border[currentType.borderColor],
+            borderRadius: radiuses.actions,
+            borderWidth: borders.line,
+            padding: spaces.spacingXs
+        },
+        contentContainer: {
+            marginLeft: spaces.spacingSm
+        },
+        titleContainer: {},
+        title: {},
+        subTitle: {},
+        loading: {},
+        overlay: {
+            borderRadius: radiuses.actions
+        },
+        optionalText: {
+            marginLeft: inlineSpaces.subTitle
+        }
+    };
+    if (styleType === "neutral") {
+        styles.indicatorContainer.borderColor = colors.content.border.default;
+    }
+    if (isLoading) {
+        if (displayBehaviourWhileLoading === "disabled") {
+            styles.indicatorContainer.borderColor = colors.system.state.overlay.disabled[styleType];
+            styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+            styles.overlay.display = "flex";
+        }
+    }
+    if (isFlip) {
+        styles.contentContainer.marginRight = spaces.spacingSm;
+        styles.titleContainer.justifyContent = "flex-end";
+        styles.contentContainer.marginLeft = 0;
+        styles.subTitle.textAlign = "right";
+        styles.title.textAlign = "right";
+    }
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+    else if (spreadBehaviour === "stretch") {
+        styles.contentContainer.alignSelf = spreadBehaviour;
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.justifyContent = "center";
+        styles.contentContainer.flexShrink = 1;
+        styles.contentContainer.width = "100%";
+        styles.container.flexShrink = 1;
+        styles.container.width = "100%";
+    }
+    if (isChecked) {
+        if (styleType === "neutral") {
+            styles.indicatorContainer.backgroundColor = colors.content.container.selected;
+            styles.indicatorContainer.borderColor = colors.content.border.emphasized;
+        }
+    }
+    if (isDisabled) {
+        if (styleType === "neutral" && isChecked) {
+            styles.indicatorContainer.backgroundColor = colors.system.state.border.disabled.primary;
+            styles.indicatorContainer.borderColor = colors.system.state.border.disabled.primary;
+        }
+        else {
+            styles.indicatorContainer.borderColor = colors.system.state.border.disabled[styleType];
+        }
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+        styles.overlay.display = "flex";
+    }
+    return styles;
+};
+export default stylesheet;

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

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