style(component): Updating CodeLine component to use Styled-components

.all-contributorsrc

@@ -554,6 +554,13 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "josenaranjo",
+      "name": "Jose Luis Naranjo",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/3025600?v=4",
+      "profile": "https://co.linkedin.com/in/josenaranjo/en",
+      "contributions": []
     }
   ]
 }

CONTRIBUTORS.md

@@ -13,5 +13,5 @@ Thank you to all the people who have already contributed to GitPoint!
 | [<img src="https://avatars0.githubusercontent.com/u/18398761?v=4" width="100px;"/><br /><sub>Vitaliy Kanev</sub>](https://github.com/vitalkanev)<br />[📖](https://github.com/gitpoint/git-point/commits?author=vitalkanev "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/3691490?v=4" width="100px;"/><br /><sub>Peter Dave Hello</sub>](https://www.peterdavehello.org/)<br />[📖](https://github.com/gitpoint/git-point/commits?author=PeterDaveHello "Documentation") [🔧](#tool-PeterDaveHello "Tools") | [<img src="https://avatars3.githubusercontent.com/u/10849025?v=4" width="100px;"/><br /><sub>Ernoff</sub>](https://github.com/Ernoff)<br />[💻](https://github.com/gitpoint/git-point/commits?author=Ernoff "Code") [🐛](https://github.com/gitpoint/git-point/issues?q=author%3AErnoff "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/820696?v=4" width="100px;"/><br /><sub>Matthew Brandly</sub>](http://words.brandly.me/about/)<br />[💻](https://github.com/gitpoint/git-point/commits?author=brandly "Code") | [<img src="https://avatars2.githubusercontent.com/u/11836470?v=4" width="100px;"/><br /><sub>João Fonseca</sub>](https://github.com/Jpfonseca)<br />[🌍](#translation-Jpfonseca "Translation") | [<img src="https://avatars3.githubusercontent.com/u/10121964?v=4" width="100px;"/><br /><sub>Arjun Curat</sub>](https://github.com/acurat)<br />[📖](https://github.com/gitpoint/git-point/commits?author=acurat "Documentation") |
 | [<img src="https://avatars3.githubusercontent.com/u/16878891?v=4" width="100px;"/><br /><sub>siderio2</sub>](https://github.com/siderio2)<br />[🌍](#translation-siderio2 "Translation") | [<img src="https://avatars1.githubusercontent.com/u/32579769?v=4" width="100px;"/><br /><sub>Kodo Verkisto</sub>](https://github.com/kodisto)<br />[🌍](#translation-kodisto "Translation") | [<img src="https://avatars3.githubusercontent.com/u/82317?v=4" width="100px;"/><br /><sub>Sarah Vessels</sub>](http://sarahvessels.com/)<br />[📖](https://github.com/gitpoint/git-point/commits?author=cheshire137 "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3764756?v=4" width="100px;"/><br /><sub>Thales Sousa</sub>](https://github.com/tminussi)<br />[🌍](#translation-tminussi "Translation") | [<img src="https://avatars0.githubusercontent.com/u/6106941?v=4" width="100px;"/><br /><sub>Aseem Sood</sub>](https://github.com/asood123)<br />[📖](https://github.com/gitpoint/git-point/commits?author=asood123 "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/7842156?v=4" width="100px;"/><br /><sub>Eliott hauteclair</sub>](https://eliott.be)<br />[🌍](#translation-Eliottiosdevs "Translation") |
 | [<img src="https://avatars3.githubusercontent.com/u/14539?v=4" width="100px;"/><br /><sub>Peter Blazejewicz</sub>](http://www.linkedin.com/in/peterblazejewicz)<br />[🌍](#translation-peterblazejewicz "Translation") | [<img src="https://avatars0.githubusercontent.com/u/6516758?v=4" width="100px;"/><br /><sub>Eric Adamski</sub>](https://github.com/ericadamski)<br />[🐛](https://github.com/gitpoint/git-point/issues?q=author%3Aericadamski "Bug reports") | [<img src="https://avatars2.githubusercontent.com/u/1559013?v=4" width="100px;"/><br /><sub>Jouderian Nobre Junior</sub>](https://github.com/jouderianjr)<br />[💻](https://github.com/gitpoint/git-point/commits?author=jouderianjr "Code") | [<img src="https://avatars2.githubusercontent.com/u/5158502?v=4" width="100px;"/><br /><sub>Phi Dong</sub>](http://www.phidong.com)<br />[💻](https://github.com/gitpoint/git-point/commits?author=pdong "Code") | [<img src="https://avatars2.githubusercontent.com/u/17956698?v=4" width="100px;"/><br /><sub>John Patrick Salcedo</sub>](https://github.com/jpls93)<br />[💻](https://github.com/gitpoint/git-point/commits?author=jpls93 "Code") | [<img src="https://avatars2.githubusercontent.com/u/11599942?v=4" width="100px;"/><br /><sub>Óscar Carretero</sub>](https://github.com/ocarreterom)<br />[💻](https://github.com/gitpoint/git-point/commits?author=ocarreterom "Code") |
-| [<img src="https://avatars3.githubusercontent.com/u/5528931?v=4" width="100px;"/><br /><sub>Dyesse YUMBA</sub>](https://github.com/dyesseyumba)<br />[🔧](#tool-dyesseyumba "Tools") | [<img src="https://avatars0.githubusercontent.com/u/20456165?v=4" width="100px;"/><br /><sub>Bink</sub>](https://binkpitch.me/)<br />[💻](https://github.com/gitpoint/git-point/commits?author=binkpitch "Code") | [<img src="https://avatars2.githubusercontent.com/u/10085841?v=4" width="100px;"/><br /><sub>khvilaboa</sub>](https://github.com/khvilaboa)<br />[🌍](#translation-khvilaboa "Translation") | [<img src="https://avatars1.githubusercontent.com/u/40802?v=4" width="100px;"/><br /><sub>James Glover</sub>](http://jamesmglover.com)<br />[💻](https://github.com/gitpoint/git-point/commits?author=jglover "Code") |
+| [<img src="https://avatars3.githubusercontent.com/u/5528931?v=4" width="100px;"/><br /><sub>Dyesse YUMBA</sub>](https://github.com/dyesseyumba)<br />[🔧](#tool-dyesseyumba "Tools") | [<img src="https://avatars0.githubusercontent.com/u/20456165?v=4" width="100px;"/><br /><sub>Bink</sub>](https://binkpitch.me/)<br />[💻](https://github.com/gitpoint/git-point/commits?author=binkpitch "Code") | [<img src="https://avatars2.githubusercontent.com/u/10085841?v=4" width="100px;"/><br /><sub>khvilaboa</sub>](https://github.com/khvilaboa)<br />[🌍](#translation-khvilaboa "Translation") | [<img src="https://avatars1.githubusercontent.com/u/40802?v=4" width="100px;"/><br /><sub>James Glover</sub>](http://jamesmglover.com)<br />[💻](https://github.com/gitpoint/git-point/commits?author=jglover "Code") | [<img src="https://avatars2.githubusercontent.com/u/3025600?v=4" width="100px;"/><br /><sub>Jose Luis Naranjo</sub>](https://co.linkedin.com/in/josenaranjo/en)<br /> |
 <!-- ALL-CONTRIBUTORS-LIST:END -->

README.md

@@ -40,7 +40,7 @@
 ## Introduction
 
 [![Build Status](https://img.shields.io/travis/gitpoint/git-point.svg?style=flat-square)](https://travis-ci.org/gitpoint/git-point)
-[![All Contributors](https://img.shields.io/badge/all_contributors-58-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-59-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg?style=flat-square)](http://commitizen.github.io/cz-cli/)
 [![Gitter chat](https://img.shields.io/badge/chat-on_gitter-008080.svg?style=flat-square)](https://gitter.im/git-point)

src/components/code-line.component.js

@@ -2,66 +2,81 @@
 /* eslint-disable no-nested-ternary */
 
 import React, { Component } from 'react';
-import { View, Text, StyleSheet, Dimensions } from 'react-native';
+import { Text, Dimensions } from 'react-native';
 import SyntaxHighlighter from 'react-native-syntax-highlighter';
 import { getLanguage } from 'lowlight';
 import { github as GithubStyle } from 'react-syntax-highlighter/dist/styles';
-import { colors, fonts, normalize } from 'config';
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-  },
-  wrapper: {
-    flexDirection: 'row',
-    flex: 1,
-  },
-  codeLineContainer: {
-    minWidth: Dimensions.get('window').width - 80,
-    flex: 0.85,
-  },
-  codeLine: {
-    ...fonts.fontCode,
-    fontSize: normalize(11),
-    paddingHorizontal: 10,
-    paddingVertical: 3,
-  },
-  newChunkLineNumbers: {
-    backgroundColor: colors.codeChunkLineNumberBlue,
-  },
-  newChunkLineContainer: {
-    backgroundColor: colors.codeChunkBlue,
-  },
-  newChunkLine: {
-    color: colors.grey,
-  },
-  addLine: {
-    backgroundColor: colors.addCodeGreen,
-  },
-  addLineNumbers: {
-    backgroundColor: colors.addCodeLineNumberGreen,
-  },
-  delLine: {
-    backgroundColor: colors.delCodeRed,
-  },
-  delLineNumbers: {
-    backgroundColor: colors.delCodeLineNumberRed,
-  },
-  lineNumbers: {
-    width: 80,
-    paddingLeft: 10,
-    paddingVertical: 3,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  codeLineNumber: {
-    ...fonts.fontCode,
-    fontSize: normalize(11),
-    flex: 1,
-    alignItems: 'center',
-    color: colors.grey,
-  },
-});
+import { colors, normalize, styledFonts } from 'config';
+import styled, { css } from 'styled-components/native';
+
+function addOrDelLineColors(change) {
+  const lineColors = {
+    lineNumbers: '',
+    line: '',
+  };
+
+  if (change.type === 'add') {
+    lineColors.lineNumbers = colors.addCodeLineNumberGreen;
+    lineColors.line = colors.addCodeGreen;
+  } else if (change.type === 'del') {
+    lineColors.lineNumbers = colors.delCodeLineNumberRed;
+    lineColors.line = colors.delCodeRed;
+  }
+
+  return lineColors;
+}
+
+const Container = styled.View`
+  flex-direction: row;
+`;
+
+const Wrapper = styled.View`
+  flex-direction: row;
+  flex: 1;
+`;
+
+const CodeLineContainer = styled.View`
+  min-width: ${Dimensions.get('window').width - 80}
+  flex: 0.85;
+  background-color: ${props =>
+    props.newChunk
+      ? colors.codeChunkBlue
+      : addOrDelLineColors(props.change).line}
+  }
+`;
+
+const CodeLineStyled = styled.Text`
+  font-family: ${styledFonts.fontCode}
+  font-size: ${normalize(11)}
+  padding: 3 10;
+  ${props =>
+    props.newChunk &&
+    css`
+      color: ${colors.grey};
+    `}
+`;
+
+const LineNumbers = styled.View`
+  width: 80;
+  padding-left: 10;
+  padding: 3;
+  flex-direction: row;
+  justify-content: space-between;
+  background-color: ${props =>
+    props.newChunk
+      ? colors.codeChunkLineNumberBlue
+      : addOrDelLineColors(props.change).lineNumbers};
+`;
+
+const CodeLineNumber = styled.Text`
+  font-family: ${styledFonts.fontCode}
+  font-size: ${normalize(11)}
+  flex: 1;
+  align-items: center;
+  color: ${colors.grey}
+`;
+
+const SyntaxHighlighterStyled = CodeLineStyled.withComponent(SyntaxHighlighter);
 
 export class CodeLine extends Component {
   props: {
@@ -84,62 +99,45 @@ export class CodeLine extends Component {
     };
 
     return (
-      <View style={styles.container}>
-        <View style={styles.wrapper}>
-          <View
-            style={[
-              styles.lineNumbers,
-              newChunk && styles.newChunkLineNumbers,
-              change.type === 'add' && styles.addLineNumbers,
-              change.type === 'del' && styles.delLineNumbers,
-            ]}
-          >
-            <Text style={styles.codeLineNumber}>
+      <Container>
+        <Wrapper>
+          <LineNumbers newChunk change>
+            <CodeLineNumber>
               {change.type === 'del'
                 ? change.ln
                 : change.type === 'normal'
                   ? change.ln1
                   : change.type === 'add' ? '' : '...'}
-            </Text>
-            <Text style={styles.codeLineNumber}>
+            </CodeLineNumber>
+            <CodeLineNumber>
               {change.type === 'add'
                 ? change.ln
                 : change.type === 'normal'
                   ? change.ln2
                   : change.type === 'del' ? '' : '...'}
-            </Text>
-          </View>
-
-          <View
-            style={[
-              styles.codeLineContainer,
-              newChunk && styles.newChunkLineContainer,
-              change.type === 'add' && styles.addLine,
-              change.type === 'del' && styles.delLine,
-            ]}
-          >
+            </CodeLineNumber>
+          </LineNumbers>
+
+          <CodeLineContainer newChunk change>
             {(newChunk || !this.isKnownType(language)) && (
-              <Text style={[styles.codeLine, newChunk && styles.newChunkLine]}>
-                {change.content}
-              </Text>
+              <CodeLineStyled newChunk>{change.content}</CodeLineStyled>
             )}
 
             {this.isKnownType(language) && (
-              <SyntaxHighlighter
+              <SyntaxHighlighterStyled
                 language={language}
                 style={GithubStyle}
                 CodeTag={Text}
-                codeTagProps={{ style: styles.codeLine }}
                 customStyle={customStyle}
-                fontFamily={fonts.fontCode.fontFamily}
-                fontSize={styles.codeLine.fontSize}
+                fontFamily={styledFonts.fontCode}
+                fontSize={normalize(11)}
               >
                 {change.content}
-              </SyntaxHighlighter>
+              </SyntaxHighlighterStyled>
             )}
-          </View>
-        </View>
-      </View>
+          </CodeLineContainer>
+        </Wrapper>
+      </Container>
     );
   }
 }

src/config/index.js

@@ -3,3 +3,4 @@ export * from './colors';
 export * from './fonts';
 export * from './normalize-text';
 export * from './common';
+export * from './styled-fonts';

src/config/styled-fonts.js

@@ -0,0 +1,8 @@
+export const styledFonts = {
+  fontPrimaryLight: 'Nunito-Light',
+  fontPrimary: 'Nunito-Regular',
+  fontPrimaryItalic: 'Nunito-Italic',
+  fontPrimarySemiBold: 'Nunito-SemiBold',
+  fontPrimaryBold: 'Nunito-Bold',
+  fontCode: 'Menlo',
+};