shadcn-ui 0.0.2 → 0.0.4

data/app/views/examples/components/tooltip.html.erb

@@ -2,22 +2,25 @@
       description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_tooltip do %>
-    <%= tooltip_trigger do %>
-      <%= render_button "Hover", variant: :outline %>
-    <% end %>
-    <%= tooltip_content do %>
-      <div class="grid gap-2">
-        <div class="space-y-2">
-          <p class="text-sm text-muted-foreground">More will be revealed.</p>
-        </div>
-      </div>
-    <% end %>
-  <% end %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('tooltip') %>
+</div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+<div class="w-full flex justify-center">
+  <%= code_partial("tooltip/preview", :erb) %>
+</div>
 <% end %>
 
 <%= render_preview %>
+
+<h2 class="font-heading scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="installation">Installation</h2>
+<%= code_sample(language: "sh") do %>
+  rails generate shadcn-ui tooltip
+<% end %>
+
+<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage">Usage</h2>
+<%= code_partial("tooltip/usage", :erb) %>
+
+<%= render_usage("tooltip") %>

data/app/views/layouts/shared/_components.html.erb

@@ -7,53 +7,56 @@
         <div class="grid grid-flow-row auto-rows-max text-sm">
           <%= sidebar_link "Introduction", documentation_index_path %>
           <%= sidebar_link "Installation", documentation_path("installation") %>
+          <%= sidebar_link "Generators", documentation_path("generators") %>
+          <%= sidebar_link "Helpers", documentation_path("helpers") %>
+          <%= sidebar_link "Stimulus", documentation_path("Javascript") %>
           <%= sidebar_link "About", documentation_path("about") %>
         </div>
       </div>
       <div class="pb-4">
         <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Components</h4>
         <div class="grid grid-flow-row auto-rows-max text-sm">
-          <%= sidebar_link "✅ Accordion", "/docs/components/accordion" %>
-          <%= sidebar_link "✅ Alert", "/docs/components/alert" %>
-          <%= sidebar_link "✅ Alert Dialog", "/docs/components/alert-dialog" %>
-          <%= sidebar_link "❌ Aspect Ratio", "/docs/components/aspect-ratio" %>
-          <%= sidebar_link "❌ Avatar", "/docs/components/avatar" %>
-          <%= sidebar_link "✅ Badge", "/docs/components/badge" %>
-          <%= sidebar_link "✅ Button", "/docs/components/button" %>
-          <%= sidebar_link "❌ Calendar", "/docs/components/calendar" %>
-          <%= sidebar_link "✅ Card", "/docs/components/card" %>
-          <%= sidebar_link "✅ Checkbox", "/docs/components/checkbox" %>
-          <%= sidebar_link "✅ Collapsible", "/docs/components/collapsible" %>
-          <%= sidebar_link "Combobox", "/docs/components/combobox" %>
-          <%= sidebar_link "Command", "/docs/components/command" %>
-          <%= sidebar_link "Context Menu", "/docs/components/context-menu" %>
-          <%= sidebar_link "Data Table", "/docs/components/data-table" %>
-          <%= sidebar_link "Date Picker", "/docs/components/date-picker" %>
-          <%= sidebar_link "✅ Dialog", "/docs/components/dialog" %>
-          <%= sidebar_link "Dropdown Menu", "/docs/components/dropdown-menu" %>
-          <%= sidebar_link "➕ Filter", "/docs/components/filter" %>
-          <%= sidebar_link "Form", "/docs/components/form" %>
-          <%= sidebar_link "✅ Hover Card", "/docs/components/hover-card" %>
-          <%= sidebar_link "✅ Input", "/docs/components/input" %>
-          <%= sidebar_link "✅ Label", "/docs/components/label" %>
-          <%= sidebar_link "Menubar", "/docs/components/menubar" %>
-          <%= sidebar_link "Navigation Menu", "/docs/components/navigation-menu" %>
-          <%= sidebar_link "✅ Popover", "/docs/components/popover" %>
-          <%= sidebar_link "✅ Progress", "/docs/components/progress" %>
-          <%= sidebar_link "Radio Group", "/docs/components/radio-group" %>
-          <%= sidebar_link "Scroll Area", "/docs/components/scroll-area" %>
-          <%= sidebar_link "Select", "/docs/components/select" %>
-          <%= sidebar_link "✅ Separator", "/docs/components/separator" %>
-          <%= sidebar_link "✅ Sheet", "/docs/components/sheet" %>
-          <%= sidebar_link "✅ Skeleton", "/docs/components/skeleton" %>
-          <%= sidebar_link "✅ Slider", "/docs/components/slider" %>
-          <%= sidebar_link "Switch", "/docs/components/switch" %>
-          <%= sidebar_link "Table", "/docs/components/table" %>
-          <%= sidebar_link "Tabs", "/docs/components/tabs" %>
-          <%= sidebar_link "✅ Textarea", "/docs/components/textarea" %>
-          <%= sidebar_link "✅ Toast", "/docs/components/toast" %>
-          <%= sidebar_link "✅ Toggle", "/docs/components/toggle" %>
-          <%= sidebar_link "✅ Tooltip", "/docs/components/tooltip" %>
+          <%= sidebar_link "✅ 📖 Accordion", "/docs/components/accordion" %>
+          <%= sidebar_link "✅ 📖 Alert", "/docs/components/alert" %>
+          <%#= sidebar_link "✅ Alert Dialog", "/docs/components/alert-dialog" %>
+          <%#= sidebar_link "❌ Aspect Ratio", "/docs/components/aspect-ratio" %>
+          <%#= sidebar_link "❌ Avatar", "/docs/components/avatar" %>
+          <%= sidebar_link "✅ 📖 Badge", "/docs/components/badge" %>
+          <%= sidebar_link "✅ 📖 Button", "/docs/components/button" %>
+          <%#= sidebar_link "❌ Calendar", "/docs/components/calendar" %>
+          <%= sidebar_link "✅ 📖 Card", "/docs/components/card" %>
+          <%= sidebar_link "✅ 📖 Checkbox", "/docs/components/checkbox" %>
+          <%= sidebar_link "✅ 📖 Collapsible", "/docs/components/collapsible" %>
+          <%#= sidebar_link "Combobox", "/docs/components/combobox" %>
+          <%#= sidebar_link "Command", "/docs/components/command" %>
+          <%#= sidebar_link "Context Menu", "/docs/components/context-menu" %>
+          <%#= sidebar_link "Data Table", "/docs/components/data-table" %>
+          <%#= sidebar_link "Date Picker", "/docs/components/date-picker" %>
+          <%= sidebar_link "✅ 📖 Dialog", "/docs/components/dialog" %>
+          <%= sidebar_link "✅ 📖 Dropdown Menu", "/docs/components/dropdown-menu" %>
+          <%= sidebar_link "➕ 📖 Filter", "/docs/components/filter" %>
+          <%#= sidebar_link "Form", "/docs/components/form" %>
+          <%= sidebar_link "✅ 📖 Hover Card", "/docs/components/hover-card" %>
+          <%= sidebar_link "✅ 📖 Input", "/docs/components/input" %>
+          <%= sidebar_link "✅ 📖 Label", "/docs/components/label" %>
+          <%#= sidebar_link "Menubar", "/docs/components/menubar" %>
+          <%#= sidebar_link "Navigation Menu", "/docs/components/navigation-menu" %>
+          <%= sidebar_link "✅ 📖 Popover", "/docs/components/popover" %>
+          <%= sidebar_link "✅ 📖 Progress", "/docs/components/progress" %>
+          <%#= sidebar_link "Radio Group", "/docs/components/radio-group" %>
+          <%#= sidebar_link "Scroll Area", "/docs/components/scroll-area" %>
+          <%#= sidebar_link "Select", "/docs/components/select" %>
+          <%= sidebar_link "✅ 📖 Separator", "/docs/components/separator" %>
+          <%= sidebar_link "✅ 📖 Sheet", "/docs/components/sheet" %>
+          <%= sidebar_link "✅ 📖 Skeleton", "/docs/components/skeleton" %>
+          <%= sidebar_link "✅ 📖 Slider", "/docs/components/slider" %>
+          <%#= sidebar_link "Switch", "/docs/components/switch" %>
+          <%#= sidebar_link "Table", "/docs/components/table" %>
+          <%#= sidebar_link "Tabs", "/docs/components/tabs" %>
+          <%= sidebar_link "✅ 📖 Textarea", "/docs/components/textarea" %>
+          <%= sidebar_link "✅ 📖 Toast", "/docs/components/toast" %>
+          <%= sidebar_link "✅ 📖 Toggle", "/docs/components/toggle" %>
+          <%= sidebar_link "✅ 📖 Tooltip", "/docs/components/tooltip" %>
         </div>
       </div>
     </div>

data/config/environments/production.rb

@@ -13,7 +13,7 @@ Rails.application.configure do
   config.eager_load = true
 
   # Full error reports are disabled and caching is turned on.
-  config.consider_all_requests_local       = false
+  config.consider_all_requests_local = false
   config.action_controller.perform_caching = true
 
   # Ensures that a master key has been made available in either ENV["RAILS_MASTER_KEY"]
@@ -53,7 +53,7 @@ Rails.application.configure do
   config.log_level = :info
 
   # Prepend all log lines with the following tags.
-  config.log_tags = [ :request_id ]
+  config.log_tags = [:request_id]
 
   # Use a different cache store in production.
   # config.cache_store = :mem_cache_store
@@ -83,9 +83,9 @@ Rails.application.configure do
   # config.logger = ActiveSupport::TaggedLogging.new(Syslog::Logger.new "app-name")
 
   if ENV["RAILS_LOG_TO_STDOUT"].present?
-    logger           = ActiveSupport::Logger.new(STDOUT)
+    logger = ActiveSupport::Logger.new(STDOUT)
     logger.formatter = config.log_formatter
-    config.logger    = ActiveSupport::TaggedLogging.new(logger)
+    config.logger = ActiveSupport::TaggedLogging.new(logger)
   end
 
   # Do not dump schema after migrations.

data/config/shadcn.tailwind.js

@@ -0,0 +1,98 @@
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./public/*.html",
+    "./app/helpers/**/*.rb",
+    "./app/javascript/**/*.js",
+    "./app/views/**/*.{erb,haml,html,slim}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
+        },
+        attention: {
+          DEFAULT: "var(--yellow-50)",
+          foreground: "hsl(var(--attention-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/container-queries"),
+    require("tailwindcss-animate"),
+  ],
+};

data/config/tailwind.config.js

@@ -1,86 +1,25 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
+const shadcnConfig = require("./shadcn.tailwind.js");
 
 module.exports = {
-  darkMode: ["class"],
-  content: [
-    "./public/*.html",
-    "./app/helpers/**/*.rb",
-    "./app/javascript/**/*.js",
-    "./app/views/**/*.{erb,haml,html,slim}",
-  ],
+  ...shadcnConfig,
   theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
     extend: {
       colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
+        ...shadcnConfig.theme.extend.colors,
+        pink: "hsl(var(--pink))",
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
         },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))",
         },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
+        attention: {
+          DEFAULT: "hsl(var(--attention))",
+          foreground: "hsl(var(--attention-foreground))",
         },
       },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
     },
   },
-  plugins: [
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/aspect-ratio"),
-    require("@tailwindcss/typography"),
-    require("@tailwindcss/container-queries"),
-    require("tailwindcss-animate"),
-  ],
 };

data/lib/components.json

@@ -102,9 +102,13 @@
     "name": "dropdown-menu",
     "type": "components:ui",
     "files": [
-      "app/helpers/components/dropdown-menu_helper.rb",
-      "app/views/components/ui/_dropdown-menu.html.erb",
-      "app/javascript/controllers/ui/dropdown-menu_controller.js"
+      "app/helpers/components/dropdown_menu_helper.rb",
+      "app/views/components/ui/_dropdown_menu.html.erb",
+      "app/javascript/controllers/ui/dropdown_controller.js"
+    ],
+    "dependencies": [
+      { "component": "popover" },
+      "app/views/components/ui/shared/_menu_item.html.erb"
     ]
   },
   "hover-card": {

data/lib/generators/shadcn-ui_generator.rb

@@ -0,0 +1,201 @@
+require "json"
+require "rails/generators/base"
+
+class ShadcnUiGenerator < Rails::Generators::Base
+  namespace "shadcn-ui"
+
+  attr_reader :component_name, :target_rails_root, :options
+
+  argument :component, required: false, desc: "The name of the component to install"
+  argument :rails_root, required: false, desc: "Path to the Rails root directory"
+
+  def self.banner
+    "rails generate shadcn-ui <component_name> [--remove] [rails_root_path]"
+  end
+
+  def initialize(args, *options)
+    super
+    @component_name = component
+    @target_rails_root = rails_root || Rails.root
+    @options = options.first
+  end
+
+  def preprocess_sources
+    check_target_app
+  end
+
+  def install_component
+    if component_valid?
+      copy_files
+    else
+      display_available_components
+    end
+  end
+
+  private
+
+  def check_target_app
+    puts "Checking for tailwind..."
+    puts "...tailwind found." if check_for_tailwind
+
+    puts "Checking for shadcn.css..."
+    check_for_shadcn_css
+
+    puts "Checking for shadcn import..."
+    check_for_shadcn_css_import
+
+    puts "Checking for shadcn.tailwind.js..."
+    check_for_shadcn_tailwind_js
+
+    puts "Checking for component_helper.rb"
+    check_for_component_helper
+  end
+
+  def available_components
+    if !@available_components
+      gem_lib_path = File.expand_path("../../lib", __dir__)
+      components_file = File.read(File.join(gem_lib_path, "components.json"))
+      @available_components = JSON.parse(components_file)
+    else
+      @available_components
+    end
+  end
+
+  def display_available_components
+    puts self.class.banner
+    puts "\nAvailable components:"
+
+    available_components.each do |component, _|
+      description = "# A #{component} component"
+      banner_line = "rails g shadcn_ui #{component}:install #{" " * (20 - component.length)} #{description}"
+      puts banner_line
+    end
+  end
+
+  def copy_files
+    return unless component_valid?
+    puts "Installing #{component_name} component..."
+
+    install_component_files(component_name)
+    component_data["dependencies"]&.each do |dependency|
+      if dependency.is_a?(String)
+        copy_file(dependency)
+      elsif dependency.is_a?(Hash)
+        install_component_files(dependency["component"])
+      end
+    end
+    puts "#{component_name.capitalize} component installed!"
+  end
+
+  def install_component_files(key)
+    return unless component_valid?(key)
+
+    available_components[key]["files"].each do |file|
+      copy_file(file)
+    end
+  end
+
+  def copy_file(file)
+    source_path = File.expand_path(File.join("../../", file), __dir__)
+    destination_path = File.expand_path(File.join(target_rails_root, file))
+    if File.exist?(source_path)
+      FileUtils.mkdir_p(File.dirname(destination_path))
+      puts "...copying #{file}"
+      FileUtils.cp(source_path, destination_path)
+    end
+  end
+
+  def component_data(name = nil)
+    @component_data ||= available_components[component_name]
+  end
+
+  def component_valid?(name = nil)
+    name ||= component_name
+    name.present? && available_components.key?(name) && component_data
+  end
+
+  def check_for_tailwind
+    tailwind_file_path = File.join(target_rails_root, "app/assets/stylesheets/application.tailwind.css")
+
+    if File.exist?(tailwind_file_path)
+      true
+    else
+      abort "shadcn-ui requires Tailwind CSS. Please include tailwindcss-rails in your Gemfile and run `rails g tailwind:install` to install Tailwind CSS."
+    end
+  end
+
+  def check_for_shadcn_css
+    shadcn_file_path = "app/assets/stylesheets/shadcn.css"
+    if File.exist?(File.expand_path(File.join(target_rails_root, shadcn_file_path)))
+      puts "...found shadcn.css"
+      true
+    else
+      source_path = File.expand_path(File.join("../../", shadcn_file_path), __dir__)
+      destination_path = File.expand_path(File.join(target_rails_root, shadcn_file_path))
+      puts "...copying shadcn.css to app/assets/stylesheets/shadcn.css"
+      FileUtils.cp(source_path, destination_path)
+    end
+  end
+
+  def check_for_shadcn_css_import
+    tailwind_file_path = File.join(target_rails_root, "app/assets/stylesheets/application.tailwind.css")
+
+    if File.file?(tailwind_file_path)
+      matched_file = File.readlines(tailwind_file_path).any? { |s| s.include?("shadcn.css") }
+      if !matched_file
+        puts "Importing shadcn.css into application.tailwind.css..."
+        insert_import_first_line(tailwind_file_path, "@import \"shadcn.css\";")
+      end
+    else
+      puts "application.tailwind.css does not exist."
+    end
+  end
+
+  def insert_import_line(file_path, line)
+    file_contents = File.read(file_path)
+    new_contents = file_contents.gsub(/@tailwind\s+utilities;/, "\\0\n#{line}\n")
+    File.write(file_path, new_contents)
+  end
+
+  def insert_import_first_line(file_path, line)
+    file_contents = File.read(file_path)
+    new_contents = "#{line}\n#{file_contents}"
+    File.write(file_path, new_contents)
+  end
+
+  def check_for_shadcn_tailwind_js
+    shadcn_tailwind_path = "config/shadcn.tailwind.js"
+    if File.exist?(File.expand_path(File.join(target_rails_root, shadcn_tailwind_path)))
+      puts "...found shadcn.tailwind.js"
+      true
+    else
+      source_path = File.expand_path(File.join("../../", shadcn_tailwind_path), __dir__)
+      destination_path = File.expand_path(File.join(target_rails_root, shadcn_tailwind_path))
+      puts "...copying shadcn.tailwind.js to config/shadcn.tailwind.js"
+      puts "Make sure to include shadcn.tailwind.js in your tailwind.config.js"
+      puts "const shadcnConfig = require('./shadcn.tailwind.js');"
+      puts "module.exports = {
+  ...shadcnConfig,
+};"
+
+      FileUtils.cp(source_path, destination_path)
+    end
+  end
+
+  def check_for_component_helper
+    component_helper_path = "app/helpers/components_helper.rb"
+    if File.exist?(File.expand_path(File.join(target_rails_root, component_helper_path)))
+      puts "...found components_helper.rb"
+      true
+    else
+      source_path = File.expand_path(File.join("../../", component_helper_path), __dir__)
+      destination_path = File.expand_path(File.join(target_rails_root, component_helper_path))
+      puts "...copying components_helper.rb app/helpers"
+
+      FileUtils.cp(source_path, destination_path)
+    end
+  end
+end
+
+# Two things - you need the helper helpers
+# you have to put @import on the 3rd line after the tailwind directives? Is that possible? It's because of border-border...worse case you can just use the actual styles

data/lib/shadcn-ui/version.rb

@@ -1,3 +1,3 @@
 module ShadcnUi
-  VERSION = "0.0.2"
+  VERSION = "0.0.4"
 end