m9sh 0.1.0 → 0.2.0

data/app/components/m9sh/dialog_component.rb

@@ -4,11 +4,13 @@ module M9sh
   class DialogComponent < BaseComponent
     include Utilities
 
-    renders_one :trigger
-    renders_one :header
-    renders_one :footer
-    renders_one :title
-    renders_one :description
+    renders_one :dialog_trigger, lambda { |**attrs|
+      DialogTriggerComponent.new(**attrs)
+    }
+
+    renders_one :dialog_content, lambda { |**attrs, &block|
+      DialogContentComponent.new(**attrs, &block)
+    }
 
     def initialize(open: false, **extra_attrs)
       @open = open
@@ -17,107 +19,17 @@ module M9sh
 
     def call
       tag.div(
+        **component_attrs(""),
         data: {
           controller: "m9sh--dialog",
           m9sh__dialog_open_value: @open.to_s
         }
       ) do
         safe_join([
-          render_trigger,
-          render_dialog
-        ])
-      end
-    end
-
-    private
-
-    def render_trigger
-      return unless trigger?
-
-      tag.div(
-        trigger,
-        data: {
-          action: "click->m9sh--dialog#open",
-          m9sh__dialog_target: "trigger"
-        }
-      )
-    end
-
-    def render_dialog
-      tag.div(
-        class: overlay_classes,
-        data: {
-          m9sh__dialog_target: "overlay",
-          action: "click->m9sh--dialog#handleBackdropClick"
-        },
-        style: @open ? "" : "display: none;",
-        role: "dialog",
-        "aria-modal": "true"
-      ) do
-        tag.div(
-          class: content_classes,
-          data: { m9sh__dialog_target: "content" }
-        ) do
-          safe_join([
-            render_close_button,
-            render_header,
-            render_body,
-            render_footer
-          ].compact)
-        end
-      end
-    end
-
-    def render_close_button
-      tag.button(
-        type: "button",
-        class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-        data: { action: "click->m9sh--dialog#close" }
-      ) do
-        tag.svg(
-          class: "h-4 w-4",
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          "stroke-width": "2",
-          "stroke-linecap": "round",
-          "stroke-linejoin": "round"
-        ) do
-          tag.line(x1: "18", y1: "6", x2: "6", y2: "18") +
-          tag.line(x1: "6", y1: "6", x2: "18", y2: "18")
-        end
-      end
-    end
-
-    def render_header
-      return unless header? || title? || description?
-
-      tag.div(class: "flex flex-col space-y-1.5 text-center sm:text-left") do
-        safe_join([
-          title? ? tag.h2(title, class: "text-lg font-semibold leading-none tracking-tight") : nil,
-          description? ? tag.p(description, class: "text-sm text-muted-foreground") : nil,
-          header
+          dialog_trigger,
+          dialog_content
         ].compact)
       end
     end
-
-    def render_body
-      tag.div(class: "py-4") { content }
-    end
-
-    def render_footer
-      return unless footer?
-
-      tag.div(class: "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2") { footer }
-    end
-
-    def overlay_classes
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
-    end
-
-    def content_classes
-      "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg"
-    end
   end
-end
+end

data/app/components/m9sh/dialog_content_component.rb

@@ -0,0 +1,102 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DialogContentComponent < BaseComponent
+    include Utilities
+
+    renders_one :dialog_header, lambda { |**attrs, &block|
+      DialogHeaderComponent.new(**attrs, &block)
+    }
+
+    renders_one :dialog_footer, lambda { |**attrs, &block|
+      DialogFooterComponent.new(**attrs, &block)
+    }
+
+    def initialize(show_close: true, **extra_attrs)
+      @show_close = show_close
+      super(**extra_attrs)
+    end
+
+    def call
+      # Overlay (backdrop)
+      tag.div(
+        class: overlay_classes,
+        data: {
+          m9sh__dialog_target: "overlay",
+          action: "click->m9sh--dialog#handleBackdropClick"
+        },
+        style: "display: none;",
+        role: "dialog",
+        "aria-modal": "true"
+      ) do
+        # Content container
+        tag.div(
+          class: content_classes,
+          data: { m9sh__dialog_target: "content" },
+          role: "document"
+        ) do
+          safe_join([
+            render_close_button,
+            dialog_header,
+            render_body,
+            dialog_footer
+          ].compact)
+        end
+      end
+    end
+
+    private
+
+    def render_close_button
+      return unless @show_close
+
+      tag.button(
+        type: "button",
+        class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        data: { action: "click->m9sh--dialog#close" },
+        aria: { label: "Close" }
+      ) do
+        safe_join([
+          tag.svg(
+            class: "h-4 w-4",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round"
+          ) do
+            safe_join([
+              tag.line(x1: "18", y1: "6", x2: "6", y2: "18"),
+              tag.line(x1: "6", y1: "6", x2: "18", y2: "18")
+            ])
+          end,
+          tag.span("Close", class: "sr-only")
+        ])
+      end
+    end
+
+    def render_body
+      return unless content
+
+      tag.div(class: "grid gap-4 py-4") { content }
+    end
+
+    def overlay_classes
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    end
+
+    def content_classes
+      cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
+        "data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
+        "sm:rounded-lg"
+      )
+    end
+  end
+end

data/app/components/m9sh/dialog_description_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DialogDescriptionComponent < BaseComponent
+    include Utilities
+
+    def call
+      tag.p(
+        content,
+        **component_attrs("text-sm text-muted-foreground")
+      )
+    end
+  end
+end

data/app/components/m9sh/dialog_footer_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DialogFooterComponent < BaseComponent
+    include Utilities
+
+    def call
+      tag.div(
+        content,
+        **component_attrs("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2")
+      )
+    end
+  end
+end

data/app/components/m9sh/dialog_header_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DialogHeaderComponent < BaseComponent
+    include Utilities
+
+    renders_one :dialog_title, lambda { |**attrs|
+      DialogTitleComponent.new(**attrs)
+    }
+
+    renders_one :dialog_description, lambda { |**attrs|
+      DialogDescriptionComponent.new(**attrs)
+    }
+
+    def call
+      tag.div(
+        **component_attrs("flex flex-col space-y-1.5 text-center sm:text-left")
+      ) do
+        safe_join([
+          dialog_title,
+          dialog_description,
+          content
+        ].compact)
+      end
+    end
+  end
+end

data/app/components/m9sh/dialog_title_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DialogTitleComponent < BaseComponent
+    include Utilities
+
+    def call
+      tag.h2(
+        content,
+        **component_attrs("text-lg font-semibold leading-none tracking-tight")
+      )
+    end
+  end
+end

data/app/components/m9sh/dialog_trigger_component.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module M9sh
+  class DialogTriggerComponent < BaseComponent
+    include Utilities
+
+    def initialize(as_child: false, **extra_attrs)
+      @as_child = as_child
+      super(**extra_attrs)
+    end
+
+    def call
+      # Always wrap content in a span with data attributes so clicks are captured
+      tag.span(
+        content,
+        data: {
+          action: "click->m9sh--dialog#open",
+          m9sh__dialog_target: "trigger"
+        }
+      )
+    end
+  end
+end

data/app/components/m9sh/dropdown_menu_content_component.rb

@@ -13,7 +13,7 @@ module M9sh
           transition_leave_start: "transform opacity-100 scale-100",
           transition_leave_end: "transform opacity-0 scale-95"
         },
-        class: "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg hidden",
+        class: "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg hidden",
         style: "position: absolute;",
         **(@extra_attrs || {})
       ) do

data/app/components/m9sh/dropdown_menu_item_component.rb

@@ -30,7 +30,7 @@ module M9sh
     private
 
     def item_classes
-      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm text-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
     end
   end
 end

data/app/components/m9sh/dropdown_menu_trigger_component.rb

@@ -9,7 +9,7 @@ module M9sh
           m9sh__dropdown_menu_target: "trigger"
         },
         type: "button",
-        class: "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        class: "inline-flex items-center justify-center rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
         **(@extra_attrs || {})
       ) do
         content

data/app/components/m9sh/icon_component.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+module M9sh
+  class IconComponent < BaseComponent
+    include Utilities
+
+    def initialize(
+      name:,
+      size: nil,
+      class_name: nil,
+      **extra_attrs
+    )
+      @name = name
+      @size = size
+      @class_name = class_name
+      super(class_name: class_name, **extra_attrs)
+    end
+
+    def call
+      icon_path = Rails.root.join("app", "assets", "images", "icons", "#{@name}.svg")
+
+      unless File.exist?(icon_path)
+        Rails.logger.warn("Icon not found: #{@name}")
+        return tag.span("[Icon: #{@name}]", class: "text-muted-foreground")
+      end
+
+      svg_content = File.read(icon_path)
+
+      # Simple regex-based attribute modification
+      svg_content = modify_svg_attributes(svg_content)
+
+      svg_content.html_safe
+    end
+
+    private
+
+    def modify_svg_attributes(svg)
+      # Extract existing SVG opening tag
+      svg_tag_match = svg.match(/<svg([^>]*)>/)
+      return svg unless svg_tag_match
+
+      existing_attrs = svg_tag_match[1]
+
+      # Build new attributes
+      new_attrs = []
+
+      # Add or update size
+      if @size
+        # Remove existing width/height
+        existing_attrs = existing_attrs.gsub(/\s*(width|height)="[^"]*"/, '')
+        new_attrs << "width=\"#{@size}\""
+        new_attrs << "height=\"#{@size}\""
+      end
+
+      # Add classes
+      if @class_name
+        if existing_attrs =~ /class="([^"]*)"/
+          existing_class = $1
+          merged_classes = "#{existing_class} #{@class_name}".strip
+          existing_attrs = existing_attrs.gsub(/class="[^"]*"/, "class=\"#{merged_classes}\"")
+        else
+          new_attrs << "class=\"#{@class_name}\""
+        end
+      end
+
+      # Add extra attributes
+      @extra_attrs.each do |key, value|
+        next if key == :class
+        attr_name = key.to_s.gsub('_', '-')
+        new_attrs << "#{attr_name}=\"#{value}\""
+      end
+
+      # Reconstruct SVG tag
+      all_attrs = [existing_attrs, new_attrs.join(' ')].reject(&:blank?).join(' ')
+      svg.sub(/<svg[^>]*>/, "<svg#{all_attrs.present? ? ' ' + all_attrs : ''}>")
+    end
+  end
+end

data/app/components/m9sh/main_component.rb

@@ -6,7 +6,7 @@ module M9sh
 
     def call
       tag.div(
-        **component_attrs("flex-1 flex flex-col m-4 rounded-lg shadow-xl bg-card overflow-hidden border border-border"),
+        **component_attrs("flex-1 flex flex-col p-6 md:px-12 md:py-20 md:rounded-lg md:shadow-xl bg-card overflow-hidden"),
         data: { slot: "main" }
       ) do
         content

data/app/components/m9sh/menu_component.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module M9sh
+  class MenuComponent < BaseComponent
+    include Utilities
+
+    renders_many :items, types: {
+      item: "ItemComponent",
+      separator: "SeparatorComponent"
+    }
+
+    def call
+      tag.div(**component_attrs("py-1 space-y-1")) do
+        safe_join(items)
+      end
+    end
+
+    class ItemComponent < BaseComponent
+      include Utilities
+
+      def initialize(href: nil, icon: nil, disabled: false, **extra_attrs)
+        @href = href
+        @icon = icon
+        @disabled = disabled
+        super(**extra_attrs)
+      end
+
+      def call
+        if @href
+          render_link
+        else
+          render_button
+        end
+      end
+
+      private
+
+      def render_link
+        tag.a(
+          href: @href,
+          **component_attrs(item_classes)
+        ) do
+          render_content
+        end
+      end
+
+      def render_button
+        tag.button(
+          type: "button",
+          disabled: @disabled,
+          **component_attrs(item_classes)
+        ) do
+          render_content
+        end
+      end
+
+      def render_content
+        if @icon
+          safe_join([
+            @icon,
+            tag.span(content, class: "flex-1")
+          ])
+        else
+          content
+        end
+      end
+
+      def item_classes
+        base = "group flex w-full items-center gap-3 rounded-md px-3 py-2.5 text-sm font-medium transition-colors "
+        base += "text-foreground hover:bg-accent hover:text-accent-foreground "
+        base += "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 "
+        base += @disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"
+        base
+      end
+    end
+
+    class SeparatorComponent < BaseComponent
+      include Utilities
+
+      def call
+        tag.div(**component_attrs("my-1 h-px bg-border"))
+      end
+    end
+  end
+end