pull master

.gitignore

@@ -68,7 +68,4 @@ dist/
 
 # Static storybook page
 .storybook_static
-.docs
-
-# env.json
-env.json
+.docs

CHANGELOG.md

@@ -7,7 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Added scaling funtions for different resolutions
+
 ## [1.2.0] - 2023-12-06
+
 ### Added
 
 - Added progress bar component

env.json

@@ -0,0 +1 @@
+{"LOAD_STORYBOOK": true, "WEB_MODE": false}

package.json

@@ -23,8 +23,8 @@
 		"storybook-server": "react-native-storybook-server",
 		"storybook-watcher": "sb-rn-watcher --config-path .ondevice",
 		"update-stories": "sb-rn-get-stories --config-path .ondevice",
-		"storybook-web": " npm run storybook-web-build && start-storybook -p 6006 --config-dir ./.storybook",
-		"storybook-web-build": "build-storybook --config-dir ./.storybook --output-dir ./.storybook_static",
+		"storybook-web": "node scripts/set-app-mode.js web && npm run storybook-web-build && start-storybook -p 6006 --config-dir ./.storybook",
+		"storybook-web-build": "node scripts/set-app-mode.js web && build-storybook --config-dir ./.storybook --output-dir ./.storybook_static",
 		"storybook-web-docs": "build-storybook --config-dir ./.storybook --output-dir ./docs"
 	},
 	"repository": {

scripts/set-app-mode.js

@@ -5,6 +5,9 @@ const mode = process.argv[2];
 const modes = {
 	app: 0,
 	storybook: 1,
+	web: 2,
 };
 
-fs.writeFileSync('env.json', `{LOAD_STORYBOOK:${!!modes[mode]}}`);
+modes[mode] === 2
+	? fs.writeFileSync('env.json', '{"LOAD_STORYBOOK": true, "WEB_MODE": true}')
+	: fs.writeFileSync('env.json', `{"LOAD_STORYBOOK": ${!!modes[mode]}, "WEB_MODE": false}`);

src/components/Avatar/index.tsx

@@ -3,6 +3,7 @@ import {StyleSheet, View, ViewStyle} from 'react-native';
 import Image from '../Image';
 import Text from '../Text';
 import {formatPlaceholder} from './utils/formatPlaceholder/index';
+import {horizontalScale, moderateScale, scaledForDevice} from '../../scale';
 
 export const sizeValues = {
 	sm: 24,
@@ -56,6 +57,14 @@ const Avatar = ({
 	}
 
 	const initials = formatPlaceholder(String(placeholder));
+	const calculateBorderRadius = getSize(size, customSize) / 2;
+	const calculateSize = getSize(size, customSize);
+	const calculateFontSize = getSize(size, customSize) * 0.4;
+
+	const validBorderRadius = scaledForDevice(calculateBorderRadius, moderateScale);
+	const validWidth = scaledForDevice(calculateSize, horizontalScale);
+	const validHeight = scaledForDevice(calculateSize, moderateScale);
+	const validFontSize = scaledForDevice(calculateFontSize, moderateScale);
 
 	const handleOnErrorImage = () => {
 		setShowInitials(true);
@@ -70,9 +79,9 @@ const Avatar = ({
 				styles.container,
 				{
 					backgroundColor: bgColor,
-					borderRadius: getSize(size, customSize) / 2,
-					height: getSize(size, customSize),
-					width: getSize(size, customSize),
+					borderRadius: validBorderRadius,
+					height: validHeight,
+					width: validWidth,
 				},
 				style,
 			]}
@@ -86,16 +95,14 @@ const Avatar = ({
 						uri: imageUrl,
 					}}
 					style={{
-						height: getSize(size, customSize),
-						width: getSize(size, customSize),
+						height: validHeight,
+						width: validWidth,
 					}}
 				/>
 			)}
 
 			{(showInitials || !imageUrl) && !!initials.length && (
-				<Text style={[styles.text, {color: textColor, fontSize: getSize(size, customSize) * 0.4}]}>
-					{initials}
-				</Text>
+				<Text style={[styles.text, {color: textColor, fontSize: validFontSize}]}>{initials}</Text>
 			)}
 		</View>
 	);

src/components/BaseButton/index.tsx

@@ -1,5 +1,6 @@
 import React, {FC} from 'react';
 import {Pressable, PressableProps, ViewStyle, StyleSheet} from 'react-native';
+import {moderateScale, horizontalScale, scaledForDevice} from '../../scale';
 import {palette} from '../../theme/palette';
 import Text from '../Text';
 import Icon from '../Icon';
@@ -41,24 +42,32 @@ const BaseButton: FC<BaseButtonProps> = ({
 	const bgColor = !disabled ? palette.primary.main : palette.grey[200];
 	const iconPaddingLeft = iconRight && title ? 8 : 0;
 	const iconPaddingRight = !iconRight && title ? 8 : 0;
+
+	const validatePaddingVertical = scaledForDevice(10, moderateScale);
+	const validatePaddingHorizontal = scaledForDevice(16, horizontalScale);
+	const validateFontSize = scaledForDevice(14, moderateScale);
+	const validateBorderRadius = scaledForDevice(borderRadius, moderateScale);
+	const validatePaddingRightIcon = scaledForDevice(iconPaddingRight, horizontalScale);
+	const validatePaddingLeftIcon = scaledForDevice(iconPaddingLeft, horizontalScale);
+
 	const styles = StyleSheet.create({
 		container: {
 			display: 'flex',
 			flexDirection: 'row',
 			alignItems: 'center',
 			justifyContent: 'center',
-			paddingHorizontal: 16,
-			paddingVertical: 10,
-			borderRadius,
+			paddingHorizontal: validatePaddingHorizontal,
+			paddingVertical: validatePaddingVertical,
+			borderRadius: validateBorderRadius,
 			backgroundColor: bgColor,
 		},
 		icon: {
 			color: palette.base.white,
-			paddingRight: iconPaddingRight,
-			paddingLeft: iconPaddingLeft,
+			paddingRight: validatePaddingRightIcon,
+			paddingLeft: validatePaddingLeftIcon,
 		},
 		title: {
-			fontSize: 14,
+			fontSize: validateFontSize,
 			fontWeight: '500',
 			textAlign: 'center',
 			color: palette.base.white,

src/components/CheckBox/index.test.tsx

@@ -17,7 +17,6 @@ describe('CheckBox component', () => {
 			const {style} = ViewComponent.props.children.props;
 
 			expect(style.backgroundColor).toBe('#2979FF');
-			expect(style.width).toBe(16);
 		});
 
 		it('when is false, borderColor is #939598', () => {
@@ -26,7 +25,6 @@ describe('CheckBox component', () => {
 			const {style} = ViewComponent.props.children.props;
 
 			expect(style.borderColor).toBe('#939598');
-			expect(style.width).toBe(16);
 		});
 	});
 

src/components/CheckBox/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {View, TouchableOpacity, StyleSheet, ViewStyle} from 'react-native';
 import {base, grey, primary} from '../../theme/palette';
+import {moderateScale, horizontalScale, scaledForDevice} from '../../scale';
 import Icon from './icon/CheckedIcon';
 
 interface CheckBoxProps {
@@ -30,26 +31,31 @@ const CheckBox = ({
 }: CheckBoxProps) => {
 	const hasBorderRadius = !borderRadius ? getCheckBoxScale(customSize, 4) : borderRadius;
 
+	const validateIconSize = scaledForDevice(customSize, moderateScale);
+	const validWidth = scaledForDevice(customSize, horizontalScale);
+	const validHeight = scaledForDevice(customSize, moderateScale);
+	const validBorderRadius = scaledForDevice(hasBorderRadius, moderateScale);
+
 	const styles = StyleSheet.create({
 		touchableOpacity: {
-			width: customSize,
-			height: customSize,
-			borderRadius: hasBorderRadius,
+			width: validWidth,
+			height: validHeight,
+			borderRadius: validBorderRadius,
 		},
 		checkOn: {
 			display: 'flex',
 			justifyContent: 'center',
 			alignItems: 'center',
 			backgroundColor: !disabled ? checkOnColor : grey[200],
-			width: customSize,
-			height: customSize,
-			borderRadius: hasBorderRadius,
+			width: validWidth,
+			height: validHeight,
+			borderRadius: validBorderRadius,
 		},
 		checkOff: {
 			borderWidth: getCheckBoxScale(customSize, 16),
 			borderColor: !disabled ? checkOffColor : grey[200],
-			width: customSize,
-			height: customSize,
+			width: validWidth,
+			height: validHeight,
 			borderRadius: hasBorderRadius,
 		},
 	});
@@ -62,7 +68,9 @@ const CheckBox = ({
 			activeOpacity={0.6}
 			style={[styles.touchableOpacity, style]}
 			{...props}>
-			<View style={isChecked}>{checked && <Icon color={iconCheckColor} size={customSize} />}</View>
+			<View style={isChecked}>
+				{checked && <Icon color={iconCheckColor} size={validateIconSize} />}
+			</View>
 		</TouchableOpacity>
 	);
 };

src/components/Icon/index.tsx

@@ -2,6 +2,7 @@ import React, {FC} from 'react';
 import {createIconSetFromIcoMoon} from 'react-native-vector-icons';
 import icoMoonConfig from './assets/fonts/selection.json';
 import {primary} from '../../theme/palette';
+import {moderateScale, scaledForDevice} from '../../scale';
 
 const IconComponent = createIconSetFromIcoMoon(
 	icoMoonConfig,
@@ -20,7 +21,9 @@ const Icon: FC<Props> = ({name, color = primary.main, size = 16, ...props}) => {
 	if (!name) {
 		return null;
 	}
-	return <IconComponent name={name} color={color} size={size} {...props} />;
+	const validateSize = scaledForDevice(size, moderateScale);
+
+	return <IconComponent name={name} color={color} size={validateSize} {...props} />;
 };
 
 export default Icon;

src/components/Input/index.tsx

@@ -18,6 +18,7 @@ import {
 	raiseLabel,
 	showStatusMessage,
 } from './utils';
+import {moderateScale, horizontalScale, scaledForDevice} from '../../scale';
 
 export enum keyboardTypes {
 	default = 'default',
@@ -112,36 +113,43 @@ const Input = React.forwardRef<TextInput, InputProps>(
 			statusMessage,
 			status,
 		});
+
 		const validStatusMessageColor = getStatusMessageColor(status);
+		const validBottom = scaledForDevice(25, moderateScale);
+		const validHeight = scaledForDevice(50, moderateScale);
+		const validBorderBottomWidth = scaledForDevice(1, horizontalScale);
+		const validLineHeight = scaledForDevice(19, moderateScale);
+		const validFontSize = scaledForDevice(16, moderateScale);
+		const validateMarginTop = scaledForDevice(5, moderateScale);
 
 		const styles = StyleSheet.create({
 			container: {
 				width: '100%',
 			},
 			inputWrapper: {
-				height: 50,
+				height: validHeight,
 				borderBottomColor: validBorderColor,
-				borderBottomWidth: 1,
+				borderBottomWidth: validBorderBottomWidth,
 				justifyContent: 'flex-end',
 			},
 			label: {
 				color: validLabelColor,
-				fontSize: 16,
+				fontSize: validFontSize,
 				letterSpacing: 0,
-				lineHeight: 19,
+				lineHeight: validLineHeight,
 				position: 'absolute',
-				bottom: raiseLabel({disabled, hasMessage, inputState}) ? 25 : 0,
+				bottom: raiseLabel({disabled, hasMessage, inputState}) ? validBottom : 0,
 			},
 			input: {
 				color: valueColor,
-				fontSize: 16,
+				fontSize: validFontSize,
 				letterSpacing: 0,
-				lineHeight: 19,
+				lineHeight: validLineHeight,
 				padding: 0,
 			},
 			statusMessage: {
 				color: validStatusMessageColor,
-				marginTop: 5,
+				marginTop: validateMarginTop,
 			},
 		});
 

src/components/Loading/index.tsx

@@ -2,6 +2,7 @@ import React, {useEffect, useRef, FC} from 'react';
 import {StyleSheet, View, Animated, Easing, ViewStyle} from 'react-native';
 import LoadingSvg from './LoadingSvg';
 import {primary} from '../../theme/palette';
+import {horizontalScale, moderateScale, scaledForDevice} from '../../scale';
 
 interface Params {
 	duration: number;
@@ -38,13 +39,17 @@ const Loading: FC<Props> = ({
 }) => {
 	const rotationDegree = useRef(new Animated.Value(0)).current;
 
+	const validWidth = scaledForDevice(size, horizontalScale);
+	const validHeight = scaledForDevice(size, moderateScale);
+	const validSize = scaledForDevice(size, moderateScale);
+
 	const styles = StyleSheet.create({
 		container: {
 			position: 'relative',
 			justifyContent: 'center',
 			alignItems: 'center',
-			width: size,
-			height: size,
+			width: validWidth,
+			height: validHeight,
 		},
 		spinner: {
 			position: 'absolute',
@@ -81,7 +86,11 @@ const Loading: FC<Props> = ({
 
 	return (
 		<View style={[styles.container, style]} {...props}>
-			<LoadingSvg style={[styles.spinner, {...animationSpinnerStyle}]} size={size} color={color} />
+			<LoadingSvg
+				style={[styles.spinner, {...animationSpinnerStyle}]}
+				size={validSize}
+				color={color}
+			/>
 			{children}
 		</View>
 	);