Contributing

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. You'll also find information on making a pull request.

Overview

Prerequisites
Installing
Making Changes
Testing
Documentation
Making a Pull Request

Prerequisites

You'll need to have Node, Git, and Firebase CLI set up on your local machine.

Installing

Follow the steps below to get your development environment set up.

Open the terminal and and run the following:

git clone https://github.com/flex-development/ltcollinstimeline.git
Run npm install to install the project dependencies.

Making Changes

This project uses React, Sass, and Babel.

Create Your Development Branch

Branch Naming Convention <your_initials>/, followed by: feature-, bug-, hotfix-, or release-.

For example:

  git checkout -b ld/feature-docs
  git commit -am "added documentation"
  git push

JavaScript Style

2 spaces – for indentation
No unused variables – this one catches tons of bugs!
No semicolons – It's fine. Really!
Never start a line with ( , [ , or `````
- This is the only gotcha with omitting semicolons – automatically checked for you!
Space after keywords if (condition) { ... }
Always use === instead of == – but obj == null is allowed to check null || undefined.

For a detailed overview of our JavaScript style, visit StandardJS. You'll find not only an overview of Standard Style, but a list of editor plugins as well.

To configure the linting options for this project, make changes to .eslintrc.json and .eslintignore in the project root.

Reference: Configuring ESLint

Babel

To configure the Babel options for this project, make changes to babel.config.js in the project root.

Reference: Configure Babel - babel.config.js

User Interface

Make your changes under the src directory.

Run npm run dev to view the site in development Node environment. Your JSX and Sass files will be compiled and watched for changes, and ESLint will lint your code as you develop.

If successful, you'll see something similar to the following in your terminal:

 Compiled successfully!

 You can now view @flexdevelopment/ltcollinstimeline in the browser.

   Local:            http://localhost:3000/
   On Your Network:  http://10.105.184.99:3000/

 Note that the development build is not optimized.
 To create a production build, use npm run build.

To learn more about using Sass with React, please consult Adding a Sass Stylesheet from the React docs.

Directories & Files

public/index.html: HTML template
src/api: Firebase configuration. Exports the database
src/api/data: Event data
src/assets: Project fonts, images, and icons
src/components: React components, organized in an Atomic Design pattern
src/sass: Application stylesheets, built with Sass, and organized in an Atomic Design pattern
src/utils: Frontend utility functions
src/index.js: Exports our web app
src/manifest.json: Web application config

Testing

For generating sample test data, use Mockaroo.

Snapshot Testing Under tests/__snapshots__, add *.snap file to test your component spec against. For information on creating Jest Snapshots, please visit this link.

Running Tests When you're ready to test your changes, you have two options:

Run npm test in your project directory. This run your tests, as well as all the tests in the tests in the tests directory.
Run jest <test_pattern> --detectOpenHandles. This will run all tests with a name matching test_pattern. Example: jest foo --detectOpenHandles

Documentation

Following JSDoc standards, be sure to document any functions, classes, and other code you write. It will be reviewed by a reviewer during your code review, and your pull request will be denied if any code is improperly documented.

Creating a Pull Request

Note: Before creating a pull request for your changes, make sure your build passes all unit tests. If you need help, please create a test file and leave a comment in the test body, making note of any issues in their respective files. Make sure to label your pull request "help wanted."

If you're ready to have your changes reviewed, make sure your code is well documented and run npm run lint to check your code for syntax + styling errors.