m9sh 0.2.1 → 0.2.2

data/app/helpers/m9sh/toast_helper.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module M9sh
+  module ToastHelper
+    def toast(title, description: nil, variant: :default, duration: 5000)
+      turbo_stream.append "toast-container" do
+        render M9sh::ToastComponent.new(
+          title: title,
+          description: description,
+          variant: variant,
+          duration: duration
+        )
+      end
+    end
+
+    def toast_success(title, description: nil, duration: 5000)
+      toast(title, description: description, variant: :success, duration: duration)
+    end
+
+    def toast_error(title, description: nil, duration: 5000)
+      toast(title, description: description, variant: :error, duration: duration)
+    end
+
+    def toast_warning(title, description: nil, duration: 5000)
+      toast(title, description: description, variant: :warning, duration: duration)
+    end
+
+    def toast_info(title, description: nil, duration: 5000)
+      toast(title, description: description, variant: :info, duration: duration)
+    end
+
+    # JavaScript helper for triggering toasts from Stimulus
+    def toast_js(title, description: nil, variant: :default, duration: 5000)
+      %{
+        window.dispatchEvent(new CustomEvent('m9sh:toast', {
+          detail: {
+            title: '#{j(title)}',
+            description: #{description ? "'#{j(description)}'" : 'null'},
+            variant: '#{variant}',
+            duration: #{duration}
+          }
+        }))
+      }.html_safe
+    end
+  end
+end

data/app/helpers/m9sh_helper.rb

@@ -0,0 +1,343 @@
+# frozen_string_literal: true
+
+# M9sh UI Component Helpers
+#
+# Provides shorter, more ergonomic syntax for rendering m9sh/ui components
+# inspired by shadcn/ui's JSX syntax.
+#
+# Usage Examples:
+#   # Short syntax
+#   <%= ui_button(variant: :outline, class: "w-full") { "Click me" } %>
+#
+#   # Backwards compatible (alias)
+#   <%= render_button(variant: :outline) { "Click me" } %>
+#
+#   # Original syntax still works
+#   <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+#     Click me
+#   <% end %>
+#
+module M9shHelper
+  # Button component
+  # @param variant [Symbol] Button variant (:default, :secondary, :destructive, :outline, :ghost, :link)
+  # @param size [Symbol] Button size (:sm, :md, :lg, :icon)
+  # @param type [String] HTML button type
+  # @param disabled [Boolean] Whether button is disabled
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_button(variant: :default, size: :md, type: "button", disabled: false, **attrs, &block)
+    render M9sh::ButtonComponent.new(
+      variant: variant,
+      size: size,
+      type: type,
+      disabled: disabled,
+      **attrs
+    ), &block
+  end
+  alias_method :render_button, :ui_button
+
+  # Badge component
+  # @param variant [Symbol] Badge variant (:default, :secondary, :destructive, :outline)
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_badge(variant: :default, **attrs, &block)
+    render M9sh::BadgeComponent.new(variant: variant, **attrs), &block
+  end
+  alias_method :render_badge, :ui_badge
+
+  # Card component
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_card(**attrs, &block)
+    render M9sh::CardComponent.new(**attrs), &block
+  end
+  alias_method :render_card, :ui_card
+
+  # Input component
+  # @param type [String] Input type
+  # @param placeholder [String] Placeholder text
+  # @param disabled [Boolean] Whether input is disabled
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_input(type: "text", placeholder: nil, disabled: false, **attrs)
+    render M9sh::InputComponent.new(
+      type: type,
+      placeholder: placeholder,
+      disabled: disabled,
+      **attrs
+    )
+  end
+  alias_method :render_input, :ui_input
+
+  # Label component
+  # @param for_id [String] HTML for attribute
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_label(for_id: nil, **attrs, &block)
+    render M9sh::LabelComponent.new(for: for_id, **attrs), &block
+  end
+  alias_method :render_label, :ui_label
+
+  # Textarea component
+  # @param placeholder [String] Placeholder text
+  # @param disabled [Boolean] Whether textarea is disabled
+  # @param rows [Integer] Number of rows
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_textarea(placeholder: nil, disabled: false, rows: 3, **attrs, &block)
+    render M9sh::TextareaComponent.new(
+      placeholder: placeholder,
+      disabled: disabled,
+      rows: rows,
+      **attrs
+    ), &block
+  end
+  alias_method :render_textarea, :ui_textarea
+
+  # Checkbox component
+  # @param checked [Boolean] Whether checkbox is checked
+  # @param disabled [Boolean] Whether checkbox is disabled
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_checkbox(checked: false, disabled: false, **attrs)
+    render M9sh::CheckboxComponent.new(
+      checked: checked,
+      disabled: disabled,
+      **attrs
+    )
+  end
+  alias_method :render_checkbox, :ui_checkbox
+
+  # Switch component
+  # @param checked [Boolean] Whether switch is checked
+  # @param disabled [Boolean] Whether switch is disabled
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_switch(checked: false, disabled: false, **attrs)
+    render M9sh::SwitchComponent.new(
+      checked: checked,
+      disabled: disabled,
+      **attrs
+    )
+  end
+  alias_method :render_switch, :ui_switch
+
+  # Separator component
+  # @param orientation [Symbol] Separator orientation (:horizontal, :vertical)
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_separator(orientation: :horizontal, **attrs)
+    render M9sh::SeparatorComponent.new(orientation: orientation, **attrs)
+  end
+  alias_method :render_separator, :ui_separator
+
+  # Spinner component
+  # @param size [Symbol] Spinner size (:sm, :md, :lg)
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_spinner(size: :md, **attrs)
+    render M9sh::SpinnerComponent.new(size: size, **attrs)
+  end
+  alias_method :render_spinner, :ui_spinner
+
+  # Skeleton component
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_skeleton(**attrs)
+    render M9sh::SkeletonComponent.new(**attrs)
+  end
+  alias_method :render_skeleton, :ui_skeleton
+
+  # Progress component
+  # @param value [Integer] Progress value (0-100)
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_progress(value: 0, **attrs)
+    render M9sh::ProgressComponent.new(value: value, **attrs)
+  end
+  alias_method :render_progress, :ui_progress
+
+  # Avatar component
+  # @param src [String] Image source
+  # @param alt [String] Alt text
+  # @param fallback [String] Fallback text
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_avatar(src: nil, alt: nil, fallback: nil, **attrs, &block)
+    render M9sh::AvatarComponent.new(
+      src: src,
+      alt: alt,
+      fallback: fallback,
+      **attrs
+    ), &block
+  end
+  alias_method :render_avatar, :ui_avatar
+
+  # Alert component
+  # @param variant [Symbol] Alert variant (:default, :destructive)
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_alert(variant: :default, **attrs, &block)
+    render M9sh::AlertComponent.new(variant: variant, **attrs), &block
+  end
+  alias_method :render_alert, :ui_alert
+
+  # Slider component
+  # @param min [Integer] Minimum value
+  # @param max [Integer] Maximum value
+  # @param step [Integer] Step value
+  # @param value [Integer] Current value
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_slider(min: 0, max: 100, step: 1, value: 0, **attrs)
+    render M9sh::SliderComponent.new(
+      min: min,
+      max: max,
+      step: step,
+      value: value,
+      **attrs
+    )
+  end
+  alias_method :render_slider, :ui_slider
+
+  # Toggle component
+  # @param pressed [Boolean] Whether toggle is pressed
+  # @param disabled [Boolean] Whether toggle is disabled
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_toggle(pressed: false, disabled: false, **attrs, &block)
+    render M9sh::ToggleComponent.new(
+      pressed: pressed,
+      disabled: disabled,
+      **attrs
+    ), &block
+  end
+  alias_method :render_toggle, :ui_toggle
+
+  # Accordion component (complex, may need builder pattern)
+  # @param type [String] Accordion type ("single", "multiple")
+  # @param collapsible [Boolean] Whether accordion is collapsible
+  # @param default_value [String] Default open item value
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_accordion(type: "single", collapsible: true, default_value: nil, **attrs, &block)
+    render M9sh::AccordionComponent.new(
+      type: type,
+      collapsible: collapsible,
+      default_value: default_value,
+      **attrs
+    ), &block
+  end
+  alias_method :render_accordion, :ui_accordion
+
+  # Tabs component (complex, may need builder pattern)
+  # @param default_value [String] Default active tab
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_tabs(default_value: nil, **attrs, &block)
+    render M9sh::TabsComponent.new(default_value: default_value, **attrs), &block
+  end
+  alias_method :render_tabs, :ui_tabs
+
+  # Dialog component (complex, may need builder pattern)
+  # @param open [Boolean] Whether dialog is open
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_dialog(open: false, **attrs, &block)
+    render M9sh::DialogComponent.new(open: open, **attrs), &block
+  end
+  alias_method :render_dialog, :ui_dialog
+
+  # Alert Dialog component (complex, may need builder pattern)
+  # @param open [Boolean] Whether alert dialog is open
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_alert_dialog(open: false, **attrs, &block)
+    render M9sh::AlertDialogComponent.new(open: open, **attrs), &block
+  end
+  alias_method :render_alert_dialog, :ui_alert_dialog
+
+  # Sheet component (complex, may need builder pattern)
+  # @param side [Symbol] Sheet side (:top, :right, :bottom, :left)
+  # @param open [Boolean] Whether sheet is open
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_sheet(side: :right, open: false, **attrs, &block)
+    render M9sh::SheetComponent.new(side: side, open: open, **attrs), &block
+  end
+  alias_method :render_sheet, :ui_sheet
+
+  # Popover component (complex, may need builder pattern)
+  # @param open [Boolean] Whether popover is open
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_popover(open: false, **attrs, &block)
+    render M9sh::PopoverComponent.new(open: open, **attrs), &block
+  end
+  alias_method :render_popover, :ui_popover
+
+  # Tooltip component (complex, may need builder pattern)
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_tooltip(**attrs, &block)
+    render M9sh::TooltipComponent.new(**attrs), &block
+  end
+  alias_method :render_tooltip, :ui_tooltip
+
+  # Hover Card component (complex, may need builder pattern)
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_hover_card(**attrs, &block)
+    render M9sh::HoverCardComponent.new(**attrs), &block
+  end
+  alias_method :render_hover_card, :ui_hover_card
+
+  # Dropdown Menu component (complex, may need builder pattern)
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_dropdown_menu(**attrs, &block)
+    render M9sh::DropdownMenuComponent.new(**attrs), &block
+  end
+  alias_method :render_dropdown_menu, :ui_dropdown_menu
+
+  # Collapsible component
+  # @param open [Boolean] Whether collapsible is open
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_collapsible(open: false, **attrs, &block)
+    render M9sh::CollapsibleComponent.new(open: open, **attrs), &block
+  end
+  alias_method :render_collapsible, :ui_collapsible
+
+  # Table component
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_table(**attrs, &block)
+    render M9sh::TableComponent.new(**attrs), &block
+  end
+  alias_method :render_table, :ui_table
+
+  # Breadcrumb component
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_breadcrumb(**attrs, &block)
+    render M9sh::BreadcrumbComponent.new(**attrs), &block
+  end
+  alias_method :render_breadcrumb, :ui_breadcrumb
+
+  # Navigation Menu component
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_navigation_menu(**attrs, &block)
+    render M9sh::NavigationMenuComponent.new(**attrs), &block
+  end
+  alias_method :render_navigation_menu, :ui_navigation_menu
+
+  # Radio Group component
+  # @param name [String] Input name
+  # @param value [String] Selected value
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_radio_group(name: nil, value: nil, **attrs, &block)
+    render M9sh::RadioGroupComponent.new(name: name, value: value, **attrs), &block
+  end
+  alias_method :render_radio_group, :ui_radio_group
+
+  # Select component
+  # @param placeholder [String] Placeholder text
+  # @param disabled [Boolean] Whether select is disabled
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_select(placeholder: nil, disabled: false, **attrs, &block)
+    render M9sh::SelectComponent.new(
+      placeholder: placeholder,
+      disabled: disabled,
+      **attrs
+    ), &block
+  end
+  alias_method :render_select, :ui_select
+
+  # Typography component
+  # @param variant [Symbol] Typography variant
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_typography(variant: :p, **attrs, &block)
+    render M9sh::TypographyComponent.new(variant: variant, **attrs), &block
+  end
+  alias_method :render_typography, :ui_typography
+
+  # Theme Toggle component
+  # @param attrs [Hash] Additional HTML attributes
+  def ui_theme_toggle(**attrs)
+    render M9sh::ThemeToggleComponent.new(**attrs)
+  end
+  alias_method :render_theme_toggle, :ui_theme_toggle
+end

data/app/javascript/application.js

@@ -0,0 +1,3 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails"
+import "controllers"

data/app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

data/app/javascript/controllers/backdrop_controller.js

@@ -0,0 +1,137 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["leftSidebar", "rightSidebar", "overlay", "leftToggle", "rightToggle"]
+  static values = {
+    leftOpen: { type: Boolean, default: false },
+    rightOpen: { type: Boolean, default: false }
+  }
+
+  connect() {
+    // Check if mobile
+    this.checkMobile()
+
+    // Apply initial state to ensure proper desktop display
+    this.applyState()
+
+    // Listen for resize events
+    window.addEventListener("resize", this.checkMobile.bind(this))
+  }
+
+  disconnect() {
+    window.removeEventListener("resize", this.checkMobile.bind(this))
+  }
+
+  checkMobile() {
+    this.isMobile = window.innerWidth < 768
+
+    // If switching to desktop, close all mobile sidebars
+    if (!this.isMobile) {
+      this.leftOpenValue = false
+      this.rightOpenValue = false
+      this.applyState()
+    }
+  }
+
+  toggleLeft() {
+    if (!this.isMobile) return
+
+    this.leftOpenValue = !this.leftOpenValue
+
+    // Close right sidebar if opening left
+    if (this.leftOpenValue) {
+      this.rightOpenValue = false
+    }
+
+    this.applyState()
+  }
+
+  toggleRight() {
+    if (!this.isMobile) return
+
+    this.rightOpenValue = !this.rightOpenValue
+
+    // Close left sidebar if opening right
+    if (this.rightOpenValue) {
+      this.leftOpenValue = false
+    }
+
+    this.applyState()
+  }
+
+  closeAll() {
+    this.leftOpenValue = false
+    this.rightOpenValue = false
+    this.applyState()
+  }
+
+  applyState() {
+    const anyOpen = this.leftOpenValue || this.rightOpenValue
+
+    // Update overlay
+    if (this.hasOverlayTarget) {
+      if (anyOpen && this.isMobile) {
+        this.overlayTarget.classList.remove("hidden")
+      } else {
+        this.overlayTarget.classList.add("hidden")
+      }
+    }
+
+    // Update left sidebar (only on mobile, desktop handled by CSS)
+    if (this.hasLeftSidebarTarget && this.isMobile) {
+      if (this.leftOpenValue) {
+        // Slide into view from left edge
+        this.leftSidebarTarget.classList.remove("-translate-x-full")
+        this.leftSidebarTarget.classList.add("translate-x-0")
+      } else {
+        // Slide out to left edge
+        this.leftSidebarTarget.classList.remove("translate-x-0")
+        this.leftSidebarTarget.classList.add("-translate-x-full")
+      }
+    }
+
+    // Update right sidebar (only on mobile, desktop handled by CSS)
+    if (this.hasRightSidebarTarget && this.isMobile) {
+      if (this.rightOpenValue) {
+        // Slide into view from right edge
+        this.rightSidebarTarget.classList.remove("translate-x-full")
+        this.rightSidebarTarget.classList.add("translate-x-0")
+      } else {
+        // Slide out to right edge
+        this.rightSidebarTarget.classList.remove("translate-x-0")
+        this.rightSidebarTarget.classList.add("translate-x-full")
+      }
+    }
+
+    // Update toggle button icons rotation (chevrons)
+    if (this.hasLeftToggleTarget) {
+      const icon = this.leftToggleTarget.querySelector("svg")
+      if (icon) {
+        if (this.leftOpenValue) {
+          icon.style.transform = "rotate(180deg)"
+        } else {
+          icon.style.transform = "rotate(0deg)"
+        }
+      }
+    }
+
+    if (this.hasRightToggleTarget) {
+      const icon = this.rightToggleTarget.querySelector("svg")
+      if (icon) {
+        if (this.rightOpenValue) {
+          icon.style.transform = "rotate(180deg)"
+        } else {
+          icon.style.transform = "rotate(0deg)"
+        }
+      }
+    }
+  }
+
+  leftOpenValueChanged() {
+    this.applyState()
+  }
+
+  rightOpenValueChanged() {
+    this.applyState()
+  }
+}