Adds enterprise grade monitoring and testing tools (#6)

braposo · web-flow · commit bd6e355c07f5 · 2018-03-24T15:27:06.000Z
* Code formatting with prettier
* Code validation with eslint
* Complete 100% code coverage
* Codecov report integration
* Travis CI build report integration
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,29 @@
+{
+    "extends": ["edited", "prettier", "prettier/react"],
+    "plugins": ["prettier"],
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true
+        }
+    },
+    "settings": {
+        "import/resolver": {
+            "node": {
+                "extensions": [".js", ".jsx"]
+            }
+        }
+    },
+    "rules": {
+        "react/prefer-es6-class": [2, "always"],
+        "prettier/prettier": [
+            "error",
+            {
+                "trailingComma": "es5",
+                "tabWidth": 4,
+                "printWidth": 100
+            }
+        ]
+    }
+}
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,6 @@
+__snapshots__/
+node_modules/
+dist/
+lib/
+coverage/
+package.json
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,5 @@
+{
+    "trailingComma": "es5",
+    "tabWidth": 4,
+    "printWidth": 100
+}
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,14 @@
+---
+language: node_js
+
+node_js:
+  - 8
+
+cache:
+  yarn: true
+  directories:
+    - ".eslintcache"
+    - node_modules
+
+script:
+  - yarn ci
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -11,24 +11,27 @@ Before opening an issue, please search the [issue tracker](https://github.com/br
 Visit the [Issue tracker](https://github.com/braposo/graphql-css/issues) to find a list of open issues that need attention.
 
 Fork, then clone the repo:
+
 ```
 git clone https://github.com/your-username/graphql-css.git
 ```
 
 Build package for dev mode. It will automatically watch any changes in `src/` forlder:
+
 ```
 yarn run dev
 ```
 
-
 ### Building and testing
 
 Build package:
+
 ```
 yarn run build
 ```
 
 To run the tests:
+
 ```
 yarn run test
 ```
@@ -39,14 +42,14 @@ Please open an issue with a proposal for a new feature or refactoring before sta
 
 ## Submitting Changes
 
-* Open a new issue in the [Issue tracker](https://github.com/braposo/graphql-css/issues).
-* Fork the repo.
-* Create a new feature branch based off the `master` branch.
-* Make sure all tests pass and there are no linting errors.
-* Submit a pull request, referencing any issues it addresses.
+*   Open a new issue in the [Issue tracker](https://github.com/braposo/graphql-css/issues).
+*   Fork the repo.
+*   Create a new feature branch based off the `master` branch.
+*   Make sure all tests pass and there are no linting errors.
+*   Submit a pull request, referencing any issues it addresses.
 
 Please try to keep your pull request focused in scope and avoid including unrelated commits.
 
 After you have submitted your pull request, we'll try to get back to you as soon as possible. We may suggest some changes or improvements.
 
-Thank you for contributing!
+Thank you for contributing!
diff --git a/README.md b/README.md
@@ -4,16 +4,20 @@
 
 Comes with a bunch of utilities so it's easy to integrate with your favourite way of building components.
 
+[![Build Status][build-badge]][travis]
+[![Code Coverage][coverage-badge]][coverage]
 [![npm version][version-badge]][npm]
 [![npm downloads][downloads-badge]][npm]
 [![gzip size][size-badge]][size]
 [![MIT License][license-badge]][license]
+
+![Module format][modules-badge]
+![Prettier format][prettier-badge]
 [![PRs Welcome][prs-badge]][prs]
 ![Blazing Fast][fast-badge]
 ![Modern][modern-badge]
 ![Enterprise Grade][enterprise-badge]
 
-
 ## Installation
 
 ```bash
@@ -75,11 +79,11 @@ Playground: https://codesandbox.io/s/jq22wyqm3
 
 It works with the following format `gqlCSS(styles)(query, element)`:
 
-| Arg    | Type                | Default | Definition                                                          |
-| ------ | ------------------- | ------- | ------------------------------------------------------------------- |
-| styles | object              |         | The styleguide object with all the rules                            |
-| query  | gql                 |         | The gql query to get the styles                                     |
-| component    | string \|\| node \|\| boolean | "div"   | HTML element or React component to be displayed. If set to false only styles are returned. |
+| Arg       | Type                          | Default | Definition                                                                                 |
+| --------- | ----------------------------- | ------- | ------------------------------------------------------------------------------------------ |
+| styles    | object                        |         | The styleguide object with all the rules                                                   |
+| query     | gql                           |         | The gql query to get the styles                                                            |
+| component | string \|\| node \|\| boolean | "div"   | HTML element or React component to be displayed. If set to false only styles are returned. |
 
 Here's how you can use it:
 
@@ -120,11 +124,11 @@ const styles = gqlCSS(styles)(query, false);
 
 `<GqlCSS>` component allows for a more declarative API and accepts these props:
 
-| Prop   | Type   | Default | Definition                               |
-| ------ | ------ | ------- | ---------------------------------------- |
-| styles | object |         | The styleguide object with all the rules |
-| query  | gql    |         | The gql query to get the styles          |
-| component    | string \|\| node | "div"   | HTML element or React component  to be displayed                 |
+| Prop      | Type             | Default | Definition                                      |
+| --------- | ---------------- | ------- | ----------------------------------------------- |
+| styles    | object           |         | The styleguide object with all the rules        |
+| query     | gql              |         | The gql query to get the styles                 |
+| component | string \|\| node | "div"   | HTML element or React component to be displayed |
 
 All the remaining props are passed to the generated component so you can still use `glamorous` API. Here are some examples:
 
@@ -197,7 +201,7 @@ export myHOC(query)(Component);
 The styles object is a valid JSON object that is used to define the styleguide of your project. Usually it includes definitions for colors, spacing, typography, etc.
 
 ```js
-const base = 4
+const base = 4;
 const styles = {
     typography: {
         scale: {
@@ -207,7 +211,7 @@ const styles = {
             l: base * 9,
             xl: base * 13,
             xxl: base * 20,
-            unit: "px"
+            unit: "px",
         },
         weight: {
             thin: 300,
@@ -294,7 +298,7 @@ const h1Styles = gql`
             }
         }
     }
-`
+`;
 
 const otherH1Styles = gql`
     ${h1Styles}
@@ -375,7 +379,6 @@ Please follow our [contributing guidelines](https://github.com/braposo/graphql-c
 [license]: https://github.com/braposo/graphql-css/blob/master/LICENSE
 [prs]: http://makeapullrequest.com
 [size]: https://unpkg.com/graphql-css/dist/graphql-css.min.js
-
 [version-badge]: https://img.shields.io/npm/v/graphql-css.svg?style=flat-square
 [downloads-badge]: https://img.shields.io/npm/dm/graphql-css.svg?style=flat-square
 [license-badge]: https://img.shields.io/npm/l/graphql-css.svg?style=flat-square
@@ -384,3 +387,9 @@ Please follow our [contributing guidelines](https://github.com/braposo/graphql-c
 [enterprise-badge]: https://img.shields.io/badge/🏢-Enterprise%20Grade-999999.svg?style=flat-square
 [prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
 [size-badge]: http://img.badgesize.io/https://unpkg.com/graphql-css/dist/graphql-css.min.js?compression=gzip&style=flat-square
+[prettier-badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square
+[build-badge]: https://img.shields.io/travis/braposo/graphql-css.svg?style=flat-square
+[travis]: https://travis-ci.org/braposo/graphql-css
+[coverage-badge]: https://img.shields.io/codecov/c/github/braposo/graphql-css.svg?style=flat-square
+[coverage]: https://codecov.io/github/braposo/graphql-css
+[modules-badge]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square
diff --git a/examples/styleguide.js b/examples/styleguide.js
@@ -40,15 +40,15 @@ const styles = {
                 fontSize: baseStyles.typography.scale.l,
                 backgroundColor: baseStyles.colors.red,
                 padding: baseStyles.spacing.l,
-                cursor: "pointer"
+                cursor: "pointer",
             },
         },
         done: {
             button: {
                 fontSize: baseStyles.typography.scale.l,
                 backgroundColor: baseStyles.colors.green,
                 padding: baseStyles.spacing.l,
-                cursor: "pointer"
+                cursor: "pointer",
             },
         },
     },
diff --git a/package.json b/package.json
@@ -10,13 +10,16 @@
         "build:commonjs": "cross-env BABEL_ENV=commonjs babel src -d lib --ignore '**/*.test.js'",
         "build:umd": "cross-env BABEL_ENV=commonjs NODE_ENV=development webpack src/index.js --output dist/graphql-css.js --mode development",
         "build:umd:min": "cross-env BABEL_ENV=commonjs NODE_ENV=production webpack src/index.js --output dist/graphql-css.min.js --mode production",
-        "clean": "rimraf lib dist es",
+        "clean": "rimraf lib dist es coverage",
         "dev": "yarn run clean && cross-env BABEL_ENV=commonjs babel src -d lib --watch",
         "dev:server": "cross-env NODE_ENV=dev-server webpack-dev-server examples --config webpack.config.js --content-base examples --inline --hot --mode development",
+        "format": "prettier --write \"**/*.{js,md,ts,json}\" *.{js,md,ts,json}",
         "lint": "eslint src/ --ext .js,.jsx",
-        "prepublishOnly": "yarn run clean && yarn run build",
-        "test": "jest --coverage",
-        "test:watch": "jest --watchAll --coverage"
+        "precommit": "lint-staged",
+        "prepublishOnly": "yarn run clean && yarn run test && yarn run build",
+        "test": "jest --no-cache",
+        "test:watch": "jest --watchAll --coverage",
+        "ci": "scripts/ci.sh"
     },
     "repository": {
         "type": "git",
@@ -52,17 +55,29 @@
     "devDependencies": {
         "babel-cli": "^6.26.0",
         "babel-core": "^6.26.0",
+        "babel-eslint": "^8.2.2",
         "babel-loader": "^7.1.4",
         "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
         "babel-plugin-transform-object-rest-spread": "^6.26.0",
         "babel-preset-env": "^1.6.1",
         "babel-preset-react": "^6.24.1",
+        "codecov": "^3.0.0",
         "cross-env": "^5.1.4",
+        "eslint": "^4.19.1",
+        "eslint-config-edited": "^1.0.0",
+        "eslint-config-prettier": "^2.9.0",
+        "eslint-plugin-import": "^2.9.0",
+        "eslint-plugin-prettier": "^2.6.0",
+        "eslint-plugin-react": "^7.7.0",
         "glamor": "^2.20.40",
         "graphql": "^0.13.1",
         "graphql-tag": "^2.8.0",
+        "husky": "^0.14.3",
         "jest": "^22.4.2",
         "jest-glamor-react": "^4.2.0",
+        "lint-staged": "^7.0.0",
+        "prettier": "^1.11.1",
+        "prop-types": "^15.6.1",
         "react": "^16.2.0",
         "react-dom": "^16.2.0",
         "react-testing-library": "^1.3.0",
@@ -75,5 +90,11 @@
         "glamor": "^2.20.40",
         "graphql": "^0.13.1",
         "graphql-tag": "^2.8.0"
+    },
+    "lint-staged": {
+        "*.{js,md,ts,json}": [
+            "prettier --write",
+            "git add"
+        ]
     }
 }
diff --git a/scripts/ci.sh b/scripts/ci.sh
@@ -0,0 +1,13 @@
+set -e
+
+echo "Building project"
+yarn build
+echo "\n\n"
+
+echo "Linting"
+yarn lint
+echo "\n\n"
+
+echo "Running tests"
+yarn test --coverage && codecov
+echo "\n\n"
diff --git a/src/index.js b/src/index.js
@@ -2,11 +2,12 @@ import React from "react";
 import graphql from "graphql-anywhere";
 import glamorous from "glamorous";
 import { Broadcast, Subscriber } from "react-broadcast";
+import PropTypes from "prop-types";
 
-const smoosh = object => {
-    return Object.assign(
+const smoosh = object =>
+    Object.assign(
         {},
-        ...(function _flatten(objectBit, path = "") {
+        ...(function _flatten(objectBit) {
             return [].concat(
                 ...Object.keys(objectBit).map(
                     key =>
@@ -17,7 +18,6 @@ const smoosh = object => {
             );
         })(object)
     );
-};
 
 const resolver = (fieldName, root, args, context, { resultKey }) => {
     // if it's an aliased query add alias as prop
@@ -68,15 +68,19 @@ const gqlCSS = styles => (query, component = "div", variables) => {
 };
 
 // Also export component for more declarative API
-export const GqlCSS = ({ styles, query, component = "div", variables, ...rest }) => {
-    return (
-        <Subscriber quiet={true} channel="graphqlcss">
-            {contextStyles => {
-                const Component = gqlCSS(styles || contextStyles || "")(query, component, variables);
-                return <Component {...rest} />;
-            }}
-        </Subscriber>
-    );
+export const GqlCSS = ({ styles, query, component = "div", variables, ...rest }) => (
+    <Subscriber quiet={true} channel="graphqlcss">
+        {contextStyles => {
+            const Component = gqlCSS(styles || contextStyles || "")(query, component, variables);
+            return <Component {...rest} />;
+        }}
+    </Subscriber>
+);
+GqlCSS.propTypes = {
+    styles: PropTypes.object,
+    query: PropTypes.object,
+    variables: PropTypes.object,
+    component: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
 // Export provider to broadcast styles to child GqlCSS components
@@ -85,15 +89,17 @@ export const GqlCSSProvider = ({ styles, children }) => (
         <span>{children}</span>
     </Broadcast>
 );
+GqlCSSProvider.propTypes = {
+    styles: PropTypes.object,
+    children: PropTypes.node,
+};
 
 // Export HOC - uses render props underneath, because it's awesome
-export const withGqlCSS = (styles, query, variables) => Component => props => {
-    return (
-        <WithGqlCSS styles={styles} query={query} variables={variables}>
-            {({ gqlStyles }) => <Component {...props} gqlStyles={gqlStyles} />}
-        </WithGqlCSS>
-    );
-};
+export const withGqlCSS = (styles, query, variables) => Component => props => (
+    <WithGqlCSS styles={styles} query={query} variables={variables}>
+        {({ gqlStyles }) => <Component {...props} gqlStyles={gqlStyles} />}
+    </WithGqlCSS>
+);
 
 // Export render props component
 export const WithGqlCSS = ({ styles, query, variables, children, ...rest }) => {
diff --git a/src/index.test.js b/src/index.test.js
diff --git a/yarn.lock b/yarn.lock
