chore: fix linting errors + add precommit hook for flow and lint (callstack#114)

Author: Raúl Gómez Acuña

.eslintrc

@@ -142,6 +142,6 @@
     "react-native/no-unused-styles": "error",
     "react-native/split-platform-components": "off",
 
-    "prettier/prettier": ["error", {"trailingComma": "es5", "singleQuote": true}],
+    "prettier/prettier": ["error", {"trailingComma": "es5", "singleQuote": true}]
   }
 }

example/main.js

@@ -30,14 +30,14 @@ class App extends Component {
     return (
       <View style={styles.drawerContent}>
         <Drawer.Section label="Subheader">
-          {DrawerItems.map((props, index) => (
+          {DrawerItems.map((props, index) =>
             <Drawer.Item
               {...props}
               key={props.key}
               active={this.state.drawerItemIndex === index}
               onPress={() => this._setDrawerItem(index)}
             />
-          ))}
+          )}
         </Drawer.Section>
       </View>
     );

example/rn-cli.config.js

@@ -23,7 +23,9 @@ module.exports = {
         `^${escape(path.resolve(__dirname, '..', 'node_modules'))}\\/.*$`
       ),
       new RegExp(
-        `^${escape(path.resolve(__dirname, '..', 'docs', 'node_modules'))}\\/.*$`
+        `^${escape(
+          path.resolve(__dirname, '..', 'docs', 'node_modules')
+        )}\\/.*$`
       ),
     ]);
   },

example/src/ButtonExample.js

@@ -21,8 +21,12 @@ export default class ButtonExample extends Component {
         </View>
         <View style={styles.row}>
           <Button raised>Raised</Button>
-          <Button raised primary>Primary</Button>
-          <Button raised color={Colors.pink500}>Custom</Button>
+          <Button raised primary>
+            Primary
+          </Button>
+          <Button raised color={Colors.pink500}>
+            Custom
+          </Button>
         </View>
         <View style={styles.row}>
           <Button icon="add-a-photo">Icon</Button>
@@ -38,7 +42,9 @@ export default class ButtonExample extends Component {
           </Button>
         </View>
         <View style={styles.row}>
-          <Button disabled icon="my-location">Disabled</Button>
+          <Button disabled icon="my-location">
+            Disabled
+          </Button>
           <Button disabled loading raised>
             Loading
           </Button>

example/src/CardExample.js

@@ -25,7 +25,10 @@ export default class CardExample extends Component {
           <Card.Content>
             <Title>Abandoned Ship</Title>
             <Paragraph>
-              The Abandoned Ship is a wrecked ship located on Route 108 in Hoenn, originally being a ship named the S.S. Cactus. The second part of the ship can only be accessed by using Dive and contains the Scanner.
+              The Abandoned Ship is a wrecked ship located on Route 108 in
+              Hoenn, originally being a ship named the S.S. Cactus. The second
+              part of the ship can only be accessed by using Dive and contains
+              the Scanner.
             </Paragraph>
           </Card.Content>
         </Card>
@@ -41,7 +44,11 @@ export default class CardExample extends Component {
             <Title>Berries</Title>
             <Caption>Omega Ruby</Caption>
             <Paragraph>
-              Dotted around the Hoenn region, you will find loamy soil, many of which are housing berries. Once you have picked the berries, then you have the ability to use that loamy soil to grow your own berries. These can be any berry and will require attention to get the best crop.
+              Dotted around the Hoenn region, you will find loamy soil, many of
+              which are housing berries. Once you have picked the berries, then
+              you have the ability to use that loamy soil to grow your own
+              berries. These can be any berry and will require attention to get
+              the best crop.
             </Paragraph>
           </Card.Content>
         </Card>

example/src/DividerExample.js

@@ -19,11 +19,10 @@ const DividerExample = () => {
     <ListView
       style={styles.container}
       dataSource={dataSource}
-      renderRow={rowData => (
+      renderRow={rowData =>
         <Subheading style={styles.item}>
           {rowData}
-        </Subheading>
-      )}
+        </Subheading>}
       renderSeparator={(sectionId, rowId) => <Divider key={rowId} />}
     />
   );

example/src/ExampleList.js

@@ -42,14 +42,15 @@ export default class ExampleList extends Component {
     navigation: PropTypes.object,
   };
 
-  _renderRow = id => (
+  _renderRow = id =>
     <TouchableRipple
       style={styles.item}
       onPress={() => this.props.navigation.navigate(id)}
     >
-      <Text style={styles.text}>{examples[id].title}</Text>
-    </TouchableRipple>
-  );
+      <Text style={styles.text}>
+        {examples[id].title}
+      </Text>
+    </TouchableRipple>;
 
   _renderSeparator = (sectionId, rowId) => <Divider key={rowId} />;
 

example/src/GridViewExample.js

@@ -42,7 +42,9 @@ export default class GridViewExample extends Component {
     return (
       <Card style={styles.tile}>
         <View style={styles.inner}>
-          <Text style={styles.text}>{index}</Text>
+          <Text style={styles.text}>
+            {index}
+          </Text>
         </View>
       </Card>
     );

example/src/PaperExample.js

@@ -16,7 +16,9 @@ export default class RipplesExample extends Component {
         {[1, 2, 4, 6, 12].map(i => {
           return (
             <Paper key={i} elevation={i} style={styles.paper}>
-              <Text>{i}</Text>
+              <Text>
+                {i}
+              </Text>
             </Paper>
           );
         })}

example/src/RootNavigator.js

@@ -34,8 +34,8 @@ export default StackNavigator(
       headerStyle: {
         backgroundColor: Colors.indigo500,
         paddingTop: Expo.Constants.statusBarHeight,
-        height: (Platform.OS === 'ios' ? 44 : 56) +
-          Expo.Constants.statusBarHeight,
+        height:
+          (Platform.OS === 'ios' ? 44 : 56) + Expo.Constants.statusBarHeight,
       },
     },
   }

package.json

@@ -32,6 +32,7 @@
     "eslint-plugin-react": "^7.0.0",
     "eslint-plugin-react-native": "^2.3.2",
     "flow-bin": "~0.40.0",
+    "husky": "^0.14.2",
     "prettier": "^1.3.1",
     "react": "16.0.0-alpha.6",
     "react-native": "~0.43.2",
@@ -43,6 +44,7 @@
     "react-native-drawer": "^2.3.0"
   },
   "scripts": {
+    "precommit": "npm run lint && npm run flow",
     "flow": "flow",
     "lint": "eslint .",
     "test": "echo \"Error: no test specified\" && exit 1"

src/components/Button.js

@@ -162,9 +162,10 @@ class Button extends PureComponent<void, Props, State> {
     if (typeof dark === 'boolean') {
       isDark = dark;
     } else {
-      isDark = backgroundColor === 'transparent'
-        ? false
-        : !color(backgroundColor).light();
+      isDark =
+        backgroundColor === 'transparent'
+          ? false
+          : !color(backgroundColor).light();
     }
 
     if (disabled) {

src/components/FAB.js

@@ -27,9 +27,8 @@ type Props = {
 const FAB = (props: Props) => {
   const { small, dark, icon, color: iconColor, onPress, theme, style } = props;
   const backgroundColor = theme.colors.accent;
-  const isDark = typeof dark === 'boolean'
-    ? dark
-    : !color(backgroundColor).light();
+  const isDark =
+    typeof dark === 'boolean' ? dark : !color(backgroundColor).light();
   const textColor = iconColor || (isDark ? white : 'rgba(0, 0, 0, .54)');
   const rippleColor = color(textColor).alpha(0.32).rgbaString();
 

src/components/GridView.js

@@ -30,8 +30,11 @@ type State = {
   layout: Layout,
 };
 
-export default class GridView
-  extends PureComponent<DefaultProps, Props, State> {
+export default class GridView extends PureComponent<
+  DefaultProps,
+  Props,
+  State
+> {
   static propTypes = {
     dataSource: PropTypes.instanceOf(ListView.DataSource).isRequired,
     spacing: PropTypes.number.isRequired,
@@ -83,7 +86,8 @@ export default class GridView
     const containerWidth = this.state.layout.width;
     const { getNumberOfColumns, spacing } = this.props;
     const style = {
-      width: (containerWidth - spacing) / getNumberOfColumns(containerWidth) -
+      width:
+        (containerWidth - spacing) / getNumberOfColumns(containerWidth) -
         spacing,
       margin: spacing / 2,
     };

src/components/Portal/PortalHost.js

@@ -100,11 +100,11 @@ export default class Portals extends PureComponent<void, Props, State> {
               return [...acc, group];
             }
           }, [])
-          .map(({ position, items }) => (
+          .map(({ position, items }) =>
             <View key={position} style={StyleSheet.absoluteFill}>
               {items}
             </View>
-          ))}
+          )}
       </View>
     );
   }

src/components/TouchableRipple/TouchableRipple.android.js

@@ -20,8 +20,11 @@ type DefaultProps = {
   rippleColor: string,
 };
 
-export default class TouchableRipple
-  extends PureComponent<DefaultProps, Props, void> {
+export default class TouchableRipple extends PureComponent<
+  DefaultProps,
+  Props,
+  void
+> {
   static propTypes = {
     children: PropTypes.element.isRequired,
     borderless: PropTypes.bool,

src/components/TouchableRipple/TouchableRipple.js

@@ -21,8 +21,11 @@ type DefaultProps = {
   rippleColor: string,
 };
 
-export default class TouchableRipple
-  extends PureComponent<DefaultProps, Props, void> {
+export default class TouchableRipple extends PureComponent<
+  DefaultProps,
+  Props,
+  void
+> {
   static propTypes = {
     borderless: PropTypes.bool,
     delayPressIn: PropTypes.number,

src/components/Typography/Caption.js

@@ -8,14 +8,13 @@ type Props = {
   style?: any,
 };
 
-const Caption = (props: Props) => (
+const Caption = (props: Props) =>
   <StyledText
     {...props}
     alpha={0.54}
     family="regular"
     style={[styles.text, props.style]}
-  />
-);
+  />;
 
 export default Caption;
 

src/components/Typography/Headline.js

@@ -8,14 +8,13 @@ type Props = {
   style?: any,
 };
 
-const Headline = (props: Props) => (
+const Headline = (props: Props) =>
   <StyledText
     {...props}
     alpha={0.87}
     family="regular"
     style={[styles.text, props.style]}
-  />
-);
+  />;
 
 export default Headline;
 

src/components/Typography/Paragraph.js

@@ -8,14 +8,13 @@ type Props = {
   style?: any,
 };
 
-const Paragraph = (props: Props) => (
+const Paragraph = (props: Props) =>
   <StyledText
     {...props}
     alpha={0.87}
     family="regular"
     style={[styles.text, props.style]}
-  />
-);
+  />;
 
 export default Paragraph;
 

src/components/Typography/Subheading.js

@@ -8,14 +8,13 @@ type Props = {
   style?: any,
 };
 
-const Subheading = (props: Props) => (
+const Subheading = (props: Props) =>
   <StyledText
     {...props}
     alpha={0.87}
     family="regular"
     style={[styles.text, props.style]}
-  />
-);
+  />;
 
 export default Subheading;
 

src/components/Typography/Title.js

@@ -8,14 +8,13 @@ type Props = {
   style?: any,
 };
 
-const Title = (props: Props) => (
+const Title = (props: Props) =>
   <StyledText
     {...props}
     alpha={0.87}
     family="medium"
     style={[styles.text, props.style]}
-  />
-);
+  />;
 
 export default Title;
 

src/core/ThemeProvider.js

@@ -16,8 +16,11 @@ type Props = {
 
 export const channel = 'react-native-paper$theme';
 
-export default class ThemeProvider
-  extends PureComponent<DefaultProps, Props, void> {
+export default class ThemeProvider extends PureComponent<
+  DefaultProps,
+  Props,
+  void
+> {
   static propTypes = {
     children: PropTypes.element.isRequired,
     theme: PropTypes.object,