Reorganise files structure and refactore theme file

kabaros · Nov 23, 2019 · 3ea9082 · 3ea9082
1 parent 1c74e01
commit 3ea9082
Show file tree

Hide file tree

Showing 6 changed files with 71 additions and 66 deletions.
diff --git a/App.js b/App.js
@@ -16,7 +16,7 @@ import {
   StatusBar,
 } from 'react-native';
 import AppText from './components/core/AppText';
-import {colors, metrics, style} from './themes';
+import {Colors, Metrics, Styles} from './components/theme';
 import TopicsList from './components/TopicsList';
 
 import Styling from './components/slides/Styling';
@@ -33,15 +33,18 @@ const App: () => React$Node = () => {
           contentInsetAdjustmentBehavior="automatic"
           style={styles.scrollView}>
           <View style={styles.sectionContainer}>
-            <AppText centered style={[style.h1]}>
+            <AppText centered style={[Styles.h1]}>
               Intro to React Native {'\r'}
-              <AppText style={[style.h2]}>(Layout and Styling)</AppText>
+              <AppText style={[Styles.h2]}>(Layout and Styling)</AppText>
             </AppText>
             <TopicsList />
           </View>
         </ScrollView>
         <View style={styles.footer}>
           <AppText style={styles.footerText}>Mozafar @kabaros</AppText>
+          <AppText style={styles.footerText}>
+            github.com/kabaros/ReactNativeTalk
+          </AppText>
         </View>
       </SafeAreaView>
     </>
@@ -50,28 +53,28 @@ const App: () => React$Node = () => {
 
 const styles = StyleSheet.create({
   scrollView: {
-    backgroundColor: colors.background,
+    backgroundColor: Colors.background,
   },
   sectionContainer: {
-    marginTop: metrics.doubleSection,
-    paddingHorizontal: metrics.section,
+    marginTop: Metrics.section,
+    paddingHorizontal: Metrics.section,
   },
   sectionTitle: {
     textAlign: 'center',
   },
   footer: {
     // backgroundColor: 'black',
     // height: 30,
-    backgroundColor: colors.footer,
+    backgroundColor: Colors.footer,
     alignItems: 'flex-end',
     margin: 20,
   },
   footerText: {
-    ...style.small,
-    color: colors.lighterText,
+    ...Styles.small,
+    color: Colors.lighterText,
   },
   safeArea: {
-    backgroundColor: colors.footer,
+    backgroundColor: Colors.footer,
     flex: 1,
   },
 });

diff --git a/components/TopicDescription.js b/components/TopicDescription.js
@@ -2,7 +2,7 @@ import React, {useState} from 'react';
 import {TouchableOpacity, Text, StyleSheet} from 'react-native';
 import {TopicDetails} from './TopicDetails';
 import AppText from './core/AppText';
-import {metrics, colors, style} from '../themes';
+import {Metrics, Colors, Styles} from './theme';
 import Styling from './slides/Styling';
 import ScalingStyles from './slides/ScalingStyles';
 
@@ -21,15 +21,15 @@ export const TopicDescription = props => {
           style={[
             styles.topicHeader,
             styles.titleStyle,
-            !showMoreInfo ? style.small : null,
+            !showMoreInfo ? Styles.small : null,
           ]}>
           {title}
         </AppText>
         <AppText
           style={[
             styles.topicHeader,
             styles.subTitleStyle,
-            !showMoreInfo ? style.small : null,
+            !showMoreInfo ? Styles.small : null,
           ]}>
           {subtitle}
         </AppText>
@@ -52,21 +52,21 @@ const getCustomCompnent = name => {
 const styles = StyleSheet.create({
   topicContainer: {
     flexDirection: 'row',
-    margin: metrics.marginVertical,
-    borderBottomColor: colors.border,
-    borderBottomWidth: metrics.horizontalLineHeight,
+    margin: Metrics.marginVertical,
+    borderBottomColor: Colors.border,
+    borderBottomWidth: Metrics.horizontalLineHeight,
   },
   topicHeader: {
-    paddingTop: metrics.doublePadding,
-    paddingBottom: metrics.padding,
+    paddingTop: Metrics.doublePadding,
+    paddingBottom: Metrics.padding,
   },
   titleStyle: {
-    ...style.regular,
+    ...Styles.regular,
     flex: 3,
-    color: colors.highlightText,
+    color: Colors.highlightText,
   },
   subTitleStyle: {
-    ...style.medium,
+    ...Styles.medium,
     flex: 2,
   },
 });
diff --git a/components/TopicDetails.js b/components/TopicDetails.js
@@ -1,6 +1,6 @@
 import React, {Fragment} from 'react';
 import {StyleSheet, View} from 'react-native';
-import {colors, style, metrics, size} from '../themes';
+import {Colors, Styles, Metrics, Sizes} from './theme';
 import AppText from './core/AppText';
 
 export const TopicDetails = ({bulletPoints}) => {
@@ -19,14 +19,14 @@ export const TopicDetails = ({bulletPoints}) => {
 
 const styles = StyleSheet.create({
   bulletContainer: {
-    borderBottomWidth: metrics.horizontalLineHeight,
-    borderBottomColor: colors.border,
-    paddingLeft: metrics.marginHorizontal,
+    borderBottomWidth: Metrics.horizontalLineHeight,
+    borderBottomColor: Colors.border,
+    paddingLeft: Metrics.marginHorizontal,
   },
   bulletPoint: {
-    ...style.normal,
-    color: colors.lighterText,
-    lineHeight: size.regular * 1.5,
-    padding: metrics.padding,
+    ...Styles.normal,
+    color: Colors.lighterText,
+    lineHeight: Sizes.regular * 1.5,
+    padding: Metrics.padding,
   },
 });
diff --git a/components/core/AppText.js b/components/core/AppText.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import {StyleSheet, Text} from 'react-native';
-import {style, colors} from '../../themes';
+import {Styles, Colors} from '../theme';
 
 const getDefaultStyle = ({h1, h2}) => {
-  if (h1) return style.h1;
-  if (h2) return style.h2;
+  if (h1) return Styles.h1;
+  if (h2) return Styles.h2;
 
-  return style.normal;
+  return Styles.normal;
 };
 
 const AppText = props => {
@@ -15,7 +15,7 @@ const AppText = props => {
   const defaultStyle = getDefaultStyle(props);
   const finalStyle = [
     defaultStyle,
-    {color: colors.text},
+    {color: Colors.text},
     {textAlign: centered ? 'center' : 'auto'},
     props.style,
   ];

diff --git a/components/data/topics.json b/components/data/topics.json
@@ -3,10 +3,10 @@
     "title": "Who am I",
     "subtitle": "Mozafar @kabaros",
     "details": [
-      "Twitter: @kabaros",
+      "github.com/kabaros/ReactNativeTalk",
       "Glovo / Barcelona (since September)",
-      "CodeYourFuture Glasgow",
-      "MigraCode Barcelona (migracode.eu)"
+      "CodeYourFuture previously",
+      "Migracode Barcelona (migracode.eu)"
     ]
   },
   {
@@ -27,7 +27,8 @@
       "Code once for Android and iOS",
       "Development Experience",
       "Performance (and native feel)",
-      "CodePush (OTA updates)"
+      "CodePush (OTA updates)",
+      "It's not only startups or hobby projects"
     ]
   },
   {
@@ -45,11 +46,9 @@
     "subtitle": "The Layout engine",
     "details": [
       "Yoga is an open-source, cross-platform layout library that implements Flexbox.",
-      "Flexbox (with few differences)",
-      "Expressive layout library, not implementing all of CSS.",
-      "No support for styling properties that have no impact on layout",
-      "https://yogalayout.com/docs",
-      "RTL is a first-class citizen"
+      "Expressive layout library, not implementing all of CSS (just bits that have impact on layout)",
+      "RTL is a first-class citizen",
+      "https://yogalayout.com/docs"
     ]
   },
   {

diff --git a/themes/index.js → components/theme.js b/themes/index.js → components/theme.js
@@ -2,15 +2,9 @@ import {Dimensions, Platform} from 'react-native';
 
 const {width, height} = Dimensions.get('window');
 
-export const type = {
-  base: 'Avenir-Book',
-  bold: 'Avenir-Black',
-  emphasis: 'HelveticaNeue-Italic',
-};
-
 const baseFontSize = 16;
 
-export const size = {
+export const Sizes = {
   h1: baseFontSize * 2,
   h2: baseFontSize * 1.5,
   regular: baseFontSize,
@@ -19,34 +13,40 @@ export const size = {
   tiny: baseFontSize * 0.5,
 };
 
-export const style = {
+export const FontType = {
+  base: 'Avenir-Book',
+  bold: 'Avenir-Black',
+  emphasis: 'HelveticaNeue-Italic',
+};
+
+export const Styles = {
   h1: {
-    fontFamily: type.base,
-    fontSize: size.h1,
+    fontFamily: FontType.base,
+    fontSize: Sizes.h1,
   },
   h2: {
-    fontFamily: type.base,
-    fontSize: size.h2,
+    fontFamily: FontType.base,
+    fontSize: Sizes.h2,
   },
   normal: {
-    fontFamily: type.base,
-    fontSize: size.regular,
+    fontFamily: FontType.base,
+    fontSize: Sizes.regular,
   },
   medium: {
-    fontFamily: type.base,
-    fontSize: size.medium,
+    fontFamily: FontType.base,
+    fontSize: Sizes.medium,
   },
   small: {
-    fontFamily: type.base,
-    fontSize: size.small,
+    fontFamily: FontType.base,
+    fontSize: Sizes.small,
   },
   description: {
-    fontFamily: type.base,
-    fontSize: size.medium,
+    fontFamily: FontType.base,
+    fontSize: Sizes.medium,
   },
 };
 
-export const metrics = {
+export const Metrics = {
   marginHorizontal: 10,
   marginVertical: 10,
 
@@ -64,7 +64,7 @@ export const metrics = {
   navBarHeight: Platform.OS === 'ios' ? 64 : 54,
 };
 
-export const colors = {
+export const Colors = {
   text: '#000',
   lighterText: '#444',
   background: '#FFF',
@@ -73,7 +73,10 @@ export const colors = {
   border: '#eaeaea',
 };
 
-// export const colors = {
+const scale = size => {
+  (width * size) / 315;
+};
+// export const Colors = {
 //   background: '#252525',
 //   footer: '#252525',
 //   text: '#ffda1f',