Add Link component

lib/phlexy_ui.rb

@@ -12,3 +12,9 @@ module PhlexyUI
   extend Configurable
   extend Phlex::Kit
 end
+
+if defined?(ActiveSupport)
+  ActiveSupport.on_load :action_view do
+    PhlexyUI::Link.include Phlex::Rails::Helpers::LinkTo
+  end
+end

lib/phlexy_ui/link.rb

@@ -0,0 +1,116 @@
+# frozen_string_literal: true
+
+module PhlexyUI
+  class Link < Base
+    def view_template(&block)
+      if block
+        url = base_modifiers.shift
+        name = nil
+      else
+        name = base_modifiers.shift
+        url = base_modifiers.shift
+      end
+
+      generate_classes!(
+        modifiers_map: LINK_MODIFIERS_MAP,
+        base_modifiers:,
+        options:
+      ).then do |classes|
+        if respond_to?(:link_to)
+          if block
+            link_to(url || options, class: classes, **options, &block)
+          else
+            link_to(name, url, options, class: classes, **options)
+          end
+        elsif block
+          a(href: url, class: classes, **options, &block)
+        else
+          a(href: url, class: classes, **options) { name }
+        end
+      end
+    end
+
+    private
+
+    attr_reader :link_to_name
+
+    LINK_MODIFIERS_MAP = {
+      # "sm:link"
+      # "md:link"
+      # "lg:link"
+      underlined: "link",
+      # "sm:active"
+      # "md:active"
+      # "lg:active"
+      active: "active",
+      # "sm:image-full"
+      # "md:image-full"
+      # "lg:image-full"
+      image_full: "image-full",
+      # "sm:card-bordered"
+      # "md:card-bordered"
+      # "lg:card-bordered"
+      bordered: "card-bordered",
+      # "sm:card-normal"
+      # "md:card-normal"
+      # "lg:card-normal"
+      normal: "card-normal",
+      # "sm:card-compact"
+      # "md:card-compact"
+      # "lg:card-compact"
+      compact: "card-compact",
+      # "sm:card-side"
+      # "md:card-side"
+      # "lg:card-side"
+      side: "card-side",
+      # "sm:glass"
+      # "md:glass"
+      # "lg:glass"
+      glass: "glass",
+      # "sm:bg-primary sm:text-primary-content"
+      # "md:bg-primary md:text-primary-content"
+      # "lg:bg-primary lg:text-primary-content"
+      primary: "bg-primary text-primary-content",
+      # "sm:bg-secondary sm:text-secondary-content"
+      # "md:bg-secondary md:text-secondary-content"
+      # "lg:bg-secondary lg:text-secondary-content"
+      secondary: "bg-secondary text-secondary-content",
+      # "sm:bg-accent sm:text-accent-content"
+      # "md:bg-accent md:text-accent-content"
+      # "lg:bg-accent lg:text-accent-content"
+      accent: "bg-accent text-accent-content",
+      # "sm:bg-neutral sm:text-neutral-content"
+      # "md:bg-neutral md:text-neutral-content"
+      # "lg:bg-neutral lg:text-neutral-content"
+      neutral: "bg-neutral text-neutral-content",
+      # "sm:bg-base-100 sm:text-base-content"
+      # "md:bg-base-100 md:text-base-content"
+      # "lg:bg-base-100 lg:text-base-content"
+      base_100: "bg-base-100 text-base-content",
+      # "sm:bg-base-200 sm:text-base-content"
+      # "md:bg-base-200 md:text-base-content"
+      # "lg:bg-base-200 lg:text-base-content"
+      base_200: "bg-base-200 text-base-content",
+      # "sm:bg-base-300 sm:text-base-content"
+      # "md:bg-base-300 md:text-base-content"
+      # "lg:bg-base-300 lg:text-base-content"
+      base_300: "bg-base-300 text-base-content",
+      # "sm:bg-info sm:text-info-content"
+      # "md:bg-info sm:text-info-content"
+      # "lg:bg-info sm:text-info-content"
+      info: "bg-info text-info-content",
+      # "sm:bg-success sm:text-success-content"
+      # "md:bg-success md:text-success-content"
+      # "lg:bg-success lg:text-success-content"
+      success: "bg-success text-success-content",
+      # "sm:bg-warning sm:text-warning-content"
+      # "md:bg-warning md:text-warning-content"
+      # "lg:bg-warning lg:text-warning-content"
+      warning: "bg-warning text-warning-content",
+      # "sm:bg-error sm:text-error-content"
+      # "md:bg-error md:text-error-content"
+      # "lg:bg-error lg:text-error-content"
+      error: "bg-error text-error-content"
+    }.freeze
+  end
+end

spec/lib/phlexy_ui/link_spec.rb

@@ -0,0 +1,66 @@
+require "spec_helper"
+
+describe PhlexyUI::Link do
+  subject(:output) { render described_class.new }
+
+  describe "rendering a full link with a block" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::Link.new(
+            "/test",
+            :active,
+            class: "test",
+            data: {my: "data"}
+          ) do
+            span do
+              "Link text"
+            end
+          end
+        end
+      end
+    end
+
+    subject(:output) do
+      render component.new
+    end
+
+    it "is expected to match the formatted HTML" do
+      expected_html = html <<~HTML
+        <a href="/test" class="active test" data-my="data">
+          <span>Link text</span>
+        </a>
+      HTML
+
+      is_expected.to eq(expected_html)
+    end
+  end
+
+  describe "rendering a full link without block" do
+    let(:component) do
+      Class.new(Phlex::HTML) do
+        def view_template(&)
+          render PhlexyUI::Link.new(
+            "Link text",
+            "/test",
+            :active,
+            class: "test",
+            data: {my: "data"}
+          )
+        end
+      end
+    end
+
+    subject(:output) do
+      render component.new
+    end
+
+    it "is expected to match the formatted HTML" do
+      expected_html = html <<~HTML
+        <a href="/test" class="active test" data-my="data">Link text</a>
+      HTML
+
+      is_expected.to eq(expected_html)
+    end
+  end
+end