Feature: State Card component completed.

example/src/pages/home/index.tsx

@@ -24,6 +24,7 @@ import {
     RadioButton,
     TextInput,
     SelectBox,
+    StateCard,
     CheckBox,
     RowCard,
     Button,
@@ -366,6 +367,24 @@ const Home = () => {
             </Fragment>;
         }}
     >
+        <StateCard
+            title="Deneme"
+            subTitle="Bu bir alt metindir ve uzun olması gerekmektedir. Ne kadar uzun olursa o kadar iyidir."
+            icon={({
+                color,
+                size
+            }) => <HomeIcon
+                color={colors.content.icon[color]}
+                size={size}
+            />}
+            action={{
+                title: "Me Action",
+                size: "small",
+                onPress: () => {
+
+                }
+            }}
+        />
         <DateTimePicker
             minDate={moment().subtract(2, "years").toDate()}
             maxDate={moment().add(15, "years").toDate()}

siradakiler.txt

@@ -1,3 +1,2 @@
--> STATE CARD
 -> Chip
 -> Sticker

src/components/index.ts

@@ -118,6 +118,18 @@ export {
     default as MarkdownViewer
 } from "./markdownViewer";
 
+export {
+    default as StateCard
+} from "./stateCard";
+
+export {
+    default as MonthSelector
+} from "./monthSelector";
+
+export {
+    default as TimeSelector
+} from "./timeSelector";
+
 export type {
     EnterMarkdownTypes,
     CodeMarkdownTypes,

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;

src/components/stateCard/stylesheet.ts

@@ -0,0 +1,124 @@
+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>,
+        contentContainer: {
+            marginLeft: 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;

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
+};

src/index.tsx

@@ -18,12 +18,16 @@ export {
     MarkdownViewer,
     DateTimePicker,
     PageContainer,
+    DateTimeSheet,
     TextAreaInput,
+    MonthSelector,
     NumericInput,
+    TimeSelector,
     DateSelector,
     BottomSheet,
     SelectSheet,
     RadioButton,
+    StateCard,
     TextInput,
     SelectBox,
     SnackBar,