ESLint & Prettier - configuration (#24)

* Install ESLint with callstack/eslint-config

The ESLint setup extends the "@callstack" configuration done for React
Native environment.

* Fix: Linter errors

Due to applying new code style all errors found by Linter had to be
fixed.
To avoid color literals, the shared Colors array has been created for
common colors source.

* Add ESLint as a pre-commit hook

* Install explicitly prettier

* Add code verification to the CI workflow

* Fix: ESLint errors in CI

The errors in the CI workflow were left intentionally so it's double
checked that verification is OK on the CI.
--no-verify was launched when running previous commit.

* Turn off linebreak-style rule

* CRLF to LF fix

* Turn off auto CRLF for Windows executor in CI workflow

* Fix: empty new line in Colors.js

Author: BartoszKlonowski

.circleci/config.yml

@@ -9,6 +9,7 @@ jobs:
       name: windows/default
       shell: powershell.exe
     steps:
+      - run: git config --global core.autocrlf false
       - checkout
       - run:
           name: "Display environment information"
@@ -28,6 +29,21 @@ jobs:
             - node_modules
             - windows/packages
 
+  verify:
+    executor:
+      name: windows/default
+      shell: powershell.exe
+    steps:
+      - run: git config --global core.autocrlf false
+      - checkout
+      - restore_cache:
+          keys:
+            - v1-deps-{{ .Branch }}-{{ checksum "windows/ReactNativeNotes.sln" }}
+            - v1-deps-
+      - run:
+          name: "Verify the standards and code quality"
+          command: npx eslint ./src/**
+
   # Application build
   build-Application-Configuration-Platform:
     parameters:
@@ -39,6 +55,7 @@ jobs:
         enum: ["ARM64", "x64", "ARM", "Win32"]
     executor: windows/default
     steps:
+      - run: git config --global core.autocrlf false
       - checkout
       - restore_cache:
           keys:
@@ -54,6 +71,9 @@ workflows:
   build-x64:
     jobs:
       - install
+      - verify:
+          requires:
+            - install
       - build-Application-Configuration-Platform:
           name: build-Application-Release-x64
           configuration: "release"

.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
   root: true,
-  extends: '@react-native-community',
+  extends: "@callstack",
+  rules: {
+    "linebreak-style": 0
+  }
 };

index.js

@@ -1,7 +1,6 @@
 /**
  * @format
  */
-
 import {AppRegistry} from 'react-native';
 
 import NotesMainPanel from './src/NotesMainPanel';

package.json

@@ -11,20 +11,28 @@
   "dependencies": {
     "@react-native-community/checkbox": "^0.5.7",
     "@react-native-community/datetimepicker": "^3.4.7",
+    "husky": "^7.0.0",
     "react": "16.13.1",
     "react-native": "^0.64.0",
     "react-native-windows": "0.64.4"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",
     "@babel/runtime": "^7.8.4",
+    "@callstack/eslint-config": "^11.0.0",
     "@react-native-community/eslint-config": "^1.1.0",
     "babel-jest": "^25.1.0",
-    "eslint": "^6.5.1",
+    "eslint": "^7.29.0",
     "jest": "^25.1.0",
     "metro-react-native-babel-preset": "^0.59.0",
+    "prettier": "2.3.2",
     "react-test-renderer": "16.13.1"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npx eslint ./src/**"
+    }
+  },
   "jest": {
     "preset": "react-native"
   }

src/CreateNotePanel.js

@@ -2,7 +2,6 @@
  * @format
  * @flow strict-local
  */
-
 import React from 'react';
 import {
   Alert,
@@ -13,17 +12,16 @@ import {
   View,
   Button,
 } from 'react-native';
-
-
+import Colors from './Resources/Colors';
 
 class CreateNotePanel extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      title: "",
-      message: "",
-    }
-  };
+      title: '',
+      message: '',
+    };
+  }
 
   titleOnChange = (text) => {
     this.setState({title: text});
@@ -34,98 +32,99 @@ class CreateNotePanel extends React.Component {
   };
 
   cancelButtonPressed = () => {
-    if(this.state.title !== "" || this.state.message !== "") {
-      Alert.alert("Are you sure?", "It looks like you still have unsaved changes, which are going to be lost.",
-      [
-        {
-          text: "Cancel",
-          style: "cancel"
-        },
-        {
-          text: "Discard",
-          onPress: () => NativeModules.NoteWidgetClickHandler.goToNotesScreen()
-        }
-      ])
-    }
-    else {
+    if (this.state.title !== '' || this.state.message !== '') {
+      Alert.alert(
+        'Are you sure?',
+        'It looks like you still have unsaved changes, which are going to be lost.',
+        [
+          {
+            text: 'Cancel',
+            style: 'cancel',
+          },
+          {
+            text: 'Discard',
+            onPress: () =>
+              NativeModules.NoteWidgetClickHandler.goToNotesScreen(),
+          },
+        ],
+      );
+    } else {
       NativeModules.NoteWidgetClickHandler.goToNotesScreen();
     }
   };
 
   createButtonPressed = () => {
-    NativeModules.Database.writeNote(this.state.title, false, this.state.message);
+    NativeModules.Database.writeNote(
+      this.state.title,
+      false,
+      this.state.message,
+    );
     NativeModules.NoteWidgetClickHandler.goToNotesScreen();
-  }
-
+  };
 
   render() {
     return (
       <View style={styles.mainPanel}>
-
-          <TextInput style={styles.titleBox}
-            onChangeText={this.titleOnChange}
-            value={this.state.title}
-            autoFocus={true}
-            clearButtonMode={"while-editing"}
-            placeholder={"Title"}
-          />
-
-          <TextInput style={styles.noteMessageBox}
-            multiline={true}
-            onChangeText={this.messageOnChange}
-            value={this.state.message}
-            placeholder={"Note content"}
-          />
+        <TextInput
+          style={styles.titleBox}
+          onChangeText={this.titleOnChange}
+          value={this.state.title}
+          autoFocus={true}
+          clearButtonMode={'while-editing'}
+          placeholder={'Title'}
+        />
+
+        <TextInput
+          style={styles.noteMessageBox}
+          multiline={true}
+          onChangeText={this.messageOnChange}
+          value={this.state.message}
+          placeholder={'Note content'}
+        />
 
         <View style={styles.actionsPanel}>
-          <Button title={"Discard"} onPress={this.cancelButtonPressed}/>
-          <Button title={"Create!"} onPress={this.createButtonPressed}/>
+          <Button title={'Discard'} onPress={this.cancelButtonPressed} />
+          <Button title={'Create!'} onPress={this.createButtonPressed} />
         </View>
-
       </View>
     );
   }
-};
-
+}
 
 const styles = StyleSheet.create({
   mainPanel: {
     flex: 1,
-    flexDirection: "column",
-    alignItems: "center",
-    margin: 30
-  },
-  titlePanel: {
-    height: 60,
+    flexDirection: 'column',
+    alignItems: 'center',
+    margin: 30,
   },
   titleBox: {
     borderLeftWidth: 0,
     borderRightWidth: 0,
     borderBottomWidth: 1,
     borderTopWidth: 0,
-    width: "90%",
-    borderColor: "#D0D0D0",
-    fontWeight: "bold"
+    width: '90%',
+    borderColor: Colors.noteTextPanelBorder,
+    fontWeight: 'bold',
   },
   noteMessageBox: {
     borderWidth: 0.2,
     margin: 10,
-    width: "90%",
-    height: "85%",
-    borderColor: "#D0D0D0",
-    alignContent: "center",
-    textAlignVertical: "center",
+    width: '90%',
+    height: '85%',
+    borderColor: Colors.noteTextPanelBorder,
+    alignContent: 'center',
+    textAlignVertical: 'center',
   },
   actionsPanel: {
     flex: 1,
-    flexDirection: "row",
-    justifyContent: "space-around",
-    width: "60%",
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    width: '60%',
     maxHeight: 35,
-  }
+  },
 });
 
-
-AppRegistry.registerComponent("CreateNotePanel", () => CreateNotePanel);
+AppRegistry.registerComponent('CreateNotePanel', () => CreateNotePanel);
 
 export default CreateNotePanel;