componeer 0.0.7b → 0.0.11a

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3f497c0538b1d0dadcb6e0784b88b9d649ef2670e7c62f37127e12d19dcdcb38
-  data.tar.gz: d362b552e3a1daf1b6a5e5bf439cc1dc9457ad969ec099b5ad02835768cbd542
+  metadata.gz: fea358fca5011fbf1cc657f027aaad0cc072b909c011c06f01944148653aa4f5
+  data.tar.gz: dbc3edcf000d827c5a08d1826b333bdcd91204f59ad684d916de37d77273f93e
 SHA512:
-  metadata.gz: e8a0678a20adeb1b42e62d4e4933095031047b7989e4d062564f9a2b8654637538c3a25540a83f99cbe59e554c8c23faa2c698ad712835e1a24e308b51982c29
-  data.tar.gz: ec3cd5cab6ced503afe8b739e42e68adb850a3fef1984720b0c6b935af5e720689ecc9ea8fa4a882444e0f917aa5292f03ff043710694f51fb51921dcb9b046e
+  metadata.gz: 5c37119eaa82dd6c26540e2baec5ba4372504de9bb1d7551ed3c01209d15150857676d08d37ae6476f6beafe3aaefb3b92a841232f7d6871efb6ae8bdb67782b
+  data.tar.gz: 73918f9a74b589e5067e02713730e3afdaea3eea368e2a8ebca00629859f11036467efeb5a29313034ca3d4d061777058af44286d910390ad4329ff7a2c34244

data/app/components/componeer/base_component.rb

@@ -1,3 +1,5 @@
+require 'tailwind_merge'
+
 module Componeer
   class BaseComponent < ViewComponent::Base
     include Componeer::Helpers
@@ -37,8 +39,12 @@ module Componeer
              **options)
     end
 
+    def merge_tailwind_classes(*classes)
+      TailwindMerge::Merger.new.merge(to_classes_string(classes))
+    end
+
     def to_classes_string(array)
-      array.flatten.compact_blank.uniq.join(' ')
+      flattenize(array).join(' ')
     end
 
     private
@@ -53,5 +59,19 @@ module Componeer
 
       @options = opts
     end
+
+    def resolve_custom_classes(string_or_hash)
+      return {} unless string_or_hash
+
+      if string_or_hash.is_a?(String)
+        self.class::CUSTOM_CLASS_KEYS.index_with { |_key| string_or_hash }
+      else
+        string_or_hash
+      end
+    end
+
+    def flattenize(array)
+      [array].flatten.compact_blank.uniq
+    end
   end
 end

data/app/components/componeer/cards/card_component.html.erb

@@ -0,0 +1,11 @@
+<div>
+  <% if header? %>
+    <div class="<%= header_styles %>">
+      <%= header_text || header %>
+    </div>
+  <% end %>
+
+  <div class="<%= body_styles %>">
+    <%= body_text || body %>
+  </div>
+</div>

data/app/components/componeer/cards/card_component.rb

@@ -0,0 +1,54 @@
+module Componeer
+  module Cards
+    class CardComponent < BaseComponent
+      register_as :card
+
+      renders_one :header
+      renders_one :body
+
+      attr_reader :mode, :header_text, :body_text, :size, :color, :shape, :custom_classes
+
+      CUSTOM_CLASS_KEYS = %i[header body].freeze
+      DEFAULT_OPTIONS = { mode: :primary, header_text: nil, body_text: nil, size: :default,
+                          color: :default }.freeze
+
+      def initialize(**options)
+        @custom_classes = resolve_custom_classes(options.delete(:class))
+        build_options(options)
+      end
+
+      def header?
+        (header_text || header).present?
+      end
+
+      def primary?
+        mode == :primary
+      end
+
+      def header_styles
+        merge_tailwind_classes([common_styles, styles[:header], border_for(:header),
+                                shape_for(:header), custom_classes[:header]&.to_s&.split])
+      end
+
+      def body_styles
+        merge_tailwind_classes([common_styles, styles[:body], border_for(:body), shape_for(:body),
+                                custom_classes[:body]&.to_s&.split])
+      end
+
+      private
+
+      def common_styles
+        [styles.dig(:base, :size, size), styles.dig(:base, :color, mode, color)]
+      end
+
+      def border_for(element)
+        { header: primary? ? 'border-b' : 'border',
+          body: primary? ? '' : "border #{(header? && 'border-t-0').presence}" }.fetch(element)
+      end
+
+      def shape_for(element)
+        { header: 'rounded-t-lg', body: header? ? 'rounded-b-lg' : 'rounded-lg' }.fetch(element)
+      end
+    end
+  end
+end

data/app/components/componeer/cards/styles.yml

@@ -0,0 +1,20 @@
+---
+:base:
+  :size:
+    :small: text-xs px-2 py-1
+    :default: text-sm px-3 py-2
+  :color:
+    :outline:
+      :default: bg-white text-gray-800 border-gray-300
+      :brand: bg-white text-brand-800 border-brand-300
+      :info: bg-white text-cyan-800 border-cyan-300
+      :warning: bg-white text-amber-800 border-amber-300
+      :danger: bg-white text-red-800 border-red-300
+    :primary:
+      :default: bg-gray-50 text-gray-800 border-gray-300
+      :brand: bg-brand-50 text-brand-800 border-brand-300
+      :info: bg-cyan-50 text-cyan-800 border-cyan-300
+      :warning: bg-amber-50 text-amber-800 border-amber-300
+      :danger: bg-red-50 text-red-800 border-red-300
+:header: font-semibold
+:body:  font-normal

data/app/components/componeer/tables/column_component.rb

@@ -1,16 +1,18 @@
 module Componeer
   module Tables
     class ColumnComponent < BaseComponent
-      attr_reader :table, :title, :custom_classes, :alignment, :options
+      attr_reader :table, :title, :custom_classes, :align, :options
       delegate :density, to: :table
 
+      CUSTOM_CLASS_KEYS = %i[th td].freeze
+      DEFAULT_OPTIONS = { align: :left }.freeze
+
       def initialize(table, title, **options, &block)
         @table = table
         @title = title
-        @custom_classes = resolve_classes(options.delete(:class)) || {}
-        @alignment = options.delete(:align) || :left
-        @options = options
+        @custom_classes = resolve_custom_classes(options.delete(:class))
         @block = block
+        build_options(options)
       end
 
       def call(record)
@@ -28,17 +30,9 @@ module Componeer
       private
 
       def attribute_classes(attr, key:)
-        to_classes_string([styles.dig(key, :column, :density, density),
-                           styles.dig(key, :column, :alignment, alignment),
-                           custom_classes[attr].to_s.split])
-      end
-
-      def resolve_classes(hash_or_string)
-        if hash_or_string.is_a?(String)
-          { th: hash_or_string, td: hash_or_string }
-        else
-          hash_or_string
-        end
+        merge_tailwind_classes([styles.dig(key, :column, :density, density),
+                                styles.dig(key, :column, :alignment, align),
+                                custom_classes[attr].to_s.split])
       end
     end
   end

data/app/components/componeer/tags/styles.yml

@@ -1,11 +1,12 @@
 ---
 :size:
-  :small: text-xs px-1 p-0.5
+  :small: text-xs px-1.5 p-0.5
   :default: text-sm px-2 py-1
   :large: text-base px-3 py-1.5
 :shape:
-  :rounded: rounded rounded-lg
+  :rounded: rounded-lg
   :flat: rounded-none
+  :circle: :rounded-full
 :color:
   :gray: bg-gray-100 text-gray-700
   :brand: bg-brand-100 text-brand-700

data/app/components/componeer/tags/tag_component.rb

@@ -3,19 +3,21 @@ module Componeer
     class TagComponent < BaseComponent
       register_as :tag
 
-      attr_reader :text, :type, :size, :color, :shape, :options
+      attr_reader :text, :type, :size, :color, :shape, :custom_classes, :options
 
       DEFAULT_OPTIONS = { type: :default, size: :default, color: :gray, shape: :rounded }.freeze
 
       def initialize(text = nil, **options)
         @text = text
+        @custom_classes = options.delete(:class)
         build_options(options)
       end
 
       def base_classes
-        to_classes_string([styles.dig(:size, size),
-                           styles.dig(:color, color),
-                           styles.dig(:shape, shape)])
+        merge_tailwind_classes([styles.dig(:size, size),
+                                styles.dig(:color, color),
+                                styles.dig(:shape, shape),
+                                custom_classes])
       end
     end
   end

data/config/initializers/inline_svg.rb

@@ -1,3 +1,5 @@
+require 'inline_svg'
+
 InlineSvg.configure do |config|
   config.asset_file = InlineSvg::CachedAssetFile.new(
     paths: ["#{__dir__}/../../app/assets/images/icons/"],

data/lib/componeer/version.rb

@@ -1,3 +1,3 @@
 module Componeer
-  VERSION = '0.0.7b'.freeze
+  VERSION = '0.0.11a'.freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: componeer
 version: !ruby/object:Gem::Version
-  version: 0.0.7b
+  version: 0.0.11a
 platform: ruby
 authors:
 - Andre Rodrigues
@@ -10,7 +10,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-06-04 00:00:00.000000000 Z
+date: 2024-09-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: inline_svg
@@ -32,6 +32,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 1.9.0
+- !ruby/object:Gem::Dependency
+  name: tailwind_merge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.12.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 0.12.0
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
@@ -76,6 +90,9 @@ files:
 - app/components/componeer/buttons/button_component.html.erb
 - app/components/componeer/buttons/button_component.rb
 - app/components/componeer/buttons/styles.yml
+- app/components/componeer/cards/card_component.html.erb
+- app/components/componeer/cards/card_component.rb
+- app/components/componeer/cards/styles.yml
 - app/components/componeer/empty_states/empty_state_component.html.erb
 - app/components/componeer/empty_states/empty_state_component.rb
 - app/components/componeer/tables/column_component.rb