ui_components 0.1.0

data/app/views/ui_components/daisy_ui/data_display_components/badge.html.erb

@@ -0,0 +1,150 @@
+<% component = UiComponents::DaisyUi::DataDisplay::BadgeComponent %>
+
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display > Badge</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "< Avatar", daisy_ui_avatar_path, class: "link link-primary m-2" %>
+      <%= link_to "Home", daisy_ui_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Badge" } %>
+    <%= document.with_body do |body| %>
+      <%= body.with_preview_example(
+        source: <<~ERB
+                  <$= render #{component}.new do $>
+                    Default
+                  <$ end $>
+                ERB
+      ) %>
+    <% end %>
+  <% end %>
+
+  <% sizes = { 'xs' => 'Xsmall', 'sm' => 'Small', 'md' => 'Medium', 'lg' => 'Large', 'xl' => 'Xlarge' } %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Badge sizes" } %>
+    <%= document.with_body do |body| %>
+      <% sizes.each do |key, value| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(size: "#{key}") do $>
+                      #{value}
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% colors = { 'primary' => 'Primary', 'secondary' => 'Secondary', 'accent' => 'Accent', 'info' => 'Info', 'success' => 'Success', 'warning' => 'Warning', 'error' => 'Error' } %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Badge with colors" } %>
+    <%= document.with_body do |body| %>
+      <% colors.each do |key, value| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(color: "#{key}") do $>
+                      #{value}
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% kinds = { 'soft' => 'Soft', 'outline' => 'Outline', 'dash' => 'Dash', 'ghost' => 'Ghost' } %>
+
+  <% kinds.each do |kind_key, kind_value| %>
+    <%= render DocumentationComponent.new do |document| %>
+      <%= document.with_header { "# #{kind_value} #{kind_key == "ghost" ? 'badge' : 'badges'}" } %>
+      <%= document.with_body do |body| %>
+        <% colors.each do |color_key, value| %>
+
+          <% next if data_display_badge_skip_kind(kind_key:, color_key:) %>
+
+          <%= body.with_preview_example(
+            source: <<~ERB
+                      <$= render #{component}.new(#{data_display_badge_handle_component_params(kind_key:, color_key:)}) do $>
+                        #{kind_key == "ghost" ? kind_value : value}
+                      <$ end $>
+                    ERB
+          ) %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Empty badge" } %>
+    <%= document.with_body do |body| %>
+      <% sizes.keys.reverse.each do |key| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(size: "#{key}", color: "primary") $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% badge_with_icon_colors = { 'info' => 'Info', 'success' => 'Success', 'warning' => 'Warning', 'error' => 'Error' } %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Badge with icon" } %>
+    <%= document.with_body do |body| %>
+      <% badge_with_icon_colors.each do |key, value| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render #{component}.new(color: "#{key}") do $>
+                      #{data_display_badge_icons[key]}
+                      #{value}
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Badge in a text" } %>
+    <%= document.with_body do |body| %>
+      <% sizes.keys.reverse.each_with_index do |key, index| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <h1 class="text-#{key == "md" ? "base" : key} font-semibold">
+                      Heading #{index+1}
+                      <$= render #{component}.new(size: "#{key}") do $>
+                        Badge
+                      <$ end $>
+                    </h1>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <% badge_with_button_colors = ["", "secondary"] %>
+
+  <%= render DocumentationComponent.new do |document| %>
+    <%= document.with_header { "# Badge in a button" } %>
+    <%= document.with_body do |body| %>
+      <% badge_with_button_colors.each do |key| %>
+        <%= body.with_preview_example(
+          source: <<~ERB
+                    <$= render UiComponents::DaisyUi::Action::ButtonComponent.new do $>
+                      Inbox
+                      <$= render #{component}.new(size: "sm"#{", color: \"#{key}\"" if key.present?}) do $>
+                        +99
+                      <$ end $>
+                    <$ end $>
+                  ERB
+        ) %>
+      <% end %>
+    <% end %>
+  <% end %>
+</div>

data/app/views/ui_components/daisy_ui/home/index.html.erb

@@ -0,0 +1,20 @@
+<div class="grid grid-cols gap-16 p-2 mt-6 mb-36">
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Actions</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "Button", daisy_ui_button_path, class: "link link-primary m-2" %>
+      <%= link_to "Dropdown", daisy_ui_dropdown_path, class: "link link-primary m-2" %>
+      <%= link_to "Modal", daisy_ui_modal_path, class: "link link-primary m-2" %>
+      <%= link_to "Swap", daisy_ui_swap_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+
+  <div class="mb-2">
+    <h1 class="font-bold mb-2"># Data display</h1>
+    <ul class="bg-base-100 rounded-box shadow-md p-2">
+      <%= link_to "Accordion", daisy_ui_accordion_path, class: "link link-primary m-2" %>
+      <%= link_to "Avatar", daisy_ui_avatar_path, class: "link link-primary m-2" %>
+      <%= link_to "Badge", daisy_ui_badge_path, class: "link link-primary m-2" %>
+    </ul>
+  </div>
+</div>

data/config/routes.rb

@@ -0,0 +1,22 @@
+UiComponents::Engine.routes.draw do
+  scope '/ui_components' do
+    namespace :daisy_ui do
+      get '/', to: "home#index"
+
+      # Actions
+      scope controller: :action_components do
+        get "button"
+        get "dropdown"
+        get "modal"
+        get "swap"
+      end
+
+      # Dara Display
+      scope controller: :data_display_components do
+        get "accordion"
+        get "avatar"
+        get "badge"
+      end
+    end
+  end
+end

data/lib/tasks/ui_components_tasks.rake

@@ -0,0 +1,55 @@
+namespace :ui_components do
+  desc "Initial UiComponents settings"
+  task setup: :environment do
+    # Set config default rails tailwindcss
+    Rake::Task["tailwindcss:install"].invoke
+
+    # Inject data into Procfile.dev file
+    UiComponents::Config.inject_into_file(file_path: Rails.root.join("Procfile.dev"),
+                                          file_data: "trigger: bin/rails ui_components:trigger")
+
+    # Add DaisyUI
+    system("yarn add daisyui")
+
+    # Inject data into app/assets/tailwind/application.css file
+    UiComponents::Config.inject_into_file(file_path: Rails.root.join("app/assets/tailwind/application.css"),
+                                          file_data: '@plugin "daisyui";')
+
+    # Creating mandatory tailwindcss classes
+    UiComponents::Config.safelist!
+
+    # Inject data into .gitignore file
+    UiComponents::Config.inject_into_file(file_path: Rails.root.join(".gitignore"),
+                                          file_data: "safelist.txt")
+
+    # Building tailwindcss assets
+    # Rake::Task["tailwindcss:build"].invoke
+
+    # Add engine for routes.rb
+    UiComponents::Config.inject_into_routes(file_path: Rails.root.join("config/routes.rb"),
+                                            route_line: 'mount UiComponents::Engine, at: "/"')
+
+    # Inject data into config/importmap.rb file
+    UiComponents::Config.inject_into_file(
+      file_path: Rails.root.join("config/importmap.rb"),
+      file_data: %(pin_all_from UiComponents::Config.js_controllers_path, under: "ui_components/controllers")
+    )
+
+    # Inject data into app/javascript/controllers/index.js file
+    UiComponents::Config.inject_into_file(
+      file_path: Rails.root.join("app/javascript/controllers/index.js"),
+      file_data: %(eagerLoadControllersFrom("ui_components/controllers", application))
+    )
+  end
+
+  desc "Trigger UiComponents tailwindcss classes"
+  task trigger: :environment do
+    sleep 2
+
+    UiComponents::Config.safelist!
+
+    loop do
+      sleep 3600
+    end
+  end
+end

data/lib/ui_components/config/daisy_ui_class_names.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module Config
+    module DaisyUiClassNames
+      DAISY_UI_COMPONENTS = {
+        action: %w[button dropdown modal swap],
+        data_display: %w[accordion avatar badge]
+      }.freeze
+
+      class << self
+        def all
+          (
+            DAISY_UI_COMPONENTS.filter_map { |scope, components| get_component_classes(scope:, components:) }.flatten +
+            other_class_names
+          ).uniq
+        end
+
+        private
+
+        def other_class_names
+          %w[link link-primary join join-vertical avatar-group -space-x-6 text-info]
+        end
+
+        def get_component_classes(scope:, components:)
+          components.filter_map { |component|
+            "UiComponents::DaisyUi::#{scope.to_s.capitalize.classify}::#{component.to_s.capitalize}Component::CSS_CLASSES".safe_constantize
+          }.flatten
+        end
+      end
+    end
+  end
+end

data/lib/ui_components/config/tailwind_class_names.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module Config
+    module TailwindClassNames
+      class << self
+        def all
+          flexbox_and_grid +
+          spacing +
+          sizing +
+          typography +
+          borders +
+          svg
+        end
+
+        private
+
+        def flexbox_and_grid
+          %w[grid grid-cols gap-16]
+        end
+
+        def spacing
+          %w[p-2 m-2 mt-6 mb-36]
+        end
+
+        def sizing
+          %w[w-8 w-10 w-12 w-16 w-20 w-32 h-10]
+        end
+
+        def typography
+          %w[text-xl font-semibold text-center]
+        end
+
+        def borders
+          %w[rounded rounded-xl rounded-full]
+        end
+
+        def svg
+          %w[fill-current]
+        end
+      end
+    end
+  end
+end

data/lib/ui_components/config.rb

@@ -0,0 +1,52 @@
+# frozen_string_literal: true
+
+require_relative "config/tailwind_class_names"
+require_relative "config/daisy_ui_class_names"
+module UiComponents
+  module Config
+    class << self
+      def inject_into_file(file_path:, file_data:)
+        return unless File.exist?(file_path)
+
+        file_content = File.read(file_path)
+
+        return if file_content.include?(file_data)
+
+        File.open(file_path, "a") do |file|
+          file.puts file_data
+        end
+      end
+
+      def inject_into_routes(file_path:, route_line:)
+        return unless File.exist?(file_path)
+
+        file_content = File.read(file_path)
+
+        return if file_content.include?(route_line.strip)
+
+        updated_content = file_content.gsub(
+          /Rails\.application\.routes\.draw do\n/,
+          "Rails.application.routes.draw do\n  #{route_line}\n"
+        )
+
+        File.open(file_path, "w") { |file| file.write(updated_content) }
+      end
+
+      def js_controllers_path
+        UiComponents::Engine.root.join("app/assets/javascripts/ui_components/controllers")
+      end
+
+      def safelist!
+        file_content =(
+          UiComponents::Config::DaisyUiClassNames.all +
+          UiComponents::Config::TailwindClassNames.all +
+          DocumentationComponent::CSS_CLASSES
+        ).uniq.sort.join(" ")
+
+        File.write(Rails.root.join("safelist.txt"), file_content)
+
+        file_content
+      end
+    end
+  end
+end

data/lib/ui_components/engine.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+require "rails/engine"
+require "view_component"
+require "tailwindcss-rails"
+module UiComponents
+  class Engine < ::Rails::Engine
+    isolate_namespace UiComponents
+
+    config.autoload_paths << File.expand_path("app/components", root)
+  end
+end

data/lib/ui_components/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module UiComponents
+  VERSION = "0.1.0"
+end

data/lib/ui_components.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+require_relative "ui_components/version"
+require_relative "ui_components/engine"
+require_relative "ui_components/config"
+
+module UiComponents
+  class Error < StandardError; end
+end

data/sig/ui_components.rbs

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

metadata

@@ -0,0 +1,155 @@
+--- !ruby/object:Gem::Specification
+name: ui_components
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- jannilsonn
+bindir: exe
+cert_chain: []
+date: 2025-03-29 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 8.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 8.0.0
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.21'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.21'
+- !ruby/object:Gem::Dependency
+  name: tailwindcss-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.2'
+- !ruby/object:Gem::Dependency
+  name: tailwind_merge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.1'
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- CODE_OF_CONDUCT.md
+- LICENSE.txt
+- README.md
+- Rakefile
+- app/assets/javascripts/ui_components/controllers/clipboard_controller.js
+- app/components/documentation/body/example_preview_component.rb
+- app/components/documentation/body_component.html.erb
+- app/components/documentation/body_component.rb
+- app/components/documentation_component.rb
+- app/components/ui_components/daisy_ui/action/button_component.rb
+- app/components/ui_components/daisy_ui/action/dropdown/anchor_component.rb
+- app/components/ui_components/daisy_ui/action/dropdown/card_component.rb
+- app/components/ui_components/daisy_ui/action/dropdown/card_item_component.rb
+- app/components/ui_components/daisy_ui/action/dropdown/list_item_component.rb
+- app/components/ui_components/daisy_ui/action/dropdown/menu_component.rb
+- app/components/ui_components/daisy_ui/action/dropdown_component.rb
+- app/components/ui_components/daisy_ui/action/modal/anchor_component.rb
+- app/components/ui_components/daisy_ui/action/modal/dialog/box/action/item_component.rb
+- app/components/ui_components/daisy_ui/action/modal/dialog/box/action_component.rb
+- app/components/ui_components/daisy_ui/action/modal/dialog/box/body_component.rb
+- app/components/ui_components/daisy_ui/action/modal/dialog/box/close_component.rb
+- app/components/ui_components/daisy_ui/action/modal/dialog/box/title_component.rb
+- app/components/ui_components/daisy_ui/action/modal/dialog/box_component.rb
+- app/components/ui_components/daisy_ui/action/modal/dialog_component.rb
+- app/components/ui_components/daisy_ui/action/modal_component.rb
+- app/components/ui_components/daisy_ui/action/swap/off_component.rb
+- app/components/ui_components/daisy_ui/action/swap/on_component.rb
+- app/components/ui_components/daisy_ui/action/swap_component.rb
+- app/components/ui_components/daisy_ui/base_component.rb
+- app/components/ui_components/daisy_ui/data_display/accordion/anchor_component.rb
+- app/components/ui_components/daisy_ui/data_display/accordion/body_component.rb
+- app/components/ui_components/daisy_ui/data_display/accordion/item_component.rb
+- app/components/ui_components/daisy_ui/data_display/accordion_component.rb
+- app/components/ui_components/daisy_ui/data_display/avatar/box_component.rb
+- app/components/ui_components/daisy_ui/data_display/avatar/item_component.rb
+- app/components/ui_components/daisy_ui/data_display/avatar_component.rb
+- app/components/ui_components/daisy_ui/data_display/badge_component.rb
+- app/controllers/ui_components/daisy_ui/action_components_controller.rb
+- app/controllers/ui_components/daisy_ui/application_controller.rb
+- app/controllers/ui_components/daisy_ui/data_display_components_controller.rb
+- app/controllers/ui_components/daisy_ui/home_controller.rb
+- app/helpers/action/button_helper.rb
+- app/helpers/action/dropdown_helper.rb
+- app/helpers/data_display/badge_helper.rb
+- app/views/ui_components/daisy_ui/action_components/button.html.erb
+- app/views/ui_components/daisy_ui/action_components/dropdown.html.erb
+- app/views/ui_components/daisy_ui/action_components/modal.html.erb
+- app/views/ui_components/daisy_ui/action_components/swap.html.erb
+- app/views/ui_components/daisy_ui/data_display_components/accordion.html.erb
+- app/views/ui_components/daisy_ui/data_display_components/avatar.html.erb
+- app/views/ui_components/daisy_ui/data_display_components/badge.html.erb
+- app/views/ui_components/daisy_ui/home/index.html.erb
+- config/routes.rb
+- lib/tasks/ui_components_tasks.rake
+- lib/ui_components.rb
+- lib/ui_components/config.rb
+- lib/ui_components/config/daisy_ui_class_names.rb
+- lib/ui_components/config/tailwind_class_names.rb
+- lib/ui_components/engine.rb
+- lib/ui_components/version.rb
+- sig/ui_components.rbs
+licenses:
+- MIT
+metadata: {}
+rdoc_options: []
+require_paths:
+- lib
+- app
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.1.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.6.6
+specification_version: 4
+summary: UI kit with ViewComponent and DaisyUI
+test_files: []