cubit_components 0.1.0 → 0.2.1

data/lib/cubit_components/previews/stack_component_preview.rb

@@ -1,22 +0,0 @@
-# frozen_string_literal: true
-
-class StackComponentPreview < ViewComponent::Preview
-  # Shows default classes (gap-0 text-left)
-  def default
-    render(CubitComponents::StackComponent.new) do
-      tag.div("Item 1", class: "border") +
-        tag.div("Item 2", class: "border") +
-        tag.div("Item 3", class: "border")
-    end
-  end
-
-  # gap-medium
-  # Overrides gap utility
-  def custom_gap
-    render(CubitComponents::StackComponent.new(vattrs: %w[gap-medium])) do
-      tag.div("Medium gap", class: "border") +
-        tag.div("Medium gap", class: "border") +
-        tag.div("Medium gap", class: "border")
-    end
-  end
-end

data/lib/cubit_components/previews/tiles_component_preview.rb

@@ -1,20 +0,0 @@
-class TilesComponentPreview < ViewComponent::Preview
-  # Default preview: renders three simple tiles.
-  def default
-    render(CubitComponents::TilesComponent.new(vattrs: ["grid-cols-5"])) do
-      tag.div("Tile 1", class: "border p-2") +
-        tag.div("Tile 2", class: "border p-2") +
-        tag.div("Tile 3", class: "border p-2")
-    end
-  end
-
-  # Preview with custom grid columns and gap overrides.
-  def custom_grid_and_gap
-    render(CubitComponents::TilesComponent.new(vattrs: ["md:grid-cols-3", "gap-4"])) do
-      tag.div("Tile 1", class: "border p-2") +
-        tag.div("Tile 2", class: "border p-2") +
-        tag.div("Tile 3", class: "border p-2") +
-        tag.div("Tile 4", class: "border p-2")
-    end
-  end
-end

data/lib/cubit_components/tailwind_generated_classes_chat.txt

@@ -1,127 +0,0 @@
- 
-
-Well, the thing I didn't mention is that this is a Rails engine/gem, and the host app can define other custom breakpoints and I need to have tailwind capture those too. I don't think any of the solutions you mentioned can work with that. Correct me if I'm wrong.
-
-You're absolutely right! Since this is a Rails engine/gem where the host app can define arbitrary custom breakpoints, none of my previous solutions would work. This is a tricky problem because Tailwind needs to know about classes at build time, but you don't know what breakpoints the host app will define.
-
-Here are some approaches that could work:
-
-## Solution 1: Host App Responsibility (Recommended)
-
-Document that host apps need to safelist the dynamic classes themselves:
-
-```ruby
-# In your gem's documentation/README
-# 
-# If you use custom breakpoints with CubitComponents::ColumnsComponent,
-# add them to your tailwind.config.js safelist:
-#
-# safelist: [
-#   { pattern: /^[a-z]+:flex-row$/ },
-#   // or explicitly:
-#   'custom-breakpoint:flex-row',
-#   'another-breakpoint:flex-row'
-# ]
-```
-
-## Solution 2: Configuration Hook
-
-Provide a configuration option in your engine where host apps can register their breakpoints:
-
-```ruby
-# In your engine
-module CubitComponents
-  class << self
-    attr_accessor :breakpoints
-    
-    def configure
-      yield self
-    end
-  end
-  
-  self.breakpoints = %w[sm md lg xl 2xl]
-end
-
-# Host app would do:
-CubitComponents.configure do |config|
-  config.breakpoints = %w[sm md lg xl 2xl tablet desktop custom]
-end
-```
-
-Then provide a rake task or generator that outputs the necessary Tailwind config:
-
-```ruby
-# lib/tasks/cubit_components_tasks.rake
-namespace :cubit_components do
-  desc "Generate Tailwind safelist for CubitComponents"
-  task :tailwind_safelist => :environment do
-    breakpoints = CubitComponents.breakpoints
-    safelist = breakpoints.map { |bp| "#{bp}:flex-row" }
-    
-    puts "Add this to your tailwind.config.js safelist:"
-    puts safelist.to_json
-  end
-end
-```
-
-## Solution 3: Always Use Style Attribute
-
-For truly dynamic values, you might need to bypass Tailwind classes entirely:
-
-```ruby
-private
-
-def build_layout_classes(user)
-  base = %w[flex]
-  base << if @collapse_below && @reverse
-    "flex-col-reverse"
-  elsif @collapse_below
-    "flex-col"
-  else
-    "flex-row"
-  end
-  
-  # Store the breakpoint for later use in style attribute
-  @responsive_style = @collapse_below
-  
-  (base + user.to_s.split).join(" ")
-end
-
-# Then in your component's template, use a media query
-# This would require passing the actual breakpoint value (e.g., "768px")
-```
-
-## Solution 4: JIT Arbitrary Value Support
-
-If the host app uses Tailwind JIT mode, you could potentially use arbitrary values, but this still requires the host app to configure their breakpoints properly.
-
-## Recommendation
-
-I'd recommend **Solution 1** - making it the host app's responsibility to safelist the classes they need. This is the most common pattern for UI component libraries. You could make it easier by:
-
-1. Providing clear documentation
-2. Offering a generator that creates a partial Tailwind config
-3. Providing common patterns they can use
-
-Example generator:
-```ruby
-# lib/generators/cubit_components/tailwind_generator.rb
-module CubitComponents
-  class TailwindGenerator < Rails::Generators::Base
-    def create_safelist_config
-      create_file "config/cubit_components_tailwind.js", <<~JS
-        // Add this to your tailwind.config.js safelist array
-        module.exports = {
-          // Safelist pattern for all breakpoint:flex-row combinations
-          pattern: /^[a-z0-9]+:flex-row$/,
-          
-          // Or if you prefer explicit listing:
-          // 'your-custom-breakpoint:flex-row',
-        }
-      JS
-    end
-  end
-end
-```
-
-This way, you're being transparent about the requirement while giving host apps full control over their Tailwind configuration.

data/lib/cubit_components/tiles_component.rb

@@ -1,43 +0,0 @@
-module CubitComponents
-  class TilesComponent < BaseComponent
-    # Allowed vattrs for grid columns and gap utilities.
-    VALID_VATTRS = Set.new(
-      begin
-        valid = []
-        breakpoints = ["", "sm:", "md:", "lg:", "xl:"]
-        cols = %w[none 1 2 3 4 5]
-        breakpoints.each do |bp|
-          cols.each { |col| valid << "#{bp}grid-cols-#{col}" }
-        end
-        gap_values = %w[0 1 2 3 4 5]
-        gap_values.each { |g| valid << "gap-#{g}" }
-        valid
-      end
-    ).freeze
-
-    DEFAULT_VATTRS = %w[grid-cols-1 gap-0].freeze
-
-    def initialize(element: "div", classes: "", vattrs: [])
-      # Merge defaults (grid cols and gap) with any provided overrides.
-      vattrs = merge_default_vattrs(Array(vattrs))
-      # Ensure grid display is always present.
-      classes = [classes, "grid"].join(" ").strip
-      super
-    end
-
-    private
-
-    def merge_default_vattrs(custom)
-      result = DEFAULT_VATTRS.dup
-      custom.each do |attr|
-        if attr.start_with?("grid-cols-")
-          result.reject! { |v| v.start_with?("grid-cols-") }
-        elsif attr.start_with?("gap-")
-          result.reject! { |v| v.start_with?("gap-") }
-        end
-        result << attr
-      end
-      result
-    end
-  end
-end

data/lib/cubit_components/vattr_validator.rb

@@ -1,53 +0,0 @@
-module CubitComponents
-  module VattrValidator
-    extend ActiveSupport::Concern
-
-    class InvalidVattrError < ArgumentError; end
-
-    private
-
-    def validate_vattrs(vattrs, allowed_vattrs, component_name: self.class.name)
-      return if Rails.env.production?
-
-      invalid_vattrs = Array(vattrs) - Array(allowed_vattrs)
-      return if invalid_vattrs.empty?
-
-      case CubitComponents.configuration.invalid_vattr_behavior
-      when :raise
-        handle_invalid_vattrs_with_exception(invalid_vattrs, allowed_vattrs, component_name)
-      when :warn
-        handle_invalid_vattrs_with_warning(invalid_vattrs, allowed_vattrs, component_name)
-      when :silent
-        # Do nothing
-      end
-    end
-
-    def handle_invalid_vattrs_with_exception(invalid_vattrs, allowed_vattrs, component_name)
-      message = build_error_message(invalid_vattrs, allowed_vattrs, component_name)
-      raise InvalidVattrError, message
-    end
-
-    def handle_invalid_vattrs_with_warning(invalid_vattrs, allowed_vattrs, component_name)
-      message = build_error_message(invalid_vattrs, allowed_vattrs, component_name)
-
-      # Use uplevel to show the warning at the call site
-      Kernel.warn("\n#{message}", uplevel: 3)
-
-      # Also log with color if Rails logger is available
-      if defined?(Rails.logger) && Rails.logger
-        Rails.logger.warn("\e[33m#{message}\e[0m")
-      end
-    end
-
-    def build_error_message(invalid_vattrs, allowed_vattrs, component_name)
-      <<~MESSAGE
-        ⚠️  [CubitComponents] Invalid vattrs for #{component_name}:
-           Invalid: #{invalid_vattrs.join(", ")}
-
-           Allowed vattrs: #{allowed_vattrs.join(", ")}
-
-           These vattrs will have no effect on the component.
-      MESSAGE
-    end
-  end
-end

data/lib/generators/cubit/install/install_generator.rb

@@ -1,63 +0,0 @@
-require "rails/generators" if defined?(Rails::Generators)
-
-module Cubit
-  class InstallGenerator < Rails::Generators::Base
-    source_root File.expand_path("../templates", __FILE__)
-
-    def install
-      say "Installing Cubit Components...", :green
-
-      add_tailwind_import
-      verify_installation
-    end
-
-    private
-
-    def add_tailwind_import
-      target_file = "app/assets/tailwind/application.css"
-
-      if !File.exist?(target_file)
-        say "Could not find Tailwind CSS file to import into. Please manually add:", :red
-        say '@import "../builds/tailwind/cubit_components.css";', :yellow
-        say <<~TW_VERSION_WARNING, :red
-          ⚠️  Warning: Tailwind CSS file not found at #{target_file}.
-          Please ensure you have Tailwind CSS version 4.0 or higher installed and configured correctly and that you are using a CSS config file rather than `tailwind.config.js`.
-        TW_VERSION_WARNING
-        return
-      end
-
-      content = File.read(target_file)
-      import_line = '@import "../builds/tailwind/cubit_components.css";'
-
-      if content.include?(import_line)
-        say "CubitComponents is already imported in #{target_file}", :yellow
-        return
-      end
-
-      if content.include?('@import "tailwindcss";')
-        inject_into_file target_file, after: '@import "tailwindcss";' do
-          "\n#{import_line}"
-        end
-      else
-        append_to_file target_file do
-          "\n#{import_line}"
-        end
-      end
-
-      say "Added CubitComponents import to #{target_file}", :green
-    end
-
-    def verify_installation
-      say "\nVerifying installation...", :blue
-
-      # Check if any Tailwind file contains our import
-      tailwind_files = Dir.glob("app/assets/{stylesheets,tailwind}/*.css")
-      unless tailwind_files.any? { |f| File.read(f).include?("cubit_components") }
-        say "⚠️  Warning: Cubit Components import not found in any CSS files", :red
-        say "Please manually add @import \"../builds/tailwind/cubit_components.css\"; to your main CSS file", :yellow
-      end
-
-      say "✅ Verification complete", :green
-    end
-  end
-end

data/lib/tasks/cubit_components_tasks.rake

@@ -1,4 +0,0 @@
-# desc "Explaining what the task does"
-# task :cubit_components do
-#   # Task goes here
-# end