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

package/src/components/stateCard/index.tsx

@@ -0,0 +1,152 @@
+import {
+    type FC
+} from "react";
+import {
+    View
+} from "react-native";
+import type IStateCardProps from "./type";
+import stylesheet, {
+    getStateCardType,
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import type {
+    INCoreUIKitIconProps
+} from "../../types";
+import type ITextProps from "../text/type";
+import Text from "../text";
+import Button from "../button";
+
+const StateCard: FC<IStateCardProps> = ({
+    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: INCoreUIKitIconProps = {
+        color: currentType.iconColor
+    };
+
+    const titleProps: ITextProps = {
+        color: currentType.titleColor
+    };
+
+    const subTitleProps: ITextProps = {
+        color: currentType.subTitleColor
+    };
+
+    const renderIcon = () => {
+        if(!IconProp) {
+            return null;
+        }
+
+        return <IconProp
+            color={iconProps.color as keyof NCoreUIKit.IconContentColors}
+            size={iconSize ? iconSize : 75}
+            style={iconDynamicStyle}
+        />;
+    };
+
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+
+        return <View
+            style={[
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ]}
+        >
+            <Text
+                variant="headlineSmallSize"
+                style={[
+                    titleStyle,
+                    stylesheet.title,
+                    titleDynamicStyle
+                ]}
+                {...titleProps}
+            >
+                {title}
+            </Text>
+        </View>;
+    };
+
+    const renderSubtitle = () => {
+        if(!subTitle) {
+            return null;
+        }
+
+        return <Text
+            {...subTitleProps}
+            variant="bodyMediumSize"
+            style={[
+                subTitleStyle,
+                stylesheet.subTitle,
+                subTitleDynamicStyle
+            ]}
+        >
+            {subTitle}
+        </Text>;
+    };
+
+    const renderAction = () => {
+        if(!action) {
+            return null;
+        }
+
+        return <Button
+            size="small"
+            {...action}
+            spreadBehaviour="free"
+            type={type}
+            style={[
+                action.style,
+                actionButtonDynamicStyle
+            ]}
+        />;
+    };
+
+    return <View
+        {...props}
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        {renderIcon()}
+        {renderTitle()}
+        {renderSubtitle()}
+        {renderAction()}
+    </View>;
+};
+export default StateCard;

package/src/components/stateCard/stylesheet.ts

@@ -0,0 +1,121 @@
+import {
+    type TextStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import {
+    type StateCardDynamicStyleType,
+    type StateCardTypeConstantType,
+    type StateCardTypes,
+    type StateCardType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+export const CHECK_BOX_TYPE_STYLES: Record<
+    StateCardType,
+    {
+        containerColor: keyof NCoreUIKit.ContainerContentColors;
+        subTitleColor: keyof NCoreUIKit.TextContentColors;
+        titleColor: keyof NCoreUIKit.TextContentColors;
+        iconColor: keyof NCoreUIKit.IconContentColors;
+    }
+> = {
+    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
+}: StateCardTypeConstantType): StateCardTypes => {
+    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
+}: StateCardDynamicStyleType) => {
+    const styles = {
+        container: {
+            padding: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        titleContainer: {
+        } as Mutable<ViewStyle>,
+        icon: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        },
+        title: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        } as Mutable<TextStyle>,
+        subTitle: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        } as Mutable<TextStyle>,
+        actionButton: {
+            marginBottom: spaces.spacingXs,
+            marginTop: spaces.spacingXs
+        } as Mutable<ViewStyle>
+    };
+
+    return styles;
+};
+export default stylesheet;

package/src/components/stateCard/type.ts

@@ -0,0 +1,47 @@
+import {
+    type ViewStyle,
+    type StyleProp,
+    type TextStyle
+} from "react-native";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+import type IButtonProps from "../button/type";
+
+export type StateCardDynamicStyleType = {
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+};
+
+export type StateCardTypes = {
+    containerColor: keyof NCoreUIKit.ContainerContentColors;
+    subTitleColor: keyof NCoreUIKit.TextContentColors;
+    titleColor: keyof NCoreUIKit.TextContentColors;
+    iconColor: keyof NCoreUIKit.IconContentColors;
+};
+
+export type StateCardTypeConstantType = {
+    type: StateCardType;
+};
+
+export type StateCardType = "primary" | "danger" | "warning" | "neutral" | "success" | "info";
+
+interface IStateCardProps {
+    subTitleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    action?: IButtonProps;
+    icon?: NCoreUIKitIcon;
+    type?: StateCardType;
+    iconSize?: number;
+    subTitle?: string;
+    title?: string;
+}
+export type {
+    IStateCardProps as default
+};

package/src/components/sticker/index.tsx

@@ -0,0 +1,123 @@
+import {
+    type FC
+} from "react";
+import {
+    View
+} from "react-native";
+import type IStickerProps from "./type";
+import stylesheet, {
+    getStickerType,
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import type {
+    INCoreUIKitIconProps
+} from "../../types";
+import type ITextProps from "../text/type";
+import Text from "../text";
+
+const Sticker: FC<IStickerProps> = ({
+    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: INCoreUIKitIconProps = {
+        color: customIconColor ? customIconColor : currentType.iconColor
+    };
+
+    const titleProps: ITextProps = {
+        color: customTitleColor ? customTitleColor : currentType.titleColor
+    };
+
+    const contentSize = size === "large" ? "bodyLargeSize" : size === "medium" ? "bodyMediumSize" : "bodySmallSize";
+
+    const renderIcon = () => {
+        if(!IconProp) {
+            return null;
+        }
+
+        return <IconProp
+            color={iconProps.color as keyof NCoreUIKit.IconContentColors}
+            size={typography[contentSize].fontSize + 4}
+            style={iconDynamicStyle}
+        />;
+    };
+
+    const renderTitle = () => {
+        if (!title) {
+            return null;
+        }
+
+        return <View
+            style={[
+                stylesheet.titleContainer,
+                titleContainerDynamicStyle
+            ]}
+        >
+            <Text
+                style={[
+                    titleStyle,
+                    stylesheet.title,
+                    titleDynamicStyle
+                ]}
+                variant={contentSize}
+                {...titleProps}
+            >
+                {title}
+            </Text>
+        </View>;
+    };
+
+    return <View
+        {...props}
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+    >
+        {iconPosition === "left" ? renderIcon() : null}
+        {renderTitle()}
+        {iconPosition === "right" ? renderIcon() : null}
+    </View>;
+};
+export default Sticker;

package/src/components/sticker/stylesheet.ts

@@ -0,0 +1,124 @@
+import {
+    type TextStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import {
+    type StickerDynamicStyleType,
+    type StickerTypeConstantType,
+    type StickerTypes,
+    type StickerType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+export const CHECK_BOX_TYPE_STYLES: Record<
+    StickerType,
+    {
+        containerColor: keyof NCoreUIKit.ContainerContentColors;
+        titleColor: keyof NCoreUIKit.TextContentColors;
+        iconColor: keyof NCoreUIKit.IconContentColors;
+    }
+> = {
+    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
+}: StickerTypeConstantType): StickerTypes => {
+    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
+}: StickerDynamicStyleType) => {
+    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
+        } as Mutable<ViewStyle>,
+        titleContainer: {
+        } as Mutable<ViewStyle>,
+        title: {
+        } as Mutable<TextStyle>,
+        icon: {
+        } as Mutable<ViewStyle>
+    };
+
+    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/src/components/sticker/type.ts

@@ -0,0 +1,60 @@
+import {
+    type ViewStyle,
+    type StyleProp,
+    type TextStyle
+} from "react-native";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+
+export type StickerDynamicStyleType = {
+    customColor?: keyof NCoreUIKit.ContainerContentColors;
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    spreadBehaviour?: StickerSpreadBehaviour;
+    iconPosition?: StickerIconPositionType;
+    currentType: StickerTypes;
+    size?: StickerSizeType;
+};
+
+export type StickerTypes = {
+    containerColor: keyof NCoreUIKit.ContainerContentColors;
+    titleColor: keyof NCoreUIKit.TextContentColors;
+    iconColor: keyof NCoreUIKit.IconContentColors;
+};
+
+export type StickerTypeConstantType = {
+    type: StickerType;
+};
+
+export type StickerType = "primary" | "danger" | "warning" | "neutral" | "success" | "info";
+
+export type StickerSizeType = "small" | "medium" | "large";
+
+export type StickerSpreadBehaviour = "baseline" | "free";
+
+export type StickerIconPositionType = "left" | "right";
+
+interface IStickerProps {
+    titleStyle?: StyleProp<TextStyle>[] | StyleProp<TextStyle>;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    customTitleColor?: keyof NCoreUIKit.TextContentColors;
+    customColor?: keyof NCoreUIKit.ContainerContentColors;
+    customIconColor?: keyof NCoreUIKit.IconContentColors;
+    spreadBehaviour?: StickerSpreadBehaviour;
+    iconPosition?: StickerIconPositionType;
+    size?: StickerSizeType;
+    icon?: NCoreUIKitIcon;
+    type?: StickerType;
+    title?: string;
+}
+export type {
+    IStickerProps as default
+};