Merge pull request #95 from eessex/webpack

Migrate asset pipeline to Webpack, use TS & React

.browserslistrc

@@ -0,0 +1 @@
+defaults

.eslintrc.js

@@ -0,0 +1,36 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    jest: true,
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier/@typescript-eslint",
+    "plugin:react/recommended",
+    "prettier",
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 6,
+    sourceType: "module",
+  },
+  plugins: ["@typescript-eslint", "eslint-plugin-import"],
+  root: true,
+  rules: {
+    "no-console": 1,
+    "sort-imports": 1,
+    "sort-keys": 1,
+    "spaced-comment": ["error", "always", { block: { balanced: true } }],
+  },
+  settings: {
+    react: {
+      version: "detect", 
+    },
+  }
+}

.gitignore

@@ -27,3 +27,10 @@
 /config/master.key
 
 .env
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

Dockerfile

@@ -28,6 +28,10 @@ RUN gem install bundler -v '<2' && \
 COPY Gemfile Gemfile.lock .ruby-version ./
 RUN bundle install -j4
 
+# Set up packages, empty cache to save space
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile --quiet && \
+    yarn cache clean --force
 
 # Create directories for Puma/Nginx & give deploy user access
 RUN mkdir -p /shared/pids /shared/sockets && \

Gemfile

@@ -59,3 +59,5 @@ end
 
 # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
 gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
+
+gem "webpacker", "~> 5.1"

Gemfile.lock

@@ -165,6 +165,8 @@ GEM
     public_suffix (4.0.5)
     puma (3.12.6)
     rack (2.2.2)
+    rack-proxy (0.6.5)
+      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
     rails (6.0.3.1)
@@ -249,6 +251,7 @@ GEM
     sawyer (0.8.2)
       addressable (>= 2.3.5)
       faraday (> 0.8, < 2.0)
+    semantic_range (2.3.0)
     sprockets (3.7.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
@@ -271,6 +274,11 @@ GEM
       activemodel (>= 6.0.0)
       bindex (>= 0.4.0)
       railties (>= 6.0.0)
+    webpacker (5.1.1)
+      activesupport (>= 5.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 5.2)
+      semantic_range (>= 2.3.0)
     websocket-driver (0.7.2)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.4)
@@ -304,6 +312,7 @@ DEPENDENCIES
   tzinfo-data
   uglifier (>= 1.3.0)
   web-console (>= 3.3.0)
+  webpacker (~> 5.1)
 
 RUBY VERSION
    ruby 2.6.6p146

Rakefile

@@ -10,3 +10,14 @@ namespace :cron do
     ComparisonService.refresh_all_comparisons
   end
 end
+
+if Rails.env.development? || Rails.env.test?
+  desc 'run prettier'
+  task prettier: :environment do
+    system 'yarn prettier'
+    abort 'prettier failed' unless $CHILD_STATUS.exitstatus.zero?
+  end
+
+  Rake::Task[:default].clear
+  task default: %i[prettier spec]
+end

app/assets/config/manifest.js

@@ -1,3 +1,4 @@
+/* eslint-disable spaced-comment */
+
 //= link_tree ../images
-//= link_directory ../javascripts .js
 //= link_directory ../stylesheets .css

app/assets/stylesheets/projects.scss

@@ -3,6 +3,11 @@
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
 .projects_detail {
+  font-family: "Unica77LLWebRegular", "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+
   .avatar {
     border-radius: 50%;
     -moz-border-radius: 50%;
@@ -19,7 +24,6 @@
   }
 
   div.project .project_name {
-    font-weight: bold;
     div.blocked {
       display: inline;
     }
@@ -78,10 +82,10 @@
 }
 
 .projects_dashboard {
-  body {
-    font-family: "Unica77LLWebRegular";
-    font-size: 14px;
-  }
+  font-family: "Unica77LLWebRegular", "Helvetica Neue", Helvetica, Arial,
+    sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
 
   h1 {
     font-size: 18px;
@@ -90,14 +94,10 @@
     line-height: 24px;
     clear: both;
     margin: 30px;
-    font-family: "Unica77LLWebMedium";
-    font-weight: normal;
   }
 
   h2 {
     font-size: 20px;
-    font-family: "Unica77LLWebMedium";
-    font-weight: normal;
     color: black;
   }
 
@@ -135,9 +135,10 @@
   }
 
   .todo .project.aged {
-    background-image: image-url("aged_top_left.png"), image-url("aged_top_right.png");
-    box-shadow: inset 0 0 40px hsla(33,42%,66%,.6);
-    background-position: 0 0,100% 0;
+    background-image: image-url("aged_top_left.png"),
+      image-url("aged_top_right.png");
+    box-shadow: inset 0 0 40px hsla(33, 42%, 66%, 0.6);
+    background-position: 0 0, 100% 0;
     background-repeat: no-repeat;
   }
 
@@ -171,8 +172,8 @@
     color: #900;
   }
   .todo .project .stage {
-    font-family: "Unica77LLWebMedium";
     font-size: 18px;
+    font-weight: bold;
   }
 
   .todo .project .who {

app/assets/javascripts/cable.js → app/javascript/channels/consumer.ts

@@ -1,13 +1,6 @@
 // Action Cable provides the framework to deal with WebSockets in Rails.
 // You can generate new channels where WebSocket features live using the `rails generate channel` command.
-//
-//= require action_cable
-//= require_self
-//= require_tree ./channels
 
-(function() {
-  this.App || (this.App = {});
+import { createConsumer } from "@rails/actioncable"
 
-  App.cable = ActionCable.createConsumer();
-
-}).call(this);
+export default createConsumer()

app/javascript/channels/index.ts

@@ -0,0 +1,5 @@
+// Load all the channels within this directory and all subdirectories.
+// Channel files must be named *_channel.ts.
+
+const channels = require.context(".", true, /_channel\.ts$/)
+channels.keys().forEach(channels)

app/javascript/channels/project_channel.ts

@@ -0,0 +1,23 @@
+import $ from "jquery"
+import consumer from "./consumer"
+
+consumer.subscriptions.create(
+  {
+    channel: "ProjectChannel",
+    organization_id: $("#organization_subscription_identifier").val(),
+  },
+  {
+    connected() {
+      // Called when the subscription is ready for use on the server
+    },
+    disconnected() {
+      // Called when the subscription has been terminated by the server
+    },
+    received(data) {
+      // Called when there's incoming data on the websocket for this channel
+      if (data.newSnapshots || data.updatedBlocks) {
+        location.reload()
+      }
+    },
+  },
+)

app/javascript/components/MainLayout.tsx

@@ -0,0 +1,26 @@
+import { ArtsyMarkIcon, Box, Flex, Link, Sans, Theme } from "@artsy/palette"
+import React from "react"
+
+export const MainLayout: React.FC = () => {
+  return (
+    <Theme>
+      <NavBar />
+      <Box id="body" />
+    </Theme>
+  )
+}
+
+export const NavBar: React.FC = () => {
+  return (
+    <Box width="100%">
+      <Link href="/" noUnderline display="inline-block">
+        <Flex px={3} py={1} width="min-content">
+          <ArtsyMarkIcon width="25" height="25" />
+          <Sans size="5" weight="medium" pl={0.5}>
+            Horizon
+          </Sans>
+        </Flex>
+      </Link>
+    </Box>
+  )
+}

app/javascript/packs/application.js

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+
+// 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.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+// 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)
+
+require("turbolinks").start()
+require("@rails/ujs").start()
+require("@rails/activestorage").start()
+
+// ActionCable
+require("channels")
+// Theme + NavBar
+require("./main_layout")

app/javascript/packs/main_layout.tsx

@@ -0,0 +1,7 @@
+import { MainLayout } from "components/MainLayout"
+import React from "react"
+import ReactDOM from "react-dom"
+
+document.addEventListener("turbolinks:load", () => {
+  ReactDOM.render(<MainLayout />, document.getElementById("main-layout"))
+})

app/views/layouts/application.html.erb

@@ -7,10 +7,11 @@
 
     <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
     <%= stylesheet_link_tag 'https://webfonts.artsy.net/unica-webfonts.css' %>
-    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   </head>
 
   <body>
+    <div id="main-layout"></div>
     <%= yield %>
   </body>
 </html>