From 84de27ac1ed85e9933ab7a486e7e3f1418511780 Mon Sep 17 00:00:00 2001 From: "Kyu Won (Frederick) Kim" Date: Wed, 16 Oct 2019 09:51:35 -0700 Subject: [PATCH] Fred/Install react Added `react-rails` gem and generated necessary files for connecting React and Rails --- .eslintrc.js | 89 ++++++++++++++++++++++++ .prettierignore | 7 ++ .prettierrc | 8 +++ .stylelintrc | 7 ++ Gemfile | 1 + Gemfile.lock | 13 ++++ app/javascript/components/.keep | 0 app/javascript/packs/application.js | 4 ++ app/javascript/packs/server_rendering.js | 5 ++ package.json | 8 ++- yarn.lock | 68 +++++++++++++----- 11 files changed, 190 insertions(+), 20 deletions(-) create mode 100644 .eslintrc.js create mode 100644 .prettierignore create mode 100644 .prettierrc create mode 100644 .stylelintrc create mode 100644 app/javascript/components/.keep create mode 100644 app/javascript/packs/server_rendering.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 00000000..0ee19450 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,89 @@ +const fs = require('fs'); +const path = require('path'); + +const prettierOptions = JSON.parse( + fs.readFileSync(path.resolve(__dirname, '.prettierrc'), 'utf8'), +); + +module.exports = { + parser: 'babel-eslint', + extends: ['airbnb', 'prettier', 'prettier/react'], + plugins: ['prettier', 'redux-saga', 'react', 'react-hooks', 'jsx-a11y'], + env: { + jest: true, + browser: true, + node: true, + es6: true, + }, + parserOptions: { + ecmaVersion: 6, + sourceType: 'module', + ecmaFeatures: { + jsx: true, + }, + }, + rules: { + 'prettier/prettier': ['error', prettierOptions], + 'arrow-body-style': [2, 'as-needed'], + 'class-methods-use-this': 0, + 'import/imports-first': 0, + 'import/newline-after-import': 0, + 'import/no-dynamic-require': 0, + 'import/no-extraneous-dependencies': 0, + 'import/no-named-as-default': 0, + 'import/no-unresolved': 2, + 'import/no-webpack-loader-syntax': 0, + 'import/prefer-default-export': 0, + indent: [ + 2, + 2, + { + SwitchCase: 1, + }, + ], + 'jsx-a11y/aria-props': 2, + 'jsx-a11y/heading-has-content': 0, + 'jsx-a11y/label-has-associated-control': [ + 2, + { + // NOTE: If this error triggers, either disable it or add + // your custom components, labels and attributes via these options + // See https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md + controlComponents: ['Input'], + }, + ], + 'jsx-a11y/label-has-for': 0, + 'jsx-a11y/mouse-events-have-key-events': 2, + 'jsx-a11y/role-has-required-aria-props': 2, + 'jsx-a11y/role-supports-aria-props': 2, + 'max-len': 0, + 'newline-per-chained-call': 0, + 'no-confusing-arrow': 0, + 'no-console': 1, + 'no-unused-vars': 2, + 'no-use-before-define': 0, + 'prefer-template': 2, + 'react/destructuring-assignment': 0, + 'react-hooks/rules-of-hooks': 'error', + 'react/jsx-closing-tag-location': 0, + 'react/forbid-prop-types': 0, + 'react/jsx-first-prop-new-line': [2, 'multiline'], + 'react/jsx-filename-extension': 0, + 'react/jsx-no-target-blank': 0, + 'react/jsx-uses-vars': 2, + 'react/require-default-props': 0, + 'react/require-extension': 0, + 'react/self-closing-comp': 0, + 'react/sort-comp': 0, + 'redux-saga/no-yield-in-race': 2, + 'redux-saga/yield-effects': 2, + 'require-yield': 0, + }, + settings: { + 'import/resolver': { + webpack: { + config: './internals/webpack/webpack.prod.babel.js', + }, + }, + }, +}; diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..d71a79b4 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,7 @@ +build/ +node_modules/ +internals/generators/ +internals/scripts/ +package-lock.json +yarn.lock +package.json diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 00000000..0b0eae19 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "semi": true, + "singleQuote": true, + "trailingComma": "all" +} diff --git a/.stylelintrc b/.stylelintrc new file mode 100644 index 00000000..9e72e47c --- /dev/null +++ b/.stylelintrc @@ -0,0 +1,7 @@ +{ + "processors": ["stylelint-processor-styled-components"], + "extends": [ + "stylelint-config-recommended", + "stylelint-config-styled-components" + ] +} diff --git a/Gemfile b/Gemfile index aa0e83ed..0a8056bd 100644 --- a/Gemfile +++ b/Gemfile @@ -27,6 +27,7 @@ gem 'jbuilder', '~> 2.7' # gem 'redis', '~> 4.0' # Use Active Model has_secure_password # gem 'bcrypt', '~> 3.1.7' +gem 'react-rails', '~> 2.6.0' # Use Active Storage variant # gem 'image_processing', '~> 1.2' diff --git a/Gemfile.lock b/Gemfile.lock index 25748cc1..b9e731ad 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -57,6 +57,10 @@ GEM tzinfo (~> 1.1) zeitwerk (~> 2.1, >= 2.1.8) ast (2.4.0) + babel-source (5.8.35) + babel-transpiler (0.7.0) + babel-source (>= 4.0, < 6) + execjs (~> 2.0) bcrypt (3.1.13) bindex (0.8.1) bootsnap (1.4.5) @@ -64,6 +68,7 @@ GEM builder (3.2.3) byebug (11.0.1) concurrent-ruby (1.1.5) + connection_pool (2.2.2) crass (1.0.4) devise (4.7.1) bcrypt (~> 3.0) @@ -72,6 +77,7 @@ GEM responders warden (~> 1.2.3) erubi (1.9.0) + execjs (2.7.0) faraday (0.17.0) multipart-post (>= 1.2, < 3) ffi (1.11.1) @@ -165,6 +171,12 @@ GEM rb-fsevent (0.10.3) rb-inotify (0.10.0) ffi (~> 1.0) + react-rails (2.6.0) + babel-transpiler (>= 0.7.0) + connection_pool + execjs + railties (>= 3.2) + tilt responders (3.0.0) actionpack (>= 5.0) railties (>= 5.0) @@ -237,6 +249,7 @@ DEPENDENCIES pg (>= 0.18, < 2.0) puma (~> 3.11) rails (~> 6.0.0) + react-rails (~> 2.6.0) rubocop sass-rails (~> 5) spring diff --git a/app/javascript/components/.keep b/app/javascript/components/.keep new file mode 100644 index 00000000..e69de29b diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 9cd55d4b..ea9367be 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -15,3 +15,7 @@ require("channels") // // const images = require.context('../images', true) // const imagePath = (name) => images(name, true) +// Support component names relative to this directory: +var componentRequireContext = require.context("components", true); +var ReactRailsUJS = require("react_ujs"); +ReactRailsUJS.useContext(componentRequireContext); diff --git a/app/javascript/packs/server_rendering.js b/app/javascript/packs/server_rendering.js new file mode 100644 index 00000000..a31e683d --- /dev/null +++ b/app/javascript/packs/server_rendering.js @@ -0,0 +1,5 @@ +// By default, this pack is loaded for server-side rendering. +// It must expose react_ujs as `ReactRailsUJS` and prepare a require context. +var componentRequireContext = require.context("components", true); +var ReactRailsUJS = require("react_ujs"); +ReactRailsUJS.useContext(componentRequireContext); diff --git a/package.json b/package.json index 1478abd1..0f670d00 100644 --- a/package.json +++ b/package.json @@ -2,15 +2,17 @@ "name": "unloop", "private": true, "dependencies": { - "@babel/preset-react": "^7.0.0", + "@babel/preset-react": "^7.6.3", "@rails/actioncable": "^6.0.0-alpha", "@rails/activestorage": "^6.0.0-alpha", "@rails/ujs": "^6.0.0-alpha", "@rails/webpacker": "^4.0.7", + "axios": "^0.19.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.24", "prop-types": "^15.7.2", - "react": "^16.9.0", - "react-dom": "^16.9.0", + "react": "^16.10.2", + "react-dom": "^16.10.2", + "react_ujs": "^2.6.0", "turbolinks": "^5.2.0" }, "version": "0.1.0", diff --git a/yarn.lock b/yarn.lock index 53f4f7fe..fa196182 100644 --- a/yarn.lock +++ b/yarn.lock @@ -681,10 +681,10 @@ js-levenshtein "^1.1.3" semver "^5.5.0" -"@babel/preset-react@^7.0.0": - version "7.0.0" - resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.0.0.tgz#e86b4b3d99433c7b3e9e91747e2653958bc6b3c0" - integrity sha512-oayxyPS4Zj+hF6Et11BwuBkmpgT/zMxyuZgFrMeZID6Hdh3dGlk4sHCAhdBCpuCKW2ppBfl2uCCetlrUIJRY3w== +"@babel/preset-react@^7.6.3": + version "7.6.3" + resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.6.3.tgz#d5242c828322520205ae4eda5d4f4f618964e2f6" + integrity sha512-07yQhmkZmRAfwREYIQgW0HEwMY9GBJVuPY4Q12UC72AbfaawuupVWa8zQs2tlL+yun45Nv/1KreII/0PLfEsgA== dependencies: "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-transform-react-display-name" "^7.0.0" @@ -1230,6 +1230,14 @@ aws4@^1.8.0: resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.8.0.tgz#f0e003d9ca9e7f59c7a508945d7b2ef9a04a542f" integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ== +axios@^0.19.0: + version "0.19.0" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.19.0.tgz#8e09bff3d9122e133f7b8101c8fbdd00ed3d2ab8" + integrity sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ== + dependencies: + follow-redirects "1.5.10" + is-buffer "^2.0.2" + babel-loader@^8.0.6: version "8.0.6" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb" @@ -2221,6 +2229,13 @@ debug@2.6.9, debug@^2.2.0, debug@^2.3.3: dependencies: ms "2.0.0" +debug@=3.1.0: + version "3.1.0" + resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" + integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g== + dependencies: + ms "2.0.0" + debug@^3.0.0, debug@^3.2.5, debug@^3.2.6: version "3.2.6" resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b" @@ -2833,6 +2848,13 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" +follow-redirects@1.5.10: + version "1.5.10" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" + integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ== + dependencies: + debug "=3.1.0" + follow-redirects@^1.0.0: version "1.9.0" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.9.0.tgz#8d5bcdc65b7108fe1508649c79c12d732dcedb4f" @@ -3517,6 +3539,11 @@ is-buffer@^1.1.5: resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be" integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w== +is-buffer@^2.0.2: + version "2.0.4" + resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.4.tgz#3e572f23c8411a5cfd9557c849e3665e0b290623" + integrity sha512-Kq1rokWXOPXWuaMAqZiJW4XxsmD9zGx9q4aePabbn3qCRGedtH7Cm+zV8WETitMfu1wdh+Rvd6w5egwSngUX2A== + is-callable@^1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75" @@ -5761,30 +5788,37 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" -react-dom@^16.9.0: - version "16.9.0" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962" - integrity sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ== +react-dom@^16.10.2: + version "16.10.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.10.2.tgz#4840bce5409176bc3a1f2bd8cb10b92db452fda6" + integrity sha512-kWGDcH3ItJK4+6Pl9DZB16BXYAZyrYQItU4OMy0jAkv5aNqc+mAKb4TpFtAteI6TJZu+9ZlNhaeNQSVQDHJzkw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - scheduler "^0.15.0" + scheduler "^0.16.2" react-is@^16.8.1: version "16.9.0" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb" integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw== -react@^16.9.0: - version "16.9.0" - resolved "https://registry.yarnpkg.com/react/-/react-16.9.0.tgz#40ba2f9af13bc1a38d75dbf2f4359a5185c4f7aa" - integrity sha512-+7LQnFBwkiw+BobzOF6N//BdoNw0ouwmSJTEm9cglOOmsg/TMiFHZLe2sEoN5M7LgJTj9oHH0gxklfnQe66S1w== +react@^16.10.2: + version "16.10.2" + resolved "https://registry.yarnpkg.com/react/-/react-16.10.2.tgz#a5ede5cdd5c536f745173c8da47bda64797a4cf0" + integrity sha512-MFVIq0DpIhrHFyqLU0S3+4dIcBhhOvBE8bJ/5kHPVOVaGdo0KuiQzpcjCPsf585WvhypqtrMILyoE2th6dT+Lw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" +react_ujs@^2.6.0: + version "2.6.0" + resolved "https://registry.yarnpkg.com/react_ujs/-/react_ujs-2.6.0.tgz#98c53cc40b2b3b8558300e19394638d45d37a177" + integrity sha512-vNPVjT720+7998ip1SXPPPetQGAgYd1PGDTZTwNC2Qf9/w3O8+bR04mjvO9BTlORab777V9QpeULvgRC22jDrw== + dependencies: + react_ujs "^2.6.0" + read-cache@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" @@ -6101,10 +6135,10 @@ sax@^1.2.4, sax@~1.2.4: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== -scheduler@^0.15.0: - version "0.15.0" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.15.0.tgz#6bfcf80ff850b280fed4aeecc6513bc0b4f17f8e" - integrity sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg== +scheduler@^0.16.2: + version "0.16.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.16.2.tgz#f74cd9d33eff6fc554edfb79864868e4819132c1" + integrity sha512-BqYVWqwz6s1wZMhjFvLfVR5WXP7ZY32M/wYPo04CcuPM7XZEbV2TBNW7Z0UkguPTl0dWMA59VbNXxK6q+pHItg== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1"