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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c4bb181fa03aec3eb151af547eec43d6f12f692c8cdfa0dfe70a6e963ede262
-  data.tar.gz: 24088d7379448e215604593de26c89d8a026bbef1054c7d3cb78e22f01803f22
+  metadata.gz: 137c2f647ff054f09a0579d87a69a8db93ee92b084f7d0c20c8113ed7d995345
+  data.tar.gz: de53377ab8eabb7e0b4600cbb08e5f9545b95c38d4880feb3626da5a8a5c6440
 SHA512:
-  metadata.gz: ee17b5c4423b505a5a6dacb837fe44987ce8fc26f1569314d7b7afbcdcb1c0feaadbf436ccf901583b94e9d1161f81ba99a6cab6237f48cd5854b685685fb1ca
-  data.tar.gz: 677a09c88813b82d2c2cbf32885f90845b0e3a24739c1fd3ebe0b371b8a2e2208df7a3b0cdb9d8b83368eb34480edc769250cc932dc5fb6c645a2de0896ce007
+  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,240 +1,52 @@
 ![](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://www.matestack.org/docs/install)
+[![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.
 
-### 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
+
+Documentation can be found [here](https://docs.matestack.io/docs/guides/install)
+
+## Changelog
+
+Changelog can be found [here](./CHANGELOG.md)
 
-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.
 
-### 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/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.rb

@@ -1,41 +1,45 @@
 module Matestack::Ui::Core::Action
   class Action < Matestack::Ui::Core::Component::Dynamic
+    vue_js_component_name 'matestack-ui-core-action'
+
+    optional :path, :success, :failure, :notify, :confirm, 
+      method: { as: :action_method }, params: { as: :action_params }
 
     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]
+      @component_config[:method] = action_method
+      @component_config[:success] = success
+      unless success.nil?
+        unless success[:transition].nil?
+          @component_config[:success][:transition][:path] = transition_path success
         end
-        unless options[:success][:redirect].nil?
-          @component_config[:success][:redirect][:path] = redirect_path options[:success]
+        unless success[:redirect].nil?
+          @component_config[:success][:redirect][:path] = redirect_path 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]
+      @component_config[:failure] = failure
+      unless failure.nil?
+        unless failure[:transition].nil?
+          @component_config[:failure][:transition][:path] = transition_path failure
         end
-        unless options[:failure][:redirect].nil?
-          @component_config[:failure][:redirect][:path] = redirect_path options[:failure]
+        unless failure[:redirect].nil?
+          @component_config[:failure][:redirect][:path] = redirect_path failure
         end
       end
-      if options[:notify].nil?
+      if notify.nil?
         @component_config[:notify] = true
       end
-      if @component_config[:confirm] = options[:confirm]
-        @component_config[:confirm_text] = options[:confirm].try(:[], :text) || "Are you sure?"
+      if @component_config[:confirm] = confirm
+        @component_config[:confirm_text] = confirm.try(:[], :text) || "Are you sure?"
       end
     end
 
     def action_path
       begin
-        if options[:path].is_a?(Symbol)
-          return ::Rails.application.routes.url_helpers.send(options[:path], options[:params])
+        if path.is_a?(Symbol)
+          return ::Rails.application.routes.url_helpers.send(path, action_params)
         else
-          return options[:path]
+          return path
         end
       rescue
         raise "Action path not found"

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@ import Vue from 'vue/dist/vue.esm'
 import VRuntimeTemplate from "v-runtime-template"
 import Vuex from 'vuex'
 import isNavigatingToAnotherPage from "./location"
+import matestackEventHub from '../js/event-hub'
 
 const componentDef = {
   props: ['appConfig', 'params'],
@@ -22,7 +23,9 @@ const componentDef = {
           pathName: self.currentPathName,
           search: self.currentSearch
         }, document.location)){
-        self.$store.dispatch("navigateTo", { url: document.location.pathname + document.location.search, backwards: true } );
+          matestackEventHub.$emit("page_loading_triggered", document.location.pathname + document.location.search);
+          this.$store.commit('setPageLoading', true);
+          self.$store.dispatch("navigateTo", { url: document.location.pathname + document.location.search, backwards: true } );
       }
     })
   },

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

@@ -1,75 +1,51 @@
 module Matestack::Ui::Core::App
-  class App < Trailblazer::Cell
-
+  # TODO: Similar to page, App doesn't need everything base offers atm
+  class App < Matestack::Ui::Core::Component::Base
     include Matestack::Ui::Core::Cell
     include Matestack::Ui::Core::ApplicationHelper
-    include Matestack::Ui::Core::ToCell
+    # include Matestack::Ui::Core::ToCell
     include Matestack::Ui::Core::HasViewContext
 
-    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 initialize(page_class, controller_instance, context)
+      super(nil, context: context)
 
-    def prepare
-      true
+      @page_class = page_class
+      @controller_instance = controller_instance
     end
 
-    def show(page_id, page_nodes, &block)
-      @page_id = page_id
-      @page_nodes = page_nodes
-      prepare
-      response
-      render(view: :app, &block)
+    def show
+      render :app
     end
 
-    def page_nodes
-      @page_nodes
+    # Default "response" for just rendering the page without a more
+    # sophisticated app being supplied
+    def response
+      page_content
     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"])
+    # new alternative method name to be used in app defentions
+    # slots may contain a loading state element will be rendered during form start to finish of a transition
+    def yield_page slots: {}
+      page_content_wrapper slots: slots do
+        add_child @page_class,
+                  controller_instance: @controller_instance,
+                  context: context
       end
     end
 
-    def partial(&block)
-      Matestack::Ui::Core::AppNode.build(self, &block)
+    def page_content slots: {}
+      yield_page slots: slots
     end
 
+
+    # def page_content loading_state_element_slot: nil
+    #   # TODO: Content probably needs/would benefit from a better name - like "DynamicWrapper" ?
+    #   context[:loading_state_element_slot] = loading_state_element_slot
+    #   add_child Matestack::Ui::Core::Page::Content, context: context do
+    #     add_child @page_class,
+    #               controller_instance: @controller_instance,
+    #               context: context
+    #   end
+    # end
   end
 end