ui_components 0.1.0 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ef78535a52993e09045512a096facefc203391fbf8558c781f7dc9fda491086f
-  data.tar.gz: 26646a5486fb1103f91103279e813a2a9425c5aa8ef54d6e35862a36c92e9564
+  metadata.gz: 120dc503191b4b508b4ef7ce75702960054a54e35da8d23e885ee76c5374f28f
+  data.tar.gz: af4df82c998db4bf226f4225292514daa11863522d8bc7dbbd14fe1acd5aac41
 SHA512:
-  metadata.gz: 7cb47f161468b65a1a14678aaedc10074a3514f75475969bfcc4b0227b32efdcb435069b9cf79cf9302b1e561696d7e421a977e0a27dbd4719977d0a7436b8a7
-  data.tar.gz: ad4468c7cfe6ed243599fb51f5d751d86a6f07b9f05677eda6bf3cd8194a88903726f97524ca23447bb4d3ae9f04ff5680824ea5f58c43350cd04fb6f8535065
+  metadata.gz: 368bde69e7761b242bcd58f27976e5d43ccba197739c7f44c559bb66f2df0cfade5a542ae8768a5e8431f054ab6b53675978957d5f7ed094ecd4d80215658e32
+  data.tar.gz: 64e902a2adab8a39438705b81c94db0c9e63031f4894eb6ff9a4b1c765353296bbe40f76585b45abf13c6ed483084f0989d230935a4119fe5eaaa9f60d661b6b

data/README.md

@@ -1,28 +1,35 @@
 # UiComponents
 
-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/ui_components`. To experiment with that code, run `bin/console` for an interactive prompt.
+This gem makes it easy to set up and view UI components using Daisy UI.
 
 ## Installation
 
-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:
+Add the gem to your Gemfile:
 
 ```bash
-bundle add UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+bundle add ui_components
 ```
 
-If bundler is not being used to manage dependencies, install the gem by executing:
+Or install it directly:
 
 ```bash
-gem install UPDATE_WITH_YOUR_GEM_NAME_IMMEDIATELY_AFTER_RELEASE_TO_RUBYGEMS_ORG
+gem install ui_components
 ```
 
 ## Usage
 
-TODO: Write usage instructions here
+To set up the gem and prepare the components, run:
+```bash
+bin/rails ui_components:setup
+```
+
+After setup, start your app:
+```bash
+bin/dev
+```
+
+>Then, open your browser and navigate to: [UI Components](http://localhost:3000/ui_components/daisy_ui)
+
 
 ## Development
 
@@ -40,4 +47,4 @@ The gem is available as open source under the terms of the [MIT License](https:/
 
 ## Code of Conduct
 
-Everyone interacting in the UiComponents project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/ui_components/blob/main/CODE_OF_CONDUCT.md).
+Everyone interacting in the UiComponents project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the [code of conduct](https://github.com/[USERNAME]/ui_components/blob/main/CODE_OF_CONDUCT.md).

data/app/assets/javascripts/ui_components/controllers/countdown_controller.js

@@ -0,0 +1,55 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["value"]
+
+  connect() {
+    this.timers = []
+    this.targetsData = []
+
+    this.valueTargets.forEach(target => {
+      const type = target.dataset.countdownType || "second"
+      const initialStr = target.style.getPropertyValue('--value').trim()
+      const initial = parseInt(initialStr) || 0
+      const dataObj = { target, type, original: initial, current: initial }
+
+      this.targetsData.push(dataObj)
+
+      let timer = this.startCountdown(dataObj)
+
+      this.timers.push(timer)
+    })
+  }
+
+  startCountdown(dataObj) {
+    let intervalDuration
+
+    switch (dataObj.type.toLowerCase()) {
+      case "minute":
+        intervalDuration = 60 * 1000
+        break
+      case "hour":
+        intervalDuration = 3600 * 1000
+        break
+      case "day":
+        intervalDuration = 86400 * 1000
+        break
+      default:
+        intervalDuration = 1000
+    }
+
+    return setInterval(() => {
+      if (dataObj.current > 0) {
+        dataObj.current--
+      } else {
+        dataObj.current = dataObj.original
+      }
+      dataObj.target.textContent = dataObj.current
+      dataObj.target.style.setProperty('--value', dataObj.current)
+    }, intervalDuration)
+  }
+
+  disconnect() {
+    this.timers.forEach(timer => clearInterval(timer))
+  }
+}

data/app/components/documentation/body/example_preview_component.rb

@@ -7,7 +7,7 @@ class Documentation::Body::ExamplePreviewComponent < ViewComponent::Base
   def initialize(
       source:
     )
-    @source = source.gsub("$", "%")
+    @source = source.gsub("<$", "<%").gsub("$>", "%>")
   end
 
   def call; end

data/app/components/documentation/body_component.html.erb

@@ -15,7 +15,7 @@
           </svg>
         <% end %>
 
-        <div data-clipboard-target="code" class="m-3">
+        <div data-clipboard-target="code" class="m-3 max-h-98">
           <% preview_examples.each do |example| %>
             <%= example.code_preview %>
           <% end %>

data/app/components/documentation/body_component.rb

@@ -22,19 +22,19 @@ module Documentation
     private
 
     def set_preview_options
-      @preview_options.merge!(class: preview_class_string)
+      @preview_options.merge!(class: preview_css_class_string)
       @preview_options.compact_blank!
     end
 
-    def preview_class_string
+    def preview_css_class_string
       TailwindMerge::Merger.new.merge([
         *CSS_CLASSES_DEFAULT,
-        @preview_options[:css_class]
+        @preview_options.delete(:css_class)
       ])
     end
 
     def set_code_options
-      @code_options.merge!(class: @code_options[:css_class])
+      @code_options.merge!(class: @code_options.delete(:css_class))
       @code_options.compact_blank!
     end
   end

data/app/components/ui_components/daisy_ui/action/button_component.rb

@@ -4,8 +4,8 @@ module UiComponents
   module DaisyUi
     module Action
       class ButtonComponent < BaseComponent
-        SHAPES = %w[square circle]
-        WIDE_SIZES = %w[wide block]
+        SHAPES = %w[square circle].freeze
+        WIDE_SIZES = %w[wide block].freeze
 
         CSS_CLASSES_DEFAULT = %w[btn].freeze
         CSS_CLASSES_VARIANTS = (
@@ -42,14 +42,14 @@ module UiComponents
 
         private
 
-        def class_string
+        def css_class_string
           TailwindMerge::Merger.new.merge([
             *css_classes_default,
-            size_class,
-            color_class,
-            kind_class,
-            shape_class,
-            wide_size_class,
+            size_css_class,
+            color_css_class,
+            kind_css_class,
+            shape_css_class,
+            wide_size_css_class,
             @css_class
           ])
         end
@@ -58,23 +58,23 @@ module UiComponents
           CSS_CLASSES_DEFAULT unless @no_btn
         end
 
-        def size_class
+        def size_css_class
           "btn-#{@size}" if SIZES.include?(@size)
         end
 
-        def color_class
+        def color_css_class
           "btn-#{@color}" if COLORS.include?(@color)
         end
 
-        def kind_class
+        def kind_css_class
           "btn-#{@kind}" if KINDS.include?(@kind)
         end
 
-        def shape_class
+        def shape_css_class
           "btn-#{@shape}" if SHAPES.include?(@shape)
         end
 
-        def wide_size_class
+        def wide_size_css_class
           "btn-#{@wide_size}" if WIDE_SIZES.include?(@wide_size)
         end
       end

data/app/components/ui_components/daisy_ui/action/dropdown/anchor_component.rb

@@ -14,19 +14,9 @@ module UiComponents
 
           private
 
-          def set_options
-            @options.merge!(class: class_string)
-            @options.merge!(style: @css_style)
+          def other_options
             @options.merge!(role: "button")
             @options.merge!(tabindex: "0")
-            @options.compact_blank!
-          end
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/dropdown/card/item_component.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Dropdown
+        module Card
+          class ItemComponent < BaseComponent
+            CSS_CLASSES_DEFAULT = %w[card-body].freeze
+            CSS_CLASSES = CSS_CLASSES_DEFAULT
+
+            erb_template <<-ERB
+              <%= tag.div(**set_options) { content } %>
+            ERB
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/dropdown/card_component.rb

@@ -5,10 +5,10 @@ module UiComponents
     module Action
       module Dropdown
         class CardComponent < BaseComponent
-          CSS_CLASSES_DEFAULT =  %w[dropdown-content card card-sm bg-base-100 z-1 w-64 shadow-md]
+          CSS_CLASSES_DEFAULT =  %w[dropdown-content card card-sm bg-base-100 z-1 w-64 shadow-md].freeze
           CSS_CLASSES = (
             CSS_CLASSES_DEFAULT +
-            CardItemComponent::CSS_CLASSES
+            Card::ItemComponent::CSS_CLASSES
           ).freeze
 
           erb_template <<-ERB
@@ -17,22 +17,12 @@ module UiComponents
             <% end %>
           ERB
 
-          renders_one :item, CardItemComponent
+          renders_one :item, Card::ItemComponent
 
           private
 
-          def set_options
-            @options.merge!(class: class_string)
-            @options.merge!(style: @css_style)
+          def other_options
             @options.merge!(tabindex: "0")
-            @options.compact_blank!
-          end
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/dropdown/menu/item_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module UiComponents
+  module DaisyUi
+    module Action
+      module Dropdown
+        module Menu
+          class ItemComponent < BaseComponent
+            erb_template <<-ERB
+              <%= tag.li(**set_options) do %>
+                <% if @with_tag_a %>
+                  <a><%= content %></a>
+                <% else %>
+                  <%= content %>
+                <% end %>
+              <% end %>
+            ERB
+
+            def initialize(
+                with_tag_a: true,
+                **args
+              )
+              @with_tag_a = with_tag_a
+
+              super(**args)
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/ui_components/daisy_ui/action/dropdown/menu_component.rb

@@ -16,22 +16,12 @@ module UiComponents
             <% end %>
           ERB
 
-          renders_many :items, ListItemComponent
+          renders_many :items, Menu::ItemComponent
 
           private
 
-          def set_options
-            @options.merge!(class: class_string)
-            @options.merge!(style: @css_style)
+          def other_options
             @options.merge!(tabindex: "0")
-            @options.compact_blank!
-          end
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/dropdown_component.rb

@@ -4,11 +4,11 @@ module UiComponents
   module DaisyUi
     module Action
       class DropdownComponent < BaseComponent
-        CSS_CLASSES_DEFAULT = %w[dropdown]
+        CSS_CLASSES_DEFAULT = %w[dropdown].freeze
         CSS_CLASSES_VARIANTS = (
           %w[dropdown-hover dropdown-open] +
-          ALIGNS.map { |color| "dropdown-#{color}" } +
-          AXES.map { |size| "dropdown-#{size}" }
+          ALIGNS.map { |key| "dropdown-#{key}" } +
+          AXES.map { |key| "dropdown-#{key}" }
         ).freeze
 
         CSS_CLASSES = (
@@ -47,30 +47,30 @@ module UiComponents
 
         private
 
-        def class_string
+        def css_class_string
           TailwindMerge::Merger.new.merge([
             *CSS_CLASSES_DEFAULT,
-            align_class,
-            axis_class,
-            hover_class,
-            opened_class,
+            align_css_class,
+            axis_css_class,
+            hover_css_class,
+            opened_css_class,
             @css_class
           ])
         end
 
-        def align_class
+        def align_css_class
           "dropdown-#{@align}" if ALIGNS.include?(@align)
         end
 
-        def axis_class
+        def axis_css_class
           "dropdown-#{@axis}" if AXES.include?(@axis)
         end
 
-        def hover_class
+        def hover_css_class
           "dropdown-hover" if @hover
         end
 
-        def opened_class
+        def opened_css_class
           "dropdown-open" if @opened
         end
       end

data/app/components/ui_components/daisy_ui/action/modal/anchor_component.rb

@@ -23,18 +23,8 @@ module UiComponents
 
           private
 
-          def set_options
-            @options.merge!(class: class_string)
-            @options.merge!(style: @css_style) if @css_style.present?
+          def other_options
             @options.merge!(onclick: "#{@opener}.showModal()")
-            @options.compact_blank!
-          end
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/action/item_component.rb

@@ -14,15 +14,6 @@ module UiComponents
                 erb_template <<-ERB
                   <%= tag.button(**set_options) { content } %>
                 ERB
-
-                private
-
-                def class_string
-                  TailwindMerge::Merger.new.merge([
-                    *CSS_CLASSES_DEFAULT,
-                    @css_class
-                  ])
-                end
               end
             end
           end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/action_component.rb

@@ -24,15 +24,6 @@ module UiComponents
               ERB
 
               renders_many :items, Action::ItemComponent
-
-              private
-
-              def class_string
-                TailwindMerge::Merger.new.merge([
-                  *CSS_CLASSES_DEFAULT,
-                  @css_class
-                ])
-              end
             end
           end
         end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/body_component.rb

@@ -13,15 +13,6 @@ module UiComponents
               erb_template <<-ERB
                 <%= tag.div(**set_options) { content } %>
               ERB
-
-              private
-
-              def class_string
-                TailwindMerge::Merger.new.merge([
-                  *CSS_CLASSES_DEFAULT,
-                  @css_class
-                ])
-              end
             end
           end
         end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/close_component.rb

@@ -15,15 +15,6 @@ module UiComponents
                   <%= tag.button(**set_options) { content } %>
                 </form>
               ERB
-
-              private
-
-              def class_string
-                TailwindMerge::Merger.new.merge([
-                  *CSS_CLASSES_DEFAULT,
-                  @css_class
-                ])
-              end
             end
           end
         end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box/title_component.rb

@@ -13,15 +13,6 @@ module UiComponents
               erb_template <<-ERB
                 <%= tag.h3(**set_options) { content } %>
               ERB
-
-              private
-
-              def class_string
-                TailwindMerge::Merger.new.merge([
-                  *CSS_CLASSES_DEFAULT,
-                  @css_class
-                ])
-              end
             end
           end
         end

data/app/components/ui_components/daisy_ui/action/modal/dialog/box_component.rb

@@ -37,15 +37,6 @@ module UiComponents
 
               super(**args)
             end
-
-            private
-
-            def class_string
-              TailwindMerge::Merger.new.merge([
-                *CSS_CLASSES_DEFAULT,
-                @css_class
-              ])
-            end
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/modal/dialog_component.rb

@@ -36,20 +36,10 @@ module UiComponents
             super(**args)
           end
 
-          def set_options
-            @options.merge!(class: class_string)
-            @options.merge!(style: @css_style) if @css_style.present?
-            @options.merge!(id: @opener)
-            @options.compact_blank!
-          end
-
           private
 
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
+          def other_options
+            @options.merge!(id: @opener)
           end
         end
       end

data/app/components/ui_components/daisy_ui/action/swap/off_component.rb

@@ -11,15 +11,6 @@ module UiComponents
           erb_template <<-ERB
             <%= tag.div(**set_options) { content } %>
           ERB
-
-          private
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
-          end
         end
       end
     end

data/app/components/ui_components/daisy_ui/action/swap/on_component.rb

@@ -11,15 +11,6 @@ module UiComponents
           erb_template <<-ERB
             <%= tag.div(**set_options) { content } %>
           ERB
-
-          private
-
-          def class_string
-            TailwindMerge::Merger.new.merge([
-              *CSS_CLASSES_DEFAULT,
-              @css_class
-            ])
-          end
         end
       end
     end

data/app/components/ui_components/daisy_ui/action/swap_component.rb

@@ -4,7 +4,7 @@ module UiComponents
   module DaisyUi
     module Action
       class SwapComponent < BaseComponent
-        EFFECTS = %w[rotate flip]
+        EFFECTS = %w[rotate flip].freeze
 
         CSS_CLASSES_DEFAULT = %w[swap].freeze
         CSS_CLASSES_VARIANTS = (
@@ -37,20 +37,20 @@ module UiComponents
 
         private
 
-        def class_string
+        def css_class_string
           TailwindMerge::Merger.new.merge([
             *CSS_CLASSES_DEFAULT,
-            effect_class,
-            active_class,
+            effect_css_class,
+            active_css_class,
             @css_class
           ])
         end
 
-        def effect_class
+        def effect_css_class
           "swap-#{@effect}" if EFFECTS.include?(@effect)
         end
 
-        def active_class
+        def active_css_class
           "swap-active" if @active
         end
       end