Merge branch 'theme' into 'master'

thecodingmachine#6 Ajout du dossier `Theme`

Closes thecodingmachine#6

See merge request tcm-projects/react-native-boilerplate!9

App/App.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
-import HomeScreen from 'App/Containers/HomeScreen'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/lib/integration/react'
 import createStore from 'App/Stores'
+import ExampleScreen from './Containers/Example/ExampleScreen'
 
 const { store, persistor } = createStore()
 
@@ -21,7 +21,7 @@ export default class App extends Component {
          * @see https://github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md
          */}
         <PersistGate loading={null} persistor={persistor}>
-          <HomeScreen />
+          <ExampleScreen />
         </PersistGate>
       </Provider>
     )

App/Containers/Example/ExampleScreen.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Platform, Text, View, Button } from 'react-native'
+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 Style from './ExampleScreenStyle'
+
+const instructions = Platform.select({
+  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 ExampleScreen extends React.Component {
+  componentDidMount() {
+    this.props.fetchTemperature()
+  }
+
+  render() {
+    let temperature = this.props.temperatureIsLoading ? '...' : this.props.temperature
+    if (temperature === null) {
+      temperature = '??'
+    }
+
+    return (
+      <View style={Style.container}>
+        <Text style={Style.title}>Welcome to React Native!</Text>
+        <Text style={Style.text}>To get started, edit App.js</Text>
+        <Text style={Style.text}>{instructions}</Text>
+        <Text style={Style.text}>The weather temperature is: {temperature}</Text>
+        <Text style={Style.text}>{this.props.isHot ? "It's pretty hot!" : ''}</Text>
+        <Text style={Style.text}>{this.props.temperatureErrorMessage}</Text>
+        <Button onPress={this.props.fetchTemperature} title="Refresh" />
+      </View>
+    )
+  }
+}
+
+ExampleScreen.propsTypes = {
+  temperature: PropTypes.number,
+  temperatureErrorMessage: PropTypes.string,
+}
+
+const mapStateToProps = (state) => ({
+  temperature: state.example.get('temperature'),
+  temperatureErrorMessage: state.example.get('temperatureErrorMessage'),
+  temperatureIsLoading: state.example.get('temperatureIsLoading'),
+  isHot: isHot(state),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  fetchTemperature: () => dispatch(ExampleActions.fetchTemperature()),
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ExampleScreen)

App/Containers/Example/ExampleScreenStyle.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native'
+import Fonts from 'App/Theme/Fonts'
+import ApplicationStyles from 'App/Theme/ApplicationStyles'
+
+export default StyleSheet.create({
+  container: {
+    ...ApplicationStyles.screen.container,
+  },
+  title: {
+    ...Fonts.style.h1,
+    textAlign: 'center',
+    margin: 10,
+  },
+  text: {
+    ...Fonts.style.normal,
+    textAlign: 'center',
+    marginBottom: 5,
+  },
+})

App/Images/README.md

@@ -0,0 +1 @@
+This directory contains the application's images.

App/Theme/ApplicationStyles.js

@@ -0,0 +1,13 @@
+/**
+ * This file defines the base application styles.
+ *
+ * Use it to define generic component styles (e.g. the default text styles, default button styles...).
+ */
+
+export default {
+  screen: {
+    container: {
+      flex: 1,
+    },
+  },
+}

App/Theme/Colors.js

@@ -0,0 +1,15 @@
+/**
+ * This file contains the application's colors.
+ *
+ * Define color here instead of duplicating them throughout the components.
+ * That allows to change them more easily later on.
+ */
+
+export default {
+  transparent: 'rgba(0,0,0,0)',
+  // Example colors:
+  text: '#212529',
+  primary: '#007bff',
+  success: '#28a745',
+  error: '#dc3545',
+}

App/Theme/Fonts.js

@@ -0,0 +1,38 @@
+const type = {
+  base: 'inherit',
+}
+
+const size = {
+  h1: 38,
+  h2: 34,
+  h3: 30,
+  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,
+  },
+  normal: {
+    fontFamily: type.base,
+    fontSize: size.regular,
+  },
+}
+
+export default {
+  type,
+  size,
+  style,
+}

App/Theme/Images.js

@@ -0,0 +1,7 @@
+/**
+ * Images should be stored in the `App/Images` directory and referenced using variables defined here.
+ */
+
+export default {
+  // logo: require('../Images/logo.png'),
+}

App/Theme/Metrics.js

@@ -0,0 +1,10 @@
+/**
+ * This file contains metric values that are global to the application.
+ */
+
+export default {
+  // Examples of metrics you can define:
+  // baseMargin: 10,
+  // largeMargin: 20,
+  // smallMargin: 5,
+}

App/Theme/README.md

@@ -0,0 +1 @@
+This directory contains the base for the application styles.

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 }

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.