shadcn-rails 0.1.0

data/app/components/shadcn/toggle_group_component.rb

@@ -0,0 +1,96 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Toggle Group component for grouping related toggles
+  # Matches shadcn/ui ToggleGroup component
+  #
+  # @example Single selection
+  #   <%= render Shadcn::ToggleGroupComponent.new(type: :single, name: "alignment") do |group| %>
+  #     <% group.with_item(value: "left", aria_label: "Align left") { icon_left } %>
+  #     <% group.with_item(value: "center", aria_label: "Align center") { icon_center } %>
+  #     <% group.with_item(value: "right", aria_label: "Align right") { icon_right } %>
+  #   <% end %>
+  #
+  # @example Multiple selection with outline variant
+  #   <%= render Shadcn::ToggleGroupComponent.new(type: :multiple, variant: :outline) do |group| %>
+  #     <% group.with_item(value: "bold") { "B" } %>
+  #     <% group.with_item(value: "italic") { "I" } %>
+  #     <% group.with_item(value: "underline") { "U" } %>
+  #   <% end %>
+  #
+  class ToggleGroupComponent < BaseComponent
+    BASE_CLASSES = "inline-flex items-center justify-center gap-1 rounded-lg"
+
+    renders_many :items, ->(value:, pressed: false, disabled: false, aria_label: nil, **options, &block) do
+      ToggleGroupItemComponent.new(
+        value: value,
+        pressed: pressed,
+        disabled: disabled,
+        aria_label: aria_label,
+        variant: @variant,
+        size: @size,
+        group_type: @type,
+        **options,
+        &block
+      )
+    end
+
+    # @param type [Symbol] :single or :multiple selection mode
+    # @param variant [Symbol] :default or :outline
+    # @param size [Symbol] :sm, :default, or :lg
+    # @param value [String, Array] Currently selected value(s)
+    # @param name [String] Form field name
+    def initialize(
+      type: :single,
+      variant: :default,
+      size: :default,
+      value: nil,
+      name: nil,
+      **options
+    )
+      super(**options)
+      @type = type
+      @variant = variant
+      @size = size
+      @value = value
+      @name = name
+    end
+
+    def call
+      content_tag(:div, group_content, group_attributes)
+    end
+
+    private
+
+    def group_content
+      safe_join([
+        hidden_input,
+        items.map(&:to_s)
+      ].flatten.compact)
+    end
+
+    def hidden_input
+      return unless @name
+
+      tag(:input,
+        type: "hidden",
+        name: @name,
+        value: Array(@value).join(","),
+        "data-shadcn--toggle-group-target": "input"
+      )
+    end
+
+    def group_attributes
+      attrs = {
+        role: "group",
+        class: merge_classes(BASE_CLASSES),
+        "data-controller": "shadcn--toggle-group",
+        "data-shadcn--toggle-group-type-value": @type.to_s,
+        "data-shadcn--toggle-group-value-value": Array(@value).join(",")
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/toggle_group_item_component.rb

@@ -0,0 +1,62 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Individual toggle item within a group
+  class ToggleGroupItemComponent < BaseComponent
+    VARIANTS = {
+      default: "bg-transparent",
+      outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"
+    }.freeze
+
+    SIZES = {
+      sm: "h-8 px-2 min-w-8",
+      default: "h-9 px-2.5 min-w-9",
+      lg: "h-10 px-3 min-w-10"
+    }.freeze
+
+    BASE_CLASSES = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"
+
+    def initialize(
+      value:,
+      pressed: false,
+      disabled: false,
+      aria_label: nil,
+      variant: :default,
+      size: :default,
+      group_type: :single,
+      **options,
+      &block
+    )
+      super(**options, &block)
+      @value = value
+      @pressed = pressed
+      @disabled = disabled
+      @aria_label = aria_label
+      @variant = variant
+      @size = size
+      @group_type = group_type
+    end
+
+    def call
+      content_tag(:button, content, button_attributes)
+    end
+
+    private
+
+    def button_attributes
+      attrs = {
+        type: "button",
+        class: cn(BASE_CLASSES, VARIANTS[@variant], SIZES[@size], class_name),
+        disabled: @disabled || nil,
+        "aria-pressed": @pressed.to_s,
+        "aria-label": @aria_label,
+        "data-state": @pressed ? "on" : "off",
+        "data-value": @value,
+        "data-shadcn--toggle-group-target": "item",
+        "data-action": "click->shadcn--toggle-group#toggle"
+      }
+      attrs.merge!(html_options)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/tooltip_component.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Tooltip component for contextual information
+  # Matches shadcn/ui Tooltip component
+  # Uses Stimulus for interactivity
+  #
+  # @example Basic tooltip
+  #   <%= render Shadcn::TooltipComponent.new(text: "Add to library") do %>
+  #     <%= render Shadcn::ButtonComponent.new(variant: :outline, size: :icon) do %>
+  #       +
+  #     <% end %>
+  #   <% end %>
+  #
+  # @example With custom positioning
+  #   <%= render Shadcn::TooltipComponent.new(text: "Help", side: :right) do %>
+  #     <span>Hover me</span>
+  #   <% end %>
+  #
+  class TooltipComponent < BaseComponent
+    CONTENT_CLASSES = "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+
+    # @param text [String] Tooltip text content
+    # @param side [Symbol] Side to show tooltip (:top, :right, :bottom, :left)
+    # @param align [Symbol] Alignment (:start, :center, :end)
+    # @param delay_duration [Integer] Delay before showing (ms)
+    # @param skip_delay_duration [Integer] Delay when moving between triggers (ms)
+    def initialize(
+      text: nil,
+      side: :top,
+      align: :center,
+      delay_duration: 200,
+      skip_delay_duration: 300,
+      **options
+    )
+      @tooltip_content = text
+      @side = side
+      @align = align
+      @delay_duration = delay_duration
+      @skip_delay_duration = skip_delay_duration
+      super(**options)
+    end
+
+    def call
+      content_tag(:span, tooltip_structure, tooltip_attributes)
+    end
+
+    private
+
+    def tooltip_structure
+      safe_join([
+        trigger_wrapper,
+        tooltip_content_element
+      ])
+    end
+
+    def trigger_wrapper
+      content_tag(:span, content, {
+        "data-shadcn--tooltip-target": "trigger",
+        "data-action": "mouseenter->shadcn--tooltip#show mouseleave->shadcn--tooltip#hide focus->shadcn--tooltip#show blur->shadcn--tooltip#hide"
+      })
+    end
+
+    def tooltip_content_element
+      content_tag(:div, @tooltip_content, {
+        class: CONTENT_CLASSES,
+        role: "tooltip",
+        "data-shadcn--tooltip-target": "content",
+        "data-side": @side.to_s,
+        "data-state": "closed",
+        hidden: true
+      })
+    end
+
+    def tooltip_attributes
+      attrs = {
+        class: cn("relative inline-block", class_name),
+        "data-controller": "shadcn--tooltip",
+        "data-shadcn--tooltip-side-value": @side.to_s,
+        "data-shadcn--tooltip-align-value": @align.to_s,
+        "data-shadcn--tooltip-delay-value": @delay_duration,
+        "data-shadcn--tooltip-skip-delay-value": @skip_delay_duration
+      }
+      attrs.merge!(html_options)
+      attrs.merge!(build_data)
+      attrs.compact
+    end
+  end
+end

data/app/components/shadcn/typography_component.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+module Shadcn
+  # Typography component for consistent text styling
+  # Matches shadcn/ui Typography component
+  #
+  # @example Heading 1
+  #   <%= render Shadcn::TypographyComponent.new(variant: :h1) { "Heading 1" } %>
+  #
+  # @example Heading 2
+  #   <%= render Shadcn::TypographyComponent.new(variant: :h2) { "Heading 2" } %>
+  #
+  # @example Paragraph
+  #   <%= render Shadcn::TypographyComponent.new(variant: :p) { "This is a paragraph of text." } %>
+  #
+  # @example Lead text
+  #   <%= render Shadcn::TypographyComponent.new(variant: :lead) { "A modal dialog that interrupts the user." } %>
+  #
+  # @example Muted text
+  #   <%= render Shadcn::TypographyComponent.new(variant: :muted) { "Enter your email address." } %>
+  #
+  # @example Blockquote
+  #   <%= render Shadcn::TypographyComponent.new(variant: :blockquote) { "After all, everyone enjoys a good quote." } %>
+  #
+  # @example Inline code
+  #   <%= render Shadcn::TypographyComponent.new(variant: :code) { "@radix-ui/react-alert-dialog" } %>
+  #
+  class TypographyComponent < BaseComponent
+    VARIANTS = {
+      h1: {
+        tag: :h1,
+        classes: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"
+      },
+      h2: {
+        tag: :h2,
+        classes: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0"
+      },
+      h3: {
+        tag: :h3,
+        classes: "scroll-m-20 text-2xl font-semibold tracking-tight"
+      },
+      h4: {
+        tag: :h4,
+        classes: "scroll-m-20 text-xl font-semibold tracking-tight"
+      },
+      p: {
+        tag: :p,
+        classes: "leading-7 [&:not(:first-child)]:mt-6"
+      },
+      lead: {
+        tag: :p,
+        classes: "text-xl text-muted-foreground"
+      },
+      large: {
+        tag: :div,
+        classes: "text-lg font-semibold"
+      },
+      small: {
+        tag: :small,
+        classes: "text-sm font-medium leading-none"
+      },
+      muted: {
+        tag: :p,
+        classes: "text-sm text-muted-foreground"
+      },
+      blockquote: {
+        tag: :blockquote,
+        classes: "mt-6 border-l-2 pl-6 italic"
+      },
+      code: {
+        tag: :code,
+        classes: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold"
+      },
+      list: {
+        tag: :ul,
+        classes: "my-6 ml-6 list-disc [&>li]:mt-2"
+      }
+    }.freeze
+
+    # @param variant [Symbol] Typography variant (:h1, :h2, :h3, :h4, :p, :lead, :large, :small, :muted, :blockquote, :code, :list)
+    # @param tag [Symbol, nil] Override the default HTML tag
+    def initialize(variant: :p, tag: nil, **options)
+      super(**options)
+      @variant = variant.to_sym
+      @tag = tag
+    end
+
+    def call
+      content_tag(element_tag, content, **typography_attributes)
+    end
+
+    private
+
+    def typography_attributes
+      {
+        class: merge_classes(variant_classes)
+      }.merge(html_options).merge(build_data).compact
+    end
+
+    def variant_config
+      VARIANTS[@variant] || VARIANTS[:p]
+    end
+
+    def variant_classes
+      variant_config[:classes]
+    end
+
+    def element_tag
+      @tag || variant_config[:tag]
+    end
+  end
+end

data/babel.config.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }]
+  ]
+}

data/bin/console

@@ -0,0 +1,11 @@
+#!/usr/bin/env ruby
+# frozen_string_literal: true
+
+require "bundler/setup"
+require "shadcn/rails"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/config/importmap.rb

@@ -0,0 +1,5 @@
+# Importmap configuration for shadcn-rails
+# This file is automatically included when using importmaps
+
+pin "shadcn", to: "shadcn/index.js"
+pin_all_from File.expand_path("../app/assets/javascripts/shadcn/controllers", __dir__), under: "shadcn/controllers"

data/fly.toml

@@ -0,0 +1,26 @@
+# fly.toml - Fly.io configuration for shadcn-rails documentation site
+# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
+
+app = 'shadcn-rails'
+primary_region = 'iad'
+
+[build]
+  dockerfile = 'test/dummy/Dockerfile'
+
+[env]
+  RAILS_ENV = 'production'
+  RAILS_LOG_TO_STDOUT = 'true'
+  RAILS_SERVE_STATIC_FILES = 'true'
+
+[http_service]
+  internal_port = 3000
+  force_https = true
+  auto_stop_machines = 'stop'
+  auto_start_machines = true
+  min_machines_running = 0
+  processes = ['app']
+
+[[vm]]
+  memory = '512mb'
+  cpu_kind = 'shared'
+  cpus = 1

data/jest.config.js

@@ -0,0 +1,19 @@
+/** @type {import('jest').Config} */
+export default {
+  testEnvironment: 'jsdom',
+  testMatch: ['**/__tests__/**/*.test.js'],
+  moduleFileExtensions: ['js', 'json'],
+  transform: {
+    '^.+\\.js$': 'babel-jest'
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!@hotwired/stimulus)'
+  ],
+  setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
+  collectCoverageFrom: [
+    'app/assets/javascripts/shadcn/controllers/**/*.js',
+    '!**/node_modules/**'
+  ],
+  coverageDirectory: 'coverage',
+  verbose: true
+}

data/jest.setup.js

@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom'
+
+// Make jest globals available in ESM modules
+import { jest } from '@jest/globals'
+globalThis.jest = jest
+
+// Mock scrollIntoView since JSDOM doesn't implement it
+Element.prototype.scrollIntoView = jest.fn()

data/lib/generators/shadcn/component/component_generator.rb

@@ -0,0 +1,188 @@
+# frozen_string_literal: true
+
+require "rails/generators"
+require "rails/generators/base"
+
+module Shadcn
+  module Generators
+    # Generator for adding individual shadcn components
+    # Usage: rails generate shadcn:component button card dialog
+    class ComponentGenerator < Rails::Generators::Base
+      source_root File.expand_path("templates", __dir__)
+
+      argument :components, type: :array, default: [], banner: "component [component ...]"
+
+      class_option :all, type: :boolean, default: false,
+        desc: "Install all available components"
+      class_option :list, type: :boolean, default: false,
+        desc: "List all available components"
+
+      desc "Adds shadcn-rails components to your application"
+
+      # List of all available components
+      AVAILABLE_COMPONENTS = %w[
+        accordion
+        alert
+        avatar
+        badge
+        button
+        card
+        checkbox
+        collapsible
+        dialog
+        dropdown_menu
+        input
+        label
+        popover
+        progress
+        scroll_area
+        select
+        separator
+        sheet
+        skeleton
+        switch
+        table
+        tabs
+        textarea
+        toast
+        tooltip
+      ].freeze
+
+      def validate_components
+        if options[:list]
+          display_available_components
+          exit 0
+        end
+
+        if options[:all]
+          @components_to_install = AVAILABLE_COMPONENTS
+        else
+          validate_requested_components
+          @components_to_install = components
+        end
+      end
+
+      def display_installation_plan
+        say ""
+        say "Installing #{@components_to_install.length} component(s):", :green
+        @components_to_install.each { |c| say "  - #{c}" }
+        say ""
+      end
+
+      def install_components
+        @components_to_install.each do |component|
+          install_component(component)
+        end
+      end
+
+      def display_usage_examples
+        say ""
+        say "=" * 60, :green
+        say "  Components installed successfully!", :green
+        say "=" * 60, :green
+        say ""
+        say "Example usage:", :yellow
+
+        @components_to_install.first(3).each do |component|
+          display_component_example(component)
+        end
+
+        say ""
+      end
+
+      private
+
+      def display_available_components
+        say ""
+        say "Available shadcn-rails components:", :green
+        say ""
+        AVAILABLE_COMPONENTS.each { |c| say "  - #{c}" }
+        say ""
+        say "Usage: rails generate shadcn:component button card dialog"
+        say "       rails generate shadcn:component --all"
+        say ""
+      end
+
+      def validate_requested_components
+        if components.empty?
+          say "Error: Please specify at least one component or use --all", :red
+          say ""
+          display_available_components
+          exit 1
+        end
+
+        invalid = components - AVAILABLE_COMPONENTS
+        if invalid.any?
+          say "Error: Unknown component(s): #{invalid.join(', ')}", :red
+          say ""
+          display_available_components
+          exit 1
+        end
+      end
+
+      def install_component(name)
+        # Components are already available from the gem
+        # This generator just confirms installation and provides usage info
+        say "  ✓ #{name.titleize}Component is available", :green
+      end
+
+      def display_component_example(component)
+        case component
+        when "button"
+          say <<~EXAMPLE
+
+            Button:
+              <%= render Shadcn::ButtonComponent.new(variant: :primary) do %>
+                Click me
+              <% end %>
+          EXAMPLE
+        when "card"
+          say <<~EXAMPLE
+
+            Card:
+              <%= render Shadcn::CardComponent.new do |card| %>
+                <% card.with_header do %>
+                  <% card.with_title { "Card Title" } %>
+                <% end %>
+                <% card.with_content { "Card content" } %>
+              <% end %>
+          EXAMPLE
+        when "dialog"
+          say <<~EXAMPLE
+
+            Dialog:
+              <%= render Shadcn::DialogComponent.new do |dialog| %>
+                <% dialog.with_trigger do %>
+                  <%= render Shadcn::ButtonComponent.new { "Open" } %>
+                <% end %>
+                <% dialog.with_content do |content| %>
+                  <% content.with_title { "Dialog Title" } %>
+                  Dialog content here
+                <% end %>
+              <% end %>
+          EXAMPLE
+        when "input"
+          say <<~EXAMPLE
+
+            Input:
+              <%= render Shadcn::LabelComponent.new(for: "email") { "Email" } %>
+              <%= render Shadcn::InputComponent.new(
+                type: "email",
+                id: "email",
+                name: "email",
+                placeholder: "Enter your email"
+              ) %>
+          EXAMPLE
+        else
+          say <<~EXAMPLE
+
+            #{component.titleize}:
+              <%= render Shadcn::#{component.camelize}Component.new do %>
+                Content here
+              <% end %>
+          EXAMPLE
+        end
+      end
+    end
+  end
+end