From 12760a05097c26e7ce2df1ff888b41107331d6da Mon Sep 17 00:00:00 2001 From: piglovesyou Date: Wed, 20 Feb 2019 04:30:20 +0900 Subject: [PATCH] Add features to feature/apollo-pure (#1714) * Upgrade all dependencies 1. ncu --upgradeAll 4. Leave "graphql" to be "^13.2.0" that apollo packages depend on 2. Apply patch of "npx babel-upgrade" output 3. Leave only necessary babel plugins 4. Pass "yarn fix" by disabling stricter rules * Pass "req" through GraphQL resolver context * Through rootValue it cannot be passed from browser GraphQL access * rm unnecessary code * Add "Timestamp" scalar type for convinience * rm unnecessary files * fix: Timestamp didn't work * npm graphql requires to be update https://github.com/zeit/next.js/issues/5238#issuecomment-423453732 * Feature: Codegen from GraphQL schema and use more Flow types (#2) * install apllo * add apollo.config.js * apollo codegen succeeded * fix: updateNetworkStatus signature * rm @flow from files not ready * add flow-typed files * done: Using auto-generated types works * flow-bin@0.89+ has regression. Use ^0.88.0. * fix: invalid GraphQL primitive types * Add codegen script * done: import auto-generated file * refac: move impl for apollo-link-state to graphql dir as same as server side resolvers * codegen and ignore eslint these files * refactor: "networkStatus" * feat: codegen:standalone * refac: "OnMemoryState" is what I meant * Improve codegen (#3) * delete existing auto-generated types * change script name * ignore __generated__ folder * wip: disallow absolute path resolving under `src` dir * It causes disregard .js type checking under src * fix all flow error * modify: prevent `withStyles` drops component type * Modify targe Node versions * Fix build failure: Codegen before lint * Add Node v10 LTS for build target --- .eslintrc.js | 14 +- .flowconfig | 3 +- .gitignore | 3 + .travis.yml | 3 +- apollo.config.js | 14 + babel.config.js | 5 +- docs/react-style-guide.md | 42 +- docs/recipes/how-to-integrate-disqus.md | 14 +- flow-typed/global.js | 3 + flow-typed/npm/@babel/core_vx.x.x.js | 331 + flow-typed/npm/@babel/node_vx.x.x.js | 46 + ...plugin-proposal-class-properties_vx.x.x.js | 34 + .../plugin-syntax-dynamic-import_vx.x.x.js | 34 + ...ransform-react-constant-elements_vx.x.x.js | 34 + ...-transform-react-inline-elements_vx.x.x.js | 34 + flow-typed/npm/@babel/polyfill_v7.x.x.js | 5 + flow-typed/npm/@babel/preset-env_vx.x.x.js | 152 + flow-typed/npm/@babel/preset-flow_vx.x.x.js | 32 + flow-typed/npm/@babel/preset-react_vx.x.x.js | 32 + .../npm/apollo-cache-inmemory_vx.x.x.js | 104 + flow-typed/npm/apollo-client_v2.x.x.js | 721 ++ flow-typed/npm/apollo-link-error_vx.x.x.js | 46 + flow-typed/npm/apollo-link-http_v1.2.x.js | 71 + flow-typed/npm/apollo-link-logger_vx.x.x.js | 103 + flow-typed/npm/apollo-link-schema_vx.x.x.js | 53 + flow-typed/npm/apollo-link-state_vx.x.x.js | 53 + flow-typed/npm/apollo-link_vx.x.x.js | 95 + .../npm/apollo-server-express_vx.x.x.js | 53 + flow-typed/npm/apollo-server_vx.x.x.js | 39 + flow-typed/npm/apollo_vx.x.x.js | 116 + flow-typed/npm/autoprefixer_vx.x.x.js | 514 ++ flow-typed/npm/babel-core_vx.x.x.js | 32 + flow-typed/npm/babel-eslint_vx.x.x.js | 133 + flow-typed/npm/babel-jest_vx.x.x.js | 32 + flow-typed/npm/babel-loader_vx.x.x.js | 53 + ...ransform-react-remove-prop-types_vx.x.x.js | 97 + flow-typed/npm/body-parser_v1.x.x.js | 46 + flow-typed/npm/browser-sync_vx.x.x.js | 476 + flow-typed/npm/chokidar_vx.x.x.js | 45 + flow-typed/npm/classnames_v2.x.x.js | 23 + flow-typed/npm/cookie-parser_v1.x.x.js | 281 + flow-typed/npm/css-loader_vx.x.x.js | 94 + flow-typed/npm/enzyme_v3.x.x.js | 133 + flow-typed/npm/eslint-config-airbnb_vx.x.x.js | 89 + .../npm/eslint-config-prettier_vx.x.x.js | 66 + .../npm/eslint-import-resolver-node_vx.x.x.js | 32 + flow-typed/npm/eslint-loader_vx.x.x.js | 32 + .../npm/eslint-plugin-css-modules_vx.x.x.js | 104 + .../npm/eslint-plugin-flowtype_vx.x.x.js | 534 ++ flow-typed/npm/eslint-plugin-import_vx.x.x.js | 460 + .../npm/eslint-plugin-jsx-a11y_vx.x.x.js | 1464 +++ .../npm/eslint-plugin-prettier_vx.x.x.js | 34 + flow-typed/npm/eslint-plugin-react_vx.x.x.js | 803 ++ flow-typed/npm/eslint_vx.x.x.js | 2548 ++++++ flow-typed/npm/express-jwt_vx.x.x.js | 67 + flow-typed/npm/express_v4.16.x.js | 307 + flow-typed/npm/file-loader_vx.x.x.js | 39 + flow-typed/npm/flow-bin_v0.x.x.js | 6 + flow-typed/npm/flow-typed_vx.x.x.js | 193 + flow-typed/npm/front-matter_vx.x.x.js | 38 + flow-typed/npm/glob_v7.1.x.js | 87 + flow-typed/npm/graphql_vx.x.x.js | 854 ++ flow-typed/npm/history_v4.x.x.js | 139 + flow-typed/npm/husky_vx.x.x.js | 102 + flow-typed/npm/identity-obj-proxy_vx.x.x.js | 140 + .../npm/isomorphic-style-loader_vx.x.x.js | 54 + flow-typed/npm/jest-codemods_vx.x.x.js | 208 + .../npm/jest-transform-graphql_vx.x.x.js | 32 + flow-typed/npm/jest_v23.x.x.js | 1167 +++ flow-typed/npm/jsonwebtoken_v8.3.x.js | 202 + flow-typed/npm/lint-staged_vx.x.x.js | 108 + flow-typed/npm/lodash.merge_vx.x.x.js | 32 + flow-typed/npm/markdown-it_vx.x.x.js | 417 + flow-typed/npm/mkdirp_v0.5.x.js | 13 + flow-typed/npm/node-fetch_vx.x.x.js | 46 + flow-typed/npm/normalize.css_vx.x.x.js | 18 + flow-typed/npm/null-loader_vx.x.x.js | 32 + flow-typed/npm/opn-cli_vx.x.x.js | 32 + flow-typed/npm/passport-facebook_vx.x.x.js | 73 + flow-typed/npm/passport_vx.x.x.js | 88 + flow-typed/npm/pixrem_vx.x.x.js | 39 + flow-typed/npm/pleeease-filters_vx.x.x.js | 32 + flow-typed/npm/postcss-calc_vx.x.x.js | 39 + .../npm/postcss-color-function_vx.x.x.js | 32 + flow-typed/npm/postcss-custom-media_vx.x.x.js | 32 + .../npm/postcss-custom-properties_vx.x.x.js | 32 + .../npm/postcss-custom-selectors_vx.x.x.js | 32 + .../npm/postcss-flexbugs-fixes_vx.x.x.js | 52 + flow-typed/npm/postcss-import_vx.x.x.js | 66 + flow-typed/npm/postcss-loader_vx.x.x.js | 53 + flow-typed/npm/postcss-media-minmax_vx.x.x.js | 32 + flow-typed/npm/postcss-nested_vx.x.x.js | 32 + flow-typed/npm/postcss-nesting_vx.x.x.js | 32 + .../npm/postcss-pseudoelements_vx.x.x.js | 38 + .../npm/postcss-selector-matches_vx.x.x.js | 41 + flow-typed/npm/postcss-selector-not_vx.x.x.js | 32 + flow-typed/npm/postcss_vx.x.x.js | 207 + flow-typed/npm/prettier_v1.x.x.js | 178 + flow-typed/npm/pretty-error_v2.x.x.js | 19 + flow-typed/npm/prop-types_v15.x.x.js | 36 + flow-typed/npm/query-string_v6.x.x.js | 36 + flow-typed/npm/raw-loader_vx.x.x.js | 32 + flow-typed/npm/react-apollo_v2.x.x.js | 1039 +++ .../npm/react-deep-force-update_vx.x.x.js | 32 + flow-typed/npm/react-dev-utils_vx.x.x.js | 176 + flow-typed/npm/react-error-overlay_vx.x.x.js | 32 + flow-typed/npm/react-test-renderer_v16.x.x.js | 75 + flow-typed/npm/rimraf_v2.x.x.js | 18 + flow-typed/npm/sequelize_v4.x.x.js | 7814 +++++++++++++++++ flow-typed/npm/serialize-javascript_vx.x.x.js | 32 + flow-typed/npm/source-map-support_vx.x.x.js | 48 + flow-typed/npm/sqlite3_vx.x.x.js | 53 + .../npm/stylelint-config-standard_vx.x.x.js | 32 + flow-typed/npm/stylelint-order_vx.x.x.js | 286 + flow-typed/npm/stylelint_vx.x.x.js | 2554 ++++++ flow-typed/npm/svg-url-loader_vx.x.x.js | 102 + flow-typed/npm/universal-router_vx.x.x.js | 119 + flow-typed/npm/url-loader_vx.x.x.js | 46 + .../npm/webpack-assets-manifest_vx.x.x.js | 41 + .../npm/webpack-bundle-analyzer_vx.x.x.js | 276 + .../npm/webpack-dev-middleware_vx.x.x.js | 75 + .../npm/webpack-hot-middleware_vx.x.x.js | 60 + .../npm/webpack-node-externals_vx.x.x.js | 38 + flow-typed/npm/webpack_v4.x.x.js | 571 ++ package.json | 167 +- src/client.js | 6 +- src/components/App.js | 34 +- src/components/Html.js | 33 +- src/components/Layout/Layout.js | 12 +- src/components/Link/Link.js | 23 +- src/components/Navigation/Navigation.js | 4 +- src/components/Page/Page.js | 13 +- .../createApolloClient.client.js | 4 +- .../createApolloClient.server.js | 2 - src/core/createInitialState.js | 2 +- src/data/graphql/Database/users/CreateUser.js | 2 +- .../graphql/Database/users/GetAllUsers.js | 2 +- .../graphql/Database/users/GetLoggedInUser.js | 8 +- .../News/reactjsnews.com/GetAllReactJSNews.js | 12 +- .../graphql/OnMemoryState}/README.md | 2 +- .../graphql/OnMemoryState/networkStatus.js} | 20 + src/data/graphql/OnMemoryState/schema.js | 19 + src/data/graphql/Scalar/Timestamp/index.js | 30 + src/data/graphql/Scalar/schema.js | 10 + src/data/queries/me.js | 24 - src/data/queries/news.js | 58 - src/data/schema.js | 19 +- src/data/types/NewsItemType.js | 27 - src/data/types/UserType.js | 25 - src/routes/admin/Admin.js | 11 +- src/routes/contact/Contact.js | 11 +- src/routes/error/ErrorPage.js | 19 +- src/routes/home/Home.js | 96 +- src/routes/login/Login.js | 11 +- src/routes/not-found/NotFound.js | 11 +- src/routes/register/Register.js | 11 +- src/server.js | 4 +- src/state/index.js | 10 - tools/bundle.js | 21 +- tools/codegen.js | 46 + tools/lib/runWebpack.js | 18 + tools/webpack.config.js | 12 +- yarn.lock | 5654 ++++++++---- 163 files changed, 33670 insertions(+), 2374 deletions(-) create mode 100644 apollo.config.js create mode 100644 flow-typed/global.js create mode 100644 flow-typed/npm/@babel/core_vx.x.x.js create mode 100644 flow-typed/npm/@babel/node_vx.x.x.js create mode 100644 flow-typed/npm/@babel/plugin-proposal-class-properties_vx.x.x.js create mode 100644 flow-typed/npm/@babel/plugin-syntax-dynamic-import_vx.x.x.js create mode 100644 flow-typed/npm/@babel/plugin-transform-react-constant-elements_vx.x.x.js create mode 100644 flow-typed/npm/@babel/plugin-transform-react-inline-elements_vx.x.x.js create mode 100644 flow-typed/npm/@babel/polyfill_v7.x.x.js create mode 100644 flow-typed/npm/@babel/preset-env_vx.x.x.js create mode 100644 flow-typed/npm/@babel/preset-flow_vx.x.x.js create mode 100644 flow-typed/npm/@babel/preset-react_vx.x.x.js create mode 100644 flow-typed/npm/apollo-cache-inmemory_vx.x.x.js create mode 100644 flow-typed/npm/apollo-client_v2.x.x.js create mode 100644 flow-typed/npm/apollo-link-error_vx.x.x.js create mode 100644 flow-typed/npm/apollo-link-http_v1.2.x.js create mode 100644 flow-typed/npm/apollo-link-logger_vx.x.x.js create mode 100644 flow-typed/npm/apollo-link-schema_vx.x.x.js create mode 100644 flow-typed/npm/apollo-link-state_vx.x.x.js create mode 100644 flow-typed/npm/apollo-link_vx.x.x.js create mode 100644 flow-typed/npm/apollo-server-express_vx.x.x.js create mode 100644 flow-typed/npm/apollo-server_vx.x.x.js create mode 100644 flow-typed/npm/apollo_vx.x.x.js create mode 100644 flow-typed/npm/autoprefixer_vx.x.x.js create mode 100644 flow-typed/npm/babel-core_vx.x.x.js create mode 100644 flow-typed/npm/babel-eslint_vx.x.x.js create mode 100644 flow-typed/npm/babel-jest_vx.x.x.js create mode 100644 flow-typed/npm/babel-loader_vx.x.x.js create mode 100644 flow-typed/npm/babel-plugin-transform-react-remove-prop-types_vx.x.x.js create mode 100644 flow-typed/npm/body-parser_v1.x.x.js create mode 100644 flow-typed/npm/browser-sync_vx.x.x.js create mode 100644 flow-typed/npm/chokidar_vx.x.x.js create mode 100644 flow-typed/npm/classnames_v2.x.x.js create mode 100644 flow-typed/npm/cookie-parser_v1.x.x.js create mode 100644 flow-typed/npm/css-loader_vx.x.x.js create mode 100644 flow-typed/npm/enzyme_v3.x.x.js create mode 100644 flow-typed/npm/eslint-config-airbnb_vx.x.x.js create mode 100644 flow-typed/npm/eslint-config-prettier_vx.x.x.js create mode 100644 flow-typed/npm/eslint-import-resolver-node_vx.x.x.js create mode 100644 flow-typed/npm/eslint-loader_vx.x.x.js create mode 100644 flow-typed/npm/eslint-plugin-css-modules_vx.x.x.js create mode 100644 flow-typed/npm/eslint-plugin-flowtype_vx.x.x.js create mode 100644 flow-typed/npm/eslint-plugin-import_vx.x.x.js create mode 100644 flow-typed/npm/eslint-plugin-jsx-a11y_vx.x.x.js create mode 100644 flow-typed/npm/eslint-plugin-prettier_vx.x.x.js create mode 100644 flow-typed/npm/eslint-plugin-react_vx.x.x.js create mode 100644 flow-typed/npm/eslint_vx.x.x.js create mode 100644 flow-typed/npm/express-jwt_vx.x.x.js create mode 100644 flow-typed/npm/express_v4.16.x.js create mode 100644 flow-typed/npm/file-loader_vx.x.x.js create mode 100644 flow-typed/npm/flow-bin_v0.x.x.js create mode 100644 flow-typed/npm/flow-typed_vx.x.x.js create mode 100644 flow-typed/npm/front-matter_vx.x.x.js create mode 100644 flow-typed/npm/glob_v7.1.x.js create mode 100644 flow-typed/npm/graphql_vx.x.x.js create mode 100644 flow-typed/npm/history_v4.x.x.js create mode 100644 flow-typed/npm/husky_vx.x.x.js create mode 100644 flow-typed/npm/identity-obj-proxy_vx.x.x.js create mode 100644 flow-typed/npm/isomorphic-style-loader_vx.x.x.js create mode 100644 flow-typed/npm/jest-codemods_vx.x.x.js create mode 100644 flow-typed/npm/jest-transform-graphql_vx.x.x.js create mode 100644 flow-typed/npm/jest_v23.x.x.js create mode 100644 flow-typed/npm/jsonwebtoken_v8.3.x.js create mode 100644 flow-typed/npm/lint-staged_vx.x.x.js create mode 100644 flow-typed/npm/lodash.merge_vx.x.x.js create mode 100644 flow-typed/npm/markdown-it_vx.x.x.js create mode 100644 flow-typed/npm/mkdirp_v0.5.x.js create mode 100644 flow-typed/npm/node-fetch_vx.x.x.js create mode 100644 flow-typed/npm/normalize.css_vx.x.x.js create mode 100644 flow-typed/npm/null-loader_vx.x.x.js create mode 100644 flow-typed/npm/opn-cli_vx.x.x.js create mode 100644 flow-typed/npm/passport-facebook_vx.x.x.js create mode 100644 flow-typed/npm/passport_vx.x.x.js create mode 100644 flow-typed/npm/pixrem_vx.x.x.js create mode 100644 flow-typed/npm/pleeease-filters_vx.x.x.js create mode 100644 flow-typed/npm/postcss-calc_vx.x.x.js create mode 100644 flow-typed/npm/postcss-color-function_vx.x.x.js create mode 100644 flow-typed/npm/postcss-custom-media_vx.x.x.js create mode 100644 flow-typed/npm/postcss-custom-properties_vx.x.x.js create mode 100644 flow-typed/npm/postcss-custom-selectors_vx.x.x.js create mode 100644 flow-typed/npm/postcss-flexbugs-fixes_vx.x.x.js create mode 100644 flow-typed/npm/postcss-import_vx.x.x.js create mode 100644 flow-typed/npm/postcss-loader_vx.x.x.js create mode 100644 flow-typed/npm/postcss-media-minmax_vx.x.x.js create mode 100644 flow-typed/npm/postcss-nested_vx.x.x.js create mode 100644 flow-typed/npm/postcss-nesting_vx.x.x.js create mode 100644 flow-typed/npm/postcss-pseudoelements_vx.x.x.js create mode 100644 flow-typed/npm/postcss-selector-matches_vx.x.x.js create mode 100644 flow-typed/npm/postcss-selector-not_vx.x.x.js create mode 100644 flow-typed/npm/postcss_vx.x.x.js create mode 100644 flow-typed/npm/prettier_v1.x.x.js create mode 100644 flow-typed/npm/pretty-error_v2.x.x.js create mode 100644 flow-typed/npm/prop-types_v15.x.x.js create mode 100644 flow-typed/npm/query-string_v6.x.x.js create mode 100644 flow-typed/npm/raw-loader_vx.x.x.js create mode 100644 flow-typed/npm/react-apollo_v2.x.x.js create mode 100644 flow-typed/npm/react-deep-force-update_vx.x.x.js create mode 100644 flow-typed/npm/react-dev-utils_vx.x.x.js create mode 100644 flow-typed/npm/react-error-overlay_vx.x.x.js create mode 100644 flow-typed/npm/react-test-renderer_v16.x.x.js create mode 100644 flow-typed/npm/rimraf_v2.x.x.js create mode 100644 flow-typed/npm/sequelize_v4.x.x.js create mode 100644 flow-typed/npm/serialize-javascript_vx.x.x.js create mode 100644 flow-typed/npm/source-map-support_vx.x.x.js create mode 100644 flow-typed/npm/sqlite3_vx.x.x.js create mode 100644 flow-typed/npm/stylelint-config-standard_vx.x.x.js create mode 100644 flow-typed/npm/stylelint-order_vx.x.x.js create mode 100644 flow-typed/npm/stylelint_vx.x.x.js create mode 100644 flow-typed/npm/svg-url-loader_vx.x.x.js create mode 100644 flow-typed/npm/universal-router_vx.x.x.js create mode 100644 flow-typed/npm/url-loader_vx.x.x.js create mode 100644 flow-typed/npm/webpack-assets-manifest_vx.x.x.js create mode 100644 flow-typed/npm/webpack-bundle-analyzer_vx.x.x.js create mode 100644 flow-typed/npm/webpack-dev-middleware_vx.x.x.js create mode 100644 flow-typed/npm/webpack-hot-middleware_vx.x.x.js create mode 100644 flow-typed/npm/webpack-node-externals_vx.x.x.js create mode 100644 flow-typed/npm/webpack_v4.x.x.js rename src/{state => data/graphql/OnMemoryState}/README.md (87%) rename src/{state/OnMemory/networkState.js => data/graphql/OnMemoryState/networkStatus.js} (61%) create mode 100644 src/data/graphql/OnMemoryState/schema.js create mode 100644 src/data/graphql/Scalar/Timestamp/index.js create mode 100644 src/data/graphql/Scalar/schema.js delete mode 100644 src/data/queries/me.js delete mode 100644 src/data/queries/news.js delete mode 100644 src/data/types/NewsItemType.js delete mode 100644 src/data/types/UserType.js delete mode 100644 src/state/index.js create mode 100644 tools/codegen.js create mode 100644 tools/lib/runWebpack.js 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 ( -