voom-presenters 0.1.0

data/app/demo/components/tooltips.pom

@@ -0,0 +1,120 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:tooltips) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+
+  indented_grid do
+    display 'Tooltips'
+
+    headline 'Avatars'
+    subheading 'Cards'
+    card do
+      media do
+        avatar 'img/demo/rx.png' do
+          tooltip "Ill be back", position: :right
+        end
+      end
+    end
+
+    card do
+      media do
+        avatar :person do
+          tooltip "Ill be back", position: :right
+        end
+      end
+    end
+
+    subheading 'Lists (**Help Wanted**)'
+    list do
+      line do
+        text 'Terminator2'
+        avatar 'img/demo/rx.png' do
+          tooltip "I'll be back - not working", position: :right
+        end
+      end
+      line do
+        text 'Terminator3'
+        avatar :person do
+          tooltip "I'll be back - not working", position: :right
+        end
+      end
+    end
+
+    headline 'Buttons'
+
+    button 'Button', type: :raised do
+      tooltip "Yo\nsmile" # position: :left
+    end
+    button 'Button' do
+      tooltip "Yo\nsmile", position: :bottom
+    end
+    button icon: :mood do
+      tooltip "Yo\nsmile", position: :top
+    end
+
+    headline 'Chips'
+    chip 'Hover over me' do
+      tooltip 'I have this tip!'
+    end
+
+    headline 'Tables'
+
+    table selectable: true do
+      header do
+        column 'Material'
+        column 'Quantity' do
+          tooltip 'This is the quantity on hand.', position: :top
+        end
+        column 'Unit price'
+      end
+
+      row do
+        column 'Caulk' do
+          tooltip 'This fixes leaks', position: :right
+        end
+        column 99
+        column "$299"
+      end
+    end
+
+
+    headline 'Toggles'
+
+    radio_button do
+      tooltip 'select it'
+    end
+    icon_toggle 'format_italic' do
+      tooltip 'toggle it'
+    end
+    switch do
+      tooltip 'switch it'
+    end
+    checkbox do
+      tooltip 'check it'
+    end
+
+
+    display 'Styles'
+
+    display 'Typography', level: 4 do
+      tooltip 'I do nothing.'
+    end
+
+    headline 'Headline' do
+      tooltip 'I do nothing.'
+    end
+    title 'Title' do
+      tooltip 'I do nothing.'
+    end
+    subheading 'Subheading 2', level: 2 do
+      tooltip 'I do nothing.'
+    end
+    body 'Body 2 text, calling something out.', level: 2 do
+      tooltip 'I do nothing.'
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/event/actions.rb

@@ -0,0 +1,86 @@
+Voom::Presenters.define(:event_actions) do
+  attach :top_nav
+  attach :events_drawer
+
+  grid do
+      column 1
+      column 11 do
+        heading 'Events'
+
+        subheading 'Dialog'
+        button 'dialog' do
+          event :click do
+            dialog :my_dialog
+          end
+        end
+        attach :show_dialog
+
+        subheading 'Replaces'
+        button 'replaces' do
+          event :click do
+            replaces :replace_me, :replace_text, text: "I was replaced"
+          end
+        end
+        attach :replace_text
+
+        subheading 'Toggle Visibility'
+        button 'toggle visiblity' do
+          event :click do
+            toggle_visiblity :toggle_me
+          end
+        end
+        heading 'Sometimes I appear', id: :toggle_me
+
+        subheading 'Snackbar'
+        button 'snackbar' do
+          event :click do
+            snackbar 'I want a snack!'
+          end
+        end
+
+        subheading context['reloaded'] ? "Reloaded" : 'Loads'
+        button 'loads' do
+          event :click do
+            loads :events, reloaded: true
+          end
+        end
+        heading context['reloaded'] ? "Reloaded" : 'Loaded'
+
+        title "A Note on errors:"
+        body ['These will display an error. Errors are displayed in four locations.',
+              '1. Field/input level errors will display on the field/input.',
+              '2. By default all content blocks will display errors. Use `show_errors=false` to turn this off on a block',
+              '3. At the top of all forms.',
+              '4. At the top of the page'], level: 2
+
+        subheading 'Update'
+        body 'issues a PUT to the passed path'
+        content do
+          button 'updates' do
+            event :click do
+              updates 'updatepath', {optional: :params}
+            end
+          end
+        end
+
+        subheading 'Delete'
+        body 'issues a DELETE to the passed path'
+        content do
+          button 'deletes' do
+            event :click do
+              deletes 'deletepath', {optional: :params}
+            end
+          end
+          subheading 'Posts'
+          body "issues a POST to the passed path\nAlias: creates"
+          content shows_errors: false do
+            button 'posts' do
+              event :click do
+                posts 'postpath', {optional: :params}
+              end
+            end
+          end
+        end
+      end
+    end
+  end

data/app/demo/event/actions/dialog/show_dialog.pom

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

data/app/demo/event/actions/dialog/trigger.pom

@@ -0,0 +1,86 @@
+Voom::Presenters.define(:trigger_dialog) do
+  attach :top_nav
+  attach :events_drawer
+
+  grid do
+    column 1
+    column 11 do
+      heading 'Events'
+
+      subheading 'Dialog'
+      button 'dialog' do
+        event :click do
+          dialog :my_dialog
+        end
+      end
+      attach :show_dialog
+
+      subheading 'Replaces'
+      button 'replaces' do
+        event :click do
+          replaces :replace_me, :replace_text, text: "I was replaced"
+        end
+      end
+      attach :replace_text
+
+      subheading 'Toggle Visibility'
+      button 'toggle visiblity' do
+        event :click do
+          toggle_visiblity :toggle_me
+        end
+      end
+      heading 'Sometimes I appear', id: :toggle_me
+
+      subheading 'Snackbar'
+      button 'snackbar' do
+        event :click do
+          snackbar 'I want a snack!'
+        end
+      end
+
+      subheading context['reloaded'] ? "Reloaded" : 'Loads'
+      button 'loads' do
+        event :click do
+          loads :events, reloaded: true
+        end
+      end
+      heading context['reloaded'] ? "Reloaded" : 'Loaded'
+
+      title "A Note on errors:"
+      body ['These will display an error. Errors are displayed in four locations.',
+            '1. Field/input level errors will display on the field/input.',
+            '2. By default all content blocks will display errors. Use `show_errors=false` to turn this off on a block',
+            '3. At the top of all forms.',
+            '4. At the top of the page'], level: 2
+
+      subheading 'Update'
+      body 'issues a PUT to the passed path'
+      content do
+        button 'updates' do
+          event :click do
+            updates 'updatepath', {optional: :params}
+          end
+        end
+      end
+
+      subheading 'Delete'
+      body 'issues a DELETE to the passed path'
+      content do
+        button 'deletes' do
+          event :click do
+            deletes 'deletepath', {optional: :params}
+          end
+        end
+        subheading 'Posts'
+        body "issues a POST to the passed path\nAlias: creates"
+        content shows_errors: false do
+          button 'posts' do
+            event :click do
+              posts 'postpath', {optional: :params}
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/demo/event/actions/nav/drawer.pom

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

data/app/demo/event/actions/nav/menu.pom

@@ -0,0 +1,19 @@
+Voom::Presenters.define(:event_actions_menu) do
+  helpers Voom::Presenters::Helpers::Inflector
+  menu side: :left do
+    item 'Back', icon: :back do
+      event :click do
+        loads :events
+      end
+    end
+    %i(dialog).sort.each do |action|
+        item titleize(action) do
+          event :click do
+            loads "trigger_#{action}"
+          end
+        end
+      end
+  end
+end
+
+

data/app/demo/event/autocomplete.pom

@@ -0,0 +1,27 @@
+Voom::Presenters.define(:autocomplete) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+
+  indented_grid do
+    heading 'Search'
+
+    content id: :search_field do
+      text_field name: :search, full_width: false do
+        label 'Find waldo'
+        # icon :close do
+        #   event :click do
+        #     replaces :search_field, :search_field
+        #   end
+        # end
+        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
+
+end

data/app/demo/event/field_level.pom

@@ -0,0 +1,22 @@
+Voom::Presenters.define(:field_level_events) do
+  attach :top_nav
+
+  grid do
+    column 1
+    column 4 do
+      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
+    end
+  end
+end

data/app/demo/event/form_level.pom

@@ -0,0 +1,26 @@
+Voom::Presenters.define(:form_level_events) do
+  attach :top_nav
+  
+  grid do
+    column 1
+    column 4 do
+      card do
+        display 'Posts in Form'
+        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'
+        form do
+          text_field name: :myfield do
+            label 'Data to post'
+          end
+          text_field name: :myfield2 do
+            label 'More Data to post'
+          end
+          event :change do
+            replaces  :context_list, :context_list
+          end
+        end
+        attach :context_list
+      end
+    end
+  end
+end

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

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

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

@@ -0,0 +1,14 @@
+Voom::Presenters.define(:events_menu) do
+  helpers Voom::Presenters::Helpers::Inflector
+  menu side: :left do
+    %i(event_actions field_level form_level).sort.each do |comp|
+      item titleize(comp) do
+        event :click do
+          loads comp
+        end
+      end
+    end
+  end
+end
+
+

data/app/demo/event/new_text.pom

@@ -0,0 +1,6 @@
+Voom::Presenters.define(:replace_text) do
+
+  content id: :replace_me do
+    display context['text'] ? "#{context['text']} on #{Time.now}" : "Orignal text"
+  end
+end

data/app/demo/events.pom

@@ -0,0 +1,98 @@
+require_relative 'helpers/indented_grid'
+
+Voom::Presenters.define(:events) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :events_drawer
+
+
+  indented_grid do
+    heading 'Events'
+    body 'Events are able to be attached to most components. ',
+         'Common examples include `click` and `change` events. ',
+         "To see how an individual component handles events, visit the [component page](#{presenters_path(:components)})"
+
+    subheading 'Dialog'
+    button 'dialog' do
+      event :click do
+        dialog :my_dialog
+      end
+    end
+    attach :show_dialog
+
+    subheading 'Replaces'
+    button 'replaces' do
+      event :click do
+        replaces :replace_me, :replace_text, text: "I was replaced"
+      end
+    end
+    attach :replace_text
+
+    subheading 'Toggle Visibility'
+    button 'toggle visiblity' do
+      event :click do
+        toggle_visiblity :toggle_me
+      end
+    end
+    heading 'Sometimes I appear', id: :toggle_me
+
+    subheading 'Snackbar'
+    button 'snackbar' do
+      event :click do
+        snackbar 'I want a snack!'
+      end
+    end
+
+    subheading context['reloaded'] ? "Reloaded" : 'Loads'
+    button 'loads' do
+      event :click do
+        loads :events, reloaded: true
+      end
+    end
+    heading context['reloaded'] ? "Reloaded" : 'Loaded'
+
+    title "A Note on errors:"
+    body 'The following event actions will display an error.',
+         nil,
+         'Errors are automatically displayed in the following locations.',
+         '1. Field/input level errors will display on the field/input.',
+         '1. At the top of all forms.',
+         '1. At the top of all dialogs.',
+         '1. At the top of all cards.',
+         '1. At the top of content blocks if they turn on show_errors.',
+         '1. At the top of the page', level: 2
+
+    body 'The closest error element will be used.'\
+          'If you want to control where errors appear. Use the attribute `show_errors=(true|false)`'
+
+
+    subheading 'Update'
+    body 'issues a PUT to the passed path'
+    content shows_errors: true do
+      button 'updates' do
+        event :click do
+          updates 'updatepath', {optional: :params}
+        end
+      end
+
+      subheading 'Delete'
+      body 'issues a DELETE to the passed path'
+      content shows_errors: true do
+        button 'deletes' do
+          event :click do
+            deletes 'deletepath', {optional: :params}
+          end
+        end
+        subheading 'Posts'
+        body "issues a POST to the passed path\nAlias: creates"
+        content do
+          button 'posts' do
+            event :click do
+              posts 'postpath', {optional: :params}
+            end
+          end
+        end
+      end
+    end
+  end
+end