voom-presenters 0.1.0

data/app/demo/components/layouts.pom

@@ -0,0 +1,44 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:layouts) do
+  helpers Demo::Helpers::IndentedGrid
+  
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    display 'Layouts'
+
+    display 'Grid'
+
+    grid do
+      (1..12).each do |size|
+        column 1, color:  :lightgray do
+          body '1'
+        end
+      end
+    end
+
+    grid do
+      (1..3).each do |size|
+        column 4, color: :lightgray do
+          body '4'
+        end
+      end
+    end
+
+    grid do
+      column 6, color: :lightgray do
+        body '6'
+      end
+      column 4, color: :lightgray do
+        body '4'
+      end
+      column 2, color: :lightgray do
+        body '2'
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/lists.pom

@@ -0,0 +1,124 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:lists) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  helpers do
+    def actors
+      [OpenStruct.new(name: "<strong>Bryan Cranston</strong>", episodes: 62, body: 'Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle.'),
+       OpenStruct.new(name: "Aaron Paul", episodes: 62, body: 'Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie'),
+       OpenStruct.new(name: "Bob Odenkirk", episodes: 62, body: 'Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul".'),
+       OpenStruct.new(name: "Giancarlo Esposito", episodes: 24, body: 'Giancarlo Giuseppe Alessandro Esposito played the role of Gustavo "Gus" Fring on the AMC shows Breaking Bad and Better Call Saul.')]
+    end
+  end
+
+  indented_grid do
+    display 'Lists'
+
+    headline 'Simple'
+    list do
+      actors.each do |actor|
+        line do
+          text actor.name
+        end
+      end
+    end
+
+    headline 'Simple with Separators'
+    list do
+      actors.each do |actor|
+        line do
+          text actor.name
+        end
+        separator unless actor == actors.last
+      end
+    end
+
+    headline 'Simple with Selected'
+    list do
+      actors.each do |actor|
+        line selected: actors.first == actor do
+          text actor.name
+        end
+      end
+    end
+
+
+    headline 'Icons'
+    list do
+      actors.each do |actor|
+        line do
+          text actor.name
+          icon :person
+        end
+      end
+    end
+
+
+    headline 'Avatars and actions'
+    list do
+      actors.each do |actor|
+        line do
+          text actor.name
+          avatar :person
+          action do
+            icon :star
+          end
+        end
+      end
+    end
+
+    headline 'Avatars and controls'
+    list do
+      actors.each_with_index do |actor, index|
+        line do
+          text actor.name
+          avatar :person
+          action do
+            case index%4
+              when 0
+                checkbox
+              when 1
+                radio_button
+              when 2
+                switch
+              when 3
+                icon_toggle :star
+            end
+          end
+        end
+      end
+    end
+
+    headline 'Two line'
+
+    list do
+      actors.each_with_index do |actor, index|
+        line do
+          text actor.name
+          avatar :person
+          info 'actor' if index == 0
+          action do
+            icon_toggle :star 
+          end
+          subtitle "#{actor.episodes} episodes"
+        end
+      end
+    end
+#
+# headline 'Three line'
+#
+# list do
+#   actors.each do |actor|
+#     line actor.name, avatar: :person do
+#       action icon: :star
+#       body actor.body
+#     end
+#   end
+# end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/menus.pom

@@ -0,0 +1,43 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:menus) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    display 'Menus'
+
+    grid do
+      column 1
+      column 5 do
+        card height: '300px' do
+          button icon: :more_vert do
+            menu do
+              item 'Some Action'
+              item 'Another Action'
+              divider
+              item 'Disabled Action', disabled: true
+              item 'Yet Another Action'
+            end
+          end
+        end
+      end
+      column 5 do
+        card height: '300px' do
+          button icon: :more_vert, position: :right do
+            menu  do
+              item 'Some Action'
+              item 'Another Action'
+              divider
+              item 'Disabled Action', disabled: true
+              item 'Yet Another Action'
+            end
+          end
+        end
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/nav/drawer.pom

@@ -0,0 +1,5 @@
+Voom::Presenters.define(:component_drawer) do
+  drawer 'Presenters Demo' do
+    attach :component_menu
+  end
+end

data/app/demo/components/nav/menu.pom

@@ -0,0 +1,15 @@
+Voom::Presenters.define('component_menu') do
+  helpers Voom::Presenters::Helpers::Inflector
+  menu side: :left do
+    %i(cards lists expansion_panels tables text_fields selects buttons fabs fabs_mini dialogs layouts headers drawers
+         footers menus toggles chips snackbar badges tooltips hidden_fields text_areas forms icons).sort.each do |comp|
+      item titleize(comp) do
+        event :click do
+          loads comp
+        end
+      end
+    end
+  end
+end
+
+

data/app/demo/components/selects.pom

@@ -0,0 +1,30 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:selects) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    display 'Select Fields'
+
+    form do
+      select do
+        label 'Text...'
+        option do
+          value 'value1'
+          text 'First value'
+        end
+        option do
+          value 'value2'
+          text 'Second value'
+        end
+        event :change do
+          snackbar 'item changed'
+        end
+      end
+    end
+    
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/snackbar.pom

@@ -0,0 +1,24 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:snackbar) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    title 'On Page'
+    body 'You can attach a snackbar on the server side and will render after load.'
+    snackbar 'Top Level Important Information!'
+
+    attach :snackbar_attached
+
+    title 'As Event'
+    button 'Show Snackbar', id: :show_snackbar do
+      event :click do
+        snackbar 'You clicked snackbar the button!'
+      end
+    end
+  end
+
+  attach :code, file: __FILE__
+end

data/app/demo/components/snackbar_attached.pom

@@ -0,0 +1,6 @@
+
+Voom::Presenters.define(:snackbar_attached) do
+  title 'In Attached'
+  body  'This can be done in an attached presenter as well'
+  snackbar 'Attached Snackbar Displayed!'
+end

data/app/demo/components/tables.pom

@@ -0,0 +1,39 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:tables) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  helpers do
+    def items
+      [
+          OpenStruct.new(material: 'Acrylic (Transparent)', quantity: 50, price: '$2.90'),
+          OpenStruct.new(material: 'Plywood (Birch)', quantity: 10, price: '$1.25'),
+          OpenStruct.new(material: 'Laminate (Gold on Blue)', quantity: 50, price: '$2.35')
+      ]
+    end
+  end
+
+  indented_grid do
+    display 'Tables'
+
+    table selectable: true do
+      header do
+        column 'Material'
+        column 'Quantity'
+        column 'Unit price'
+      end
+
+      items.each do |item|
+        row do
+          column item.material
+          column item.quantity
+          column item.price
+        end
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/text_areas.pom

@@ -0,0 +1,19 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:text_areas) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    display 'Text Areas'
+
+    headline 'Multiple line'
+
+    text_area name: :notes, rows: 3 do
+      label 'Text lines...'
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/text_fields.pom

@@ -0,0 +1,57 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:text_fields) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    display 'Text Fields'
+
+    headline 'Text'
+
+    text_field name: :text do
+      label 'Text...'
+    end
+
+    headline 'Password'
+
+    text_field name: :password, password: true do
+      label 'Password'
+    end
+
+    headline 'Numeric'
+
+    # Client side validation with hints
+    headline 'With Hints'
+    text_field name: :numeric do
+      label 'Number...'
+      pattern /-?[0-9]*(\.[0-9]+)?/
+      hint 'Input is not a number!'
+    end
+
+    headline 'With Errors'
+    text_field name: :guess_me do
+      label 'Guess a number...'
+      pattern /-?[0-9]*(\.[0-9]+)?/
+      value '7'
+      error 'Input is not a the right number!'
+    end
+
+    card do
+      display 'Field Level Events'
+      heading 'Text Fields'
+      body 'This demonstrates that a change event will submit the  field value to the event action. '\
+                 'This works with posts and replace actions'
+      text_field name: :myfield do
+        label 'Data to post'
+        event :change do
+          replaces :context_list, :context_list
+        end
+      end
+      attach :context_list
+    end
+    
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/toggles.pom

@@ -0,0 +1,29 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:toggles) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    display 'Toggles'
+
+    headline 'CHECKBOX'
+    checkbox
+    checkbox checked: true
+
+    headline 'RADIO BUTTON'
+    radio_button checked: true
+    radio_button
+
+    headline 'ICON TOGGLE'
+    icon_toggle 'format_bold', checked: true 
+    icon_toggle 'format_italic'
+
+    headline 'SWITCH'
+    switch checked: true
+    switch
+
+    attach :code, file: __FILE__
+  end
+end