diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fe60da..3692708 100644
--- 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
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",
diff --git a/src/components/LoadingFullScreen/__snapshots__/index.test.tsx.snap b/src/components/LoadingFullScreen/__snapshots__/index.test.tsx.snap
index ee1220c..bc399f5 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 81144eb..33d9bdc 100644
--- 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
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..fd7be5d
--- /dev/null
+++ 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 (
+
+ {children}
+
+ );
+};
+
+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
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..07b7e23 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} 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) => (
+
+
+
+ ),
+ ],
};
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}) => (
- {title}
+ {title}
- {value}
+ {value}
));
};
-export const Colors = () => (
-
+export const Colors = () => {
+ return (
-
- {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}) => {