WIP 2.0 migration

Author: jonasjabari

Gemfile

@@ -9,9 +9,7 @@ gem 'redcarpet' # for markdown usage
 gem 'rouge' # for syntax highlighting
 
 gem 'bootsnap', require: false
-gem "trailblazer-cells"
-gem "cells-rails"
-gem "cells-haml"
+
 
 # Declare your gem's dependencies in matestack-ui-material.gemspec.
 # Bundler will treat runtime dependencies like base dependencies, and
@@ -25,6 +23,8 @@ gemspec
 
 gem 'rails', '6.1.2'
 
+gem 'matestack-ui-core', git: "https://github.com/matestack/matestack-ui-core", branch: "matestack-ui-core-2.0"
+
 gem 'rspec-rails', '~> 4.0.2'
 gem 'capybara'
 gem 'webpacker', '~> 5.0'

Gemfile.lock

@@ -1,8 +1,15 @@
+GIT
+  remote: https://github.com/matestack/matestack-ui-core
+  revision: 0bbd207c34dea89cc0056e4de563141ceb8aa284
+  branch: matestack-ui-core-2.0
+  specs:
+    matestack-ui-core (2.0.0)
+      rails (>= 5.2)
+
 PATH
   remote: .
   specs:
-    matestack-ui-bootstrap (1.4.0)
-      matestack-ui-core (~> 1.4.0)
+    matestack-ui-bootstrap (1.5.1)
 
 GEM
   remote: https://rubygems.org/
@@ -81,26 +88,12 @@ GEM
       rack-test (>= 0.6.3)
       regexp_parser (>= 1.5, < 3.0)
       xpath (~> 3.2)
-    cells (4.1.7)
-      declarative-builder (< 0.2.0)
-      declarative-option (< 0.2.0)
-      tilt (>= 1.4, < 3)
-      uber (< 0.2.0)
-    cells-haml (0.0.10)
-      cells (>= 4.0.1, <= 6.0.0)
-      haml (>= 4.1.0.beta.1)
-    cells-rails (0.1.3)
-      actionpack (>= 5.0)
-      cells (>= 4.1.6, < 5.0.0)
     childprocess (3.0.0)
     coderay (1.1.3)
     concurrent-ruby (1.1.8)
     crack (0.4.5)
       rexml
     crass (1.0.6)
-    declarative-builder (0.1.0)
-      declarative-option (< 0.2.0)
-    declarative-option (0.1.0)
     devise (4.7.3)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
@@ -117,9 +110,6 @@ GEM
       railties (>= 3.0.0)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
-    haml (5.2.1)
-      temple (>= 0.8.0)
-      tilt
     hashdiff (1.0.1)
     i18n (1.8.9)
       concurrent-ruby (~> 1.0)
@@ -130,12 +120,6 @@ GEM
       mini_mime (>= 0.1.1)
     marcel (0.3.3)
       mimemagic (~> 0.3.2)
-    matestack-ui-core (1.4.0)
-      cells-haml (>= 0.0.10)
-      cells-rails (>= 0.1.0)
-      haml (>= 4.1.0.beta.1)
-      rails (>= 5.2)
-      trailblazer-cells (>= 0.0.3)
     method_source (1.0.0)
     mimemagic (0.3.5)
     mini_mime (1.0.2)
@@ -248,14 +232,9 @@ GEM
       actionpack (>= 4.0)
       activesupport (>= 4.0)
       sprockets (>= 3.0.0)
-    temple (0.8.2)
     thor (1.1.0)
-    tilt (2.0.10)
-    trailblazer-cells (0.0.3)
-      cells (>= 4.1.0.rc1, < 5.0.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
-    uber (0.1.0)
     warden (1.2.9)
       rack (>= 2.0.9)
     webmock (3.11.2)
@@ -281,12 +260,11 @@ DEPENDENCIES
   bootsnap
   byebug
   capybara
-  cells-haml
-  cells-rails
   devise
   faker
   generator_spec
   matestack-ui-bootstrap!
+  matestack-ui-core!
   paper_trail
   pg (>= 0.18, < 2.0)
   pry-byebug
@@ -301,7 +279,6 @@ DEPENDENCIES
   rspec-wait
   selenium-webdriver
   simplecov
-  trailblazer-cells
   webmock
   webpacker (~> 5.0)
 

app/concepts/matestack/ui/bootstrap/components/accordion.rb

@@ -4,30 +4,30 @@ class Matestack::Ui::Bootstrap::Components::Accordion < Matestack::Ui::Component
   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, :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
     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" }
         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 +38,18 @@ def accordion_content_partial
   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.class
     end.join(' ').strip
   end
 end

app/concepts/matestack/ui/bootstrap/components/alert.js

@@ -1,6 +1,9 @@
 import * as bootstrap from 'bootstrap'
+import Vue from 'vue/dist/vue.esm'
 
-MatestackUiCore.Vue.component('matestack-ui-bootstrap-alert', {
+import MatestackUiCore from 'matestack-ui-core'
+
+Vue.component('matestack-ui-bootstrap-alert', {
   mixins: [MatestackUiCore.componentMixin],
 
   data() {

app/concepts/matestack/ui/bootstrap/components/alert.rb

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

app/concepts/matestack/ui/bootstrap/components/avatar.rb

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

app/concepts/matestack/ui/bootstrap/components/badge.rb

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

app/concepts/matestack/ui/bootstrap/components/breadcrumb.rb

@@ -1,14 +1,14 @@
 class Matestack::Ui::Bootstrap::Components::Breadcrumb < Matestack::Ui::Component
 
   optional :items # list of items  with path and text
-  optional class: { as: :bs_class} # adding custom class to breadcrumb list
+  optional :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
@@ -19,7 +19,7 @@ def response
             end
           end
         end
-        yield_components
+        yield
       end
     end
   end
@@ -29,20 +29,20 @@ def response
   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
 
   def breadcrumb_classes
     [].tap do |classes|
       classes << "breadcrumb"
-      classes << bs_class
+      classes << context.class
     end.join(' ').strip
   end
 end