voom-presenters 0.1.13 → 2.0.3

data/HISTORY.md

@@ -0,0 +1,61 @@
+# HISTORY
+This is the manual changelog, managed before switching to github_changelog_generator.
+
+## [0.2.00] - 2018-09-18
+### Added
+- This change log
+- [Namespaces]
+- [Slider component]
+- [Rich text component]
+- [Map component]
+- [Chip as input]
+- [Tagged Input]
+- [Grid Padding]
+- [Grid Wide/Table scrolling]
+- [Overline Text Style]
+- [Blank lines]
+- [Page separator]
+- [Clear action]
+- Floating content blocks
+- Request logging
+
+### Removed
+- Autocomplete event
+
+### Changed
+- Text field - draw with outlined style by default
+- Text field - support for leading or trailing icons
+- Text field - disabled support
+- Text area - can specify cols to control width
+- Select options - can pass the option text as the first parameter, or in the block.
+- List - component action blocks are now actions
+- List - color and border
+- Content blocks - icons support
+- Events - aliases focus and blur (maps to focusin and focusout)
+- Typography - available in menu items, including markdown
+- Typography - removed trailing line breaks
+- Rails helper table_for helper - accepts timezone for auto time formatting
+- Date time - default format changed
+- Webclient FAB button - shifted up and out to make room for list actions 
+
+### Fixed
+- Text field - Removed excessive trailing spacing
+- Context is no longer copied and it is not included in the pom json
+- List - selected lists can render selected with the checked option
+
+[Unreleased]: https://github.com/rx/presenters/compare/v0.1.14...HEAD 
+[0.1.14]: https://github.com/rx/presenters/compare/v0.1.14...v0.1.13
+[Namespaces]: https://powerful-bastion-96181.herokuapp.com/namespaces
+[Stepper]: https://powerful-bastion-96181.herokuapp.com/steppers
+[Rich text component]: https://powerful-bastion-96181.herokuapp.com/text_areas
+[Slider component]: https://powerful-bastion-96181.herokuapp.com/sliders
+[Tagged Input]: https://powerful-bastion-96181.herokuapp.com/tagged_input
+[Overline Text Style]: https://powerful-bastion-96181.herokuapp.com/styles
+[Page separator]: https://powerful-bastion-96181.herokuapp.com/separator
+[Blank lines]: https://powerful-bastion-96181.herokuapp.com/styles
+[Grid Padding]: https://powerful-bastion-96181.herokuapp.com/layouts
+[Map component]: https://powerful-bastion-96181.herokuapp.com/maps
+[Clear action]: https://powerful-bastion-96181.herokuapp.com/clear_action 
+[Chip as input]: https://powerful-bastion-96181.herokuapp.com/chips#input_chips 
+[Floating content blocks]:https://powerful-bastion-96181.herokuapp.com/content#floating  
+[Grid Wide/Table scrolling]:https://powerful-bastion-96181.herokuapp.com/tables

data/Procfile

@@ -0,0 +1 @@
+web: rackup -p $PORT

data/README.md

@@ -1,20 +1,21 @@
 # Voom::Presenters
 
 ## TLDR;
-Presenters are to HTML/User Interfaces what C is to assembly.
+Do you wish you could write a modern user interface in pure Ruby?
 
-A Ruby DSL for describing user interfaces. 
+Now you can. Presenters are a Ruby DSL for rendering user interfaces. 
 The semantics are adopted from [Material Design](https://material.io/).
 
-A presenter generates a Presenter Object Model (POM). 
-A POM fully describes a user interface.
-A POM client can fully render user interface from POM.
+* Presenters are to HTML/User Interfaces what C is to assembly
+* A presenter generates a Presenter Object Model (POM) 
+* A POM fully describes a user interface
+* A POM client can fully render user interface from POM
 
 ## What are voom-presenters?
 
-* A Ruby user interface abstraction.
-* A Ruby DSL to build a user interface.
-* A power washer for building user interfaces.
+* A Ruby user interface abstraction
+* A Ruby DSL to build a user interface
+* A power washer for building user interfaces
 
 ## Why?
 
@@ -38,43 +39,67 @@ This concept was initially inspired by the Presenters concepts of Ivar Jacobson
 
 ## Demo
 
-[Demo](https://powerful-bastion-96181.herokuapp.com)
+[Demo](https://coprl-ruby.herokuapp.com/)
 
 Or to run locally:
 
     git clone git@github.com:rx/presenters.git
     cd presenters/
     bundle install
-    rackup
+    bundle exec rackup
 
     open http://localhost:9292
+   
+> Note: Demo defaults to Ruby version 2.7.3 in the .ruby-version file. If you want to run a different version 
+> -- set RBENV_VERSION to your desired version. 
+> For example: 
+> ```
+> RBENV_VERSION=2.5.5 bundle insatall
+> RBENV_VERSION=2.5.5 bundle exec rackup```
     
 To see the POM:
 
     open http://localhost:9292/index.pom
-  
+      
+## Usage
+
+To use it, add this line to your Gemfile:
 
-## User Interface Engine
+    gem 'voom-presenters', github('rx/presenters'), require: false
+
+Create the file app/presenters/index.pom with the contents:
+    
+    Voom::Presenters.define(:hello_world) do
+      heading 'hello world'
+    end   
 
-The POM + A POM Client is an interface engine. 
+### Rails
+For rails: Mount the web-client in your rails config/routes.rb
 
-This example downloads the POM of the index page. 
-Then posts it to the reference web client. 
-That result is then saved to a file and opened up with a browser.
+    mount ::Voom::Presenters::WebClient::App, at: '/'
+    # the api is optional
+    # mount ::Voom::Presenters::Api::App,       at: '/'
     
-    curl localhost:9292/index.pom > $TMPDIR/index.json  && curl -d "@$TMPDIR/index.json" -X POST localhost:9292/index > $TMPDIR/index.html && open $TMPDIR/index.html
+Create an initializer `config/initializers/presenters.rb` with the following:
+    
+    require 'voom'
+
+### Rack
+Presenters are rack based. If your framework uses a rack config file add the following:
+
+    use Voom::Presenters::WebClient::App
+    # the api is optional        
+    # use Voom::Presenters::Api::App
+
+Start your app and goto [/hello_world](http://127.0.0.1:3000/hello_world)
+
+Use the [Demo] to get example code to drop into your presetners.
 
 ## Status
-This project is in a pre-beta status. It is changing frequently as the first user interfaces are being built with it.
-Any use should be for internal use only until the status becomes beta.
+This project is in a released status. 
 
 [![CircleCI](https://circleci.com/gh/rx/presenters.svg?style=svg)](https://circleci.com/gh/rx/presenters)
-[![Maintainability](https://api.codeclimate.com/v1/badges/8fcea717485230e60f27/maintainability)](https://codeclimate.com/github/rx/presenters/maintainability)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg?style=plastic)](https://raw.githubusercontent.com/rx/presenters/master/LICENSE)
-    
-## Usage
-
-TODO: Write usage instructions here
 
 ## Contributing
 
@@ -84,3 +109,9 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/rx/pre
 
 The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
 
+## Code of Conduct
+
+Everyone interacting in the Voom::Presenters project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/rx/presenters/blob/master/CODE-OF-CONDUCT.md).
+
+
+[Demo]:https://powerful-bastion-96181.herokuapp.com

data/app/demo/components/avatars.pom

@@ -0,0 +1,40 @@
+Voom::Presenters.define(:avatars) do
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Avatars'
+
+  grid do
+    column 1
+    column 10 do
+      body 'An avatar can contain an image or icon. Avatars can be used within a list line, the media section of a card, a content block or column.'
+
+      grid do
+        column 6 do
+          headline 'Types'
+          body '**With an Icon**'
+          avatar :thumb_up
+          body '**With an Image**'
+          avatar 'img/demo/avatar.jpg'
+        end
+      end
+
+      grid do
+        column 6 do
+          headline 'Sizes'
+          body '**small**'
+          avatar :person, size: :small
+          body '**medium** (default)'
+          avatar 'img/demo/image_card.jpg', size: :medium
+          body '**large**'
+          avatar :cake, size: :large
+          body '**x-large**'
+          avatar :golf_course, size: 'x-large'
+          body '**xx-large**'
+          avatar 'img/demo/avatar.jpg', size: 'xx-large'
+        end
+      end
+
+    end
+  end
+
+end

data/app/demo/components/cards.pom

@@ -25,8 +25,15 @@ Voom::Presenters.define(:cards) do
       end
     end
 
-    headline 'Square'
-    card width: '330px' do
+    blank
+    headline 'Square', inline: true
+    switch checked: true do
+      tooltip 'Hide/Show Square Card'
+      event :click do
+        toggle_visibility 'square_card'
+      end
+    end
+    card id: 'square_card', width: '330px' do
       media height: '200px', color: '#46B6AC' do
         image 'img/demo/dog.png', position: [:bottom, :right]
         title 'Update', color: :white, position: :bottom
@@ -55,8 +62,8 @@ Voom::Presenters.define(:cards) do
               color: :white, position: :top
       end
       actions do
-        button 'Add to Calendar'
-        button icon: :event
+        button 'Add to Calendar', color: :secondary
+        button icon: :event, color: :secondary
       end
     end
 

data/app/demo/components/chips.pom

@@ -7,84 +7,97 @@ Voom::Presenters.define(:chips) do
   page_title 'Chips'
 
   indented_grid do
-    chip 'Chip 1'
-    chip 'Chip 1', color: :primary
-    chip 'Chip 2', color: :secondary
-    chip color: :hotpink do
-      text 'Chip 3', color: :white
+    chipset do
+      chip 'Chip 1'
+      chip 'Chip 1', color: :primary
+      chip 'Chip 2', color: :secondary
+      chip color: :hotpink do
+        text 'Chip 3', color: :white
+      end
     end
-
     subheading 'leading icon'
-    chip 'Jane Smith', icon: :face
+    chipset do
+      chip 'Jane Smith', icon: :face
+    end
 
     subheading 'trailing icon'
-    chip 'Jane Smith' do
-      icon :more_vert, position: :right
+    chipset do
+      chip 'Jane Smith' do
+        icon :more_vert, position: :right
+      end
     end
 
     subheading 'leading and trailing icon'
-    chip 'Jane Smith' do
-      icon :face, position: :left
-      icon :more_vert, position: :right
-    end
-    heading 'Events'
-
-    chip 'Jane Smith' do
-      icon :face, position: :left
-      icon :more_vert, position: :right
-      event :click do
-        snackbar 'chip clicked!'
+    chipset do
+      chip 'Jane Smith' do
+        icon :face, position: :left
+        icon :more_vert, position: :right
       end
     end
+    heading 'Events'
 
-    chip do
-      text 'Jane Smith' do
+    chipset do
+      chip 'Jane Smith' do
+        icon :face, position: :left
+        icon :more_vert, position: :right
         event :click do
-          snackbar 'text clicked'
+          snackbar 'chip clicked!'
         end
       end
-      icon :face, position: :left
-      icon :more_vert, position: :right
-      event :click do
-        snackbar 'chip clicked!'
-      end
-    end
-
-    chip do
-      text 'Jane Smith' do
-        event :click do
-          snackbar 'text clicked'
+      chip do
+        text 'Jane Smith' do
+          event :click do
+            snackbar 'text clicked'
+          end
         end
-      end
-      icon :face, position: :left do
+        icon :face, position: :left
+        icon :more_vert, position: :right
         event :click do
-          snackbar 'left icon clicked'
+          snackbar 'chip clicked!'
         end
       end
-      icon :more_vert, position: :right
-      event :click do
-        snackbar 'chip clicked!'
-      end
-    end
 
-    chip do
-      text 'Jane Smith' do
-        event :click do
-          snackbar 'text clicked'
+      chip do
+        text 'Jane Smith' do
+          event :click do
+            snackbar 'text clicked'
+          end
         end
-      end
-      icon :face, position: :left do
+        icon :face, position: :left do
+          event :click do
+            snackbar 'left icon clicked'
+          end
+        end
+        icon :more_vert, position: :right
         event :click do
-          snackbar 'left icon clicked'
+          snackbar 'chip clicked!'
         end
       end
-      icon :more_vert, position: :right do
-        event :click do
-          snackbar 'right icon clicked'
+
+      chip do
+        text 'Jane Smith' do
+          event :click do
+            snackbar 'text clicked'
+          end
+        end
+        icon :face, position: :left do
+          event :click do
+            snackbar 'left icon clicked'
+          end
+        end
+        icon :more_vert, position: :right do
+          event :click do
+            snackbar 'right icon clicked'
+          end
         end
       end
     end
 
+    title 'Chips as input', id: :input_chips
+    body 'You can set the name and value attributes of a chip, they then can be posted.
+          An example of this can be found in the [search select](/search_select) pattern demo.'
+
+
     attach :code, file: __FILE__
   end
 end

data/app/demo/components/content.pom

@@ -0,0 +1,111 @@
+require_relative '../helpers/indented_grid'
+
+Voom::Presenters.define(:content) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Content'
+
+  indented_grid do
+    headline 'Content blocks are wrappers for content and layout'
+    body %(They have many uses this demo will outline their attributes and their common use cases.)
+    blank
+    body %(See the [padding demo](#{presenters_path(:padding)}) for example on how padding works in content blocks.)
+    blank
+
+    title 'Content as a block element'
+    content do
+      text 'A content block with no attributes can turn an inline element into a block element', inline: true
+    end
+    text '..continuing text', inline: true
+    blank
+
+    title 'Attribute: `inline`'
+    content padding: :bottom3 do
+      text 'Inline controls the behavior of the content block within its context. It does not afffect the layout or flow' +
+               'of components within it. This provides a powerful method for building custom layouts'
+      content do
+        content inline: true, width: '500px', background_color: :cyan, padding: :full do
+          card do
+            text 'Section One (Chips in a block)'
+            chipset do
+              chip 'Chip 1'
+              chip 'Chip 1', color: :primary
+              chip 'Chip 2', color: :secondary
+              chip color: :hotpink do
+                text 'Chip 3', color: :white
+              end
+            end
+          end
+        end
+        content inline: false, width: '20%', position: [:top, :right] do
+          card do
+            text 'Section Two'
+          end
+        end
+        content inline: true, width: '20%' do
+          card do
+            text 'Section Three'
+          end
+        end
+      end
+    end
+    blank
+
+    title 'Attribute: `hidden`'
+    text 'A content block can be hidden and shown in response to page events.'
+    content id: :peekaboo, hidden: true do
+      title 'Peekabo'
+    end
+    button :show_hide do
+      event :click do
+        toggle_visibility :peekaboo
+      end
+    end
+    blank
+
+    title 'Attributes: `width` and `height`'
+    text 'A content block can set its width and height. Units can be pixels, rems or percentages.'
+    content width: '50%', height: '8rem' do
+      card do
+        title "I'm wider! and taller!"
+      end
+    end
+    blank
+
+    title 'Attributes: `position`'
+    text 'A content block can be positioned to be :top, :right, :bottom, :left or a combination of the container its inside'
+    content id: :parent, width: '50%', height: '8rem' do
+      content position: [:bottom, :right] do
+        card do
+          title "I'm on the bottom right"
+        end
+      end
+    end
+    blank
+
+    title 'Attributes: `text_align`'
+    text %(A content block can define how its typography will be alligned inside it.
+               Valid values: left|right|center|justify)
+    content width: '50%', height: '8rem' do
+      content text_align: :center do
+        title "I'm centered text", inline: 'true'
+        title ".. me 2", inline: 'true'
+      end
+    end
+    blank
+
+    title 'Attribute: `float`'
+    text 'A content block can float above the other content. This is useful for things like type ahead previews. Or hovering previews.'
+    content float: true do
+      card do
+        title "I'm floating!"
+      end
+    end
+    text "xxxxxxxxxxxxxxxx I'm text that is obscured by the floating card in the content block above me"
+    blank
+
+
+    attach :code, file: __FILE__
+  end
+end