setup react-rails

Author: sophalsun

.browserslistrc

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

.gitignore

@@ -28,3 +28,10 @@ dump.rdb
 vendor/data
 .vscode/
 brakeman_report*.html
+
+/public/packs
+/public/packs-test
+/node_modules
+/yarn-error.log
+yarn-debug.log*
+.yarn-integrity

Gemfile

@@ -69,6 +69,8 @@ gem 'text',                   '~> 1.3', '>= 1.3.1'
 gem 'paranoia',               '~> 2.4', '>= 2.4.1'
 gem 'ancestry',               '~> 3.0', '>= 3.0.5'
 gem 'write_xlsx',             '~> 0.85.7'
+gem 'react-rails',            '~> 2.6.0'
+gem 'webpacker',              '~> 4.0.7'
 
 group :development, :test do
   gem 'pry'

Gemfile.lock

@@ -492,6 +492,8 @@ GEM
       rack (>= 1.2.0)
     rack-protection (1.5.3)
       rack
+    rack-proxy (0.6.5)
+      rack
     rack-test (0.6.3)
       rack (>= 1.0)
     rails (4.2.2)
@@ -536,6 +538,12 @@ GEM
       builder
       nokogiri (>= 1.4.1)
       trollop
+    react-rails (2.6.0)
+      babel-transpiler (>= 0.7.0)
+      connection_pool
+      execjs
+      railties (>= 3.2)
+      tilt
     redis (3.2.2)
     representable (3.0.4)
       declarative (< 0.1.0)
@@ -692,6 +700,10 @@ GEM
     uniform_notifier (1.10.0)
     warden (1.2.6)
       rack (>= 1.0)
+    webpacker (4.0.7)
+      activesupport (>= 4.2)
+      rack-proxy (>= 0.6.1)
+      railties (>= 4.2)
     websocket-driver (0.7.0)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.3)
@@ -781,6 +793,7 @@ DEPENDENCIES
   rack-mini-profiler (~> 1.0)
   rails (= 4.2.2)
   rails-erd
+  react-rails (~> 2.6.0)
   roo (~> 2.2)
   rspec-activemodel-mocks
   rspec-rails (~> 3.4)
@@ -801,6 +814,7 @@ DEPENDENCIES
   tinymce-rails (~> 4.5.6)
   typhoeus
   uglifier (>= 1.3.0)
+  webpacker (~> 4.0.7)
   whenever (~> 0.9.4)
   where-or (~> 0.1.6)
   wicked_pdf (~> 1.0, >= 1.0.6)

app/javascript/components/.keep

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default props => {
+  const { step } = props
+  
+  return (
+    step === 1 &&
+    <div>
+      <h1>Getting Start</h1>
+    </div>
+  )
+}

app/javascript/components/NewClientForm/gettingStart.js

@@ -0,0 +1,46 @@
+import React, { useState } from 'react'
+import GettingStarted from './gettingStart'
+import LivingDetails from './livingDetails'
+import OtherDetails from './otherDetails'
+import ReferralData from './referralData'
+import './styles.scss'
+
+const Forms = props => {
+  const [step, setStep] = useState(1)
+  const tabs = [
+    {text: '1. Getting Started', step: 1},
+    {text: '2. Living Details', step: 2},
+    {text: '3. Other Details', step: 3},
+    {text: '4. Specific Point-of-Referral-Data', step: 4}
+  ]
+
+  const activeClass = value => {
+    return step === value ? 'active' : ''
+  }
+
+  const renderTab = data => {
+    return (
+      <span
+        onClick={() => setStep(data.step)}
+        className={`tabButton ${activeClass(data.step)}`}
+      >
+        {data.text}
+      </span>
+    )
+  }
+
+  return (
+    <div className='container'>
+      <div className='tabHead'>
+        { tabs.map(tab => renderTab(tab)) }
+      </div>
+
+      <GettingStarted step={step} />
+      <LivingDetails step={step} />
+      <OtherDetails step={step} />
+      <ReferralData step={step} />
+    </div>
+  )
+}
+
+export default Forms

app/javascript/components/NewClientForm/index.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default props => {
+  const { step } = props
+
+  return (
+    step === 2 &&
+    <div>
+      <h1>Living Details</h1>
+    </div>
+  )
+}

app/javascript/components/NewClientForm/livingDetails.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default props => {
+  const { step } = props
+
+  return (
+    step === 3 &&
+    <div>
+      <h1>Other Details</h1>
+    </div>
+  )
+}

app/javascript/components/NewClientForm/otherDetails.js

@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default props => {
+  const { step } = props
+
+  return (
+    step === 4 &&
+    <div>
+      <h1>Specifi Points of Refferal Data</h1>
+    </div>
+  )
+}

app/javascript/components/NewClientForm/referralData.js

@@ -0,0 +1,23 @@
+.container {
+  width: 100%;
+}
+
+.tabHead {
+  display: flex;
+  flex: 1;
+}
+
+.tabButton {
+  border-radius: 5px;
+  color: blue;
+  flex: 1;
+  padding: 15px;
+  margin: 10px;
+  cursor: pointer;
+}
+
+.active {
+  background: blue;
+  color: white;
+}
+

app/javascript/components/NewClientForm/styles.scss

@@ -0,0 +1,22 @@
+/* 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
+
+
+// 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)
+
+console.log('Hello World from Webpacker')
+// Support component names relative to this directory:
+var componentRequireContext = require.context("components", true);
+var ReactRailsUJS = require("react_ujs");
+ReactRailsUJS.useContext(componentRequireContext);

app/javascript/packs/application.js

@@ -0,0 +1,26 @@
+// Run this example by adding <%= javascript_pack_tag 'hello_react' %> to the head of your layout file,
+// like app/views/layouts/application.html.erb. All it does is render <div>Hello React</div> at the bottom
+// of the page.
+
+import React from 'react'
+import ReactDOM from 'react-dom'
+import PropTypes from 'prop-types'
+
+const Hello = props => (
+  <div>Hello {props.name}!</div>
+)
+
+Hello.defaultProps = {
+  name: 'David'
+}
+
+Hello.propTypes = {
+  name: PropTypes.string
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(
+    <Hello name="React" />,
+    document.body.appendChild(document.createElement('div')),
+  )
+})

app/javascript/packs/hello_react.jsx

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

app/javascript/packs/server_rendering.js

@@ -12,4 +12,7 @@
           - if @referral.present?
             = link_to t('.download_supporting_document'), @referral.consent_form.first.url, class: 'btn btn-info btn-sm btn-download', target: :_blank
       .ibox-content
-        = render 'form'
+        - if current_organization.aht
+          = react_component('NewClientForm')
+        - else
+          = render 'form'

app/views/clients/new.html.haml

@@ -9,6 +9,7 @@
 
     %title= current_organization.try(:short_name) == 'mho'?  "Mother's Heart Organisation" : "OSCaR - Open Source Case-management and Record-keeping"
     %script{:src => "https://cdn.jsdelivr.net/npm/[email protected]/dist/interact.min.js"}
+    = javascript_pack_tag    'application'
     = stylesheet_link_tag    'application', media: 'all'
     = csrf_meta_tags
 

app/views/layouts/application.html.haml

@@ -0,0 +1,85 @@
+module.exports = function(api) {
+  var validEnv = ['development', 'test', 'production']
+  var currentEnv = api.env()
+  var isDevelopmentEnv = api.env('development')
+  var isProductionEnv = api.env('production')
+  var isTestEnv = api.env('test')
+
+  if (!validEnv.includes(currentEnv)) {
+    throw new Error(
+      'Please specify a valid `NODE_ENV` or ' +
+        '`BABEL_ENV` environment variables. Valid values are "development", ' +
+        '"test", and "production". Instead, received: ' +
+        JSON.stringify(currentEnv) +
+        '.'
+    )
+  }
+
+  return {
+    presets: [
+      isTestEnv && [
+        require('@babel/preset-env').default,
+        {
+          targets: {
+            node: 'current'
+          }
+        }
+      ],
+      (isProductionEnv || isDevelopmentEnv) && [
+        require('@babel/preset-env').default,
+        {
+          forceAllTransforms: true,
+          useBuiltIns: 'entry',
+          corejs: 3,
+          modules: false,
+          exclude: ['transform-typeof-symbol']
+        }
+      ],
+      [
+        require('@babel/preset-react').default,
+        {
+          development: isDevelopmentEnv || isTestEnv,
+          useBuiltIns: true
+        }
+      ]
+    ].filter(Boolean),
+    plugins: [
+      require('babel-plugin-macros'),
+      require('@babel/plugin-syntax-dynamic-import').default,
+      isTestEnv && require('babel-plugin-dynamic-import-node'),
+      require('@babel/plugin-transform-destructuring').default,
+      [
+        require('@babel/plugin-proposal-class-properties').default,
+        {
+          loose: true
+        }
+      ],
+      [
+        require('@babel/plugin-proposal-object-rest-spread').default,
+        {
+          useBuiltIns: true
+        }
+      ],
+      [
+        require('@babel/plugin-transform-runtime').default,
+        {
+          helpers: false,
+          regenerator: true,
+          corejs: false
+        }
+      ],
+      [
+        require('@babel/plugin-transform-regenerator').default,
+        {
+          async: false
+        }
+      ],
+      isProductionEnv && [
+        require('babel-plugin-transform-react-remove-prop-types').default,
+        {
+          removeImport: true
+        }
+      ]
+    ].filter(Boolean)
+  }
+}

babel.config.js

@@ -0,0 +1,19 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "rubygems"
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/webpack_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::WebpackRunner.run(ARGV)
+end

bin/webpack

@@ -0,0 +1,19 @@
+#!/usr/bin/env ruby
+
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+
+require "pathname"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
+  Pathname.new(__FILE__).realpath)
+
+require "rubygems"
+require "bundler/setup"
+
+require "webpacker"
+require "webpacker/dev_server_runner"
+
+APP_ROOT = File.expand_path("..", __dir__)
+Dir.chdir(APP_ROOT) do
+  Webpacker::DevServerRunner.run(ARGV)
+end