Merge branch 'JUIP-118-corregir-estilos-de-storybook-de-componente-in…

…put' of github.com:janis-commerce/ui-native into JUIP-118-corregir-estilos-de-storybook-de-componente-input

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npm run lint
+npx lint-staged && npm run lint

.ondevice/storybook.requires.js

@@ -1,63 +1,63 @@
 /* do not change this file, it is auto generated by storybook. */
 
 import {
-  configure,
-  addDecorator,
-  addParameters,
-  addArgsEnhancer,
-  clearDecorators,
-} from "@storybook/react-native";
+	configure,
+	addDecorator,
+	addParameters,
+	addArgsEnhancer,
+	clearDecorators,
+} from '@storybook/react-native';
 
 global.STORIES = [
-  {
-    titlePrefix: "",
-    directory: "./storybook/stories",
-    files: "**/*.stories.?(ts|tsx|js|jsx)",
-    importPathMatcher:
-      "^\\.[\\\\/](?:storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$",
-  },
+	{
+		titlePrefix: '',
+		directory: './storybook/stories',
+		files: '**/*.stories.?(ts|tsx|js|jsx)',
+		importPathMatcher:
+			'^\\.[\\\\/](?:storybook\\/stories(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.(?:ts|tsx|js|jsx)?)$',
+	},
 ];
 
-import "@storybook/addon-ondevice-actions/register";
-import "@storybook/addon-ondevice-controls/register";
+import '@storybook/addon-ondevice-actions/register';
+import '@storybook/addon-ondevice-controls/register';
 
-import { argsEnhancers } from "@storybook/addon-actions/dist/modern/preset/addArgs";
+import {argsEnhancers} from '@storybook/addon-actions/dist/modern/preset/addArgs';
 
-import { decorators, parameters } from "./preview";
+import {decorators, parameters} from './preview';
 
 if (decorators) {
-  if (__DEV__) {
-    // stops the warning from showing on every HMR
-    require("react-native").LogBox.ignoreLogs([
-      "`clearDecorators` is deprecated and will be removed in Storybook 7.0",
-    ]);
-  }
-  // workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
-  clearDecorators();
-  decorators.forEach((decorator) => addDecorator(decorator));
+	if (__DEV__) {
+		// stops the warning from showing on every HMR
+		require('react-native').LogBox.ignoreLogs([
+			'`clearDecorators` is deprecated and will be removed in Storybook 7.0',
+		]);
+	}
+	// workaround for global decorators getting infinitely applied on HMR, see https://github.com/storybookjs/react-native/issues/185
+	clearDecorators();
+	decorators.forEach((decorator) => addDecorator(decorator));
 }
 
 if (parameters) {
-  addParameters(parameters);
+	addParameters(parameters);
 }
 
 try {
-  argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
+	argsEnhancers.forEach((enhancer) => addArgsEnhancer(enhancer));
 } catch {}
 
 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"),
-    "./storybook/stories/LoadingFullScreen/LoadingFullScreen.stories.js": require("../storybook/stories/LoadingFullScreen/LoadingFullScreen.stories.js"),
-    "./storybook/stories/StatusChip/StatusChip.stories.js": require("../storybook/stories/StatusChip/StatusChip.stories.js"),
-    "./storybook/stories/Svg/Svg.stories.js": require("../storybook/stories/Svg/Svg.stories.js"),
-    "./storybook/stories/Text/Text.stories.js": require("../storybook/stories/Text/Text.stories.js"),
-  };
+	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'),
+		'./storybook/stories/LoadingFullScreen/LoadingFullScreen.stories.js': require('../storybook/stories/LoadingFullScreen/LoadingFullScreen.stories.js'),
+		'./storybook/stories/StatusChip/StatusChip.stories.js': require('../storybook/stories/StatusChip/StatusChip.stories.js'),
+		'./storybook/stories/Svg/Svg.stories.js': require('../storybook/stories/Svg/Svg.stories.js'),
+		'./storybook/stories/Text/Text.stories.js': require('../storybook/stories/Text/Text.stories.js'),
+	};
 };
 
 configure(getStories, module, false);

CHANGELOG.MD

@@ -34,6 +34,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed export components
 - Fixed an error when locally linking the package with a react native app
 - Fixed the error when components are styled using styled-components
+- Fixed Input styles at storybook web
+- Fixed typescript warnings
 
 ### Removed
 

src/components/StatusChip/__snapshots__/index.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`StatusChip component render correct a valid component is passed 1`] = `
       Array [
         Object {
           "fontFamily": "Roboto",
-          "fontSize": 16,
+          "fontSize": 13,
         },
         undefined,
       ]
@@ -54,12 +54,12 @@ exports[`StatusChip component render correct if a background is passed 1`] = `
       Array [
         Object {
           "fontFamily": "Roboto",
-          "fontSize": 16,
+          "fontSize": 13,
         },
         Object {
           "color": "#fff",
           "fontFamily": "Roboto",
-          "fontSize": 15,
+          "fontSize": 13,
           "fontWeight": "900",
           "lineHeight": 18,
           "textAlign": "center",
@@ -93,12 +93,12 @@ exports[`StatusChip component render correct text is passed 1`] = `
       Array [
         Object {
           "fontFamily": "Roboto",
-          "fontSize": 16,
+          "fontSize": 13,
         },
         Object {
           "color": "#2979FF",
           "fontFamily": "Roboto",
-          "fontSize": 15,
+          "fontSize": 13,
           "fontWeight": "900",
           "lineHeight": 18,
           "textAlign": "center",

src/components/StatusChip/index.tsx

@@ -8,23 +8,6 @@ interface StatusChipProps extends ViewProps {
 	background?: string;
 }
 
-const StatusChip = ({children, ...props}: StatusChipProps) => {
-	const isChildrenAString = typeof children === 'string';
-	const isCustomComponent = isValidElement(children);
-
-	const hasToRenderStatusChip = !children || (!isChildrenAString && !isCustomComponent);
-
-	if (hasToRenderStatusChip) {
-		return null;
-	}
-
-	return (
-		<View style={styles(props).ViewStyles} {...props}>
-			{isCustomComponent ? children : <Text style={styles(props).TextStyles}>{children}</Text>}
-		</View>
-	);
-};
-
 const styles = ({background}: StatusChipProps) =>
 	StyleSheet.create({
 		ViewStyles: {
@@ -39,7 +22,7 @@ const styles = ({background}: StatusChipProps) =>
 			borderColor: background ?? grey['300'],
 		},
 		TextStyles: {
-			fontSize: 15,
+			fontSize: 13,
 			lineHeight: 18,
 			fontFamily: 'Roboto',
 			fontWeight: '900',
@@ -48,4 +31,21 @@ const styles = ({background}: StatusChipProps) =>
 		},
 	});
 
+const StatusChip = ({children, ...props}: StatusChipProps) => {
+	const isChildrenAString = typeof children === 'string';
+	const isCustomComponent = isValidElement(children);
+
+	const hasToRenderStatusChip = !children || (!isChildrenAString && !isCustomComponent);
+
+	if (hasToRenderStatusChip) {
+		return null;
+	}
+
+	return (
+		<View style={styles(props).ViewStyles} {...props}>
+			{isCustomComponent ? children : <Text style={styles(props).TextStyles}>{children}</Text>}
+		</View>
+	);
+};
+
 export default StatusChip;

src/components/Text/__snapshots__/index.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Text component render correct match snapshot 1`] = `
     Array [
       Object {
         "fontFamily": "Roboto",
-        "fontSize": 16,
+        "fontSize": 13,
       },
       undefined,
     ]

src/components/Text/index.tsx

@@ -19,7 +19,7 @@ const Text = ({children, style, ...props}: TextProps) => {
 
 	const styles = StyleSheet.create({
 		TextStyles: {
-			fontSize: 16,
+			fontSize: 13,
 			fontFamily: 'Roboto',
 		},
 	});

storybook/stories/StatusChip/StatusChip.stories.js

@@ -11,33 +11,30 @@ export default {
 	},
 };
 
-export const PassingItText = (props) => <StatusChip {...props}>Partially delivered</StatusChip>;
+export const WithText = (props) => <StatusChip {...props}>Partially delivered</StatusChip>;
 
-PassingItText.storyName = 'passing it text';
+WithText.storyName = 'With text';
 
-PassingItText.args = {
-	background: '',
+WithText.args = {
+	background: '#2979FF',
+};
+const TextStyles = {
+	color: '#fff',
+	fontSize: 13,
+	lineHeight: 18,
+	fontFamily: 'Roboto',
+	fontWeight: '900',
+	textAlign: 'center',
 };
 
-export const PassingItComponent = (props) => (
+export const WithCustomComponent = (props) => (
 	<StatusChip {...props}>
-		<Text
-			fontSize={15}
-			lineHeight={18}
-			color={'#fff'}
-			fontFamily={'Roboto'}
-			fontStyle={'normal'}
-			fontWeight={'bold'}
-			letterSpacing={0}
-			textDecorationLine={'none'}
-			textTransform={'none'}>
-			Delivered
-		</Text>
+		<Text style={TextStyles}>Delivered</Text>
 	</StatusChip>
 );
 
-PassingItComponent.storyName = 'passing it a custom component';
+WithCustomComponent.storyName = 'With custom component';
 
-PassingItComponent.args = {
+WithCustomComponent.args = {
 	background: '#2979FF',
 };