chore: upgrade styled-components and stylelint-config-standard (#706)

* chore: Upgrade to latest styled-components version

* chore: styled-components 3.1.1 => 3.1.2

* chore: update stylelint

* fix: fix jest errors using moduleNameMapper

See styled-components/styled-components#1451

App.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Provider } from 'react-redux';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 import {
   AppRegistry,
   AsyncStorage,

ios/GitPoint/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -143,10 +143,15 @@
       "idiom" : "ipad",
       "filename" : "icon-83.5@2x.png",
       "scale" : "2x"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "size" : "1024x1024",
+      "scale" : "1x"
     }
   ],
   "info" : {
     "version" : 1,
     "author" : "xcode"
   }
-}
+}

package.json

@@ -6,13 +6,19 @@
     "start": "react-native start",
     "start:logger": "LOGGER_ENABLED=true react-native start --reset-cache",
     "start:tron": "TRON_ENABLED=true react-native start --reset-cache",
-    "start:android": "concurrently -r 'react-native start' 'yarn start:android:no-packager'",
-    "start:android:logger": "LOGGER_ENABLED=true concurrently -r 'react-native start --reset-cache' 'yarn start:android:no-packager'",
-    "start:android:tron": "TRON_ENABLED=true concurrently -r 'react-native start --reset-cache' 'yarn start:android:no-packager'",
+    "start:android":
+      "concurrently -r 'react-native start' 'yarn start:android:no-packager'",
+    "start:android:logger":
+      "LOGGER_ENABLED=true concurrently -r 'react-native start --reset-cache' 'yarn start:android:no-packager'",
+    "start:android:tron":
+      "TRON_ENABLED=true concurrently -r 'react-native start --reset-cache' 'yarn start:android:no-packager'",
     "start:android:no-packager": "react-native run-android --no-packager",
-    "start:ios": "concurrently -r 'react-native start' 'yarn start:ios:no-packager'",
-    "start:ios:logger": "LOGGER_ENABLED=true concurrently -r 'react-native start --reset-cache' 'yarn start:ios:no-packager'",
-    "start:ios:tron": "TRON_ENABLED=true concurrently -r 'react-native start --reset-cache' 'yarn start:ios:no-packager'",
+    "start:ios":
+      "concurrently -r 'react-native start' 'yarn start:ios:no-packager'",
+    "start:ios:logger":
+      "LOGGER_ENABLED=true concurrently -r 'react-native start --reset-cache' 'yarn start:ios:no-packager'",
+    "start:ios:tron":
+      "TRON_ENABLED=true concurrently -r 'react-native start --reset-cache' 'yarn start:ios:no-packager'",
     "start:ios:no-packager": "react-native run-ios --no-packager",
     "clean": "rm -rf node_modules",
     "clean:android": "cd android && ./gradlew clean && cd -",
@@ -36,20 +42,21 @@
     "cp-release:ios": "code-push release-react git-point-ios ios",
     "cp-release:android": "code-push release-react git-point-android android",
     "cp-promote:ios": "code-push promote git-point-ios Staging Production",
-    "cp-promote:android": "code-push promote git-point-android Staging Production",
-    "cp-history:ios-staging": "code-push deployment history git-point-ios Staging",
-    "cp-history:android-staging": "code-push deployment history git-point-android Staging",
-    "cp-history:android-production": "code-push deployment history git-point-android Production",
-    "cp-history:ios-production": "code-push deployment history git-point-ios Production",
+    "cp-promote:android":
+      "code-push promote git-point-android Staging Production",
+    "cp-history:ios-staging":
+      "code-push deployment history git-point-ios Staging",
+    "cp-history:android-staging":
+      "code-push deployment history git-point-android Staging",
+    "cp-history:android-production":
+      "code-push deployment history git-point-android Production",
+    "cp-history:ios-production":
+      "code-push deployment history git-point-ios Production",
     "doctoc": "doctoc --title='## Table of Contents' README.md",
     "postinstall": "opencollective postinstall"
   },
   "lint-staged": {
-    "*.js": [
-      "prettier --write",
-      "git add",
-      "eslint --cache"
-    ]
+    "*.js": ["prettier --write", "git add", "eslint --cache"]
   },
   "dependencies": {
     "date-fns": "^1.29.0",
@@ -78,7 +85,8 @@
     "react-native-i18n": "^2.0.4",
     "react-native-linear-gradient": "^2.4.0",
     "react-native-material-design-searchbar": "^1.1.4",
-    "react-native-mock": "https://github.com/shqld/react-native-mock/tarball/master",
+    "react-native-mock":
+      "https://github.com/shqld/react-native-mock/tarball/master",
     "react-native-parallax-scroll-view": "^0.20.1",
     "react-native-photo-view": "^1.5.2",
     "react-native-safari-view": "^2.0.0",
@@ -98,7 +106,7 @@
     "redux-persist-transform-encrypt": "^1.0.2",
     "redux-thunk": "^2.2.0",
     "reselect": "^3.0.1",
-    "styled-components": "^2.2.1"
+    "styled-components": "^3.1.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^3.1.0",
@@ -134,26 +142,24 @@
     "reactotron-react-native": "^1.12.2",
     "reactotron-redux": "^1.12.2",
     "stylelint": "^8.2.0",
-    "stylelint-config-standard": "^17.0.0",
+    "stylelint-config-standard": "^18.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.0.0"
   },
   "jest": {
     "preset": "react-native",
-    "testMatch": [
-      "**/__tests__/tests/**/*.js"
-    ],
-    "setupFiles": [
-      "./testenv.js"
-    ],
+    "testMatch": ["**/__tests__/tests/**/*.js"],
+    "setupFiles": ["./testenv.js"],
     "transformIgnorePatterns": [
       "node_modules/(?!(jest-)?react-native|react-navigation)"
-    ]
+    ],
+    "moduleNameMapper": {
+      "styled-components":
+        "<rootDir>/node_modules/styled-components/dist/styled-components.native.cjs.js"
+    }
   },
   "rnpm": {
-    "assets": [
-      "./src/assets/fonts"
-    ]
+    "assets": ["./src/assets/fonts"]
   },
   "config": {
     "commitizen": {

src/auth/screens/auth-profile.screen.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import {
@@ -133,7 +133,8 @@ class AuthProfile extends Component {
           menuAction={() =>
             navigation.navigate('UserOptions', {
               title: translate('auth.userOptions.title', locale),
-            })}
+            })
+          }
         >
           {isPending && (
             <ActivityIndicator
@@ -183,7 +184,8 @@ class AuthProfile extends Component {
                   {'\n'}
                   <NoteLink
                     onPress={() =>
-                      openURLInView('https://github.com/settings/applications')}
+                      openURLInView('https://github.com/settings/applications')
+                    }
                   >
                     {translate(
                       'auth.profile.orgsRequestApprovalBottom',

src/auth/screens/events.screen.js

@@ -1,7 +1,7 @@
 /* eslint react/prop-types: 0 */
 /* eslint-disable no-shadow */
 import React, { Component } from 'react';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Text, FlatList, View } from 'react-native';

src/auth/screens/language-setting.screen.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-shadow */
 import React, { Component } from 'react';
 import { FlatList } from 'react-native';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { ListItem } from 'react-native-elements';
 import { colors, fonts } from 'config';

src/auth/screens/privacy-policy.screen.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 import { ScrollView } from 'react-native';
 
 import { ViewContainer } from 'components';
@@ -123,7 +123,8 @@ export class PrivacyPolicyScreen extends Component {
                   onPress={() =>
                     navigation.navigate('Repository', {
                       repositoryUrl: `${v3.root}/repos/gitpoint/git-point`,
-                    })}
+                    })
+                  }
                 >
                   {translate('auth.privacyPolicy.contactLink', locale)}
                 </Link>

src/auth/screens/splash.screen.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 import { connect } from 'react-redux';
 
 import { colors } from 'config';

src/auth/screens/user-options.screen.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-shadow */
 import React, { Component } from 'react';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { ScrollView } from 'react-native';
@@ -142,7 +142,8 @@ class UserOptions extends Component {
                 navigation.navigate('LanguageSettings', {
                   title: translate('auth.userOptions.language', locale),
                   locale,
-                })}
+                })
+              }
             />
             <StyledListItem
               title={translate('common.openInBrowser', locale)}
@@ -155,12 +156,14 @@ class UserOptions extends Component {
                 navigation.navigate('PrivacyPolicy', {
                   title: translate('auth.privacyPolicy.title', locale),
                   locale,
-                })}
+                })
+              }
             />
             <StyledListItem
               title={translate('auth.userOptions.donate', locale)}
               onPress={() =>
-                openURLInView('https://opencollective.com/git-point')}
+                openURLInView('https://opencollective.com/git-point')
+              }
             />
             <StyledListItem
               title={translate('auth.userOptions.signOut', locale)}

src/auth/screens/welcome.screen.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 import { connect } from 'react-redux';
 import { ActivityIndicator } from 'react-native';
 

src/components/badge.component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 
 import { colors, fonts, normalize } from 'config';
 

src/components/code-line.component.js

@@ -7,7 +7,7 @@ import SyntaxHighlighter from 'react-native-syntax-highlighter';
 import { getLanguage } from 'lowlight';
 import { github as GithubStyle } from 'react-syntax-highlighter/dist/styles';
 import { colors, normalize, fonts } from 'config';
-import styled, { css } from 'styled-components/native';
+import styled, { css } from 'styled-components';
 
 function addOrDelLineColors(change) {
   const lineColors = {

src/components/comment-input.component.js

@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 import { Text, Platform } from 'react-native';
 import { Icon } from 'react-native-elements';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 
 import { MentionArea } from 'components';
 import { translate } from 'utils';
@@ -107,9 +107,11 @@ export class CommentInput extends Component {
               blurOnSubmit={false}
               onChangeText={text => this.setState({ text })}
               onContentSizeChange={event =>
-                this.setState({ height: event.nativeEvent.contentSize.height })}
+                this.setState({ height: event.nativeEvent.contentSize.height })
+              }
               onSubmitEditing={event =>
-                this.handleSubmitEditing(event.nativeEvent.text)}
+                this.handleSubmitEditing(event.nativeEvent.text)
+              }
               placeholderTextColor={colors.grey}
               style={{
                 height: Math.max(inputMinHeight, this.state.height),

src/components/diff-blocks.component.js

@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 import { colors, fonts } from 'config';
 
 type Props = {

src/components/entity-info.component.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 import { ListItem } from 'react-native-elements';
 import Communications from 'react-native-communications';
 
@@ -111,7 +111,8 @@ export const EntityInfo = ({ entity, orgs, locale, navigation }: Props) => {
             }}
             subtitle={entity.email}
             onPress={() =>
-              Communications.email([entity.email], null, null, null, null)}
+              Communications.email([entity.email], null, null, null, null)
+            }
           />
         )}
 

src/components/image-zoom.component.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { Image, Modal, Dimensions } from 'react-native';
 import { Icon } from 'react-native-elements';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 import PhotoView from 'react-native-photo-view';
 
 import { colors } from 'config';

src/components/inline-label.component.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 
 import { fonts, normalize } from 'config';
 import { getFontColorByBackground } from 'utils';

src/components/issue-description.component.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { StyleSheet, ActivityIndicator } from 'react-native';
 import { ListItem } from 'react-native-elements';
 import Parse from 'parse-diff';
-import styled from 'styled-components/native';
+import styled from 'styled-components';
 
 import {
   StateBadge,
@@ -189,7 +189,8 @@ export class IssueDescription extends Component {
                       title: translate('repository.pullDiff.title', locale),
                       locale,
                       diff,
-                    })}
+                    })
+                  }
                 />
               )}
           </DiffBlocksContainer>
@@ -226,7 +227,8 @@ export class IssueDescription extends Component {
                 onPress={() =>
                   navigation.navigate('PullMerge', {
                     title: translate('issue.pullMerge.title', locale),
-                  })}
+                  })
+                }
                 title={translate('issue.main.mergeButton', locale)}
               />
             </MergeButtonContainer>