add preview params and colors doc

.storybook/preview-head.html

@@ -2,6 +2,8 @@
 
 <!-- Pull in static files served from your Static directory or the internet -->
 <!-- Example: `main.js|ts` is configured with staticDirs: ['../public'] and your font is located in the `fonts` directory inside your `public` directory -->
-<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
 
 <!-- Or you can load custom head-tag JavaScript: -->

.storybook/preview.js

@@ -1,6 +1,10 @@
 import React from 'react';
 import CenterView from '../storybook/decorators/CenterView';
 
+export const parameters = {
+	viewMode: 'docs',
+};
+
 export const decorators = [
 	(Story) => (
 		<CenterView>

storybook/stories/DesignStystem/Colors.stories.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import {View} from 'react-native';
+import Text from '../../../src/components/Text';
+import {palette} from '../../../src/theme/palette';
+
+export default {
+	title: 'Design system/Colors',
+	parameters: {
+		previewTabs: {
+			canvas: {
+				hidden: true,
+			},
+		},
+	},
+};
+
+const styles = {
+	Base: {fontFamily: 'Roboto'},
+	Container: {
+		width: '100%',
+	},
+	ColorWrapper: {
+		display: 'flex',
+		flexDirection: 'row',
+		gap: 40,
+		marginBottom: 30,
+	},
+	ColorContainer: {
+		display: 'flex',
+	},
+	ColorSquare: (color) => ({
+		backgroundColor: color,
+		width: 100,
+		height: 100,
+	}),
+	TitleWrapper: {
+		fontSize: 24,
+		textTransform: 'capitalize',
+		marginBottom: 30,
+	},
+};
+
+const colorsKeys = Object.keys(palette);
+
+const renderColor = (colorData) => {
+	const colorObject = palette[colorData];
+
+	if (!colorObject || !Object.keys(colorObject).length) {
+		return null;
+	}
+
+	const arrayComponent = Object.keys(colorObject).reduce((acc, act) => {
+		if (!palette[colorData][act]) {
+			return acc;
+		}
+
+		return [...acc, {title: `${colorData}.${act}`, value: palette[colorData][act]}];
+	}, []);
+
+	return arrayComponent.map(({title, value}) => (
+		<View key={`${title}-${value}`} style={styles.ColorContainer}>
+			<Text>{title}</Text>
+			<View style={styles.ColorSquare(value)} />
+			<Text>{value}</Text>
+		</View>
+	));
+};
+
+export const Colors = () => (
+	<View style={styles.Container}>
+		{colorsKeys.map((title) => {
+			return (
+				<View key={title}>
+					<Text style={[styles.TitleWrapper, styles.Base]}>{title}</Text>
+					<View style={styles.ColorWrapper}> {renderColor(title)}</View>
+				</View>
+			);
+		})}
+	</View>
+);