Modified structure of getStyleByTypography as to have clearer logic

src/components/atoms/Typography/utils/getStyleByTypography/index.test.ts

@@ -25,12 +25,6 @@ describe('getStyleByType function', () => {
 			expect(styles).toEqual(defaultTypography);
 		});
 
-		it('as there is title type with invalid size', () => {
-			const styles = getStyleByTypography('title', 'invalid');
-
-			expect(styles).toEqual(defaultTypography);
-		});
-
 		it('triggers hasSizes by using small in category', () => {
 			const styles = getStyleByTypography('mockType', 'small');
 
@@ -42,15 +36,15 @@ describe('getStyleByType function', () => {
 				})
 			);
 		});
+	});
 
-		it('falls back to defaultCategory.medium when category has no valid sizes', () => {
-			const styles = getStyleByTypography('emptyType', 'medium');
+	describe('returns typography correctly', () => {
+		it('as there is title type with invalid size', () => {
+			const styles = getStyleByTypography('title', 'invalid');
 
-			expect(styles).toEqual(defaultTypography);
+			expect(styles).toEqual(StyleSheet.create({typography: {...typography.title.medium}}));
 		});
-	});
 
-	describe('returns typography correctly', () => {
 		it('as there is display type', () => {
 			const styles = getStyleByTypography('display');
 
@@ -75,7 +69,7 @@ describe('getStyleByType function', () => {
 			);
 		});
 
-		it('as there is title type with valid small size', () => {
+		it('as there is body type with valid small size', () => {
 			const styles = getStyleByTypography('body', 'small');
 
 			expect(styles).toEqual(

src/components/atoms/Typography/utils/getStyleByTypography/index.ts

@@ -1,31 +1,30 @@
-import {StyleSheet} from 'react-native';
-import typography, {Typography, TypographyItem} from 'theme/typography';
-
+import {StyleSheet, TextStyle} from 'react-native';
+import typography, {Typography} from 'theme/typography';
 type TypographyType = keyof Typography;
 type TypographySize = 'large' | 'medium' | 'small';
-
-const hasSizes = (category: object): category is Record<TypographySize, TypographyItem> => {
-	return 'large' in category || 'medium' in category || 'small' in category;
-};
-
+interface TypographyStyle {
+	[key: string]: TextStyle;
+}
 const getStyleByTypography = (
 	type: TypographyType | string = 'body',
 	size: TypographySize | string = 'medium',
 	color?: string
-) => {
-	const typographyType = type as TypographyType;
-	const typographySize = size as TypographySize;
+): {typography: TextStyle} => {
+	const validType: TypographyType = Object.keys(typography).includes(type)
+		? (type as TypographyType)
+		: 'body';
+
+	const typographyCategory: TypographyStyle = typography[validType];
 
-	const defaultCategory = typography.body;
-	const typographyCategory = typography[typographyType] || defaultCategory;
+	const validSize: TypographySize = Object.keys(typographyCategory).includes(size)
+		? (size as TypographySize)
+		: 'medium';
 
-	const typographyData = hasSizes(typographyCategory)
-		? typographyCategory[typographySize] || defaultCategory.medium
-		: defaultCategory.medium;
+	const typographyStyle: TextStyle = typographyCategory[validSize];
 
 	return StyleSheet.create({
 		typography: {
-			...typographyData,
+			...typographyStyle,
 			...(color && {color}),
 		},
 	});