voom-presenters 0.1.12 → 2.0.2

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,14 +9,14 @@ 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
   content id: :context_list do
     grid do
       column 12 do
-        display title
+        headline title
         subheading "#{time}"
         list do
           scrubbed_context.map {|k, v| "#{k}: #{v}"}.each do |param|

data/app/demo/styles.pom

@@ -8,23 +8,35 @@ Voom::Presenters.define(:styles) do
   end
 
   indented_grid do
-    display 'Styles'
+    headline'Typography',  level: 1
 
-    # heading is an alias for display
-    heading 'Typography', level: 4
-    display 'Display 4', level: 4
-    display 'Display 3', level: 3
-    display 'Display 2', level: 2
-    display 'Display 1', level: 1
-    headline 'Headline'
-    title 'Title'
-    subheading 'Subheading 2', level: 2
-    subheading 'Subheading 1', level: 1
+    headline 'Headline 1', level: 1
+    headline 'Headline 2', level: 2
+    headline 'Headline 3', level: 3
+    headline 'Headline 4', level: 4
+    headline 'Headline 5', level: 5
+    headline 'Default Headline Size'
+    headline 'Headline 6', level: 6
+    title    'Title'
+    subtitle 'subtitle 1', level: 1
+    subtitle 'subtitle 2', level: 2
     body ['Body 1 paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut',
           'labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut',
           'aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat',
           'nulla pariatur.'], level: 1
     body 'Body 2 text, calling something out.', level: 2
+    caption 'Caption'
+    overline 'Overline'
     body 'You can use [markdown](/markdown) in your typography'
+    body '`blank` will insert a blank line'
+    blank
+    body 'Line above me, intentionally left blank'
+    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
-end
+  attach :code, file: __FILE__
+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/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,20 +121,20 @@
     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
-    Implementation: MDL/MDC
+    Implementation: MDC
     MDL: 
     MDC: Y
     Priority: 
-    Completeness: 1
-    Notes: The checkboxes and radio buttons from MDL need to be ported to MDC.
+    Completeness: 2
+    Notes:
 -
     Components: Select fields
     Implementation: MDC
@@ -145,11 +145,11 @@
     Notes:
 -
     Components: Sliders
-    Implementation: N
+    Implementation: MDC
     MDL: 
     MDC: Y
     Priority: medium
-    Completeness: 
+    Completeness: 2
     Notes: 
 -
     Components: Snackbars & toasts
@@ -161,11 +161,11 @@
     Notes: 
 -
     Components: Steppers
-    Implementation: N
-    MDL: N
+    Implementation: MDL
+    MDL: Y
     MDC: N
     Priority: medium
-    Completeness: 
+    Completeness: 1
     Notes:  https://ahlechandre.github.io/mdl-stepper/
 -
     Components: Subheaders
@@ -177,11 +177,11 @@
     Notes: This should be doable using typography
 -
     Components: Tabs
-    Implementation: N
+    Implementation: Y
     MDL: 
     MDC: Y
-    Priority: medium
-    Completeness: 
+    Priority:
+    Completeness: 2
     Notes: 
 -
     Components: Text fields
@@ -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.