Fixed Input styles for Storybook web

.ondevice/storybook.requires.js

@@ -14,7 +14,7 @@ global.STORIES = [
     directory: "./storybook/stories",
     files: "**/*.stories.?(ts|tsx|js|jsx)",
     importPathMatcher:
-      "^\\.[\\\\/](?:storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
+      "^\\.[\\\\/](?:storybook[\\\\/]stories(?:[\\\\/](?!\\.)(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/]|[\\\\/]|$)(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
   },
 ];
 
@@ -49,6 +49,7 @@ const getStories = () => {
   return {
     "./storybook/stories/Avatar/Avatar.stories.js": require("../storybook/stories/Avatar/Avatar.stories.js"),
     "./storybook/stories/CheckBox/CheckBox.stories.js": require("../storybook/stories/CheckBox/CheckBox.stories.js"),
+    "./storybook/stories/DesignStystem/Colors.stories.js": require("../storybook/stories/DesignStystem/Colors.stories.js"),
     "./storybook/stories/Image/Image.stories.js": require("../storybook/stories/Image/Image.stories.js"),
     "./storybook/stories/Input/Input.stories.js": require("../storybook/stories/Input/Input.stories.js"),
     "./storybook/stories/Loading/Loading.stories.js": require("../storybook/stories/Loading/Loading.stories.js"),

src/components/Input/index.test.tsx

@@ -50,29 +50,29 @@ describe('Input', () => {
 
 			expect(mockSetInputState).toHaveBeenCalledWith('focus');
 		});
-		it('as it has valid label, placeholder and user focuses out of the input without value', () => {
+		it('as it has valid label, placeholder and user finishes typing on input without value', () => {
 			const mockSetInputState = jest.fn();
 			useStateSpy.mockReturnValueOnce(['', mockSetInputState]);
 
 			const InputComp = create(<Input label="Test" placeholder="Test" />).root;
 
 			const TextInputComp = InputComp.findByType(TextInput);
-			const {onBlur} = TextInputComp.props;
+			const {onEndEditing} = TextInputComp.props;
 
-			onBlur();
+			onEndEditing({nativeEvent: {}});
 
 			expect(mockSetInputState).toHaveBeenCalledWith('incomplete');
 		});
-		it('as it has valid label, placeholder and user focuses out of the input with value', () => {
+		it('as it has valid label, placeholder and user finishes typing on input with value', () => {
 			const mockSetInputState = jest.fn();
 			useStateSpy.mockReturnValueOnce(['', mockSetInputState]);
 
 			const InputComp = create(<Input label="Test" placeholder="Test" value="Test" />).root;
 
 			const TextInputComp = InputComp.findByType(TextInput);
-			const {onBlur} = TextInputComp.props;
+			const {onEndEditing} = TextInputComp.props;
 
-			onBlur();
+			onEndEditing({nativeEvent: {text: 'valid value'}});
 
 			expect(mockSetInputState).toHaveBeenCalledWith('complete');
 		});
@@ -83,11 +83,12 @@ describe('Input', () => {
 			const InputComp = create(<Input label="Test" placeholder="Test" />).root;
 
 			const TextInputComp = InputComp.findByType(TextInput);
-			const {onChange} = TextInputComp.props;
+			const {onChange, onEndEditing} = TextInputComp.props;
 
+			onEndEditing({nativeEvent: {text: 'valid value'}});
 			onChange();
 
-			expect(mockSetInputState).toBeCalledTimes(0);
+			expect(mockSetInputState).toBeCalledTimes(1);
 		});
 		it('as it has valid label, placeholder and user submits', () => {
 			const mockSetInputState = jest.fn();
@@ -96,11 +97,12 @@ describe('Input', () => {
 			const InputComp = create(<Input label="Test" placeholder="Test" />).root;
 
 			const TextInputComp = InputComp.findByType(TextInput);
-			const {onSubmitEditing} = TextInputComp.props;
+			const {onSubmitEditing, onEndEditing} = TextInputComp.props;
 
+			onEndEditing({nativeEvent: {text: 'valid value'}});
 			onSubmitEditing();
 
-			expect(mockSetInputState).toBeCalledTimes(0);
+			expect(mockSetInputState).toBeCalledTimes(1);
 		});
 	});
 });

src/components/Input/index.tsx

@@ -1,5 +1,13 @@
 import React, {LegacyRef, useEffect, useState} from 'react';
-import {TextInput, StyleSheet, View, Text, KeyboardType} from 'react-native';
+import {
+	TextInput,
+	StyleSheet,
+	View,
+	Text,
+	KeyboardType,
+	NativeSyntheticEvent,
+	TextInputEndEditingEventData,
+} from 'react-native';
 import {
 	Status,
 	getBorderColor,
@@ -75,8 +83,12 @@ const Input = React.forwardRef<TextInput, InputProps>(
 			return onFocus();
 		};
 
-		const onBlurHandler = () => {
-			if (value) {
+		const onEndEditingHandler = ({
+			nativeEvent,
+		}: NativeSyntheticEvent<TextInputEndEditingEventData>) => {
+			const {text = ''} = nativeEvent;
+
+			if (text) {
 				setInputState('complete');
 				return onBlur();
 			}
@@ -86,7 +98,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
 		};
 
 		const hasMessage = !!statusMessage;
-		const isLabelVisible = inputState === 'focus' && !value;
+		const isLabelVisible = !disabled && !readOnly && (inputState !== 'incomplete' || hasMessage);
 
 		const validBorderColor = getBorderColor({inputState, hasMessage, status, inputColor});
 		const validLabelColor = getLabelColor({
@@ -115,7 +127,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
 				letterSpacing: 0,
 				lineHeight: 19,
 				position: 'absolute',
-				bottom: raiseLabel({disabled, hasMessage, inputState}) ? 25 : 5,
+				bottom: raiseLabel({disabled, hasMessage, inputState}) ? 25 : 0,
 			},
 			input: {
 				color: validInputTextColor,
@@ -138,7 +150,7 @@ const Input = React.forwardRef<TextInput, InputProps>(
 						style={styles.input}
 						ref={ref}
 						onFocus={onFocusHandler}
-						onBlur={onBlurHandler}
+						onEndEditing={onEndEditingHandler}
 						onChange={onChange}
 						onSubmitEditing={onSubmitEditing}
 						placeholder={placeholder}

src/components/Input/utils/index.test.tsx

@@ -88,12 +88,12 @@ describe('getLabelColor', () => {
 		expect(result).toBe(inputColor);
 	});
 
-	it('should return palette.primary.main when statusMessage is not empty', () => {
+	it('should return palette.error.main when statusMessage is not empty', () => {
 		const disabled = false;
 		const readOnly = false;
 		const inputState = 'notFocus';
 		const result = getLabelColor({disabled, readOnly, inputColor, inputState, statusMessage});
-		expect(result).toBe(palette.primary.main);
+		expect(result).toBe(palette.error.main);
 	});
 
 	it('should return palette.grey[500] when statusMessage is empty', () => {

src/components/Input/utils/index.ts

@@ -73,7 +73,7 @@ export const getLabelColor = ({
 	}
 
 	if (statusMessage) {
-		return palette.primary.main;
+		return palette.error.main;
 	}
 
 	return palette.grey[500];