matestack-ui-core 0.7.2.1 → 1.0.0.rc.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b3bd7218b6b3b52d1067a4fa2fd106015727de009605c01729e3322e8f84758e
-  data.tar.gz: f430886ab80ffb4ee2f3636e8bf6850603209b0cedc645be26dbb3a70efc6847
+  metadata.gz: 137c2f647ff054f09a0579d87a69a8db93ee92b084f7d0c20c8113ed7d995345
+  data.tar.gz: de53377ab8eabb7e0b4600cbb08e5f9545b95c38d4880feb3626da5a8a5c6440
 SHA512:
-  metadata.gz: 5dc3d7b7c132cdd3549f6bfdaccdad4e1bee8486e33349f15b8a3de9a340e144f90df262fd47fd7b8c68feb12c7efe52a722c124ac645c3115b95501eb80281d
-  data.tar.gz: ae82f681ba71b1787919abff1e80bec6a80b3a500d0a5f35bedbd9806b1c0a1493ab16fbf5a38ab655c9a476ae330d1ae9aea0b1c65de7f48201616e44d0dffa
+  metadata.gz: ca823a70552dc8f98f04517236ad16f9cc40ab1074f3a363f5b9276ca8fa706919b031c084da1d782bf6d2c4717cc67765f084a40c9f22ff79af53fc2b12f7cb
+  data.tar.gz: e4cd65cd6a80535193cd17a7249562c2c196929a0b9ba84684ecf9242bac3db49dc605fce3809596d27ca8870ee703d72aef4da8f69961d70f973de1a7870207

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,228 +1,52 @@
-[![CircleCI](https://circleci.com/gh/basemate/matestack-ui-core/tree/master.svg?style=shield)](https://circleci.com/gh/basemate/matestack-ui-core/tree/master)
+![](https://github.com/matestack/matestack-ui-core/workflows/specs/badge.svg)
 [![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://docs.matestack.io/docs/guides/install)
 
 ![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.
 
-### 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
+
+Documentation can be found [here](https://docs.matestack.io/docs/guides/install)
+
+## Changelog
+
+Changelog can be found [here](./CHANGELOG.md)
 
-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
+## 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/contribute)
 
-### 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/Rakefile

@@ -32,3 +32,35 @@ require 'rake/testtask'
 # end
 #
 # task default: :test
+
+task :webpack => 'webpack:build'
+
+namespace :webpack do
+  task :build => ['build:development', 'build:production']
+
+  namespace :build do
+    task :development => 'yarn:install' do
+      Bundler.with_unbundled_env do
+        sh "cd builder && bin/webpack"
+      end
+    end
+    task :production => 'yarn:install' do
+      Bundler.with_unbundled_env do
+        sh "cd builder && bin/rake webpacker:compile"
+      end
+    end
+  end
+
+  task :watch => 'yarn:install' do
+    Bundler.with_unbundled_env do
+      sh "cd builder && bin/webpack --watch"
+    end
+  end
+
+  namespace :yarn do
+    task :install do
+      sh "yarn install && cd builder && yarn install"
+    end
+  end
+end
+

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

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

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

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

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

@@ -2,9 +2,8 @@ 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'
+import matestackEventHub from '../js/event-hub'
+import componentMixin from '../component/component'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -13,31 +12,135 @@ const componentDef = {
   },
   methods: {
     perform: function(){
+      const self = this
+      if (
+        (self.componentConfig["confirm"] == undefined) || confirm(self.componentConfig["confirm_text"])
+      )
+      {
+        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')
+          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) {
+
+        // 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);
         }
-        if (self.componentConfig["failure"] != undefined && self.componentConfig["failure"]["transition"] != undefined && self.$store != undefined) {
+        // 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;
         }
       })
     }