coprl 0.1.0 → 3.0.0.beta.1

data/app/demo/components/tab_bars.pom

@@ -0,0 +1,66 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:tab_bars) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Tab Bars'
+
+  indented_grid do
+
+    title 'Standard Tab Bar'
+    tab_bar do
+      tab 'One', selected: true
+      tab 'Two'
+      tab 'Three'
+    end
+    separator
+
+    title 'Tabs with icons next to labels'
+    tab_bar do
+      tab 'One', icon: :thumb_up
+      tab 'Two', icon: :face, selected: true
+      tab 'Three', icon: :thumb_down
+    end
+    separator
+
+    title 'Tabs with icons above labels'
+    tab_bar do
+      tab 'One', icon: :thumb_up, stacked: true, selected: true
+      tab 'Two', icon: :face, stacked: true
+      tab 'Three', icon: :thumb_down, stacked: true
+    end
+    separator
+
+    title 'Scrolling Tabs'
+    tab_bar do
+      15.times do |idx|
+        tab "Tab Number-#{idx}", selected: idx == 3 do
+          event :click do
+            snackbar 'tab clicked'
+          end
+        end
+      end
+    end
+    separator
+
+    title 'Content is automatically displayed/hidden'
+    tab_bar do
+      tab 'One', selected: true do
+        heading3 'Tab 1'
+      end
+      tab 'Two' do
+        heading3 'Tab 2'
+      end
+      tab 'Three' do
+        heading3 'Tab 3'
+      end
+    end
+
+  end
+
+  attach :code, file: __FILE__
+end
+
+
+

data/app/demo/components/tables.pom

@@ -0,0 +1,121 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:tables) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Tables'
+
+  helpers do
+    def items
+      [
+          OpenStruct.new(id: 1, material: 'Acrylic (Transparent)', quantity: 50, price: '$2.90'),
+          OpenStruct.new(id: 2, material: 'Plywood (Birch)', quantity: 10, price: '$1.25'),
+          OpenStruct.new(id: 3, material: 'Laminate (Gold on Blue)', quantity: 50, price: '$2.35')
+      ]
+    end
+
+    def drivers
+      [
+          OpenStruct.new(name: 'Kimi Räikkönen', team: 'Scuderia Ferrari', country: 'Finland'),
+          OpenStruct.new(name: 'Daniel Ricciardo', team: 'Red Bull', country: 'Australia'),
+          OpenStruct.new(name: 'Lewis Hamilton', team: 'Mercedes', country: 'Great Britain'),
+          OpenStruct.new(name: 'Fernando Alonso', team: 'Mclaren', country: 'Spain'),
+          OpenStruct.new(name: 'Charles LeClerc', team: 'Sauber', country: 'Monaco')
+      ]
+    end
+  end
+
+  indented_grid do
+    content padding: :bottom3 do
+      title 'Non-Selectable'
+      table do
+        header do
+          column 'Name'
+          column 'Team'
+          column 'Country'
+        end
+        drivers.each do |driver|
+          row do
+            column driver.name
+            column driver.team
+            column driver.country
+          end
+        end
+        pagination page_size: 5,
+                   total: drivers.count,
+                   current_page: context.fetch(:page) { 1 },
+                   replace_id: 'drivers',
+                   replace_presenter: 'drivers_presenter'
+      end
+    end
+
+    content padding: [:top3, :bottom3] do
+      title 'Headerless Table'
+      table do
+        drivers.each do |driver|
+          row do
+            column driver.name
+            column driver.team
+            column driver.country
+          end
+        end
+      end
+    end
+
+    grid padding: :top3 do
+      column 6 do
+        form do
+          title 'Selectable (with form)'
+          content padding: :bottom2 do
+            table selectable: true do
+              header do
+                column 'Material'
+                column 'Quantity'
+                column 'Unit price'
+              end
+              items.each do |item|
+                row name: :id, value: item.id do
+                  column item.material
+                  column item.quantity
+                  column item.price
+                end
+              end
+            end
+          end
+          button 'SUBMIT', type: :raised do
+            event :click do
+              replaces :context_list, :context_list
+            end
+          end
+        end
+      end
+      column 6 do
+        attach :context_list
+      end
+    end
+
+    grid wide: true do
+      column 12 do
+        title 'Wide (scrollable)', id: :scrollable
+        table do
+          header do
+            (1..18).each do |idx|
+              column "Column #{idx}"
+            end
+          end
+          items.each do |item|
+            row do
+              (1..6).each do
+                column item.material
+                column item.quantity
+                column item.price
+              end
+            end
+          end
+        end
+      end
+    end
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/text_areas.pom

@@ -0,0 +1,38 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:text_areas) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Text Areas'
+
+  indented_grid do
+    headline 'Multiple line'
+
+    form do
+      text_area name: :notes, rows: 3, required: true do
+        label 'Text lines...'
+        hint 'Default behavior is full width'
+      end
+
+      text_area name: :notes, rows: 5, cols: 60, full_width: false do
+        label 'Five by Sixty'
+        hint 'Or specify using rows and columns'
+      end
+
+      rich_text_area name: :notes, placeholder: 'Text entered here is saved as HTML', rows: 10 do
+        label 'Rich Text Area'
+        hint 'Default is full width and 25 rows'
+      end
+
+      button 'Submit' do
+        event :click do
+          posts '/_echo_'
+          snackbar 'Posted to _echo_'
+        end
+      end
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/text_fields.pom

@@ -0,0 +1,114 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:text_fields) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Text Fields'
+
+  indented_grid do
+    headline 'Text'
+
+    text_field name: :text do
+      label 'Text...'
+    end
+
+    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'
+    # Client side validation with hints
+    title 'With Hints'
+    text_field name: :numeric do
+      label 'Number...'
+      pattern /-?[0-9]*(\.[0-9]+)?/
+      hint 'Input should be a number!'
+    end
+
+    title 'With Leading Icon'
+    text_field name: :numeric do
+      label 'Amount'
+      icon :attach_money, position: :left
+    end
+
+    title 'With Trailing Icon'
+    text_field name: :numeric do
+      label 'Name'
+      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. '\
+                 '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
+
+    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/time_fields.pom

@@ -0,0 +1,59 @@
+require 'date'
+
+Coprl::Presenters.define(:time_fields) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Time Field'
+
+  indented_grid do
+    body <<~DOC
+      A time field separates user display format from the value format.  
+      
+      The default time user display [format](/formatting_tokens#time) can be configured globally using the following:      
+      
+      ````
+      Coprl::Presenters::Settings.configure do |config|
+        config.presenters.components.defaults.time.format = 'h:i K'
+      end
+      ````
+            
+      The value format for date times can be the following, they are expected to be in 24 hour time:
+
+      * Ruby Time/DateTime objects.
+      * Chronologically Time Strings, e.g., HH:MM
+    DOC
+    grid do
+      column 6 do
+        time_field name: :skydive_at,
+                       format: 'H:i' do
+          label 'Select your time to skydive'
+          icon :event
+          event :change do
+            replaces :context_list, :context_list
+          end
+        end
+      end
+      column 6 do
+        attach :context_list
+      end
+    end
+    grid do
+      column 6 do
+        title 'Min Time'
+        time_field min_time: "9:00"
+
+        title 'Max Time'
+        time_field max_time: "20:00"
+
+        title 'Range'
+        time_field min_time: "16:00", max_time: "20:00"
+
+        title '24 hour time'
+        time_field time_24hr: true
+      end
+    end
+
+  end
+  attach :code, file: __FILE__
+end

data/app/demo/components/toggles.pom

@@ -0,0 +1,122 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:toggles) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Toggles'
+
+  indented_grid do
+    title 'CHECKBOX'
+    checkbox
+    checkbox checked: true, text: "I am initially checked"
+    checkbox indeterminate: true, text: "I am indeterminate"
+    checkbox disabled: true, text: "I am disabled"
+
+    title 'RADIO BUTTON'
+    radio_button name: :radio, value: 'one', checked: true, text: "One"
+    radio_button name: :radio, value: 'two', text: "Two"
+
+    title 'ICON TOGGLE'
+
+    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
+      column 6 do
+        switch checked: true
+      end
+    end
+    grid do
+      column 6 do
+        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 do
+          tooltip 'I am disabled'
+        end
+      end
+    end
+    grid do
+      column 10, padding: :none do
+        switch text: "This is a long text label that should display even longer wraps to another line?"
+      end
+      column 10, padding: :none  do
+        checkbox text: "This is a long text label that should display even longer wraps to another line?"
+      end
+    end
+
+
+    button :on_dialog do
+      event :click do
+        dialog :toggle_dlg
+      end
+    end
+    dialog id: :toggle_dlg, width: '30rem' do
+      form do
+        switch name: :reset_password_email, checked: true, text: 'Send reset password email'
+      end
+    end
+
+
+    grid do
+      column 6 do
+        headline 'Field Level Events', level: 3
+        title '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'
+        switch name: :myfield do
+          event :change 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'
+        form do
+          switch name: :myfield
+          switch name: :myfield2
+          event :change do
+            replaces :context_list, :context_list
+          end
+        end
+      end
+      column 6 do
+        attach :context_list
+      end
+    end
+    attach :code, file: __FILE__
+  end
+end