JUIP-137 corregir componentes cortados en storybook

.ondevice/storybook.requires.js

@@ -1,71 +1,71 @@
 /* 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/BaseButton/BaseButton.stories.js": require("../storybook/stories/BaseButton/BaseButton.stories.js"),
-    "./storybook/stories/Carousel/Carousel.stories.js": require("../storybook/stories/Carousel/Carousel.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/DesignStystem/Icons.stories.js": require("../storybook/stories/DesignStystem/Icons.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/List/List.stories.js": require("../storybook/stories/List/List.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/ProgressBar/ProgressBar.stories.js": require("../storybook/stories/ProgressBar/ProgressBar.stories.js"),
-    "./storybook/stories/RadioButton/RadioButton.stories.js": require("../storybook/stories/RadioButton/RadioButton.stories.js"),
-    "./storybook/stories/Select/Select.stories.js": require("../storybook/stories/Select/Select.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/SwipeUp/SwipeUp.stories.js": require("../storybook/stories/SwipeUp/SwipeUp.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/BaseButton/BaseButton.stories.js': require('../storybook/stories/BaseButton/BaseButton.stories.js'),
+		'./storybook/stories/Carousel/Carousel.stories.js': require('../storybook/stories/Carousel/Carousel.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/DesignStystem/Icons.stories.js': require('../storybook/stories/DesignStystem/Icons.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/List/List.stories.js': require('../storybook/stories/List/List.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/ProgressBar/ProgressBar.stories.js': require('../storybook/stories/ProgressBar/ProgressBar.stories.js'),
+		'./storybook/stories/RadioButton/RadioButton.stories.js': require('../storybook/stories/RadioButton/RadioButton.stories.js'),
+		'./storybook/stories/Select/Select.stories.js': require('../storybook/stories/Select/Select.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/SwipeUp/SwipeUp.stories.js': require('../storybook/stories/SwipeUp/SwipeUp.stories.js'),
+		'./storybook/stories/Text/Text.stories.js': require('../storybook/stories/Text/Text.stories.js'),
+	};
 };
 
 configure(getStories, module, false);

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Added scaling funtions for different resolutions
 
+### Fixed
+
+- Fixed storybook's components
+
 ## [1.2.0] - 2023-12-06
 
 ### Added

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

@@ -13,7 +13,7 @@ exports[`LoadingFullScreen component render correct render only the loading 1`]
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "rgba(255, 255, 255, 0.75)",
+          "backgroundColor": "#ffffffbf",
           "flex": 1,
           "justifyContent": "center",
         },
@@ -191,7 +191,7 @@ exports[`LoadingFullScreen component render correct renders well the loading nex
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "rgba(255, 255, 255, 0.75)",
+          "backgroundColor": "#ffffffbf",
           "flex": 1,
           "justifyContent": "center",
         },

src/theme/palette.ts

@@ -19,12 +19,13 @@ const primary: Primary = {
 const black: Black = {
 	main: '#2F2F2F',
 	dark: '#050505',
+	semiTransparent: '#0000001a',
 };
 const white: White = {
 	main: '#E8EAF6',
 	dark: '#D0D3E3',
 	light: '#F4F5FB',
-	semiTransparent: 'rgba(255, 255, 255, 0.75)',
+	semiTransparent: '#ffffffbf',
 };
 const grey: GreyScale = {
 	100: '#DDDFE2',

src/ts/interfaces/colors.ts

@@ -19,7 +19,7 @@ export interface gamaColor {
 	main: string;
 	dark: string;
 }
-export interface Black extends gamaColor {}
+
 export interface Success extends gamaColor {}
 export interface Error extends gamaColor {}
 export interface Warning extends gamaColor {}
@@ -30,3 +30,6 @@ export interface Primary extends gamaColor {
 export interface White extends Primary {
 	semiTransparent: string;
 }
+export interface Black extends gamaColor {
+	semiTransparent: string;
+}

storybook/decorators/CenterScrollView/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import {ScrollView, StyleSheet, View} from 'react-native';
+
+const CenterScrollView = ({children}) => {
+	return (
+		<ScrollView>
+			<View style={styles.main}>{children}</View>
+		</ScrollView>
+	);
+};
+
+const styles = StyleSheet.create({
+	main: {
+		flex: 1,
+		display: 'flex',
+		flexWrap: 'wrap',
+		flexDirection: 'row',
+	},
+});
+
+export default CenterScrollView;

storybook/decorators/CenterView/index.js

@@ -1,26 +1,20 @@
 import React from 'react';
-import {ScrollView, StyleSheet, View} from 'react-native';
+import {StyleSheet, View} from 'react-native';
 
 const CenterView = ({children}) => {
-	return (
-		<ScrollView contentContainerStyle={styles.scrollView}>
-			<View style={styles.main}>{children}</View>
-		</ScrollView>
-	);
+	return <View style={styles.main}>{children}</View>;
 };
 
 const styles = StyleSheet.create({
-	scrollView: {
-		paddingVertical: 25,
-		paddingHorizontal: 10,
-	},
 	main: {
 		flex: 1,
 		display: 'flex',
 		flexWrap: 'wrap',
 		flexDirection: 'row',
 		justifyContent: 'center',
 		alignItems: 'center',
+		paddingVertical: 25,
+		paddingHorizontal: 10,
 	},
 });
 

storybook/stories/DesignStystem/Colors.stories.js

@@ -1,7 +1,8 @@
 import React from 'react';
-import {View, ScrollView, SafeAreaView} from 'react-native';
+import {View} from 'react-native';
 import Text from '../../../src/components/Text';
-import {palette} from '../../../src/theme/palette';
+import {black, palette} from '../../../src/theme/palette';
+import CenterScrollView from '../../decorators/CenterScrollView';
 
 export default {
 	title: 'Design system/Colors',
@@ -12,34 +13,42 @@ export default {
 			},
 		},
 	},
+	decorators: [
+		(Story) => (
+			<CenterScrollView>
+				<Story />
+			</CenterScrollView>
+		),
+	],
 };
 
 const styles = {
 	Base: {fontFamily: 'Roboto'},
 	Container: {
 		width: '100%',
-		paddingLeft: 10,
-		paddingRight: 10,
 	},
 	ColorWrapper: {
 		display: 'flex',
 		flexDirection: 'row',
-		gap: 40,
+		flexWrap: 'wrap',
 		marginBottom: 30,
 	},
-	ColorContainer: {
-		display: 'flex',
-	},
 	ColorSquare: (color) => ({
 		backgroundColor: color,
 		width: 100,
 		height: 100,
+		borderColor: black.semiTransparent,
+		borderWidth: 1,
+		marginRight: 10,
 	}),
 	TitleWrapper: {
 		fontSize: 24,
 		textTransform: 'capitalize',
 		marginBottom: 30,
 	},
+	Title: {
+		marginVertical: 5,
+	},
 };
 
 const colorsKeys = Object.keys(palette);
@@ -61,28 +70,26 @@ const renderColor = (colorData) => {
 
 	return arrayComponent.map(({title, value}) => (
 		<View key={`${title}-${value}`} style={styles.ColorContainer}>
-			<Text>{title}</Text>
+			<Text style={styles.Title}>{title}</Text>
 			<View style={styles.ColorSquare(value)} />
-			<Text>{value}</Text>
+			<Text style={styles.Title}>{value}</Text>
 		</View>
 	));
 };
 
-export const Colors = () => (
-	<SafeAreaView>
+export const Colors = () => {
+	return (
 		<View style={styles.Container}>
-			<ScrollView>
-				{colorsKeys.map((title) => {
-					return (
-						<View key={title}>
-							<Text style={[styles.TitleWrapper, styles.Base]}>{title}</Text>
-							<View style={styles.ColorWrapper}>
-								<>{renderColor(title)}</>
-							</View>
+			{colorsKeys.map((title) => {
+				return (
+					<View key={title}>
+						<Text style={[styles.TitleWrapper, styles.Base]}>{title}</Text>
+						<View style={styles.ColorWrapper}>
+							<>{renderColor(title)}</>
 						</View>
-					);
-				})}
-			</ScrollView>
+					</View>
+				);
+			})}
 		</View>
-	</SafeAreaView>
-);
+	);
+};

storybook/stories/DesignStystem/Icons.stories.js

@@ -3,10 +3,18 @@ import {View, Text, StyleSheet, useWindowDimensions} from 'react-native';
 import Icon from '../../../src/components/Icon';
 import {primary} from '../../../src/theme/palette';
 import iconsSelection from '../../../src/components/Icon/assets/fonts/selection.json';
+import CenterScrollView from '../../decorators/CenterScrollView';
 
 export default {
 	title: 'Design system/Icons',
 	argTypes: {color: {control: {type: 'color'}}},
+	decorators: [
+		(Story) => (
+			<CenterScrollView>
+				<Story />
+			</CenterScrollView>
+		),
+	],
 };
 
 export const DefaultProps = ({color, size, ...props}) => {