corregir componentes cortados de storybook

janis-commerce · Jan 11, 2024 · b89151b · b89151b
1 parent 73e1abd
commit b89151b
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 36 deletions.
diff --git a/.ondevice/storybook.requires.js b/.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)?)$',
 	},
 ];
 

diff --git a/src/theme/palette.ts b/src/theme/palette.ts
@@ -19,6 +19,7 @@ const primary: Primary = {
 const black: Black = {
 	main: '#2F2F2F',
 	dark: '#050505',
+	semiTransparent: 'rgba(0, 0, 0, 0.1)',
 };
 const white: White = {
 	main: '#E8EAF6',

diff --git a/src/ts/interfaces/colors.ts b/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;
+}
diff --git a/storybook/decorators/CenterScrollView/index.js b/storybook/decorators/CenterScrollView/index.js
@@ -0,0 +1,23 @@
+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',
+		justifyContent: 'center',
+		alignItems: 'center',
+	},
+});
+
+export default CenterScrollView;
diff --git a/storybook/decorators/CenterView/index.js b/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,
 	},
 });
 

diff --git a/storybook/stories/DesignStystem/Colors.stories.js b/storybook/stories/DesignStystem/Colors.stories.js
@@ -1,7 +1,8 @@
 import React from 'react';
-import {View, ScrollView, SafeAreaView} from 'react-native';
+import {View, SafeAreaView} 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,28 +13,30 @@ export default {
 			},
 		},
 	},
+	decorators: [
+		(Story) => (
+			<CenterScrollView>
+				<Story />
+			</CenterScrollView>
+		),
+	],
 };
 
 const styles = {
 	Base: {fontFamily: 'Roboto'},
-	Container: {
-		width: '100%',
-		paddingLeft: 10,
-		paddingRight: 10,
-	},
 	ColorWrapper: {
 		display: 'flex',
 		flexDirection: 'row',
+		flexWrap: 'wrap',
 		gap: 40,
 		marginBottom: 30,
 	},
-	ColorContainer: {
-		display: 'flex',
-	},
 	ColorSquare: (color) => ({
 		backgroundColor: color,
 		width: 100,
 		height: 100,
+		borderColor: black.semiTransparent,
+		borderWidth: 1,
 	}),
 	TitleWrapper: {
 		fontSize: 24,
@@ -70,19 +73,15 @@ const renderColor = (colorData) => {
 
 export const Colors = () => (
 	<SafeAreaView>
-		<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>
-						</View>
-					);
-				})}
-			</ScrollView>
-		</View>
+		{colorsKeys.map((title) => {
+			return (
+				<View key={title}>
+					<Text style={[styles.TitleWrapper, styles.Base]}>{title}</Text>
+					<View style={styles.ColorWrapper}>
+						<>{renderColor(title)}</>
+					</View>
+				</View>
+			);
+		})}
 	</SafeAreaView>
 );
diff --git a/storybook/stories/DesignStystem/Icons.stories.js b/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}) => {