Feature: Sticker component completed.

example/src/pages/home/index.tsx

@@ -30,7 +30,8 @@ import {
     Button,
     Dialog,
     Switch,
-    Text
+    Text,
+    Sticker
 } from "ncore-ui-kit-mobile";
 import {
     useNavigation
@@ -367,6 +368,18 @@ const Home = () => {
             </Fragment>;
         }}
     >
+        <Sticker
+            title="test"
+            icon={({
+                style,
+                color,
+                size
+            }) => <HomeIcon
+                color={colors.content.icon[color]}
+                size={size}
+                style={style}
+            />}
+        />
         <StateCard
             title="Deneme"
             subTitle="Bu bir alt metindir ve uzun olması gerekmektedir. Ne kadar uzun olursa o kadar iyidir."

siradakiler.txt

@@ -1,2 +1 @@
 -> Chip
--> Sticker

src/components/index.ts

@@ -130,6 +130,10 @@ export {
     default as TimeSelector
 } from "./timeSelector";
 
+export {
+    default as Sticker
+} from "./sticker";
+
 export type {
     EnterMarkdownTypes,
     CodeMarkdownTypes,

src/components/stateCard/stylesheet.ts

@@ -96,9 +96,6 @@ export const useStyles = ({
         container: {
             padding: spaces.spacingSm
         } as Mutable<ViewStyle>,
-        contentContainer: {
-            marginLeft: spaces.spacingSm
-        } as Mutable<ViewStyle>,
         titleContainer: {
         } as Mutable<ViewStyle>,
         icon: {

src/components/sticker/index.tsx

@@ -0,0 +1,121 @@
+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> = ({
+    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({
+        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;

src/components/sticker/stylesheet.ts

@@ -0,0 +1,118 @@
+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 = ({
+    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(iconPosition === "right") {
+        styles.icon.marginLeft = spaces.spacingXs;
+    } else {
+        styles.icon.marginRight = spaces.spacingXs;
+    }
+
+    return styles;
+};
+export default stylesheet;

src/components/sticker/type.ts

@@ -0,0 +1,56 @@
+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"];
+    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 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;
+    iconPosition?: StickerIconPositionType;
+    size?: StickerSizeType;
+    icon?: NCoreUIKitIcon;
+    type?: StickerType;
+    title?: string;
+}
+export type {
+    IStickerProps as default
+};

src/index.tsx

@@ -32,6 +32,7 @@ export {
     SelectBox,
     SnackBar,
     CheckBox,
+    Sticker,
     RowCard,
     Loading,
     Dialog,