Contribution guidelines

These are the most relevant code styling rules being used for the SHPE app. For all the rules, checkout the ESLint file, .eslintrc.

• Local imports should be the last import statement.
• import statements are placed at the start of the file, without any empty lines in between them.

  import React from "react";
  import { View } from "react-native";

• Multi-line imports must be placed at the end of the import statements.

  import React from "react";
  import {
    getCommittees,
    loadCommittee
  } from "ducks";

• return statements are separated by one line, unless it is the only statement inside a block.

  const myFunction = () => {
    // Some code
    
    return something;
  }

• Lines must be a maximum of 120 characters long. If extended, they must be broken down as follows:
  • import: separate each component in a line, the from must also reside in a new line with no indentation

    import {
      View,
      Text,
      // More components
    } from "react-native";

  • function: separate the parameters/arguments in two lines, indented appropriately with spaces

    const createEvent = (typeU, committeeU, nameU, descriptionU,
                         dateU, startTimeU, endTimeU, locationU, pointsU) => {
    }

  • component: separate each prop in a new line, including the ending tag

    <TouchableOpacitiy
      title = "Press me!"
      onPress = { () => /* do something */ }
      // More props
    />

• An empty line will separate the destructure statements from the variable declarations and the logic to be done inside the function.
• All destructuring statements will be separated into multiple lines and will written before any variable declarations, unless specifically needed after.

  const {
    content,
    page
  } = styles;
  // Empty line

• Components should be kept in one line, unless a it exceeds the 120 character limit.

  <Button title = "I am a button" onPress = { () => /* do something */ } />

• Styling is never done inline, use the global constant styles.

  <Text styling = {{ color: "#FFF" }}>Some text</Text> // Incorrect
  
  <Text styling = { styles.white }>Some text</Text>    // Correct

• The Stylesheet component will not be used to create the style objects. Instead use a plain styles object at the end of the file, before the export statements.
• Starting braces reside on the same line of the statement that needs it, not a new line.

  if (true)   // Incorrect
  {
  }
  
  if (true) { // Correct
  }

• Ending braces should reside on a new line, aligned with the opening brace.

    onPress = { () => // Incorrect
      /* do something */ }
  
    onPress = { () => // Correct
      /* do something */
    }

• Each variable declaration will be separate.

  let events = "none", numbers = 10, elements; // Incorrect
  
  let events = "none";                         // Correct
  let numbers = 10;
  let elements;

• Export statements will always be at the end of the file.
• Function declarations must be separated by one line.

  myFunction() {
  }
  
  myOtherFunction() {
  }

• No unnecessary blank lines.
• No unnecessary boolean comparisons.

  if (number != NULL) { } // Incorrect
  if (!number) { }        // Correct

• Use camelCase for function and variable names.
• Use PascalCase for class names.
• Use let instead of var, unless there is a good reason.

  var number; // Avoid
  
  let number; // Correct

• All JavaScript statements will need to end with a semicolon.

  let number = 0  // Incorrect
  
  let number = 0; // Correct

• Use tabs as indentation or a combination of both, never spaces alone.
• Do not leave trailing spaces in lines.
• Do not leave trailing commas.
• Leave spaces between curly braces.

  import {Text} from "react-native";    // Incorrect
  
  import { Text }  from "react-native"; // Correct