matestack-ui-bootstrap 1.5.1 → 3.0.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a7cf311df5f9760370cf527d463e580cac4f999cedf373bf6ba33ba8d8afc13
-  data.tar.gz: 4bdff54a8b961262509c74e30f07cf3191e2e7991e9e076fc0c940cbfdedae2c
+  metadata.gz: abdcfa7de4dff11225bc3f28f07ebb516553f7bb926bd01c12a4b9017bbe0df8
+  data.tar.gz: 4efa8e3b466b0639168df39b658cd5af9bdea65cd73c58003de2da91f2adf65f
 SHA512:
-  metadata.gz: 7e3a79cab56e0a8fe5f06d9ee7898e9d834c3d00fe8cbf5cd24e0b5c6ed2fc4c576649668137a1edb9bf8fb37ecb6c3ec5a540f8185361340f0d145dd9cbc203
-  data.tar.gz: aad4fc9dc922d312db12038fae6fab1366b4b185bdcd091c28a18ebf6a119ae7bc6527eeb555207523abc6ccbb86f63e606909f4e6b291de140945bbfa97ec6f
+  metadata.gz: 4412fc41a8a72b77a31e0a5e878be49119bc4b69616c8864ac0681676976c703e6056ecac310b63d33a0afa7f3eeade7d84e625be919dacb3e6fe829e250c296
+  data.tar.gz: cff3304c99d9b35e4969deb675580f257b8c5a15a2f18b93d9120216a42f3e9bdbca3166b088fd7eebbad7a8c2eba121451cc8071482053cc2d9d1d01bd11c54

data/LICENSE

@@ -1,8 +1,20 @@
 Copyright (c) Matestack GmbH
 
-matestack-ui-bootstrap 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.
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
 
-Matestack will provide a commercial-friendly license allowing private forks
-and modifications of matestack-ui-bootstrap.  Please request at jonas@matestack.io
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -1,84 +1,60 @@
-# Matestack Ui Bootstrap
+[![Specs](https://github.com/matestack/matestack-ui-bootstrap/workflows/specs/badge.svg)](https://github.com/matestack/matestack-ui-bootstrap/actions)
+[![Discord](https://img.shields.io/discord/771413294136426496.svg)](https://discord.com/invite/c6tQxFG)
+[![Gem Version](https://badge.fury.io/rb/matestack-ui-bootstrap.svg)](https://badge.fury.io/rb/matestack-ui-bootstrap)
+[![Docs](https://img.shields.io/badge/docs-matestack-blue.svg)](https://docs.matestack.io/matestack-ui-bootstrap)
+[![Twitter Follow](https://img.shields.io/twitter/follow/matestack.svg?style=social)](https://twitter.com/matestack)
 
-**Docs and specs in progress, please wait for official release announcement before using this gem**
+![matestack logo](./logo.png)
 
-## Development
+# matestack-ui-bootstrap | beautiful, reactive UIs in pure Ruby
 
-### Dummy App
+As an extension for [`matestack-ui-core`](https://github.com/matestack/matestack-ui-core), `matestack-ui-bootstrap` ships all you need to build beautiful,
+reactive UIs in pure Ruby and smart CRUD components based on Bootstrap v5.
 
-**initial setup**
+----
 
-```shell
-docker-compose build dummy
-docker-compose run --rm dummy bash
-```
+`matestack-ui-core` enables you to craft maintainable web UIs in pure Ruby, skipping ERB and HTML. UI code becomes a native and fun part of your Rails app. Thanks to reactive core components, reactivity can be optionally added on top without writing JavaScript, just using a simple Ruby DSL.
 
-inside container:
+You end up writing 50% less code while increasing productivity, maintainability and developer happiness. Work with pure Ruby. If necessary, extend with pure JavaScript. No Opal involved.
 
-```shell
-bundle install
-yarn install
-cd spec/dummy
-bundle install
-npm install (npm and not yarn!)
-rails app:db:setup
-```
+----
 
-**dummy app start**
+`matestack-ui-core` does not have an opinion on styling. In contrast, `matestack-ui-bootstrap` ships all Bootstrap v5 components as Matestack UI components usable in pure Ruby. Additionally layout and CRUD components help you to build a beautiful web app meeting typical requirements of a data driven web app.
 
-on your host:
-```shell
-docker-compose up dummy
-```
+Don't think about styling anymore and just create admin or application UIs faster than ever before!
 
-and
+[<img src="https://img.youtube.com/vi/bwsVgCb97v0/0.jpg" width="350">](https://www.youtube.com/watch?v=bwsVgCb97v0)
 
-```shell
-docker-compose run --rm dummy sh -c "cd spec/dummy && ./bin/webpack --watch"
-```
+## Compatibility
 
-simultaneously to be able to visit the demo app on [localhost:3000](localhost:3000).
+### Ruby/Rails
 
-## Testing
+`matestack-ui-bootstrap` is tested against:
 
-**initial setup**
+- Rails 6.1.1 + Ruby 3.0.0
+- Rails 6.1.1 + Ruby 2.7.2
+- Rails 6.0.3.4 + Ruby 2.6.6
+- Rails 5.2.4.4 + Ruby 2.6.6
 
-```shell
-docker-compose build dummy
-docker-compose run --rm dummy bash
-```
+Rails versions below 5.2 are not supported.
 
-inside container:
+### Vue.js
 
-```shell
-bundle install
-yarn install
-cd spec/dummy
-bundle install
-npm install (npm and not yarn!)
-rails app:db:setup
-```
+`matestack-ui-bootstrap` requires Vue.js and Vuex for its reactivity features. Following version ranges are supported:
 
-**test run**
+- Vue.js ^2.6.0
+- Vuex ^3.6.0
 
-```shell
-docker-compose run --rm builder bash
+Vue 3 / Vuex 4 update is planned for Q2 2021.
 
-```
+## Documentation/Installation
 
-inside container:
+Documentation can be found [here](https://docs.matestack.io/matestack-ui-bootstrap)
 
-```shell
-bundle exec rspec spec/test
-```
+## Changelog
 
-## Release
+Changelog can be found [here](./CHANGELOG.md)
 
-```shell
-docker-compose run --rm builder
-gem bump ...
-gem release
-npm bump ...
-npm release
-git tag ...
-```
+## License
+
+`matestack-ui-bootstrap` is an Open Source project licensed under the terms of the [MIT license](./LICENSE)

data/lib/matestack/ui/bootstrap/base_component.rb

@@ -0,0 +1,11 @@
+require_relative "./registry"
+
+module Matestack
+  module Ui
+    module Bootstrap
+      class BaseComponent < Matestack::Ui::Component
+
+      end
+    end
+  end
+end

data/lib/matestack/ui/bootstrap/base_vue_js_component.rb

@@ -0,0 +1,11 @@
+require_relative "./registry"
+
+module Matestack
+  module Ui
+    module Bootstrap
+      class BaseVueJsComponent < Matestack::Ui::VueJsComponent  
+
+      end
+    end
+  end
+end

data/{app/concepts → lib}/matestack/ui/bootstrap/components/accordion.rb

@@ -1,33 +1,36 @@
-class Matestack::Ui::Bootstrap::Components::Accordion < Matestack::Ui::Component
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Accordion < Matestack::Ui::Bootstrap::BaseComponent
 
   # [ {header: { class, id, text, size, btn_variant, btn_class }, body: { class, text, multi } } ]
   optional :items # array with 2 Hashes: header and body
   optional :open
   optional :variant
-  optional attributes: { as: :bs_attrs }, class: { as: :bs_class }, id: { as: :bs_id }
+  optional :attributes, class: { as:  :bs_class }
+  optional :id
 
-  def setup
-    @accordion_id = (bs_id.present? ? bs_id : "matestack-accordion-#{SecureRandom.hex(3)}")
+  def prepare
+    @accordion_id = (context.id.present? ? context.id : "matestack-accordion-#{SecureRandom.hex(3)}")
   end
 
   def response
     div accordion_attributes do
-      accordion_content_partial if items.present?
-      yield_components
+      accordion_content_partial if context.items.present?
+      yield if block_given?
     end
   end
 
   protected
 
   def accordion_content_partial
-    items.each_with_index do | item, index |
+    context.items.each_with_index do | item, index |
       div class: "accordion-item" do
         heading class: "accordion-header #{item[:header][:class]}", id: (item[:header][:id] || "header-#{index}"), size: (item[:header][:size] || 2) do
           button class: "accordion-button", text:item[:header][:text],
             data: { "bs-toggle": "collapse", "bs-target": "#collapse-#{(item[:header][:id] || "header-#{index}") }" },
-            attributes: { "aria-expanded": "false", "aria-controls": "collapse-#{(item[:header][:id] || "header-#{index}")}", type: "button" }
+            "aria-expanded": "false", "aria-controls": "collapse-#{(item[:header][:id] || "header-#{index}")}", type: "button"
         end
-        bs_collapse class: "accordion-collapse #{ 'show' if open || item[:open] }", id: "collapse-#{(item[:header][:id] || "header-#{index}")}", labelledby: (item[:header][:id] || "header-#{index}"),
+        bs_collapse class: "accordion-collapse #{ 'show' if context.open || item[:open] }", id: "collapse-#{(item[:header][:id] || "header-#{index}")}", labelledby: (item[:header][:id] || "header-#{index}"),
           parent: @accordion_id, multi: (item[:body][:multi] || false) do
             div class: "accordion-body #{item[:body][:class]}" do
               plain item[:body][:text]
@@ -38,19 +41,18 @@ class Matestack::Ui::Bootstrap::Components::Accordion < Matestack::Ui::Component
   end
 
   def accordion_attributes
-    html_attributes.merge(
+    options.merge(
       id: @accordion_id,
-      class: accordion_classes,
-      attributes: bs_attrs
-    )
+      class: accordion_classes
+      ).merge(context.attributes || {})
   end
 
   def accordion_classes
     [].tap do |classes|
       classes << 'accordion'
-      classes << 'open' if open
-      classes << 'accordion-flush' if variant == :flush
-      classes << bs_class
+      classes << 'open' if context.open
+      classes << 'accordion-flush' if context.variant == :flush
+      classes << context.bs_class
     end.join(' ').strip
   end
 end

data/lib/matestack/ui/bootstrap/components/alert.js

@@ -0,0 +1,58 @@
+import * as bootstrap from 'bootstrap'
+
+import MatestackUiVueJs from 'matestack-ui-vuejs'
+
+const alertComponent = {
+  mixins: [MatestackUiVueJs.componentMixin],
+  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
+
+  data() {
+    return {
+      alertInstance: undefined,
+    };
+  },
+
+  methods: {
+    close: function (){
+      this.alertInstance.close()
+    },
+    dispose: function (){
+      this.alertInstance.dispose()
+      // this.alertInstance = new bootstrap.Alert(self.getElement())
+    }
+  },
+
+  mounted: function() {
+    const self = this
+    var alert = self.getElement()
+    self.alertInstance = new bootstrap.Alert(alert)
+  },
+
+  created: function() {
+    const self = this
+    // close_on event registration
+    if(self.props["close_on"] != undefined){
+      var close_events = self.props["close_on"].split(",")
+      close_events.forEach(close_event => MatestackUiVueJs.eventHub.$on(close_event.trim(), self.close));
+    }
+    // dispose_on event registration
+    if(self.props["dispose_on"] != undefined){
+      var dispose_events = self.props["dispose_on"].split(",")
+      dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$on(dispose_event.trim(), self.dispose));
+    }
+  },
+
+  beforeUnmount: function() {
+    const self = this
+    if(self.props["close_on"] != undefined){
+      var closen_events = self.props["close_on"].split(",")
+      closen_events.forEach(close_event => MatestackUiVueJs.eventHub.$off(close_event.trim(), self.close));
+    }
+    if(self.props["dispose_on"] != undefined){
+      var dispose_events = self.props["dispose_on"].split(",")
+      dispose_events.forEach(dispose_event => MatestackUiVueJs.eventHub.$off(dispose_event.trim(), self.dispose));
+    }
+  },
+}
+
+export default alertComponent

data/lib/matestack/ui/bootstrap/components/alert.rb

@@ -0,0 +1,43 @@
+require_relative "../base_vue_js_component"
+
+class Matestack::Ui::Bootstrap::Components::Alert < Matestack::Ui::Bootstrap::BaseVueJsComponent
+  vue_name "matestack-ui-bootstrap-alert"
+
+  optional :title, :variant, :dismissible, :animate, :title_size, class: { as:  :bs_class }
+  optional :close_on, :dispose_on # event names on which occourences we close or dispose the modal
+
+  def response
+    div alert_attributes do
+      heading context.title, size: (context.title_size || 4), class: 'alert-heading' if context.title
+      plain context.text if context.text
+      yield if block_given?
+      bs_close dismiss: "alert" if context.dismissible
+    end
+  end
+
+  protected
+
+  def vue_props
+    {}.tap do |props|
+      props[:close_on] = context.close_on
+      props[:dispose_on] = context.dispose_on
+    end
+  end
+
+  def alert_classes
+    classes = ['alert']
+    classes << "alert-#{context.variant || "primary"}"
+    classes << "alert-dismissible" if context.dismissible
+    classes << "fade show" if context.animate
+    classes << context.bs_class
+    classes.join(' ')
+  end
+
+  def alert_attributes
+    {}.tap do |attrs|
+      attrs[:class] = alert_classes,
+      attrs[:role] = :alert
+    end
+  end
+
+end

data/lib/matestack/ui/bootstrap/components/avatar.rb

@@ -0,0 +1,27 @@
+class Matestack::Ui::Bootstrap::Components::Avatar < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional :bg_variant, :text_variant, :img_path, :size, class: { as:  :bs_class }
+
+  def response
+    if context.text.present? && context.img_path.nil?
+      div class: "rounded-circle bg-#{context.bg_variant || 'primary'} text-#{context.text_variant || 'white'} text-center p-2 #{context.bs_class}",
+        style: "height: #{height}px; width: #{width}px; display: inline-block;" do
+        plain context.text
+      end
+    else
+      div class: "rounded-circle text-#{context.text_variant || 'white'} text-center p-2 #{context.bs_class}",
+        style: "height: #{height}px; width: #{width}px; display: inline-block; background-image: url(#{context.img_path}); background-size: contain;" do
+        plain context.text
+      end
+    end
+  end
+
+  def height
+    context.size || 40
+  end
+
+  def width
+    context.size || 40
+  end
+
+end

data/lib/matestack/ui/bootstrap/components/badge.rb

@@ -0,0 +1,32 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Badge < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional class: { as:  :bs_class }
+  optional :variant, :rounded, :visually_hidden
+
+  def response
+    span badge_attributes do
+      plain context.text if context.text
+      yield if block_given?
+    end
+    span context.visually_hidden, class: "visually-hidden" if context.visually_hidden.present?
+  end
+
+  protected
+
+  def badge_attributes
+    options.merge(
+      class: badge_classes
+    )
+  end
+
+  def badge_classes
+    [].tap do |classes|
+      classes << 'badge'
+      classes << (context.variant.present? ? "bg-#{context.variant}" : "bg-secondary")
+      classes << "rounded-pill" if context.rounded
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+end

data/{app/concepts → lib}/matestack/ui/bootstrap/components/breadcrumb.rb

@@ -1,17 +1,19 @@
-class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Component
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Bootstrap::BaseComponent
 
   optional :items # list of items  with path and text
-  optional class: { as: :bs_class} # adding custom class to breadcrumb list
+  optional class: { as:  :bs_class } # adding custom class to breadcrumb list
   optional :nav_class
 
   def response
-    nav class: nav_class, attributes: { 'aria-label': "breadcrumb" } do
+    nav class: context.nav_class, "aria-label": "breadcrumb" do
       ol breadcrumb_attributes do
-        items&.each_with_index do |item, index|
-          li link_attrs((items.size - 1) == index) do
+        context.items&.each_with_index do |item, index|
+          li link_attrs((context.items.size - 1) == index) do
             case item[:type]
             when :link
-              link item
+              a item
             when :transition
               transition item
             else
@@ -19,7 +21,7 @@ class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Componen
             end
           end
         end
-        yield_components
+        yield if block_given?
       end
     end
   end
@@ -29,12 +31,12 @@ class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Componen
   def link_attrs(last = false)
     {}.tap do |hash|
       hash[:class] = "breadcrumb-item #{'active' if last}"
-      hash[:attributes] = { 'aria-current': "page" } if last
+      hash[:"aria-current"] = "page" if last
     end
   end
 
   def breadcrumb_attributes
-    html_attributes.merge(
+    options.merge(
       class: breadcrumb_classes
     )
   end
@@ -42,7 +44,7 @@ class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Componen
   def breadcrumb_classes
     [].tap do |classes|
       classes << "breadcrumb"
-      classes << bs_class
+      classes << context.bs_class
     end.join(' ').strip
   end
 end

data/lib/matestack/ui/bootstrap/components/button.rb

@@ -0,0 +1,71 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::Button < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional :type, :variant, :size, :outline
+  optional :attributes, class: { as:  :bs_class }
+  optional :transition
+  optional :action
+  optional :onclick
+  optional :link
+
+  def response(&block)
+    if context.transition.present? && context.transition.is_a?(Hash)
+      transition button_attributes.merge(context.transition.merge({role: "button"})) do
+        inner_response(&block)
+      end
+    elsif context.action.present? && context.action.is_a?(Hash)
+      action button_attributes.merge(context.action.merge({role: "button"})) do
+        inner_response(&block)
+      end
+    elsif context.onclick.present? && context.onclick.is_a?(Hash)
+      onclick button_attributes.merge(context.onclick.merge({role: "button"})) do
+        inner_response(&block)
+      end
+    elsif context.link.present? && context.link.is_a?(Hash)
+      a button_attributes.merge(context.link.merge({role: "button"})) do
+        inner_response(&block)
+      end
+    else
+      button_response(&block)
+    end
+  end
+
+  def button_response(&block)
+    button button_attributes do
+      inner_response(&block)
+    end
+  end
+
+  def inner_response(&block)
+    plain context.text if context.text
+    yield if block_given?
+  end
+
+  protected
+
+  def button_attributes
+    options.tap do |opts|
+      opts[:type] = context.type || 'button'
+      opts[:class] = button_classes
+      opts.merge(context.attributes || {})
+    end
+  end
+
+  def button_classes
+    [].tap do |classes|
+      classes << 'btn'
+      # btn variants outlined or solid background
+      if context.outline
+        classes << "btn-outline-#{context.variant.to_s.gsub('_', '-') || 'primary'}"
+      else
+        classes << (context.variant ? "btn-#{context.variant.to_s.gsub('_', '-')}" : 'btn-primary')
+      end
+      # btn size
+      classes << "btn-#{context.size}" if context.size
+      # custom classes
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+end

data/lib/matestack/ui/bootstrap/components/button_group.rb

@@ -0,0 +1,36 @@
+require_relative "../base_component"
+
+class Matestack::Ui::Bootstrap::Components::ButtonGroup < Matestack::Ui::Bootstrap::BaseComponent
+
+  optional class: { as:  :bs_class }
+  optional :label
+  optional :toolbar, :size, :vertical
+
+  def response
+    div buttongroup_attributes do
+      yield if block_given?
+    end
+  end
+
+  protected
+
+  def buttongroup_attributes
+    attributes = {}.tap do |hash|
+      hash[:class] = buttongroup_classes
+      hash[:role] = "#{context.toolbar ? :toolbar : :group}"
+      hash[:"aria-label"] = context.label
+    end
+    options.merge(
+      attributes
+    )
+  end
+
+  def buttongroup_classes
+    [].tap do |classes|
+      classes << ("btn-#{context.toolbar ? :toolbar : :group}#{'-vertical' if context.vertical}")
+      classes << "btn-group-#{context.size}" if context.size.present?
+      classes << context.bs_class
+    end.join(' ').strip
+  end
+
+end