matestack-ui-core 0.6.0 → 0.7.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6e54bd9269c669fa0d87f2052258961731162454a99417077e2102e5d391aee2
-  data.tar.gz: dbfb0a72d64c215d714c0340667e5f61c19fc0908875b5e1150be97c0c364f61
+  metadata.gz: 5c58a7c3107da2943a7443d50e8cf07ba1f379bc58b71a3f97d00700ad87773b
+  data.tar.gz: d76f2c74cd96afad0b6e4071c751c46122a294690e03f6006ec395e84af24637
 SHA512:
-  metadata.gz: b15dcdaa3f71f73c99adf5971ded4c558968c8e93f555e7b8593bf40a074ff7e72fbbff295ac939556aff71c29a1f439588445e01e74fc8af3406726139fb674
-  data.tar.gz: 767db8f8b1757b356178db83bba45da3427ba2195425670be4a0cc4912382ed2df6d9a19464d7d2d8dcfb805a000c2dca9962761de3966f525580839b06de77f
+  metadata.gz: e02c8a827ab68d86343df60902c2c245b9eff1374d3c2f77adbb050472270ad4858c0d9b0b0473dd06315c2f33f089e9237870d7cfe4f977c6e1d65145b4b4fa
+  data.tar.gz: 895b45ac12b0f494e5f40c3b5214884d28fb23657602d3b5c4f6637f6353817fda117898743f280dcfd7376aa508b4ae507cd28da6624e2a78fb77b9034d0542

data/README.md

@@ -1,8 +1,10 @@
 [![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
+# matestack: Escape the frontend hustle
 
 ## Create maintainable, dynamic and beautiful UIs easily
 
@@ -17,11 +19,15 @@ matestack can progressively replace the classic Rails-View-Layer. You are able t
 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 < Page::Cell::Page
+class Pages::MyPage < Matestack::Ui::Page
 
   def prepare
     @technologies = ["Rails", "Vue.js", "Trailblazer", "Rspec", "Capybara"]
@@ -42,7 +48,7 @@ end
 #### Create a Single Page Application without JavaScript
 
 ```ruby
-class Apps::MyApp < App::Cell::App
+class Apps::MyApp < Matestack::Ui::App
 
   def response
     components{
@@ -51,10 +57,10 @@ class Apps::MyApp < App::Cell::App
       end
       nav do
         transition path: :my_first_page_path do
-          button "Page 1"
+          button text: "Page 1"
         end
         transition path: :my_second_page_path do
-          button "Page 2"
+          button text: "Page 2"
         end
       end
       main do
@@ -70,7 +76,7 @@ end
 ```
 
 ```ruby
-class Pages::MyApp::MyFirstPage < Page::Cell::Page
+class Pages::MyApp::MyFirstPage < Matestack::Ui::Page
 
   def response
     components{
@@ -83,7 +89,7 @@ class Pages::MyApp::MyFirstPage < Page::Cell::Page
 end
 ```
 ```ruby
-class Pages::MyApp::MySecondPage < Page::Cell::Page
+class Pages::MyApp::MySecondPage < Matestack::Ui::Page
 
   def response
     components{
@@ -97,7 +103,7 @@ end
 ```
 #### Handle User Interaction dynamically without JavaScript
 ```ruby
-class Pages::MyPage < Page::Cell::Page
+class Pages::MyPage < Matestack::Ui::Page
 
   def response
     components {
@@ -127,7 +133,7 @@ end
 ```
 #### Handle User Input dynamically without JavaScript
 ```ruby
-class Pages::MyApp::MyFirstPage < Page::Cell::Page
+class Pages::MyApp::MyFirstPage < Matestack::Ui::Page
 
   def prepare
     @my_model = MyModel.new
@@ -167,7 +173,7 @@ end
 ```
 #### Websocket Integration without JavaScript
 ```ruby
-class Pages::MyPage < Page::Cell::Page
+class Pages::MyPage < Matestack::Ui::Page
 
   def prepare
     @comments = Comment.last(5)
@@ -199,7 +205,7 @@ ActionCable.server.broadcast("matestack_ui_core", {
 
 ### Documentation
 
-Documentation can be found [here](./docs)
+Documentation can be found [here](https://www.matestack.org/docs/install)
 
 ### Changelog
 
@@ -207,19 +213,11 @@ 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
-
+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
 
-TODO: Gitter
+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
 

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/{absolute/cell → matestack/ui/core/absolute}/absolute.rb

@@ -1,5 +1,5 @@
-module Absolute::Cell
-  class Absolute < Component::Cell::Static
+module Matestack::Ui::Core::Absolute
+  class Absolute < Matestack::Ui::Core::Component::Static
 
     def setup
       style = "position: absolute;"

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/{action/js → matestack/ui/core/action}/action.js

@@ -2,9 +2,9 @@ import Vue from 'vue/dist/vue.esm'
 import Vuex from 'vuex'
 import axios from 'axios'
 
-import matestackEventHub from 'core/js/event-hub'
+import matestackEventHub from 'js/event-hub'
 
-import componentMixin from 'component/js/component'
+import componentMixin from 'component/component'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -44,6 +44,6 @@ const componentDef = {
   }
 }
 
-let component = Vue.component('action-cell', componentDef)
+let component = Vue.component('matestack-ui-core-action', componentDef)
 
 export default componentDef

data/app/concepts/{action/cell → matestack/ui/core/action}/action.rb

@@ -1,5 +1,5 @@
-module Action::Cell
-  class Action < Component::Cell::Dynamic
+module Matestack::Ui::Core::Action
+  class Action < Matestack::Ui::Core::Component::Dynamic
 
     def setup
       @component_config[:action_path] = action_path

data/app/concepts/matestack/ui/core/actionview/dynamic.rb

@@ -0,0 +1,28 @@
+module Matestack::Ui::Core::Actionview
+  class Dynamic < Matestack::Ui::Core::Component::Dynamic
+
+    include ActionView::Helpers::ActiveModelHelper
+    include ActionView::Helpers::ActiveModelInstanceTag
+    include ActionView::Helpers::AssetTagHelper
+    include ActionView::Helpers::AssetUrlHelper
+    include ActionView::Helpers::AtomFeedHelper
+    include ActionView::Helpers::CacheHelper
+    include ActionView::Helpers::CaptureHelper
+    include ActionView::Helpers::CspHelper
+    include ActionView::Helpers::CsrfHelper
+    include ActionView::Helpers::DateHelper
+    include ActionView::Helpers::DebugHelper
+    include ActionView::Helpers::FormHelper
+    include ActionView::Helpers::FormOptionsHelper
+    include ActionView::Helpers::FormTagHelper
+    include ActionView::Helpers::JavaScriptHelper
+    include ActionView::Helpers::NumberHelper
+    include ActionView::Helpers::OutputSafetyHelper
+    include ActionView::Helpers::SanitizeHelper
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::TextHelper
+    include ActionView::Helpers::TranslationHelper
+    include ActionView::Helpers::UrlHelper
+
+  end
+end

data/app/concepts/matestack/ui/core/actionview/static.rb

@@ -0,0 +1,28 @@
+module Matestack::Ui::Core::Actionview
+  class Static < Matestack::Ui::Core::Component::Static
+
+    include ActionView::Helpers::ActiveModelHelper
+    include ActionView::Helpers::ActiveModelInstanceTag
+    include ActionView::Helpers::AssetTagHelper
+    include ActionView::Helpers::AssetUrlHelper
+    include ActionView::Helpers::AtomFeedHelper
+    include ActionView::Helpers::CacheHelper
+    include ActionView::Helpers::CaptureHelper
+    include ActionView::Helpers::CspHelper
+    include ActionView::Helpers::CsrfHelper
+    include ActionView::Helpers::DateHelper
+    include ActionView::Helpers::DebugHelper
+    include ActionView::Helpers::FormHelper
+    include ActionView::Helpers::FormOptionsHelper
+    include ActionView::Helpers::FormTagHelper
+    include ActionView::Helpers::JavaScriptHelper
+    include ActionView::Helpers::NumberHelper
+    include ActionView::Helpers::OutputSafetyHelper
+    include ActionView::Helpers::SanitizeHelper
+    include ActionView::Helpers::TagHelper
+    include ActionView::Helpers::TextHelper
+    include ActionView::Helpers::TranslationHelper
+    include ActionView::Helpers::UrlHelper
+
+  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]

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

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Address
+  class Address < Matestack::Ui::Core::Component::Static
+
+  end
+end

data/app/concepts/{app/view → matestack/ui/core/app}/app.haml

@@ -1,4 +1,4 @@
-%component{"is": "app-cell", "inline-template": true}
+%component{"is": "matestack-ui-core-app", "inline-template": true}
   %div{"class": "matestack_app"}
     - @cells.each do |key, cell|
       = cell.call(:show)

data/app/concepts/{app/js → matestack/ui/core/app}/app.js

@@ -22,6 +22,6 @@ const componentDef = {
   }
 }
 
-let component = Vue.component('app-cell', componentDef)
+let component = Vue.component('matestack-ui-core-app', componentDef)
 
 export default componentDef

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

@@ -0,0 +1,74 @@
+module Matestack::Ui::Core::App
+  class App < Trailblazer::Cell
+
+    include ::Cell::Haml
+    include Matestack::Ui::Core::ApplicationHelper
+    include Matestack::Ui::Core::ToCell
+
+    view_paths << "#{Matestack::Ui::Core::Engine.root}/app/concepts"
+
+    extend ViewName::Flat
+
+    def self.prefixes
+      _prefixes = super
+      modified_prefixes = _prefixes.map do |prefix|
+        prefix_parts = prefix.split("/")
+
+        if prefix_parts.last.include?(self.name.split("::")[-1].downcase)
+          prefix_parts[0..-2].join("/")
+        else
+          prefix
+        end
+
+      end
+
+      return modified_prefixes
+    end
+
+    def self.views_dir
+      return ""
+    end
+
+    def initialize(model=nil, options={})
+      super
+      @nodes = {}
+      @cells = {}
+      @page_block = nil
+      @page_id = ""
+      setup
+    end
+
+    def setup
+      true
+    end
+
+    def prepare
+      true
+    end
+
+    def show(page_id, page_nodes, &block)
+      @page_id = page_id
+      @page_nodes = page_nodes
+      prepare
+      response
+      render(view: :app, &block)
+    end
+
+    def page_nodes
+      @page_nodes
+    end
+
+    def components(&block)
+      @nodes = Matestack::Ui::Core::AppNode.build(self, &block)
+
+      @nodes.each do |key, node|
+        @cells[key] = to_cell(key, node["component_name"], node["config"], node["argument"], node["components"], nil, node["cached_params"])
+      end
+    end
+
+    def partial(&block)
+      Matestack::Ui::Core::AppNode.build(self, &block)
+    end
+
+  end
+end

data/app/concepts/{app/js → matestack/ui/core/app}/store.js

@@ -1,8 +1,7 @@
 import Vue from 'vue/dist/vue.esm'
 import Vuex from 'vuex'
 import axios from 'axios'
-
-import matestackEventHub from 'core/js/event-hub'
+import matestackEventHub from 'js/event-hub'
 
 Vue.use(Vuex)
 

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

@@ -0,0 +1 @@
+%area{@tag_attributes}

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

@@ -0,0 +1,18 @@
+module Matestack::Ui::Core::Area
+  class Area < Matestack::Ui::Core::Component::Static
+    def setup
+      @tag_attributes.merge!({
+        alt: options[:alt],
+        coords: options[:coords].join(','),
+        download: options[:download],
+        href: options[:href],
+        hreflang: options[:hreflang],
+        media: options[:media],
+        rel: options[:rel],
+        shape: options[:shape],
+        target: options[:target],
+        type: options[:type]
+      })
+    end
+  end
+end

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

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

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

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Article
+  class Article < Matestack::Ui::Core::Component::Static
+
+  end
+end

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

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

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

@@ -0,0 +1,5 @@
+module Matestack::Ui::Core::Aside
+  class Aside < Matestack::Ui::Core::Component::Static
+
+  end
+end

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

@@ -0,0 +1,2 @@
+%div{@tag_attributes}
+  = yield

data/app/concepts/{async/js → matestack/ui/core/async}/async.js

@@ -1,8 +1,6 @@
 import Vue from 'vue/dist/vue.esm'
-
-import matestackEventHub from 'core/js/event-hub'
-
-import componentMixin from 'component/js/component'
+import matestackEventHub from 'js/event-hub'
+import componentMixin from 'component/component'
 
 const componentDef = {
   mixins: [componentMixin],
@@ -18,8 +16,16 @@ const componentDef = {
   methods: {
     show: function(event_data){
       const self = this
+      if (this.showing === true){
+        return
+      }
       this.showing = true
       this.event.data = event_data
+      if(this.componentConfig["defer"] != undefined){
+        if(!isNaN(this.componentConfig["defer"])){
+          this.startDefer()
+        }
+      }
       if(this.componentConfig["hide_after"] != undefined){
         self.hide_after_timeout = setTimeout(function () {
           self.hide()
@@ -29,6 +35,12 @@ const componentDef = {
     hide: function(){
       this.showing = false
       this.event.data = {}
+    },
+    startDefer: function(){
+      const self = this
+      setTimeout(function () {
+        self.rerender()
+      }, parseInt(this.componentConfig["defer"]));
     }
   },
   created: function () {
@@ -39,7 +51,14 @@ const componentDef = {
     if(this.componentConfig["show_on"] != undefined){
       this.showing = false
     }
-    if(this.componentConfig["hide_on"] != undefined){
+    if(this.componentConfig["defer"] != undefined){
+      if(!isNaN(this.componentConfig["defer"])){
+        if (this.componentConfig["show_on"] == undefined){
+          this.startDefer()
+        }
+      }
+    }
+    if(this.componentConfig["init_show"] == true){
       this.showing = true
     }
   },
@@ -52,6 +71,6 @@ const componentDef = {
   },
 }
 
-let component = Vue.component('async-cell', componentDef)
+let component = Vue.component('matestack-ui-core-async', componentDef)
 
 export default componentDef