silex_ui 0.1.0

data/app/components/silex_ui/table_component.rb

@@ -0,0 +1,98 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Tableau de données. On déclare les colonnes, le composant s'occupe du reste :
+  # en-tête, tri, lignes, état vide.
+  #
+  #   <%= render SilexUi::TableComponent.new(rows: @websites, row_class: ->(w) { expiry_style(w, :row) }) do |table| %>
+  #     <% table.with_column(header: "Domaine", sort: sort_url("domaine")) { |site| site.domain } %>
+  #     <% table.with_column(header: "Registrar") { |site| site.registrar.titleize } %>
+  #   <% end %>
+  #
+  # 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)
+      @rows = rows
+      @row_class = row_class
+      @empty_message = empty_message
+      @columns = []
+      super(**options)
+    end
+
+    attr_reader :rows, :columns, :empty_message
+
+    # 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,
+                             align: align, cell_class: cell_class, cell: cell)
+      nil
+    end
+
+    # Le bloc passé au composant ne produit rien à afficher : il ne sert qu'à
+    # déclarer les colonnes. On le déroule avant le rendu du gabarit.
+    def before_render
+      content
+    end
+
+    def empty?
+      rows.none?
+    end
+
+    def row_classes(row)
+      class_names("border-b border-sand-100 align-top", @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.
+    def header_for(column)
+      return column.header unless column.sortable?
+
+      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") ], " ")
+      end
+    end
+
+    def cell_for(column, row)
+      view_context.capture(row, &column.cell)
+    end
+
+    def css_classes
+      merge_class("w-full border-collapse text-sm font-light")
+    end
+
+    Column = Struct.new(:header, :sort, :direction, :align, :cell_class, :cell, keyword_init: true) do
+      ALIGNMENTS = { left: "text-left", center: "text-center", right: "text-right" }.freeze
+
+      def header_classes
+        ActionView::Helpers::TagHelper.build_tag_values(
+          "py-3 pr-4 font-light 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?
+      end
+
+      # ↑ / ↓ quand la colonne porte le tri courant, ↕ quand elle peut le prendre.
+      def sort_marker
+        case direction&.to_sym
+        when :asc then "↑"
+        when :desc then "↓"
+        else "↕"
+        end
+      end
+
+      private
+
+      def alignment
+        ALIGNMENTS.fetch(align&.to_sym, ALIGNMENTS[:left])
+      end
+    end
+  end
+end

data/config/importmap.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+pin "silex_ui", to: "silex_ui/index.js"
+pin_all_from SilexUi::Engine.root.join("app/assets/javascripts/silex_ui/controllers"),
+             under: "silex_ui/controllers"

data/lib/generators/silex_ui/install/install_generator.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+require "rails/generators/base"
+require "silex_ui/sync"
+
+module SilexUi
+  module Generators
+    # `rails generate silex_ui:install`
+    #
+    # Branche le design system sur une application Rails + Tailwind v4 : copie
+    # les tokens, déclare les sources auprès du scanner Tailwind, épingle les
+    # contrôleurs Stimulus.
+    class InstallGenerator < Rails::Generators::Base
+      desc "Installe silex_ui dans l'application (tokens Tailwind, sources, importmap)"
+
+      TAILWIND_INPUT = "app/assets/tailwind/application.css"
+      IMPORT_LINE = %(@import "./silex_ui/theme.css";)
+      SOURCE_LINE = %(@source "./silex_ui/sources.html";)
+
+      def sync_design_system
+        say_status :sync, SilexUi::Sync::DESTINATION
+        SilexUi::Sync.call(destination_root)
+      end
+
+      def declare_tailwind_sources
+        path = File.join(destination_root, TAILWIND_INPUT)
+
+        unless File.exist?(path)
+          say_status :skip, "#{TAILWIND_INPUT} introuvable — ajoutez à la main :\n#{IMPORT_LINE}\n#{SOURCE_LINE}", :yellow
+          return
+        end
+
+        return say_status(:identical, TAILWIND_INPUT) if File.read(path).include?(IMPORT_LINE)
+
+        inject_into_file TAILWIND_INPUT, after: %r{@import "tailwindcss";\n} do
+          "\n#{IMPORT_LINE}\n#{SOURCE_LINE}\n"
+        end
+      end
+
+      def pin_javascript
+        return say_status(:skip, "importmap absent — contrôleurs Stimulus non épinglés", :yellow) unless importmap?
+
+        say_status :info, "Contrôleurs disponibles : import { registerSilexUiControllers } from \"silex_ui\""
+      end
+
+      def show_next_steps
+        say <<~TEXT
+
+          silex_ui #{SilexUi::VERSION} installé.
+
+            1. Enregistrez les contrôleurs Stimulus dans app/javascript/controllers/index.js :
+
+                 import { registerSilexUiControllers } from "silex_ui"
+                 registerSilexUiControllers(application)
+
+            2. Après chaque montée de version du gem : bin/rails silex_ui:sync
+
+        TEXT
+      end
+
+      private
+
+      def importmap?
+        File.exist?(File.join(destination_root, "config/importmap.rb"))
+      end
+    end
+  end
+end

data/lib/silex_ui/engine.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+require "rails/engine"
+require "view_component"
+
+module SilexUi
+  # A plain engine (no isolate_namespace): the gem ships components, styles and
+  # Stimulus controllers, never routes or models. Its app/ directories are picked
+  # up by the host application's autoloader and asset pipeline as-is.
+  class Engine < ::Rails::Engine
+    config.silex_ui = ActiveSupport::OrderedOptions.new
+
+    initializer "silex_ui.assets" do |app|
+      next unless app.config.respond_to?(:assets)
+
+      app.config.assets.paths << root.join("app/assets/stylesheets")
+      app.config.assets.paths << root.join("app/assets/javascripts")
+    end
+
+    initializer "silex_ui.importmap", before: "importmap" do |app|
+      next unless app.respond_to?(:config) && app.config.respond_to?(:importmap)
+
+      app.config.importmap.paths << root.join("config/importmap.rb")
+      app.config.importmap.cache_sweepers << root.join("app/assets/javascripts")
+    end
+
+    rake_tasks do
+      load SilexUi::Engine.root.join("lib/tasks/silex_ui.rake")
+    end
+  end
+end

data/lib/silex_ui/sync.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module SilexUi
+  # Recopie dans l'application ce dont le build Tailwind a besoin : les tokens,
+  # et une image plate des sources du gem.
+  #
+  # Pourquoi une copie plutôt qu'un `@source` pointant vers le gem ? Parce que le
+  # chemin d'installation d'un gem change entre le poste de dev, la CI et le
+  # conteneur. Les deux fichiers produits ici vivent dans le dépôt de
+  # l'application, sont versionnés avec elle, et se régénèrent d'une commande
+  # après chaque montée de version du gem.
+  module Sync
+    DESTINATION = "app/assets/tailwind/silex_ui"
+    THEME_FILE = "theme.css"
+    SOURCES_FILE = "sources.html"
+
+    module_function
+
+    def call(app_root)
+      destination = Pathname.new(app_root).join(DESTINATION)
+      destination.mkpath
+
+      destination.join(THEME_FILE).write(SilexUi.theme_css)
+      destination.join(SOURCES_FILE).write(sources_document)
+
+      [ destination.join(THEME_FILE), destination.join(SOURCES_FILE) ]
+    end
+
+    # Tailwind n'a pas besoin de comprendre ce fichier, seulement d'y retrouver
+    # les mêmes chaînes de classes que dans les composants du gem.
+    def sources_document
+      <<~HTML
+        <!-- Généré par `rails silex_ui:sync` — silex_ui #{SilexUi::VERSION}.
+             Ne pas modifier à la main, ne pas servir : ce fichier n'existe que
+             pour donner au scanner Tailwind de l'application les classes
+             utilisées par les composants du design system. -->
+        <script type="text/plain">
+        #{SilexUi.source_digest}
+        </script>
+      HTML
+    end
+  end
+end

data/lib/silex_ui/version.rb

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

data/lib/silex_ui.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+require "pathname"
+require "silex_ui/version"
+require "silex_ui/engine" if defined?(Rails::Engine)
+
+# Design system partagé des applications Le Silex.
+#
+# Le gem ne fournit que la couche de présentation : des design tokens Tailwind v4,
+# un jeu de ViewComponents et les contrôleurs Stimulus qui vont avec.
+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
+
+  class << self
+    def root
+      @root ||= Pathname.new(File.expand_path("..", __dir__))
+    end
+
+    # Concaténation brute des sources du gem. Tailwind y retrouve exactement les
+    # mêmes candidats que dans les fichiers d'origine — sans avoir à connaître le
+    # chemin d'installation du gem, qui change entre poste, CI et conteneur.
+    def source_digest
+      files = SOURCE_DIRECTORIES.flat_map do |dir|
+        Dir.glob(root.join(dir, "**", "*.{rb,erb,js}")).sort
+      end
+
+      files.map { |file| "/* #{Pathname.new(file).relative_path_from(root)} */\n#{File.read(file)}" }
+           .join("\n")
+    end
+
+    def theme_css
+      File.read(root.join("app/assets/stylesheets/silex_ui/theme.css"))
+    end
+  end
+end

data/lib/tasks/silex_ui.rake

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+require "silex_ui/sync"
+
+namespace :silex_ui do
+  desc "Recopie les tokens et les sources du design system dans app/assets/tailwind/silex_ui"
+  task sync: :environment do
+    files = SilexUi::Sync.call(Rails.root)
+
+    puts "silex_ui #{SilexUi::VERSION} synchronisé :"
+    files.each { |file| puts "  #{file.relative_path_from(Rails.root)}" }
+  end
+end
+
+# Le build Tailwind doit toujours partir de sources à jour : une montée de
+# version du gem ne doit pas attendre qu'on pense à relancer la synchro.
+if Rake::Task.task_defined?("tailwindcss:build")
+  Rake::Task["tailwindcss:build"].enhance([ "silex_ui:sync" ])
+end

metadata

@@ -0,0 +1,131 @@
+--- !ruby/object:Gem::Specification
+name: silex_ui
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- Théo Galais
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2026-09-10 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '10'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '7.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '10'
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6'
+description: Design tokens Tailwind v4, ViewComponents et contrôleurs Stimulus pour
+  donner la même interface à toutes les applications Rails du Silex.
+email:
+- toolsilex@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE.txt
+- README.md
+- app/assets/javascripts/silex_ui/controllers/clipboard_controller.js
+- app/assets/javascripts/silex_ui/controllers/modal_controller.js
+- app/assets/javascripts/silex_ui/index.js
+- app/assets/stylesheets/silex_ui/theme.css
+- app/components/silex_ui/alert_component.html.erb
+- app/components/silex_ui/alert_component.rb
+- app/components/silex_ui/badge_component.rb
+- app/components/silex_ui/base_component.rb
+- app/components/silex_ui/breakdown_component.html.erb
+- app/components/silex_ui/breakdown_component.rb
+- app/components/silex_ui/button_component.rb
+- app/components/silex_ui/card_component.html.erb
+- app/components/silex_ui/card_component.rb
+- app/components/silex_ui/copy_button_component.rb
+- app/components/silex_ui/empty_state_component.rb
+- app/components/silex_ui/field_component.html.erb
+- app/components/silex_ui/field_component.rb
+- app/components/silex_ui/flash_component.html.erb
+- app/components/silex_ui/flash_component.rb
+- app/components/silex_ui/modal_component.html.erb
+- app/components/silex_ui/modal_component.rb
+- app/components/silex_ui/nav_component.html.erb
+- app/components/silex_ui/nav_component.rb
+- app/components/silex_ui/page_header_component.html.erb
+- app/components/silex_ui/page_header_component.rb
+- app/components/silex_ui/pagination_component.html.erb
+- app/components/silex_ui/pagination_component.rb
+- app/components/silex_ui/section_component.html.erb
+- app/components/silex_ui/section_component.rb
+- app/components/silex_ui/stat_card_component.html.erb
+- app/components/silex_ui/stat_card_component.rb
+- app/components/silex_ui/stat_grid_component.rb
+- app/components/silex_ui/table_component.html.erb
+- app/components/silex_ui/table_component.rb
+- config/importmap.rb
+- lib/generators/silex_ui/install/install_generator.rb
+- lib/silex_ui.rb
+- lib/silex_ui/engine.rb
+- lib/silex_ui/sync.rb
+- lib/silex_ui/version.rb
+- lib/tasks/silex_ui.rake
+homepage: https://github.com/Le-Silex/silex_ui
+licenses:
+- MIT
+metadata:
+  source_code_uri: https://github.com/Le-Silex/silex_ui
+  changelog_uri: https://github.com/Le-Silex/silex_ui/blob/main/CHANGELOG.md
+  rubygems_mfa_required: 'true'
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.2.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.16
+signing_key:
+specification_version: 4
+summary: Design system partagé des applications Le Silex (Rails + Tailwind v4)
+test_files: []