matestack-ui-core 0.7.5 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3b08e2fe0f19b178aa377ca1cac852e56f5faee7abdf5ec08f0738c1c11c5b59
-  data.tar.gz: b79c9bc5a5609a50b274a83103c23bc659cca9ae582b49c931b34c2921f723f0
+  metadata.gz: 8c8fd9950cf73a636c47c170d627b635886af1ef77cb59ded7829013ba2910fe
+  data.tar.gz: b4820552310262280b493560262a53cf7db44e883bbcd55ee79d6b4a691ddcbf
 SHA512:
-  metadata.gz: 668b12bb85128ca1cd306e256fa8e75159f1e1f62edc7af46807fcb2537ea090ac9aeafab3fddfc5f437e76dfcb522c3db4fb01997165795811770e0d16b216d
-  data.tar.gz: 1bac122005918a5c46b5526e3d619ddf9fd1371e15b664e6c5c64293656d1f2c9706f5fbbfb369eb355e875fe38f2e4f68f9165dc788661aa41ae0f1ac47a72c
+  metadata.gz: 4115ea15f05c3740e0d5673db4d86c443483fbcc20140ba8a2b8706dcbe0921ab10b8e4f393c3ffc6e4cf27ac3a79b5ad10adfceabcbb041a3bf21b69044b3ad
+  data.tar.gz: cb3cc79771d0ea3b4a28795a48baa43f8c94d2cfeabf25c8aec4ef7ca9be45e91bf92d89ae34cf7c31066e9f2a5a4b5c4c469c83078fc75a957d14542ff491c2

data/LICENSE

@@ -0,0 +1,8 @@
+Copyright (c) Matestack GmbH
+
+matestack-ui-core is an Open Source project licensed under the terms of
+the LGPLv3 license.  Please see <http://www.gnu.org/licenses/lgpl-3.0.html>
+for license text.
+
+Matestack will provide a commercial-friendly license allowing private forks
+and modifications of matestack-ui-core.  Please request at jonas@matestack.io

data/README.md

@@ -1,240 +1,52 @@
-![](https://github.com/matestack/matestack-ui-core/workflows/specs/badge.svg)
+[![Specs](https://github.com/matestack/matestack-ui-core/workflows/specs/badge.svg)](https://github.com/matestack/matestack-ui-core/actions)
 [![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)
-[![Docs](https://img.shields.io/badge/docs-matestack-blue.svg)](https://www.matestack.org/docs/install)
+[![Docs](https://img.shields.io/badge/docs-matestack-blue.svg)](https://docs.matestack.io)
+[![Twitter Follow](https://img.shields.io/twitter/follow/matestack.svg?style=social)](https://twitter.com/matestack) 
 
 ![matestack logo](./logo.png)
 
-# matestack: Escape the frontend hustle
+# matestack-ui-core
 
-## Create maintainable, dynamic and beautiful UIs easily
+## Escape the frontend hustle & easily create interactive web apps in pure Ruby
 
-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:
+`matestack-ui-core` is a Rails engine for Ruby on Rails developers.
+
+`matestack-ui-core` enables you to craft interactive web UIs without JavaScript in pure Ruby with minimum effort.
+UI code becomes a native and fun part of your Rails app.
+
+Work with pure Ruby. If necessary, extend with pure JavaScript. No Opal involved.
+
+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
+- Increased development speed and happiness, offering prebuilt UI-Components for typical 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
+`matestack-ui-core` 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.
 
-### Current State: 
-
-We love to see more and more people using and contributing to matestack-ui-core. Our current version is 0.7.4 and it's not perfect yet. We recommend you to start using matestack-ui-core in a side project and report issues as this helps us to push matestack-ui-core towards a production ready 1.0.0. At matestack, we already use matestack-ui-core in production as we know how to handle current issues and bypass them with deep insights of the core implementation. We plan to invest time and money (yes, we're hiring) on following improvements:
-
-* debugging and error handling
-* core refactoring, increased core maintainability and code quality
-* better integration in existing rails apps
-* improved documentation
-* improved dynamic core components (especially form components)
-
-
-### 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](https://www.matestack.org/docs/install)
-
-### Changelog
+## Features
 
-Changelog can be found [here](./CHANGELOG.md)
+Please have a look at our [landingpage](https://www.matestack.io), presenting the main features of `matestack-ui-core`
 
-### Roadmap
+## Documentation/Installation
 
-In order to see what we planned to add and release the upcoming months, just have a look at our future [milestones](https://github.com/basemate/matestack-ui-core/milestones) and get in touch via our [chat](https://gitter.im/basemate/community) for feedback! The upcoming issues and feature requests will be added to one of these milestones regarding priority and implementation effort.
+Documentation can be found [here](https://docs.matestack.io)
+
+## Changelog
+
+Changelog can be found [here](./CHANGELOG.md)
 
-### Community
+## 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
+## Contribution
 
-We are happy to accept contributors of any kind. Please refer to the [Contribution Guide](./docs/contribute)
+We are happy to accept contributors of any kind. Please refer to the [Contribution Guide](https://docs.matestack.io/docs/guides/1500-contribute/README.md)
 
-### License
-The gem is available as open source under the terms of the
-[MIT License](https://opensource.org/licenses/MIT).
+## License
+matestack-ui-core is an Open Source project licensed under the terms of the [LGPLv3 license](./LICENSE)

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

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

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

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

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

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

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

@@ -17,51 +17,132 @@ const componentDef = {
         (self.componentConfig["confirm"] == undefined) || confirm(self.componentConfig["confirm_text"])
       )
       {
-        axios({
+        if (self.componentConfig["emit"] != undefined) {
+          matestackEventHub.$emit(self.componentConfig["emit"]);
+        }
+        if (self.componentConfig["delay"] != undefined) {
+          setTimeout(function () {
+            self.sendRequest()
+          }, parseInt(self.componentConfig["delay"]));
+        } else {
+          this.sendRequest()
+        }
+      }
+    },
+    sendRequest: 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.componentConfig["success"]["transition"]["follow_response"] == undefined
-              ||
-              self.componentConfig["success"]["transition"]["follow_response"] === false
-            )
-            && self.$store != undefined
-          ) {
-            let path = self.componentConfig["success"]["transition"]["path"]
-            self.$store.dispatch('navigateTo', {url: path, backwards: false})
-            return;
-          }
-          if (self.componentConfig["success"] != undefined
-            && self.componentConfig["success"]["transition"] != undefined
-            && self.componentConfig["success"]["transition"]["follow_response"] === true
-            && self.$store != undefined
-          ) {
-            let path = response.data["transition_to"] || response.request.responseURL;
-            self.$store.dispatch('navigateTo', {url: path, backwards: false});
-            return;
-          }
-        })
-        .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})
-          }
-        })
-      }
+        }
+      )
+      .then(function(response){
+        if (self.componentConfig["success"] != undefined && self.componentConfig["success"]["emit"] != undefined) {
+          matestackEventHub.$emit(self.componentConfig["success"]["emit"], response.data);
+        }
+
+        // transition handling
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["transition"] != undefined
+          && (
+            self.componentConfig["success"]["transition"]["follow_response"] == undefined
+            ||
+            self.componentConfig["success"]["transition"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.componentConfig["success"]["transition"]["path"]
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["transition"] != undefined
+          && self.componentConfig["success"]["transition"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = response.data["transition_to"] || response.request.responseURL
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        // redirect handling
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["redirect"] != undefined
+          && (
+            self.componentConfig["success"]["redirect"]["follow_response"] == undefined
+            ||
+            self.componentConfig["success"]["redirect"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.componentConfig["success"]["redirect"]["path"]
+          window.location.href = path
+          return;
+        }
+        if (self.componentConfig["success"] != undefined
+          && self.componentConfig["success"]["redirect"] != undefined
+          && self.componentConfig["success"]["redirect"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = response.data["redirect_to"] || response.request.responseURL
+          window.location.href = path
+          return;
+        }
+      })
+      .catch(function(error){
+        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["emit"] != undefined) {
+          matestackEventHub.$emit(self.componentConfig["failure"]["emit"], error.response.data);
+        }
+        // transition handling
+        if (self.componentConfig["failure"] != undefined
+          && self.componentConfig["failure"]["transition"] != undefined
+          && (
+            self.componentConfig["failure"]["transition"]["follow_response"] == undefined
+            ||
+            self.componentConfig["failure"]["transition"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.componentConfig["failure"]["transition"]["path"]
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        if (self.componentConfig["failure"] != undefined
+          && self.componentConfig["failure"]["transition"] != undefined
+          && self.componentConfig["failure"]["transition"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = error.response.data["transition_to"] || response.request.responseURL
+          self.$store.dispatch('navigateTo', {url: path, backwards: false})
+          return;
+        }
+        // redirect handling
+        if (self.componentConfig["failure"] != undefined
+          && self.componentConfig["failure"]["redirect"] != undefined
+          && (
+            self.componentConfig["failure"]["redirect"]["follow_response"] == undefined
+            ||
+            self.componentConfig["failure"]["redirect"]["follow_response"] === false
+          )
+          && self.$store != undefined
+        ) {
+          let path = self.componentConfig["failure"]["redirect"]["path"]
+          window.location.href = path
+          return;
+        }
+        if (self.componentConfig["failure"] != undefined
+          && self.componentConfig["failure"]["redirect"] != undefined
+          && self.componentConfig["failure"]["redirect"]["follow_response"] === true
+          && self.$store != undefined
+        ) {
+          let path = error.response.data["redirect_to"] || response.request.responseURL
+          window.location.href = path
+          return;
+        }
+      })
     }
   }
 }