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

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { View } from "react-native";
+import stylesheet, { getStateCardType, useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import Text from "../text";
+import Button from "../button";
+const StateCard = ({ type = "neutral", icon: IconProp, subTitleStyle, customTheme, titleStyle, subTitle, iconSize, action, title, style, ...props }) => {
+    const { spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const currentType = getStateCardType({
+        type
+    });
+    const { titleContainer: titleContainerDynamicStyle, actionButton: actionButtonDynamicStyle, container: containerDynamicStyle, subTitle: subTitleDynamicStyle, title: titleDynamicStyle, icon: iconDynamicStyle } = useStyles({
+        spaces
+    });
+    const iconProps = {
+        color: currentType.iconColor
+    };
+    const titleProps = {
+        color: currentType.titleColor
+    };
+    const subTitleProps = {
+        color: currentType.subTitleColor
+    };
+    const renderIcon = () => {
+        if (!IconProp) {
+            return null;
+        }
+        return _jsx(IconProp, { color: iconProps.color, size: iconSize ? iconSize : 75, style: iconDynamicStyle });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ], children: _jsx(Text, { variant: "headlineSmallSize", style: [
+                    titleStyle,
+                    stylesheet.title,
+                    titleDynamicStyle
+                ], ...titleProps, children: title }) });
+    };
+    const renderSubtitle = () => {
+        if (!subTitle) {
+            return null;
+        }
+        return _jsx(Text, { ...subTitleProps, variant: "bodyMediumSize", style: [
+                subTitleStyle,
+                stylesheet.subTitle,
+                subTitleDynamicStyle
+            ], children: subTitle });
+    };
+    const renderAction = () => {
+        if (!action) {
+            return null;
+        }
+        return _jsx(Button, { size: "small", ...action, spreadBehaviour: "free", type: type, style: [
+                action.style,
+                actionButtonDynamicStyle
+            ] });
+    };
+    return _jsxs(View, { ...props, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: [renderIcon(), renderTitle(), renderSubtitle(), renderAction()] });
+};
+export default StateCard;

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

@@ -0,0 +1,90 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const CHECK_BOX_TYPE_STYLES = {
+    primary: {
+        iconColor: "emphasized",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    },
+    danger: {
+        subTitleColor: "dangerLow",
+        containerColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        subTitleColor: "successLow",
+        containerColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        subTitleColor: "warningLow",
+        containerColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        subTitleColor: "infoLow",
+        containerColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        iconColor: "emphasized",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    }
+};
+export const getStateCardType = ({ type }) => {
+    const currentType = CHECK_BOX_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        justifyContent: "center",
+        flexDirection: "column",
+        alignItems: "center"
+    },
+    titleContainer: {
+        justifyContent: "flex-start",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {
+        textAlign: "center",
+        margin: 0
+    },
+    subTitle: {
+        textAlign: "center"
+    }
+});
+export const useStyles = ({ spaces }) => {
+    const styles = {
+        container: {
+            padding: spaces.spacingSm
+        },
+        titleContainer: {},
+        icon: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        },
+        title: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        },
+        subTitle: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        },
+        actionButton: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        }
+    };
+    return styles;
+};
+export default stylesheet;

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

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

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

@@ -0,0 +1,54 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from "react";
+import { View } from "react-native";
+import stylesheet, { getStickerType, useStyles } from "./stylesheet";
+import { NCoreUIKitTheme } from "../../core/hooks";
+import Text from "../text";
+const Sticker = ({ spreadBehaviour = "baseline", iconPosition = "left", type = "neutral", customTitleColor, customIconColor, size = "medium", icon: IconProp, customColor, customTheme, titleStyle, title, style, ...props }) => {
+    const { typography, radiuses, spaces, colors } = NCoreUIKitTheme.useContext(customTheme);
+    const currentType = getStickerType({
+        type
+    });
+    const { titleContainer: titleContainerDynamicStyle, container: containerDynamicStyle, title: titleDynamicStyle, icon: iconDynamicStyle } = useStyles({
+        spreadBehaviour,
+        iconPosition,
+        customColor,
+        currentType,
+        radiuses,
+        spaces,
+        colors,
+        size
+    });
+    const iconProps = {
+        color: customIconColor ? customIconColor : currentType.iconColor
+    };
+    const titleProps = {
+        color: customTitleColor ? customTitleColor : currentType.titleColor
+    };
+    const contentSize = size === "large" ? "bodyLargeSize" : size === "medium" ? "bodyMediumSize" : "bodySmallSize";
+    const renderIcon = () => {
+        if (!IconProp) {
+            return null;
+        }
+        return _jsx(IconProp, { color: iconProps.color, size: typography[contentSize].fontSize + 4, style: iconDynamicStyle });
+    };
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+        return _jsx(View, { style: [
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ], children: _jsx(Text, { style: [
+                    titleStyle,
+                    stylesheet.title,
+                    titleDynamicStyle
+                ], variant: contentSize, ...titleProps, children: title }) });
+    };
+    return _jsxs(View, { ...props, style: [
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ], children: [iconPosition === "left" ? renderIcon() : null, renderTitle(), iconPosition === "right" ? renderIcon() : null] });
+};
+export default Sticker;

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

@@ -0,0 +1,83 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const CHECK_BOX_TYPE_STYLES = {
+    primary: {
+        containerColor: "mid",
+        titleColor: "mid",
+        iconColor: "mid"
+    },
+    danger: {
+        containerColor: "danger",
+        titleColor: "danger",
+        iconColor: "danger"
+    },
+    success: {
+        containerColor: "success",
+        titleColor: "success",
+        iconColor: "success"
+    },
+    warning: {
+        containerColor: "warning",
+        titleColor: "warning",
+        iconColor: "warning"
+    },
+    info: {
+        containerColor: "info",
+        titleColor: "info",
+        iconColor: "info"
+    },
+    neutral: {
+        containerColor: "mid",
+        titleColor: "mid",
+        iconColor: "mid"
+    }
+};
+export const getStickerType = ({ type }) => {
+    const currentType = CHECK_BOX_TYPE_STYLES[type];
+    return currentType;
+};
+const stylesheet = StyleSheet.create({
+    container: {
+        backgroundColor: "transparent",
+        justifyContent: "center",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    titleContainer: {
+        justifyContent: "flex-start",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    title: {
+        textAlign: "center",
+        margin: 0
+    }
+});
+export const useStyles = ({ spreadBehaviour, iconPosition, customColor, currentType, radiuses, spaces, colors, size }) => {
+    const styles = {
+        container: {
+            paddingHorizontal: size === "small" ? spaces.spacingSm : spaces.spacingMd,
+            paddingVertical: size === "small" ? spaces.spacingXs : spaces.spacingSm,
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderRadius: radiuses.chip
+        },
+        titleContainer: {},
+        title: {},
+        icon: {}
+    };
+    if (customColor) {
+        styles.container.backgroundColor = colors.content.container[customColor];
+    }
+    if (spreadBehaviour === "baseline") {
+        styles.container.alignSelf = spreadBehaviour;
+        styles.container.width = "auto";
+    }
+    if (iconPosition === "right") {
+        styles.icon.marginLeft = spaces.spacingXs;
+    }
+    else {
+        styles.icon.marginRight = spaces.spacingXs;
+    }
+    return styles;
+};
+export default stylesheet;

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

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

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

@@ -0,0 +1,149 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { TouchableOpacity, Animated, Platform, Easing, View } from "react-native";
+import stylesheet, { getSwitchType, useStyles } from "./stylesheet";
+import { NCoreUIKitLocalize, NCoreUIKitTheme } from "../../core/hooks";
+import Loading from "../loading";
+import Text from "../text";
+const Switch = ({ displayBehaviourWhileLoading = "disabled", spreadBehaviour = "baseline", animationDuration = 100, isOptional = false, isDisabled = false, type = "neutral", isFlip = false, customLocalize, subTitleStyle, optionalText, customTheme, titleStyle, isLoading, isActive, subTitle, onPress, title, style, ...props }) => {
+    const { inlineSpaces, colors, spaces } = NCoreUIKitTheme.useContext(customTheme);
+    const { localize } = NCoreUIKitLocalize.useContext(customLocalize);
+    const indicatorAnim = useRef(new Animated.Value(0)).current;
+    const currentType = getSwitchType({
+        type
+    });
+    const SWITCH_INDICATOR_SIZE = 20;
+    const { indicatorContainer: indicatorContainerDynamicStyle, contentContainer: contentContainerDynamicStyle, titleContainer: titleContainerDynamicStyle, optionalText: optionalTextDynamicStyle, container: containerDynamicStyle, indicator: indicatorDynamicStyle, subTitle: subTitleDynamicStyle, loading: loadingDynamicStyle, overlay: overlayDynamicStyle, title: titleDynamicStyle } = useStyles({
+        displayBehaviourWhileLoading,
+        SWITCH_INDICATOR_SIZE,
+        spreadBehaviour,
+        inlineSpaces,
+        currentType,
+        isDisabled,
+        isLoading,
+        isActive,
+        isFlip,
+        colors,
+        spaces,
+        type
+    });
+    useEffect(() => {
+        if (isActive) {
+            Animated.timing(indicatorAnim, {
+                toValue: (SWITCH_INDICATOR_SIZE / 2) + spaces.spacingSm,
+                duration: animationDuration,
+                useNativeDriver: true,
+                easing: Easing.linear
+            }).start();
+        }
+        else {
+            Animated.timing(indicatorAnim, {
+                duration: animationDuration,
+                useNativeDriver: true,
+                easing: Easing.linear,
+                toValue: 0
+            }).start();
+        }
+    }, [isActive]);
+    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 (isActive && 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 renderIndicator = () => {
+        return _jsx(Animated.View, { style: [
+                stylesheet.indicator,
+                indicatorDynamicStyle,
+                {
+                    transform: [{
+                            translateX: indicatorAnim
+                        }]
+                }
+            ] });
+    };
+    const renderIndicatorContainer = () => {
+        if (isLoading) {
+            return _jsx(Loading, { style: [
+                    loadingDynamicStyle
+                ] });
+        }
+        return _jsxs(View, { style: [
+                stylesheet.indicatorContainer,
+                indicatorContainerDynamicStyle
+            ], children: [renderIndicator(), 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 : renderIndicatorContainer(), renderContent(), isFlip ? renderIndicatorContainer() : null] }));
+};
+export default Switch;

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

@@ -0,0 +1,158 @@
+import { StyleSheet } from "react-native";
+import {} from "./type";
+export const SWITCH_TYPE_STYLES = {
+    primary: {
+        indicatorColor: "default",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    },
+    danger: {
+        subTitleColor: "dangerLow",
+        indicatorColor: "danger",
+        containerColor: "danger",
+        titleColor: "danger"
+    },
+    success: {
+        subTitleColor: "successLow",
+        indicatorColor: "success",
+        containerColor: "success",
+        titleColor: "success"
+    },
+    warning: {
+        subTitleColor: "warningLow",
+        indicatorColor: "warning",
+        containerColor: "warning",
+        titleColor: "warning"
+    },
+    info: {
+        subTitleColor: "infoLow",
+        indicatorColor: "info",
+        containerColor: "info",
+        titleColor: "info"
+    },
+    neutral: {
+        indicatorColor: "default",
+        containerColor: "mid",
+        subTitleColor: "low",
+        titleColor: "mid"
+    }
+};
+export const getSwitchType = ({ type }) => {
+    const currentType = SWITCH_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"
+    },
+    indicator: {},
+    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: 0,
+        right: 0,
+        left: 0,
+        top: 0
+    }
+});
+export const useStyles = ({ displayBehaviourWhileLoading, SWITCH_INDICATOR_SIZE, spreadBehaviour, inlineSpaces, currentType, isDisabled, isLoading, isActive, colors, isFlip, spaces, type }) => {
+    const styleType = type === "danger" ? "error" : type;
+    const styles = {
+        container: {
+            padding: spaces.spacingSm
+        },
+        indicatorContainer: {
+            backgroundColor: colors.content.container[currentType.containerColor],
+            borderRadius: (SWITCH_INDICATOR_SIZE + (spaces.spacingSm * 2)) / 2,
+            width: (SWITCH_INDICATOR_SIZE * 1.5) + (spaces.spacingSm * 2),
+            padding: spaces.spacingXs
+        },
+        indicator: {
+            backgroundColor: colors.content.icon[currentType.indicatorColor],
+            borderRadius: SWITCH_INDICATOR_SIZE / 2,
+            height: SWITCH_INDICATOR_SIZE,
+            width: SWITCH_INDICATOR_SIZE
+        },
+        contentContainer: {
+            marginLeft: spaces.spacingSm
+        },
+        titleContainer: {},
+        title: {},
+        subTitle: {},
+        loading: {},
+        overlay: {
+            borderRadius: (SWITCH_INDICATOR_SIZE + (spaces.spacingSm * 2)) / 2
+        },
+        optionalText: {
+            marginLeft: inlineSpaces.subTitle
+        }
+    };
+    if (isLoading) {
+        if (displayBehaviourWhileLoading === "disabled") {
+            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 (isActive) {
+        if (styleType === "neutral") {
+            styles.indicatorContainer.backgroundColor = colors.content.container.emphasized;
+            styles.indicator.backgroundColor = colors.content.icon.emphasized;
+        }
+    }
+    if (isDisabled) {
+        if (styleType === "neutral" && isActive) {
+            styles.indicatorContainer.backgroundColor = colors.system.state.border.disabled.primary;
+        }
+        styles.overlay.backgroundColor = colors.system.state.overlay.disabled[styleType];
+        styles.overlay.display = "flex";
+    }
+    return styles;
+};
+export default stylesheet;

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

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

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import {} from "react";
+import { Text as NativeText } from "react-native";
+import { NCoreUIKitTheme } from "../../core/hooks";
+const Text = ({ variant = "bodyMediumSize", color = "mid", customColor, customTheme, children, style, ...props }) => {
+    const { typography, colors } = NCoreUIKitTheme.useContext(customTheme);
+    return (_jsx(NativeText, { ...props, style: [
+            style,
+            {
+                ...typography[variant],
+                color: customColor ? customColor : color ? colors.content.text[color] : colors.content.text.mid
+            }
+        ], children: children }));
+};
+export default Text;

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

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