cubit_components 0.1.0 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cb5dec0910e548ed2c02c397e6d86114e03ce01bec318de5226908b947a5d83b
-  data.tar.gz: 197294b2c0f689acd25e06bf41bbc4ca932336992768b45e594ff43d54043418
+  metadata.gz: '079a9a086defbad7b5c7c8f44d67becc3aa6ba3b8788e67c01a9e5d76e38b82d'
+  data.tar.gz: 65f689f428627c804f4dc52be2ca3acddd32309c50cbccac8fe801a149b63c4e
 SHA512:
-  metadata.gz: 29a419c390f2df73fd6e6783370e68aac8b028620ec9073d49d5f17bc6051a98f0ef49b676dcc1bc3019729b8f6bf4668c257d453d71ce5819544455148a6e00
-  data.tar.gz: 1f9502b054915d5071ee4f660d6cab32184ce1761e79eab82f5f0884f62a312da2771dd1af4e111a14100d36e1a78a7591f4b1a80207a37ad6fe6c863bfb8983
+  metadata.gz: 1313573894c48833cab1e4eb11b6c29a46bca1aa6b221f9b8b230a9f5beee848c43f75f7e7269bb5d28305944279c88212ac365769902017642cf4b9ff785986
+  data.tar.gz: 25afe4f9296084e993fc51b6adc60072dd278eac6e598d914cb4b56d2efb6c23f6c5a138e2be459e7d887e766ba0b159bd57a84d9f9ff9de42845298991d3e57

data/README.md

@@ -1,58 +1,35 @@
 # CubitComponents
 
-A collection of reusable ViewComponents with standardized styling and utility class validation.
+TODO: Delete this and the text below, and describe your gem
+
+Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/cubit_components`. To experiment with that code, run `bin/console` for an interactive prompt.
 
 ## Installation
 
-Add to your Gemfile:
-```ruby
-gem 'cubit_components'
-```
-Then run:
+TODO: Replace `UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG` with your gem name right after releasing it to RubyGems.org. Please do not do it earlier due to security reasons. Alternatively, replace this section with instructions to install your gem from git if you don't plan to release to RubyGems.org.
+
+Install the gem and add to the application's Gemfile by executing:
+
 ```bash
-bundle install
+bundle add UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
 ```
 
-## Usage
+If bundler is not being used to manage dependencies, install the gem by executing:
 
-### Basic Component
-```erb
-<%= render CubitComponents::BoxComponent.new do %>
-  Box content
-<% end %>
+```bash
+gem install UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
 ```
 
-### With Custom Classes
-```erb
-<%= render CubitComponents::StackComponent.new(classes: "bg-gray-100") do %>
-  <div>Item 1</div>
-  <div>Item 2</div>
-<% end %>
-```
+## Usage
 
-### Available Components
-- BoxComponent - Basic container
-- StackComponent - Vertical layout 
-- ColumnsComponent - Horizontal layout
-- BleedComponent - Negative margins
-- ContentBlockComponent - Width-constrained container
-
-## Configuration
-
-Create an initializer to customize validation behavior:
-```ruby
-# config/initializers/cubit_components.rb
-CubitComponents.configure do |config|
-  config.invalid_vattr_behavior = :raise # :warn, :silent
-end
-```
+TODO: Write usage instructions here
 
 ## Development
-After checking out the repo:
-```bash
-bin/setup
-bundle exec rspec
-```
 
-## License
-The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
+After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
+
+To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
+
+## Contributing
+
+Bug reports and pull requests are welcome on GitHub at https://github.com/fapapa/cubit_components.

data/Rakefile

@@ -1,8 +1,11 @@
-require "bundler/setup"
+# frozen_string_literal: true
 
-APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
-load "rails/tasks/engine.rake"
+require "bundler/gem_tasks"
+Bundler::GemHelper.tag_prefix = "cubit_components-"
+require "minitest/test_task"
 
-load "rails/tasks/statistics.rake"
+Minitest::TestTask.create
 
-require "bundler/gem_tasks"
+require "standard/rake"
+
+task default: %i[test standard]

data/lib/cubit_components/base_component.rb

@@ -1,39 +1,68 @@
 # frozen_string_literal: true
 
 require "view_component"
-require_relative "vattr_validator"
+require_relative "style_dsl"
 
 module CubitComponents
   class BaseComponent < ViewComponent::Base
-    include ::CubitComponents::VattrValidator
+    STYLE_CONFIG = StyleConfig.new
 
-    # Valid “utility” / “variant” classes
-    VALID_VATTRS = Set.new(
-      %w[gap-small gap-medium text-left text-center text-right]
-    ).freeze
+    def self.style(&block)
+      dsl = StyleDSL.new
+      dsl.instance_eval(&block)
+      config = dsl.config
+      const_set(:STYLE_CONFIG, config)
+      config.presences.each do |token|
+        define_method("#{token.to_s.tr("-", "_")}?") { @tokens.include?(token) }
+      end
+    end
 
-    # @param vattrs [Array<String>] extra utility / variant classes
-    def initialize(element: "div", classes: "", vattrs: [])
-      @element = element
-      @classes = classes
-      @vattrs = vattrs
+    def self.inline_template(source)
+      compiled = ActionView::Template::Handlers::ERB::Erubi.new(source, bufvar: "@output_buffer").src
+      class_eval <<~RUBY, __FILE__, __LINE__ + 1
+        def call
+          @output_buffer = ActionView::OutputBuffer.new
+          begin
+            #{compiled}
+          end.to_s
+        end
+      RUBY
+    end
 
-      validate_vattrs(vattrs, self.class::VALID_VATTRS) if validate_vattrs?
+    def initialize(tokens: [], as: "div")
+      @tokens = Array(tokens).flat_map { |t|
+        t.is_a?(String) ? t.split.map(&:to_sym) : t
+      }
+      @tag_name = as
     end
 
+    attr_reader :tag_name
+
     def call
-      content_tag @element, content, class: all_classes
+      content_tag(tag_name, content, class: html_classes.map(&:to_s).join(" "))
     end
 
-    private
+    def html_classes
+      config = self.class.const_get(:STYLE_CONFIG)
+      expanded = @tokens.flat_map { |t| expand_token(config, t) }
+      kept_defaults = config.defaults
+        .reject { |d| d.replaced_by && expanded.any? { |t| match?(d.replaced_by, t) } }
+        .map(&:token)
+      visible = expanded.reject { |t| config.presences.include?(t) }
+      (kept_defaults + visible).uniq
+    end
 
-    def all_classes
-      (Array(@vattrs) + Array(@classes.to_s.split)).join(" ").strip
+    private def expand_token(config, token)
+      return config.expansions[token] if config.expansions.key?(token)
+      str = token.to_s
+      config.pattern_expansions.each do |pattern, replacement|
+        return [str.sub(pattern, replacement).to_sym] if pattern.match?(str)
+      end
+      [token]
     end
 
-    # Sub-classes may disable validation
-    def validate_vattrs?
-      true
+    private def match?(pattern, token)
+      pattern.is_a?(Regexp) ? pattern.match?(token) : pattern.include?(token)
     end
   end
 end

data/lib/cubit_components/box_component.rb

@@ -1,8 +1,6 @@
 # frozen_string_literal: true
 
 module CubitComponents
-  class BoxComponent < BaseComponent
-    # Accept every vattr ⇒ disable validation
-    private def validate_vattrs? = false
+  class BoxComponent < CubitComponents::BaseComponent
   end
 end

data/lib/cubit_components/configuration.rb

@@ -1,18 +1,26 @@
+# frozen_string_literal: true
+
 module CubitComponents
   class Configuration
-    attr_reader :invalid_vattr_behavior
+    attr_accessor :token_validation, :placeholder_allowed
 
     def initialize
-      # Set default values
-      @invalid_vattr_behavior = :warn
+      @token_validation = :warn
+      @placeholder_allowed = true
     end
+  end
 
-    def invalid_vattr_behavior=(value)
-      unless [:warn, :raise, :silent].include?(value)
-        raise ArgumentError, "invalid_class_behavior must be :warn, :raise, or :silent"
-      end
+  class << self
+    def configuration
+      @configuration ||= Configuration.new
+    end
+
+    def configure
+      yield(configuration)
+    end
 
-      @invalid_vattr_behavior = value
+    def reset_configuration!
+      @configuration = nil
     end
   end
 end

data/lib/cubit_components/container_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module CubitComponents
+  class ContainerComponent < CubitComponents::BaseComponent
+    style do
+      default :"max-w-7xl", replaced_by: /\Amax-w-/
+      default :"w-full"
+      default :"mx-auto"
+    end
+  end
+end

data/lib/cubit_components/flex_component.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module CubitComponents
+  class FlexComponent < CubitComponents::BaseComponent
+    style do
+      default :flex, replaced_by: %i[flex inline-flex]
+      expand(
+        inline: %i[inline-flex],
+        row: %i[flex-row],
+        col: %i[flex-col],
+        "row-reverse": %i[flex-row-reverse],
+        "col-reverse": %i[flex-col-reverse],
+        wrap: %i[flex-wrap]
+      )
+    end
+  end
+end

data/lib/cubit_components/grid_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module CubitComponents
+  class GridComponent < CubitComponents::BaseComponent
+    style do
+      default :grid, replaced_by: %i[grid inline-grid]
+      expand inline: %i[inline-grid]
+      expand(
+        /\Acols-(.+)\z/ => 'grid-cols-\1',
+        /\Arows-(.+)\z/ => 'grid-rows-\1',
+        /\Aflow-(.+)\z/ => 'grid-flow-\1',
+        /\Amin-col-w-(\d+)\z/ => 'grid-cols-[repeat(auto-fit,_minmax(\1px,_1fr))]'
+      )
+    end
+  end
+end

data/lib/cubit_components/hstack_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module CubitComponents
+  class HStackComponent < CubitComponents::BaseComponent
+    style do
+      default :flex
+      default :"flex-row"
+      default :"items-center-safe"
+      default :"gap-16", replaced_by: /\Agap-/
+    end
+  end
+end

data/lib/cubit_components/page_component.rb

@@ -1,34 +1,18 @@
+# frozen_string_literal: true
+
 module CubitComponents
-  class PageComponent < BaseComponent
-    VALID_VATTRS = %w[
-      min-h-screen flex
-    ]
+  class PageComponent < CubitComponents::BaseComponent
+    style do
+      default :flex
+      default :"flex-col"
+      default :"min-h-screen"
+      presence :"footer-below-fold"
+    end
 
-    # Use ViewComponent slot for footer.
     renders_one :footer
 
-    erb_template <<~ERB
-      <<%= @element %> class="<%= classes %>">
-        <div class="grow pb-30<%= ' min-h-screen' if below_fold? %>">
-          <%= content %>
-        </div>
-        <%= footer %>
-      </<%= @element %>>
+    inline_template <<~ERB
+      <%= content_tag(tag_name, class: html_classes.map(&:to_s).join(" ")) do %><div class="<%= footer_below_fold? ? "min-h-screen" : "grow pb-24" %>"><%= content %></div><%= footer %><% end %>
     ERB
-
-    # @param footer_position: nil (default) or "below_fold"
-    def initialize(footer_position: nil, classes: "")
-      @footer_position = footer_position
-      @classes = ["flex", "flex-col", "min-h-screen", classes].join(" ")
-      super(element: "div", classes: @classes)
-    end
-
-    private
-
-    attr_reader :classes
-
-    def below_fold?
-      @footer_position.to_s == "below_fold"
-    end
   end
 end

data/lib/cubit_components/page_container_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module CubitComponents
+  class PageContainerComponent < CubitComponents::BaseComponent
+    style do
+      default :"px-4"
+      default :"md:px-6"
+      default :"lg:px-8"
+    end
+
+    # Two-element wrapper: an outer gutter element wraps an inner Container.
+    # Caller tokens (notably max-w-*) route to the inner Container per FR-17;
+    # the outer element carries only the fixed responsive gutters.
+    def call
+      inner = content_tag(
+        "div",
+        content,
+        class: ContainerComponent.new(tokens: @tokens).html_classes.map(&:to_s).join(" ")
+      )
+      content_tag(tag_name, inner, class: gutter_classes)
+    end
+
+    private def gutter_classes
+      self.class.const_get(:STYLE_CONFIG).defaults.map { |d| d.token.to_s }.join(" ")
+    end
+  end
+end

data/lib/cubit_components/placeholder_component.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module CubitComponents
+  class PlaceholderComponent < CubitComponents::BaseComponent
+    style do
+      default :flex
+      default :"items-center"
+      default :"justify-center"
+      default :"text-sm"
+      default :"text-gray-500"
+    end
+
+    DOTTED_GRID_STYLE =
+      "background-image:radial-gradient(currentColor 1px,transparent 1px);" \
+      "background-size:16px 16px"
+
+    def initialize(label: nil, tokens: [], as: "div")
+      unless CubitComponents.configuration.placeholder_allowed
+        raise PlaceholderNotAllowedError,
+          "PlaceholderComponent is only available when placeholder_allowed is enabled " \
+          "(dev/test); it is disabled in this environment."
+      end
+      @label = label
+      super(tokens:, as:)
+    end
+
+    def call
+      content_tag(
+        tag_name,
+        @label,
+        class: html_classes.map(&:to_s).join(" "),
+        style: DOTTED_GRID_STYLE
+      )
+    end
+  end
+end

data/lib/cubit_components/spread_component.rb

@@ -1,59 +1,14 @@
-require "debug"
+# frozen_string_literal: true
 
 module CubitComponents
-  class SpreadComponent < BaseComponent
-    VALID_VATTRS = Set.new(
-      %w[
-        items-start items-center items-end
-        text-left text-center text-right
-        flex-col flex-row
-        justify-between
-      ]
-    ).freeze
-
-    DEFAULT_VATTRS = %w[flex justify-between w-full items-start text-left].freeze
-
-    # @param element [String] HTML element to use
-    # @param classes [String] additional CSS classes
-    # @param vattrs [Array<String>] utility/variant attributes
-    def initialize(element: "div", classes: "", vattrs: [])
-      vattrs = merge_default_vattrs(Array(vattrs))
-
-      extra_classes = []
-      # Add vertical class if specified, otherwise it's horizontal by default
-      if vattrs.include?("vertical")
-        extra_classes << "flex-col"
-        extra_classes << "h-full"
-        vattrs.delete("vertical")
-      else
-        extra_classes << "flex-row"
-      end
-
-      super(
-        element: element,
-        classes: [classes, extra_classes].join(" ").strip,
-        vattrs: vattrs
-      )
-    end
-
-    private
-
-    def merge_default_vattrs(custom)
-      result = DEFAULT_VATTRS.dup
-
-      # Override defaults with custom values
-      custom.each do |attr|
-        # For each attribute type (items-*, text-*), remove the default if a custom is provided
-        if attr.start_with?("items-")
-          result.delete_if { |v| v.start_with?("items-") }
-        elsif attr.start_with?("text-")
-          result.delete_if { |v| v.start_with?("text-") }
-        end
-
-        result << attr
-      end
-
-      result
+  class SpreadComponent < CubitComponents::BaseComponent
+    style do
+      default :flex
+      default :"justify-between"
+      default :"gap-8", replaced_by: /\Agap-/
+      default :"w-full"
+      default :"items-center", replaced_by: /\Aitems-/
+      expand col: %i[flex-col], row: %i[flex-row]
     end
   end
 end

data/lib/cubit_components/stack_component.rb

@@ -1,32 +1,14 @@
 # frozen_string_literal: true
 
 module CubitComponents
-  class StackComponent < BaseComponent
-    VALID_VATTRS = Set.new(
-      %w[
-        gap-0 gap-small gap-medium gap-large
-        text-left text-center text-right
-      ]
-    ).freeze
-
-    DEFAULT_VATTRS = %w[flex flex-col gap-0 text-left].freeze
-
-    # Forward element / classes, but merge-override vattrs
-    def initialize(element: "div", classes: "", vattrs: [])
-      vattrs = merge_default_vattrs(Array(vattrs))
-      super
+  class StackComponent < CubitComponents::BaseComponent
+    style do
+      default :flex
+      default :"flex-col", replaced_by: %i[flex-col flex-row flex-col-reverse flex-row-reverse]
+      default :"gap-16", replaced_by: /\Agap-/
+      expand col: %i[flex-col], row: %i[flex-row], wrap: %i[flex-wrap]
     end
 
-    private
-
-    # Replace default gap- or text- related vattrs when caller supplies one
-    def merge_default_vattrs(custom)
-      merged = DEFAULT_VATTRS.dup
-      custom.each do |v|
-        merged.reject! { |d| d.start_with?("gap-") } if v.start_with?("gap-")
-        merged.reject! { |d| d.start_with?("text-") } if v.start_with?("text-")
-      end
-      (merged + custom).uniq
-    end
+    renders_one :separator
   end
 end

data/lib/cubit_components/style_dsl.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+module CubitComponents
+  class StyleConfig
+    Default = Data.define(:token, :replaced_by)
+
+    attr_reader :defaults, :expansions, :pattern_expansions, :presences
+
+    def initialize(defaults: [], expansions: {}, pattern_expansions: {}, presences: [])
+      @defaults = defaults.freeze
+      @expansions = expansions.freeze
+      @pattern_expansions = pattern_expansions.freeze
+      @presences = presences.freeze
+      freeze
+    end
+  end
+
+  class StyleDSL
+    def initialize
+      @defaults = []
+      @expansions = {}
+      @pattern_expansions = {}
+      @presences = []
+    end
+
+    def default(token, replaced_by: nil)
+      @defaults << StyleConfig::Default.new(token: token, replaced_by: replaced_by.freeze)
+    end
+
+    def expand(**pairs)
+      pairs.each do |key, value|
+        if key.is_a?(Regexp)
+          @pattern_expansions[key] = value.freeze
+        else
+          @expansions[key] = value.freeze
+        end
+      end
+    end
+
+    def presence(token)
+      @presences << token
+    end
+
+    def config
+      StyleConfig.new(
+        defaults: @defaults,
+        expansions: @expansions,
+        pattern_expansions: @pattern_expansions,
+        presences: @presences
+      )
+    end
+  end
+end

data/lib/cubit_components/version.rb

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 module CubitComponents
-  VERSION = "0.1.0"
+  VERSION = "0.2.1"
 end

data/lib/cubit_components/vstack_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module CubitComponents
+  class VStackComponent < CubitComponents::BaseComponent
+    style do
+      default :flex
+      default :"flex-col"
+      default :"items-center-safe"
+      default :"gap-16", replaced_by: /\Agap-/
+    end
+  end
+end

data/lib/cubit_components.rb

@@ -1,34 +1,21 @@
-require "cubit_components/version"
-require "cubit_components/engine"
+# frozen_string_literal: true
 
-# components
+require_relative "cubit_components/version"
 require_relative "cubit_components/base_component"
 require_relative "cubit_components/box_component"
+require_relative "cubit_components/flex_component"
 require_relative "cubit_components/stack_component"
-require_relative "cubit_components/inline_component"
-require_relative "cubit_components/columns_component"
+require_relative "cubit_components/hstack_component"
+require_relative "cubit_components/vstack_component"
+require_relative "cubit_components/grid_component"
+require_relative "cubit_components/container_component"
+require_relative "cubit_components/page_container_component"
 require_relative "cubit_components/spread_component"
-require_relative "cubit_components/tiles_component"
-require_relative "cubit_components/content_block_component"
-require_relative "cubit_components/page_block_component"
+require_relative "cubit_components/placeholder_component"
 require_relative "cubit_components/page_component"
-require_relative "cubit_components/bleed_component"
 require_relative "cubit_components/configuration"
 
 module CubitComponents
-  class << self
-    attr_writer :configuration
-  end
-
-  def self.configuration
-    @configuration ||= Configuration.new
-  end
-
-  def self.configure
-    yield(configuration)
-  end
-
-  def self.reset_configuration!
-    @configuration = Configuration.new
-  end
+  class Error < StandardError; end
+  class PlaceholderNotAllowedError < Error; end
 end

data/sig/cubit_components.rbs

@@ -0,0 +1,4 @@
+module CubitComponents
+  VERSION: String
+  # See the writing guide of rbs: https://github.com/ruby/rbs#guides
+end