Implemented Card Component

src/components/Card/Card.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+import { Image, StyleSheet, View } from "react-native";
+
+import { styled } from "nativewind";
+
+import { CardType } from "./Card.types";
+
+const Card: React.FC<CardType> = ({ type, cardColor, imageURL, children }) => {
+	let cardStyle = {
+		...style.baseCard,
+		...cardColor?.[0]
+	};
+
+	let outlinedCardStyle = {
+		...style.baseCard,
+		borderColor: cardColor?.[0].backgroundColor
+	};
+
+	if (type === "elevated")
+		cardStyle = StyleSheet.compose(cardStyle, style.elevatedCard as any);
+
+	if (type === "outlined")
+		cardStyle = StyleSheet.compose(
+			outlinedCardStyle,
+			style.outlinedCard as any
+		);
+
+	return (
+		<View style={cardStyle}>
+			{imageURL && <Image source={{ uri: imageURL }} style={style.cardImage} />}
+			{children && (
+				<View style={{ ...style.childrenContainer }}>{children}</View>
+			)}
+		</View>
+	);
+};
+
+export default styled(Card, {
+	props: {
+		cardColor: true
+	}
+});
+
+const style = StyleSheet.create({
+	baseCard: {
+		borderRadius: 8,
+		height: "100%",
+		width: "100%"
+	},
+	elevatedCard: {
+		shadowColor: "#000",
+		shadowOffset: {
+			width: 0,
+			height: 5
+		},
+		shadowOpacity: 0.36,
+		shadowRadius: 6.68
+	},
+	outlinedCard: {
+		borderWidth: 2
+	},
+	cardImage: {
+		width: "100%",
+		height: "50%",
+		borderTopLeftRadius: 6,
+		borderTopRightRadius: 6
+	},
+	childrenContainer: {
+		paddingVertical: 8,
+		paddingHorizontal: 16
+	}
+});

src/components/Card/Card.types.ts

@@ -0,0 +1,8 @@
+import React from "react";
+
+export interface CardType {
+	type?: "elevated" | "outlined" | undefined;
+	cardColor?: [{ backgroundColor?: string | undefined }];
+	imageURL?: string;
+	children?: React.ReactNode;
+}

src/components/Card/index.ts

@@ -0,0 +1 @@
+export { default } from "./Card";

src/components/Text/Text.tsx

@@ -7,22 +7,15 @@ import { styled } from "nativewind";
 import { TextType } from "./Text.types";
 
 const Text: React.FC<TextType> = ({ text, textColor, type }) => {
-	const generateTextStyle = (
-		color: { color?: string | undefined } | undefined,
-		type: string | undefined
-	): object => {
-		if (type === "title") {
-			return { ...style.title, ...color };
-		}
-		if (type === "subtitle") {
-			return { ...style.subtitle, ...color };
-		}
-		return { ...style.default, ...color };
-	};
-
-	const generatedStyle = generateTextStyle(textColor?.[0], type);
-
-	return <RNText style={generatedStyle}>{text}</RNText>;
+	let textStyle = {...style.default, ...textColor?.[0]}
+
+	if (type === "title")
+		textStyle = StyleSheet.compose(textStyle, style.title as any)
+
+	if (type === "subtitle")
+		textStyle = StyleSheet.compose(textStyle, style.subtitle as any)
+
+	return <RNText style={textStyle}>{text}</RNText>;
 };
 
 export default styled(Text, {

src/components/index.ts

@@ -2,4 +2,5 @@ export { default as Button } from "./Button";
 export { default as Loader } from "./Loader";
 export { default as ItemSeparator } from "./ItemSeparator";
 export { default as TextInput } from "./TextInput";
+export { default as Card } from "./Card";
 export { default as Text } from "./Text";

storybook/stories/Card/Card.stories.tsx

@@ -0,0 +1,102 @@
+// Card.stories.js
+
+import React from "react";
+
+import { text, select, number } from "@storybook/addon-knobs";
+
+import { storiesOf } from "@storybook/react-native";
+
+import { Text, View } from "react-native";
+import { Button, Card, ItemSeparator } from "../../../src";
+import { action } from "@storybook/addon-actions";
+
+storiesOf("Cards", module)
+	.addDecorator((getStory) => (
+		<View className="w-full h-full items-center justify-center px-4">
+			{getStory()}
+		</View>
+	))
+	.add("Elevated Card", () => {
+		return (
+			<View className="w-full h-96">
+				<Card
+					type="elevated"
+					cardColor="bg-white"
+					imageURL={text(
+						"Image Url",
+						"https://cdn.pixabay.com/photo/2014/07/28/20/39/sunset-404072__340.jpg"
+					)}
+				>
+					<View className="w-full">
+						<Text className="text-2xl font-bold">Card Title</Text>
+						<Text className="text-base font-light">
+							It is a long established fact that a reader will be distracted by
+							the readable content.
+						</Text>
+						<ItemSeparator separatorStyle="h-4" />
+						<Button
+							buttonColor="bg-blue-600"
+							textColor="text-white"
+							label="Action Button"
+							onPress={action("clicked Button")}
+						/>
+					</View>
+				</Card>
+			</View>
+		);
+	})
+	.add("Outlined Card", () => {
+		return (
+			<View className="w-full h-96">
+				<Card
+					type="outlined"
+					cardColor="bg-black"
+					imageURL={text(
+						"Image Url",
+						"https://cdn.pixabay.com/photo/2014/07/28/20/39/sunset-404072__340.jpg"
+					)}
+				>
+					<Text className="text-2xl font-bold">Card Title</Text>
+					<Text className="text-base font-light">
+						It is a long established fact that a reader will be distracted by
+						the readable content.
+					</Text>
+					<ItemSeparator separatorStyle="h-4" />
+					<Button
+						type="outlined"
+						buttonColor="bg-black"
+						textColor="text-black"
+						label="Action Button"
+						onPress={action("clicked Button")}
+					/>
+				</Card>
+			</View>
+		);
+	})
+	.add("Flat Card", () => {
+		return (
+			<View className="w-full h-96">
+				<Card
+					cardColor="bg-blue-600"
+					imageURL={text(
+						"Image Url",
+						"https://cdn.pixabay.com/photo/2014/07/28/20/39/sunset-404072__340.jpg"
+					)}
+				>
+					<Text className="text-2xl font-bold text-white">Card Title</Text>
+					<Text className="text-base font-normal text-white">
+						It is a long established fact that a reader will be distracted by
+						the readable content.
+					</Text>
+					<ItemSeparator separatorStyle="h-4" />
+					<Button
+						type="outlined"
+						buttonColor="bg-white"
+						textColor="text-white"
+						label="Action Button"
+						onPress={action("clicked Button")}
+					/>
+				</Card>
+			</View>
+		);
+	});

storybook/stories/Text/Text.stories.tsx

@@ -14,12 +14,11 @@ storiesOf("Text", module)
 			{getStory()}
 		</View>
 	))
-	.add("Title", () => {
+	.add("Default", () => {
 		return (
 			<View className="w-full px-4">
 				<Text
-					type="title"
-					text={text("text", "This is a title")}
+					text={text("text", "This is an example of body text")}
 					textColor={select(
 						"text color",
 						["text-black", "text-blue-600", "text-red-600", "text-gray-400"],
@@ -44,11 +43,12 @@ storiesOf("Text", module)
 			</View>
 		);
 	})
-	.add("Body", () => {
+	.add("Title", () => {
 		return (
 			<View className="w-full px-4">
 				<Text
-					text={text("text", "This is an example of body text")}
+					type="title"
+					text={text("text", "This is a title")}
 					textColor={select(
 						"text color",
 						["text-black", "text-blue-600", "text-red-600", "text-gray-400"],

storybook/stories/index.js

@@ -2,4 +2,5 @@ import "./Button/Button.stories";
 import "./Loader/Loader.stories";
 import "./ItemSeparator/ItemSeparator.stories";
 import "./TextInput/TextInput.stories";
+import "./Card/Card.stories";
 import "./Text/Text.stories";