voom-presenters 0.2.0 → 2.0.0

data/app/demo/components/text_fields.pom

@@ -13,10 +13,23 @@ Voom::Presenters.define(:text_fields) do
       label 'Text...'
     end
 
-    title 'Password'
-
-    text_field name: :password, password: true do
-      label 'Password'
+    title 'Restricted Input'
+    grid do
+      column 3 do
+        text_field name: :password, password: true do
+          label 'Password'
+        end
+      end
+      column 3 do
+        text_field name: :upper, case_type: :upper do
+          label 'Upper Only'
+        end
+      end
+      column 3 do
+        text_field name: :lower, case_type: :lower do
+          label 'Lower Only'
+        end
+      end
     end
 
     headline 'Numeric'
@@ -28,15 +41,6 @@ Voom::Presenters.define(:text_fields) do
       hint 'Input should be a number!'
     end
 
-    title 'With Errors'
-    text_field name: :guess_me do
-      label 'Guess a number...'
-      pattern /-?[0-9]*(\.[0-9]+)?/
-      value '7'
-      error 'Input is not the right number!'
-    end
-
-
     title 'With Leading Icon'
     text_field name: :numeric do
       label 'Amount'
@@ -49,10 +53,32 @@ Voom::Presenters.define(:text_fields) do
       icon :remove_red_eye
     end
 
+    blank
+    card do
+      headline 'Client Side Validations'
+      body 'This demonstrates client side validations for text fields '
+      text_field id: :my_required_field, name: :field1, required: true do
+        label 'Data to post'
+        hint 'Hint: You must enter a valid number in the field above'
+        validation_error 'This is a custom validation error. This field is required and must be a number.'
+        pattern /-?[0-9]*(\.[0-9]+)?/
+      end
+      text_field name: :field2, required: true do
+        label 'More data to post'
+      end
+      button 'Submit' do
+        event :click do
+          posts '/_echo_'
+          snackbar 'Posted to _echo_'
+        end
+      end
+    end
+
+    blank
     card do
       headline 'Field Level Events'
       title 'Text Fields'
-      body 'This demonstrates that a change event will submit the  field value to the event action. '\
+      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'
@@ -62,7 +88,27 @@ Voom::Presenters.define(:text_fields) do
       end
       attach :context_list
     end
-    
+
+    blank
+    card do
+      form do
+        headline 'Form Level Events'
+        title 'Array of Text Fields'
+        text_field name: 'myfield[]' do
+          label 'Data to post'
+        end
+        text_field name: 'myfield[]' do
+          label 'More data to post'
+        end
+        button 'Submit' do
+          event :click do
+            posts '/_echo_'
+            snackbar 'Posted to _echo_'
+          end
+        end
+      end
+    end
+
     attach :code, file: __FILE__
   end
 end

data/app/demo/components/toggles.pom

@@ -18,8 +18,22 @@ Voom::Presenters.define(:toggles) do
     radio_button name: :radio, value: 'two', text: "Two"
 
     title 'ICON TOGGLE'
-    icon_toggle 'format_bold', checked: true
-    icon_toggle 'format_italic'
+
+    icon_toggle :format_italic do
+      tooltip 'toggle it - uses same icon'
+    end
+
+    icon_toggle :check_box_outline_blank, on_icon: :check_box do
+      tooltip 'toggle it - uses on and off icons'
+    end
+
+    icon_toggle :check_box_outline_blank, on_icon: :check_box, checked: true do
+      tooltip 'toggle it - already in a checked state'
+    end
+
+    icon_toggle :toggle_off, on_icon: :toggle_on, disabled: true do
+      tooltip 'Im disabled'
+    end
 
     title 'SWITCH'
     grid do
@@ -29,12 +43,19 @@ Voom::Presenters.define(:toggles) do
     end
     grid do
       column 6 do
-        switch
+        switch do
+          tooltip 'I will reset my state when clicked as a result of a failed event action'
+          event :click do
+            posts '_echo_', status: 500
+          end
+        end
       end
     end
     grid do
       column 6 do
-        switch disabled: true
+        switch disabled: true do
+          tooltip 'I am disabled'
+        end
       end
     end
     grid do
@@ -70,7 +91,17 @@ Voom::Presenters.define(:toggles) do
             replaces :context_list, :context_list
           end
         end
+        blank
+        body 'Toggle components (switches, checkboxes, and icon toggles)',
+             'can take `on_value` and `off_value` attributes to represent both states. ',
+             'The default is `"on"` and `nil`.'
+        switch name: :miller_lite, on_value: 'Great taste', off_value: 'Less filling' do
+          event :change do
+            replaces :context_list, :context_list
+          end
+        end
 
+        blank
         headline 'Posts in Form', level: 3
         body 'This demonstrates that a change event on **ANY** form input will send all the form inputs to the event action. '\
                  'This works with posts and replace actions'

data/app/demo/components/tooltips.pom

@@ -54,8 +54,10 @@ Voom::Presenters.define(:tooltips) do
     end
 
     headline 'Chips'
-    chip 'Hover over me' do
-      tooltip 'I have this tip!'
+    chipset do
+      chip 'Hover over me' do
+        tooltip 'I have this tip!'
+      end
     end
 
     headline 'Tables'
@@ -84,9 +86,11 @@ Voom::Presenters.define(:tooltips) do
     radio_button do
       tooltip 'select it'
     end
-    icon_toggle 'format_italic' do
-      tooltip 'toggle it'
+
+    icon_toggle :star_border, on_icon: :star do
+      tooltip 'toggle it - uses on and off icons'
     end
+
     switch do
       tooltip 'switch it'
     end

data/app/demo/components/unordered_list.pom

@@ -0,0 +1,81 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:unordered_lists) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Unordered Lists'
+  helpers do
+    def actors
+      [OpenStruct.new(name: "Bryan Cranston", 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
+
+    headline 'List with Default Bullets'
+    unordered_list do
+      actors.each do |actor|
+         list_item do
+          text actor.name
+        end
+      end
+    end
+
+    headline 'List with Numbers'
+    subtitle '_(Any valid `list-style` works)_'
+    unordered_list list_style: :decimal do
+      actors.each do |actor|
+        list_item do
+          text actor.name
+        end
+      end
+    end
+
+    headline 'Nested Lists'
+    unordered_list do
+      list_item do
+        text 'Breaking Bad'
+        unordered_list do
+          actors.each do |actor|
+            list_item {text actor.name}
+          end
+        end
+      end
+      list_item do
+        text 'The Wire'
+        unordered_list do
+          list_item { text 'Dominic West'}
+          list_item { text 'Wendell Pierce'}
+          list_item { text 'Michael K. Williams'}
+          list_item { text 'Sonja Sohn'}
+        end
+      end
+    end
+
+    headline 'List with Icons'
+    unordered_list do
+      list_item do
+        text 'Money'
+        icon :attach_money
+      end
+      list_item do
+        text 'No Money'
+        icon :money_off
+      end
+      list_item do
+        text 'Font Awesome'
+        icon 'fa-arrow-circle-right'
+      end
+      list_item do
+        text 'Cat'
+        icon 'fa-cat'
+      end
+    end
+
+  end
+
+end

data/app/demo/custom_css.pom

@@ -0,0 +1,37 @@
+require_relative 'helpers/indented_grid'
+
+Voom::Presenters.define(:custom_css) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+
+  page_title 'Custom CSS' do
+    icon :settings
+  end
+
+
+  indented_grid do
+    headline 'CSS', level: 1
+
+    body 'You can define custom CSS globally and for each namespace/presenter.'
+    blank
+    title 'Global CSS'
+    body 'Define global css in the file `public/presenters/global.css`. Styles defined here will be loaded after default styling.'
+
+    title 'Presenter CSS'
+    body 'Each `[namespace/]presenter` can have custom css.'
+    body 'Simply create a file `public/presenters/[namspace]/[presenter].css` that matches your namespace and presenter.'
+    body 'This page has a presenter css file that is located at: `public/presenters/custom_css.css`'
+
+    title 'Settings'
+    body 'You can set the default path to load css from using the following:'
+    body <<-HTML
+      ```
+        Voom::Presenters::Settings.configure do |config|
+          config.presenters.web_client.custom_css = 'public/presenters'
+        end
+    ```
+    HTML
+
+  end
+  attach :code, file: __FILE__
+end

data/app/demo/events/actions/autocomplete.pom

@@ -0,0 +1,32 @@
+Voom::Presenters.define(:autocomplete_action) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :events_drawer
+
+  indented_grid do
+
+    heading 'Autocomplete'
+    title 'Work In Progress'
+    body 'Provides a text field that when typed into will fetch a set of items to select base on what was typed.',
+         'Useful for providing search clues as the user types.',
+         'The search command returned should either be an array of text terms found,
+              or optionally an id that will also be submitted using the same name as plus `_id` as the text field.'
+
+
+    heading 'Search'
+    content id: :search_field do
+      text_field name: :search, full_width: false do
+        label 'Search Silicon Valley'
+        event :input do
+          autocomplete '/_search_'
+        end
+        event :change do
+          replaces :context_list, :context_list, title: 'Search Results'
+        end
+      end
+    end
+    attach :context_list, title: 'Search Results'
+  end
+
+  attach :code, file: __FILE__
+end

data/app/demo/events/actions/clear.pom

@@ -5,17 +5,19 @@ Voom::Presenters.define(:clear_action) do
 
   indented_grid do
     heading 'Clear'
-    body 'Allows you to clear an input control.',
+    body 'Allows you to clear a component.',
          'Takes the id of the element to clear.'
 
     text_field id: :input_to_clear do
       label 'Input to clear'
-      value 'Clear me'
+      value 'Value to clear'
     end
 
+    subtitle 'Text to clear', id: :text_to_clear
+
     button 'clear' do
       event :click do
-        clear :input_to_clear
+        clear :input_to_clear, :text_to_clear
       end
     end
   end

data/app/demo/events/actions/dialogs/discard.pom

@@ -0,0 +1,9 @@
+Voom::Presenters.define(:discard_dialog) do
+  dialog id: :discard_dialog do
+    title 'Discard unsaved changes?'
+    actions do
+      button :discard, id: :discard_button
+      button :cancel, type: :raised, id: :cancel_button
+    end
+  end
+end

data/app/demo/events/actions/dialogs/show_dialog.pom

@@ -3,7 +3,9 @@ Voom::Presenters.define(:show_dialog) do
     title "Show Dialog"
     body 'This is an example and event opening a dialog'
 
-    button 'Disabled action', disabled: true
-    button 'Close'
+    actions do
+      button 'Close'
+      button 'Disabled action', disabled: true
+    end
   end
 end

data/app/demo/events/actions/last_response.pom

@@ -0,0 +1,40 @@
+Voom::Presenters.define(:last_response_action) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :events_drawer
+
+  indented_grid do
+    heading 'Last Response'
+    body 'You can access the last response and forward its data to a snackbar or posts|updates|deletes|replaces|loads.'
+    title 'Posts'
+    button 'quote' do
+      event :click do
+        posts '_echo_', {quote: 'Compromise is the shared hypotenuse of the conjoined triangles of success.'}
+        posts '_echo_', echo: {quote: last_response.quote}, headers: {'X-Custom'=>'Boom!'}
+        snackbar last_response.echo.quote
+      end
+    end
+
+    title 'Replaces'
+    button 'replaces' do
+      event :click do
+        posts '_echo_', {quote: 'Compromise is the shared hypotenuse of the conjoined triangles of success.'}
+        replaces :replace_me, :replace_text, text: last_response.quote
+      end
+    end
+    attach :replace_text
+
+    blank
+    title "Loads another presesnter"
+    text "Will reload this page passing a value from the last response of another action"
+    text "Quote from last response: {c:blue}#{context.fetch(:quote, nil)}{/c}" unless context.fetch(:quote, nil).nil?
+    button 'Reloads this page' do
+      event :click do
+        posts '_echo_', {quote: 'Compromise is the shared hypotenuse of the conjoined triangles of success.'}
+        loads :last_response_action, reloaded: true, quote: last_response.quote
+      end
+    end
+    heading context['reloaded'] ? "Reloaded" : 'Loaded'
+  end
+  attach :code, file: __FILE__
+end

data/app/demo/events/actions/prompt_if_dirty.pom

@@ -0,0 +1,54 @@
+Voom::Presenters.define(:dirtyable_container) do
+  content id: :dirtyable_container do
+    grid do
+      column 6 do
+        text_field name: :a_text_field do
+          label 'Input'
+          value 'initial value'
+        end
+
+        button :save, type: :raised do
+          event :click do
+            snackbar 'Saved!'
+            replaces :dirtyable_container, :dirtyable_container
+          end
+        end
+        button :cancel do
+          event :click do
+            prompt_if_dirty :discard_dialog
+            replaces :dirtyable_container, :dirtyable_container
+          end
+        end
+      end
+    end
+  end
+end
+
+Voom::Presenters.define(:prompt_if_dirty_action) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :events_drawer
+  attach :discard_dialog
+
+  indented_grid do
+    heading 'Prompt if dirty'
+    body 'Allows you to prompt users to discard changes in fields which have unsaved changes.'
+    blank
+    body <<~MARKDOWN
+      Takes the ID of a dialog to display when one or more fields in the
+      closest container has changed.\n
+      Optionally takes an `input_tag` which has priority over the closest
+      container and can be used if no closest container is present.
+    MARKDOWN
+    blank
+    body <<~MARKDOWN
+      If the user dismisses the dialog (via the scrim or cancel button), the
+      actions following `prompt_if_dirty` are not executed.
+    MARKDOWN
+
+    blank
+    attach :dirtyable_container
+  end
+
+  attach :code, file: __FILE__
+end