diff --git a/.eslintrc.js b/.eslintrc.js index 5f593427d..82951e90e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -96,15 +96,11 @@ module.exports = { // ESLint plugin for prettier formatting // https://github.com/prettier/eslint-plugin-prettier 'prettier/prettier': 'error', - }, - settings: { - // Allow absolute paths in imports, e.g. import Button from 'components/Button' - // https://github.com/benmosher/eslint-plugin-import/tree/master/resolvers - 'import/resolver': { - node: { - moduleDirectory: ['node_modules', 'src'], - }, - }, + 'react/forbid-prop-types': 'off', + 'react/destructuring-assignment': 'off', + + // PropTypes and states are typed by Flow basically, but Flow cannot type defaultProps. + 'react/require-default-props': 'off', }, }; diff --git a/.flowconfig b/.flowconfig index f111649a9..920b4f053 100644 --- a/.flowconfig +++ b/.flowconfig @@ -7,5 +7,4 @@ [include] [options] -module.system.node.resolve_dirname=node_modules -module.system.node.resolve_dirname=src +suppress_comment=\\(.\\|\n\\)*\\$FlowExpectError diff --git a/.gitignore b/.gitignore index 1a0fe2e26..0816d0cd2 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,9 @@ node_modules/ # Compiled output build +# Generate Types +__generated__ + # Runtime data database.sqlite diff --git a/.travis.yml b/.travis.yml index e2790b341..e90261df8 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,8 +1,8 @@ language: node_js node_js: - 'stable' + - '10' - '8' - - '6' env: - CXX=g++-4.8 addons: @@ -13,6 +13,7 @@ addons: - g++-4.8 cache: yarn script: + - yarn codegen - yarn lint - yarn test - yarn build --release diff --git a/apollo.config.js b/apollo.config.js new file mode 100644 index 000000000..e9ba4a5c6 --- /dev/null +++ b/apollo.config.js @@ -0,0 +1,14 @@ +module.exports = { + client: { + service: { + name: 'react-starter-kit', + url: 'http://localhost:3000/graphql', + // optional headers + headers: { + // authorization: 'Bearer lkjfalkfjadkfjeopknavadf', + }, + // optional disable SSL validation check + skipSSLValidation: true, + }, + }, +}; diff --git a/babel.config.js b/babel.config.js index aceed26eb..fdbbc882a 100644 --- a/babel.config.js +++ b/babel.config.js @@ -19,9 +19,12 @@ module.exports = { }, }, ], - ['@babel/preset-stage-2', { decoratorsLegacy: true }], '@babel/preset-flow', '@babel/preset-react', ], + plugins: [ + '@babel/plugin-proposal-class-properties', + '@babel/plugin-syntax-dynamic-import', + ], ignore: ['node_modules', 'build'], }; diff --git a/docs/react-style-guide.md b/docs/react-style-guide.md index 280641a66..b58b27270 100644 --- a/docs/react-style-guide.md +++ b/docs/react-style-guide.md @@ -6,21 +6,21 @@ ### Table of Contents -* [Separate folder per UI component](#separate-folder-per-ui-component) -* [Prefer using functional components](#prefer-using-functional-components) -* [Use CSS Modules](#use-css-modules) -* [Use higher-order components](#use-higher-order-components) +- [Separate folder per UI component](#separate-folder-per-ui-component) +- [Prefer using functional components](#prefer-using-functional-components) +- [Use CSS Modules](#use-css-modules) +- [Use higher-order components](#use-higher-order-components) ### Separate folder per UI component -* Place each major UI component along with its resources in a separate folder\ +- Place each major UI component along with its resources in a separate folder\ This will make it easier to find related resources for any particular UI element (CSS, images, unit tests, localization files etc.). Removing such components during refactorings should also be easy. -* Avoid having CSS, images and other resource files shared between multiple +- Avoid having CSS, images and other resource files shared between multiple components.\ This will make your code more maintainable, easy to refactor. -* Add `package.json` file into each component's folder.\ +- Add `package.json` file into each component's folder.\ This will allow to easily reference such components from other places in your code.\ Use `import Nav from '../Navigation'` instead of `import Nav from '../Navigation/Navigation.js'` @@ -46,7 +46,7 @@ For more information google for ### Prefer using functional components -* Prefer using stateless functional components whenever possible.\ +- Prefer using stateless functional components whenever possible.\ Components that don't use state are better to be written as simple pure functions. ```jsx @@ -69,16 +69,16 @@ Navigation.propTypes = { items: PropTypes.array.isRequired }; ### Use CSS Modules -* Use CSS Modules\ +- Use CSS Modules\ This will allow using short CSS class names and at the same time avoid conflicts. -* Keep CSS simple and declarative. Avoid loops, mixins etc. -* Feel free to use variables in CSS via +- Keep CSS simple and declarative. Avoid loops, mixins etc. +- Feel free to use variables in CSS via [precss](https://github.com/jonathantneal/precss) plugin for [PostCSS](https://github.com/postcss/postcss) -* Prefer CSS class selectors instead of element and `id` selectors (see +- Prefer CSS class selectors instead of element and `id` selectors (see [BEM](https://bem.info/)) -* Avoid nested CSS selectors (see [BEM](https://bem.info/)) -* When in doubt, use `.root { }` class name for the root elements of your +- Avoid nested CSS selectors (see [BEM](https://bem.info/)) +- When in doubt, use `.root { }` class name for the root elements of your components ```scss @@ -125,14 +125,18 @@ Navigation.propTypes = { items: PropTypes.array.isRequired }; ```jsx // Navigation.js +// @flow import React from 'react'; -import PropTypes from 'prop-types'; import withStyles from 'isomorphic-style-loader/lib/withStyles'; import s from './Navigation.scss'; -function Navigation() { +type PropTypes = {| + className: string, +|}; + +function Navigation(props: PropTypes) { return ( -