silex_ui 0.1.0

data/app/components/silex_ui/empty_state_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Ce qu'on voit quand il n'y a rien à voir. Un message, et si possible la seule
+  # action qui remplit l'écran.
+  class EmptyStateComponent < BaseComponent
+    def initialize(message:, **options)
+      @message = message
+      super(**options)
+    end
+
+    attr_reader :message
+
+    def call
+      tag.div(class: merge_class("py-20 text-center text-sm font-light text-ink-400")) do
+        safe_join([ tag.p(message), (tag.div(content, class: "mt-4") if content?) ].compact)
+      end
+    end
+  end
+end

data/app/components/silex_ui/field_component.html.erb

@@ -0,0 +1,18 @@
+<div class="<%= css_classes %>">
+  <% if boolean? %>
+    <%= input %>
+    <%= form.label attribute, label_text, class: "text-sm font-light text-ink-600" %>
+  <% else %>
+    <%= form.label attribute, label_text,
+          class: "mb-2 block text-xs font-light tracking-widest text-ink-600 uppercase" %>
+    <%= input %>
+  <% end %>
+
+  <% if hint.present? %>
+    <p class="mt-1 text-xs font-light text-ink-400"><%= hint %></p>
+  <% end %>
+
+  <% if errors? %>
+    <p class="mt-1 text-xs font-light text-alert-700"><%= errors.to_sentence %></p>
+  <% end %>
+</div>

data/app/components/silex_ui/field_component.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Champ de formulaire : libellé, champ, aide, erreurs. Version Tailwind, très
+  # réduite, du FormInputComponent du Silex — un seul chemin par type de champ.
+  #
+  #   <%= render SilexUi::FieldComponent.new(form: f, attribute: :domain, label: "Domaine") %>
+  #   <%= render SilexUi::FieldComponent.new(form: f, attribute: :registrar, type: :select,
+  #         collection: Website.registrars.keys, include_blank: "—") %>
+  class FieldComponent < BaseComponent
+    INPUT_CLASS = "w-full rounded-sm border border-sand-300 bg-white text-sm font-light " \
+                  "text-ink-900 placeholder:text-ink-400 focus:border-ink-900 focus:outline-none"
+
+    # Deux densités : serrée pour les barres de filtres, aérée pour les pages de
+    # formulaire où le champ est le sujet.
+    SIZES = { md: "px-3 py-2", lg: "px-4 py-3" }.freeze
+
+    TEXT_TYPES = %i[text email password url tel number date datetime search].freeze
+
+    def initialize(form:, attribute:, label: nil, type: :text, size: :md, hint: nil, collection: nil,
+                   include_blank: nil, selected: nil, input_html: {}, **options)
+      @form = form
+      @attribute = attribute
+      @label = label
+      @type = type.to_sym
+      @size = SIZES.key?(size.to_sym) ? size.to_sym : :md
+      @hint = hint
+      @collection = collection
+      @include_blank = include_blank
+      @selected = selected
+      @input_html = input_html
+      super(**options)
+    end
+
+    attr_reader :form, :attribute, :hint
+
+    def label_text
+      @label || attribute.to_s.humanize
+    end
+
+    def errors
+      object = form.object
+      return [] unless object.respond_to?(:errors)
+
+      object.errors.full_messages_for(attribute)
+    end
+
+    def errors?
+      errors.any?
+    end
+
+    def input
+      case @type
+      when :select
+        raise ArgumentError, "collection is required for a select field" if @collection.nil?
+
+        form.select(attribute, @collection, { include_blank: @include_blank, selected: @selected }, field_html)
+      when :textarea
+        form.text_area(attribute, field_html)
+      when :boolean
+        form.check_box(attribute, field_html.merge(class: checkbox_class))
+      when *TEXT_TYPES
+        form.public_send(:"#{@type == :text ? 'text' : @type}_field", attribute, field_html)
+      else
+        form.text_field(attribute, field_html)
+      end
+    end
+
+    def boolean?
+      @type == :boolean
+    end
+
+    def checkbox_class
+      "cursor-pointer rounded-sm border-sand-300 text-ink-900 focus:ring-0"
+    end
+
+    def css_classes
+      merge_class(boolean? ? "flex flex-wrap items-center gap-2" : "block")
+    end
+
+    private
+
+    def field_html
+      classes = class_names(INPUT_CLASS, SIZES[@size], ("border-alert-700" if errors?), @input_html[:class])
+      @input_html.merge(class: classes)
+    end
+  end
+end

data/app/components/silex_ui/flash_component.html.erb

@@ -0,0 +1,6 @@
+<div class="<%= css_classes %>">
+  <% messages.each do |item| %>
+    <%= render SilexUi::AlertComponent.new(text: item[:message], tone: item[:tone],
+          class: "w-full max-w-md shadow-sm") %>
+  <% end %>
+</div>

data/app/components/silex_ui/flash_component.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Les messages flash de Rails, traduits en tons. À poser une fois dans le
+  # layout ; le composant ne rend rien quand il n'y a rien à dire.
+  #
+  #   <%= render SilexUi::FlashComponent.new(flash: flash) %>
+  class FlashComponent < BaseComponent
+    # Rails ne connaît que `notice` et `alert` ; les applications ajoutent le
+    # reste. Tout ce qui n'est pas reconnu passe en neutre plutôt qu'en erreur.
+    TONE_FOR = {
+      "notice" => :ok,
+      "success" => :ok,
+      "info" => :info,
+      "warning" => :warn,
+      "warn" => :warn,
+      "alert" => :alert,
+      "error" => :alert
+    }.freeze
+
+    def initialize(flash:, **options)
+      @flash = flash
+      super(**options)
+    end
+
+    def messages
+      @flash.to_h.filter_map do |type, message|
+        next if message.blank?
+
+        { tone: TONE_FOR.fetch(type.to_s, :neutral), message: message }
+      end
+    end
+
+    def render?
+      messages.any?
+    end
+
+    def css_classes
+      merge_class("fixed inset-x-0 top-0 z-50 flex flex-col items-center gap-2 p-4")
+    end
+  end
+end

data/app/components/silex_ui/modal_component.html.erb

@@ -0,0 +1,24 @@
+<div data-controller="silex-ui--modal">
+  <% if trigger? %>
+    <span data-action="click->silex-ui--modal#open"><%= trigger %></span>
+  <% end %>
+
+  <dialog id="<%= id %>" class="<%= css_classes %>"
+          data-silex-ui--modal-target="dialog"
+          data-action="click->silex-ui--modal#closeOnBackdrop">
+    <div class="flex items-baseline justify-between gap-4">
+      <% if title.present? %>
+        <h2 class="text-xs font-light tracking-widest text-ink-400 uppercase"><%= title %></h2>
+      <% end %>
+
+      <button type="button" aria-label="Fermer" data-action="silex-ui--modal#close"
+              class="cursor-pointer text-ink-400 transition hover:text-ink-900">&times;</button>
+    </div>
+
+    <div class="mt-4"><%= content %></div>
+
+    <% if footer? %>
+      <div class="mt-6 flex flex-wrap items-center justify-end gap-3"><%= footer %></div>
+    <% end %>
+  </dialog>
+</div>

data/app/components/silex_ui/modal_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Fenêtre modale bâtie sur `<dialog>` : le navigateur gère le focus, la touche
+  # Échap et le fond inerte ; le contrôleur Stimulus ne fait qu'ouvrir et fermer.
+  #
+  #   <%= render SilexUi::ModalComponent.new(id: "confirm", title: "Supprimer ?") do |modal| %>
+  #     <% modal.with_trigger do %>
+  #       <%= render SilexUi::ButtonComponent.new(label: "Supprimer", variant: :danger) %>
+  #     <% end %>
+  #     <p>Cette action est définitive.</p>
+  #     <% modal.with_footer do %>…<% end %>
+  #   <% end %>
+  class ModalComponent < BaseComponent
+    renders_one :trigger
+    renders_one :footer
+
+    def initialize(id:, title: nil, **options)
+      @id = id
+      @title = title
+      super(**options)
+    end
+
+    attr_reader :id, :title
+
+    def css_classes
+      merge_class(
+        "m-auto w-full max-w-lg rounded-sm border border-sand-200 bg-white p-6",
+        "text-sm font-light text-ink-600 backdrop:bg-ink-900/30"
+      )
+    end
+  end
+end

data/app/components/silex_ui/nav_component.html.erb

@@ -0,0 +1,15 @@
+<nav class="<%= css_classes %>">
+  <div class="flex min-w-0 flex-wrap items-baseline gap-x-8 gap-y-4">
+    <% if brand.present? %>
+      <%= link_to brand, brand_href || "/", class: "text-sm font-light tracking-[0.2em] text-ink-900 uppercase" %>
+    <% end %>
+
+    <% if items.any? %>
+      <div class="flex flex-wrap gap-x-6 gap-y-3 text-sm font-light"><%= safe_join(items) %></div>
+    <% end %>
+  </div>
+
+  <% if aside? %>
+    <div class="flex items-center gap-5 text-sm font-light text-ink-600"><%= aside %></div>
+  <% end %>
+</nav>

data/app/components/silex_ui/nav_component.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Barre de navigation : la marque, les sections, et ce qui concerne l'utilisateur.
+  #
+  #   <%= render SilexUi::NavComponent.new(brand: "Network", brand_href: root_path) do |nav| %>
+  #     <% nav.with_item(label: "Sites", href: websites_path, active: controller_name == "websites") %>
+  #     <% nav.with_aside do %><%= current_user.display_name %><% end %>
+  #   <% end %>
+  class NavComponent < BaseComponent
+    renders_many :items, "ItemComponent"
+    renders_one :aside
+
+    def initialize(brand: nil, brand_href: nil, **options)
+      @brand = brand
+      @brand_href = brand_href
+      super(**options)
+    end
+
+    attr_reader :brand, :brand_href
+
+    def css_classes
+      merge_class("flex flex-wrap items-center justify-between gap-5 border-b border-sand-200 py-5")
+    end
+
+    class ItemComponent < ViewComponent::Base
+      def initialize(label:, href:, active: false)
+        @label = label
+        @href = href
+        @active = active
+      end
+
+      def call
+        link_to(@label, @href, class: css_classes)
+      end
+
+      private
+
+      def css_classes
+        class_names("transition", @active ? "text-ink-900" : "text-ink-400 hover:text-ink-900")
+      end
+    end
+  end
+end

data/app/components/silex_ui/page_header_component.html.erb

@@ -0,0 +1,17 @@
+<header class="<%= css_classes %>">
+  <div class="min-w-0">
+    <h1 class="text-lg font-light tracking-[0.2em] text-ink-900 uppercase"><%= title %></h1>
+
+    <% if subtitle.present? %>
+      <p class="mt-2 text-sm font-light text-ink-600"><%= subtitle %></p>
+    <% end %>
+
+    <% if meta? %>
+      <div class="mt-2 text-sm font-light text-ink-600"><%= meta %></div>
+    <% end %>
+  </div>
+
+  <% if actions? %>
+    <div class="flex flex-wrap items-center gap-3"><%= actions %></div>
+  <% end %>
+</header>

data/app/components/silex_ui/page_header_component.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # En-tête de page : titre, sous-titre, actions à droite.
+  #
+  #   <%= render SilexUi::PageHeaderComponent.new(title: "Sites", subtitle: "1 240 domaines") do |header| %>
+  #     <% header.with_actions do %>
+  #       <%= render SilexUi::ButtonComponent.new(label: "Ajouter", href: new_website_path) %>
+  #     <% end %>
+  #   <% end %>
+  #
+  # Le titre alimente aussi `content_for :title`, comme le PageHeaderComponent du
+  # Silex : une page qui affiche son nom le donne aussi à l'onglet.
+  class PageHeaderComponent < BaseComponent
+    renders_one :actions
+    renders_one :meta
+
+    def initialize(title:, subtitle: nil, document_title: nil, **options)
+      @title = title
+      @subtitle = subtitle
+      @document_title = document_title
+      super(**options)
+    end
+
+    attr_reader :title, :subtitle
+
+    def before_render
+      content_for(:title, @document_title || @title) if @document_title != false
+    end
+
+    def css_classes
+      merge_class("flex flex-wrap items-end justify-between gap-4 py-8")
+    end
+  end
+end

data/app/components/silex_ui/pagination_component.html.erb

@@ -0,0 +1,30 @@
+<nav aria-label="Pagination" class="<%= css_classes %>">
+  <p><%= pagination.from %>–<%= pagination.to %> sur <%= pagination.count %></p>
+
+  <div class="flex flex-wrap items-center gap-1">
+    <% if pagination.previous_page %>
+      <%= link_to "Précédent", url_for_page(pagination.previous_page), rel: "prev",
+            class: "px-3 py-1 uppercase transition hover:text-ink-900" %>
+    <% else %>
+      <span class="px-3 py-1 text-ink-300 uppercase">Précédent</span>
+    <% end %>
+
+    <% pagination.series.each do |entry| %>
+      <% if gap?(entry) %>
+        <span class="px-2 text-ink-300">…</span>
+      <% elsif current?(entry) %>
+        <span aria-current="page" class="rounded-sm border border-ink-900 px-3 py-1 text-ink-900"><%= entry %></span>
+      <% else %>
+        <%= link_to entry, url_for_page(entry),
+              class: "rounded-sm border border-transparent px-3 py-1 transition hover:border-sand-300 hover:text-ink-900" %>
+      <% end %>
+    <% end %>
+
+    <% if pagination.next_page %>
+      <%= link_to "Suivant", url_for_page(pagination.next_page), rel: "next",
+            class: "px-3 py-1 uppercase transition hover:text-ink-900" %>
+    <% else %>
+      <span class="px-3 py-1 text-ink-300 uppercase">Suivant</span>
+    <% end %>
+  </div>
+</nav>

data/app/components/silex_ui/pagination_component.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Navigation de pagination. Le composant sait dessiner une série de pages ; il
+  # ne sait pas construire une URL — c'est `page_url`, fourni par la page, qui
+  # décide quels filtres survivent au changement de page.
+  #
+  #   <%= render SilexUi::PaginationComponent.new(pagination: @pagination,
+  #         page_url: ->(page) { websites_path(websites_page_params(page)) }) %>
+  #
+  # `pagination` est n'importe quel objet répondant à `many?`, `page`, `series`,
+  # `previous_page`, `next_page`, `from`, `to` et `count` — dont le Pagination
+  # maison de Network. Dans `series`, toute entrée qui n'est pas un entier est
+  # rendue comme une ellipse.
+  class PaginationComponent < BaseComponent
+    def initialize(pagination:, page_url:, **options)
+      @pagination = pagination
+      @page_url = page_url
+      super(**options)
+    end
+
+    attr_reader :pagination
+
+    def render?
+      pagination.many?
+    end
+
+    def url_for_page(page)
+      @page_url.call(page)
+    end
+
+    def current?(page)
+      page == pagination.page
+    end
+
+    def gap?(entry)
+      !entry.is_a?(Integer)
+    end
+
+    def css_classes
+      merge_class(
+        "flex flex-wrap items-center justify-between gap-4 border-t border-sand-200 py-6",
+        "text-xs font-light tracking-widest text-ink-400"
+      )
+    end
+  end
+end

data/app/components/silex_ui/section_component.html.erb

@@ -0,0 +1,12 @@
+<section class="<%= css_classes %>">
+  <% if title.present? || actions? %>
+    <div class="mb-4 flex items-baseline justify-between gap-4">
+      <% if title.present? %>
+        <h2 class="text-xs font-light tracking-widest text-ink-400 uppercase"><%= title %></h2>
+      <% end %>
+      <%= actions %>
+    </div>
+  <% end %>
+
+  <%= content %>
+</section>

data/app/components/silex_ui/section_component.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Bloc de contenu précédé d'un titre en petites capitales — le rythme de base
+  # des tableaux de bord du Silex.
+  #
+  #   <%= render SilexUi::SectionComponent.new(title: "Prochaines expirations") do %>
+  #     …
+  #   <% end %>
+  class SectionComponent < BaseComponent
+    renders_one :actions
+
+    def initialize(title: nil, **options)
+      @title = title
+      super(**options)
+    end
+
+    attr_reader :title
+
+    def css_classes
+      merge_class(nil)
+    end
+  end
+end

data/app/components/silex_ui/stat_card_component.html.erb

@@ -0,0 +1,18 @@
+<% body = capture do %>
+  <span class="block text-3xl font-light <%= value_class %>"><%= value %></span>
+  <span class="mt-2 block text-xs font-light tracking-widest text-ink-400 uppercase"><%= label %></span>
+
+  <% if hint.present? %>
+    <span class="mt-1 block text-xs font-light text-ink-400"><%= hint %></span>
+  <% end %>
+
+  <% if trend_text.present? %>
+    <span class="mt-1 block text-xs font-light <%= trend_class %>"><%= trend_text %></span>
+  <% end %>
+<% end %>
+
+<% if href.present? %>
+  <%= link_to href, class: css_classes do %><%= body %><% end %>
+<% else %>
+  <div class="<%= css_classes %>"><%= body %></div>
+<% end %>

data/app/components/silex_ui/stat_card_component.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Un chiffre, ce qu'il compte, et de quoi le creuser.
+  #
+  # Reprend l'API du StatCardComponent du Silex — valeur, libellé, lien,
+  # évolution, valeur secondaire — mais un seul élément a droit à la couleur :
+  # le chiffre, et seulement quand il appelle une action.
+  class StatCardComponent < BaseComponent
+    VALUE_TONES = {
+      neutral: "text-ink-900",
+      ok: "text-ok-700",
+      warn: "text-warn-700",
+      alert: "text-alert-700",
+      info: "text-info-700"
+    }.freeze
+
+    def initialize(value:, label:, href: nil, tone: :neutral, hint: nil, trend: nil, **options)
+      @value = value
+      @label = label
+      @href = href
+      @tone = tone_of(tone)
+      @hint = hint
+      @trend = trend
+      super(**options)
+    end
+
+    attr_reader :value, :label, :href, :hint
+
+    def value_class
+      VALUE_TONES[@tone]
+    end
+
+    # `trend: { value: 12, positive: true }` — le pourcentage ou l'écart, et le
+    # sens dans lequel il faut le lire. Un écart nul ne mérite pas de flèche.
+    def trend_text
+      return nil if @trend.blank?
+
+      arrow = if @trend[:value].to_f.zero?
+        "="
+      else
+        @trend[:positive] ? "↑" : "↓"
+      end
+
+      [ arrow, @trend[:value], @trend[:suffix] ].compact.join(" ").strip
+    end
+
+    def trend_class
+      return "text-ink-400" if @trend.blank? || @trend[:value].to_f.zero?
+
+      @trend[:positive] ? "text-ok-700" : "text-alert-700"
+    end
+
+    def css_classes
+      merge_class(
+        "block bg-sand-50 px-6 py-8 transition duration-200",
+        ("hover:bg-white" if href.present?)
+      )
+    end
+  end
+end

data/app/components/silex_ui/stat_grid_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Rangée de compteurs. La grille tient les séparateurs (`gap-px` sur fond
+  # sable) pour que les tuiles se touchent sans bordure double.
+  #
+  #   <%= render SilexUi::StatGridComponent.new do |grid| %>
+  #     <% grid.with_stat(value: 1240, label: "Domaines", href: websites_path) %>
+  #     <% grid.with_stat(value: 12, label: "Expirés", tone: :alert, href: websites_path(filter: "expire")) %>
+  #   <% end %>
+  class StatGridComponent < BaseComponent
+    renders_many :stats, "SilexUi::StatCardComponent"
+
+    def initialize(columns: 4, **options)
+      @columns = columns.to_i.clamp(1, 6)
+      super(**options)
+    end
+
+    COLUMN_CLASSES = {
+      1 => "",
+      2 => "sm:grid-cols-2",
+      3 => "sm:grid-cols-2 lg:grid-cols-3",
+      4 => "sm:grid-cols-2 lg:grid-cols-4",
+      5 => "sm:grid-cols-2 lg:grid-cols-5",
+      6 => "sm:grid-cols-3 lg:grid-cols-6"
+    }.freeze
+
+    def call
+      tag.div(safe_join(stats), class: css_classes)
+    end
+
+    private
+
+    def css_classes
+      merge_class(
+        "grid gap-px overflow-hidden rounded-sm border border-sand-200 bg-sand-200",
+        COLUMN_CLASSES[@columns]
+      )
+    end
+  end
+end

data/app/components/silex_ui/table_component.html.erb

@@ -0,0 +1,25 @@
+<% if empty? %>
+  <%= render SilexUi::EmptyStateComponent.new(message: empty_message) %>
+<% else %>
+  <div class="overflow-x-auto">
+    <table class="<%= css_classes %>">
+      <thead>
+        <tr class="border-b border-sand-200 text-xs font-light tracking-widest text-ink-400 uppercase">
+          <% columns.each do |column| %>
+            <th class="<%= column.header_classes %>"><%= header_for(column) %></th>
+          <% end %>
+        </tr>
+      </thead>
+
+      <tbody>
+        <% rows.each do |row| %>
+          <tr class="<%= row_classes(row) %>">
+            <% columns.each do |column| %>
+              <td class="<%= column.cell_classes %>"><%= cell_for(column, row) %></td>
+            <% end %>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>