ncore-ui-kit 1.0.0-alpha.0

package/src/components/rowCard/index.tsx

@@ -0,0 +1,235 @@
+import {
+    type FC
+} from "react";
+import {
+    TouchableOpacity,
+    View
+} from "react-native";
+import type IRowCardProps from "./type";
+import stylesheet, {
+    useStyles
+} from "./stylesheet";
+import {
+    NCoreUIKitTheme
+} from "../../core/hooks";
+import Text from "../text";
+
+const RowCard: FC<IRowCardProps> = ({
+    rightSubTitleVariant = "labelLargeSize",
+    rightTitleVariant = "labelLargeSize",
+    subTitleVariant = "labelLargeSize",
+    titleVariant = "labelLargeSize",
+    rightContentContainerStyle,
+    rightIcon: CustomRightIcon,
+    leftContentContainerStyle,
+    isTransparentBackground,
+    type = "first-based",
+    rightContainerStyle,
+    rightSubTitleStyle,
+    leftContainerStyle,
+    rightSubTitleColor,
+    leftSubTitleStyle,
+    icon: CustomIcon,
+    backgroundColor,
+    rightTitleColor,
+    rightTitleStyle,
+    rightIconStyle,
+    leftTitleStyle,
+    subTitleColor,
+    rightSubTitle,
+    customTheme,
+    titleColor,
+    rightTitle,
+    iconColor,
+    iconStyle,
+    iconSize,
+    subTitle,
+    onPress,
+    style,
+    title
+}) => {
+    const {
+        radiuses,
+        colors,
+        spaces
+    } = NCoreUIKitTheme.useContext(customTheme);
+
+    const {
+        rightIconContainer: rightIconContainerDynamicStyle,
+        rightContainer: rightContainerDynamicStyle,
+        leftContainer: leftContainerDynamicStyle,
+        iconContainer: iconContainerDynamicStyle,
+        rightSubTitle: rightSubTitleDynamicStyle,
+        rightTitle: rightTitleDynamicStyle,
+        container: containerDynamicStyle,
+        subTitle: subTitleDynamicStyle,
+        title: titleDynamicStyle
+    } = useStyles({
+        isTransparentBackground,
+        backgroundColor,
+        radiuses,
+        subTitle,
+        spaces,
+        colors,
+        type
+    });
+
+    const renderRightIcon = () => {
+        if(!CustomRightIcon) {
+            return null;
+        }
+
+        return <View
+            style={[
+                rightIconStyle,
+                stylesheet.rightIconContainer,
+                rightIconContainerDynamicStyle
+            ]}
+        >
+            <CustomRightIcon
+                color="default"
+                size={18}
+            />
+        </View>;
+    };
+
+    const renderLeftIcon = () => {
+        if(!CustomIcon) {
+            return null;
+        }
+
+        return <View
+            style={[
+                iconStyle,
+                stylesheet.iconContainer,
+                iconContainerDynamicStyle
+            ]}
+        >
+            <CustomIcon
+                color={iconColor ? iconColor : "default"}
+                size={iconSize ? iconSize : 18}
+            />
+        </View>;
+    };
+
+    const renderLeftSubTitle = () => {
+        if(!subTitle) {
+            return null;
+        }
+
+        return <Text
+            color={subTitleColor ? subTitleColor : "low"}
+            variant={subTitleVariant}
+            style={[
+                leftSubTitleStyle,
+                stylesheet.subTitle,
+                subTitleDynamicStyle
+            ]}
+        >
+            {subTitle}
+        </Text>;
+    };
+
+    const renderLeftContent = () => {
+        return <View
+            style={[
+                leftContentContainerStyle
+            ]}
+        >
+            <Text
+                variant={titleVariant}
+                color={titleColor}
+                style={[
+                    leftTitleStyle,
+                    stylesheet.title,
+                    titleDynamicStyle
+                ]}
+            >
+                {title}
+            </Text>
+            {renderLeftSubTitle()}
+        </View>;
+    };
+
+    const renderLeft = () => {
+        return <View
+            style={[
+                leftContainerStyle,
+                stylesheet.leftContainer,
+                leftContainerDynamicStyle
+            ]}
+        >
+            {renderLeftContent()}
+        </View>;
+    };
+
+    const renderRightSubTitle = () => {
+        if(!rightSubTitle) {
+            return null;
+        }
+
+        return <Text
+            color={rightSubTitleColor? rightSubTitleColor : "low"}
+            variant={rightSubTitleVariant}
+            style={[
+                rightSubTitleStyle,
+                stylesheet.rightSubTitle,
+                rightSubTitleDynamicStyle
+            ]}
+        >
+            {rightSubTitle}
+        </Text>;
+    };
+
+    const renderRightContent = () => {
+        return <View
+            style={[
+                rightContentContainerStyle
+            ]}
+        >
+            <Text
+                variant={rightTitleVariant}
+                color={rightTitleColor}
+                style={[
+                    rightTitleStyle,
+                    stylesheet.rightTitle,
+                    rightTitleDynamicStyle
+                ]}
+            >
+                {rightTitle}
+            </Text>
+            {renderRightSubTitle()}
+        </View>;
+    };
+
+    const renderRight = () => {
+        return <View
+            style={[
+                rightContainerStyle,
+                stylesheet.rightContainer,
+                rightContainerDynamicStyle
+            ]}
+        >
+            {renderRightContent()}
+        </View>;
+    };
+
+    return <TouchableOpacity
+        style={[
+            style,
+            stylesheet.container,
+            containerDynamicStyle
+        ]}
+        onPress={() => {
+            if(onPress) {
+                onPress();
+            }
+        }}
+    >
+        {renderLeftIcon()}
+        {renderLeft()}
+        {renderRight()}
+        {renderRightIcon()}
+    </TouchableOpacity>;
+};
+export default RowCard;

package/src/components/rowCard/stylesheet.ts

@@ -0,0 +1,97 @@
+import {
+    type TextStyle,
+    type ViewStyle,
+    StyleSheet
+} from "react-native";
+import type {
+    RowCardDynamicStyleType
+} from "./type";
+import type {
+    Mutable
+} from "../../types";
+
+const stylesheet = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        alignSelf: "stretch"
+    },
+    iconContainer: {
+        justifyContent: "center",
+        alignItems: "center"
+    },
+    rightIconContainer: {
+
+    },
+    title: {
+        textAlign: "left"
+    },
+    subTitle: {
+        textAlign: "left"
+    },
+    rightContainer: {
+        justifyContent: "flex-end",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    leftContainer: {
+        justifyContent: "flex-start",
+        flexDirection: "row",
+        alignItems: "center"
+    },
+    rightSubTitle: {
+
+    },
+    rightTitle: {
+
+    }
+});
+
+export const useStyles = ({
+    isTransparentBackground,
+    backgroundColor,
+    spaces,
+    colors,
+    type
+}: RowCardDynamicStyleType) => {
+    const styles = {
+        container: {
+            backgroundColor: backgroundColor ? colors.content.container[backgroundColor] : isTransparentBackground ? "transparent" : colors.content.container.mid,
+            padding: spaces.spacingMd
+        } as Mutable<ViewStyle>,
+        title: {
+            textAlign: "left"
+        } as Mutable<TextStyle>,
+        subTitle: {
+            textAlign: "left"
+        } as Mutable<TextStyle>,
+        iconContainer: {
+            paddingHorizontal: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        rightSubTitle: {
+            textAlign: "right"
+        } as Mutable<TextStyle>,
+        leftContainer: {
+            paddingHorizontal: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        rightContainer: {
+            paddingHorizontal: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        rightIconContainer: {
+            paddingHorizontal: spaces.spacingSm
+        } as Mutable<ViewStyle>,
+        rightTitle: {
+            textAlign: "right"
+        } as Mutable<TextStyle>
+    };
+
+    if(type === "evenly") {
+        styles.rightContainer.flex = 1;
+        styles.leftContainer.flex = 1;
+    } else {
+        styles.leftContainer.flex = 1;
+    }
+
+    return styles;
+};
+export default stylesheet;

package/src/components/rowCard/type.ts

@@ -0,0 +1,63 @@
+import {
+    type StyleProp,
+    type ViewStyle
+} from "react-native";
+import type {
+    NCoreUIKitIcon
+} from "../../types";
+
+export type RowCardDynamicStyleType = {
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    radiuses: NCoreUIKit.ActivePalette["radiuses"];
+    spaces: NCoreUIKit.ActivePalette["spaces"];
+    colors: NCoreUIKit.ActivePalette["colors"];
+    isTransparentBackground?: boolean;
+    subTitle?: string;
+    type: RowCardType;
+};
+
+export type RowCardType = "first-based" | "evenly";
+
+type IRowCardProps = {
+    rightContentContainerStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    leftContentContainerStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    rightContainerStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    leftContainerStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    rightSubTitleStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    leftSubTitleStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    rightTitleStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    leftTitleStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    rightIconStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    backgroundColor?: keyof NCoreUIKit.ContainerContentColors;
+    iconStyle?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    rightSubTitleColor?: keyof NCoreUIKit.TextContentColors;
+    customTheme?: {
+        gapPropagation?: keyof NCoreUIKit.GapPropagationKey;
+        sharpness?: keyof NCoreUIKit.SharpnessKey;
+        paletteKey?: keyof NCoreUIKit.PaletteKey;
+        themeKey?: keyof NCoreUIKit.ThemeKey;
+    };
+    style?: StyleProp<ViewStyle>[] | StyleProp<ViewStyle>;
+    rightTitleColor?: keyof NCoreUIKit.TextContentColors;
+    rightSubTitleVariant?: keyof NCoreUIKit.Typography;
+    subTitleColor?: keyof NCoreUIKit.TextContentColors;
+    rightTitleVariant?: keyof NCoreUIKit.Typography;
+    titleColor?: keyof NCoreUIKit.TextContentColors;
+    iconColor?: keyof NCoreUIKit.IconContentColors;
+    subTitleVariant?: keyof NCoreUIKit.Typography;
+    titleVariant?: keyof NCoreUIKit.Typography;
+    isTransparentBackground?: boolean;
+    rightIcon?: NCoreUIKitIcon;
+    rightSubTitle?: string;
+    icon?: NCoreUIKitIcon;
+    onPress?: () => void;
+    rightTitle?: string;
+    type?: RowCardType;
+    subTitle?: string;
+    iconSize?: number;
+    title: string;
+};
+
+export type {
+    IRowCardProps as default
+};