voom-presenters 0.2.0 → 2.0.0

data/app/demo/patterns/floating_card.pom

@@ -0,0 +1,29 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:floating_card) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :pattern_drawer
+
+  page_title 'Floating Card'
+  indented_grid do
+    button icon: :open_in_new do
+      event :click do
+        toggle_visibility :card
+      end
+    end
+    content id: :card, hidden: true, float: true do
+      card do
+        media do
+          title "Hi I'm floating"
+          button icon: :close do
+            event :click do
+              hide :card
+            end
+          end
+        end
+      end
+    end
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/patterns/search_select.pom

@@ -88,13 +88,15 @@ end
 Voom::Presenters.define(:completed_searches) do
   helpers Demo::Helpers::SearchSelectDemo
   content id: :completed_searches do
-    searches.each do |search|
-      chip color: :primary, name: 'searches[]', value: search, id: search do
-        text search
-        icon :delete, position: :right do
-          event :click do
-            remove search
-            replaces :ticket_list, :ticket_list, input_tag: :input_data_container
+    chipset do
+      searches.each do |search|
+        chip color: :primary, name: 'searches[]', value: search, id: search do
+          text search
+          icon :delete, position: :right do
+            event :click do
+              remove search
+              replaces :ticket_list, :ticket_list, input_tag: :input_data_container
+            end
           end
         end
       end

data/app/demo/plugins/chart.pom

@@ -0,0 +1,254 @@
+Voom::Presenters.define(:chart, namespace: :plugins) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :plugin_drawer
+  plugin :chart
+
+  page_title 'Chart'
+
+  indented_grid do
+    text 'Based on the [c3 charting library](https://c3js.org/examples.html).'
+
+    title 'Line Chart'
+    text '[Line chart with sequential data](https://c3js.org/samples/simple_multiple.html).'
+    chart data: {
+        columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+        ]
+    }
+
+    title 'Timeseries Chart'
+    text '[Simple line chart with timeseries data](https://c3js.org/samples/timeseries.html).'
+    chart data: {
+        x: 'x',
+        columns: [
+            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 340, 200, 500, 250, 350]
+        ]},
+        axis: {
+            x: {
+                type: 'timeseries',
+                tick: {
+                    format: '%Y-%m-%d'
+                }
+            }
+        }
+
+    title 'Spline Chart'
+    text '[Display as Spline Chart](https://c3js.org/samples/chart_spline.html).'
+    chart data: {
+        columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 100, 140, 200, 150, 50]
+        ],
+        type: 'spline'
+    }
+
+    title 'Simple XY Line Chart'
+    text '[Simple line chart with custom x](https://c3js.org/samples/simple_xy.html).'
+    chart data: {
+        x: 'x',
+        columns: [
+            ['x', 30, 50, 100, 230, 300, 310],
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 300, 200, 300, 250, 450]
+        ]
+    }
+
+    title 'Multiple XY Line Chart'
+    text '[Multiple line chart with multiple custom x](https://c3js.org/samples/simple_xy_multiple.html).'
+    chart data: {
+        xs: {
+            'data1': 'x1',
+            'data2': 'x2',
+        },
+        columns: [
+            ['x1', 10, 30, 45, 50, 70, 100],
+            ['x2', 30, 50, 75, 100, 120],
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 20, 180, 240, 100, 190]
+        ]
+    }
+
+    title 'Line Chart with Regions'
+    text '[Set regions for each data with style](https://c3js.org/samples/simple_regions.html).'
+    chart data: {
+        columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 50, 20, 10, 40, 15, 25]
+        ],
+        regions: {
+            'data1': [{'start': 1, 'end': 2, 'style': 'dashed'}, {'start': 3}],
+            'data2': [{'end': 3}]
+        }
+    }
+
+    title 'Step Chart'
+    text '[Display as Step Chart](https://c3js.org/samples/chart_step.html).'
+    chart data: {
+        columns: [
+            ['data1', 300, 350, 300, 0, 0, 100],
+            ['data2', 130, 100, 140, 200, 150, 50]
+        ],
+        types: {
+            data1: 'step',
+            data2: 'area-step'
+        }
+    }
+
+    title 'Area Chart'
+    text '[Display as Area Chart](https://c3js.org/samples/chart_area.html).'
+    chart data: {
+        columns: [
+            ['data1', 300, 350, 300, 0, 0, 0],
+            ['data2', 130, 100, 140, 200, 150, 50]
+        ],
+        types: {
+            data1: 'area',
+            data2: 'area-spline'
+        }
+    }
+
+    title 'Stacked Area Chart'
+    text '[Display as Stacked Area Chart](https://c3js.org/samples/chart_area_stacked.html).'
+    chart data: {
+        columns: [
+            ['data1', 300, 350, 300, 0, 0, 120],
+            ['data2', 130, 100, 140, 200, 150, 50]
+        ],
+        types: {
+            data1: 'area-spline',
+            data2: 'area-spline'
+        },
+        groups: [['data1', 'data2']]
+    }
+
+    title 'Bar Chart'
+    text '[Display as Bar Chart](https://c3js.org/samples/chart_bar.html).'
+    chart data: {
+        columns: [
+            ['data1', 30, 200, 100, 400, 150, 250],
+            ['data2', 130, 100, 140, 200, 150, 50]
+        ],
+        type: 'bar'
+    },
+          bar: {
+              width: {
+                  ratio: 0.5
+              }
+          }
+
+    title 'Stacked Bar Chart'
+    text '[Display as Stacked Bar Chart](https://c3js.org/samples/chart_bar_stacked.html).'
+    chart data: {
+        columns: [
+            ['data1', -30, 200, 200, 400, -150, 250],
+            ['data2', 130, 100, -100, 200, -150, 50],
+            ['data3', -230, 200, 200, -300, 250, 250]
+        ],
+        type: 'bar',
+        groups: [
+            ['data1', 'data2']
+        ]
+    },
+          grid: {
+              y: {
+                  lines: [{value: 0}]
+              }
+          }
+
+    title 'Scatter Plot'
+    text '[Display as Scatter Plot](https://c3js.org/samples/chart_scatter.html).'
+    chart data: {
+        xs: {
+            setosa: 'setosa_x',
+            versicolor: 'versicolor_x',
+        },
+        columns: [
+            ["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
+            ["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
+            ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
+            ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
+        ],
+        type: 'scatter'
+    },
+          axis: {
+              x: {
+                  label: 'Sepal.Width',
+                  tick: {
+                      fit: false
+                  }
+              },
+              y: {
+                  label: 'Petal.Width'
+              }
+          }
+
+    title 'Pie Chart'
+    text '[Display as Pie Chart](https://c3js.org/samples/chart_pie.html).'
+    chart data: {
+        columns: [
+            ['data1', 30],
+            ['data2', 120],
+        ],
+        type: 'pie'
+    }
+
+    title 'Donut Chart'
+    text '[Display as Donut Chart](https://c3js.org/samples/chart_donut.html).'
+    chart data: {
+        columns: [
+            ['data1', 30],
+            ['data2', 120],
+        ],
+        type: 'donut'
+    },
+          donut: {title: 'Iris-Petal-Width'}
+
+
+    title 'Gauge Chart'
+    text '[Display as Gauge Chart](https://c3js.org/samples/chart_gauge.html).'
+    chart data: {
+        columns: [
+            ['data', 91.4]
+        ],
+        type: 'gauge'
+    },
+          color: {
+              pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'],
+              threshold: {
+                  values: [30, 60, 90, 100]
+              }
+          },
+          size: {
+              height: 180
+          }
+
+    title 'Combination Chart'
+    text '[Display all kinda charts up in here](https://c3js.org/samples/chart_combination.html).'
+    chart data: {
+        columns: [
+            ['data1', 30, 20, 50, 40, 60, 50],
+            ['data2', 200, 130, 90, 240, 130, 220],
+            ['data3', 300, 200, 160, 400, 250, 250],
+            ['data4', 200, 130, 90, 240, 130, 220],
+            ['data5', 130, 120, 150, 140, 160, 150],
+            ['data6', 90, 70, 20, 50, 60, 120],
+        ],
+        type: 'bar',
+        types: {
+            data3: 'spline',
+            data4: 'line',
+            data6: 'area',
+        },
+        groups: [
+            ['data1', 'data2']
+        ]
+    }
+
+  end
+  attach :code, file: __FILE__
+end
+

data/app/demo/plugins/image_crop.pom

@@ -0,0 +1,44 @@
+Voom::Presenters.define(:image_crop, namespace: :plugins) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :plugin_drawer
+  plugin :image_crop
+
+  page_title 'Image Crop'
+
+  indented_grid do
+    title 'Drag and drop with cropper preview'
+    grid do
+      column 6 do
+        image_crop id: :event_image,
+                   aspect_ratio: 1.0,
+                   image: 'https://cdn.mos.cms.futurecdn.net/4f6d31c116fdada59a5cb16d136e3068-970-80.jpg' do
+        end
+      end
+      column 6 do
+        file_input name: :event_file_name, preview: :event_image, accept: 'image/png, image/jpeg, image/gif, image/svg+xml' do
+          grid do
+            column 12 do
+              card do
+                text 'Drop it here'
+                button icon: :cloud_upload
+              end
+            end
+          end
+        end
+      end
+      event :change do
+        replaces :context_list, ':context_list'
+      end
+    end
+  end
+
+  # image_crop do
+  #   event :change do
+  #     replaces :context_list, ':context_list'
+  #   end
+  # end
+  attach 'context_list'
+  attach :code, file: __FILE__
+end
+

data/app/demo/plugins/index.pom

@@ -0,0 +1,29 @@
+Voom::Presenters.define(:index, namespace: :plugins) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :plugin_drawer
+  plugin :foo
+
+  indented_grid do
+    display 'Sample Plugin'
+    body 'You can extend the presenters by writing a plugin.'
+    body 'Plugins can fully extend and override built in presenter behavior.'
+    blank
+    icon 'fa-hand-point-left', position: :left
+    subheading 'Select a plugin to get started'
+    blank
+    body 'The plugin generator is the easiest way to get started.'
+    body 'presenters generate plugin <your plugin name>'
+    blank
+    body 'For a complete example checkout the sample '\
+               '[foo_presenter_plugin](https://github.com/rx/foo_presenter_plugin).'
+    foo(random_fact)
+    button 'New Random Fact' do
+      event :click do
+        bar 'Showing new random fact!'
+        snackbar last_response.data
+      end
+    end
+  end
+  attach :code, file: __FILE__
+end

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

@@ -0,0 +1,19 @@
+Voom::Presenters.define(:plugin_drawer, namespace: :plugins) do
+  helpers Voom::Presenters::Helpers::Inflector
+  drawer 'Plugins' do
+    menu do
+      item 'Sample Plugin' do
+        event :click do
+          loads :index
+        end
+      end
+      %i(image_crop chart).sort.each do |comp|
+        item titleize(comp) do
+          event :click do
+            loads comp
+          end
+        end
+      end
+    end
+  end
+end

data/app/demo/shared/context_list.pom

@@ -9,7 +9,7 @@ Voom::Presenters.define(:context_list) do
     end
 
     def scrubbed_context
-      scrubbed_keys = context.fetch(:exclude) {%w{title file hide_time}}
+      scrubbed_keys = context.fetch(:exclude) {%w{title file hide_time _presenter_ _namespace1_ session}}
       context.select {|k, _| !scrubbed_keys.include?(k.to_s)}
     end
   end

data/app/demo/styles.pom

@@ -34,7 +34,9 @@ Voom::Presenters.define(:styles) do
     separator
     body 'Line above me is a separator'
     link 'You can have a link', 'https://www.google.com/search?q=link&source=lnms&tbm=isch&sa=X&ved=0ahUKEwipr4zY_JXdAhVNXK0KHWFNCdYQ_AUICigB&biw=1651&bih=932'
+    blank
+    link 'I open in a new tab or window', 'https://example.com', target: :blank
 
   end
   attach :code, file: __FILE__
-end
+end

data/bin/console

@@ -15,8 +15,8 @@ Voom::Presenters::App.boot!
 # with your gem easier. You can also use a different console, if you like.
 
 # (If you use this, don't forget to add pry to your Gemfile!)
-# require "pry"
-# Pry.start
+require "pry"
+Pry.start
 
-require 'irb'
-IRB.start
+# require 'irb'
+# IRB.start

data/bin/presenters

@@ -0,0 +1,3 @@
+#!/usr/bin/env ruby
+require_relative '../lib/voom/presenters/cli'
+Voom::Presenters::Cli.start(ARGV)

data/component-status.yml

@@ -49,20 +49,20 @@
     Notes: 
 -
     Components: Data tables
-    Implementation: MDL
+    Implementation: MDC
     MDL: 
-    MDC: N
+    MDC: Y
     Priority: 
     Completeness: 2
     Notes: 
 -
     Components: Dialogs
-    Implementation: MDL
+    Implementation: MDC
     MDL: 
     MDC: Y
     Priority: High
-    Completeness: 1
-    Notes: Current implementation from MDL and polyfil does not work on iOS/Safari. Port to MDC.
+    Completeness: 2
+    Notes:
 -
     Components: Dividers
     Implementation: N
@@ -121,11 +121,11 @@
     Notes: Date, time, datetime are supported.
 -
     Components: Progress & activity
-    Implementation: N
+    Implementation: MDC
     MDL: 
     MDC: Y
-    Priority: medium
-    Completeness: 
+    Priority:
+    Completeness: 1
     Notes: 
 -
     Components: Selection controls/switches
@@ -210,10 +210,10 @@
            The list icons are not displaying tooltips.
            **Help wanted**
 -
-    Components: Widgets
-    Implementation: N
-    MDL: N
-    MDC: N
-    Priority: medium
-    Completeness: 
-    Notes: Need extension/plugin design with ace editor and charts as available plugins.
+    Components: Widgets/Plugins
+    Implementation: Various
+    MDL: N/A
+    MDC: N/A
+    Priority:
+    Completeness: 2
+    Notes: Handled by presenter plugins.