m9sh 0.2.2 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 58b74eb111bd5e0edbc12f4448c6ddfde0ad6b6cacdeadbe604c9ca0fa1226d3
-  data.tar.gz: f21c715a96ce2517b50f3da13bde38fe550226f97b10d0f2d169a0b705a5f885
+  metadata.gz: 60a17049e08e32e54ff30a314c07e746712f7d0cf10c84daef8794c44ac53520
+  data.tar.gz: 8331db49172a68f2605c2b4cdc6d4feadfafc97a0199143a974f007646ccb69a
 SHA512:
-  metadata.gz: c30dfae60aa915c7acb4a9b38b4f665491bb9e9d368e52ffbc9050c57e175f529dad3efd900d85b4193ea56818d248c15ee233a8c154e8fefd1b426c564d4d05
-  data.tar.gz: 54121f63d5f536988a55ac5033e6f5632f619e1be2380ec5922402010879fa2f5ca1e0349160bc1719fee176c07cd5982b7f6487f8c18cc3efad64ae1846d36c
+  metadata.gz: b64d1a98d913d375cdc090d050177164c88037a75286723754a25f1f4b668c2f68873c6730b5baec9e76d3b83769c4e82f5b85a899b6607f57bcb5ad706c7a54
+  data.tar.gz: e47067baeeed55078b0340573d333ec5d677d45cee791a6b33679a97b095f6194504f12f99647ccfcecf2b8254e22c08ddc2780e016badde22e6a18768ea7422

data/app/components/m9sh/backdrop_component.rb

@@ -0,0 +1,99 @@
+# frozen_string_literal: true
+
+module M9sh
+  class BackdropComponent < M9sh::BaseComponent
+    renders_one :navbar
+    renders_one :left_sidebar
+    renders_one :right_sidebar
+    renders_one :main_content
+
+    def initialize(
+      show_left_sidebar: true,
+      show_right_sidebar: true,
+      left_sidebar_width: "w-[300px]",
+      right_sidebar_width: "w-[300px]",
+      **extra_attrs
+    )
+      @show_left_sidebar = show_left_sidebar
+      @show_right_sidebar = show_right_sidebar
+      @left_sidebar_width = left_sidebar_width
+      @right_sidebar_width = right_sidebar_width
+      super(**extra_attrs)
+    end
+
+    def call
+      tag.div(**component_attrs("h-screen w-screen flex flex-col overflow-hidden"), data: { controller: "m9sh--backdrop" }) do
+        safe_join([
+          render_navbar_section,
+          render_overlay,
+          render_content_area
+        ].compact)
+      end
+    end
+
+    private
+
+    def render_navbar_section
+      return unless navbar?
+
+      # Render navbar with toggle buttons passed as slots
+      navbar.to_s.html_safe
+    end
+
+    def render_content_area
+      tag.div(class: "flex-1 flex overflow-hidden") do
+        safe_join([
+          render_left_sidebar_section,
+          render_main_content_section,
+          render_right_sidebar_section
+        ].compact)
+      end
+    end
+
+    def render_left_sidebar_section
+      return unless @show_left_sidebar && left_sidebar?
+
+      # Convert width to responsive: w-[300px] -> w-screen md:w-[300px]
+      desktop_width = @left_sidebar_width.start_with?('w-') ? "md:#{@left_sidebar_width}" : "md:w-[300px]"
+
+      tag.div(
+        class: "pt-16 w-screen #{desktop_width} flex-shrink-0 overflow-y-auto fixed md:relative left-0 md:left-auto -translate-x-full md:translate-x-0 top-0 bottom-0 md:bottom-auto z-40 md:z-auto transition-all duration-300 ease-in-out bg-transparent md:bg-background shadow-xl md:shadow-none md:border-r md:border-transparent",
+        data: { m9sh__backdrop_target: "leftSidebar" }
+      ) do
+        left_sidebar.to_s.html_safe
+      end
+    end
+
+    def render_main_content_section
+      return unless main_content?
+
+      tag.div(class: "pt-16 flex-1 overflow-auto") do
+        main_content.to_s.html_safe
+      end
+    end
+
+    def render_right_sidebar_section
+      return unless @show_right_sidebar && right_sidebar?
+
+      # Convert width to responsive: w-[300px] -> w-screen md:w-[300px]
+      desktop_width = @right_sidebar_width.start_with?('w-') ? "md:#{@right_sidebar_width}" : "md:w-[300px]"
+
+      tag.div(
+        class: "pt-16 w-screen #{desktop_width} flex-shrink-0 overflow-y-auto fixed md:relative right-0 md:right-auto translate-x-full md:translate-x-0 top-0 bottom-0 md:bottom-auto z-40 md:z-auto transition-all duration-300 ease-in-out bg-transparent md:bg-background shadow-xl md:shadow-none md:border-l md:border-transparent",
+        data: { m9sh__backdrop_target: "rightSidebar" }
+      ) do
+        right_sidebar.to_s.html_safe
+      end
+    end
+
+    def render_overlay
+      tag.div(
+        class: "hidden fixed top-16 left-0 right-0 bottom-0 bg-background/80 backdrop-blur-sm z-30 md:hidden",
+        data: {
+          m9sh__backdrop_target: "overlay",
+          action: "click->m9sh--backdrop#closeAll"
+        }
+      )
+    end
+  end
+end

data/app/javascript/controllers/m9sh/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()
+  }
+}

data/lib/m9sh/generator.rb

@@ -107,7 +107,8 @@ module M9sh
     end
 
     def copy_file(source_file, namespace, components_path, javascript_path, force)
-      source_path = File.join(@root_path, source_file)
+      # Find the source file - first try gem installation, then local dev
+      source_path = find_source_file(source_file)
 
       unless File.exist?(source_path)
         return { success: false, error: "Source file not found: #{source_file}" }
@@ -179,5 +180,20 @@ module M9sh
     def sync_all(options = {})
       generate_all(options.merge(force: true))
     end
+
+    # Find source file in gem directory or local development directory
+    def find_source_file(relative_path)
+      # First, try the gem installation directory
+      begin
+        spec = Gem::Specification.find_by_name('m9sh')
+        gem_path = File.join(spec.gem_dir, relative_path)
+        return gem_path if File.exist?(gem_path)
+      rescue Gem::MissingSpecError
+        # Gem not installed, fall through to local path
+      end
+
+      # Fall back to local development path
+      File.join(@root_path, relative_path)
+    end
   end
 end

data/lib/m9sh/registry.rb

@@ -93,7 +93,7 @@ module M9sh
       categories = {
         "Base" => ["base", "utilities", "icon"],
         "Form Components" => ["button", "input", "label", "checkbox", "textarea", "select", "switch", "slider", "radio_group"],
-        "Layout Components" => ["card", "table", "separator", "main"],
+        "Layout Components" => ["card", "table", "separator", "main", "backdrop"],
         "Feedback Components" => ["alert", "toast", "toaster", "progress", "spinner", "skeleton"],
         "Navigation Components" => ["breadcrumb", "navigation_menu", "navbar", "sidebar", "tabs", "menu"],
         "Display Components" => ["avatar", "badge", "typography"],

data/lib/m9sh/registry.yml

@@ -419,3 +419,13 @@ components:
       - icon
       - button
       - dropdown_menu
+
+  backdrop:
+    name: "Backdrop"
+    description: "Full-screen layout with navbar, sidebars, and main content area"
+    files:
+      - app/components/m9sh/backdrop_component.rb
+      - app/javascript/controllers/m9sh/backdrop_controller.js
+    dependencies:
+      - base
+      - utilities

data/lib/m9sh/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module M9sh
-  VERSION = "0.2.2"
+  VERSION = "0.2.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: m9sh
 version: !ruby/object:Gem::Version
-  version: 0.2.2
+  version: 0.2.4
 platform: ruby
 authors:
 - Marcin Urbanski
@@ -135,6 +135,7 @@ files:
 - app/components/m9sh/alert_component.rb
 - app/components/m9sh/alert_dialog_component.rb
 - app/components/m9sh/avatar_component.rb
+- app/components/m9sh/backdrop_component.rb
 - app/components/m9sh/badge_component.rb
 - app/components/m9sh/base_component.rb
 - app/components/m9sh/breadcrumb_component.rb
@@ -210,6 +211,7 @@ files:
 - app/javascript/controllers/index.js
 - app/javascript/controllers/m9sh/accordion_controller.js
 - app/javascript/controllers/m9sh/alert_dialog_controller.js
+- app/javascript/controllers/m9sh/backdrop_controller.js
 - app/javascript/controllers/m9sh/collapsible_controller.js
 - app/javascript/controllers/m9sh/dialog_controller.js
 - app/javascript/controllers/m9sh/dropdown_menu_controller.js