silex_ui 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 84ca6a3d2f412fa7ff808b0d7a0513e87257123a852e26dbd098795085b76ff3
-  data.tar.gz: e237663991a4a318eb7190b48c9b84c11eedbd69e18f027abf491bd1ee71fa87
+  metadata.gz: c8c471e84ca4f41561bb7daa42d18669287be88e7d278d82ea79566f0baeaf46
+  data.tar.gz: 6af9d732ec1b5188374e38ff7d06d771540886e7ea64f826dea89b0a876bd248
 SHA512:
-  metadata.gz: ba83d0d1d6ae11d0ca91c0e6009a5c2970dd90c513714d4bae1c8cf22b363f7789df8c5fae2771d7029856a017dcef72bcde92a93d8be2ae3fcd202226f3ae53
-  data.tar.gz: e37f9d24f41677ba8d0d06db94624e32a759b1478845915af2d92aa7abbb2bbd34ded84507b71b4fb5f0351261bf13fe86fa9544588b05cfc0b7146c5f1df8fa
+  metadata.gz: 1ef386b477752142f8e2d2ec94a89e5256c03aab117693f3e945e6b3cfc223d1402ba29defb027ae5b3a4fa05ba17336c00006a159994f8a29e48327a134d2e7
+  data.tar.gz: 4a4fef0ccf67d57b6f4efbddd7338ad9655a0c1ded3a1e2649820b5f640a926b4c5c892f336e72fb00fe70a55af5f149d1352a8d6f7312aa8a4ea649e49de1be

data/CHANGELOG.md

@@ -6,6 +6,23 @@ Toutes les évolutions notables de silex_ui. Le format suit
 
 ## [Non publié]
 
+## [0.2.0] — 2026-09-10
+
+### Ajouté
+
+- Page catalogue : tous les composants dans toutes leurs variantes, montée par
+  l'application hôte (`mount SilexUi::Engine => "/design"`), en développement
+  seulement. Un composant qu'on ne peut voir qu'en trouvant la page qui l'utilise
+  est un composant qu'on finit par recopier à la main.
+- `SilexUi.configure` : `catalogue_layout` pour les applications dont le layout
+  exige une session, `catalogue_enabled` pour ouvrir ou fermer la page ailleurs
+  qu'en développement.
+
+### Modifié
+
+- `silex_ui:sync` recopie aussi `app/views`, sans quoi les nuanciers du catalogue
+  se rendraient sans leurs couleurs.
+
 ## [0.1.0] — 2026-09-10
 
 Première version.

data/README.md

@@ -61,6 +61,30 @@ registerSilexUiControllers(application)
 Ils sont enregistrés sous le préfixe `silex-ui--`, hors de portée des
 contrôleurs de l'application.
 
+## Le catalogue
+
+Tous les composants, dans toutes leurs variantes, sur une page. À monter dans
+l'application hôte — en développement seulement :
+
+```ruby
+# config/routes.rb
+mount SilexUi::Engine => "/design" if Rails.env.development?
+```
+
+Puis http://localhost:3000/design.
+
+La page emprunte le layout de l'application, parce que c'est lui qui sait où sont
+sa feuille de style et son importmap. Si ce layout exige une session, désignez-en
+un autre :
+
+```ruby
+# config/initializers/silex_ui.rb
+SilexUi.configure do |config|
+  config.catalogue_layout = "silex_ui/bare"   # ou false
+  config.catalogue_enabled = false            # pour le fermer même en dev
+end
+```
+
 ## Tokens
 
 | Famille | Rôle | Nuances |

data/app/controllers/silex_ui/catalogue_controller.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Le catalogue : tous les composants du design system sur une page, dans
+  # toutes leurs variantes. Un composant qu'on ne peut voir qu'en trouvant la
+  # page qui l'utilise est un composant qu'on finit par recopier à la main.
+  #
+  # Monté par l'application hôte, en développement seulement :
+  #
+  #   mount SilexUi::Engine => "/design" if Rails.env.development?
+  class CatalogueController < ActionController::Base
+    # Le catalogue emprunte le layout de l'application : c'est lui qui sait où
+    # sont sa feuille de style et son importmap. Une application dont le layout
+    # exige une session peut en désigner un autre.
+    layout -> { SilexUi.configuration.catalogue_layout }
+
+    before_action :ensure_available
+
+    # Assez de données pour que chaque composant ait quelque chose à montrer,
+    # et rien qui touche à la base de l'application.
+    Site = Struct.new(:domain, :registrar, :expired, keyword_init: true)
+    Pages = Struct.new(:page, :series, :previous_page, :next_page, :from, :to, :count, keyword_init: true) do
+      def many? = true
+    end
+
+    def show
+      @sites = [
+        Site.new(domain: "bali-surf-camp.fr", registrar: "ovh", expired: false),
+        Site.new(domain: "voyage-indonesie.com", registrar: "netim", expired: true),
+        Site.new(domain: "location-villa-bali.fr", registrar: "gandi", expired: false)
+      ]
+
+      @pagination = Pages.new(page: 6, series: [ 1, :gap, 4, 5, 6, 7, 8, :gap, 26 ],
+                              previous_page: 5, next_page: 7, from: 251, to: 300, count: 1_300)
+    end
+
+    private
+
+    # Le catalogue n'a rien à faire en production : il n'y sert personne et il
+    # décrit l'interface à qui la regarde.
+    def ensure_available
+      return if SilexUi.configuration.catalogue_enabled?
+
+      raise ActionController::RoutingError, "Le catalogue silex_ui n'est disponible qu'en développement"
+    end
+  end
+end

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

@@ -0,0 +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="mb-4 flex flex-wrap items-baseline justify-between gap-3">
+    <h3 class="text-sm font-light text-ink-900"><%= title %></h3>
+    <% if local_assigns[:note].present? %>
+      <p class="text-xs font-light 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>
+  <% end %>
+</div>

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

@@ -0,0 +1,251 @@
+<% content_for :title, "Catalogue — silex_ui #{SilexUi::VERSION}" %>
+
+<div class="mx-auto min-h-screen max-w-6xl px-6 pb-24">
+  <%= render SilexUi::PageHeaderComponent.new(
+        title: "silex_ui",
+        subtitle: "Le design system des applications Le Silex — version #{SilexUi::VERSION}.",
+        document_title: false) do |header| %>
+    <% header.with_meta do %>
+      <p class="text-xs text-ink-400">
+        Cette page n'existe qu'en développement. Chaque composant y figure dans toutes ses variantes :
+        ce qui manque ici manque au design system.
+      </p>
+    <% end %>
+  <% end %>
+
+  <%= render SilexUi::SectionComponent.new(title: "Palette", class: "mt-4") do %>
+    <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      <% {
+           "sand — le sol" => %w[bg-sand-50 bg-sand-100 bg-sand-200 bg-sand-300],
+           "ink — le texte" => %w[bg-ink-300 bg-ink-400 bg-ink-600 bg-ink-900],
+           "alert — ce qui a lapsé" => %w[bg-alert-50 bg-alert-100 bg-alert-300 bg-alert-700],
+           "warn — ce qui bascule" => %w[bg-warn-50 bg-warn-100 bg-warn-300 bg-warn-700],
+           "ok — ce qui est en règle" => %w[bg-ok-50 bg-ok-100 bg-ok-300 bg-ok-700],
+           "info — sans urgence" => %w[bg-info-50 bg-info-100 bg-info-300 bg-info-700]
+         }.each do |family, swatches| %>
+        <div>
+          <p class="mb-2 text-xs font-light tracking-widest text-ink-400 uppercase"><%= family %></p>
+          <div class="flex overflow-hidden rounded-sm border border-sand-200">
+            <% swatches.each do |swatch| %>
+              <div class="h-12 flex-1 <%= swatch %>" title="<%= swatch %>"></div>
+            <% end %>
+          </div>
+          <p class="mt-1 text-xs font-light text-ink-300"><%= swatches.map { |s| s.split("-").last }.join(" · ") %></p>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%= render SilexUi::SectionComponent.new(title: "Typographie", class: "mt-12") do %>
+    <div class="space-y-3">
+      <p class="text-lg font-light tracking-[0.2em] text-ink-900 uppercase">Titre de page</p>
+      <p class="text-xs font-light tracking-widest text-ink-400 uppercase">Titre de section</p>
+      <p class="text-sm font-light text-ink-600">Texte courant — la graisse légère est la graisse par défaut.</p>
+      <p class="text-xs font-light text-ink-400">Mention secondaire, pour ce qui accompagne sans appeler.</p>
+    </div>
+  <% end %>
+
+  <%= render SilexUi::SectionComponent.new(title: "Boutons", class: "mt-12") do %>
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Variantes", code: 'SilexUi::ButtonComponent.new(label: "Ajouter", href: "#", variant: :primary)' } do %>
+      <div class="flex flex-wrap items-center gap-3">
+        <% SilexUi::ButtonComponent::VARIANTS.each_key do |variant| %>
+          <%= render SilexUi::ButtonComponent.new(label: variant.to_s.titleize, href: "#", variant: variant) %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render layout: "silex_ui/catalogue/specimen", locals: { title: "Tailles" } do %>
+      <div class="flex flex-wrap items-center gap-3">
+        <% SilexUi::ButtonComponent::SIZES.each_key do |size| %>
+          <%= render SilexUi::ButtonComponent.new(label: size.to_s, href: "#", size: size) %>
+        <% end %>
+      </div>
+    <% end %>
+  <% end %>
+
+  <%= render SilexUi::SectionComponent.new(title: "Badges et pastilles", class: "mt-12") do %>
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Tons", note: "Sémantiques, jamais chromatiques",
+                    code: 'SilexUi::BadgeComponent.new(label: "expiré", tone: :alert)' } do %>
+      <div class="flex flex-wrap items-center gap-2">
+        <% SilexUi::BaseComponent::TONES.each do |tone| %>
+          <%= render SilexUi::BadgeComponent.new(label: tone.to_s, tone: tone) %>
+        <% end %>
+        <%= render SilexUi::BadgeComponent.new(label: "cliquable", href: "#") %>
+      </div>
+    <% end %>
+
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Bouton de copie", note: "Confirme, puis reprend son libellé",
+                    code: 'SilexUi::CopyButtonComponent.new(value: website.domain)' } do %>
+      <%= render SilexUi::CopyButtonComponent.new(value: "bali-surf-camp.fr", label: "Copier le domaine") %>
+    <% end %>
+  <% end %>
+
+  <%= render SilexUi::SectionComponent.new(title: "Compteurs", class: "mt-12") do %>
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Grille de statistiques",
+                    code: 'grid.with_stat(value: 12, label: "Expirés", tone: :alert, href: "#")' } do %>
+      <%= render SilexUi::StatGridComponent.new do |grid| %>
+        <% grid.with_stat value: number_with_delimiter(1_240), label: "Domaines", href: "#" %>
+        <% grid.with_stat value: 37, label: "Expirent sous 30 j", tone: :warn, href: "#" %>
+        <% grid.with_stat value: 12, label: "Expirés", tone: :alert, href: "#",
+             trend: { value: 3, positive: false } %>
+        <% grid.with_stat value: 96, label: "Sans repo", hint: "sur 1 240" %>
+      <% end %>
+    <% end %>
+
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Répartition", code: 'SilexUi::BreakdownComponent.new(title: "Par registrar", items: [...])' } do %>
+      <div class="max-w-xs">
+        <%= render SilexUi::BreakdownComponent.new(title: "Par registrar", items: [
+              { label: "OVH", count: 612, href: "#" },
+              { label: "Netim", count: 428, href: "#" },
+              { label: "Gandi", count: 200 }
+            ]) %>
+      </div>
+    <% end %>
+  <% end %>
+
+  <%= render SilexUi::SectionComponent.new(title: "Tableaux", class: "mt-12") do %>
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Colonnes déclarées, tri, lignes colorées",
+                    code: 'table.with_column(header: "Domaine", sort: url, direction: :asc) { |site| site.domain }' } do %>
+      <%= render SilexUi::TableComponent.new(rows: @sites,
+            row_class: ->(site) { "bg-alert-50" if site.expired }) do |table| %>
+        <% table.with_column(header: "Domaine", sort: "#", direction: :asc) do |site| %>
+          <span class="text-ink-900"><%= site.domain %></span>
+        <% end %>
+        <% table.with_column(header: "Registrar", sort: "#", cell_class: "text-ink-600") do |site| %>
+          <%= site.registrar.titleize %>
+        <% end %>
+        <% table.with_column(header: "État") do |site| %>
+          <%= render SilexUi::BadgeComponent.new(label: site.expired ? "expiré" : "actif",
+                tone: site.expired ? :alert : :ok) %>
+        <% end %>
+        <% table.with_column(align: :right) do |site| %>
+          <%= render SilexUi::ButtonComponent.new(label: "Éditer", href: "#", variant: :ghost, size: :sm) %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Tableau vide", note: "L'état vide remplace le tableau, il ne le décore pas" } do %>
+      <%= render SilexUi::TableComponent.new(rows: [], empty_message: "Aucun domaine ne correspond.") do |table| %>
+        <% table.with_column(header: "Domaine") { |site| site.domain } %>
+      <% end %>
+    <% end %>
+
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Pagination",
+                    code: 'SilexUi::PaginationComponent.new(pagination: @pagination, page_url: ->(page) { path(page:) })' } do %>
+      <%= render SilexUi::PaginationComponent.new(pagination: @pagination, page_url: ->(_page) { "#" }) %>
+    <% end %>
+  <% end %>
+
+  <%= render SilexUi::SectionComponent.new(title: "Messages", class: "mt-12") do %>
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Bandeaux", code: 'SilexUi::AlertComponent.new(tone: :warn, title: "…", text: "…")' } do %>
+      <div class="space-y-3">
+        <%= render SilexUi::AlertComponent.new(tone: :info, title: "Synchronisation",
+              text: "Le dernier passage remonte à trois heures.") %>
+        <%= render SilexUi::AlertComponent.new(tone: :warn, title: "Registrar muet",
+              text: "OVH n'a pas répondu au dernier passage ; les dates d'expiration datent d'hier.") %>
+        <%= render SilexUi::AlertComponent.new(tone: :alert, title: "Jeton refusé",
+              text: "La clé NETIM a expiré, plus aucune disponibilité n'est vérifiée.") %>
+        <%= render SilexUi::AlertComponent.new(tone: :ok, text: "Catalogue à jour.") %>
+      </div>
+    <% end %>
+
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "État vide", code: 'SilexUi::EmptyStateComponent.new(message: "…")' } do %>
+      <%= render SilexUi::EmptyStateComponent.new(message: "Rien à afficher pour le moment.") do %>
+        <%= render SilexUi::ButtonComponent.new(label: "Ajouter le premier", href: "#", variant: :secondary) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render SilexUi::SectionComponent.new(title: "Surfaces", class: "mt-12") do %>
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Cartes", code: 'SilexUi::CardComponent.new(title: "…", href: "…")' } do %>
+      <div class="grid gap-4 md:grid-cols-3">
+        <%= render SilexUi::CardComponent.new(title: "Simple") do %>
+          Une surface blanche sur le sable, pour ce qui doit se détacher du flux.
+        <% end %>
+
+        <%= render SilexUi::CardComponent.new(title: "Avec pied") do |card| %>
+          <% card.with_footer do %>Dernière synchro il y a 3 h<% end %>
+          Le pied porte ce qui date ou qualifie le contenu.
+        <% end %>
+
+        <%= render SilexUi::CardComponent.new(title: "Cliquable", href: "#") do %>
+          Toute la carte devient la cible, pas seulement son titre.
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Modale", note: "Bâtie sur <dialog> : focus, Échap et fond inerte gérés par le navigateur" } do %>
+      <%= render SilexUi::ModalComponent.new(id: "catalogue-modal", title: "Supprimer le domaine ?") do |modal| %>
+        <% modal.with_trigger do %>
+          <%= render SilexUi::ButtonComponent.new(label: "Ouvrir la modale", variant: :secondary) %>
+        <% end %>
+
+        <p>Cette action est définitive. Le domaine sortira du catalogue et de toutes ses répartitions.</p>
+
+        <% modal.with_footer do %>
+          <%= render SilexUi::ButtonComponent.new(label: "Annuler", variant: :ghost,
+                data: { action: "silex-ui--modal#close" }) %>
+          <%= render SilexUi::ButtonComponent.new(label: "Supprimer", variant: :danger) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render SilexUi::SectionComponent.new(title: "Formulaires", class: "mt-12") do %>
+    <%= form_with url: "#", method: :get do |f| %>
+      <%= render layout: "silex_ui/catalogue/specimen",
+            locals: { title: "Champs", note: "Deux densités : md pour les barres de filtres, lg pour les pages de formulaire",
+                      code: 'SilexUi::FieldComponent.new(form: f, attribute: :domain, label: "Domaine", size: :lg)' } do %>
+        <div class="grid max-w-2xl gap-5 md:grid-cols-2">
+          <%= render SilexUi::FieldComponent.new(form: f, attribute: :domain, label: "Domaine", size: :lg,
+                input_html: { placeholder: "exemple.fr" }) %>
+          <%= render SilexUi::FieldComponent.new(form: f, attribute: :registrar, label: "Registrar", size: :lg,
+                type: :select, collection: %w[OVH Netim Gandi], include_blank: "—") %>
+          <%= render SilexUi::FieldComponent.new(form: f, attribute: :expires_at, label: "Expiration",
+                type: :date, hint: "Densité md, celle des barres de filtres") %>
+          <%= render SilexUi::FieldComponent.new(form: f, attribute: :active, label: "Rattaché à une lune",
+                type: :boolean) %>
+          <%= render SilexUi::FieldComponent.new(form: f, attribute: :notes, label: "Notes", size: :lg,
+                type: :textarea, input_html: { rows: 2 }, class: "md:col-span-2") %>
+        </div>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render SilexUi::SectionComponent.new(title: "Navigation", class: "mt-12") do %>
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "Barre de navigation", code: 'nav.with_item(label: "Sites", href: path, active: true)' } do %>
+      <%= render SilexUi::NavComponent.new(brand: "Network", brand_href: "#") do |nav| %>
+        <% nav.with_item label: "Tableau de bord", href: "#", active: true %>
+        <% nav.with_item label: "Sites", href: "#" %>
+        <% nav.with_item label: "Réglages", href: "#" %>
+        <% nav.with_aside do %>
+          <span>theo@le-silex.com</span>
+          <%= render SilexUi::ButtonComponent.new(label: "Déconnexion", variant: :ghost, size: :sm) %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render layout: "silex_ui/catalogue/specimen",
+          locals: { title: "En-tête de page", code: 'SilexUi::PageHeaderComponent.new(title: "Sites", subtitle: "…")' } do %>
+      <%= render SilexUi::PageHeaderComponent.new(title: "Sites", subtitle: "1 240 domaines",
+            document_title: false, class: "py-0") do |header| %>
+        <% header.with_actions do %>
+          <%= render SilexUi::ButtonComponent.new(label: "Ajouter un domaine", href: "#") %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/config/routes.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+SilexUi::Engine.routes.draw do
+  # Chemin complet du contrôleur : le moteur n'isole pas son espace de noms, il
+  # n'expose qu'une page et n'a aucune raison de cloisonner les helpers de l'app.
+  root to: "silex_ui/catalogue#show"
+end

data/lib/silex_ui/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SilexUi
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/lib/silex_ui.rb

@@ -11,9 +11,38 @@ require "silex_ui/engine" if defined?(Rails::Engine)
 module SilexUi
   # Répertoires dont le contenu doit être visible du scanner Tailwind de
   # l'application hôte. `rails silex_ui:sync` recopie ces sources dans l'app.
-  SOURCE_DIRECTORIES = %w[app/components app/assets/javascripts].freeze
+  # `app/views` en fait partie pour le catalogue : ses nuanciers utilisent des
+  # classes qu'aucun composant n'emploie, et sans elles la page se rend nue.
+  SOURCE_DIRECTORIES = %w[app/components app/views app/assets/javascripts].freeze
+
+  # Réglages de l'application hôte. Les valeurs par défaut conviennent à une
+  # application Rails + Tailwind ordinaire ; on n'y touche que si le layout de
+  # l'application exige une session, ou pour ouvrir le catalogue hors dev.
+  class Configuration
+    attr_accessor :catalogue_layout
+    attr_writer :catalogue_enabled
+
+    def initialize
+      @catalogue_layout = "application"
+      @catalogue_enabled = nil
+    end
+
+    def catalogue_enabled?
+      return @catalogue_enabled unless @catalogue_enabled.nil?
+
+      defined?(Rails) && Rails.env.development?
+    end
+  end
 
   class << self
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    def configure
+      yield configuration
+    end
+
     def root
       @root ||= Pathname.new(File.expand_path("..", __dir__))
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: silex_ui
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Théo Galais
@@ -95,7 +95,11 @@ files:
 - app/components/silex_ui/stat_grid_component.rb
 - app/components/silex_ui/table_component.html.erb
 - app/components/silex_ui/table_component.rb
+- app/controllers/silex_ui/catalogue_controller.rb
+- app/views/silex_ui/catalogue/_specimen.html.erb
+- app/views/silex_ui/catalogue/show.html.erb
 - config/importmap.rb
+- config/routes.rb
 - lib/generators/silex_ui/install/install_generator.rb
 - lib/silex_ui.rb
 - lib/silex_ui/engine.rb