coprl 0.1.0 → 3.0.0.beta.5

data/{LICENSE.txt → LICENSE}

@@ -1,6 +1,6 @@
-The MIT License (MIT)
+MIT License
 
-Copyright (c) 2021 Russell Edens
+Copyright (c) 2018 Russell Edens
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -9,13 +9,13 @@ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/Procfile

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

data/README.md

@@ -1,43 +1,150 @@
-# Coprl
+# COmmon PResenter Language (COPRL)
 
-Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/coprl`. To experiment with that code, run `bin/console` for an interactive prompt.
+![alt text](https://media.giphy.com/media/13LEyaRbQbiWdi/giphy.gif "Power Washer for Building User Interfaces")
 
-TODO: Delete this and the text above, and describe your gem
+## TLDR;
+Do you wish you could write a modern user interface in Ruby?
 
-## Installation
+Now you can. Presenters are a Ruby DSL for rendering user interfaces. 
 
-Add this line to your application's Gemfile:
+* Presenters are a power washer for building user interfaces
+* 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
 
-```ruby
-gem 'coprl'
-```
+The semantics are adopted from [Material Design](https://material.io/).
 
-And then execute:
+## Why?
 
-    $ bundle install
+Building a user interface should like Ruby itself: 
+> ... a focus on simplicity and productivity. It has an elegant syntax that is natural to read and easy to write.
 
-Or install it yourself as:
+Instead building a user interface has turned into:
+> How many languages/technologies/frameworks do I need to learn to build a rich user interface/experience?"
 
-    $ gem install coprl
+A typical web client requires at a minimum the following: HTML, CSS, Javascript, in addition we need Ruby on the server, plus some SQL.  
+That is 5 technologies/languages.
+Now lets talk about a new client like an iOS or Android client. If we go native, we can now add Java and Swift to that list. We are up to 7 technologies/languages!
+We didn't even add any popular extras like coffeescript, haml, sass, and we left out frameworks.
 
+What if you could write all your user interface in Ruby and have it rendered natively in ANY client? The COPRL _enable_ that. It is a Ruby DSL that describes a user interface.
+It generates an intermediate Presenter Object Model (POM). 
+The POM is a declarative user interface that can be rendered by a POM client. 
+The presenters gem provides a web client as a fully functional implementation that both renders natively as a Rails templating engine and as a Rack app.
+
+This concept was initially inspired by the Presenters concepts of Ivar Jacobson as presented by Robert Martin.
+
+## Demo
+
+[Demo]
+
+Or to run locally:
+
+    git clone git@github.com:rx/presenters.git
+    cd presenters/
+    bundle install
+    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
 
-TODO: Write usage instructions here
+### Rails
+Presenters are a view templating language in Rails. 
+You can mix and match presenters with your existing views, 
+use them as new views, or call them as partials in existing views.
+
+#### 1) Add presenters to Gemfile    
+    gem 'coprl'
+
+#### 2) Require coprl in config/application.rb
+    require 'coprl'
+
+#### 3) Mount presenters in config/routes.rb
+
+    mount Coprl::Presenters::Rails::Engine => "/"
+
+#### 4) Create the file app/view/hello_world.html.pom with the contents
+
+    Coprl::Presenters.define(:hello_world) do
+      heading 'hello world'
+    end   
+
+Navigate to [locahost:3000/hello_world](http://127.0.0.1:3000/hello_world)
+
+Use the [Demo] to get example code to drop into your presenters.
+
+#### Optional — Setting the root route
+If you name a presenter :index and want the root of the app to serve up that presenter add the following to your `config/initializers/routes.rb`
 
-## Development
+    root 'coprl#show'
 
-After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+#### Optionally — use presenters as partials from ERB/HAML
+You can render a presenter as a partial from other templating laguages (erb, haml):
 
-To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+    <%= render 'show', presenter: 'hello_world' %> 
+
+You need to add the following to your layout to use presenters as a partial alongside other erb's, haml or any other rails templating language.
+
+##### Inside the &lt;head&gt; tag add the following:
+
+      <title><%= @pom.page.title if @pom.page %></title>
+      <%= coprl_headers(@base_url, request, @pom) %> 
+
+##### Inside the &lt;body&gt; tag, around you existing yield add the following:
+
+    <%= partial "body/preamble", :locals => {pom:@pom} %>
+    <%= yield %>
+    <%= partial "body/postamble", :locals => {pom:@pom} %>
+
+### Rack
+#### 1) To use it, add this line to your Gemfile:
+
+    gem 'coprl'
+
+#### 2) Create the file app/presenters/index.pom with the contents:
+
+    Coprl::Presenters.define(:hello_world) do
+      heading 'hello world'
+    end   
+
+Presenters are rack based. If your framework uses a rack config file add the following:
+    use Coprl::Presenters::WebClient::App
+    # the api is optional        
+    # use Coprl::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 presenters.
+
+## Status
+This project is in a released status. 
+
+[![CircleCI](https://circleci.com/gh/rx/presenters.svg?style=svg)](https://circleci.com/gh/rx/presenters)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=plastic)](https://raw.githubusercontent.com/rx/presenters/master/LICENSE)
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/coprl. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/[USERNAME]/coprl/blob/master/CODE_OF_CONDUCT.md).
+Bug reports and pull requests are welcome on GitHub at https://github.com/rx/presenters.
 
 ## License
 
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+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 Coprl project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/coprl/blob/master/CODE_OF_CONDUCT.md).
+Everyone interacting in the COPRL project’s codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/coprl/coprl/blob/master/CODE-OF-CONDUCT.md).
+
+[Demo]:https://coprl-ruby.herokuapp.com/

data/ROADMAP.md

@@ -0,0 +1,6 @@
+# Coprl::Presenters Roadmap
+
+This is the roadmap for the presenters. It outlines the development direction.
+
+## Web-Client
+  * Conversion to MDC for existing MDL components

data/Rakefile

@@ -1,12 +1,6 @@
-# frozen_string_literal: true
-
-require "bundler/gem_tasks"
-require "rspec/core/rake_task"
+require 'bundler/gem_tasks'
+require 'rspec/core/rake_task'
 
 RSpec::Core::RakeTask.new(:spec)
 
-require "rubocop/rake_task"
-
-RuboCop::RakeTask.new
-
-task default: %i[spec rubocop]
+task default: :spec

data/app/demo/components.pom

@@ -0,0 +1,19 @@
+require_relative 'helpers/indented_grid'
+
+Coprl::Presenters.define('components') do
+  helpers Demo::Helpers::IndentedGrid
+  attach 'top_nav'
+  attach 'component_drawer'
+  page_title 'Components'
+
+  indented_grid do
+    grid do
+      column 12 do
+        icon 'fa-hand-point-left', position: :left
+        subheading 'Select a component'
+      end
+    end
+  end
+  attach :code, file: __FILE__
+
+end

data/app/demo/components/avatars.pom

@@ -0,0 +1,40 @@
+Coprl::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/grace-hopper-headshot.png'
+        end
+      end
+
+      grid do
+        column 6 do
+          headline 'Sizes'
+          body '**small**'
+          avatar :person, size: :small
+          body '**medium** (default)'
+          avatar 'img/demo/grace-hopper-headshot.png', size: :medium
+          body '**large**'
+          avatar :cake, size: :large
+          body '**x-large**'
+          avatar :golf_course, size: 'x-large'
+          body '**xx-large**'
+          avatar 'img/demo/grace-hopper-headshot.png', size: 'xx-large'
+        end
+      end
+
+    end
+  end
+
+end

data/app/demo/components/badges.pom

@@ -0,0 +1,26 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:badges) do
+  helpers Demo::Helpers::IndentedGrid
+
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Badges'
+  indented_grid do
+
+
+    headline 'Number'
+    badge 1, icon: :account_box
+
+    headline 'Icon'
+    badge '♥', icon: :account_box
+
+    headline 'Number'
+    badge 1, text: 'Inbox'
+
+    headline 'Icon'
+    badge '♥', text: 'Mood'
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/buttons.pom

@@ -0,0 +1,63 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:buttons) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Buttons'
+
+  indented_grid do
+
+    
+    # Raised buttons
+    headline 'Raised Button'
+    button 'Button', type: :raised
+
+    subheading 'Disabled'
+    button 'Button', type: :raised, disabled: true
+
+    subheading ' Accent colored'
+    button 'Button', type: :raised, color: :secondary
+
+    headline 'Flat button'
+    button 'Button'
+
+    subheading 'Disabled'
+    button 'Button', type: :flat, disabled: true
+
+    subheading 'Accent colored flat'
+    button 'Button', type: :flat, color: :secondary
+
+    subheading 'Aligned'
+    grid do
+      column 3 do
+        button 'Not Aligned'
+        button 'Right', position: :right
+        button 'Left', position: :left
+      end
+    end
+
+    # Icon Buttons
+    headline 'Icon button'
+    button icon: :mood
+    subheading 'Colored'
+    button icon: :mood, color: :primary
+    button icon: :mood, color: :secondary
+
+    subheading 'with text'
+    button "I'm happy", icon: :mood
+
+    headline 'Image button'
+    button type: :image do
+      image 'img/demo/grace-hopper-wide.png'
+    end
+
+    subheading 'with icon'
+    button type: :image do
+      image 'img/demo/grace-hopper-wide.png'
+      icon :link
+    end
+
+    attach :code, file: __FILE__
+  end
+end

data/app/demo/components/cards.pom

@@ -0,0 +1,84 @@
+require_relative '../helpers/indented_grid'
+
+Coprl::Presenters.define(:cards) do
+  helpers Demo::Helpers::IndentedGrid
+  attach :top_nav
+  attach :component_drawer
+  page_title 'Cards'
+
+  indented_grid do
+    headline 'Wide'
+    card width: '512px' do
+      media do
+        image 'img/demo/welcome_card.jpg', width: 512, height: 176
+        title 'Welcome', color: :white, position: :bottom
+        button icon: :share_icon, color: :white do
+          menu do
+            item 'Share with mom'
+          end
+        end
+      end
+      text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia... "
+
+      actions do
+        button 'Get Started', color: :primary
+      end
+    end
+
+    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
+      end
+      text "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenan convallis."
+
+      actions do
+        button 'View Updates', color: :primary
+      end
+    end
+
+    headline 'Image'
+    card width: '330px' do
+      media do
+        image 'img/demo/image_card.jpg', width: 330, height: 330
+        title 'image.jpg', position: :bottom, color: :white
+      end
+    end
+
+    headline 'Event'
+    card width: '330px' do
+      media height: '230px', color: :MidnightBlue do
+        title ['Featured event:',
+               "May 24, 2016",
+               "7-11pm"],
+              color: :white, position: :top
+      end
+      actions do
+        button 'Add to Calendar', color: :secondary
+        button icon: :event, color: :secondary
+      end
+    end
+
+    #
+    # headline 'Example'
+    # card width: '21rem', height: '42rem' do
+    #   title ['Auckland Sky Tower',
+    #          'Auckland, New Zealand'] do
+    #     background 'https://www.askideas.com/media/43/The-Sky-Tower-In-Auckland-New-Zealand.jpg'
+    #   end
+    #   text ["The Sky Tower is an observation and telecommunications tower located in Auckland,",
+    #         "New Zealand. It is 328 metres (1,076 ft) tall, making it the tallest man-made structure",
+    #         "in the Southern Hemisphere."].join(' ')
+    # end
+
+    attach :code, file: __FILE__
+  end
+end