mvpkit 1.1.2 → 2.0.0

data/project/app/engines/admin/app/views/layouts/admin/_header.html.erb

@@ -1,21 +1,21 @@
-<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse">
-  <div class="container">
-    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <a class="navbar-brand" href="/">__PROJECT_NAME__ <span class="text-danger">Admin</span></a>
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <a class="navbar-brand" href="/">__PROJECT_NAME__</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mr-auto">
-      </ul>
-      <ul class="navbar-nav">
-        <li class="nav-item <%= 'active' if controller_name == 'conversions' %>">
-          <%= link_to 'Conversions', conversions_path, class: "nav-link" %>
-        </li>
-        <li class="nav-item <%= 'active' if controller_name == 'users' %>">
-          <%= link_to 'Users', users_path, class: "nav-link" %>
-        </li>
-      </ul>
-    </div>
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item <%= 'active' if controller_name == 'conversions' %>">
+        <%= link_to 'Conversions', conversions_path, class: "nav-link" %>
+      </li>
+      <li class="nav-item <%= 'active' if controller_name == 'users' %>">
+        <%= link_to 'Users', users_path, class: "nav-link" %>
+      </li>
+    </ul>
+    <form class="form-inline my-2 my-lg-0">
+      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+    </form>
   </div>
 </nav>

data/project/app/helpers/application_helper.rb

@@ -17,20 +17,6 @@ module ApplicationHelper
     )
   end
 
-  def render_mustache(template, object)
-    mustache = Mustache.new
-    mustache.template_extension = 'mustache'
-    mustache.template_path = Rails.root.join("app/templates")
-    mustache.template_file = Rails.root.join("app/templates/#{template}.mustache")
-    mustache.instance_eval %%
-      def logged_in
-        #{!!current_user}
-      end
-    %
-    # mustache.template_extension = 'mustache'
-    mustache.render(object).html_safe
-  end
-
   def store_and_redirect_path(path)
     url_for(:only_path => false, :trailing_slash => true) + "r/" + path
   end

data/project/app/javascript/components/conversion.jsx

@@ -0,0 +1,73 @@
+import autobind from 'react-autobind';
+import React from 'react';
+import { Form, Input } from 'reactstrap';
+import validator from 'validator';
+import SuperAgent from 'superagent';
+
+class Conversion extends React.Component {
+  constructor(props){
+    super(props);
+    this.state = {
+      disabled: true,
+    }
+    autobind(this);
+  }
+
+  onEmailChange(e){
+    let val = e.target.value;
+
+    if (!validator.isEmail(val)) {
+      this.setState({disabled: true})
+      return;
+    }
+
+    this.setState({
+      disabled: false,
+      email: val,
+    })
+  }
+
+  onSubmit(e){
+    e.preventDefault();
+
+    SuperAgent
+      .post('/conversion')
+      .send({ conversion: {email: this.state.email} })
+      .end((err, res) => {
+        if (res.ok) {
+          this.setState({success: true});
+        } else {
+          this.setState({
+            errors: res.body.errors,
+          });
+        }
+      })
+  }
+
+  render(){
+    if (this.state.success){
+      return(
+        <div className="card">
+          <div className="card-body text-center">
+            <h4>Conversion Successful!</h4>
+          </div>
+        </div>
+      )
+    }
+    return (
+      <div className="card">
+        <div className="card-body">
+          <h4 className="mb10">Conversion Form</h4>
+          <Form onSubmit={(e)=>{e.preventDefault()}}>
+            <Input onChange={this.onEmailChange} placeholder="Enter your email ..."/>
+            <div className="mt15">
+              <button onClick={this.onSubmit} className="btn btn-primary" disabled={this.state.disabled}>Join Now</button>
+            </div>
+          </Form>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Conversion;

data/project/app/javascript/packs/application.js

@@ -0,0 +1,28 @@
+/* eslint no-console: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.
+//
+// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
+// layout file, like app/views/layouts/application.html.erb
+
+// Support component names relative to this directory:
+var componentRequireContext = require.context("components", true)
+var ReactRailsUJS = require("react_ujs")
+ReactRailsUJS.useContext(componentRequireContext)
+
+window.Tether          = require('tether');
+window.Popper = require('popper.js').default
+window.jQuery          = require('jquery')
+window.jQueryUJS       = require('jquery-ujs');
+window.$               = window.jQuery;
+
+window.is              = require('is_js');
+window._               = require('lodash');
+_.mixin(require('lodash-inflection'));
+
+window.Moment          = require('moment');
+window.bs              = require('bootstrap');
+
+window.Conversion      = require('components/conversion');

data/project/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)

data/project/app/models/conversion.rb

@@ -1,3 +1,3 @@
 class Conversion < ApplicationRecord
-  validates :email, presence: true, uniqueness: true, format: { with: /\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\z/i }
+  validates :email, presence: true, format: { with: /\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\z/i }
 end

data/project/app/views/conversions/show.json.jbuilder

@@ -0,0 +1 @@
+json.extract! @conversion, :id, :email

data/project/app/views/home/index.html.erb

@@ -1,28 +1,28 @@
-<div class="row mt100">
-  <div class="col-sm-8 offset-sm-2 col-md-6 offset-md-3">
-    <p class='text-center mb50'>
-      By default, this page is setup to accept an email submission and store in the database.  Depending on your configuration, this will fire an conversion event and even submit to Slack.
-    </p>
-    <div class="card">
-      <div class="card-header">
-        <h4>Sign Up</h4>
-      </div>
-      <div class="card-block">
-        <%= simple_form_for Conversion.new, url: conversion_path, remote:true, validate: true, html: { class: 'disable-on-submit' } do |f| %>
-          <div class="row">
-            <div class="col-sm-7 pr10-sm">
-              <%= f.input :email, placeholder: 'joe@example.com', label: false, input_html: { class: "mb0" } %>
-            </div>
-            <div class="col-sm-5 pl0-sm">
-              <%= f.submit "Register for Free", class: 'btn btn-primary btn-block' %>
-            </div>
-          </div>
+<div class="row mt100 justify-content-center">
+  <div class="col-lg-8">
+    <div class="mb50">
+      <h1 class="text-center mb10">mvpkit is running</h1>
+      <p class='text-center'>
+        Hopefully that was easy.  Now, onto the good stuff.
+      </p>
+    </div>
+
+    <h2 class="mb20">Quick Tour</h2>
 
-          <p class="text-center mt10 mb0 text-grey">
-            <small>We hate spam, don't worry, we'll never try to sell you anything or your info to anyone.</small>
-          </p>
+    <div class="mb50">
+      <p class="mb20">You've got <a href="https://getbootstrap.com/docs/4.0/getting-started/introduction/">Bootstrap 4</a> ready to go.</p>
+
+      <div class="row">
+        <% ['primary','secondary','success','warning','danger'].each do |color| %>
+          <div class="col-sm-4 mb20">
+            <a href="#" class="btn btn-<%= color %> btn-block">.btn-<%= color %></a>
+          </div>
         <% end %>
       </div>
     </div>
+
+    <p class="mb15">Here's a sample React conversion form.  It takes an email as an input, validates and submits to the server to create a conversion, which will show up in <a href="/a/conversions">conversions admin</a></p>
+
+    <%= react_component 'Conversion' %>
   </div>
 </div>

data/project/app/views/layouts/_header.html.erb

@@ -1,37 +1,38 @@
-<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
-  <div class="container">
-    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <a class="navbar-brand" href="/">__PROJECT_NAME__</a>
+<nav class="navbar navbar-expand-lg navbar-light bg-light">
+  <a class="navbar-brand" href="/">__PROJECT_NAME__</a>
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
-      <ul class="navbar-nav mr-auto">
-      </ul>
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <%= link_to 'Examples', examples_path, class: 'nav-link' %>
-        </li>
-        <li class="nav-item">
-          <%= link_to 'Admin', admin_path, class: 'nav-link' %>
-        </li>
-      </ul>
-      <ul class="navbar-nav">
-        <% if user_signed_in? %>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-              <%= current_user.email %>
-            </a>
-            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
-              <%= link_to 'Log Out', destroy_user_session_path, method: :delete, class: 'nav-link' %>
-            </div>
-          </li>
-        <% else %>
-        <li class="nav-item">
-          <%= link_to 'Log In / Register', new_user_session_path, class: 'nav-link' %>
-        </li>
-        <% end %>
-      </ul>
-    </div>
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
+    <ul class="navbar-nav mr-auto">
+      <li class="nav-item active">
+        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
+      </li>
+      <li class="nav-item">
+        <%= link_to 'Admin', admin_path, class: 'nav-link' %>
+      </li>
+    </ul>
+    <form class="form-inline my-2 my-lg-0">
+      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+    </form>
   </div>
 </nav>
+
+<!-- <ul class="navbar-nav">
+  <% if user_signed_in? %>
+    <li class="nav-item dropdown">
+      <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <%= current_user.email %>
+      </a>
+      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
+        <%= link_to 'Log Out', destroy_user_session_path, method: :delete, class: 'nav-link' %>
+      </div>
+    </li>
+  <% else %>
+  <li class="nav-item">
+    <%= link_to 'Log In / Register', new_user_session_path, class: 'nav-link' %>
+  </li>
+  <% end %>
+</ul> -->

data/project/app/views/layouts/application.html.erb

@@ -1,28 +1,38 @@
-<%- content_for :javascripts do %>
-  <%= javascript_include_tag 'https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js' %>
-  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
-  <%= javascript_include_tag 'https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.4/js/standalone/selectize.js' %>
-<% end %>
+<!DOCTYPE HTML>
+<html lang='en'>
+<head>
+  <%= render('layouts/meta').gsub(/\n/,'').html_safe %>
+  <%= yield :meta %>
 
-<%- content_for :stylesheets do %>
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
-<% end %>
+  <%= yield :stylesheets %>
 
-<%- content_for :body do %>
-  <% unless page.hide_header == true %>
-    <% if content_for :header %>
-      <%= yield :header %>
-    <% else %>
-      <%= render 'layouts/header' %>
+  <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]-->
+  <%= csrf_meta_tags %>
+  <%= render 'layouts/instrumentation' %>
+</head>
+<body id="<%= body_id %>" class="<%= body_classes %>" data-controller="<%= controller.controller_path %>" data-action="<%= controller.action_name %>" data-iteration="<%= MVP::Iteration.version %>">
+  <% if content_for? :body %>
+    <%= yield :body %>
+  <% else %>
+    <% unless page.hide_header == true %>
+      <% if content_for :header %>
+        <%= yield :header %>
+      <% else %>
+        <%= render 'layouts/header' %>
+      <% end %>
     <% end %>
-  <% end %>
 
-  <%= yield :pre %>
+    <%= yield :pre %>
 
-  <div class="container <%= page.container_class %>">
-    <%= render 'layouts/notifications' %>
-    <%= yield %>
-  </div>
-<% end %>
+    <div class="container <%= page.container_class %>">
+      <%= render 'layouts/notifications' %>
+      <%= yield %>
+    </div>
+  <% end %>
 
-<%= render template: "layouts/mvp/application" %>
+  <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
+  <%= javascript_pack_tag    'application', 'data-turbolinks-track': 'reload' %>
+  <%= yield :javascripts %>
+</body>
+</html>

data/project/bin/setup

@@ -14,7 +14,7 @@ chdir APP_ROOT do
   puts '== Installing dependencies =='
   system! 'gem install bundler --conservative'
   system!('bundle install')
-  system!('npm install')
+  system!('yarn')
 
   # puts "\n== Copying sample files =="
   # unless File.exist?('config/database.yml')

data/project/bin/webpack

@@ -0,0 +1,28 @@
+#!/usr/bin/env ruby
+$stdout.sync = true
+
+require "shellwords"
+require "yaml"
+
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV = ENV["RAILS_ENV"]
+
+ENV["NODE_ENV"] ||= RAILS_ENV
+NODE_ENV = ENV["NODE_ENV"]
+
+APP_PATH          = File.expand_path("../", __dir__)
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/#{NODE_ENV}.js")
+
+unless File.exist?(WEBPACK_CONFIG)
+  puts "Webpack configuration not found."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+newenv  = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
+cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV
+
+Dir.chdir(APP_PATH) do
+  exec newenv, *cmdline
+end

data/project/bin/webpack-dev-server

@@ -0,0 +1,43 @@
+#!/usr/bin/env ruby
+$stdout.sync = true
+
+require "shellwords"
+require "yaml"
+
+ENV["RAILS_ENV"] ||= "development"
+RAILS_ENV = ENV["RAILS_ENV"]
+
+ENV["NODE_ENV"] ||= RAILS_ENV
+NODE_ENV = ENV["NODE_ENV"]
+
+APP_PATH          = File.expand_path("../", __dir__)
+CONFIG_FILE       = File.join(APP_PATH, "config/webpacker.yml")
+NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")
+WEBPACK_CONFIG    = File.join(APP_PATH, "config/webpack/development.js")
+
+def args(key)
+  index = ARGV.index(key)
+  index ? ARGV[index + 1] : nil
+end
+
+begin
+  dev_server = YAML.load_file(CONFIG_FILE)["development"]["dev_server"]
+
+  DEV_SERVER_HOST = "http#{"s" if args('--https') || dev_server["https"]}://#{args('--host') || dev_server["host"]}:#{args('--port') || dev_server["port"]}"
+
+rescue Errno::ENOENT, NoMethodError
+  puts "Webpack dev_server configuration not found in #{CONFIG_FILE}."
+  puts "Please run bundle exec rails webpacker:install to install webpacker"
+  exit!
+end
+
+newenv = {
+  "NODE_PATH" => NODE_MODULES_PATH.shellescape,
+  "ASSET_HOST" => DEV_SERVER_HOST.shellescape
+}.freeze
+
+cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
+
+Dir.chdir(APP_PATH) do
+  exec newenv, *cmdline
+end