matestack-ui-core 0.7.3 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c58a7c3107da2943a7443d50e8cf07ba1f379bc58b71a3f97d00700ad87773b
-  data.tar.gz: d76f2c74cd96afad0b6e4071c751c46122a294690e03f6006ec395e84af24637
+  metadata.gz: 1bbd88f77c5019a6699a9a82333d487e93b9227830979c83fbe5a97578b562a2
+  data.tar.gz: accec85e48b4aa52911ed79228769d1ba334cd3130abd814e7d64881b4843863
 SHA512:
-  metadata.gz: e02c8a827ab68d86343df60902c2c245b9eff1374d3c2f77adbb050472270ad4858c0d9b0b0473dd06315c2f33f089e9237870d7cfe4f977c6e1d65145b4b4fa
-  data.tar.gz: 895b45ac12b0f494e5f40c3b5214884d28fb23657602d3b5c4f6637f6353817fda117898743f280dcfd7376aa508b4ae507cd28da6624e2a78fb77b9034d0542
+  metadata.gz: ee4361ea62af4c518280cbcbd5c42a61a792e0661a9d8105a65c4fde7ea4f7806d1decc2fb2fb51eef151b9814b167d4d1558de23b9bdac3bcf0751d58fb4bda
+  data.tar.gz: 61dafe375a166c367264a4b29604f584d1d5514441c434e59245a6b54d73c4028b709aafc74b9111473c6a9e5854b57c4ead9930a5bbe4e713b833e63abc6aaa

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)
+[![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://docs.matestack.io/docs/guides/1-installation/README.md)
+[![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.
 
-### Installation:
-
-Click here to see how you can add Matestack UI to your existing Rails application: [Installation Guide](https://www.matestack.org/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
 
-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!
+Documentation can be found [here](https://docs.matestack.io/docs/guides/1-installation/README.md)
+
+## 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/13-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/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?
+%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

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