matestack-ui-core 0.6.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 6e54bd9269c669fa0d87f2052258961731162454a99417077e2102e5d391aee2
+  data.tar.gz: dbfb0a72d64c215d714c0340667e5f61c19fc0908875b5e1150be97c0c364f61
+SHA512:
+  metadata.gz: b15dcdaa3f71f73c99adf5971ded4c558968c8e93f555e7b8593bf40a074ff7e72fbbff295ac939556aff71c29a1f439588445e01e74fc8af3406726139fb674
+  data.tar.gz: 767db8f8b1757b356178db83bba45da3427ba2195425670be4a0cc4912382ed2df6d9a19464d7d2d8dcfb805a000c2dca9962761de3966f525580839b06de77f

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright 2018 Jonas Jabari
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,230 @@
+[![CircleCI](https://circleci.com/gh/basemate/matestack-ui-core/tree/master.svg?style=shield)](https://circleci.com/gh/basemate/matestack-ui-core/tree/master)
+
+![matestack logo](./logo.png)
+
+# Matestack: Escape the frontend hustle
+
+## Create maintainable, dynamic and beautiful UIs easily
+
+As a Rails Engine, matestack deeply integrates a Vue.js based UI into Rails, offering optional prebuilt components. Use it to write dynamic Web-UIs with minimum effort and maximum dev happiness in pure Ruby. The main goals are:
+
+- Reduction of complexity of modern web development, moving front and backend closer together
+- More maintainable UI code, using a component-based structure written in Ruby
+- Increased development speed and happiness, offering prebuilt UI-Components for classic requirements
+- Modern, dynamic UI feeling without the need to implement a separate JavaScript Application
+
+matestack can progressively replace the classic Rails-View-Layer. You are able to use
+it alongside your classic views and incrementally turn your Rails-App into a
+dynamic Web-App.
+
+### Features:
+
+#### Define your UI in a Ruby Class
+```ruby
+class Pages::MyPage < Page::Cell::Page
+
+  def prepare
+    @technologies = ["Rails", "Vue.js", "Trailblazer", "Rspec", "Capybara"]
+  end
+
+  def response
+    components{
+      div id: "technologies" do
+        @technologies.each do |technology|
+          plain "matestack uses #{technology}"
+        end
+      end
+    }
+  end
+
+end
+```
+#### Create a Single Page Application without JavaScript
+
+```ruby
+class Apps::MyApp < App::Cell::App
+
+  def response
+    components{
+      header do
+        heading size: 1, text: "My App"
+      end
+      nav do
+        transition path: :my_first_page_path do
+          button "Page 1"
+        end
+        transition path: :my_second_page_path do
+          button "Page 2"
+        end
+      end
+      main do
+        page_content #pages are dynamically yielded here, when buttons are clicked!
+      end
+      footer do
+        plain "That's it!"
+      end
+    }
+  end
+
+end
+```
+
+```ruby
+class Pages::MyApp::MyFirstPage < Page::Cell::Page
+
+  def response
+    components{
+      div id: "div-on-page-1" do
+        plain "My First Page"
+      end
+    }
+  end
+
+end
+```
+```ruby
+class Pages::MyApp::MySecondPage < Page::Cell::Page
+
+  def response
+    components{
+      div id: "div-on-page-2" do
+        plain "My Second Page"
+      end
+    }
+  end
+
+end
+```
+#### Handle User Interaction dynamically without JavaScript
+```ruby
+class Pages::MyPage < Page::Cell::Page
+
+  def response
+    components {
+      action my_action_config do
+        button text: "Click me!"
+      end
+      #content gets rerendered without page reload if action succeeded
+      async rerender_on: "my_action_succeeded" do
+        div id: "my-div" do
+          plain DateTime.now
+        end
+      end
+    }
+  end
+
+  def my_action_config
+    {
+      method: :post,
+      path: :some_rails_routing_path,
+      success: {
+        emit: "my_action_succeeded"
+      }
+    }
+  end
+
+end
+```
+#### Handle User Input dynamically without JavaScript
+```ruby
+class Pages::MyApp::MyFirstPage < Page::Cell::Page
+
+  def prepare
+    @my_model = MyModel.new
+  end
+
+  def response
+    components {
+      form my_form_config, :include do
+        form_input key: :some_model_attribute, type: :text
+        form_submit do
+          button text: "Submit me!"
+        end
+      end
+      async show_on: "form_has_errors", hide_after: 5000 do
+        plain "Data could not be submitted, please check form"
+      end
+    }
+  end
+
+  def my_form_config
+    {
+      for: @my_model,
+      method: :post,
+      path: :some_action_path,
+      success: {
+        transition: {
+          path: :my_second_page_path,
+        }
+      },
+      failure: {
+        emit: "form_has_errors"
+      }
+    }
+  end
+
+end
+```
+#### Websocket Integration without JavaScript
+```ruby
+class Pages::MyPage < Page::Cell::Page
+
+  def prepare
+    @comments = Comment.last(5)
+  end
+
+  def response
+    components {
+      #content gets rerendered without page reload when
+      #websocket event is received
+      async rerender_on: "comments_changed" do
+        @comments.each do |comment|
+          div do
+            plain comment.content
+          end
+        end
+      end
+    }
+  end
+
+end
+```
+somewhere else on the backend:
+
+```ruby
+ActionCable.server.broadcast("matestack_ui_core", {
+  message: "comments_changed"
+})
+```
+
+### Documentation
+
+Documentation can be found [here](./docs)
+
+### Changelog
+
+Changelog can be found [here](./CHANGELOG.md)
+
+### Roadmap
+
+Scheduled for 0.7.0:
+- Webpacker/Yarn Integration
+- Advanced Websockets Integration
+- 1:n Relations in Form components
+- More Form Components (Multi Select Components)
+- Component Based Caching
+- Rails View Integration
+- Dockerized Core Development
+
+
+### Community
+
+TODO: Gitter
+
+### Contribution
+
+We are happy to accept contributors of any kind. Please refer to the [Contribution Guide](./docs/contribute)
+
+### License
+The gem is available as open source under the terms of the
+[MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,34 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Matestack::Ui::Core'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+load 'lib/tasks/matestack/ui/core_tasks.rake'
+
+require 'bundler/gem_tasks'
+
+require 'rake/testtask'
+
+# Rake::TestTask.new(:test) do |t|
+#   t.libs << 'test'
+#   t.pattern = 'test/**/*_test.rb'
+#   t.verbose = false
+# end
+#
+# task default: :test

data/app/assets/config/basemate_ui_core_manifest.js

@@ -0,0 +1,2 @@
+//= link_directory ../javascripts/matestack/ui/core .js
+//= link_directory ../stylesheets/matestack/ui/core .css

data/app/assets/javascripts/basemate/ui/core/application.js

@@ -0,0 +1,15 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require rails-ujs
+//= require activestorage
+//= require_tree .

data/app/assets/stylesheets/basemate/ui/core/application.css

@@ -0,0 +1,15 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */

data/app/concepts/absolute/cell/absolute.rb

@@ -0,0 +1,17 @@
+module Absolute::Cell
+  class Absolute < Component::Cell::Static
+
+    def setup
+      style = "position: absolute;"
+      style << " top: #{options[:top]}px;" if options[:top]
+      style << " left: #{options[:left]}px;" if options[:left]
+      style << " right: #{options[:right]}px;" if options[:right]
+      style << " bottom: #{options[:bottom]}px;" if options[:bottom]
+      style << " z-index: #{options[:z]};" if options[:z]
+      @tag_attributes.merge!({
+        style: style
+      })
+    end
+
+  end
+end

data/app/concepts/absolute/view/absolute.haml

@@ -0,0 +1,3 @@
+%div{@tag_attributes}
+  - if block_given?
+    = yield

data/app/concepts/action/cell/action.rb

@@ -0,0 +1,52 @@
+module Action::Cell
+  class Action < Component::Cell::Dynamic
+
+    def setup
+      @component_config[:action_path] = action_path
+      @component_config[:method] = options[:method]
+      @component_config[:success] = options[:success]
+      unless options[:success].nil?
+        unless options[:success][:transition].nil?
+          @component_config[:success][:transition][:path] = transition_path options[:success]
+        end
+      end
+      @component_config[:failure] = options[:failure]
+      unless options[:failure].nil?
+        unless options[:failure][:transition].nil?
+          @component_config[:failure][:transition][:path] = transition_path options[:failure]
+        end
+      end
+      if options[:notify].nil?
+        @component_config[:notify] = true
+      end
+    end
+
+    def action_path
+      begin
+        if options[:path].is_a?(Symbol)
+          return ::Rails.application.routes.url_helpers.send(options[:path], options[:params])
+        else
+          return options[:path]
+        end
+      rescue
+        raise "Action path not found"
+      end
+    end
+
+    def transition_path callback_options
+      begin
+        if callback_options[:transition][:path].is_a?(Symbol)
+          return ::Rails.application.routes.url_helpers.send(
+            callback_options[:transition][:path],
+            callback_options[:transition][:params]
+          )
+        else
+          return callback_options[:transition][:path]
+        end
+      rescue
+        raise "Transition path not found"
+      end
+    end
+
+  end
+end

data/app/concepts/action/js/action.js

@@ -0,0 +1,49 @@
+import Vue from 'vue/dist/vue.esm'
+import Vuex from 'vuex'
+import axios from 'axios'
+
+import matestackEventHub from 'core/js/event-hub'
+
+import componentMixin from 'component/js/component'
+
+const componentDef = {
+  mixins: [componentMixin],
+  data: function(){
+    return {}
+  },
+  methods: {
+    perform: function(){
+      const self = this
+      axios({
+        method: self.componentConfig["method"],
+        url: self.componentConfig["action_path"],
+        data: self.componentConfig["data"],
+        headers: {
+          'X-CSRF-Token': document.getElementsByName("csrf-token")[0].getAttribute('content')
+        }
+      })
+      .then(function(response){
+        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
+          matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
+        }
+        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["transition"] != undefined && self.$store != undefined) {
+          let path = self.componentConfig["success"]["transition"]["path"]
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+        }
+      })
+      .catch(function(error){
+        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
+          matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
+        }
+        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
+          let path = self.componentConfig["failure"]["transition"]["path"]
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+        }
+      })
+    }
+  }
+}
+
+let component = Vue.component('action-cell', componentDef)
+
+export default componentDef