Bootstrapping from Evil Martian's component system

https://evilmartians.com/chronicles/evil-front-part-1
This commit is contained in:
James Patrick 2020-05-15 20:29:06 -04:00
parent efba8e8e70
commit ac1ef00c5a
24 changed files with 1716 additions and 63 deletions

18
.eslintrc.js Normal file
View File

@ -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"],
},
},
},
},
},
};

2
Procfile Normal file
View File

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

View File

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

View File

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

View File

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

View File

@ -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)

View File

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

View File

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

View File

@ -1,5 +1,5 @@
# frozen_string_literal: true # frozen_string_literal: true
Rails.application.routes.draw do 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 end

View File

@ -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;

View File

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

View File

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

View File

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

View File

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

1
frontend/init/index.js Normal file
View File

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

12
frontend/init/index.pcss Normal file
View File

@ -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;
}

View File

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

9
lefthook.yml Normal file
View File

@ -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}"

View File

@ -4,10 +4,24 @@
"dependencies": { "dependencies": {
"@rails/actioncable": "^6.0.0", "@rails/actioncable": "^6.0.0",
"@rails/ujs": "^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", "version": "0.1.0",
"devDependencies": { "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" "webpack-dev-server": "^3.11.0"
} }
} }

3
stylelint.config.js Normal file
View File

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

View File

@ -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

1648
yarn.lock

File diff suppressed because it is too large Load Diff