Changing HAML template trailblazer/formular#63 (comment)

Gemfile

@@ -6,7 +6,7 @@ gem "sqlite3"
 gem "trailblazer", "1.1.0"  # operation
 #gem "dry-validation", "0.6.0"
 gem "cells"                     # presentation
-gem "cells-slim", ">= 0.0.4"
+gem "cells-haml"
 gem "trailblazer-cells"
 gem "reform",      "2.2.0"  # validation
 gem "dry-validation"#, "0.7.4"  # validation

Gemfile.lock

@@ -1,24 +1,22 @@
-PATH
-  remote: ../formular
-  specs:
-    formular (0.2.1)
-      declarative (~> 0.0.4)
-      uber (>= 0.0.11, < 0.2.0)
-
 GEM
   remote: https://rubygems.org/
   specs:
     bacon (1.2.0)
     benchmark-ips (2.6.1)
-    cells (4.1.1)
+    cells (4.1.7)
+      declarative-builder (< 0.2.0)
+      declarative-option (< 0.2.0)
       tilt (>= 1.4, < 3)
-      uber (>= 0.0.9)
-    cells-slim (0.0.5)
-      cells (>= 4.0.1, < 6.0.0)
-      slim (~> 3.0)
+      uber (< 0.2.0)
+    cells-haml (0.0.10)
+      cells (>= 4.0.1, <= 6.0.0)
+      haml (>= 4.1.0.beta.1)
     concurrent-ruby (1.0.2)
     declarative (0.0.8)
       uber (>= 0.0.15)
+    declarative-builder (0.1.0)
+      declarative-option (< 0.2.0)
+    declarative-option (0.1.0)
     disposable (0.3.2)
       declarative (>= 0.0.8, < 1.0.0)
       representable (>= 2.4.0, <= 3.1.0)
@@ -52,6 +50,12 @@ GEM
       dry-logic (~> 0.4, >= 0.4.0)
       dry-types (~> 0.9, >= 0.9.0)
     ffi (1.9.10)
+    formular (0.2.3)
+      declarative (~> 0.0.4)
+      uber (>= 0.0.11, < 0.2.0)
+    haml (5.0.4)
+      temple (>= 0.8.0)
+      tilt
     inflecto (0.0.2)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
@@ -82,12 +86,9 @@ GEM
       bacon
       sequel (>= 3.2.0)
       sinatra (>= 0.9.4)
-    slim (3.0.7)
-      temple (~> 0.7.6)
-      tilt (>= 1.3.3, < 2.1)
     sqlite3 (1.3.11)
-    temple (0.7.7)
-    tilt (2.0.4)
+    temple (0.8.0)
+    tilt (2.0.8)
     trailblazer (1.1.0)
       declarative
       reform (>= 2.0.0, < 3.0.0)
@@ -102,10 +103,10 @@ PLATFORMS
 DEPENDENCIES
   benchmark-ips
   cells
-  cells-slim (>= 0.0.4)
+  cells-haml
   dry-types
   dry-validation
-  formular!
+  formular
   reform (= 2.2.0)
   rerun
   sinatra
@@ -115,4 +116,4 @@ DEPENDENCIES
   trailblazer-cells
 
 BUNDLED WITH
-   1.13.6
+   1.16.5

README.md

@@ -1,3 +1,5 @@
+_Copied from Slim-bootstrap4 branch and converted to haml
+
 # Sinatra With Trailblazer
 
 _Cause We Can._
@@ -13,7 +15,7 @@ The following gems are used in this project.
 | Reform | Validation |
 | Dry-validation | Validation |
 | Cells | Presentation |
-| Slim | Presentation |
+| Haml | Presentation |
 | Formular| Form Rendering |
 
 ## Run

concepts/post/view/new.haml

@@ -0,0 +1,112 @@
+.row
+  .col-12.offset-sm-3
+    %h1.display-3.text-xs-center New Post!
+
+    = vertical_form(model.contract, url) do |f|
+      - capture_haml do
+        .row
+          .col-6
+            = f.input_group :title, label: "Title" do |input|
+              - capture_haml do
+                =input.group_addon('<input type="checkbox" value="1"/>')
+                =input.control
+          .col-6
+            = f.input :url_slug, label: "URL Slug"
+
+        = f.input_group :url_slug, label: "URL", left_addon: 'http://', right_addon: '.com'
+
+        = f.select :select_roles, label: "Roles", collection: roles_array
+
+        = f.inline_radio :select_roles, label: "Inline radios", collection: [[1, "Yes"], [2, "No"], [3, "I really don't know"]]
+
+        = f.inline_checkbox :select_roles, label: "Inline checkboxes", collection: options_array
+
+        = f.input :content, type: 'file', label: "File"
+
+
+        %hr
+        %h4 Checkboxes in columns!
+        .row
+          .col-sm-4
+            = f.checkbox :select_roles, label: "Column 1", collection: options_array
+          .col-sm-4
+            = f.checkbox :select_roles, label: "Column 2", collection: options_array
+          .col-sm-4
+            = f.checkbox :select_roles, label: "Column 3", collection: options_array
+        %hr
+
+        = f.textarea :content, placeholder: "And your story...", rows: 9
+
+        = f.checkbox :is_public, label: "Public?", value: "1"
+
+        %hr
+        %h4 Custom Controls
+
+        = f.custom_file :content, label: 'Custom File'
+
+        = f.custom_select :select_roles, label: "Custom Select", collection: roles_array
+
+        = f.custom_radio :select_roles, label: "Custom Inline radios", collection: options_array
+
+        = f.custom_checkbox :select_roles, label: "Custom Inline checkbox", collection: options_array
+
+        = f.custom_stacked_radio :select_roles, label: "Custom Stacked radios", collection: options_array
+
+        = f.custom_stacked_checkbox :select_roles, label: "Custom Stacked checkbox", collection: options_array
+
+        = f.submit content: "Submit!", class: ['btn-lg']
+
+%hr
+.row
+  .col-12.offset-sm-3
+    %h1.display-3.text-xs-center Inline Form
+
+    = inline_form(model.contract, url) do |f|
+      - capture_haml do
+        = f.input :title
+        = f.input :url_slug, label: 'url slug', placeholder: "URL slug", label_options: { class: ["sr-only"] }
+        = f.submit(content: "Submit!")
+
+    %hr
+
+    = inline_form(model.contract, url) do |f|
+      - capture_haml do
+        = f.custom_file :content, label: 'Attachment'
+        = f.submit(content: "Submit!")
+
+
+%hr
+.row
+  .col-12.offset-sm-3
+    %h1.display-3.text-xs-center Horizontal Form
+
+    = horizontal_form(model.contract, url) do |f|
+      - capture_haml do
+        = f.input_group :title, label: "Title" do |input|
+          - capture_haml do
+            = input.control
+            = input.group_btn("<a class='btn btn-secondary' href='#'>Suprise Me</a>")
+
+        = f.input :url_slug, label: 'URL'
+
+        = f.textarea :content, label: 'Content', placeholder: "And your story...", rows: 9
+
+        = f.inline_checkbox :select_roles, label: "Inline checkboxes", collection: options_array
+
+        = f.radio :select_roles, label: "Stacked radios", collection: options_array
+
+        = f.select :select_roles, label: 'Role', collection: roles_array
+
+        = f.custom_file :content, label: 'Custom File'
+
+        = f.custom_select :select_roles, label: "Custom Select", collection: roles_array
+
+        = f.custom_radio :select_roles, label: "Custom Inline radios", collection: options_array
+
+        = f.custom_checkbox :select_roles, label: "Custom Inline checkbox", collection: options_array
+
+        = f.custom_stacked_radio :select_roles, label: "Custom Stacked radios", collection: options_array
+
+        = f.custom_stacked_checkbox :select_roles, label: "Custom Stacked checkbox", collection: options_array
+
+        = f.submit content: "Submit!", class: ['btn-lg']

concepts/post/view/show.haml

@@ -0,0 +1,7 @@
+.page-header
+  %h1
+    %a.btn.btn-info{href: "/posts/#{model.id}/edit", style: "margin-right:10px;"} Edit
+    = title
+
+.content
+= content

config/init.rb

@@ -19,10 +19,10 @@
 require "trailblazer/operation"
 require "reform/form/dry"
 require "trailblazer/cells"
-require "cells-slim"
+require "cells-haml"
 
 Trailblazer::Cell.class_eval do
-  include Cell::Slim
+  include Cell::Haml
   self.view_paths = ["concepts"] # DISCUSS: is that the right place?
 end
 

gemgem/view/layout.haml

@@ -0,0 +1,29 @@
+!!!
+%html.no-js{:lang => "en"}
+  %head
+    %meta{:charset => "utf-8"}/
+    %meta{:content => "width=device-width, initial-scale=1, shrink-to-fit=no", :name => "viewport"}/
+    %meta{:content => "ie=edge", "http-equiv" => "x-ua-compatible"}/
+    %title Sinatra Sings Gemgem | Welcome
+    %link{:crossorigin => "anonymous", :href => "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css", :integrity => "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO", :rel => "stylesheet"}/
+    %link{:href => "/app.css", :rel => "stylesheet"}/
+  %body
+    .navbar.navbar-dark.bg-inverse.navbar-fixed-top
+      .container-fluid
+        %a.navbar-brand{:href => "#"} Trailblazer
+        %ul.nav.navbar-nav.pull-xs-right
+          / <li class="menu-text">Blog</li>
+          %li.nav-item
+            %a.nav-link{:href => "/posts/new"} New Post
+          %li.nav-item
+            %a.nav-link{:href => "/posts"} All
+    .container-fluid
+      .jumbotron
+        .text-xs-center
+          %h1.display-1 Sinatra and Trailblazer
+          %p Our blog about high-level architecture and awesome software.
+    .col-sm-6.col-sm-offset-3
+      = yield
+    %script{:crossorigin => "anonymous", :integrity => "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", :src => "https://code.jquery.com/jquery-3.3.1.slim.min.js"}
+    %script{:crossorigin => "anonymous", :integrity => "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49", :src => "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"}
+    %script{:crossorigin => "anonymous", :integrity => "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy", :src => "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"}