Add View Component + DaisyUI (#68)

* add view component and create a basic button with daisyui

* replace all buttons

* add badge component

* adjust color

* adjust card sizes

Gemfile

@@ -102,3 +102,9 @@ gem "chartkick", "~> 5.0"
 gem "rails_autolink", "~> 1.1"
 
 gem "sitemap_generator", "~> 6.3"
+
+gem "view_component", "~> 3.7"
+
+gem "dry-initializer-rails"
+
+gem "dry-types", "~> 1.7"

Gemfile.lock

@@ -132,6 +132,24 @@ GEM
     drb (2.2.0)
       ruby2_keywords
     dry-cli (1.0.0)
+    dry-core (1.0.1)
+      concurrent-ruby (~> 1.0)
+      zeitwerk (~> 2.6)
+    dry-inflector (1.0.0)
+    dry-initializer (3.1.1)
+    dry-initializer-rails (3.1.1)
+      dry-initializer (>= 2.4, < 4)
+      rails (> 3.0)
+    dry-logic (1.5.0)
+      concurrent-ruby (~> 1.0)
+      dry-core (~> 1.0, < 2)
+      zeitwerk (~> 2.6)
+    dry-types (1.7.1)
+      concurrent-ruby (~> 1.0)
+      dry-core (~> 1.0)
+      dry-inflector (~> 1.0)
+      dry-logic (~> 1.4)
+      zeitwerk (~> 2.6)
     erb_lint (0.4.0)
       activesupport
       better_html (>= 2.0.1)
@@ -194,6 +212,7 @@ GEM
       meilisearch (~> 0.23.0)
     meta-tags (2.19.0)
       actionpack (>= 3.2.0, < 7.2)
+    method_source (1.0.0)
     mini_mime (1.1.5)
     minitest (5.20.0)
     msgpack (1.7.2)
@@ -366,6 +385,10 @@ GEM
     url_mount (0.2.1)
       rack
     vcr (6.2.0)
+    view_component (3.7.0)
+      activesupport (>= 5.2.0, < 8.0)
+      concurrent-ruby (~> 1.0)
+      method_source (~> 1.0)
     vite_rails (3.0.15)
       railties (>= 5.1, < 8)
       vite_ruby (~> 3.0, >= 3.2.2)
@@ -410,6 +433,8 @@ DEPENDENCIES
   debug
   dockerfile-rails (>= 1.2)
   dotenv-rails
+  dry-initializer-rails
+  dry-types (~> 1.7)
   erb_lint (~> 0.4.0)
   error_highlight (>= 0.4.0)
   groupdate (~> 6.2)
@@ -434,6 +459,7 @@ DEPENDENCIES
   turbo-rails
   tzinfo-data
   vcr (~> 6.1)
+  view_component (~> 3.7)
   vite_rails (~> 3.0)
   web-console
   webmock

app/assets/stylesheets/application.tailwind.css

@@ -2,7 +2,6 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
-@import "components/button.css";
 @import "components/form.css";
 @import "components/nav.css";
 @import "components/pagination.css";

app/components/application_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+class ApplicationComponent < ViewComponent::Base
+  extend Dry::Initializer
+  attr_accessor :attributes
+  option :display, default: proc { true }
+
+  def initialize(*args, **options)
+    super(*args, **options)
+    defined_option_keys = self.class.dry_initializer.options.map(&:source)
+    self.attributes = options.except(*defined_option_keys)
+  end
+
+  def render?
+    display
+  end
+end

app/components/ui/badge_component.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+class Ui::BadgeComponent < ApplicationComponent
+  KIND_MAPPING = {
+    neutral: "badge-neutral",
+    primary: "badge-primary",
+    secondary: "badge-secondary",
+    accent: "badge-accent",
+    info: "badge-info",
+    success: "badge-success",
+    warning: "badge-warning",
+    error: "badge-error",
+    ghost: "badge-ghost"
+  }
+
+  SIZE_MAPPING = {
+    xs: "badge-xs",
+    sm: "badge-sm",
+    md: "badge-md",
+    lg: "badge-lg"
+  }
+
+  param :text, optional: true
+  option :kind, type: Dry::Types["coercible.symbol"].enum(*KIND_MAPPING.keys), default: proc { :primary }
+  option :size, type: Dry::Types["coercible.symbol"].enum(*SIZE_MAPPING.keys), default: proc { :md }
+  option :outline, type: Dry::Types["strict.bool"], default: proc { false }
+
+  def call
+    content_tag(:span, class: classes, **attributes.except(:class)) do
+      concat content
+    end
+  end
+
+  private
+
+  def classes
+    [component_classes, attributes[:class]].join(" ")
+  end
+
+  def component_classes
+    class_names(
+      "badge",
+      KIND_MAPPING[kind],
+      SIZE_MAPPING[size],
+      "badge-outline": outline
+    )
+  end
+
+  def content
+    text.presence || super
+  end
+end

app/components/ui/button_component.rb

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+class Ui::ButtonComponent < ApplicationComponent
+  KIND_MAPPING = {
+    neutral: "btn-neutral",
+    primary: "btn-primary",
+    secondary: "btn-secondary",
+    accent: "btn-accent",
+    info: "btn-info",
+    success: "btn-success",
+    warning: "btn-warning",
+    error: "btn-error",
+    ghost: "btn-ghost",
+    link: "btn-link"
+  }
+
+  SIZE_MAPPING = {
+    sm: "btn-sm",
+    md: "",
+    lg: "btn-lg"
+  }
+
+  param :text, default: proc {}
+  option :url, Dry::Types["coercible.string"], optional: true
+  option :method, Dry::Types["coercible.symbol"].enum(:get, :post, :patch, :put, :delete), optional: true
+  option :kind, type: Dry::Types["coercible.symbol"].enum(*KIND_MAPPING.keys), default: proc { :primary }
+  option :size, type: Dry::Types["coercible.symbol"].enum(*SIZE_MAPPING.keys), default: proc { :md }
+  option :type, type: Dry::Types["coercible.symbol"].enum(:button, :submit, :input), default: proc { :button }
+  option :disabled, type: Dry::Types["strict.bool"], default: proc { false }
+  option :outline, type: Dry::Types["strict.bool"], default: proc { false }
+  option :animation, type: Dry::Types["strict.bool"], default: proc { false }
+
+  def call
+    case button_kind
+    when :link
+      link_to(url, disabled: disabled, class: classes, **attributes.except(:class, :type)) { content }
+    when :button_to
+      button_to(url, disabled: disabled, method: method, class: classes, **attributes.except(:class, :type)) { content }
+    when :button
+      tag.button(type: type, disabled: disabled, class: classes, **attributes.except(:class, :type)) { content }
+    end
+  end
+
+  private
+
+  def classes
+    [component_classes, attributes[:class]].join(" ")
+  end
+
+  def component_classes
+    class_names(
+      "btn",
+      KIND_MAPPING[kind],
+      SIZE_MAPPING[size],
+      "btn-outline": outline,
+      "btn-disabled": disabled,
+      "no-animation": !animation # animation is disabled by default, I don't really like the effect when you enter the page
+    )
+  end
+
+  def content
+    text.presence || super
+  end
+
+  def button_kind
+    return :link if url.present? && default_method?
+    return :button_to if url.present? && !default_method?
+
+    :button
+  end
+
+  def default_method?
+    method.blank? || method == :get
+  end
+end

app/helpers/view_component_helper.rb

@@ -0,0 +1,12 @@
+module ViewComponentHelper
+  UI_HELPERS = {
+    badge: "Ui::BadgeComponent",
+    button: "Ui::ButtonComponent"
+  }.freeze
+
+  UI_HELPERS.each do |name, component|
+    define_method "ui_#{name}" do |*args, **kwargs, &block|
+      render component.constantize.new(*args, **kwargs), &block
+    end
+  end
+end

app/views/page/home.html.erb

@@ -18,10 +18,9 @@
             <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">Want to find Ruby related videos?</h1>
             <p class="relative mt-6 text-lg leading-8 text-gray-600 sm:max-w-md lg:max-w-none"> So far we have indexed <span class="font-semibold"><%= @talks_count %></span> of those from <span class="font-semibold"><%= @speakers_count %></span> speakers</p>
             <div class="mt-10 flex items-center gap-x-6 flex-wrap gap-y-4">
-              <%= link_to talks_path, class: "button" do %>
-                Explore talks
-              <% end %>
-              <%= link_to "https://github.com/adrienpoly/rubyvideo/blob/main/docs/contributing.md", target: "_blank", class: "button secondary flex items-center gap-2" do %>
+              <%= ui_button("Explore talks", url: talks_path) %>
+
+              <%= ui_button(url: "https://github.com/adrienpoly/rubyvideo/blob/main/docs/contributing.md", outline: true, target: "_blank") do %>
                 Enriching this database <span aria-hidden="true"><%= heroicon :arrow_long_right %></span>
               <% end %>
             </div>

app/views/shared/_navbar.html.erb

@@ -19,6 +19,8 @@
         <%= icon "github", size: :lg %>
       <% end %>
     </li>
-    <li><a href="https://github.com/adrienpoly/rubyvideo/blob/main/docs/contributing.md" role="button" target="_blank">Contribute</a></li>
+    <li>
+      <%= ui_button "Contribute", kind: :secondary, target: "_blank", url: "https://github.com/adrienpoly/rubyvideo/blob/main/docs/contributing.md" %>
+    </li>
   </ul>
 </nav>

app/views/speakers/_form.html.erb

@@ -42,7 +42,7 @@
   </div>
 
   <div class="flex items-center gap-4">
-    <%= form.submit "Suggest modifications" %>
-    <%= link_to "cancel", speaker_path(@speaker), class: "tertiary" %>
+    <%= ui_button "Suggest modifications", type: :submit %>
+    <%= ui_button "Cancel", url: speaker_path(speaker), outline: true, role: :button %>
   </div>
 <% end %>

app/views/speakers/_speaker.html.erb

@@ -3,7 +3,5 @@
     <span><%= speaker.name %></span>
     <%#= image_tag speaker.github_avatar_url(size: 64), class: "rounded-full h-8 w-8" if speaker.github_avatar_url.present? %>
   </div>
-  <div class="bg-brand-lighter w-12 h-6 flex items-center justify-center rounded-full text-gray">
-    <%= speaker.talks_count %>
-  </div>
+  <%= ui_badge(speaker.talks_count, kind: :secondary, size: :lg) %>
 <% end %>

app/views/speakers/show.html.erb

@@ -10,14 +10,15 @@
       <h1 class="my-8"> <%= @speaker.name %></h1>
       <%= render "speakers/about", speaker: @speaker %>
       <div class="flex flex-wrap gap-4">
-        <%= link_to edit_speaker_path(@speaker), class: "button secondary" do %>
-          <div class="flex items-center gap-2">
+        <div class="tooltip tooltip-right tooltip-success" data-tip="You can suggest some modifications to this speaker description">
+          <%= ui_button url: edit_speaker_path(@speaker), kind: :neutral, outline: true, size: :sm do %>
             <%= heroicon :pencil_square %>
             <span>Edit</span>
-          </div>
-        <% end %>
+          <% end %>
+        </div>
+
         <% if Current.user&.admin? %>
-          <%= button_to "fetch from Github", speakers_enhance_path(@speaker), method: :patch, class: "button" %>
+          <%= ui_button "fetch from Github", url: speakers_enhance_path(@speaker), method: :put, kind: :ghost, size: :sm %>
         <% end %>
       </div>
     </div>

app/views/talks/_card.html.erb

@@ -1,5 +1,5 @@
 
-<div class="max-w-sm bg-white" id="<%= dom_id talk %>">
+<div class="bg-white" id="<%= dom_id talk %>">
   <%= link_to talk_path(talk, speaker_slug: local_assigns.fetch(:speaker_slug, nil)), class: "flex aspect-video overflow-hidden" do %>
     <%= image_tag talk.thumbnail_sm,
           srcset: ["#{talk.thumbnail_lg} 2x"],

app/views/talks/_form.html.erb

@@ -27,7 +27,7 @@
   </div>
 
   <div class="inline">
-    <%= form.submit "Suggest modifications" %>
-    <%= link_to "Cancel", talk, class: "tertiary", role: "button" %>
+    <%= ui_button "Suggest modifications", type: :submit %>
+    <%= ui_button "Cancel", url: talk_path(talk), outline: true, role: :button %>
   </div>
 <% end %>

app/views/talks/_talk.html.erb

@@ -18,7 +18,7 @@
                  youtube_id: talk.video_id} %>
   </div>
 
-  <div class="p-4 flex flex-col gap-4">
+  <div class="py-4 flex flex-col gap-4">
     <h1><%= talk.title %></h1>
 
     <p><%= simple_format auto_link(talk.description, html: {target: "_blank"}) %></p>
@@ -34,3 +34,10 @@
     <% end %>
   </div>
 <% end %>
+
+<div class="tooltip tooltip-right tooltip-success" data-tip="You can suggest some modifications to this talk">
+  <%= ui_button url: edit_talk_path(@talk), kind: :neutral, outline: true, size: :sm do %>
+    <%= heroicon :pencil_square %>
+    <span>Edit</span>
+  <% end %>
+</div>

app/views/talks/show.html.erb

@@ -8,12 +8,6 @@
   <div class="w-full flex">
     <div class="flex-grow">
       <%= render @talk %>
-      <%= link_to edit_talk_path(@talk), class: "button secondary" do %>
-          <div class="flex items-center gap-2">
-            <%= heroicon :pencil_square %>
-            <span>Edit</span>
-          </div>
-        <% end %>
     </div>
     <div class="gap-4 w-60 flex-shrink-0 hidden md:flex md:flex-col px-4">
       <%= turbo_frame_tag "recommended_talks", target: "_top", src: talk_recommendations_path(@talk) %>

package.json

@@ -24,6 +24,7 @@
   },
   "packageManager": "[email protected]",
   "devDependencies": {
+    "daisyui": "^3.9.4",
     "postcss-import": "^15.1.0",
     "postcss-nested": "^6.0.1",
     "prettier": "^2.8.8",