RFC: Add Automatic Code Formatting Using Prettier (#417)

* initial prettier setup * update prettier r config * update settinggs and add script * prettier component library * pin Prettier version * prettier on whole project * update CONTRIBUTING.md re: Prettier and ESLint * update lockfile * Revert "prettier on whole project" This reverts commit 30929fc. * attempt to prettier everything
hackoregon · Mar 2, 2019 · 42a6c6b · 42a6c6b
1 parent 4d34c24
commit 42a6c6b
Show file tree

Hide file tree

Showing 477 changed files with 16,249 additions and 11,065 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,11 +1,12 @@
 {
   "parser": "babel-eslint",
-  "extends": "airbnb",
+  "extends": ["airbnb", "plugin:prettier/recommended"],
   "env": {
     "mocha": true
   },
   "plugins": [
-    "react"
+    "react",
+    "prettier"
   ],
   "rules": {
     "jsx-a11y/img-has-alt": 0,

diff --git a/.github/issue_template.md b/.github/issue_template.md
@@ -16,9 +16,11 @@
 > Also include a link to a Figma design if you have one.
 
 ## Data Visualization / Design Concerns
+
 > If you have specific design or data visualization concerns, mention them here
 
 ## Context
+
 > Why is this important? This information will be used to prioritize and contextualize story cards.
 
 ## Data Details (APIs)
@@ -34,8 +36,10 @@
 ## About this data
 
 ### How did we calculate this
->Description or link to GitHub description of data methodology
+
+> Description or link to GitHub description of data methodology
 
 ### See the source
->Link to API / data documentation on GitHub
->Link to original source data
+
+> Link to API / data documentation on GitHub
+> Link to original source data
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
@@ -1,21 +1,16 @@
 const webpack = require('webpack');
 const autoprefixer = require('autoprefixer');
-const {
-  createConfig,
-  match,
-  css,
-  postcss,
-  file,
-} = require('webpack-blocks');
+const { createConfig, match, css, postcss, file } = require('webpack-blocks');
 
 module.exports = createConfig([
-  match(['*.css'], [
-    css(),
-    postcss({
-      plugins: [autoprefixer({ browsers: ['last 2 versions'] })],
-    }),
-  ]),
-  match(['*.svg', '*.png', '*.gif', '*.jpg', '*.jpeg'], [
-    file(),
-  ]),
-])
+  match(
+    ['*.css'],
+    [
+      css(),
+      postcss({
+        plugins: [autoprefixer({ browsers: ['last 2 versions'] })],
+      }),
+    ]
+  ),
+  match(['*.svg', '*.png', '*.gif', '*.jpg', '*.jpeg'], [file()]),
+]);
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
@@ -10,9 +10,9 @@ starting with what it is this repo aims to make.
 
 There are currently three deploy targets:
 
-  1. Component Library (Storybook)
-  2. Civic 2017
-  3. Civic 2018
+1. Component Library (Storybook)
+2. Civic 2017
+3. Civic 2018
 
 **Component Library:** This is a collection of resuable and composable components that can be used in
 any project to quickly create a rich and consistent experience. They are packaged up in a Storybook,
@@ -37,9 +37,9 @@ implemented, such as the home page or an about page.
 For year packages to import arbitrary project packages, a project package must adhere to a consistent interface.
 That interface is for the `index.js` (or main script if different) to export three properties:
 
-  1. **App:** The narrative story component
-  2. **Routes:** The child routes
-  3. **Reducers:** The redux reducers
+1. **App:** The narrative story component
+2. **Routes:** The child routes
+3. **Reducers:** The redux reducers
 
 ### Creating a unified router
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -8,31 +8,42 @@ is cleaned, analyzed, converted into databases, and made available through APIs.
 We use React and Redux as the backbone of our front-end technologies, but there are also many smaller libraries that any
 contributor may want to learn more about. Here's a list of resources:
 
-  1. [React](https://reactjs.org/)
-  2. [Redux](https://redux.js.org/) (along with [Thunk](https://github.com/gaearon/redux-thunk))
-  3. [React Router](https://github.com/ReactTraining/react-router/tree/v3/docs)
-  4. [Emotion](https://emotion.sh/)
-  5. [Victory Charts](https://formidable.com/open-source/victory/docs/victory-chart/)
-  6. [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/)
-  7. [Storybook](https://storybook.js.org/)
+1. [React](https://reactjs.org/)
+2. [Redux](https://redux.js.org/) (along with [Thunk](https://github.com/gaearon/redux-thunk))
+3. [React Router](https://github.com/ReactTraining/react-router/tree/v3/docs)
+4. [Emotion](https://emotion.sh/)
+5. [Victory Charts](https://formidable.com/open-source/victory/docs/victory-chart/)
+6. [Mapbox GL JS](https://www.mapbox.com/mapbox-gl-js/api/)
+7. [Storybook](https://storybook.js.org/)
 
 Our testing tools are:
 
-  1. [Mocha](https://mochajs.org/)
-  2. [Chai](http://www.chaijs.com/)
-  3. [Enzyme](http://airbnb.io/enzyme/)
-  4. [JSDom](https://github.com/jsdom/jsdom)
+1. [Mocha](https://mochajs.org/)
+2. [Chai](http://www.chaijs.com/)
+3. [Enzyme](http://airbnb.io/enzyme/)
+4. [JSDom](https://github.com/jsdom/jsdom)
+
+We use the following tools to ensure code quality and consistency:
+
+1. [Prettier](https://prettier.io)
+2. [ESLint](https://eslint.org/)
 
 A couple other libraries in use in the background are:
 
-  1. [Lerna](https://lernajs.io/)
-  2. [Webpack](https://webpack.js.org/)
-  3. [Webpack Blocks](https://github.com/andywer/webpack-blocks)
-  4. [Babel](https://babeljs.io/)
+1. [Lerna](https://lernajs.io/)
+2. [Webpack](https://webpack.js.org/)
+3. [Webpack Blocks](https://github.com/andywer/webpack-blocks)
+4. [Babel](https://babeljs.io/)
 
 These libraries in the background aren't necessary to really understand, but knowing that the tools
 are in use and how they work can help when debugging issues. Read more in our [Architecture guide](ARCHITECTURE.md).
 
+## Code style and linting
+
+We use [Prettier](https://prettier.io), an opinionated code formatter, to format our code consistently across the project. This repository is configured to run Prettier automatically before files are committed. You can [configure your editor to run Prettier](https://prettier.io/docs/en/editors.html) to your files as you code.
+
+In addition, we use [ESLint](https://eslint.org/) to avoid problems with our code. ESLint can be [configured in your editor](https://eslint.org/docs/user-guide/integrations).
+
 ## Adding components
 
 At the heart of Civic is a [library of components](https://hackoregon.github.io/civic/). We showcase them all in a Storybook
@@ -50,19 +61,19 @@ reusable components that have been tested under a variety of conditions. These c
 First, create a new folder in the `src` directory of the `component-library` package for the new component. Follow the conventions
 that the other components follow:
 
-  1. Capitalize the component name
-  2. Create a JS file with the same name as the component
+1. Capitalize the component name
+2. Create a JS file with the same name as the component
 
 When writing the JS implementation of a component, there aren't any hard and fast rules, but there are some strong suggestions:
 
-  1. Prefer a stateless, function component over a stateful, class component
-  2. Specify the [`PropTypes`](https://reactjs.org/docs/typechecking-with-proptypes.html) for the component
-  3. When styles are necessary, prefer Emotion over CSS
-  4. Choose composition over inheritance
-  5. Don't be afraid to break a large component down into smaller components that compose
-  6. Expect a variety of prop inputs
-  7. Expect a variety of layout usages
-  8. Don't forget about mobile styles as well as mobile interactions
+1. Prefer a stateless, function component over a stateful, class component
+2. Specify the [`PropTypes`](https://reactjs.org/docs/typechecking-with-proptypes.html) for the component
+3. When styles are necessary, prefer Emotion over CSS
+4. Choose composition over inheritance
+5. Don't be afraid to break a large component down into smaller components that compose
+6. Expect a variety of prop inputs
+7. Expect a variety of layout usages
+8. Don't forget about mobile styles as well as mobile interactions
 
 With these suggestions along with code review, you're sure to make something that will be useful for years to come!
 

diff --git a/package.json b/package.json
@@ -35,7 +35,19 @@
     "lint": "lerna run lint -- --fix",
     "storybook": "BABEL_ENV=esm start-storybook -p 6006",
     "test": "lerna run test",
-    "travis": "make travis"
+    "travis": "make travis",
+    "pretty": "prettier --write \"./**/*.{js,jsx,css,md}\""
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,css,md}": [
+      "prettier --write",
+      "git add"
+    ]
   },
   "devDependencies": {
     "@storybook/addon-a11y": "^3.4.3",
@@ -64,22 +76,26 @@
     "enzyme": "^2.7.1",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^14.1.0",
+    "eslint-config-prettier": "^4.0.0",
     "eslint-plugin-babel": "^4.0.1",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
     "eslint-plugin-prefer-object-spread": "^1.1.0",
+    "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^6.10.0",
     "eslint-watch": "^2.1.14",
     "extract-text-webpack-plugin": "^2.1.2",
     "file-loader": "^0.11.1",
     "html-webpack-plugin": "^2.28.0",
+    "husky": "^1.3.1",
     "isparta": "^4.0.0",
     "istanbul": "^0.4.4",
     "jest": "^20.0.4",
     "jsdom": "^9.8.3",
     "jsdom-global": "^2.1.0",
     "json-loader": "^0.5.4",
     "lerna": "^2.5.1",
+    "lint-staged": "^8.1.4",
     "lodash-webpack-plugin": "^0.11.2",
     "mocha": "^3.2.0",
     "mocha-clean": "^1.0.0",
@@ -88,6 +104,7 @@
     "node-notifier": "^5.0.2",
     "npm-run-all": "^4.0.2",
     "postcss-loader": "^1.3.3",
+    "prettier": "1.16.4",
     "prop-types": "^15.5.3",
     "react-addons-test-utils": "^15.5.3",
     "react-hot-loader": "^3.0.0-beta.7",

diff --git a/packages/2017/src/PlatformStyles.js b/packages/2017/src/PlatformStyles.js
@@ -106,7 +106,8 @@ const styles = {
         padding: 0;
         color: rgb(114, 99, 113);
 
-        & h3, & h4 {
+        & h3,
+        & h4 {
           color: black;
         }
       }
@@ -119,7 +120,7 @@ const styles = {
   `,
   Hero: css`
     display: flex;
-    background-color: rgba(34, 15, 37,1);
+    background-color: rgba(34, 15, 37, 1);
     height: 50vh;
     min-height: 420px;
     width: 100%;
@@ -152,7 +153,7 @@ const styles = {
     & > h1 {
       font-size: 3em;
       line-height: 1.25em;
-      color: rgba(255,255,255,1);
+      color: rgba(255, 255, 255, 1);
       font-weight: 100;
     }
   `,
@@ -173,20 +174,32 @@ const styles = {
 
       & .Content {
         width: 100%;
-        height:50vh;
+        height: 50vh;
         min-height: 420px;
 
         & h1 {
           position: absolute;
           text-transform: uppercase;
           font-size: 5em;
 
-          &.step1 { animation: ${step1} ${animControls}; }
-          &.step2 { animation: ${step2} ${animControls}; }
-          &.step3 { animation: ${step3} ${animControls}; }
-          &.step4 { animation: ${step4} ${animControls}; }
-          &.step5 { animation: ${step5} ${animControls}; }
-          &.step6 { animation: ${step6} ${animControls}; }
+          &.step1 {
+            animation: ${step1} ${animControls};
+          }
+          &.step2 {
+            animation: ${step2} ${animControls};
+          }
+          &.step3 {
+            animation: ${step3} ${animControls};
+          }
+          &.step4 {
+            animation: ${step4} ${animControls};
+          }
+          &.step5 {
+            animation: ${step5} ${animControls};
+          }
+          &.step6 {
+            animation: ${step6} ${animControls};
+          }
         }
       }
 
@@ -226,19 +239,19 @@ const styles = {
     }
   `,
   Tag: css`
-    border: 2px solid rgba(255,255,255,0.85);
+    border: 2px solid rgba(255, 255, 255, 0.85);
     padding: 10px;
     font-family: 'Rubik', sans-serif;
     font-weight: 400;
-    color: rgba(255,255,255,0.85);
+    color: rgba(255, 255, 255, 0.85);
     font-size: 1.25em;
     letter-spacing: 0.025em;
     pointer-events: none;
   `,
   Link: css`
-    border-bottom: 2px solid rgba(255,255,255,0.85);
-    transition: all .2s step-start;
-    color: rgba(255,255,255,0.85);
+    border-bottom: 2px solid rgba(255, 255, 255, 0.85);
+    transition: all 0.2s step-start;
+    color: rgba(255, 255, 255, 0.85);
     padding: 6px 6px 6px 6px;
     font-family: 'Rubik', sans-serif;
     font-weight: 500;
@@ -248,8 +261,8 @@ const styles = {
     }
 
     &:hover {
-      border-color: rgba(255,255,255,1);
-      color: rgba(255,255,255,1);
+      border-color: rgba(255, 255, 255, 1);
+      color: rgba(255, 255, 255, 1);
     }
 
     &:focus {