bulma-phlex 0.7.0 → 0.8.0

data/lib/bulma_phlex/pagination.rb

@@ -0,0 +1,121 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # Pagination component for navigating through multi-page content
+  #
+  # This component implements the [Bulma pagination](https://bulma.io/documentation/components/pagination/)
+  # interface, providing navigation controls for paginated content. It shows:
+  # - Previous/next page links
+  # - First/last page links when appropriate
+  # - Current page indicator
+  # - Ellipses for skipped page ranges
+  # - Summary of items being displayed
+  #
+  # ## Example
+  #
+  # ```ruby
+  # # In a controller action:
+  # @products = Product.page(params[:page]).per(20)
+  #
+  # # In the view:
+  # BulmaPhlex::Pagination(@products, ->(page) { products_path(page: page) })
+  # ```
+  #
+  class Pagination < BulmaPhlex::Base
+    attr_reader :pager, :path_builder
+
+    # Initializes the pagination component
+    #
+    # @param pager [Object] An object that responds to:
+    #   - `current_page` - Integer representing the current page number
+    #   - `total_pages` - Integer representing the total number of pages
+    #   - `per_page` - Integer representing the number of items per page
+    #   - `total_count` - Integer representing the total number of items
+    #   - `previous_page` - Integer or nil representing the previous page number
+    #   - `next_page` - Integer or nil representing the next page number
+    # @param path_builder [Proc] A callable that takes a page number and returns a URL string
+    def initialize(pager, path_builder)
+      @pager = pager
+      @path_builder = path_builder
+    end
+
+    def view_template
+      return unless pager.total_pages > 1
+
+      div(class: "pagination-container mt-5") do
+        nav(class: "pagination", role: "navigation", aria_label: "pagination") do
+          # Previous page link
+          if pager.previous_page
+            a(class: "pagination-previous", href: page_url(pager.previous_page)) { "Previous" }
+          else
+            a(class: "pagination-previous", disabled: true) { "Previous" }
+          end
+
+          # Next page link
+          if pager.next_page
+            a(class: "pagination-next", href: page_url(pager.next_page)) { "Next" }
+          else
+            a(class: "pagination-next", disabled: true) { "Next" }
+          end
+
+          # Page number links
+          ul(class: "pagination-list") do
+            # First page and ellipsis if needed
+            if pager.current_page > 3
+              render_page_item(1)
+              render_ellipsis if pager.current_page > 4
+            end
+
+            # Pages around current page
+            page_window.each do |page_number|
+              render_page_item(page_number)
+            end
+
+            # Ellipsis and last page if needed
+            if pager.current_page < pager.total_pages - 2
+              render_ellipsis if pager.current_page < pager.total_pages - 3
+              render_page_item(pager.total_pages)
+            end
+          end
+        end
+
+        div(class: "has-text-centered mt-2 is-size-7") do
+          start_item = ((pager.current_page - 1) * pager.per_page) + 1
+          end_item = [start_item + pager.per_page - 1, pager.total_count].min
+
+          plain "Showing #{start_item}-#{end_item} of #{pager.total_count} items"
+        end
+      end
+    end
+
+    private
+
+    def render_page_item(page_number)
+      li do
+        if page_number == pager.current_page
+          a(class: "pagination-link is-current",
+            aria_label: "Page #{page_number}",
+            aria_current: "page") { page_number.to_s }
+        else
+          a(class: "pagination-link",
+            href: page_url(page_number),
+            aria_label: "Go to page #{page_number}") { page_number.to_s }
+        end
+      end
+    end
+
+    def render_ellipsis
+      li { span(class: "pagination-ellipsis") { "…" } }
+    end
+
+    def page_window
+      start_page = [pager.current_page - 2, 1].max
+      end_page = [pager.current_page + 2, pager.total_pages].min
+      (start_page..end_page).to_a
+    end
+
+    def page_url(page_number)
+      @path_builder.call(page_number)
+    end
+  end
+end

data/lib/bulma_phlex/tab_components/content.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  module TabComponents
+    # # Content
+    #
+    # This component represents a single content section within the Bulma Tabs component.
+    #
+    # ## Arguments:
+    # - `id`: Unique identifier for the content.
+    # - `active`: Boolean indicating if the content is currently active.
+    # - `data_attributes_proc`: A proc that generates data attributes for the content.
+    class Content < BulmaPhlex::Base
+      def initialize(id:, active:, data_attributes_proc: nil)
+        @id = id
+        @active = active
+        @data_attributes = data_attributes_proc ||
+                           BulmaPhlex::Tabs::StimulusDataAttributes.new("bulma-phlex--tabs").method(:for_content)
+      end
+
+      def view_template(&)
+        div(id: @id,
+            class: @active ? "" : "is-hidden",
+            data: @data_attributes.call(@id), &)
+      end
+    end
+  end
+end

data/lib/bulma_phlex/tab_components/tab.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  module TabComponents
+    # # Tab
+    #
+    # This component represents a single tab within the Bulma Tabs component.
+    #
+    # The component can be used if you need to create or update a tab dynamically.
+    #
+    # ## Arguments
+    #
+    # - `id`: Unique identifier for the tab.
+    # - `title`: The text displayed on the tab.
+    # - `icon`: Optional icon to display on the tab.
+    # - `active`: Boolean indicating if the tab is currently active.
+    # - `data_attributes_proc`: A proc that generates data attributes for the tab.
+    class Tab < BulmaPhlex::Base
+      def initialize(id:, title:, icon:, active:,
+                     data_attributes_proc: BulmaPhlex::Tabs::StimulusDataAttributes.new("bulma-phlex--tabs").method(:for_tab))
+        @id = id
+        @title = title
+        @icon = icon
+        @active = active
+        @data_attributes_proc = data_attributes_proc
+      end
+
+      def view_template(&)
+        li(
+          id: "#{@id}-tab",
+          data: @data_attributes_proc.call(@id),
+          class: @active ? "is-active" : ""
+        ) do
+          a do
+            icon_span(@icon, "mr-1") if @icon
+            span { @title }
+          end
+        end
+      end
+    end
+  end
+end

data/lib/bulma_phlex/table.rb

@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # Table component for data display
+  #
+  # This component implements the [Bulma table](https://bulma.io/documentation/elements/table/)
+  # interface, providing a way to display data in rows and columns with customizable
+  # headers and formatting options.
+  #
+  # ## Example
+  #
+  # ```ruby
+  # users = User.all
+  #
+  # BulmaPhlex::Table(users) do |table|
+  #   table.column "Name" do |user|
+  #     user.full_name
+  #   end
+  #
+  #   table.column "Email" do |user|
+  #     user.email
+  #   end
+  #
+  #   table.column "Actions" do |user|
+  #     link_to "Edit", edit_user_path(user), class: "button is-small"
+  #   end
+  # end
+  # ```
+  #
+  class Table < BulmaPhlex::Base
+    def initialize(rows, id_or_options = nil, **options)
+      @rows = rows
+      @id, @table_class = parse_id_and_options(id_or_options, options, rows)
+      @columns = []
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      table(id: @id, class: @table_class) do
+        thead do
+          @columns.each do |column|
+            table_header(column)
+          end
+        end
+
+        tbody do
+          @rows.each do |row|
+            tr do
+              @columns.each do |column|
+                td(**column[:html_attributes]) { column[:content].call(row) }
+              end
+            end
+          end
+        end
+
+        pagination
+      end
+    end
+
+    def column(header, **html_attributes, &content)
+      @columns << { header:, html_attributes:, content: }
+    end
+
+    def date_column(header, format: "%Y-%m-%d", **html_attributes, &content)
+      column(header, **html_attributes) do |row|
+        content.call(row)&.strftime(format)
+      end
+    end
+
+    def conditional_icon(header, icon_class: "fas fa-check", **html_attributes, &content)
+      html_attributes[:class] = [html_attributes[:class], "has-text-centered"].compact.join(" ")
+
+      column(header, **html_attributes) do |row|
+        icon_span(icon_class) if content.call(row)
+      end
+    end
+
+    def paginate(&path_builder)
+      @path_builder = path_builder
+    end
+
+    private
+
+    def parse_id_and_options(id_or_options, options, rows)
+      if id_or_options.is_a?(String)
+        id = id_or_options
+        opts = options
+      else
+        opts = (id_or_options || {}).merge(options)
+        id = opts.delete(:id) || id_from_array_or_arel(rows)
+      end
+      table_class = "table #{parse_table_classes(opts)}"
+      [id, table_class]
+    end
+
+    def id_from_array_or_arel(rows)
+      if rows.respond_to? :model
+        rows.model.model_name.plural
+      elsif rows.empty?
+        "table"
+      else
+        rows.first.model_name.plural
+      end
+    rescue StandardError
+      "table"
+    end
+
+    def parse_table_classes(options)
+      options.slice(*%i[bordered striped narrow hoverable fullwidth])
+             .transform_keys { |key| "is-#{key}" }
+             .select { |_, value| value }
+             .keys
+             .join(" ")
+    end
+
+    # this derives a th class from the column html attributes
+    # perhaps a better way would be pre-defined pairs?
+    def table_header(column)
+      attributes = {}
+      attributes[:class] = header_alignment(column[:html_attributes])
+      th(**attributes) { column[:header] }
+    end
+
+    def header_alignment(html_attributes)
+      classes = html_attributes[:class]
+      return if classes.nil?
+
+      if classes&.include?("has-text-right") || classes&.include?("amount-display")
+        "has-text-right"
+      elsif classes&.include?("has-text-centered")
+        "has-text-centered"
+      end
+    end
+
+    def pagination
+      return unless @path_builder
+
+      tfoot do
+        tr do
+          td(class: "py-0", colspan: @columns.size) do
+            Pagination(@rows, @path_builder)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/bulma_phlex/tabs.rb

@@ -0,0 +1,117 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # Tabs component for toggling between different content sections
+  #
+  # This component implements the [Bulma tabs](https://bulma.io/documentation/components/tabs/)
+  # interface, providing a way to toggle between different content sections using
+  # tabbed navigation. Includes support for icons and active state management.
+  #
+  # Classes can be assigned to either the tabs or contents wrappers. The tabs div is where Bulma
+  # options such as `is-boxed`, `is-centered`, or `is-small` can be added.
+  #
+  # Use method `right_content` to add content to the right of the tabs, such as a button.
+  #
+  # The tabs behavior can be managed by the data attributes provided by the `data_attributes_builder` argument. By
+  # default, this will use the `StimulusDataAttributes` class with the controller name `bulma-phlex--tabs`. That
+  # controlleris not provided by this library, but you can create your own Stimulus controller to handle the tab
+  #  switching logic. Here is [an implementation of a Stimulus controller for Bulma tabs](https://github.com/RockSolt/bulma-rails-helpers/blob/main/app/javascript/controllers/bulma/tabs_controller.js).
+  #
+  # ## Example
+  #
+  # ```ruby
+  # BulmaPhlex::Tabs() do |tabs|
+  #   tabs.tab(id: "profile", title: "Profile", active: true) do
+  #     "Profile content goes here"
+  #   end
+  #
+  #   tabs.tab(id: "settings", title: "Settings", icon: "fas fa-cog") do
+  #     "Settings content goes here"
+  #   end
+  #
+  #   tabs.tab(id: "notifications", title: "Notifications", icon: "fas fa-bell") do
+  #     "Notifications content goes here"
+  #   end
+  # end
+  # ```
+  #
+  class Tabs < BulmaPhlex::Base
+    StimulusDataAttributes = Data.define(:stimulus_controller) do
+      def for_container
+        { controller: stimulus_controller }
+      end
+
+      def for_tab(id)
+        {
+          target_key => "tab",
+          tab_content: id,
+          action: "click->#{stimulus_controller}#showTabContent"
+        }
+      end
+
+      def for_content(_id)
+        { target_key => "content" }
+      end
+
+      private
+
+      def target_key
+        "#{stimulus_controller}-target"
+      end
+    end
+
+    def initialize(id: nil, tabs_class: nil, contents_class: nil,
+                   data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--tabs"))
+      @id = id || "tabs"
+      @tabs_class = tabs_class
+      @contents_class = contents_class
+      @data_attributes_builder = data_attributes_builder
+      @tabs = []
+      @contents = []
+    end
+
+    def tab(id:, title:, icon: nil, active: false, &)
+      @tabs << TabComponents::Tab.new(id:, title:, icon:, active:,
+                                      data_attributes_proc: @data_attributes_builder.method(:for_tab))
+      @contents << TabComponents::Content.new(id:, active:,
+                                              data_attributes_proc: @data_attributes_builder.method(:for_content),
+                                              &)
+    end
+
+    def right_content(&content)
+      @right_content = content
+    end
+
+    def view_template(&)
+      vanish(&)
+
+      div(id: @id, data: @data_attributes_builder.for_container) do
+        build_tabs_with_optional_right_content
+        div(id: "#{@id}-content", class: @contents_class) { build_content }
+      end
+    end
+
+    private
+
+    def build_tabs_with_optional_right_content
+      return build_tabs if @right_content.nil?
+
+      div(class: "columns") do
+        div(class: "column") { build_tabs }
+        div(class: "column is-narrow") { @right_content.call }
+      end
+    end
+
+    def build_tabs
+      div(class: "tabs #{@tabs_class}".strip) do
+        ul(id: "#{@id}-tabs") do
+          @tabs.each { render it }
+        end
+      end
+    end
+
+    def build_content
+      @contents.each { render it }
+    end
+  end
+end

data/lib/bulma_phlex/tag.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # # Tag
+  #
+  # The Tag component is a bit of a chameleon. It can generate a `span`, `a`, or `button` element
+  # based on the provided attributes. If an `href` attribute is provided, the tag will render as an `a` element. If
+  # the `delete` option is true or a `data-action` attribute is present, it will render as a `button` element.
+  #  Otherwise, it defaults to a `span` element.
+  #
+  # ## Options
+  #
+  # - `delete`: If true, adds a delete button inside the tag.
+  # - `color`: Sets the [color of the tag](https://bulma.io/documentation/elements/tag/#colors)
+  # - `light`: To use a light version of the color, use the key `light` instead of `color`.
+  # - `size`: Sets the [size of the tag](https://bulma.io/documentation/elements/tag/#sizes): normal, medium, or large.
+  # - `rounded`: If true, adds the `is-rounded` class to the tag.
+  #
+  # ## HTML Attributes
+  #
+  # Any additional HTML attributes provided will be applied to the rendered element.
+  class Tag < BulmaPhlex::Base
+    TAG_OPTIONS = %i[delete color light size rounded].freeze
+
+    def initialize(text, **options_and_html_attributes)
+      @text = text
+      @html_attributes = options_and_html_attributes.except(*TAG_OPTIONS)
+      @options = options_and_html_attributes.slice(*TAG_OPTIONS)
+    end
+
+    def view_template
+      if @html_attributes.key?(:href)
+        a(class: tag_classes, **@html_attributes) { text_and_optional_delete_button }
+      elsif @options[:delete] || @html_attributes.dig(:data, :action).present?
+        button(class: tag_classes, **@html_attributes) { text_and_optional_delete_button }
+      else
+        span(class: tag_classes, **@html_attributes) { plain @text }
+      end
+    end
+
+    private
+
+    def text_and_optional_delete_button
+      plain @text
+      return unless @options[:delete]
+
+      size = "is-small" unless @options[:size] == "large"
+      span(class: "delete #{size}".rstrip)
+    end
+
+    def tag_classes
+      classes = ["tag"]
+      classes << "is-#{@options[:color]}" if @options[:color].present?
+      classes << "is-#{@options[:light]} is-light" if @options[:light]
+      classes << "is-#{@options[:size]}" if @options[:size].present?
+      classes << "is-rounded" if @options[:rounded]
+      classes.join(" ")
+    end
+  end
+end

data/lib/bulma_phlex/title.rb

@@ -0,0 +1,57 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # # Title
+  #
+  # This component implements the
+  # [Bulma title element](https://bulma.io/documentation/elements/title/). It can optionally
+  # include a subtitle as well.
+  #
+  # ## Parameters
+  #
+  # - `text`: (positional, required) The main title text to display.
+  # - `size`: (optional) An integer from 1 to 6 indicating the size of the title. Corresponds to
+  #     Bulma's `is-<size>` classes.
+  # - `subtitle`: (optional) The subtitle text to display below the main title.
+  # - `subtitle_size`: (optional) An integer from 1 to 6 indicating the size of the subtitle. If
+  #     not provided and a title size is given, it defaults to `size + 2`.
+  # - `spaced`: (optional) A boolean indicating whether to add the `is-spaced` class to the title.
+  #
+  # ## Example
+  #
+  # ```ruby
+  # BulmaPhlex::Title("Hello World")
+  # BulmaPhlex::Title("Dr. Strangelove", size: 2, subtitle: "Or: How I Learned to Stop Worrying and
+  #   Love the Bomb")
+  # ```
+  class Title < BulmaPhlex::Base
+    def initialize(text, size: nil, subtitle: nil, subtitle_size: nil, spaced: false)
+      @text = text
+      @size = size
+      @subtitle = subtitle
+      @subtitle_size = subtitle_size
+      @spaced = spaced
+    end
+
+    def view_template
+      h1(class: title_classes) { @text }
+      h2(class: subtitle_classes) { @subtitle } if @subtitle
+    end
+
+    private
+
+    def title_classes
+      classes = ["title"]
+      classes << "is-#{@size}" if @size
+      classes << "is-spaced" if @spaced
+      classes.join(" ")
+    end
+
+    def subtitle_classes
+      @subtitle_size = @size + 2 if @size && !@subtitle_size
+      classes = ["subtitle"]
+      classes << "is-#{@subtitle_size}" if @subtitle_size
+      classes.join(" ")
+    end
+  end
+end

data/lib/bulma_phlex/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module BulmaPhlex
-  VERSION = "0.7.0"
+  VERSION = "0.8.0"
 end

data/lib/{components/bulma.rb → bulma_phlex.rb}

@@ -1,13 +1,17 @@
 # frozen_string_literal: true
 
+require "phlex"
+require "zeitwerk"
+
+loader = Zeitwerk::Loader.for_gem
+loader.ignore("#{__dir__}/bulma-phlex.rb")
+loader.setup # ready!
+
 # A collection of Bulma components built with Phlex
 #
 # This module provides a set of components that implement the [Bulma CSS framework](https://bulma.io/)
 # using the Phlex view component library. These components make it easy to build
-# Bulma-styled applications with a Ruby-focused component API.
-#
-module Components
-  module Bulma
-    extend Phlex::Kit
-  end
+# Bulma-styled applications with a Ruby-focused components.
+module BulmaPhlex
+  extend Phlex::Kit
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex
 version: !ruby/object:Gem::Version
-  version: 0.7.0
+  version: 0.8.0
 platform: ruby
 authors:
 - Todd Kummer
@@ -37,34 +37,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-- !ruby/object:Gem::Dependency
-  name: actionview
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-- !ruby/object:Gem::Dependency
-  name: activesupport
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
 - !ruby/object:Gem::Dependency
   name: minitest-difftastic
   requirement: !ruby/object:Gem::Requirement
@@ -90,22 +62,21 @@ files:
 - README.md
 - Rakefile
 - lib/bulma-phlex.rb
-- lib/bulma_phlex/rails/card_helper.rb
-- lib/bulma_phlex/rails/table_helper.rb
-- lib/bulma_phlex/railtie.rb
+- lib/bulma_phlex.rb
+- lib/bulma_phlex/base.rb
+- lib/bulma_phlex/card.rb
+- lib/bulma_phlex/dropdown.rb
+- lib/bulma_phlex/level.rb
+- lib/bulma_phlex/navigation_bar.rb
+- lib/bulma_phlex/navigation_bar_dropdown.rb
+- lib/bulma_phlex/pagination.rb
+- lib/bulma_phlex/tab_components/content.rb
+- lib/bulma_phlex/tab_components/tab.rb
+- lib/bulma_phlex/table.rb
+- lib/bulma_phlex/tabs.rb
+- lib/bulma_phlex/tag.rb
+- lib/bulma_phlex/title.rb
 - lib/bulma_phlex/version.rb
-- lib/components/bulma.rb
-- lib/components/bulma/base.rb
-- lib/components/bulma/card.rb
-- lib/components/bulma/dropdown.rb
-- lib/components/bulma/level.rb
-- lib/components/bulma/navigation_bar.rb
-- lib/components/bulma/navigation_bar_dropdown.rb
-- lib/components/bulma/pagination.rb
-- lib/components/bulma/tab_components/content.rb
-- lib/components/bulma/tab_components/tab.rb
-- lib/components/bulma/table.rb
-- lib/components/bulma/tabs.rb
 homepage: https://github.com/RockSolt/bulma-phlex
 licenses:
 - MIT