bulmacomp 0.1.1 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b5fe720844eeb9706a76791f3ded3fc1c010fa7442ea375ad69d071bf598bb6
-  data.tar.gz: 666b242522a9ee87094bf1b4f47e294e41403910b845b72d4594de7fe7bde296
+  metadata.gz: 03f4ba3be9bf671e75a46e7e6269bb992e8249e595a939a045b71091ad74baa4
+  data.tar.gz: 7f2455a6f4b08c00aae69819a2f603c46dd26bcd6c63546d2c39785d58393e63
 SHA512:
-  metadata.gz: 8892fb3dbcce0a46f8ad1238b927e96d6bb0830875ba686600ac557f3446da9cccc64d34c90430f81fc438f0263c8acd0d7c02102410f3081d43813010db7334
-  data.tar.gz: ec3f10a435462824fd2f67e743daf9a0f978595c1a47fe3004821032d7c13a6951a605127b9ec12ea468bf64467b0e69367b1a366f110bcc9cfd87c6dbf13007
+  metadata.gz: e5dd184d2ba86cd80d0b29660d0c20bb890cdfb61eb9468beb055281e66acce8346c31f1f002e696a322a11af2e004e35b3493a190fe9f2ca2923f57ac111ed7
+  data.tar.gz: 31100768b00f36a1c5d7ba730a4235aae1a1816877d7f62c9a2ca6213ff81c6c19b245b6cd2939798b63b0f5a7a98ab98d5cd613787b0c1a572aacab2609a112

data/README.md

@@ -1,8 +1,23 @@
 # Bulmacomp
-[https://viewcomponent.org/](ViewComponent) collection for [https://bulma.io/](bulma) css framework
+[![Gem Version](https://badge.fury.io/rb/bulmacomp.svg)](https://badge.fury.io/rb/bulmacomp)
+[![Maintainability](https://api.codeclimate.com/v1/badges/b44e91b4f303eb7962b3/maintainability)](https://codeclimate.com/github/isprambiente/bulmacomp/maintainability)
+[![Rails Test](https://github.com/isprambiente/bulmacomp/actions/workflows/rubyonrails.yml/badge.svg)](https://github.com/isprambiente/bulmacomp/actions/workflows/rubyonrails.yml)
+[![Yard Docs](http://img.shields.io/badge/yard-docs-blue.svg)](https://www.rubydoc.info/github/isprambiente/bulmacomp)
 
-## Usage
-How to use my plugin.
+Bulmacomp is a [ViewComponent](https://viewcomponent.org/) collection for [Bulma](https://bulma.io/) css framework.
+
+Bulmacomp provide a "view component" for each bulma component:
+
+* [Breadcrumb](https://bulma.io/documentation/components/breadcrumb/) - [Bulmacomp::BreadcrumbComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/BreadcrumbComponent)
+* [Card](https://bulma.io/documentation/components/card/) - [Bulmacomp::CardComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/CardComponent)
+* [Dropdown](https://bulma.io/documentation/components/dropdown/) - [Bulmacomp::DropdownComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/DropdownComponent)
+* [Menu](https://bulma.io/documentation/components/menu/) - [Bulmacomp::MenuComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/MenuComponent)
+* [Message](https://bulma.io/documentation/components/message/) - [Bulmacomp::MessageComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/MessageComponent)
+* [Modal](https://bulma.io/documentation/components/modal/) - [Bulmacomp::ModalCompoent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/ModalCompoent)
+* [Navbar](https://bulma.io/documentation/components/navbar/) - [Bulmacomp::NavbarCompoent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/NavbarComponent)
+* [Pagination](https://bulma.io/documentation/components/pagination/) - [Bulmacomp::PaginationComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/PaginationComponent)
+* [Panel](https://bulma.io/documentation/components/panel/) - [Bulmacomp::PanelComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/PanelComponent)
+* [Tabs](https://bulma.io/documentation/components/tabs/) - [Bulmacomp::TabsComponent](https://www.rubydoc.info/github/isprambiente/bulmacomp/Bulmacomp/tabsComponent)
 
 ## Installation
 Add this line to your application's Gemfile:
@@ -21,8 +36,27 @@ Or install it yourself as:
 $ gem install bulmacomp
 ```
 
+## Usage
+Bulmacomp provide standard view components. You can simply render of a new instance of the components with your parameters:
+```ruby
+render Bulmacomp::MessageComponent.new(title: 'example', close: true, close_options: {id: 'close'}) do
+  Some content
+end
+```
+returns
+```html
+<article class="message">
+  <div class="message-header">
+    <p>Example</p>
+    <button id="close" class="delete" aria-label="delete" data-close='message'></button>
+  </div>
+  <div class="message-body">Some content</div>
+</article>
+```
+You can get more details from [View Component site](https://viewcomponent.org/) and [Bulmacom documentation](https://rubydoc.info/github/isprambiente/bulmacomp/main)
+
 ## Contributing
-Contribution directions go here.
+Issues, forks and pull requests are welcomed
 
 ## License
 The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/components/bulmacomp/breadcrumb_component.rb

@@ -11,9 +11,9 @@ module Bulmacomp
   #     </ul>
   #   </nav>
   #
-  # @example Breadcrumb with list element:
-  #   entries = link_to('one','#'), link_to('two','#')
-  #   render Bulmacomp::BreadcrumbComponent.new(entries)
+  # @example Breadcrumb with elements:
+  #   elements = [link_to('one','#'), link_to('two','#')]
+  #   render Bulmacomp::BreadcrumbComponent.new(elements: elements)
   #   <nav class="breadcrumb" aria-label="breadcrumbs">
   #     <ul>
   #       <li><a href="#">one</a></li>
@@ -32,16 +32,16 @@ module Bulmacomp
   #    </ul>
   #   </nav>
   class BreadcrumbComponent < ViewComponent::Base
-    # @param [Array<String>] list
-    #   Any number of Objects to push into this collection
     # @param [Hash] opts
     #   options to generate content
+    # @param [Array<String>] elements
+    #   array of elements to push into this breadcrumbs collection
     # @option opts [String] :*
     #   each other key going as tag option, default is class: 'breadcrumb', aria_label: 'breadcrumbs'
-    # @yield [optional] card content
-    def initialize(list = [], **opts)
+    # @yield [optional] breadcrumb content
+    def initialize(elements: [], **opts)
       super
-      @list = list
+      @elements = elements
       @opts = { class: 'breadcrumb', aria: { label: 'breadcrumbs' } }.merge(opts)
     end
 
@@ -50,9 +50,9 @@ module Bulmacomp
       tag.nav tag.ul(ul_content), **@opts
     end
 
-    # @return [Text], safe join of list arguments and proc content
+    # @return [Text], safe join of elements arguments and proc content
     def ul_content
-      safe_join(@list.map { |e| tag.li(e) }.<<(content))
+      safe_join(@elements.map { |e| tag.li(e) }.<<(content))
     end
   end
 end

data/app/components/bulmacomp/dropdown_component.rb

@@ -0,0 +1,115 @@
+# frozen_string_literal: true
+
+module Bulmacomp
+  # Make an html structure for a bulma dropdown
+  #
+  # @example empty dropdown
+  #   render Bulmacomp::DropdownComponent.new()
+  #
+  #   <div class="dropdown">
+  #     <div class="dropdown-trigger">
+  #       <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+  #         <span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
+  #       </button>
+  #    </div>
+  #    <div class="dropdown-menu" role="menu">
+  #      <div class="dropdown-content"></div>
+  #     </div>
+  #   </div>
+  # @example dropdown with title and elements
+  #   render Bulmacomp::DropdownComponent.new(title: 'title', elements: [1,2])
+  #
+  #   <div class="dropdown">
+  #     <div class="dropdown-trigger">
+  #       <button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
+  #         <span>title</span>
+  #         <span class="icon is-small"><i class="fas fa-angle-down" aria-hidden="true"></i></span>
+  #       </button>
+  #    </div>
+  #    <div class="dropdown-menu" role="menu">
+  #      <div class="dropdown-content">
+  #        <div class="dropdown-item">1</div>
+  #        <div class="dropdown-item">2</div>
+  #      </div>
+  #     </div>
+  #   </div>
+  #
+  # @example dropdown with yield, elements and other option
+  #   = render Bulmacomp::DropdownComponent.new(title: 'title', elements: [1,2], id: 'menu',
+  #                                 button_options: {class: 'button is-success'}, icon: nil) do
+  #     some content
+  #
+  #   <div class="dropdown">
+  #     <div class="dropdown-trigger">
+  #       <button class="button is-success" aria-haspopup="true" aria-controls="dropdown-menu">
+  #         <span>title</span>
+  #       </button>
+  #    </div>
+  #    <div class="dropdown-menu" role="menu">
+  #      <div class="dropdown-content">
+  #        <div class="dropdown-item">1</div>
+  #        <div class="dropdown-item">2</div>
+  #        some content
+  #      </div>
+  #     </div>
+  #   </div>
+  #
+  class DropdownComponent < ViewComponent::Base
+    # @param [Hash] opts
+    #   options to generate content
+    # @option opts [String] title
+    #   Content of button, default empty string
+    # @option opts [Array<String>] elements
+    #   collection of dropdown-item
+    # @option opts [String] icon
+    #   icon span class content for button,
+    #   default: <i class="fas fa-angle-down" aria-hidden="true"></i>
+    # @option opts {Hash} button_options
+    #   options for button tag
+    # @option opts [String] :*
+    #   each key going as content tag option, default is class: 'dropdown'
+    # @yield [optional] dropdown content
+    def initialize(title: nil, elements: [], icon: default_icon, button_options: {}, **opts)
+      super
+      @title = tag.span title if title.present?
+      @elements = elements
+      @icon = tag.span icon, class: 'icon is-small' if icon.present?
+      @button_options = default_button_options.merge(button_options)
+      @opts = default_opts.merge(opts)
+    end
+
+    # @return [String] default content for button icon
+    def default_icon
+      '<i class="fas fa-angle-down" aria-hidden="true"></i>'.html_safe
+    end
+
+    # @return [Hash] default option for content tag
+    def default_opts
+      { class: 'dropdown' }
+    end
+
+    # return [Hash] default option for button tag
+    def default_button_options
+      { class: 'button', aria: { haspopup: 'true', controls: 'dropdown-menu' } }
+    end
+
+    # Generated html string for bulma dropdown
+    # @return [String]
+    def call
+      tag.div safe_join([tag_trigger, tag_content]), **@opts
+    end
+
+    # generated html for '.dropdown-trigger' div
+    # @return [String]
+    def tag_trigger
+      tag.div tag.button(safe_join([@title, @icon]), **@button_options), class: 'dropdown-trigger'
+    end
+
+    # generated html for '.dropdown-content' div.
+    # Map each content of {elements} in a '.dropdown-item' div and add yield content
+    # @return [String]
+    def tag_content
+      tag.div safe_join([@elements.map { |e| tag.div(e, class: 'dropdown-item') }, content]), class: 'dropdown-content'
+    end
+  end
+end

data/app/components/bulmacomp/menu_component.rb

@@ -8,10 +8,10 @@ module Bulmacomp
   #
   #   <aside class='menu'></aside>
   #
-  # @example menu with title and entries
+  # @example menu with title and elements
   #   title = 'Menu title'
-  #   menu  = [link_to('first entry', '#'), link_to('second entry', '#')
-  #   render Bulmacomp::MenuComponent.new(menu, title: title)
+  #   elements  = [link_to('first entry', '#'), link_to('second entry', '#')
+  #   render Bulmacomp::MenuComponent.new(elements: elements, title: title)
   #
   #   <aside class='menu'>
   #     <p class='menu-label'>Menu title</p>
@@ -21,9 +21,9 @@ module Bulmacomp
   #     </ul>
   #   </aside>
   #
-  # @example menu with title and annidate entries
-  #   entries = ['Uno',['Due',['Tre','Quattro']]]
-  #   = render Bulmacomp::MenuComponent.new(entries)
+  # @example menu with title and annidate elements
+  #   elements = ['Uno',['Due',['Tre','Quattro']]]
+  #   = render Bulmacomp::MenuComponent.new(elements: elements)
   #
   #   <aside class='menu'>
   #     <p class='menu-label'>Uno</p>
@@ -47,8 +47,8 @@ module Bulmacomp
   #   </aside>
   #
   # @example with mixed conetent (arguments before)
-  #   entries = ['argument content',['argoument menu']]
-  #   = render Bulmacomp::MenuComponent.new(entries) do
+  #   elements = ['argument content',['argoument menu']]
+  #   = render Bulmacomp::MenuComponent.new(elements: elements) do
   #     %p yield content
   #
   #   <aside class='menu'>
@@ -60,22 +60,22 @@ module Bulmacomp
   #   </aside>
   #
   class MenuComponent < ViewComponent::Base
-    # @param [Array<String,Array>] list
-    #   each entry is used to generate menu entries throug {first_level} method
     # @param [Hash] opts
     #   options to generate content
+    # @option opts [Array<String>] elements
+    #   each entry is used to generate menu elements throug {first_level} method
     # @option opts [String] :*
     #   each key going as tag option, default is class: 'menu'
-    def initialize(list = [], **opts)
+    def initialize(elements: [], **opts)
       super
-      @list = list
+      @elements = elements
       @opts = { class: 'menu' }.merge(opts)
     end
 
     # Generate an html safe string with full bulma menu.
     # @return [String] html string menu
     def call
-      tag.aside first_level(@list) + content, **@opts
+      tag.aside first_level(@elements) + content, **@opts
     end
 
     # Generate a string with all bulma menu element from `values` param.
@@ -84,7 +84,7 @@ module Bulmacomp
     # * as `p.menu-title` tag if is not an Array
     # * as {map_menu} if is an Array
     # @return [String]
-    # @param [Array] values menu entries
+    # @param [Array] values menu elements
     # @example
     #   Bulmacomp::MenuComponent.new().first_level(['Uno',['Due','Tre']])
     #
@@ -95,14 +95,14 @@ module Bulmacomp
       )
     end
 
-    # Generate a string with the "real" menu entries (no title)
-    # from 'values' param. The menu entries are incapsulated in a ul tag
+    # Generate a string with the "real" menu elements (no title)
+    # from 'values' param. The menu elements are incapsulated in a ul tag
     #
     # Each element in 'values' is mapped:
     # * as li tag if is not an Array
     # * as {sub_menu} if is an Array
     # @return [String]
-    # @param [Array] values menu entries
+    # @param [Array] values menu elements
     # @example
     #   Bulmacomp::MenuComponent.new().map_menu(['Uno',['Due','Tre']])
     #
@@ -115,7 +115,7 @@ module Bulmacomp
     # The first array element is used as ancescor, other element
     # are used to make the sub menu with {map_menu} method.
     # @return [String]
-    # @param [Array] values sub-menu entries
+    # @param [Array] values sub-menu elements
     # @example
     #   Bulmacomp::MenuComponent.new().sub_menu(['Uno',['Due','Tre']])
     #

data/app/components/bulmacomp/panel_component.rb

@@ -29,14 +29,13 @@ module Bulmacomp
     # @option opts [String] :title
     #   panel title
     # @option opts [String] :*
-    #   each other key going as tag option, default is class: 'breadcrumb', aria_label: 'breadcrumbs'
+    #   each other key going as tag option, default is class: 'panel'
     # @yield [optional]
     #   panel content
     def initialize(title: nil, **opts)
       super
       @title = title
-      @opts = opts
-      @opts[:class] = 'panel' unless @opts[:class]
+      @opts = { class: 'panel' }.merge(opts)
     end
 
     # return [String] html_safe generated bulma panel

data/app/components/bulmacomp/tabs_component.rb

@@ -3,16 +3,16 @@
 module Bulmacomp
   # Make an HTML strucrure for a bulma tabs
   #
-  # @example Empty tabs
+  # @example
   #   render Bulmacomp::TabsComponent.new()
   #
   #   <div class="tabs">
   #     <ul></ul>
   #   </div>
   #
-  # @example Tabs with elements
-  #   entries = [link_to('one','#'), link_to('two','#')]
-  #   render Bulmacomp::TabsComponent.new(entries: entries)
+  # @example tabs with elements
+  #   elements = [link_to('one','#'), link_to('two','#')]
+  #   render Bulmacomp::TabsComponent.new(elements: elements)
   #
   #   <div class="tabs">
   #     <ul>
@@ -21,62 +21,50 @@ module Bulmacomp
   #     </ul>
   #   </div>
   #
-  # @example yield
+  # @example tabs with yield content
   #   = render Bulmacomp::TabsComponent.new() do
-  #     <li class="active"><a href='#'>one</a></li>
+  #     %li some text
   #
   #   <div class="tabs">
   #     <ul>
-  #       <li class="active"><a href='#'>one</a></li>
+  #       <li>some text</li>
   #     </ul>
   #   </div>
   #
-  # @example Full tabs
-  #   entries = [link_to('one','#'), link_to('two','#')]
-  #   = render Bulmacomp::TabsComponent.new(entries: entries, id: 'ok') do
-  #     <li class="active"><a href='#'>three</a></li>
+  # @example tabs with full options
+  #   elements = [link_to('one','#'), link_to('two','#')]
+  #   = render Bulmacomp::TabsComponent.new(elements: elements, id: 'ok') do
+  #     %li some text
   #
   #   <div class="tabs" id="ok">
   #     <ul>
   #       <li><a href='#'>one</li>
   #       <li><a href='#'>two</li>
-  #       <li class="active"><a href='#'>three</a></li>
+  #       <li>some text</li>
   #     </ul>
   #   </div>
   class TabsComponent < ViewComponent::Base
     # @param [Hash] opts
     #   options to generate content
-    # @option opts [Array<String>] element
-    #   elements list for build tabs
+    # @param [Array<String>] elements
+    #   array of elements for tabs collection
     # @option opts [String] :*
-    #   each key going as tag option, default is class: 'tabs'
-    # @yield [optional] modal content
+    #   each other key going as tag option, default is class: 'tabs'
+    # @yield [optional] tabs content
     def initialize(elements: [], **opts)
       super
       @elements = elements
-      @opts = { class: 'tabs' }.merge opts
+      @opts = { class: 'tabs' }.merge(opts)
     end
 
-    # Generate safe string with full bulma tabs
-    # @return [String] html_safe generated bulma tabs
+    # @return [String] html_safe tabs
     def call
-      tag.div ulify, **@opts
+      tag.div tag.ul(ul_content), **@opts
     end
 
-    # generate a ul tag with map_elements and content
-    # @return [String]
-    def ulify
-      tag.ul safe_join([map_elements, content])
-    end
-
-    # Map elements in a li tag
-    # @return [String]
-    # @example
-    #   Bulmacomp::TabsComponent.new(elements).map_elements
-    #
-    #   <li>1</li><li>2</li><li>3</li>
-    def map_elements
-      safe_join(@elements.map { |e| tag.li e })
+    # @return [Text], safe join of elements arguments and proc content
+    def ul_content
+      safe_join([@elements.map { |e| tag.li(e) }, content])
     end
   end
 end

data/lib/bulmacomp/version.rb

@@ -1,6 +1,5 @@
 # frozen_string_literal: true
 
 module Bulmacomp
-  # Costant of bulmacomp version
-  VERSION = '0.1.1'
+  VERSION = '1.0.0' # Costant of bulmacomp version
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: bulmacomp
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 1.0.0
 platform: ruby
 authors:
 - MDreW
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-22 00:00:00.000000000 Z
+date: 2023-03-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -16,14 +16,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 7.0.4.2
+        version: '7.0'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 7.0.4.2
+        version: '7.0'
 description: Collection of view components for bulma css framework
 email:
 - andrea.ranaldi@gmail.com
@@ -36,6 +36,7 @@ files:
 - Rakefile
 - app/components/bulmacomp/breadcrumb_component.rb
 - app/components/bulmacomp/card_component.rb
+- app/components/bulmacomp/dropdown_component.rb
 - app/components/bulmacomp/menu_component.rb
 - app/components/bulmacomp/message_component.rb
 - app/components/bulmacomp/modal_component.rb
@@ -52,8 +53,8 @@ licenses:
 - MIT
 metadata:
   homepage_uri: https://github.com/isprambiente/bulmacomp
-  source_code_uri: https://github.com/MdreW/bulmacomp
-  changelog_uri: https://github.com/MdreW/bulmacomp
+  source_code_uri: https://github.com/isprambiente/bulmacomp
+  changelog_uri: https://github.com/isprambiente/bulmacomp
 post_install_message:
 rdoc_options: []
 require_paths: