view_component-contrib 0.2.0 → 0.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 814046bee78131bac6659eaa62160b6dfef169d48d1c5850c03dbe6a00a2ad0f
-  data.tar.gz: ef1ec7cfb3f71bf4db995be3a564dcfc0ff04e72d3c4e116515d216de18b38e8
+  metadata.gz: eb40fc2b6095e17a5cb7402bb9c577ee9df9152b65342a3fd2879861b0ec61c4
+  data.tar.gz: da852768b8dfe7907aae80bcee8afb5a52998185365e4f2bf702d2e5160df8cf
 SHA512:
-  metadata.gz: 9a5d578dfc44e7318da343a0aefe65946cce2399675d92646fd33db8e7494040d16433a3c409a08185d04c249fbc538e494175dce593a6bde19e27d254926d42
-  data.tar.gz: d01e0bf7f11d866aaab42dafb040e7ee45e4257524888b7bb6768b399d2db03c971867e6b14d839c1a66f7e37d9fe71982e287c8280b3a16811891bc61ee4723
+  metadata.gz: d8492733e339fe678625730a079a5831c3647f9063aa13f50f3ef34d1a4c03a1505c536f06bb9cf3959310e311774b265c18cb9f01070d77b3d93a0e7b295241
+  data.tar.gz: d6e0426d3014ea7978eaf807e9a8aa11b0d729f16309e303c2a6a2d0d2d09d34d9e2146293648b57aba7bece138c831f4182c983aea4c2602dfa3dcc769f0cf3

data/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## master
 
+## 0.2.2 (2023-11-29)
+
+- Add `compound` styles support. ([@palkan][])
+
+- Support using booleans as style variant values. ([@palkan][])
+
+## 0.2.1 (2023-11-16)
+
+- Fix style variants inhertiance. ([@palkan][])
+
 ## 0.2.0 (2023-11-07)
 
 - Introduce style variants. ([@palkan][])

data/README.md

@@ -209,15 +209,19 @@ class ButtonComponent < ViewComponent::Base
         md { "text-base" }
         lg { "px-4 py-3 text-lg" }
       }
+      disabled {
+        yes { "opacity-75" }
+      }
     }
     defaults { {size: :md, color: :primary} }
   end
 
-  attr_reader :size, :color
+  attr_reader :size, :color, :disabled
 
-  def initialize(size: nil, color: nil)
+  def initialize(size: nil, color: nil, disabled: false)
     @size = size
     @color = color
+    @disabled = disabled
   end
 end
 ```
@@ -234,6 +238,12 @@ Passing `size: :lg` and `color: :secondary` would result in the following HTML:
 <button class="font-medium bg-purple-500 text-white rounded-full px-4 py-3 text-lg">Click me</button>
 ```
 
+The `true` / `false` variant value would be converted into the `yes` / `no` variants:
+
+```erb
+<button class="<%= style(size:, color:, disabled: true) %>">Click me</button>
+```
+
 **NOTE:** If you pass `nil`, the default value would be used.
 
 You can define multiple style sets in a single component:
@@ -276,11 +286,74 @@ class ButtonComponent < ViewComponent::Base
   # You can provide either a proc or any other callable object
   style_config.postprocess_with do |classes|
     # classes is an array of CSS classes
+    # NOTE: This is an abstract TailwindMerge class, not to be confused with existing libraries
     TailwindMerge.call(classes).join(" ")
   end
 end
 ```
 
+### Dependent (or compound) styles
+
+Sometimes it might be necessary to define complex styling rules, e.g., when a combination of variants requires adding additional styles. That's where usage of Ruby blocks for configuration becomes useful. For example:
+
+```ruby
+style do
+  variants {
+    size {
+      sm { "text-sm" }
+      md { "text-base" }
+      lg { "px-4 py-3 text-lg" }
+    }
+    theme {
+      primary do |size:, **|
+        %w[bg-blue-500 text-white].tap do
+          _1 << "uppercase" if size == :lg
+        end
+      end
+      secondary { %w[bg-purple-500 text-white] }
+    }
+  }
+end
+```
+
+The specified variants are passed as block arguments, so you can implement dynamic styling.
+
+If you prefer declarative approach, you can use the special `compound` directive. The previous example could be rewritten as follows:
+
+```ruby
+style do
+  variants {
+    size {
+      sm { "text-sm" }
+      md { "text-base" }
+      lg { "px-4 py-3 text-lg" }
+    }
+    theme {
+      primary { %w[bg-blue-500 text-white] }
+      secondary { %w[bg-purple-500 text-white] }
+    }
+  }
+
+  compound(size: :lg, theme: :primary) { %w[uppercase] }
+end
+```
+
+### Using with TailwindCSS LSP
+
+To make completions (and other LSP features) work with our DSL, try the following configuration:
+
+```json
+"tailwindCSS.includeLanguages": {
+  "erb": "html",
+  "ruby": "html"
+},
+"tailwindCSS.experimental.classRegex": [
+  "%w\\[([^\\]]*)\\]"
+]
+```
+
+**NOTE:** It will only work with `%w[ ... ]` word arrays, but you can adjust it to your needs.
+
 ## Organizing assets (JS, CSS)
 
 **NOTE**: This section assumes the usage of Vite or Webpack. See [this discussion](https://github.com/palkan/view_component-contrib/discussions/14) for other options.

data/lib/view_component_contrib/style_variants.rb

@@ -75,6 +75,7 @@ module ViewComponentContrib
         @base_block = nil
         @defaults = {}
         @variants = {}
+        @compounds = {}
 
         instance_eval(&init_block) if init_block
       end
@@ -91,17 +92,50 @@ module ViewComponentContrib
         @variants = VariantBuilder.new(true).build(&block)
       end
 
+      def compound(**variants, &block)
+        @compounds[variants] = block
+      end
+
       def compile(**variants)
         acc = Array(@base_block&.call || [])
 
-        @defaults.merge(variants.compact).each do |variant, value|
+        config = @defaults.merge(variants.compact)
+
+        config.each do |variant, value|
+          value = cast_value(value)
           variant = @variants.dig(variant, value) || next
-          styles = variant.is_a?(::Proc) ? variant.call : variant
+          styles = variant.is_a?(::Proc) ? variant.call(**config) : variant
+          acc.concat(Array(styles))
+        end
+
+        @compounds.each do |compound, value|
+          next unless compound.all? { |k, v| config[k] == v }
+
+          styles = value.is_a?(::Proc) ? value.call(**config) : value
           acc.concat(Array(styles))
         end
 
         acc
       end
+
+      def dup
+        copy = super
+        copy.instance_variable_set(:@defaults, @defaults.dup)
+        copy.instance_variable_set(:@variants, @variants.dup)
+        copy.instance_variable_set(:@compounds, @compounds.dup)
+        copy
+      end
+
+      private
+
+      def cast_value(val)
+        case val
+        when true then :yes
+        when false then :no
+        else
+          val
+        end
+      end
     end
 
     class StyleConfig # :nodoc:
@@ -131,6 +165,12 @@ module ViewComponentContrib
         @postprocessor = callable || block
       end
 
+      def dup
+        copy = super
+        copy.instance_variable_set(:@styles, @styles.dup)
+        copy
+      end
+
       private
 
       attr_reader :styles

data/lib/view_component_contrib/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ViewComponentContrib # :nodoc:all
-  VERSION = "0.2.0"
+  VERSION = "0.2.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: view_component-contrib
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.2.2
 platform: ruby
 authors:
 - Vladimir Dementyev
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-08 00:00:00.000000000 Z
+date: 2023-11-29 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: view_component