backpack 0.4.0 → 0.4.2

data/lib/backpack/{components/concerns/classes.rb → classes.rb}

@@ -7,7 +7,7 @@ module Backpack::Classes
 
   class_methods do
     def root_class
-      to_s.delete_prefix("Backpack::Components::").gsub(/::/, "/")
+      identifier
     end
   end
 

data/lib/backpack/cli.rb

@@ -0,0 +1,39 @@
+require "thor"
+require "backpack"
+
+module Backpack
+  class CLI < Thor
+    include Thor::Actions
+
+    desc "import", "Import Backpack in the current project"
+
+    source_root File.expand_path(__dir__)
+
+    def import
+      say ascii_art, :green
+
+      directory "stylesheets", "app/assets/stylesheets", recursive: true
+      directory "components", "app/components", recursive: true
+
+      copy_file "attributes.rb", "lib/backpack/attributes.rb"
+      copy_file "classes.rb", "lib/backpack/classes.rb"
+      copy_file "identifier.rb", "lib/backpack/identifier.rb"
+      copy_file "tokens.rb", "lib/backpack/tokens.rb"
+
+      directory "../../spec/components", "spec/components", recursive: true do |content|
+        content.gsub("require 'spec_helper'", "require 'rails_helper'")
+      end
+    end
+
+    private
+
+    def ascii_art
+      <<~ASCII
+      ┌┐ ┌─┐┌─┐┬┌─┌─┐┌─┐┌─┐┬┌─
+      ├┴┐├─┤│  ├┴┐├─┘├─┤│  ├┴┐
+      └─┘┴ ┴└─┘┴ ┴┴  ┴ ┴└─┘┴ ┴
+
+      ASCII
+    end
+  end
+end

data/lib/backpack/components/badge.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Badge < Backpack::Components::Base
+class Components::Badge < Components::Base
   prop :variant, _Union(:solid, :soft, :surface, :outline), default: :solid
   prop :color, Backpack::Tokens::OptionalColor
   prop :size, Backpack::Tokens::Size, default: 2

data/lib/backpack/components/base.rb

@@ -1,4 +1,4 @@
-class Backpack::Components::Base < Phlex::HTML
+class Components::Base < Phlex::HTML
   # Component concerns (order of includes in important)
   include Backpack::Identifier
   include Backpack::Classes

data/lib/backpack/components/breadcrumb.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Breadcrumb < Backpack::Components::Base
-  class Item < Backpack::Components::Base
+class Components::Breadcrumb < Components::Base
+  class Item < Components::Base
     prop :href, HTMLAttribute, default: ""
     prop :breadcrumb, Breadcrumb
     prop :last, _Boolean, default: false

data/lib/backpack/components/button.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Button < Backpack::Components::Base
+class Components::Button < Components::Base
   Radius = _Union(:none, :small, :full)
 
   prop :href, HTMLAttribute, predicate: :private

data/lib/backpack/components/favicon.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Favicon < Backpack::Components::Base
+class Components::Favicon < Components::Base
   prop :application_name, _String?
 
   def view_template

data/lib/backpack/components/heading.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Heading < Backpack::Components::Base
+class Components::Heading < Components::Base
   prop :level, _Union(1, 2, 3, 4, 5), default: 1
   prop :tag, _Union(:h1, :h2, :h3, :h4, :h5, :h6), default: -> { :"h#{@level}" }
 

data/lib/backpack/components/icon.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Icon < Backpack::Components::Base
+class Components::Icon < Components::Base
   prop :key, _Union(Symbol, String), :positional do |value|
     value.to_s.parameterize
   end

data/lib/backpack/components/icon_button/icon_button.css

@@ -0,0 +1,183 @@
+.root {
+  appearance: none;
+  border: none;
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  display: inline-flex;
+  justify-content: center;
+  text-decoration: none;
+  transition:
+    background-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+}
+
+/* solid */
+.variant-solid {
+  background-color: var(--accent-9);
+  color: var(--accent-1);
+}
+
+@media (hover: hover) {
+  .variant-solid:hover {
+    background-color: var(--accent-10);
+  }
+}
+
+.variant-solid:active {
+  background-color: var(--accent-12);
+}
+
+.variant-solid:focus {
+  outline: 0.3rem solid var(--accent-8);
+}
+
+.variant-solid:disabled {
+  background-color: var(--slate-5);
+  border: none;
+  color: var(--slate-9);
+}
+
+/* soft */
+.variant-soft {
+  background-color: var(--accent-5);
+  color: var(--accent-9);
+}
+
+@media (hover: hover) {
+  .variant-soft:hover {
+    background-color: var(--accent-6);
+  }
+}
+
+.variant-soft:active {
+  background-color: var(--accent-7);
+}
+
+.variant-soft:focus {
+  background-color: var(--accent-5);
+  outline: 0.2rem solid var(--accent-9);
+}
+
+.variant-soft:disabled {
+  background-color: var(--slate-4);
+  border: none;
+  color: var(--slate-9);
+}
+
+/* surface */
+.variant-surface {
+  background-color: var(--accent-3);
+  box-shadow: inset 0 0 0 1px var(--accent-9);
+  color: var(--accent-9);
+}
+
+@media (hover: hover) {
+  .variant-surface:hover {
+    background-color: var(--accent-4);
+  }
+}
+
+.variant-surface:active {
+  background-color: var(--accent-5);
+}
+
+.variant-surface:focus {
+  outline: 0.2rem solid var(--accent-9);
+}
+
+.variant-surface:disabled {
+  background-color: var(--slate-3);
+  box-shadow: inset 0 0 0 1px var(--slate-8);
+  color: var(--slate-9);
+}
+
+/* outline */
+.variant-outline {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--accent-9);
+  color: var(--accent-9);
+}
+
+@media (hover: hover) {
+  .variant-outline:hover {
+    background-color: var(--accent-3);
+  }
+}
+
+.variant-outline:active {
+  background-color: var(--accent-4);
+}
+
+.variant-outline:focus {
+  outline: 0.2rem solid var(--accent-9);
+}
+
+.variant-outline:disabled {
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--slate-8);
+  color: var(--slate-8);
+}
+
+/* ghost */
+.variant-ghost {
+  color: var(--accent-9);
+  background-color: transparent;
+}
+
+@media (hover: hover) {
+  .variant-ghost:hover {
+    background-color: var(--accent-4);
+  }
+}
+
+.variant-ghost:active {
+  background-color: var(--accent-5);
+}
+
+.variant-ghost:focus {
+  outline: 0.2rem solid var(--accent-9);
+}
+
+.variant-ghost:disabled {
+  background-color: transparent;
+  color: var(--slate-8);
+}
+
+/* size */
+.size-1 {
+  --icon-size: 1.8rem;
+  padding: var(--space-4);
+}
+
+.size-2 {
+  --icon-size: 2rem;
+  padding: var(--space-5);
+}
+
+.size-3 {
+  --icon-size: 2.4rem;
+  padding: var(--space-5);
+}
+
+/* States */
+.root:disabled {
+  cursor: not-allowed;
+}
+
+@media (max-width: 576px) {
+  .root {
+    line-height: 1;
+  }
+
+  .size-1 {
+    --icon-size: 1.6rem;
+  }
+
+  .size-2 {
+    --icon-size: 1.8rem;
+  }
+
+  .size-3 {
+    --icon-size: 2rem;
+  }
+}

data/lib/backpack/components/icon_button/icon_button.js

@@ -0,0 +1 @@
+import "./icon_button.css";

data/lib/backpack/components/icon_button.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class Components::IconButton < Components::Base
+  prop :href, HTMLAttribute, predicate: :private
+  prop :label, MandatoryHTMLAttribute
+  prop :icon, _Union(Symbol, String)
+  prop :variant, Backpack::Tokens::Variant, default: :solid
+  prop :color, Backpack::Tokens::OptionalColor
+  prop :size, Backpack::Tokens::Size, default: 2
+
+  def view_template
+    if href?
+      a(href: @href, **root_attributes) { render_icon }
+    else
+      button(**root_attributes) { render_icon }
+    end
+  end
+
+  private
+
+  def render_icon
+    Icon(@icon, class: "#{root_class}-icon", label: @label)
+  end
+
+  def variant_props
+    %i[variant size]
+  end
+
+  def extra_root_attributes
+    { data_accent_color: @color }
+  end
+end

data/lib/backpack/components/icon_sprite.rb

@@ -2,7 +2,7 @@
 
 require 'rails-html-sanitizer'
 
-class Backpack::Components::IconSprite < Backpack::Components::Base
+class Components::IconSprite < Components::Base
   ICON_PATHS = [
     Rails.root&.join("app/assets/icons"),
     Rails.root&.join("node_modules/lucide-static/icons"),

data/lib/backpack/components/quotation.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::Quotation < Backpack::Components::Base
+class Components::Quotation < Components::Base
   prop :cite, _String?, predicate: :private
   prop :size, _Union(1, 2, 3, 4, 5, 6), default: 2
   prop :weight, Backpack::Tokens::Weight, default: :regular

data/lib/backpack/components/rich_text.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::RichText < Backpack::Components::Base
+class Components::RichText < Components::Base
   prop :tag, _Union(:article, :aside, :div, :main, :section), default: :div
 
   def view_template(&block)

data/lib/backpack/components/skip_links.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class Backpack::Components::SkipLinks < Backpack::Components::Base
+class Components::SkipLinks < Components::Base
   LINKS = {
     content: "Aller au contenu",
     navigation: "Aller à la navigation"

data/lib/backpack/components.rb

@@ -1,5 +1,3 @@
-module Backpack
-  module Components
-    extend Phlex::Kit
-  end
+module Components
+  extend Phlex::Kit
 end

data/lib/backpack/{components/concerns/identifier.rb → identifier.rb}

@@ -5,9 +5,13 @@ module Backpack::Identifier
 
   class_methods do
     def identifier
-      self.to_s.delete_prefix("Backpack::Components::").gsub(/::/, "--").parameterize
+      (name.split("::") - %w[Components Backpack]).join("/")
     end
   end
 
+  def identifier
+    self.class.identifier.parameterize
+  end
+
   delegate :identifier, to: :class
 end

data/lib/backpack/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Backpack
-  VERSION = "0.4.0"
+  VERSION = "0.4.2"
 end

data/lib/backpack.rb

@@ -6,11 +6,14 @@ require 'date'
 require 'literal'
 require 'phlex-rails'
 require 'rails'
-require 'zeitwerk'
 
-loader = Zeitwerk::Loader.for_gem
-loader.push_dir("#{__dir__}/backpack/components/concerns", namespace: Backpack)
-loader.setup
+require 'backpack/cli'
+
+require 'backpack/attributes'
+require 'backpack/classes'
+require 'backpack/identifier'
+require 'backpack/tokens'
+require 'backpack/components'
 
 module Backpack
   class Error < StandardError; end

data/spec/cli/import_spec.rb

@@ -0,0 +1,51 @@
+require 'spec_helper'
+
+describe Backpack::CLI, type: :cli do
+  sandbox_dir = "sandbox"
+
+  around do |example|
+    FileUtils.mkdir(sandbox_dir) unless File.exist?(sandbox_dir)
+    within_dir(sandbox_dir) do
+      example.run
+    end
+  ensure
+    FileUtils.rm_rf(sandbox_dir)
+  end
+
+  describe "import" do
+    let(:command) { `ruby ../bin/backpack import` }
+    let(:output) { command.chomp }
+
+    it "outputs ascii art and the list of created files" do
+      expect(output).to include(described_class.new.send(:ascii_art))
+      expect(output).to include("create  app/assets/stylesheets/application.css")
+      expect(output).to include("create  app/components/base.rb")
+      expect(output).to include("create  app/components/button.rb")
+      expect(output).to include("create  app/components/button/button.js")
+      expect(output).to include("create  app/components/button/button.css")
+      expect(output).to include("create  lib/backpack/attributes.rb")
+      expect(output).to include("create  lib/backpack/classes.rb")
+      expect(output).to include("create  lib/backpack/identifier.rb")
+      expect(output).to include("create  lib/backpack/tokens.rb")
+      expect(output).to include("create  spec/components/button_spec.rb")
+      expect(output).to include("create  spec/components/previews/button_preview.rb")
+      expect(output).to include("create  spec/components/previews/button_preview/overview.html.erb")
+    end
+
+    it "copies the folders" do
+      command
+      expect(File.directory?("app/assets/stylesheets")).to be true
+      expect(File.directory?("app/components")).to be true
+      expect(File.directory?("spec/components")).to be true
+      expect(File.directory?("spec/components/previews")).to be true
+    end
+
+    it "copies the lib files" do
+      command
+      expect(File.exist?("lib/backpack/attributes.rb")).to be true
+      expect(File.exist?("lib/backpack/classes.rb")).to be true
+      expect(File.exist?("lib/backpack/identifier.rb")).to be true
+      expect(File.exist?("lib/backpack/tokens.rb")).to be true
+    end
+  end
+end

data/spec/components/badge_spec.rb

@@ -1,12 +1,12 @@
 require 'spec_helper'
 
-describe Backpack::Components::Badge, type: :component do
+describe Components::Badge, type: :component do
+  subject(:output) { render_fragment(component) }
+
   let(:component) { described_class.new(**params) { text } }
   let(:params) { {} }
   let(:text) { "Badge" }
 
-  subject(:output) { render_fragment(component) }
-
   it "renders the element with the default styling" do
     expect(output).to have_css(
       ".Badge.Badge-variant-solid", text:

data/spec/components/breadcrumb_spec.rb

@@ -1,11 +1,11 @@
 require 'spec_helper'
 
-describe Backpack::Components::Breadcrumb, type: :component do
+describe Components::Breadcrumb, type: :component do
+  subject(:output) { render_fragment(component) }
+
   let(:component) { described_class.new(**params) }
   let(:params) { {} }
 
-  subject(:output) { render_fragment(component) }
-
   context "without items" do
     it "renders nothing" do
       expect(output).to eq_html('')
@@ -25,9 +25,15 @@ describe Backpack::Components::Breadcrumb, type: :component do
       expect(output).to have_css("nav.Breadcrumb[role='navigation'][aria-label='Breadcrumb']")
     end
 
-    it "renders all items" do
+    it "renders first item" do
       expect(output).to have_css("li:nth-child(1) a[href='/']", text: "Home")
+    end
+
+    it "renders second item" do
       expect(output).to have_css("li:nth-child(2) a[href='/sections']", text: "Sections")
+    end
+
+    it "renders third item" do
       expect(output).to have_css("li:nth-child(3) a[href='']", text: "Articles")
     end
 

data/spec/components/button_spec.rb

@@ -1,20 +1,20 @@
 require 'spec_helper'
 
-describe Backpack::Components::Button, type: :component do
+describe Components::Button, type: :component do
+  subject(:output) { render_fragment(component) }
+
   let(:component) { described_class.new(**params) { text } }
   let(:params) { {} }
   let(:text) { "Label" }
 
-  subject(:output) { render_fragment(component) }
-
   it "renders a button element with the default styling" do
     expect(output).to have_css(
       "button.Button.Button-variant-solid.Button-size-2", text:
     )
   end
 
-  it "doesn't render an icon" do
-    expect(output).to_not have_css("button.Button svg.Icon")
+  it "doesn't render the icon" do
+    expect(output).not_to have_css("button.Button svg.Icon")
   end
 
   context "with a href" do
@@ -54,7 +54,7 @@ describe Backpack::Components::Button, type: :component do
   end
 
   context "with an icon before the text" do
-    let(:icon) { render(Backpack::Components::Icon.new("user")) }
+    let(:icon) { render(Components::Icon.new("user")) }
     let(:component) do
       described_class.new(**params) do
         icon
@@ -74,7 +74,7 @@ describe Backpack::Components::Button, type: :component do
   end
 
   context "with an icon after the text" do
-    let(:icon) { render(Backpack::Components::Icon.new("user")) }
+    let(:icon) { render(Components::Icon.new("user")) }
     let(:component) do
       described_class.new(**params) do
         text

data/spec/components/favicon_spec.rb

@@ -1,11 +1,12 @@
 require 'spec_helper'
 
-describe Backpack::Components::Favicon, type: :component do
+describe Components::Favicon, type: :component do
+  subject(:output) { render_fragment(component) }
+
   let(:component) { described_class.new(**params) }
   let(:params) { {} }
 
-  subject(:output) { render_fragment(component) }
-
+  # rubocop:disable RSpec/ExampleLength
   it "renders the links" do
     expect(output).to eq_html <<~HTML
       <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
@@ -15,6 +16,7 @@ describe Backpack::Components::Favicon, type: :component do
       <link rel="manifest" href="/site.webmanifest">
     HTML
   end
+  # rubocop:enable RSpec/ExampleLength
 
   context "with application name" do
     let(:params) { { application_name: "My App" } }

data/spec/components/heading_spec.rb

@@ -1,12 +1,12 @@
 require 'spec_helper'
 
-describe Backpack::Components::Heading, type: :component do
+describe Components::Heading, type: :component do
+  subject(:output) { render_fragment(component) }
+
   let(:component) { described_class.new(**params) { text } }
   let(:params) { {} }
   let(:text) { "Heading" }
 
-  subject(:output) { render_fragment(component) }
-
   it "renders a level 1 heading by default" do
     expect(output).to have_css("h1.Heading.Heading-1", text:)
   end

data/spec/components/icon_button_spec.rb

@@ -0,0 +1,58 @@
+require 'spec_helper'
+
+describe Components::IconButton, type: :component do
+  subject(:output) { render_fragment(component) }
+
+  let(:component) { described_class.new(**params) }
+  let(:params) { { icon: :user, label: "User" } }
+
+  it "renders a button element with the default styling" do
+    expect(output).to have_css(
+      "button.IconButton.IconButton-variant-solid.IconButton-size-2"
+    )
+  end
+
+  it "renders the icon" do
+    expect(output).to have_css("button.IconButton svg.Icon.IconButton-icon[data-icon-key='user']")
+  end
+
+  context "with a href" do
+    let(:params) { { icon: :user, label: "User", href: "/path" } }
+
+    it "renders a link element using the same styling classes" do
+      expect(output).to have_css(
+        "a.IconButton.IconButton-variant-solid.IconButton-size-2[href='/path']"
+      )
+    end
+  end
+
+  context "with variant options" do
+    let(:params) { { icon: :user, label: "User", variant: :outline, color: :red, size: 1 } }
+
+    it "updates the variant modifiers in the class list" do
+      expect(output).to have_css(
+        "button.IconButton.IconButton-variant-outline.IconButton-size-1"
+      )
+    end
+  end
+
+  context "with HTML attributes" do
+    let(:params) do
+      { icon: :user, label: "User", class: "custom", data: { test: "value" }, aria: { label: "Open menu" } }
+    end
+
+    it "merges custom attributes with the generated ones" do
+      expect(output).to have_css(
+        "button.IconButton.IconButton-variant-solid.IconButton-size-2.custom[data-test='value'][aria-label='Open menu']"
+      )
+    end
+  end
+
+  context "with a color option" do
+    let(:params) { { icon: :user, label: "User", color: :red } }
+
+    it "sets the data-accent-color attribute" do
+      expect(output).to have_css("button.IconButton[data-accent-color='red']")
+    end
+  end
+end