Bootstrapping from Evil Martian's component system

https://evilmartians.com/chronicles/evil-front-part-1

.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  extends: ["eslint-config-airbnb-base", "plugin:prettier/recommended"],
+  env: {
+    browser: true,
+  },
+  parser: "babel-eslint",
+  settings: {
+    "import/resolver": {
+      webpack: {
+        config: {
+          resolve: {
+            modules: ["frontend", "node_modules"],
+          },
+        },
+      },
+    },
+  },
+};

Procfile

@@ -0,0 +1,2 @@
+server: bin/rails server
+frontend: bin/webpack-dev-server

app/controllers/application_controller.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
 
 class ApplicationController < ActionController::Base
+  prepend_view_path Rails.root.join('frontend')
 end

app/controllers/pages_controller.rb

@@ -0,0 +1,4 @@
+class PagesController < ApplicationController
+  def home
+  end
+end

app/helpers/pages_helper.rb

@@ -0,0 +1,2 @@
+module PagesHelper
+end

app/javascript/packs/application.js

@@ -1,15 +0,0 @@
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-
-require("@rails/ujs").start()
-require("channels")
-
-
-// Uncomment to copy all static images under ../images to the output folder and reference
-// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
-// or the `imagePath` JavaScript helper below.
-//
-// const images = require.context('../images', true)
-// const imagePath = (name) => images(name, true)

app/views/pages/home.html.erb

@@ -0,0 +1,3 @@
+<%= render "components/page/page" do %>
+  <p>Smoke test</p>
+<% end %>

config/application.rb

@@ -26,9 +26,9 @@ module Counter
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 6.0
 
-    # Settings in config/environments/* take precedence over those specified here.
-    # Application configuration can go into files in config/initializers
-    # -- all .rb files in that directory are automatically loaded after loading
-    # the framework and any gems in your application.
+    config.generators do |g|
+      # Don't generate assets for Sprockets
+      g.assets = nil
+    end
   end
 end

config/routes.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 Rails.application.routes.draw do
-  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
+  root 'pages#home'
 end

config/webpack/environment.js

@@ -1,3 +1,11 @@
-const { environment } = require('@rails/webpacker')
+const { environment } = require("@rails/webpacker");
 
-module.exports = environment
+["css", "moduleCss"].forEach(loaderName => {
+  const loader = environment.loaders.get(loaderName);
+
+  loader.test = /\.(p?css)$/i;
+
+  environment.loaders.insert(loaderName, loader);
+});
+// ...and above the following line:
+module.exports = environment;

config/webpacker.yml

@@ -1,7 +1,7 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/javascript
+  source_path: frontend
   source_entry_path: packs
   public_root_path: public
   public_output_path: packs

frontend/components/page/_page.html.erb

@@ -0,0 +1,3 @@
+<div class="page">
+  <%= yield %>
+</div>

frontend/components/page/page.js

@@ -0,0 +1 @@
+import "./page.pcss";

frontend/components/page/page.pcss

@@ -0,0 +1,6 @@
+.page {
+  height: 100vh;
+  width: 700px;
+  margin: 0 auto;
+  overflow: hidden;
+}

frontend/init/index.js

@@ -0,0 +1 @@
+import "./index.pcss";

frontend/init/index.pcss

@@ -0,0 +1,12 @@
+@import "normalize.css/normalize.css";
+
+body {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+html,
+body {
+  background: lightblue;
+}

frontend/packs/application.js

@@ -0,0 +1,2 @@
+import "init";
+import "components/page/page";

lefthook.yml

@@ -0,0 +1,9 @@
+pre-commit:
+  parallel: true
+  commands:
+    js:
+      glob: "*.js"
+      run: "yarn prettier --write {staged_files} && yarn eslint {staged_files} && git add {staged_files}"
+    css:
+      glob: "*.{css,pcss}"
+      run: "yarn prettier --write {staged_files} && yarn stylelint --fix {staged_files} && git add {staged_files}"

package.json

@@ -4,10 +4,24 @@
   "dependencies": {
     "@rails/actioncable": "^6.0.0",
     "@rails/ujs": "^6.0.0",
-    "@rails/webpacker": "4.2.2"
+    "@rails/webpacker": "4.2.2",
+    "normalize.css": "^8.0.1"
   },
   "version": "0.1.0",
   "devDependencies": {
+    "@arkweid/lefthook": "^0.7.1",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.0.0",
+    "eslint-config-airbnb-base": "^14.1.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-import-resolver-webpack": "^0.12.1",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-prettier": "^3.1.3",
+    "prettier": "^2.0.5",
+    "stylelint": "^13.3.3",
+    "stylelint-config-prettier": "^8.0.1",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-prettier": "^1.1.2",
     "webpack-dev-server": "^3.11.0"
   }
 }

stylelint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["stylelint-config-standard", "stylelint-prettier/recommended"],
+};

test/controllers/pages_controller_test.rb

@@ -0,0 +1,9 @@
+require 'test_helper'
+
+class PagesControllerTest < ActionDispatch::IntegrationTest
+  test "should get home" do
+    get pages_home_url
+    assert_response :success
+  end
+
+end