m9sh 0.1.0 → 0.2.0

data/app/javascript/controllers/m9sh/popover_controller.js

@@ -55,28 +55,32 @@ export default class extends Controller {
     if (!this.hasContentTarget) return
 
     const triggerRect = this.triggerTarget.getBoundingClientRect()
-    const contentRect = this.contentTarget.getBoundingClientRect()
 
-    // Position based on side
+    // Reset styles
+    this.contentTarget.style.top = ""
+    this.contentTarget.style.bottom = ""
+    this.contentTarget.style.left = ""
+    this.contentTarget.style.right = ""
+    this.contentTarget.style.transform = ""
+
+    // Position based on side using fixed positioning
     switch (this.sideValue) {
       case "top":
-        this.contentTarget.style.bottom = "100%"
-        this.contentTarget.style.marginBottom = "0.5rem"
+        this.contentTarget.style.top = `${triggerRect.top - 8}px`
+        this.contentTarget.style.transform = "translateY(-100%)"
         this.contentTarget.setAttribute("data-side", "top")
         break
       case "bottom":
-        this.contentTarget.style.top = "100%"
-        this.contentTarget.style.marginTop = "0.5rem"
+        this.contentTarget.style.top = `${triggerRect.bottom + 8}px`
         this.contentTarget.setAttribute("data-side", "bottom")
         break
       case "left":
-        this.contentTarget.style.right = "100%"
-        this.contentTarget.style.marginRight = "0.5rem"
+        this.contentTarget.style.left = `${triggerRect.left - 8}px`
+        this.contentTarget.style.transform = "translateX(-100%)"
         this.contentTarget.setAttribute("data-side", "left")
         break
       case "right":
-        this.contentTarget.style.left = "100%"
-        this.contentTarget.style.marginLeft = "0.5rem"
+        this.contentTarget.style.left = `${triggerRect.right + 8}px`
         this.contentTarget.setAttribute("data-side", "right")
         break
     }
@@ -85,27 +89,29 @@ export default class extends Controller {
     if (this.sideValue === "top" || this.sideValue === "bottom") {
       switch (this.alignValue) {
         case "start":
-          this.contentTarget.style.left = "0"
+          this.contentTarget.style.left = `${triggerRect.left}px`
           break
         case "center":
-          this.contentTarget.style.left = "50%"
-          this.contentTarget.style.transform = "translateX(-50%)"
+          this.contentTarget.style.left = `${triggerRect.left + triggerRect.width / 2}px`
+          this.contentTarget.style.transform = (this.contentTarget.style.transform || "") + " translateX(-50%)"
           break
         case "end":
-          this.contentTarget.style.right = "0"
+          this.contentTarget.style.left = `${triggerRect.right}px`
+          this.contentTarget.style.transform = (this.contentTarget.style.transform || "") + " translateX(-100%)"
           break
       }
     } else {
       switch (this.alignValue) {
         case "start":
-          this.contentTarget.style.top = "0"
+          this.contentTarget.style.top = `${triggerRect.top}px`
           break
         case "center":
-          this.contentTarget.style.top = "50%"
-          this.contentTarget.style.transform = "translateY(-50%)"
+          this.contentTarget.style.top = `${triggerRect.top + triggerRect.height / 2}px`
+          this.contentTarget.style.transform = (this.contentTarget.style.transform || "") + " translateY(-50%)"
           break
         case "end":
-          this.contentTarget.style.bottom = "0"
+          this.contentTarget.style.top = `${triggerRect.bottom}px`
+          this.contentTarget.style.transform = (this.contentTarget.style.transform || "") + " translateY(-100%)"
           break
       }
     }

data/app/javascript/controllers/m9sh/sidebar_controller.js

@@ -8,14 +8,27 @@ export default class extends Controller {
   }
 
   connect() {
+    // Check if mobile first
+    this.isMobile = window.innerWidth < 768
+
     // Get initial state from localStorage or default
     const storageKey = this.storageKey
     const savedState = localStorage.getItem(storageKey)
-    const defaultState = this.collapsibleValue === "none" ? "expanded" : "collapsed"
+
+    // For offcanvas sidebars: collapsed on mobile, expanded on desktop
+    // For other types: expanded if none, collapsed otherwise
+    let defaultState
+    if (this.collapsibleValue === "offcanvas") {
+      defaultState = this.isMobile ? "collapsed" : "expanded"
+    } else {
+      defaultState = this.collapsibleValue === "none" ? "expanded" : "collapsed"
+    }
+
     this.state = savedState || defaultState
 
     // Set initial state
     this.element.dataset.state = this.state
+    this.element.dataset.mobile = this.isMobile
 
     // Apply initial classes/transforms
     this.applyState()
@@ -25,7 +38,6 @@ export default class extends Controller {
     document.addEventListener("keydown", this.boundHandleKeyboard)
 
     // Handle mobile detection
-    this.checkMobile()
     window.addEventListener("resize", this.checkMobile.bind(this))
   }
 
@@ -89,14 +101,24 @@ export default class extends Controller {
   }
 
   checkMobile() {
+    const wasMobile = this.isMobile
     this.isMobile = window.innerWidth < 768
     this.element.dataset.mobile = this.isMobile
 
-    // On mobile, default to collapsed
-    if (this.isMobile && this.state === "expanded" && this.collapsibleValue === "offcanvas") {
-      this.state = "collapsed"
-      this.element.dataset.state = this.state
-      this.applyState()
+    // Only update state if mobile status changed and sidebar is offcanvas
+    if (this.collapsibleValue === "offcanvas" && wasMobile !== this.isMobile) {
+      // Transitioning to mobile: collapse
+      if (this.isMobile && this.state === "expanded") {
+        this.state = "collapsed"
+        this.element.dataset.state = this.state
+        this.applyState()
+      }
+      // Transitioning to desktop: expand
+      else if (!this.isMobile && this.state === "collapsed") {
+        this.state = "expanded"
+        this.element.dataset.state = this.state
+        this.applyState()
+      }
     }
   }
 

data/lib/m9sh/config.rb

@@ -82,23 +82,23 @@ module M9sh
       config_hash = {}
 
       print "Component namespace (default: M9sh): "
-      namespace = gets.chomp
+      namespace = $stdin.gets.chomp
       config_hash["namespace"] = namespace.empty? ? "M9sh" : namespace
 
       print "Components path (default: app/components/m9sh): "
-      components_path = gets.chomp
+      components_path = $stdin.gets.chomp
       config_hash["components_path"] = components_path.empty? ? "app/components/m9sh" : components_path
 
       print "JavaScript controllers path (default: app/javascript/controllers/m9sh): "
-      js_path = gets.chomp
+      js_path = $stdin.gets.chomp
       config_hash["javascript_path"] = js_path.empty? ? "app/javascript/controllers/m9sh" : js_path
 
       print "Tailwind config path (default: tailwind.config.js): "
-      tailwind = gets.chomp
+      tailwind = $stdin.gets.chomp
       config_hash["tailwind_config"] = tailwind.empty? ? "tailwind.config.js" : tailwind
 
       print "CSS file path (default: app/assets/stylesheets/application.tailwind.css): "
-      css = gets.chomp
+      css = $stdin.gets.chomp
       config_hash["css_file"] = css.empty? ? "app/assets/stylesheets/application.tailwind.css" : css
 
       config_hash["style"] = "default"

data/lib/m9sh/registry.rb

@@ -91,11 +91,11 @@ module M9sh
     # Get components grouped by category (for listing)
     def components_by_category
       categories = {
-        "Base" => ["base", "utilities"],
+        "Base" => ["base", "utilities", "icon"],
         "Form Components" => ["button", "input", "label", "checkbox", "textarea", "select", "switch", "slider", "radio_group"],
         "Layout Components" => ["card", "table", "separator", "main"],
         "Feedback Components" => ["alert", "toast", "toaster", "progress", "spinner", "skeleton"],
-        "Navigation Components" => ["breadcrumb", "navigation_menu", "sidebar", "tabs"],
+        "Navigation Components" => ["breadcrumb", "navigation_menu", "navbar", "sidebar", "tabs", "menu"],
         "Display Components" => ["avatar", "badge", "typography"],
         "Interactive Components" => ["accordion", "dialog", "alert_dialog", "sheet", "tooltip", "popover", "hover_card", "collapsible", "dropdown_menu", "toggle"],
         "Theme Components" => ["theme_toggle"]

data/lib/m9sh/registry.yml

@@ -16,6 +16,15 @@ components:
       - app/components/m9sh/utilities.rb
     dependencies: []
 
+  icon:
+    name: "Icon"
+    description: "SVG icon component with dynamic sizing and styling"
+    files:
+      - app/components/m9sh/icon_component.rb
+    dependencies:
+      - base
+      - utilities
+
   button:
     name: "Button"
     description: "Button component with multiple variants"
@@ -224,6 +233,13 @@ components:
     description: "Modal dialog component with Stimulus"
     files:
       - app/components/m9sh/dialog_component.rb
+      - app/components/m9sh/dialog_trigger_component.rb
+      - app/components/m9sh/dialog_content_component.rb
+      - app/components/m9sh/dialog_header_component.rb
+      - app/components/m9sh/dialog_title_component.rb
+      - app/components/m9sh/dialog_description_component.rb
+      - app/components/m9sh/dialog_footer_component.rb
+      - app/components/m9sh/dialog_close_component.rb
       - app/javascript/controllers/m9sh/dialog_controller.js
     dependencies:
       - base
@@ -382,3 +398,24 @@ components:
     dependencies:
       - base
       - utilities
+
+  menu:
+    name: "Menu"
+    description: "Menu component with item and separator slots"
+    files:
+      - app/components/m9sh/menu_component.rb
+    dependencies:
+      - base
+      - utilities
+
+  navbar:
+    name: "Navbar"
+    description: "Navigation bar component with mobile menu support"
+    files:
+      - app/components/m9sh/navbar_component.rb
+    dependencies:
+      - base
+      - utilities
+      - icon
+      - button
+      - dropdown_menu

data/lib/m9sh/version.rb

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

data/lib/tasks/tailwindcss.rake

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+# Override tailwindcss-rails tasks since we use npm to build CSS
+# This prevents the gem from interfering with asset precompilation
+
+# Make tailwindcss:build a no-op since we build with npm
+Rake::Task["tailwindcss:build"].clear if Rake::Task.task_defined?("tailwindcss:build")
+
+namespace :tailwindcss do
+  desc "Build Tailwind CSS (using npm)"
+  task :build do
+    # No-op: CSS is built via npm run build:css
+    puts "Skipping tailwindcss:build task (CSS built via npm run build:css)"
+  end
+end

data/m9sh.gemspec

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+require_relative "lib/m9sh/version"
+
+Gem::Specification.new do |spec|
+  spec.name = "m9sh"
+  spec.version = M9sh::VERSION
+  spec.authors = ["Marcin Urbanski"]
+  spec.email = ["marcinn.urbanski@gmail.com"]
+
+  spec.summary = "Beautiful, accessible UI components for Rails with Hotwire"
+  spec.description = "M9sh is a component library for Rails applications using ViewComponent and Hotwire, inspired by shadcn/ui. Generate beautiful, accessible UI components with a powerful CLI."
+  spec.homepage = "https://github.com/veas-org/m9sh"
+  spec.license = "MIT"
+  spec.required_ruby_version = ">= 3.0.0"
+
+  spec.metadata["homepage_uri"] = spec.homepage
+  spec.metadata["source_code_uri"] = spec.homepage
+  spec.metadata["changelog_uri"] = "#{spec.homepage}/blob/main/CHANGELOG.md"
+  spec.metadata["documentation_uri"] = "#{spec.homepage}/blob/main/M9SH_CLI.md"
+
+  # Specify which files should be added to the gem when it is released.
+  # The `git ls-files -z` loads the files in the RubyGem that have been added into git.
+  spec.files = Dir.chdir(__dir__) do
+    `git ls-files -z`.split("\x0").reject do |f|
+      (File.expand_path(f) == __FILE__) ||
+        f.start_with?(*%w[bin/ test/ spec/ features/ .git .github appveyor Gemfile config/ tmp/ app/ db/ public/ log/])
+    end
+  end
+
+  # Include lib files explicitly
+  spec.files += Dir["lib/**/*.rb"]
+  spec.files += Dir["lib/**/*.yml"]
+  spec.files += Dir["app/components/m9sh/**/*.rb"]
+  spec.files += Dir["app/javascript/controllers/m9sh/**/*.js"]
+
+  spec.bindir = "exe"
+  spec.executables = ["m9sh"]
+  spec.require_paths = ["lib"]
+
+  # Runtime dependencies
+  spec.add_dependency "thor", "~> 1.3"
+  spec.add_dependency "view_component", "~> 3.0"
+
+  # Development dependencies
+  spec.add_development_dependency "bundler", "~> 2.0"
+  spec.add_development_dependency "rake", "~> 13.0"
+end

data/publish.sh

@@ -0,0 +1,48 @@
+#!/bin/bash
+set -e
+
+echo "🚀 Publishing M9sh gem to RubyGems..."
+
+# Check if BUNDLE_TOKEN is set
+if [ -z "$BUNDLE_TOKEN" ]; then
+    echo "❌ Error: BUNDLE_TOKEN environment variable is not set"
+    echo ""
+    echo "Please set your RubyGems API token:"
+    echo "  export BUNDLE_TOKEN=your_rubygems_api_token"
+    echo ""
+    echo "You can get your API token from:"
+    echo "  https://rubygems.org/profile/edit"
+    exit 1
+fi
+
+# Create credentials directory
+mkdir -p ~/.gem
+
+# Write credentials file
+echo "📝 Configuring RubyGems credentials..."
+cat > ~/.gem/credentials << EOF
+---
+:rubygems_api_key: ${BUNDLE_TOKEN}
+EOF
+
+# Set proper permissions
+chmod 0600 ~/.gem/credentials
+
+echo "✅ Credentials configured"
+
+# Build gem if needed
+if [ ! -f "m9sh-0.1.0.gem" ]; then
+    echo "📦 Building gem..."
+    gem build m9sh.gemspec
+fi
+
+# Push to RubyGems
+echo "📤 Publishing to RubyGems..."
+gem push m9sh-0.1.0.gem
+
+echo ""
+echo "🎉 Successfully published M9sh gem!"
+echo "   View at: https://rubygems.org/gems/m9sh"
+echo ""
+echo "Users can now install with:"
+echo "   gem install m9sh"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: m9sh
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Marcin Urbanski
 autorequire:
 bindir: exe
 cert_chain: []
-date: 2025-10-13 00:00:00.000000000 Z
+date: 2025-10-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: thor
@@ -88,6 +88,10 @@ files:
 - ".mise.toml"
 - ".node-version"
 - Dockerfile
+- GEM_README.md
+- LICENSE.txt
+- M9SH_CLI.md
+- PUBLISHING.md
 - README.md
 - Rakefile
 - app/components/m9sh/accordion_component.rb
@@ -101,16 +105,27 @@ files:
 - app/components/m9sh/card_component.rb
 - app/components/m9sh/checkbox_component.rb
 - app/components/m9sh/collapsible_component.rb
+- app/components/m9sh/color_customizer_component.rb
+- app/components/m9sh/dialog_close_component.rb
 - app/components/m9sh/dialog_component.rb
+- app/components/m9sh/dialog_content_component.rb
+- app/components/m9sh/dialog_description_component.rb
+- app/components/m9sh/dialog_footer_component.rb
+- app/components/m9sh/dialog_header_component.rb
+- app/components/m9sh/dialog_title_component.rb
+- app/components/m9sh/dialog_trigger_component.rb
 - app/components/m9sh/dropdown_menu_component.rb
 - app/components/m9sh/dropdown_menu_content_component.rb
 - app/components/m9sh/dropdown_menu_item_component.rb
 - app/components/m9sh/dropdown_menu_separator_component.rb
 - app/components/m9sh/dropdown_menu_trigger_component.rb
 - app/components/m9sh/hover_card_component.rb
+- app/components/m9sh/icon_component.rb
 - app/components/m9sh/input_component.rb
 - app/components/m9sh/label_component.rb
 - app/components/m9sh/main_component.rb
+- app/components/m9sh/menu_component.rb
+- app/components/m9sh/navbar_component.rb
 - app/components/m9sh/navigation_menu_component.rb
 - app/components/m9sh/popover_component.rb
 - app/components/m9sh/progress_component.rb
@@ -163,7 +178,6 @@ files:
 - components.json
 - config.ru
 - exe/m9sh
-- fix_namespaces.py
 - fly.toml
 - koyeb.yaml
 - lib/m9sh.rb
@@ -173,9 +187,12 @@ files:
 - lib/m9sh/registry.rb
 - lib/m9sh/registry.yml
 - lib/m9sh/version.rb
+- lib/tasks/tailwindcss.rake
+- m9sh.gemspec
 - package-lock.json
 - package.json
 - pnpm-lock.yaml
+- publish.sh
 - tailwind.config.js
 - update_namespace.py
 homepage: https://github.com/veas-org/m9sh

data/fix_namespaces.py

@@ -1,32 +0,0 @@
-#!/usr/bin/env python3
-import os
-import re
-
-# Path to the components directory
-components_dir = '/Users/marcin/Projects/veas/hotcdn/app/components/m9sh'
-
-# Function to replace hotcdn__ with m9sh__ in a file
-def fix_file(filepath):
-    with open(filepath, 'r') as f:
-        content = f.read()
-
-    # Replace all hotcdn__ with m9sh__
-    updated_content = re.sub(r'hotcdn__', 'm9sh__', content)
-
-    if content != updated_content:
-        with open(filepath, 'w') as f:
-            f.write(updated_content)
-        print(f"Fixed: {filepath}")
-        return True
-    return False
-
-# Process all .rb files in the components directory
-fixed_count = 0
-for root, dirs, files in os.walk(components_dir):
-    for file in files:
-        if file.endswith('.rb'):
-            filepath = os.path.join(root, file)
-            if fix_file(filepath):
-                fixed_count += 1
-
-print(f"\nFixed {fixed_count} files")