shadcn-phlex 0.1.0

data/js/controllers/toggle_group_controller.js

@@ -0,0 +1,73 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix ToggleGroup behavior
+// Supports single (default) and multiple selection
+export default class extends Controller {
+  static targets = ["item"]
+  static values = {
+    type: { type: String, default: "single" }, // "single" or "multiple"
+    value: { type: Array, default: [] },
+    disabled: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this._syncState()
+  }
+
+  toggle(event) {
+    if (this.disabledValue) return
+    const item = event.currentTarget
+    const value = item.dataset.value
+    if (!value) return
+
+    if (this.typeValue === "single") {
+      // Toggle off if already selected, otherwise select
+      if (this.valueValue.includes(value)) {
+        this.valueValue = []
+      } else {
+        this.valueValue = [value]
+      }
+    } else {
+      // Toggle in/out of array
+      if (this.valueValue.includes(value)) {
+        this.valueValue = this.valueValue.filter((v) => v !== value)
+      } else {
+        this.valueValue = [...this.valueValue, value]
+      }
+    }
+
+    this.dispatch("change", { detail: { value: this.valueValue } })
+  }
+
+  keydown(event) {
+    const items = this.itemTargets
+    const current = items.indexOf(event.currentTarget)
+    if (current === -1) return
+
+    let nextIndex
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault()
+        nextIndex = (current + 1) % items.length
+        items[nextIndex].focus()
+        break
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault()
+        nextIndex = (current - 1 + items.length) % items.length
+        items[nextIndex].focus()
+        break
+    }
+  }
+
+  valueValueChanged() { this._syncState() }
+
+  _syncState() {
+    this.itemTargets.forEach((item) => {
+      const isPressed = this.valueValue.includes(item.dataset.value)
+      item.dataset.state = isPressed ? "on" : "off"
+      item.setAttribute("aria-pressed", String(isPressed))
+    })
+  }
+}

data/js/controllers/tooltip_controller.js

@@ -0,0 +1,146 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Tooltip behavior
+// Show on hover/focus with delay, hide on leave/blur, positioning
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    open: { type: Boolean, default: false },
+    side: { type: String, default: "top" },
+    sideOffset: { type: Number, default: 4 },
+    delayDuration: { type: Number, default: 200 },
+    skipDelayDuration: { type: Number, default: 300 },
+  }
+
+  connect() {
+    this._showTimeout = null
+    this._hideTimeout = null
+    this._hideTimeouts = []
+    this._syncState()
+  }
+
+  disconnect() {
+    clearTimeout(this._showTimeout)
+    clearTimeout(this._hideTimeout)
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+  }
+
+  mouseEnter() {
+    clearTimeout(this._hideTimeout)
+    this._showTimeout = setTimeout(() => { this.openValue = true }, this.delayDurationValue)
+  }
+
+  mouseLeave() {
+    clearTimeout(this._showTimeout)
+    this._hideTimeout = setTimeout(() => { this.openValue = false }, 100)
+  }
+
+  focusIn() {
+    clearTimeout(this._hideTimeout)
+    this.openValue = true
+  }
+
+  focusOut() {
+    this.openValue = false
+  }
+
+  contentMouseEnter() {
+    clearTimeout(this._hideTimeout)
+  }
+
+  contentMouseLeave() {
+    this._hideTimeout = setTimeout(() => { this.openValue = false }, 100)
+  }
+
+  openValueChanged() { this._syncState() }
+
+  _syncState() {
+    if (!this._hideTimeouts) return
+    const state = this.openValue ? "open" : "closed"
+    this.element.dataset.state = state
+
+    this.contentTargets.forEach((el) => {
+      el.dataset.state = state
+      if (this.openValue) {
+        el.hidden = false
+        el.setAttribute("role", "tooltip")
+        this._position(el)
+      } else {
+        this._hideAfterAnimation(el)
+      }
+    })
+
+    // Link trigger aria-describedby
+    if (this.hasTriggerTarget && this.hasContentTarget) {
+      if (this.openValue) {
+        const id = this._ensureId(this.contentTarget, "tooltip")
+        this.triggerTarget.setAttribute("aria-describedby", id)
+      } else {
+        this.triggerTarget.removeAttribute("aria-describedby")
+      }
+    }
+  }
+
+  _position(content) {
+    const trigger = this.hasTriggerTarget ? this.triggerTarget : null
+    if (!trigger) return
+
+    const triggerRect = trigger.getBoundingClientRect()
+    const offset = this.sideOffsetValue
+
+    content.style.position = "fixed"
+    content.style.zIndex = "50"
+    content.style.pointerEvents = "auto"
+
+    // Measure
+    const contentRect = content.getBoundingClientRect()
+    let top, left
+
+    switch (this.sideValue) {
+      case "top":
+        top = triggerRect.top - contentRect.height - offset
+        left = triggerRect.left + (triggerRect.width - contentRect.width) / 2
+        content.dataset.side = "top"
+        break
+      case "bottom":
+        top = triggerRect.bottom + offset
+        left = triggerRect.left + (triggerRect.width - contentRect.width) / 2
+        content.dataset.side = "bottom"
+        break
+      case "left":
+        top = triggerRect.top + (triggerRect.height - contentRect.height) / 2
+        left = triggerRect.left - contentRect.width - offset
+        content.dataset.side = "left"
+        break
+      case "right":
+        top = triggerRect.top + (triggerRect.height - contentRect.height) / 2
+        left = triggerRect.right + offset
+        content.dataset.side = "right"
+        break
+    }
+
+    // Flip if overflowing
+    if (this.sideValue === "top" && top < 0) {
+      top = triggerRect.bottom + offset
+      content.dataset.side = "bottom"
+    } else if (this.sideValue === "bottom" && top + contentRect.height > window.innerHeight) {
+      top = triggerRect.top - contentRect.height - offset
+      content.dataset.side = "top"
+    }
+
+    left = Math.max(8, Math.min(left, window.innerWidth - contentRect.width - 8))
+
+    content.style.top = `${top}px`
+    content.style.left = `${left}px`
+  }
+
+  _hideAfterAnimation(el) {
+    this._hideTimeouts.push(setTimeout(() => { if (el.dataset.state === "closed") el.hidden = true }, 150))
+  }
+
+  _ensureId(el, prefix) {
+    if (!el.id) el.id = `${prefix}-${Math.random().toString(36).slice(2, 9)}`
+    return el.id
+  }
+}

data/lib/generators/shadcn_phlex/component_generator.rb

@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+
+module ShadcnPhlex
+  class ComponentGenerator < Rails::Generators::Base
+    desc "Copy a shadcn component into your app"
+    argument :name, type: :string, desc: "Component name (e.g., button, card, dialog)"
+
+    COMPONENTS = %w[
+      accordion alert alert_dialog aspect_ratio avatar badge breadcrumb
+      button button_group card checkbox collapsible context_menu dialog
+      direction drawer dropdown_menu empty field hover_card input
+      input_group item kbd label menubar native_select navigation_menu
+      pagination popover progress radio_group scroll_area select
+      separator sheet skeleton slider sonner spinner switch table tabs
+      textarea toggle toggle_group tooltip typography
+    ].freeze
+
+    # Components that need a Stimulus controller
+    INTERACTIVE = %w[
+      accordion checkbox collapsible combobox command context_menu dialog
+      drawer dropdown_menu hover_card menubar navigation_menu popover
+      radio_group scroll_area select sheet slider switch tabs toast
+      toggle toggle_group tooltip
+    ].freeze
+
+    def validate_component
+      unless COMPONENTS.include?(normalized_name) || normalized_name == "all"
+        say_status :error, "Unknown component: #{name}. Available: #{COMPONENTS.join(', ')}", :red
+        raise SystemExit
+      end
+    end
+
+    def copy_component
+      if normalized_name == "all"
+        COMPONENTS.each { |c| copy_single_component(c) }
+      else
+        copy_single_component(normalized_name)
+      end
+    end
+
+    def copy_stimulus_controller
+      if normalized_name == "all"
+        INTERACTIVE.each { |c| copy_single_controller(c) }
+      elsif INTERACTIVE.include?(normalized_name)
+        copy_single_controller(normalized_name)
+      end
+    end
+
+    private
+
+    def normalized_name
+      @normalized_name ||= name.underscore.tr("-", "_")
+    end
+
+    def copy_single_component(component_name)
+      source = gem_root.join("lib/shadcn/ui/#{component_name}.rb")
+      if File.exist?(source)
+        dest = "app/components/shadcn/ui/#{component_name}.rb"
+        copy_file source, dest
+        say_status :create, dest, :green
+      end
+    end
+
+    def copy_single_controller(component_name)
+      source = gem_root.join("js/controllers/#{component_name}_controller.js")
+      if File.exist?(source)
+        dest = "app/javascript/controllers/shadcn/#{component_name}_controller.js"
+        copy_file source, dest
+        say_status :create, dest, :green
+      end
+    end
+
+    def gem_root
+      Pathname.new(File.expand_path("../../..", __dir__))
+    end
+  end
+end

data/lib/generators/shadcn_phlex/install_generator.rb

@@ -0,0 +1,217 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+
+module ShadcnPhlex
+  class InstallGenerator < Rails::Generators::Base
+    source_root File.expand_path("install/templates", __dir__)
+    desc "Install shadcn-phlex: CSS, Stimulus controllers, and base config"
+
+    class_option :base_color, type: :string, default: "neutral",
+      desc: "Base color theme (neutral, stone, zinc, mauve, olive, mist, taupe)"
+    class_option :accent_color, type: :string, default: nil,
+      desc: "Accent color (blue, red, green, violet, orange, amber, etc.)"
+    class_option :radius, type: :string, default: "0.625rem",
+      desc: "Border radius base value"
+
+    def add_gems
+      gem "phlex-rails", "~> 2.1" unless gem_installed?("phlex-rails")
+    end
+
+    def add_npm_packages
+      say_status :run, "Adding tw-animate-css", :green
+      if File.exist?("package.json")
+        run "npm install tw-animate-css"
+      elsif File.exist?("yarn.lock")
+        run "yarn add tw-animate-css"
+      end
+    end
+
+    def configure_autoload
+      application_rb = "config/application.rb"
+      return unless File.exist?(application_rb)
+
+      content = File.read(application_rb)
+      return if content.include?("app/views")
+
+      inject_into_file application_rb,
+        after: /config\.autoload_lib.*\n/ do
+        <<-RUBY
+    # Autoload Phlex views
+    config.autoload_paths << Rails.root.join("app/views")
+
+        RUBY
+      end
+      say_status :inject, "config.autoload_paths << app/views", :green
+    end
+
+    def create_application_view
+      path = "app/views/application_view.rb"
+      return if File.exist?(path)
+
+      create_file path, <<~RUBY
+        # frozen_string_literal: true
+
+        class ApplicationView < Phlex::HTML
+          include Shadcn::Kit
+          include Phlex::Rails::Helpers::Routes
+          include Phlex::Rails::Helpers::StyleSheetLinkTag
+          include Phlex::Rails::Helpers::JavaScriptIncludeTag
+
+          # Dark mode blocking script — prevents flash of light mode
+          DARK_MODE_SCRIPT = '(function(){try{var t=localStorage.getItem("theme");if(t==="dark"||(t!=="light"&&window.matchMedia("(prefers-color-scheme:dark)").matches)){document.documentElement.classList.add("dark")}}catch(e){}})();'
+
+          def around_template(&block)
+            doctype
+            html(lang: "en") do
+              head do
+                meta(charset: "utf-8")
+                meta(name: "viewport", content: "width=device-width,initial-scale=1")
+                title { page_title }
+                script { raw(Phlex::HTML::SafeValue.new(DARK_MODE_SCRIPT)) }
+                stylesheet_link_tag("application")
+                javascript_include_tag("application", defer: "defer")
+              end
+              body(class: "min-h-screen bg-background text-foreground antialiased", data_controller: "shadcn--dark-mode") do
+                yield
+              end
+            end
+          end
+
+          private
+
+          def page_title
+            "My App"
+          end
+        end
+      RUBY
+    end
+
+    def copy_tailwind_config
+      source = gem_css("shadcn-tailwind.css")
+      create_file "app/assets/stylesheets/shadcn-tailwind.css", File.read(source)
+    end
+
+    def create_theme
+      base_color = options[:base_color].to_sym
+      accent_color = options[:accent_color]&.to_sym
+      radius = options[:radius]
+
+      require "shadcn/themes/base_colors"
+      require "shadcn/themes/accent_colors"
+
+      theme_css = Shadcn::Themes.generate_css(
+        base_color: base_color,
+        accent_color: accent_color,
+        radius: radius
+      )
+
+      create_file "app/assets/stylesheets/shadcn-theme.css", <<~CSS
+        /*
+         * shadcn theme: #{base_color}#{accent_color ? " + #{accent_color}" : ""}
+         * To change themes, replace this file with CSS from ui.shadcn.com/themes
+         */
+        #{theme_css}
+      CSS
+    end
+
+    def create_css_entrypoint
+      gem_path = Gem.loaded_specs["shadcn-phlex"]&.full_gem_path
+
+      create_file "app/assets/stylesheets/shadcn.css", <<~CSS
+        @import "tailwindcss";
+        @import "tw-animate-css";
+        @import "./shadcn-tailwind.css";
+        @import "./shadcn-theme.css";
+
+        /* Ensure Tailwind scans component files for class names */
+        @source "../../app/components";
+        @source "../../app/views";
+        #{gem_path ? "@source \"#{gem_path}/lib/**/*.rb\";" : "/* @source \"path/to/shadcn-phlex/lib/**/*.rb\"; */"}
+      CSS
+    end
+
+    def copy_stimulus_controllers
+      target = "app/javascript/controllers/shadcn"
+
+      if File.directory?(gem_js_dir) && !File.directory?(target)
+        js_files = Dir[File.join(gem_js_dir, "*.js")]
+        js_files.each do |file|
+          create_file File.join(target, File.basename(file)), File.read(file)
+        end
+        say_status :copied, "#{js_files.count} Stimulus controllers to #{target}/", :green
+      end
+    end
+
+    def create_stimulus_registration
+      index_path = "app/javascript/controllers/index.js"
+      return unless File.exist?(index_path)
+
+      content = File.read(index_path)
+      return if content.include?("shadcn")
+
+      append_to_file index_path, <<~JS
+
+        // shadcn-phlex Stimulus controllers
+        import { registerShadcnControllers } from "./shadcn/index"
+        registerShadcnControllers(application)
+      JS
+      say_status :inject, "shadcn controllers into #{index_path}", :green
+    end
+
+    def print_setup_complete
+      say_status :info, "Setup complete!", :green
+      say <<~MSG
+
+        shadcn-phlex is ready. Here's what was set up:
+          - app/views/application_view.rb (base view with Kit, dark mode, asset tags)
+          - app/assets/stylesheets/shadcn.css (Tailwind + theme)
+          - app/javascript/controllers/shadcn/ (Stimulus controllers)
+          - config/application.rb (autoload app/views)
+
+        Start using components:
+          class MyView < ApplicationView
+            def view_template
+              ui_button { "Hello" }
+            end
+          end
+
+        To change your theme:
+          1. Go to ui.shadcn.com/themes
+          2. Copy the CSS
+          3. Paste into app/assets/stylesheets/shadcn-theme.css
+
+        For AI/LLM support:
+          npx skills add shadcn-phlex/shadcn-phlex
+
+      MSG
+    end
+
+    private
+
+    def gem_installed?(name)
+      File.read("Gemfile").include?(name)
+    rescue Errno::ENOENT
+      false
+    end
+
+    def gem_root
+      @gem_root ||= begin
+        spec = Gem.loaded_specs["shadcn-phlex"]
+        if spec
+          spec.full_gem_path
+        else
+          File.expand_path("../../../..", __dir__)
+        end
+      end
+    end
+
+    def gem_css(filename)
+      File.join(gem_root, "css", filename)
+    end
+
+    def gem_js_dir
+      File.join(gem_root, "js", "controllers")
+    end
+  end
+end

data/lib/shadcn/base.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Shadcn
+  class Base < Phlex::HTML
+    TAILWIND_MERGER = TailwindMerge::Merger.new
+
+    private
+
+    # Equivalent to shadcn's cn() utility - merges Tailwind classes intelligently
+    def cn(*classes)
+      merged = classes.flatten.compact.join(" ")
+      TAILWIND_MERGER.merge(merged)
+    end
+
+    # Merge user-provided attrs with defaults, intelligently merging classes
+    def merge_attrs(defaults, overrides)
+      result = defaults.merge(overrides) do |key, default_val, override_val|
+        if key == :class
+          cn(default_val, override_val)
+        else
+          override_val
+        end
+      end
+      result
+    end
+  end
+end

data/lib/shadcn/engine.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Shadcn
+  class Engine < ::Rails::Engine
+    isolate_namespace Shadcn
+
+    initializer "shadcn.assets" do |app|
+      # Add JS controllers to asset pipeline
+      if app.config.respond_to?(:assets)
+        app.config.assets.paths << root.join("js")
+      end
+    end
+
+    initializer "shadcn.importmap", before: "importmap" do |app|
+      if app.config.respond_to?(:importmap)
+        # Pin all Stimulus controllers
+        app.config.importmap.pin_all_from(
+          root.join("js/controllers"),
+          under: "shadcn/controllers"
+        )
+      end
+    end
+  end
+end