From 5203b8e2674d8b8e19f5ad5008d9e4903164dff5 Mon Sep 17 00:00:00 2001
From: Matthieu Napoli <m.napoli@thecodingmachine.com>
Date: Tue, 7 Aug 2018 10:40:36 +0200
Subject: [PATCH] Fix #6 Add a `App/Theme` directory for storing the base
 application styles

---
 App/Containers/HomeScreen.js   | 27 ++++++++---------
 App/Images/README.md           |  1 +
 App/Theme/ApplicationStyles.js | 39 +++++++++++++++++++++++++
 App/Theme/Colors.js            |  9 ++++++
 App/Theme/Fonts.js             | 53 ++++++++++++++++++++++++++++++++++
 App/Theme/Images.js            |  8 +++++
 App/Theme/Metrics.js           | 31 ++++++++++++++++++++
 App/Theme/README.md            |  1 +
 App/Theme/index.js             |  7 +++++
 README.md                      |  2 ++
 10 files changed, 165 insertions(+), 13 deletions(-)
 create mode 100644 App/Images/README.md
 create mode 100644 App/Theme/ApplicationStyles.js
 create mode 100644 App/Theme/Colors.js
 create mode 100644 App/Theme/Fonts.js
 create mode 100644 App/Theme/Images.js
 create mode 100644 App/Theme/Metrics.js
 create mode 100644 App/Theme/README.md
 create mode 100644 App/Theme/index.js

diff --git a/App/Containers/HomeScreen.js b/App/Containers/HomeScreen.js
index 8ce6303dc..c99ca9d98 100644
--- a/App/Containers/HomeScreen.js
+++ b/App/Containers/HomeScreen.js
@@ -4,10 +4,12 @@ import { connect } from 'react-redux'
 import { PropTypes } from 'prop-types'
 import ExampleActions from 'App/Stores/Example/Actions'
 import { isHot } from 'App/Stores/Example/Selectors'
+import Fonts from 'App/Theme/Fonts'
+import ApplicationStyles from 'App/Theme/ApplicationStyles'
 
 const instructions = Platform.select({
-  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
-  android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu',
+  ios: 'Press Cmd+R to reload,\nCmd+D or shake for dev menu.',
+  android: 'Double tap R on your keyboard to reload,\nShake or press menu button for dev menu.',
 })
 
 class HomeScreen extends React.Component {
@@ -23,12 +25,12 @@ class HomeScreen extends React.Component {
 
     return (
       <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
+        <Text style={styles.title}>Welcome to React Native!</Text>
         <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
-        <Text style={styles.instructions}>The weather temperature is: {temperature}</Text>
-        <Text style={styles.instructions}>{this.props.isHot ? "It's pretty hot!" : ''}</Text>
-        <Text style={styles.instructions}>{this.props.temperatureErrorMessage}</Text>
+        <Text style={styles.text}>{instructions}</Text>
+        <Text style={styles.text}>The weather temperature is: {temperature}</Text>
+        <Text style={styles.text}>{this.props.isHot ? "It's pretty hot!" : ''}</Text>
+        <Text style={styles.text}>{this.props.temperatureErrorMessage}</Text>
         <Button onPress={this.props.fetchTemperature} title="Refresh" />
       </View>
     )
@@ -37,16 +39,15 @@ class HomeScreen extends React.Component {
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
+    ...ApplicationStyles.screen.container,
   },
-  welcome: {
-    fontSize: 20,
+  title: {
+    ...Fonts.style.h1,
     textAlign: 'center',
     margin: 10,
   },
-  instructions: {
+  text: {
+    ...Fonts.style.normal,
     textAlign: 'center',
     marginBottom: 5,
   },
diff --git a/App/Images/README.md b/App/Images/README.md
new file mode 100644
index 000000000..0601664ae
--- /dev/null
+++ b/App/Images/README.md
@@ -0,0 +1 @@
+This directory contains the application's images.
diff --git a/App/Theme/ApplicationStyles.js b/App/Theme/ApplicationStyles.js
new file mode 100644
index 000000000..16f0d3c5b
--- /dev/null
+++ b/App/Theme/ApplicationStyles.js
@@ -0,0 +1,39 @@
+import Fonts from './Fonts'
+import Metrics from './Metrics'
+import Colors from './Colors'
+
+const ApplicationStyles = {
+  screen: {
+    mainContainer: {
+      flex: 1,
+      backgroundColor: Colors.transparent,
+    },
+    container: {
+      flex: 1,
+      paddingTop: Metrics.baseMargin,
+      backgroundColor: Colors.transparent,
+    },
+    section: {
+      margin: Metrics.section,
+      padding: Metrics.baseMargin,
+    },
+    sectionText: {
+      ...Fonts.style.normal,
+      paddingVertical: Metrics.doubleMargin,
+      marginVertical: Metrics.smallMargin,
+      textAlign: 'center',
+    },
+    subtitle: {
+      padding: Metrics.smallMargin,
+      marginBottom: Metrics.smallMargin,
+      marginHorizontal: Metrics.smallMargin,
+    },
+    titleText: {
+      ...Fonts.style.h2,
+      fontSize: 14,
+      color: Colors.text,
+    },
+  },
+}
+
+export default ApplicationStyles
diff --git a/App/Theme/Colors.js b/App/Theme/Colors.js
new file mode 100644
index 000000000..e169ff2f1
--- /dev/null
+++ b/App/Theme/Colors.js
@@ -0,0 +1,9 @@
+const colors = {
+  transparent: 'rgba(0,0,0,0)',
+  text: '#212529',
+  primary: '#007bff',
+  success: '#28a745',
+  error: '#dc3545',
+}
+
+export default colors
diff --git a/App/Theme/Fonts.js b/App/Theme/Fonts.js
new file mode 100644
index 000000000..0b69fd9ac
--- /dev/null
+++ b/App/Theme/Fonts.js
@@ -0,0 +1,53 @@
+const type = {
+  base: 'inherit',
+}
+
+const size = {
+  h1: 38,
+  h2: 34,
+  h3: 30,
+  h4: 26,
+  h5: 20,
+  h6: 19,
+  input: 18,
+  regular: 17,
+  medium: 14,
+  small: 12,
+}
+
+const style = {
+  h1: {
+    fontFamily: type.base,
+    fontSize: size.h1,
+  },
+  h2: {
+    fontFamily: type.base,
+    fontSize: size.h2,
+  },
+  h3: {
+    fontFamily: type.base,
+    fontSize: size.h3,
+  },
+  h4: {
+    fontFamily: type.base,
+    fontSize: size.h4,
+  },
+  h5: {
+    fontFamily: type.base,
+    fontSize: size.h5,
+  },
+  h6: {
+    fontFamily: type.base,
+    fontSize: size.h6,
+  },
+  normal: {
+    fontFamily: type.base,
+    fontSize: size.regular,
+  },
+}
+
+export default {
+  type,
+  size,
+  style,
+}
diff --git a/App/Theme/Images.js b/App/Theme/Images.js
new file mode 100644
index 000000000..ff16b2941
--- /dev/null
+++ b/App/Theme/Images.js
@@ -0,0 +1,8 @@
+/**
+ * Images should be stored in the `App/Images` directory and referenced using variables defined here.
+ */
+const Images = {
+  // logo: require('../Images/logo.png'),
+}
+
+export default Images
diff --git a/App/Theme/Metrics.js b/App/Theme/Metrics.js
new file mode 100644
index 000000000..ba26f0347
--- /dev/null
+++ b/App/Theme/Metrics.js
@@ -0,0 +1,31 @@
+import { Dimensions, Platform } from 'react-native'
+
+const { width, height } = Dimensions.get('window')
+
+const metrics = {
+  marginHorizontal: 10,
+  marginVertical: 10,
+  baseMargin: 10,
+  doubleMargin: 20,
+  smallMargin: 5,
+  horizontalLineHeight: 1,
+  screenWidth: width < height ? width : height,
+  screenHeight: width < height ? height : width,
+  navBarHeight: Platform.OS === 'ios' ? 64 : 54,
+  buttonRadius: 4,
+  icons: {
+    tiny: 15,
+    small: 20,
+    medium: 30,
+    large: 45,
+    xl: 50,
+  },
+  images: {
+    small: 20,
+    medium: 40,
+    large: 60,
+    logo: 200,
+  },
+}
+
+export default metrics
diff --git a/App/Theme/README.md b/App/Theme/README.md
new file mode 100644
index 000000000..01c71210f
--- /dev/null
+++ b/App/Theme/README.md
@@ -0,0 +1 @@
+This directory contains the base for the application styles.
diff --git a/App/Theme/index.js b/App/Theme/index.js
new file mode 100644
index 000000000..e29e52794
--- /dev/null
+++ b/App/Theme/index.js
@@ -0,0 +1,7 @@
+import Colors from './Colors'
+import Fonts from './Fonts'
+import Metrics from './Metrics'
+import Images from './Images'
+import ApplicationStyles from './ApplicationStyles'
+
+export { Colors, Fonts, Images, Metrics, ApplicationStyles }
diff --git a/README.md b/README.md
index 2d405ce1e..bde50f3bd 100644
--- a/README.md
+++ b/README.md
@@ -12,8 +12,10 @@ This boilerplate contains:
 
 - [`App/Components`](App/Components): presentational components
 - [`App/Containers`](App/Containers): container components
+- [`App/Images`](App/Images): images used by the application
 - [`App/Stores`](App/Stores): redux [actions, reducers and stores](https://redux.js.org/basics)
 - [`App/Sagas`](App/Sagas): redux sagas
+- [`App/Theme`](App/Theme): base styles for the application
 
 For more information on each directory, click the link and read the directory's README.