practical 0.1.0

data/app/components/practical/views/modal_dialog_component.html.erb

@@ -0,0 +1,10 @@
+<%= tag.dialog(**finalized_options) do %>
+  <header>
+    <h2><%= header %></h2>
+    <form method="dialog">
+      <button class="wa-plain"><%= render icon_set.dialog_close_icon %></button>
+    </form>
+  </header>
+
+  <%= content %>
+<% end %>

data/app/components/practical/views/modal_dialog_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class Practical::Views::ModalDialogComponent < Practical::Views::BaseComponent
+  renders_one :header
+  attr_accessor :id, :open, :options
+
+  def initialize(id:, open: false, options: {})
+    self.open = open
+    self.id = id
+    self.options = options
+  end
+
+  def finalized_options
+    mix({id: id, open: open, data: {ensure_modal: true}, class: 'wa-dialog-stack-patch'}, options)
+  end
+end

data/app/components/practical/views/navigation/breadcrumb_item_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+class Practical::Views::Navigation::BreadcrumbItemComponent < Practical::Views::BaseComponent
+  renders_one :prefix
+  attr_accessor :options
+
+  def initialize(options: {})
+    self.options = options
+  end
+
+
+  def call
+    tag.wa_breadcrumb_item(**mix({}, options)) {
+      safe_join([
+        (prefix if prefix?),
+        content
+      ])
+    }
+  end
+end

data/app/components/practical/views/navigation/breadcrumbs_component.html.erb

@@ -0,0 +1,31 @@
+<%= tag.wa_breadcrumb(**finalized_options) do %>
+
+  <% if truncate_middle? %>
+    <% truncate_start.each do |crumb| %>
+      <%= build_crumb(crumb: crumb) %>
+    <% end %>
+
+    <wa-breadcrumb-item>
+      <wa-dropdown>
+        <wa-button slot="trigger" size="small" appearance="filled" pill>
+          <wa-icon label="More options" name="ellipsis" variant="solid"></wa-icon>
+        </wa-button>
+        <nav class="wa-stack wa-gap-xs dropdown-navigation">
+          <ul class="navigation-list">
+          <% truncated_items.each do |crumb| %>
+            <li><%= tag.a(crumb.name, href: (crumb.current? ? nil : crumb.url)) %></li>
+          <% end %>
+          </ul>
+        </nav>
+      </wa-dropdown>
+    </wa-breadcrumb-item>
+
+    <% truncate_end.each do |crumb| %>
+      <%= build_crumb(crumb: crumb) %>
+    <% end %>
+  <% else %>
+    <% breadcrumb_trail.each do |crumb| %>
+      <%= build_crumb(crumb: crumb) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/practical/views/navigation/breadcrumbs_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+class Practical::Views::Navigation::BreadcrumbsComponent < Practical::Views::BaseComponent
+  attr_accessor :breadcrumb_trail
+  attr_accessor :options
+
+  def initialize(breadcrumb_trail:, options: {})
+    self.breadcrumb_trail = breadcrumb_trail
+    self.options = options
+  end
+
+  def finalized_options
+    mix({}, options)
+  end
+
+  def crumbs_for_truncation
+    @crumbs_for_truncation ||= breadcrumb_trail.to_a
+  end
+
+  def truncate_middle?
+    crumbs_for_truncation.size > 5
+  end
+
+  def truncate_start
+    crumbs_for_truncation.first(1)
+  end
+
+  def truncate_end
+    crumbs_for_truncation.last(2)
+  end
+
+  def truncated_items
+    crumbs_for_truncation - truncate_start - truncate_end
+  end
+
+  def build_crumb(crumb:)
+    render(Practical::Views::Navigation::BreadcrumbItemComponent.new(options: { href: crumb.current? ? nil : crumb.url })) {
+      crumb.name
+    }
+  end
+end

data/app/components/practical/views/navigation/navigation_link_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+class Practical::Views::Navigation::NavigationLinkComponent < ApplicationComponent
+  attr_accessor :href, :options, :selected
+
+  renders_one :icon
+
+  def initialize(href:, selected:, options: {})
+    self.href = href
+    self.options = options
+    self.selected = selected
+  end
+
+  def flank_class
+    return "wa-flank wa-gap-2xs" if icon?
+  end
+
+  def selected?
+    return true if selected
+    return nil
+  end
+
+  def finalized_options
+    mix({
+      href: href,
+      class: helpers.class_names(flank_class, "navigation-link", "wa-accent"),
+      data: {selected: selected?}
+    }, options)
+  end
+
+  def call
+    tag.a(**finalized_options) {
+      safe_join([
+        (icon if icon?),
+        tag.span{ content }
+      ])
+    }
+  end
+end

data/app/components/practical/views/navigation/pagination/goto_form_component.html.erb

@@ -0,0 +1,31 @@
+<%= render Practical::Views::OpenDialogButtonComponent.new(dialog_id: dialog_id, appearance: "filled outlined", size: :small) do %>
+  <%= pagy_t('pagy.nav.gap').html_safe %>
+<% end %>
+
+<%= render Practical::Views::ModalDialogComponent.new(id: dialog_id) do |component| %>
+
+  <% component.with_header do %>
+    <%= pagy_t("pagy.nav.goto_page_form.legend") %>
+  <% end %>
+  <section class="wa-stack">
+    <p><%= page_detail_text %></p>
+    <%= helpers.webawesome_form_with(
+      url: uri_parts.uri.to_s,
+      method: :get,
+      local: true,
+      builder: NewApplicationFormBuilder,
+      class: 'pagination-goto-form wa-size-s'
+    ) do |f| %>
+      <% uri_parts.params.each do |key, value| %>
+        <%= hidden_field_for_goto_form(key: key, value: value) %>
+      <% end %>
+
+      <section class="wa-cluster">
+        <%= f.number_field :page, value: pagy.page, placeholder: pagy.page.to_s, required: true, min: 1, max: pagy.last %>
+        <%= f.button_component(type: :submit, color_variant: :neutral, appearance: :filled) do
+          pagy_t("pagy.nav.goto_page_form.button")
+        end %>
+      </section>
+    <% end %>
+  </section>
+<% end %>

data/app/components/practical/views/navigation/pagination/goto_form_component.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+class Practical::Views::Navigation::Pagination::GotoFormComponent < Practical::Views::BaseComponent
+  include Pagy::Frontend
+  attr_accessor :pagy, :dialog_id, :page_detail_text
+
+  URIParts = Data.define(:uri, :params)
+
+  def initialize(pagy:, dialog_id:, page_detail_text:)
+    self.pagy = pagy
+    self.dialog_id = dialog_id
+    self.page_detail_text = page_detail_text
+  end
+
+  def uri_parts
+    uri = URI.parse(pagy_url_for(pagy, nil))
+    params = Rack::Utils.parse_query(uri.query)
+    params.delete("page")
+    uri.query = ""
+
+    URIParts.new(uri: uri, params: params)
+  end
+
+  def hidden_field_for_goto_form(key:, value:)
+    case value
+    when Array
+      value.each do |x|
+        helpers.hidden_field_tag key, x
+      end
+    else
+      helpers.hidden_field_tag key, value
+    end
+  end
+end

data/app/components/practical/views/navigation/pagination_component.html.erb

@@ -0,0 +1,11 @@
+<nav class="wa-stack pagination wa-size-s wa-gap-0">
+  <p><%= page_detail_text %></p>
+
+  <section class="wa-cluster">
+    <%= previous_item %>
+    <% pagy.series.each do |item| %>
+      <%= page_item(item) %>
+    <% end %>
+    <%= next_item %>
+  </section>
+</nav>

data/app/components/practical/views/navigation/pagination_component.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+class Practical::Views::Navigation::PaginationComponent < ApplicationComponent
+  include Pagy::Frontend
+  attr_reader :request
+  attr_accessor :pagy, :item_name, :i18n_key
+
+  def initialize(pagy:, request:, item_name: nil, i18n_key: nil)
+    @pagy = pagy
+    @request = request
+    @item_name = item_name
+    @i18n_key = i18n_key
+  end
+
+  def page_detail_text
+    pagy_count = pagy.count
+    if pagy_count == 0
+      key = "pagy.info.no_items"
+    elsif pagy.pages == 1
+      key = "pagy.info.single_page"
+    else
+      key = "pagy.info.multiple_pages"
+    end
+
+    item_name = item_name.presence || pagy_t(i18n_key || pagy.vars[:i18n_key], count: pagy_count)
+
+    item_text = pagy_t(key,
+                       item_name: item_name,
+                       count: pagy_count, from: pagy.from, to: pagy.to
+    )
+
+    page_count_text = pagy_t("pagy.info.page_count", page: pagy.page, count: pagy.pages)
+
+    return pagy_t("pagy.info.page_detail_text", item_text: item_text, page_count_text: page_count_text)
+  end
+
+  def previous_item
+    classes = helpers.class_names(:page, :previous, disabled: !pagy.prev)
+
+    text = icon_text(
+      icon: icon_set.previous_arrow,
+      text: pagy_t('pagy.nav.v2_prev')
+    )
+
+    tag.div(class: classes, role: :listitem){
+      if pagy.prev
+        tag.a(href: pagy_url_for(pagy, pagy.prev), title: pagy_t("pagy.nav.prev_page_title")) {
+          text
+        }
+      else
+        text
+      end
+    }
+  end
+
+  def next_item
+    classes = helpers.class_names(:page, :next, disabled: !pagy.next)
+
+    text = icon_text(
+      icon: icon_set.next_arrow,
+      text: pagy_t('pagy.nav.v2_next')
+    )
+
+    tag.div(class: classes, role: :listitem){
+      if pagy.next
+        tag.a(href: pagy_url_for(pagy, pagy.next), title: pagy_t("pagy.nav.next_page_title")) {
+          text
+        }
+      else
+        text
+      end
+    }
+  end
+
+  def goto_page_dialog_id
+    return [item_name, "pagy-goto-form"].compact.join("-")
+  end
+
+  def page_item(item)
+    case item
+    when Integer
+      tag.div(class: :page, role: :listitem) {
+        tag.a(item, href: pagy_url_for(pagy, item), title: pagy_t("pagy.nav.page_title", page_number: item))
+      }
+    when String
+      tag.div(
+        item,
+        class: "page current", role: :listitem, title: pagy_t("pagy.nav.current_page_title", page_number: item)
+      )
+    when :gap
+      render Practical::Views::Navigation::Pagination::GotoFormComponent.new(
+        pagy: pagy,
+        dialog_id: goto_page_dialog_id,
+        page_detail_text: page_detail_text
+      )
+    end
+  end
+end

data/app/components/practical/views/open_dialog_button_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class Practical::Views::OpenDialogButtonComponent < Practical::Views::ButtonComponent
+  attr_accessor :dialog_id
+
+  def initialize(dialog_id:, appearance: nil, color_variant: nil, size: nil, options: {})
+    options = options.with_defaults(
+      onclick: self.class.inline_js_to_open_dialog(dialog_id: dialog_id)
+    )
+    super(type: :button, appearance: appearance, color_variant: color_variant, size: size, options: options)
+  end
+
+  def self.inline_js_to_open_dialog(dialog_id:)
+    return "document.getElementById(`#{dialog_id}`).showModal()"
+  end
+end

data/app/components/practical/views/page_component.html.erb

@@ -0,0 +1,53 @@
+<wa-page>
+  <% if banner? %>
+    <section slot="banner">
+      <%= banner %>
+    </section>
+  <% end %>
+
+  <% if header? %>
+    <header slot="header">
+      <%= header %>
+    </header>
+  <% end %>
+
+  <% if subheader? %>
+    <section slot="subheader">
+      <%= subheader %>
+    </section>
+  <% end %>
+
+  <% if navigation_header? %>
+    <nav slot="navigation-header">
+      <%= navigation_header %>
+    </nav>
+  <% end %>
+
+  <% if navigation? %>
+    <nav slot="navigation">
+      <%= navigation %>
+    </nav>
+  <% end %>
+
+  <% if navigation_footer? %>
+    <nav slot="navigation-footer">
+      <%= navigation_footer %>
+    </nav>
+  <% end %>
+
+  <% if main_header? %>
+    <aside slot="main-header">
+      <%= main_header %>
+    </aside>
+  <% end %>
+
+  <main class="wa-body-l">
+    <%= content %>
+  </main>
+
+  <% if footer? %>
+    <footer slot="footer">
+      <%= footer %>
+    </footer>
+  <% end %>
+</wa-page>

data/app/components/practical/views/page_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class Practical::Views::PageComponent < Practical::Views::BaseComponent
+  renders_one :banner
+  renders_one :header
+  renders_one :subheader
+  renders_one :footer
+  renders_one :main_header
+  renders_one :navigation
+  renders_one :navigation_header
+  renders_one :navigation_footer
+end

data/app/components/practical/views/relative_time_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+class Practical::Views::RelativeTimeComponent < ApplicationComponent
+  attr_accessor :time
+
+  def initialize(time:)
+    @time = time
+  end
+
+  def call
+    tag.wa_relative_time(helpers.time_ago_in_words(time), date: time.iso8601)
+  end
+end