Merge branch 'master' of github.com:janis-commerce/ui-native into JUI…

…P-136-correcciones-componente-select
janis-commerce · Jan 15, 2024 · c889074 · c889074
2 parents 09c6a71 + 7df4758
commit c889074
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,10 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.0] - 2024-01-15
+
 ### Added
 
 - Added scaling funtions for different resolutions
 
+### Fixed
+
+- Fixed storybook's components
+
 ## [1.2.0] - 2023-12-06
 
 ### Added

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@janiscommerce/ui-native",
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"description": "components library for Janis app",
 	"main": "dist/index.js",
 	"typings": "dist/index.d.ts",

diff --git a/src/components/LoadingFullScreen/__snapshots__/index.test.tsx.snap b/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",
         },

diff --git a/src/theme/palette.ts b/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',

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,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;
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} 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>
-);
+	);
+};
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}) => {