From b89151b668535968a30da9f7f122294d57a9ba37 Mon Sep 17 00:00:00 2001 From: Damian Morales Date: Thu, 11 Jan 2024 12:24:59 -0300 Subject: [PATCH 1/9] corregir componentes cortados de storybook --- .ondevice/storybook.requires.js | 2 +- src/theme/palette.ts | 1 + src/ts/interfaces/colors.ts | 5 +- .../decorators/CenterScrollView/index.js | 23 +++++++++ storybook/decorators/CenterView/index.js | 14 ++---- .../stories/DesignStystem/Colors.stories.js | 47 +++++++++---------- .../stories/DesignStystem/Icons.stories.js | 8 ++++ 7 files changed, 64 insertions(+), 36 deletions(-) create mode 100644 storybook/decorators/CenterScrollView/index.js diff --git a/.ondevice/storybook.requires.js b/.ondevice/storybook.requires.js index 0550d8d..60d1a98 100644 --- 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 index 81144eb..d990d6c 100644 --- 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 index 964a4ef..c6dbe3d 100644 --- 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 new file mode 100644 index 0000000..5fea559 --- /dev/null +++ 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 ( + + {children} + + ); +}; + +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 index 97443b2..7982fe8 100644 --- a/storybook/decorators/CenterView/index.js +++ b/storybook/decorators/CenterView/index.js @@ -1,19 +1,11 @@ import React from 'react'; -import {ScrollView, StyleSheet, View} from 'react-native'; +import {StyleSheet, View} from 'react-native'; const CenterView = ({children}) => { - return ( - - {children} - - ); + return {children}; }; const styles = StyleSheet.create({ - scrollView: { - paddingVertical: 25, - paddingHorizontal: 10, - }, main: { flex: 1, display: 'flex', @@ -21,6 +13,8 @@ const styles = StyleSheet.create({ 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 index 82b35f3..a46bcab 100644 --- 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) => ( + + + + ), + ], }; 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 = () => ( - - - {colorsKeys.map((title) => { - return ( - - {title} - - <>{renderColor(title)} - - - ); - })} - - + {colorsKeys.map((title) => { + return ( + + {title} + + <>{renderColor(title)} + + + ); + })} ); diff --git a/storybook/stories/DesignStystem/Icons.stories.js b/storybook/stories/DesignStystem/Icons.stories.js index 9c9c8ad..45ab537 100644 --- 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) => ( + + + + ), + ], }; export const DefaultProps = ({color, size, ...props}) => { From 4e740c77fe80cb3dfdda4827b3e5a14b7d8ccc92 Mon Sep 17 00:00:00 2001 From: Damian Morales Date: Thu, 11 Jan 2024 12:33:26 -0300 Subject: [PATCH 2/9] corregir componentes cortados de storybook --- .../LoadingFullScreen/__snapshots__/index.test.tsx.snap | 4 ++-- src/theme/palette.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/LoadingFullScreen/__snapshots__/index.test.tsx.snap b/src/components/LoadingFullScreen/__snapshots__/index.test.tsx.snap index eee3c2c..6fae046 100644 --- 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 index d990d6c..33d9bdc 100644 --- a/src/theme/palette.ts +++ b/src/theme/palette.ts @@ -19,13 +19,13 @@ const primary: Primary = { const black: Black = { main: '#2F2F2F', dark: '#050505', - semiTransparent: 'rgba(0, 0, 0, 0.1)', + 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', From a2cdf9aa5c8505b9147ab65add7fae08fa46bf4a Mon Sep 17 00:00:00 2001 From: Damian Morales Date: Thu, 11 Jan 2024 12:52:44 -0300 Subject: [PATCH 3/9] corregir componentes cortados de storybook --- storybook/decorators/CenterScrollView/index.js | 3 --- storybook/stories/DesignStystem/Colors.stories.js | 14 +++++++++----- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/storybook/decorators/CenterScrollView/index.js b/storybook/decorators/CenterScrollView/index.js index 5fea559..27872c0 100644 --- a/storybook/decorators/CenterScrollView/index.js +++ b/storybook/decorators/CenterScrollView/index.js @@ -14,9 +14,6 @@ const styles = StyleSheet.create({ flex: 1, display: 'flex', flexWrap: 'wrap', - flexDirection: 'row', - justifyContent: 'center', - alignItems: 'center', }, }); diff --git a/storybook/stories/DesignStystem/Colors.stories.js b/storybook/stories/DesignStystem/Colors.stories.js index a46bcab..9169502 100644 --- a/storybook/stories/DesignStystem/Colors.stories.js +++ b/storybook/stories/DesignStystem/Colors.stories.js @@ -28,8 +28,8 @@ const styles = { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', - gap: 40, marginBottom: 30, + // flexShrink: 0, }, ColorSquare: (color) => ({ backgroundColor: color, @@ -37,12 +37,16 @@ const styles = { height: 100, borderColor: black.semiTransparent, borderWidth: 1, + marginRight: 10, }), TitleWrapper: { fontSize: 24, textTransform: 'capitalize', marginBottom: 30, }, + Title: { + marginVertical: 5, + }, }; const colorsKeys = Object.keys(palette); @@ -64,15 +68,15 @@ const renderColor = (colorData) => { return arrayComponent.map(({title, value}) => ( - {title} + {title} - {value} + {value} )); }; export const Colors = () => ( - + <> {colorsKeys.map((title) => { return ( @@ -83,5 +87,5 @@ export const Colors = () => ( ); })} - + ); From 19908a4d7d7492eb3af1bd687447e72ecc897604 Mon Sep 17 00:00:00 2001 From: Damian Morales Date: Thu, 11 Jan 2024 12:54:21 -0300 Subject: [PATCH 4/9] corregir componentes cortados de storybook --- storybook/stories/DesignStystem/Colors.stories.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/storybook/stories/DesignStystem/Colors.stories.js b/storybook/stories/DesignStystem/Colors.stories.js index 9169502..6219a0e 100644 --- a/storybook/stories/DesignStystem/Colors.stories.js +++ b/storybook/stories/DesignStystem/Colors.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, SafeAreaView} from 'react-native'; +import {View} from 'react-native'; import Text from '../../../src/components/Text'; import {black, palette} from '../../../src/theme/palette'; import CenterScrollView from '../../decorators/CenterScrollView'; @@ -29,7 +29,7 @@ const styles = { flexDirection: 'row', flexWrap: 'wrap', marginBottom: 30, - // flexShrink: 0, + flexShrink: 0, }, ColorSquare: (color) => ({ backgroundColor: color, From fae6e3eb2e57365f05ee9dd754c982cd1b6a91d0 Mon Sep 17 00:00:00 2001 From: Damian Morales Date: Thu, 11 Jan 2024 12:57:18 -0300 Subject: [PATCH 5/9] corregir componentes cortados de storybook --- storybook/decorators/CenterScrollView/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/storybook/decorators/CenterScrollView/index.js b/storybook/decorators/CenterScrollView/index.js index 27872c0..fd7be5d 100644 --- a/storybook/decorators/CenterScrollView/index.js +++ b/storybook/decorators/CenterScrollView/index.js @@ -14,6 +14,7 @@ const styles = StyleSheet.create({ flex: 1, display: 'flex', flexWrap: 'wrap', + flexDirection: 'row', }, }); From 33cf65926a598b4e357ebd7ba813e37811dd8755 Mon Sep 17 00:00:00 2001 From: Damian Morales Date: Thu, 11 Jan 2024 13:18:14 -0300 Subject: [PATCH 6/9] corregir componentes cortados de storybook --- .../stories/DesignStystem/Colors.stories.js | 34 +++++++++++-------- 1 file changed, 19 insertions(+), 15 deletions(-) diff --git a/storybook/stories/DesignStystem/Colors.stories.js b/storybook/stories/DesignStystem/Colors.stories.js index 6219a0e..00e43eb 100644 --- a/storybook/stories/DesignStystem/Colors.stories.js +++ b/storybook/stories/DesignStystem/Colors.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View} from 'react-native'; +import {View, useWindowDimensions} from 'react-native'; import Text from '../../../src/components/Text'; import {black, palette} from '../../../src/theme/palette'; import CenterScrollView from '../../decorators/CenterScrollView'; @@ -24,12 +24,14 @@ export default { const styles = { Base: {fontFamily: 'Roboto'}, + Container: { + width: '100%', + }, ColorWrapper: { display: 'flex', flexDirection: 'row', flexWrap: 'wrap', marginBottom: 30, - flexShrink: 0, }, ColorSquare: (color) => ({ backgroundColor: color, @@ -75,17 +77,19 @@ const renderColor = (colorData) => { )); }; -export const Colors = () => ( - <> - {colorsKeys.map((title) => { - return ( - - {title} - - <>{renderColor(title)} +export const Colors = () => { + return ( + + {colorsKeys.map((title) => { + return ( + + {title} + + <>{renderColor(title)} + - - ); - })} - -); + ); + })} + + ); +}; From b28d06f0b5834d75a0af27650a9b1c5f63526ff9 Mon Sep 17 00:00:00 2001 From: Damian Morales Date: Thu, 11 Jan 2024 13:18:44 -0300 Subject: [PATCH 7/9] corregir componentes cortados de storybook --- storybook/stories/DesignStystem/Colors.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/storybook/stories/DesignStystem/Colors.stories.js b/storybook/stories/DesignStystem/Colors.stories.js index 00e43eb..07b7e23 100644 --- a/storybook/stories/DesignStystem/Colors.stories.js +++ b/storybook/stories/DesignStystem/Colors.stories.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, useWindowDimensions} from 'react-native'; +import {View} from 'react-native'; import Text from '../../../src/components/Text'; import {black, palette} from '../../../src/theme/palette'; import CenterScrollView from '../../decorators/CenterScrollView'; From 486bef018f87133bbc399d0ed8a714c693219a69 Mon Sep 17 00:00:00 2001 From: christian97dd Date: Mon, 15 Jan 2024 10:00:59 -0300 Subject: [PATCH 8/9] modified changelog --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index de63fd3..3692708 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,8 @@ 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 From 7df4758d363a50a137cfd108892a1e34e4540d08 Mon Sep 17 00:00:00 2001 From: christian97dd Date: Mon, 15 Jan 2024 10:01:10 -0300 Subject: [PATCH 9/9] 1.3.0 --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1f05cc7..67ee4d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@janiscommerce/ui-native", - "version": "1.2.0", + "version": "1.3.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@janiscommerce/ui-native", - "version": "1.2.0", + "version": "1.3.0", "license": "ISC", "dependencies": { "@gorhom/bottom-sheet": "^4.5.1", diff --git a/package.json b/package.json index 07641c9..90512a9 100644 --- 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",