matestack-ui-core 0.7.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: af1594c493057f5f1ef5e9548d9485d2fcac014a9c79519554ed53d61de90703
+  data.tar.gz: 1441194ad2d3da09a0d4ebb60def765442042e77d069afe7a75abae9ab565464
+SHA512:
+  metadata.gz: 70bf6d472b902d96adde03e06ca5ac062fed60f79220ac4de499f996c391198e64fbe8e72fb0a2a7d8c2b08c75de4cb328a9a81b23cf2c2bb92a137de4a92f70
+  data.tar.gz: 141ce7ca2f0857b8c2f4ec3c740d0e89f23c009340b041a4145e8f04000744bacf2fa948c7ac99bb64294f4b5a4321de0713b27bd4feb3f851c8848350f1dc4e

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,228 @@
+[![CircleCI](https://circleci.com/gh/basemate/matestack-ui-core/tree/master.svg?style=shield)](https://circleci.com/gh/basemate/matestack-ui-core/tree/master)
+[![Gitter](https://badges.gitter.im/basemate/community.svg)](https://gitter.im/basemate/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+[![Gem Version](https://badge.fury.io/rb/matestack-ui-core.svg)](https://badge.fury.io/rb/matestack-ui-core)
+
+![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.
+
+### Installation:
+
+Click here to see how you can add Matestack UI to your existing Rails application: [Installation Guide](./docs/install)
+
+### Features:
+
+#### Define your UI in a Ruby Class
+```ruby
+class Pages::MyPage < Matestack::Ui::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 < Matestack::Ui::App
+
+  def response
+    components{
+      header do
+        heading size: 1, text: "My App"
+      end
+      nav do
+        transition path: :my_first_page_path do
+          button text: "Page 1"
+        end
+        transition path: :my_second_page_path do
+          button text: "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 < Matestack::Ui::Page
+
+  def response
+    components{
+      div id: "div-on-page-1" do
+        plain "My First Page"
+      end
+    }
+  end
+
+end
+```
+```ruby
+class Pages::MyApp::MySecondPage < Matestack::Ui::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 < Matestack::Ui::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 < Matestack::Ui::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 < Matestack::Ui::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
+
+We're currently finalizing the roadmap towards to a stable 1.0 release, supposed to happen towards the end of the year! For details make sure to check the [release management project](https://github.com/basemate/matestack-ui-core/projects/2) and get in touch via our [chat](https://gitter.im/basemate/community) for feedback!
+
+### Community
+
+As a low-barrier feedback channel for our early users, we have set up a Gitter chat that can be found [here](https://gitter.im/basemate/community). You are very welcome to ask questions and send us feedback there!
+
+### 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/concepts/matestack/ui/core/abbr/abbr.haml

@@ -0,0 +1,5 @@
+%abbr{@tag_attributes}
+  - if options[:text].blank? && block_given?
+    = yield
+  - else
+    = options[:text]

data/app/concepts/matestack/ui/core/abbr/abbr.rb

@@ -0,0 +1,12 @@
+module Matestack::Ui::Core::Abbr
+  class Abbr < Matestack::Ui::Core::Component::Static
+    REQUIRED_KEYS = [:title]
+
+    def setup
+      @tag_attributes.merge!({
+        "title": options[:title]
+      })
+    end
+
+  end
+end

data/app/concepts/matestack/ui/core/absolute/absolute.haml

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

data/app/concepts/matestack/ui/core/absolute/absolute.rb

@@ -0,0 +1,17 @@
+module Matestack::Ui::Core::Absolute
+  class Absolute < Matestack::Ui::Core::Component::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/matestack/ui/core/action/action.haml

@@ -0,0 +1,3 @@
+%a{@tag_attributes, "@click.prevent": "perform", "href": action_path}
+  - if block_given?
+    = yield

data/app/concepts/matestack/ui/core/action/action.js

@@ -0,0 +1,49 @@
+import Vue from 'vue/dist/vue.esm'
+import Vuex from 'vuex'
+import axios from 'axios'
+
+import matestackEventHub from 'js/event-hub'
+
+import componentMixin from 'component/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('matestack-ui-core-action', componentDef)
+
+export default componentDef

data/app/concepts/matestack/ui/core/action/action.rb

@@ -0,0 +1,52 @@
+module Matestack::Ui::Core::Action
+  class Action < Matestack::Ui::Core::Component::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/matestack/ui/core/address/address.haml

@@ -0,0 +1,5 @@
+%address{@tag_attributes}
+  - if options[:text].nil? && block_given?
+    = yield
+  - else
+    = options[:text]