silex_ui 0.2.0 → 0.8.0

data/app/components/silex_ui/shell_component.rb

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # L'ossature de l'application : le rail d'icônes du Silex à gauche, la page à
+  # droite. En dessous de 768px le rail devient une barre supérieure et un
+  # panneau qui coulisse.
+  #
+  #   <%= render SilexUi::ShellComponent.new do |shell| %>
+  #     <% shell.with_brand do %><%= link_to root_path do %>…<% end %><% end %>
+  #     <% shell.with_item(icon: "home", href: root_path, label: "Tableau de bord", active: true) %>
+  #     <% shell.with_footer do %><%= render SilexUi::AvatarComponent.new(name: "Théo") %><% end %>
+  #     <% shell.with_page do %>…<% end %>
+  #   <% end %>
+  class ShellComponent < BaseComponent
+    renders_one :brand
+    renders_one :mobile_brand
+    renders_one :footer
+    renders_one :page
+    # Ce qui se pose au-dessus du menu utilisateur, sous un filet : la cloche
+    # des notifications, le sélecteur de thème.
+    renders_one :utilities
+    renders_many :items, "ItemComponent"
+
+    def css_classes
+      merge_class("min-h-screen")
+    end
+
+    # Une icône du rail. Le libellé n'est pas décoratif : sans lui, un rail
+    # d'icônes se devine au lieu de se lire.
+    class ItemComponent < ViewComponent::Base
+      def initialize(icon:, href:, label:, active: false, add: false)
+        @icon = icon
+        @href = href
+        @label = label
+        @active = active
+        @add = add
+      end
+
+      attr_reader :href, :label
+
+      def active? = @active
+
+      def add? = @add
+
+      def call
+        link_to(href, **attributes) { safe_join([ marker, tile, mobile_label ]) }
+      end
+
+      private
+
+      def attributes
+        {
+          class: link_classes,
+          # `title` porte le libellé : sans JavaScript, le navigateur montre sa
+          # propre infobulle ; le contrôleur la remplace par la nôtre.
+          title: label,
+          "aria-label": label,
+          "aria-current": ("page" if active?),
+          data: { controller: "silex-ui--tooltip" }
+        }
+      end
+
+      def link_classes
+        "group/rail relative flex items-center gap-3 py-2.5 md:justify-center"
+      end
+
+      # La barre violette contre le bord : dans un rail d'icônes, c'est elle qui
+      # dit où l'on est, bien avant qu'on ait lu l'icône.
+      def marker
+        return nil unless active?
+
+        # Collée au bord gauche du lien, pas au-delà : le rail défile
+        # verticalement, et tout ce qui déborde à gauche est rogné.
+        tag.span(class: "absolute top-1/2 left-0 h-6 w-[3px] -translate-y-1/2 rounded-r bg-purple-500 " \
+                        "max-md:-left-2")
+      end
+
+      # Le carré du rail : 42 px, un fond violet dilué, aucune bordure. C'est la
+      # légèreté du Silex — la version bordée et cerclée est celle de ses
+      # vignettes de campagne, pas celle de sa navigation.
+      def tile
+        tag.span(render(SilexUi::IconComponent.new(name: @icon, size: :sm)), class: tile_classes)
+      end
+
+      def tile_classes
+        class_names(
+          "flex size-rail-tile items-center justify-center rounded-surface bg-purple-500/10",
+          # L'icône est indigo, jamais grise : c'est ce qui donne au rail du
+          # Silex sa couleur avant même qu'on lise une forme.
+          "text-brand-500 transition duration-200 group-hover/rail:scale-105 group-hover/rail:bg-purple-500/15",
+          ("border-2 border-dashed border-purple-500/30 bg-transparent group-hover/rail:rotate-90" if add?),
+          # La section courante ne prend ni bordure ni anneau : sa barre contre
+          # le bord suffit, et une ombre portée la décolle.
+          ("shadow-[0_4px_12px_rgba(139,92,246,0.4)]" if active?)
+        )
+      end
+
+      # Sur mobile le rail est déplié : le libellé se pose à côté de l'icône, et
+      # à l'intérieur du lien — un texte qui accompagne une cible sans en faire
+      # partie est un texte sur lequel on appuie pour rien.
+      def mobile_label
+        tag.span(label, class: "text-sm font-semibold text-ink-700 md:hidden")
+      end
+    end
+  end
+end

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

@@ -1,13 +1,38 @@
 <% 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>
+  <span class="absolute inset-y-0 left-0 w-1 transition-all duration-300 group-hover:w-1.5 <%= accent_class %>"></span>
 
-  <% if hint.present? %>
-    <span class="mt-1 block text-xs font-light text-ink-400"><%= hint %></span>
+  <% if icon_name.present? %>
+    <span class="relative flex size-icon-tile shrink-0 items-center justify-center rounded-surface
+                 transition duration-300 group-hover:scale-105 <%= tile_class %>">
+      <%= render SilexUi::IconComponent.new(name: icon_name, size: :lg) %>
+
+      <% if alert? %>
+        <%# Ce qui réclame une action se signale de lui-même, sans attendre qu'on lise le chiffre. %>
+        <span class="absolute -top-1 -right-1 size-4 animate-pulse rounded-full border-2 border-surface-0 bg-alert-500"></span>
+      <% end %>
+    </span>
   <% end %>
 
-  <% if trend_text.present? %>
-    <span class="mt-1 block text-xs font-light <%= trend_class %>"><%= trend_text %></span>
+  <span class="min-w-0">
+    <span class="block text-3xl leading-tight font-extrabold <%= value_class %>"><%= value %></span>
+    <span class="mt-0.5 block truncate text-sm text-ink-500"><%= label %></span>
+
+    <% if hint.present? %>
+      <span class="mt-0.5 block text-xs text-ink-400"><%= hint %></span>
+    <% end %>
+
+    <% if trend? %>
+      <span class="mt-1 inline-flex items-center gap-1 text-xs font-semibold <%= trend_class %>">
+        <%= render SilexUi::IconComponent.new(name: trend_icon, size: :xs) if trend_icon %>
+        <%= trend_label %>
+      </span>
+    <% end %>
+  </span>
+
+  <% if href.present? %>
+    <span class="ml-auto shrink-0 text-ink-300 opacity-0 transition duration-300 group-hover:translate-x-0 group-hover:opacity-100 -translate-x-1">
+      <%= render SilexUi::IconComponent.new(name: "chevron-right", size: :sm) %>
+    </span>
   <% end %>
 <% end %>
 

data/app/components/silex_ui/stat_card_component.rb

@@ -3,58 +3,78 @@
 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.
+  # La carte du Silex : une barre d'accent qui s'épaissit au survol, une icône
+  # dans un carré arrondi, et la carte qui se soulève d'un cheveu quand elle
+  # mène quelque part.
+  #
+  #   grid.with_stat(value: 12, label: "Expirés", tone: :alert, icon: "alert", href: "…")
   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)
+    def initialize(value:, label:, href: nil, tone: :neutral, icon: nil, hint: nil,
+                   trend: nil, alert: false, **options)
       @value = value
       @label = label
       @href = href
       @tone = tone_of(tone)
+      @icon = icon
       @hint = hint
       @trend = trend
+      @alert = alert
       super(**options)
     end
 
-    attr_reader :value, :label, :href, :hint
+    attr_reader :value, :label, :href, :hint, :icon_name
+
+    def icon_name = @icon
+
+    def tone = @tone
+
+    def alert? = @alert
 
     def value_class
-      VALUE_TONES[@tone]
+      SilexUi::Tones.text(@tone)
+    end
+
+    def accent_class
+      SilexUi::Tones.accent(@tone)
+    end
+
+    def tile_class
+      SilexUi::Tones.tile(@tone)
+    end
+
+    # `trend: { value: 12, positive: true }` — l'écart, et le sens dans lequel il
+    # faut le lire. Un écart nul ne mérite pas de flèche.
+    def trend?
+      @trend.present?
     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?
+    def trend_flat?
+      @trend[:value].to_f.zero?
+    end
+
+    def trend_icon
+      return nil if trend_flat?
+
+      @trend[:positive] ? "arrow-up" : "arrow-down"
+    end
 
-      arrow = if @trend[:value].to_f.zero?
-        "="
-      else
-        @trend[:positive] ? "↑" : "↓"
-      end
+    def trend_label
+      return "=" if trend_flat?
 
-      [ arrow, @trend[:value], @trend[:suffix] ].compact.join(" ").strip
+      [ @trend[:value], @trend[:suffix] ].compact.join(" ")
     end
 
     def trend_class
-      return "text-ink-400" if @trend.blank? || @trend[:value].to_f.zero?
+      return "text-ink-400" if trend_flat?
 
-      @trend[:positive] ? "text-ok-700" : "text-alert-700"
+      @trend[:positive] ? "text-ok-500" : "text-alert-500"
     end
 
     def css_classes
       merge_class(
-        "block bg-sand-50 px-6 py-8 transition duration-200",
-        ("hover:bg-white" if href.present?)
+        "group relative flex items-center gap-4 overflow-hidden rounded-card border border-surface-200",
+        "bg-surface-0 p-6 shadow-card transition duration-300",
+        ("hover:-translate-y-0.5 hover:shadow-card-hover" if href.present?)
       )
     end
   end

data/app/components/silex_ui/stat_grid_component.rb

@@ -1,21 +1,15 @@
 # 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.
+  # Rangée de compteurs. Les cartes du Silex respirent : elles sont séparées par
+  # un vrai espace, pas par un filet.
   #
   #   <%= 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")) %>
+  #     <% grid.with_stat(value: 1240, label: "Domaines", icon: "globe", href: websites_path) %>
   #   <% 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",
@@ -25,17 +19,13 @@ module SilexUi
       6 => "sm:grid-cols-3 lg:grid-cols-6"
     }.freeze
 
-    def call
-      tag.div(safe_join(stats), class: css_classes)
+    def initialize(columns: 4, **options)
+      @columns = columns.to_i.clamp(1, 6)
+      super(**options)
     end
 
-    private
-
-    def css_classes
-      merge_class(
-        "grid gap-px overflow-hidden rounded-sm border border-sand-200 bg-sand-200",
-        COLUMN_CLASSES[@columns]
-      )
+    def call
+      tag.div(safe_join(stats), class: merge_class("grid gap-5", COLUMN_CLASSES[@columns]))
     end
   end
 end

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

@@ -1,15 +1,17 @@
 <% if empty? %>
   <%= render SilexUi::EmptyStateComponent.new(message: empty_message) %>
 <% else %>
-  <div class="overflow-x-auto">
+  <div class="<%= wrapper_classes %>">
     <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>
+      <% if headers? %>
+        <thead>
+          <tr>
+            <% columns.each do |column| %>
+              <th class="<%= column.header_classes %>"><%= header_for(column) %></th>
+            <% end %>
+          </tr>
+        </thead>
+      <% end %>
 
       <tbody>
         <% rows.each do |row| %>

data/app/components/silex_ui/table_component.rb

@@ -12,9 +12,10 @@ module SilexUi
   # Comme le TableComponent du Silex, le tri est une URL fournie par l'appelant :
   # le composant ne connaît ni les paramètres de la page, ni ses filtres.
   class TableComponent < BaseComponent
-    def initialize(rows:, row_class: nil, empty_message: "Aucun élément à afficher", **options)
+    def initialize(rows:, row_class: nil, framed: true, empty_message: "Aucun élément à afficher", **options)
       @rows = rows
       @row_class = row_class
+      @framed = framed
       @empty_message = empty_message
       @columns = []
       super(**options)
@@ -22,10 +23,21 @@ module SilexUi
 
     attr_reader :rows, :columns, :empty_message
 
+    # Un tableau se suffit : il porte sa bordure et son rayon. Posé dans un
+    # panneau qui a déjà les siens, il les laisse tomber plutôt que de dessiner
+    # un second cadre.
+    def framed?
+      @framed
+    end
+
+    def wrapper_classes
+      class_names("overflow-x-auto", ("rounded-surface border border-surface-200" if framed?))
+    end
+
     # Déclare une colonne. Le bloc reçoit la ligne et rend la cellule ; il peut
     # renvoyer une chaîne comme écrire du balisage ERB, `capture` gère les deux.
-    def with_column(header: nil, sort: nil, direction: nil, align: :left, cell_class: nil, &cell)
-      @columns << Column.new(header: header, sort: sort, direction: direction,
+    def with_column(header: nil, icon: nil, sort: nil, direction: nil, align: :left, cell_class: nil, &cell)
+      @columns << Column.new(header: header, icon: icon, sort: sort, direction: direction,
                              align: align, cell_class: cell_class, cell: cell)
       nil
     end
@@ -40,17 +52,32 @@ module SilexUi
       rows.none?
     end
 
+    # Un tableau dont aucune colonne n'est nommée n'a pas d'en-tête à montrer :
+    # la bande grise se lirait comme une ligne vide.
+    def headers?
+      columns.any? { |column| column.header.present? }
+    end
+
     def row_classes(row)
-      class_names("border-b border-sand-100 align-top", @row_class&.call(row))
+      class_names("border-b border-surface-200 align-middle transition last:border-0 hover:bg-surface-50",
+                  @row_class&.call(row))
     end
 
+    # Un en-tête tient sur une ligne : ce que le gabarit indente finit dans le
+    # texte de la cellule, et une assertion sur « Domaine » ne le retrouve plus.
     # Un en-tête tient sur une ligne : ce que le gabarit indente finit dans le
     # texte de la cellule, et une assertion sur « Domaine » ne le retrouve plus.
     def header_for(column)
-      return column.header unless column.sortable?
+      label = safe_join([
+        (render(SilexUi::IconComponent.new(name: column.icon, size: :xs, class: "text-brand-500")) if column.icon),
+        column.header
+      ].compact)
 
-      link_to(column.sort, class: "inline-flex items-center gap-1 transition hover:text-ink-900") do
-        safe_join([ column.header, tag.span(column.sort_marker, class: "text-ink-300") ], " ")
+      return label unless column.sortable?
+
+      link_to(column.sort, class: "inline-flex items-center gap-1.5 transition hover:text-brand-600") do
+        safe_join([ label, render(SilexUi::IconComponent.new(name: column.sort_icon, size: :xs,
+                                                            class: "text-ink-400")) ])
       end
     end
 
@@ -59,32 +86,37 @@ module SilexUi
     end
 
     def css_classes
-      merge_class("w-full border-collapse text-sm font-light")
+      merge_class("w-full border-separate border-spacing-0 bg-surface-0 text-sm")
     end
 
-    Column = Struct.new(:header, :sort, :direction, :align, :cell_class, :cell, keyword_init: true) do
+    Column = Struct.new(:header, :icon, :sort, :direction, :align, :cell_class, :cell, keyword_init: true) do
       ALIGNMENTS = { left: "text-left", center: "text-center", right: "text-right" }.freeze
 
+      def sortable?
+        sort.present?
+      end
+
       def header_classes
         ActionView::Helpers::TagHelper.build_tag_values(
-          "py-3 pr-4 font-light whitespace-nowrap", alignment
+          "sticky top-0 z-5 border-b-2 border-surface-200 bg-gradient-to-br from-surface-50 to-surface-100",
+          "px-4 py-3 text-[13px] font-bold tracking-wider text-ink-700 uppercase whitespace-nowrap",
+          alignment
         ).join(" ")
       end
 
       def cell_classes
-        ActionView::Helpers::TagHelper.build_tag_values("py-3 pr-4", alignment, cell_class).join(" ")
-      end
-
-      def sortable?
-        sort.present?
+        ActionView::Helpers::TagHelper.build_tag_values(
+          "border-b border-surface-200 px-4 py-4 text-ink-900", alignment, cell_class
+        ).join(" ")
       end
 
-      # ↑ / ↓ quand la colonne porte le tri courant, ↕ quand elle peut le prendre.
-      def sort_marker
+      # Une flèche quand la colonne porte le tri courant, le double chevron
+      # quand elle peut le prendre.
+      def sort_icon
         case direction&.to_sym
-        when :asc then "↑"
-        when :desc then "↓"
-        else "↕"
+        when :asc then "arrow-up"
+        when :desc then "arrow-down"
+        else "sort"
         end
       end
 

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

@@ -0,0 +1,11 @@
+<div class="<%= css_classes %>" data-controller="silex-ui--theme" role="group" aria-label="Thème">
+  <% modes.each do |item| %>
+    <button type="button" title="<%= item[:title] %>" aria-label="<%= item[:title] %>"
+            class="<%= button_classes %>"
+            data-mode="<%= item[:mode] %>"
+            data-silex-ui--theme-target="option"
+            data-action="silex-ui--theme#select">
+      <%= render SilexUi::IconComponent.new(name: item[:icon], size: :xs) %>
+    </button>
+  <% end %>
+</div>

data/app/components/silex_ui/theme_toggle_component.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Le sélecteur de thème du Silex : trois positions dans une pilule — clair,
+  # automatique, sombre. « Automatique » n'est pas un défaut caché, c'est un
+  # choix qu'on peut reprendre : il suit le système et le dit.
+  #
+  #   <%= render SilexUi::ThemeToggleComponent.new %>
+  class ThemeToggleComponent < BaseComponent
+    MODES = [
+      { mode: "light", icon: "sun", title: "Mode clair" },
+      { mode: "auto", icon: "contrast", title: "Mode automatique" },
+      { mode: "dark", icon: "moon", title: "Mode sombre" }
+    ].freeze
+
+    def modes = MODES
+
+    def css_classes
+      merge_class("inline-flex gap-0.5 rounded-[14px] bg-surface-100 p-0.5")
+    end
+
+    def button_classes
+      "flex size-9 cursor-pointer items-center justify-center rounded-xl text-ink-500 transition " \
+        "hover:scale-105 hover:text-ink-900 md:size-6 " \
+        "data-[active]:scale-100 data-[active]:bg-purple-500 data-[active]:text-white " \
+        "data-[active]:shadow-[0_1px_4px_rgba(139,92,246,0.3)]"
+    end
+  end
+end

data/app/components/silex_ui/tones.rb

@@ -0,0 +1,72 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Les tons, traduits en classes. Une seule table pour tous les composants :
+  # une pastille verte et un compteur vert doivent tirer du même vert, sans quoi
+  # le design system se met à mentir dès le troisième écran.
+  module Tones
+    # Fond pastel, bordure, texte soutenu — l'habillage plein du Silex.
+    FILLED = {
+      neutral: "border-surface-200 bg-surface-100 text-ink-700",
+      brand: "border-brand-300 bg-brand-50 text-brand-600",
+      ok: "border-ok-300 bg-ok-50 text-ok-700",
+      warn: "border-warn-300 bg-warn-50 text-warn-700",
+      alert: "border-alert-300 bg-alert-50 text-alert-700",
+      info: "border-info-300 bg-info-50 text-info-700",
+      purple: "border-purple-300 bg-purple-50 text-purple-700",
+      pink: "border-pink-300 bg-pink-50 text-pink-700",
+      teal: "border-teal-300 bg-teal-50 text-teal-700",
+      cyan: "border-cyan-300 bg-cyan-50 text-cyan-700"
+    }.freeze
+
+    # La barre d'accent d'une carte, et le trait de gauche d'un bandeau.
+    ACCENT = {
+      neutral: "bg-ink-400",
+      brand: "bg-brand-500",
+      ok: "bg-ok-500",
+      warn: "bg-warn-500",
+      alert: "bg-alert-500",
+      info: "bg-info-500",
+      purple: "bg-purple-500",
+      pink: "bg-pink-500",
+      teal: "bg-teal-500",
+      cyan: "bg-cyan-500"
+    }.freeze
+
+    # Le carré arrondi qui porte une icône : un fond très dilué, l'icône pleine.
+    TILE = {
+      neutral: "bg-surface-100 text-ink-500",
+      brand: "bg-brand-500/10 text-brand-500",
+      ok: "bg-ok-500/10 text-ok-500",
+      warn: "bg-warn-500/10 text-warn-500",
+      alert: "bg-alert-500/10 text-alert-500",
+      info: "bg-info-500/10 text-info-500",
+      purple: "bg-purple-500/10 text-purple-500",
+      pink: "bg-pink-500/10 text-pink-500",
+      teal: "bg-teal-500/10 text-teal-500",
+      cyan: "bg-cyan-500/10 text-cyan-500"
+    }.freeze
+
+    # La couleur du chiffre d'un compteur, seul élément d'une carte à laquelle
+    # le ton donne droit à de la couleur pleine.
+    TEXT = {
+      neutral: "text-ink-900",
+      brand: "text-brand-600",
+      ok: "text-ok-700",
+      warn: "text-warn-700",
+      alert: "text-alert-700",
+      info: "text-info-700",
+      purple: "text-purple-700",
+      pink: "text-pink-700",
+      teal: "text-teal-700",
+      cyan: "text-cyan-700"
+    }.freeze
+
+    module_function
+
+    def filled(tone) = FILLED.fetch(tone, FILLED[:neutral])
+    def accent(tone) = ACCENT.fetch(tone, ACCENT[:neutral])
+    def tile(tone) = TILE.fetch(tone, TILE[:neutral])
+    def text(tone) = TEXT.fetch(tone, TEXT[:neutral])
+  end
+end

data/app/views/silex_ui/catalogue/_specimen.html.erb

@@ -1,15 +1,15 @@
 <%# Un spécimen : ce qu'on regarde, et la ligne à recopier pour l'obtenir. %>
-<div class="border-t border-sand-100 py-6">
+<div class="border-t border-surface-200 py-6">
   <div class="mb-4 flex flex-wrap items-baseline justify-between gap-3">
-    <h3 class="text-sm font-light text-ink-900"><%= title %></h3>
+    <h3 class="text-sm font-semibold text-ink-900"><%= title %></h3>
     <% if local_assigns[:note].present? %>
-      <p class="text-xs font-light text-ink-400"><%= note %></p>
+      <p class="text-xs text-ink-400"><%= note %></p>
     <% end %>
   </div>
 
   <div class="mb-4"><%= yield %></div>
 
   <% if local_assigns[:code].present? %>
-    <pre class="overflow-x-auto rounded-sm bg-sand-100 p-3 text-xs text-ink-600"><code><%= code %></code></pre>
+    <pre class="overflow-x-auto rounded-badge bg-surface-100 p-3 text-xs text-ink-700"><code><%= code %></code></pre>
   <% end %>
 </div>