shadcn-ui 0.0.8 → 0.0.12

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d1a6d106b3e241c5c7a418478bde0b7c4e4e50ce27c0999a1963d7a40b543dd2
-  data.tar.gz: 47a2ff41f7186f01c3cdef384b2b602b39868fbd9f2c2f15f7a3d8c2e0d3a72c
+  metadata.gz: d36b644105b526361e08e906fb9404b89f4099f4f860afdc229bebe36a4b1996
+  data.tar.gz: ad0edad68914c4d1eee78f8b468b5f28cbead6ebd22fbd58f174ef7b5f00d77a
 SHA512:
-  metadata.gz: 0b040f697a8b80b085a5d4a595bb20ed7b78b9f26d90082831977feb7acb80389787c8b23983f2094cde67212f5bf0a682f206c79171231d5b023ca22e11716e
-  data.tar.gz: 1e44cfd6682738fc2df66f886ba9d2c6de2b044c6828f43ff9e2b67aef0f37f62a01087f78bd4158911083eee8cb45ef59f18ad64e0044d824b7b6075ccb6966
+  metadata.gz: d2d42f118d6048f572eab0597f8958be014e653ae2a0d020843308c96b2be4777798e91d54b648333caf67f516494b480edf7993639b64fbdaf5661ceb4389b6
+  data.tar.gz: cd3967406dcf715fd6604bf25f20e2e7f1c719feefa27b239f982be71ecc811118f74fd7351d59f230f6a0e8269a1be378b9760ee6ebb82fb6f8d6609503eee8

data/app/{form_builders/shadcn_form_builder.rb → components/shadcn/form_builder.rb}

@@ -1,12 +1,13 @@
-class ShadcnFormBuilder < ActionView::Helpers::FormBuilder
+class Shadcn::FormBuilder < ActionView::Helpers::FormBuilder
   def label(method, options = {})
     error_class = @object.errors[method].any? ? "error" : ""
     options[:class] = @template.tw("#{options[:class]} #{error_class}")
-    @template.render_label(name: "#{object_name}[#{method}]", label: method.capitalize, **options)
+    @template.render_label(name: "#{object_name}[#{method}]", label: label_for(@object, method), **options)
   end
 
   def text_field(method, options = {})
-    options[:class] << " error" if @object.errors[method].any?
+    error_class = @object.errors[method].any? ? "error" : ""
+    options[:class] = @template.tw("#{options[:class]} #{error_class}")
     @template.render_input(
       name: "#{object_name}[#{method}]",
       id: "#{object_name}_#{method}",
@@ -40,4 +41,11 @@ class ShadcnFormBuilder < ActionView::Helpers::FormBuilder
   def submit(value = nil, options = {})
     @template.render_button(value, **options)
   end
+
+  private
+
+  def label_for(object, method)
+    return method.capitalize if object.nil?
+    object.class.human_attribute_name(method)
+  end
 end

data/app/components/shadcn/select_component.rb

@@ -0,0 +1,23 @@
+class Shadcn::SelectComponent
+  include ComponentsHelper
+  attr_reader :name, :selected, :view_context
+
+  def initialize(name:, view_context:, selected: nil, **options, &block)
+    @name = name
+    @view_context = view_context
+    @selected = selected
+    @options = options
+    @content = view_context.capture(self, &block) if block
+  end
+
+  def option(value:, label: nil, &block)
+    content = label || view_context.capture(&block)
+    option_options = {value: value}
+    option_options[:selected] = "selected" if value == selected
+    view_context.content_tag :option, content, option_options
+  end
+
+  def call
+    view_context.content_tag :select, @content, name: name, class: tw("rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", @options[:class])
+  end
+end

data/app/helpers/components/alert_helper.rb

@@ -1,5 +1,5 @@
 module Components::AlertHelper
-  def render_alert(title:, description: nil, variant: :default, icon: true)
+  def render_alert(title:, description: nil, variant: :default, icon: true, &block)
     alert_classes = case variant.to_sym
     when :default
       "[&>svg]:text-foreground bg-background text-foreground"
@@ -12,6 +12,7 @@ module Components::AlertHelper
     when :attention
       "border-attention/50 text-attention dark:border-attention [&>svg]:text-attention"
     end
-    render "components/ui/alert", title:, description:, alert_classes:, variant:, icon:
+    content = (capture(&block) if block) || description
+    render "components/ui/alert", title:, content:, alert_classes:, variant:, icon:
   end
 end

data/app/helpers/components/button_helper.rb

@@ -14,6 +14,7 @@ module Components::ButtonHelper
       " hover:bg-accent hover:text-accent-foreground  "
     end
     button_classes << " #{varianet_classes} #{options[:class]}"
+    button_classes = tw(button_classes)
     text = label if label.present?
     text = capture(&block) if block
     render "components/ui/button", text:, button_classes:, as:, href:, data:, **options

data/app/helpers/components/dropzone_helper.rb

@@ -0,0 +1,5 @@
+module Components::DropzoneHelper
+  def render_dropzone
+    render "components/ui/dropzone"
+  end
+end

data/app/helpers/components/forms_helper.rb

@@ -1,12 +1,12 @@
 module Components::FormsHelper
   def render_form_with(**opts)
-    form_with(**opts.merge(builder: ShadcnFormBuilder)) do |form|
+    form_with(**opts.merge(builder: Shadcn::FormBuilder)) do |form|
       yield form
     end
   end
 
   def render_form_for(obj, **opts)
-    form_for(obj, **opts.merge(builder: ShadcnFormBuilder), html: opts) do |form|
+    form_for(obj, **opts.merge(builder: Shadcn::FormBuilder), html: opts) do |form|
       yield form
     end
   end

data/app/helpers/components/select_helper.rb

@@ -0,0 +1,6 @@
+module Components::SelectHelper
+  def render_select(name:, **options, &block)
+    component = Shadcn::SelectComponent.new(name: name, view_context: self, **options, &block)
+    component.call
+  end
+end

data/app/helpers/components/sheet_helper.rb

@@ -2,6 +2,7 @@ module Components::SheetHelper
   def render_sheet(**options, &block)
     options[:direction] ||= "left"
     options[:width] ||= "w-3/4"
+    options[:state] ||= "closed"
 
     content_for :sheet_trigger, "", flush: true
     content_for :sheet_content, "", flush: true
@@ -20,8 +21,8 @@ module Components::SheetHelper
 
   def direction_class(direction)
     mappings = {
-      "left": 'left-0',
-      "right": 'right-0'
+      left: "left-0",
+      right: "right-0"
     }
 
     mappings[direction.to_sym]

data/app/helpers/components/table_helper.rb

@@ -0,0 +1,61 @@
+module Components::TableHelper
+  def render_table(caption = nil, **options, &block)
+    content_tag :table, options.reverse_merge(
+      class: tw("w-full text-sm border-b", options[:class])
+    ) do
+      if caption.present?
+        content_tag :caption, caption, class: "mt-4 text-sm text-muted-foreground " do
+          capture(&block)
+        end
+      else
+        capture(&block)
+      end
+    end
+  end
+
+  def table_head(**options, &block)
+    content_tag :thead, options.reverse_merge(
+      class: tw("[&_tr]:border-b", options[:class])
+    ) do
+      content_tag :tr, class: "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted" do
+        capture(&block)
+      end
+    end
+  end
+
+  def table_header(content = nil, **options, &block)
+    content_tag :th, options.reverse_merge(
+      class: tw("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", options[:class])
+    ) do
+      if block
+        capture(&block)
+      else
+        content
+      end
+    end
+  end
+
+  def table_body(**options, &block)
+    content_tag :tbody, class: options.reverse_merge(
+      class: tw("[&_tr:last-child]:border-0", options[:class])
+    ), &block
+  end
+
+  def table_row(**options, &block)
+    content_tag :tr, options.reverse_merge(
+      class: tw("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", options[:class])
+    ), &block
+  end
+
+  def table_column(content = nil, **options, &block)
+    content_tag :td, options.reverse_merge(
+      class: tw("p-4 align-middle [&:has([role=checkbox])]:pr-0 font-medium", options[:class])
+    ) do
+      if block
+        capture(&block)
+      else
+        content
+      end
+    end
+  end
+end

data/app/helpers/components_helper.rb

@@ -1,8 +1,8 @@
 require "tailwind_merge"
 
 module ComponentsHelper
-  def tw(classes)
-    TailwindMerge::Merger.new.merge(classes)
+  def tw(*classes)
+    TailwindMerge::Merger.new.merge(classes.join(" "))
   end
 
   PRIMARY_CLASSES = " bg-primary text-primary-foreground hover:bg-primary/80 "

data/app/javascript/controllers/ui/dropzone_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["fileInput"];
+  connect() {
+    this.element.addEventListener("dragover", this.preventDragDefaults);
+    this.element.addEventListener("dragenter", this.preventDragDefaults);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("dragover", this.preventDragDefaults);
+    this.element.removeEventListener("dragenter", this.preventDragDefaults);
+  }
+
+  preventDragDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  trigger() {
+    this.fileInputTarget.click();
+  }
+
+  acceptFiles(event) {
+    event.preventDefault();
+    const files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+    [...files].forEach((file) => {
+      this.uploadFile(file);
+    });
+  }
+
+  // Implement your own file upload strategy here...
+  uploadFile(file) {
+    console.log("Received file for upload: ", file);
+    console.log("Implement your own file upload strategy here...");
+    //   const formData = new FormData();
+    //   formData.append("file", file);
+
+    //   fetch("/upload", {
+    //     method: "POST",
+    //     body: formData,
+    //   })
+    //     .then((response) => response.json())
+    //     .then((data) => {
+    //       console.log(data);
+    //     });
+  }
+}

data/app/views/components/ui/_alert.html.erb

@@ -61,7 +61,7 @@
       y1="16"
       y2="16"></line>
   </svg>
-  <% end if icon %>
-  <h5 class="mb-1 font-medium leading-none tracking-tight"><%= title %></h5>
-  <div class="text-sm [&_p]:leading-relaxed"><%= description %></div>
+<% end if icon %>
+<h5 class="mb-1 font-medium leading-none tracking-tight"><%= title %></h5>
+<div class="text-sm [&_p]:leading-relaxed"><%= content %></div>
 </div>

data/app/views/components/ui/_dropzone.html.erb

@@ -0,0 +1,12 @@
+<div class="w-full">
+  <div class="p-6">
+    <div id="dropzone" data-controller="ui--dropzone" data-action="click->ui--dropzone#trigger drop->ui--dropzone#acceptFiles">
+      <button
+        class="w-full rounded-lg bg-muted border-2 border-dashed border-gray-300 p-8 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto h-12 w-12 text-gray-400"><path d="M15.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V6.5L15.5 2z" /><path d="M3 7.6v12.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h9.8" /><path d="M15 2v5h5" /></svg>
+        <span class="mt-2 block text-sm font-semibold text-muted-foreground dark:text-white">Drag Files to Upload or Click Here</span>
+      </button>
+      <input type="file" class="hidden" multiple data-ui--dropzone-target="fileInput" data-action="change->ui--dropzone#acceptFiles">
+    </div>
+  </div>
+</div>

data/app/views/components/ui/_sheet.html.erb

@@ -5,12 +5,17 @@
 
   <div
     role="dialog"
-    data-state="closed"
+    data-state="<%= options[:state]%>"
     data-ui--sheet-target="dialog"
-    class="data-[state=closed]:hidden data-[state=open]:block fixed z-50 gap-4 bg-background p-6 shadow-lg
-        transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500
-        inset-y-0 <%= direction_class(options[:direction]) %> h-full <%= options[:width] %> border-l data-[state=closed]:slide-out-to-<%= options[:direction] %> data-[state=open]:slide-in-from-<%= options[:direction] %> sm:max-w-sm" tabindex="-1"
-    style="pointer-events: auto">
+    class="<%= tw("data-[state=closed]:hidden data-[state=open]:block fixed z-50 gap-4 bg-background p-6 shadow-lg
+                  transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300
+                  data-[state=open]:duration-500 inset-y-0 h-full border-l sm:max-w-sm",
+                  "data-[state=closed]:slide-out-to-#{options[:direction]}
+                  data-[state=open]:slide-in-from-#{options[:direction]}",
+                  direction_class(options[:direction]), options[:width],
+                  options[:class]) %>"
+        tabindex="-1"
+        style="pointer-events: auto">
       <div data-ui--sheet-target="content"><%= content_for(:sheet_content) %></div>
       <button
         data-ui--sheet-target="closeButton"

data/app/views/documentation/index.html.md

@@ -34,4 +34,4 @@ needs without any unnecessary abstraction.
 
 The gem provides a generator for you to use in your application to facilitate copying the code from
 this application to yours. It also enforces some setup for you as the component files alone in
-isolation won't always work. [Learn more about the generator](/documentation/generators).
+isolation won't always work. [Learn more about the generator](/docs/generators).

data/app/views/documentation/installation.html.md

@@ -117,7 +117,7 @@ by being at the end. And obviously feel free to inspect shadcnConfig and keep on
 ## End
 
 That's it! You are now set to start
-[installing components via the generator]("/documentation/generators") and rendering them into your
+[installing components via the generator](/docs/generators) and rendering them into your
 views.
 
 # Manual Installation

data/app/views/examples/components/accordion/code/_usage.erb

@@ -1,5 +1,5 @@
 # Inline
-<%= render_accordion(title:, :description) %>
+<%= render_accordion(title:, description:) %>
 
 # Description Block
 <%= render_accordion(title:) do %>

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

@@ -17,7 +17,7 @@
 <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 accodordion
+rails generate shadcn-ui accordion
 <% 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"><a href="/docs/components/dialog#usage">Usage</a></h2>

data/app/views/examples/components/card/code/_usage.erb

@@ -1,3 +1,3 @@
-<%= render_card(title: nil, subtitle: nil, body: nil, footer: nil:) do %>
+<%= render_card(title: nil, subtitle: nil, body: nil, footer: nil) do %>
   <!-- Optional Body Block -->
 <% end %>

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

@@ -16,7 +16,7 @@
 <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 dialog
+rails generate shadcn-ui dialog
 <% 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"><a href="/docs/components/dialog#usage">Usage</a></h2>

data/app/views/examples/components/dropzone/_usage.html.erb

@@ -0,0 +1,20 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Dropzone component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/dropzone_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_dropzone.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/dropzone_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  The method <%= code("render_dropzone") %> defined in <%= code("app/helpers/components/dropzone_helper.rb") %> will render the dropzone widget that is bound to the Stimulus controller.
+  Upon triggering the file dialog or dragging and dropping files, the controller will delegate the files individually to a function, <%= code("uploadFile") %>. It is up to you to define what to do when a a file is to be uploaded.
+<p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+To implement fully, edit the <%= code("uploadFile") %> function in <%= code("app/javascript/controllers/ui/dropzone_controller.js") %>. This function is called for each file that is to be uploaded. The function is passed the file object.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+If you try the example component, you will see that it is logging the file object to the console.
+</p>

data/app/views/examples/components/dropzone/code/_preview.erb

@@ -0,0 +1 @@
+<%= render_dropzone %>

data/app/views/examples/components/dropzone/code/_usage.erb

@@ -0,0 +1 @@
+<%= render_dropzone %>

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

@@ -0,0 +1,27 @@
+<%= render "layouts/documentation/component_header",
+  title: "Dropzone",
+  description: "A dropzone component that accepts multiple files via drag and drop." %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('dropzone') %>
+</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= code_partial("dropzone/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 dropzone
+<% 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("dropzone/usage", :erb) %>
+
+<%= render_usage("dropzone") %>

data/app/views/examples/components/forms/_usage.html.erb

@@ -1,12 +1,12 @@
 <p class="leading-7 [&:not(:first-child)]:mt-6">The Forms component introduces:</p>
 
 <ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
-  <li><%= code("app/form_builders/shadcn_form_builder.rb") %></li>
+  <li><%= code("app/components/shadcn/form_builder.rb") %></li>
   <li><%= code("app/helpers/components/forms_helper.rb") %></li>
 </ul>
 
 <p class="leading-7 [&:not(:first-child)]:mt-6">
-  The <code>ShadcnFormBuilder</code> is a custom form builder that extends the
+  The <code>Shadcn::FormBuilder</code> is a custom form builder that extends the
   <code>FormBuilder</code> class. It adds the following methods that provide the form with inputs and controls:
 <p>
 

data/app/views/examples/components/select/_usage.html.erb

@@ -0,0 +1,22 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Select component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/select_helper.rb") %></li>
+  <li><%= code("app/components/shadcn/select_component.rb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  The select component is implemented as a component object defined in <%= code("app/components/shadcn/select_component.rb") %>.
+  This ruby class is initialized from the helper defined in <%= code("app/helpers/components/select_helper.rb") %>, <%= code "render_select" %>.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  The <%= code("render_select") %> method accepts a <%= code("name") %> keyword argument for the name of the form field.
+  An optional argument of <%= code "selected" %> can contain the value of the option to be selected by default.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  <%= code("render_select") %> yields an instance of the <%= code "Shadcn::SelectComponent" %> that can be used to build <%= code "option" %>s for the select.
+  <%= code "option" %> on the component instance accepts a <%= code "label" %> argument for the label text to be displayed for the option whose value will be the <%= code "value" %> on the component instance yields a new option object that accepts a <%= code "label" %> and <%= code "value" %> argument.
+  <%= code "option" %> also accepts a block that can be used to create the label.
+</p>

data/app/views/examples/components/select/code/_preview.erb

@@ -0,0 +1,7 @@
+<%= render_select name: "fruits", selected: "Apple" do |select| %>
+  <%= select.option value: "Banana" do %>
+    Banana
+  <% end %>
+  <%= select.option label: "Apple", value: "Apple" %>
+  <%= select.option label: "Strawberry", value: "Strawberry" %>
+<% end %>

data/app/views/examples/components/select/code/_usage.erb

@@ -0,0 +1,5 @@
+<%= render_select name:, selected:, do |select| %>
+  <%= select.option value: do %>
+  <% end %>
+  <%= select.option label:,  value: %>
+<% end %>

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

@@ -0,0 +1,27 @@
+<%= render "layouts/documentation/component_header",
+  title: "Select",
+  description: "A standard but styled select component." %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('select') %>
+</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= code_partial("select/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 select
+<% 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("select/usage", :erb) %>
+
+<%= render_usage("select") %>

data/app/views/examples/components/table/_usage.html.erb

@@ -0,0 +1,23 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Table component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/table_helper.rb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  The table component is so far unique in that it is entirely provided by <%= code("app/helpers/components/table_helper.rb") %>. This helper introduces methods that rely on <%= code("content_tag") %> to create the markup for the table. To edit anything about the rendered table, look there.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  <%= code("app/helpers/components/table_helper.rb") %> introduces the following methods that can be used to create a table.
+
+  <ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-md">
+    <li><%= code("render_table") %> accepts an optional caption as the first argument along with the block for the rest of the table components.</li>
+    <li><%= code("table_head") %> accepts a block for the content of the <%= code("thead") %> row.</li>
+    <li><%= code("table_header") %> accepts the header content inline or in a block. This will be rendered within the <%= code("thead") %> for that column.</li>
+    <li><%= code("table_body") %> accepts a block for the content of the <%= code("tbody") %>.</li>
+    <li><%= code("table_row") %> accepts a block for the content of the <%= code("tr") %>.</li>
+    <li><%= code("table_column") %> accepts the column content inline or in a block. This will be rendered within the <%= code("td") %> for the column.</li>
+  </ul>
+
+</p>

data/app/views/examples/components/table/code/_preview.erb

@@ -0,0 +1,35 @@
+<% @tracks = [
+  {title: "Total Eclipse of the Heart", artist: "Bonnie Tyler"},
+  {title: "I Will Always Love You", artist: "Whitney Houston"},
+  {title: "I Wanna Dance with Somebody", artist: "Whitney Houston"},
+  {title: "I Will Survive", artist: "Gloria Gaynor"},
+  {title: "My Heart Will Go On", artist: "Celine Dion"},
+] %>
+
+<%= render_table do %>
+  <%= table_head do %>
+    <%= table_header "", class: "w-1" %>
+    <%= table_header class: "" do %>
+      Title
+    <% end %>
+    <%= table_header "Artist" %>
+  <% end %>
+  <%= table_body do %>
+    <% @tracks.each.with_index do |track, i| %>
+      <%= table_row do %>
+        <%= table_column do %>
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round"
+              stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"></circle>
+            <polygon points="10 8 16 12 10 16 10 8"></polygon>
+          </svg>
+        <% end %>
+        <%= table_column do %>
+          <%= track[:title] %>
+        <% end %>
+        <%= table_column track[:artist] %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/examples/components/table/code/_usage.erb

@@ -0,0 +1,12 @@
+<%= render_table do %>
+  <%= table_head do %>
+    <%= table_header %>
+    <%= table_header %>
+  <% end %>
+  <%= table_body do %>
+    <%= table_row do %>
+      <%= table_column %>
+      <%= table_column %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,27 @@
+<%= render "layouts/documentation/component_header",
+  title: "Table",
+  description: "A simple table component for displaying data in rows and columns." %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('table') %>
+</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= code_partial("table/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 table
+<% 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("table/usage", :erb) %>
+
+<%= render_usage("table") %>

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

@@ -9,7 +9,7 @@
           <%= 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 "Stimulus", documentation_path("javascript") %>
           <%= sidebar_link "About", documentation_path("about") %>
         </div>
       </div>
@@ -34,6 +34,7 @@
           <%#= sidebar_link "Date Picker", "/docs/components/date-picker" %>
           <%= sidebar_link "✅ 📖 Dialog", "/docs/components/dialog" %>
           <%= sidebar_link "✅ 📖 Dropdown Menu", "/docs/components/dropdown-menu" %>
+          <%= sidebar_link "✅ 📖 Dropzone", "/docs/components/dropzone" %>
           <%= sidebar_link "✅ 📖 Filter", "/docs/components/filter" %>
           <%= sidebar_link "✅ 📖  Forms", "/docs/components/forms" %>
           <%= sidebar_link "✅ 📖 Hover Card", "/docs/components/hover-card" %>
@@ -45,13 +46,13 @@
           <%= 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 "✅ 📖 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 "✅ 📖 Table", "/docs/components/table" %>
           <%= sidebar_link "✅ 📖 Tabs", "/docs/components/tabs" %>
           <%= sidebar_link "✅ 📖 Textarea", "/docs/components/textarea" %>
           <%= sidebar_link "✅ 📖 Toast", "/docs/components/toast" %>

data/lib/components.json

@@ -21,11 +21,10 @@
     "name": "alert-dialog",
     "type": "components:ui",
     "files": [
-      "app/helpers/components/alert-dialog_helper.rb",
-      "app/views/components/ui/_alert-dialog.html.erb",
-      "app/javascript/controllers/ui/alert-dialog_controller.js"
+      "app/helpers/components/alert_dialog_helper.rb",
+      "app/views/components/ui/_alert_dialog.html.erb"
     ],
-    "dependencies": [{ "component": "dialog" }]
+    "dependencies": [{ "component": "dialog" }, "app/views/components/ui/shared/_backdrop.html.erb"]
   },
   "badge": {
     "name": "badge",
@@ -102,7 +101,8 @@
       "app/helpers/components/dialog_helper.rb",
       "app/views/components/ui/_dialog.html.erb",
       "app/javascript/controllers/ui/dialog_controller.js"
-    ]
+    ],
+    "dependencies": ["app/views/components/ui/shared/_backdrop.html.erb"]
   },
   "dropdown-menu": {
     "name": "dropdown-menu",
@@ -117,10 +117,28 @@
       "app/views/components/ui/shared/_menu_item.html.erb"
     ]
   },
+  "dropzone": {
+    "name": "dropzone",
+    "type": "components:ui",
+    "files": [
+      "app/helpers/components/dropzone_helper.rb",
+      "app/views/components/ui/_dropzone.html.erb",
+      "app/javascript/controllers/ui/dropzone_controller.js"
+    ]
+  },
+  "filter": {
+    "name": "filter",
+    "type": "components:ui",
+    "files": [
+      "app/helpers/components/filter_helper.rb",
+      "app/views/components/ui/_filter.html.erb",
+      "app/javascript/controllers/ui/filter_controller.js"
+    ]
+  },
   "forms": {
     "name": "forms",
     "type": "components:ui",
-    "files": ["app/helpers/components/forms_helper.rb", "app/form_builders/shadcn_form_builder.rb"],
+    "files": ["app/helpers/components/forms_helper.rb", "app/components/shadcn/form_builder.rb"],
     "dependencies": [
       { "component": "input" },
       { "component": "label" },
@@ -214,8 +232,7 @@
     "type": "components:ui",
     "files": [
       "app/helpers/components/select_helper.rb",
-      "app/views/components/ui/_select.html.erb",
-      "app/javascript/controllers/ui/select_controller.js"
+      "app/components/shadcn/select_component.rb"
     ]
   },
   "separator": {

data/lib/generators/shadcn-ui_generator.rb

@@ -120,7 +120,7 @@ class ShadcnUiGenerator < Rails::Generators::Base
     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."
+      abort "shadcn-ui requires Tailwind CSS. Please include tailwindcss-rails in your Gemfile and run `rails g tailwindcss:install` to install Tailwind CSS."
     end
   end
 

data/lib/shadcn-ui/version.rb

@@ -1,3 +1,3 @@
 module ShadcnUi
-  VERSION = "0.0.8"
+  VERSION = "0.0.12"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shadcn-ui
 version: !ruby/object:Gem::Version
-  version: 0.0.8
+  version: 0.0.12
 platform: ruby
 authors:
 - Avi Flombaum
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-08-03 00:00:00.000000000 Z
+date: 2023-09-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: tailwind_merge
@@ -53,12 +53,13 @@ files:
 - app/assets/stylesheets/shadcn.css
 - app/channels/application_cable/channel.rb
 - app/channels/application_cable/connection.rb
+- app/components/shadcn/form_builder.rb
+- app/components/shadcn/select_component.rb
 - app/controllers/application_controller.rb
 - app/controllers/components_controller.rb
 - app/controllers/concerns/.keep
 - app/controllers/documentation_controller.rb
 - app/controllers/users_controller.rb
-- app/form_builders/shadcn_form_builder.rb
 - app/helpers/application_helper.rb
 - app/helpers/components/accordion_helper.rb
 - app/helpers/components/alert_dialog_helper.rb
@@ -71,6 +72,7 @@ files:
 - app/helpers/components/combobox_helper.rb
 - app/helpers/components/dialog_helper.rb
 - app/helpers/components/dropdown_menu_helper.rb
+- app/helpers/components/dropzone_helper.rb
 - app/helpers/components/filter_helper.rb
 - app/helpers/components/forms_helper.rb
 - app/helpers/components/hover_card_helper.rb
@@ -79,11 +81,13 @@ files:
 - app/helpers/components/list_helper.rb
 - app/helpers/components/popover_helper.rb
 - app/helpers/components/progress_helper.rb
+- app/helpers/components/select_helper.rb
 - app/helpers/components/separator_helper.rb
 - app/helpers/components/sheet_helper.rb
 - app/helpers/components/skeleton_helper.rb
 - app/helpers/components/slider_helper.rb
 - app/helpers/components/switch_helper.rb
+- app/helpers/components/table_helper.rb
 - app/helpers/components/tabs_helper.rb
 - app/helpers/components/textarea_helper.rb
 - app/helpers/components/toast_helper.rb
@@ -103,6 +107,7 @@ files:
 - app/javascript/controllers/ui/collapsible_controller.js
 - app/javascript/controllers/ui/dialog_controller.js
 - app/javascript/controllers/ui/dropdown_controller.js
+- app/javascript/controllers/ui/dropzone_controller.js
 - app/javascript/controllers/ui/filter_controller.js
 - app/javascript/controllers/ui/hover-card_controller.js
 - app/javascript/controllers/ui/popover_controller.js
@@ -131,6 +136,7 @@ files:
 - app/views/components/ui/_command.html.erb
 - app/views/components/ui/_dialog.html.erb
 - app/views/components/ui/_dropdown_menu.html.erb
+- app/views/components/ui/_dropzone.html.erb
 - app/views/components/ui/_filter.html.erb
 - app/views/components/ui/_hover_card.html.erb
 - app/views/components/ui/_input.html.erb
@@ -215,6 +221,10 @@ files:
 - app/views/examples/components/dropdown-menu/_usage.html.erb
 - app/views/examples/components/dropdown-menu/code/_preview.erb
 - app/views/examples/components/dropdown-menu/code/_usage.erb
+- app/views/examples/components/dropzone.html.erb
+- app/views/examples/components/dropzone/_usage.html.erb
+- app/views/examples/components/dropzone/code/_preview.erb
+- app/views/examples/components/dropzone/code/_usage.erb
 - app/views/examples/components/filter.html.erb
 - app/views/examples/components/filter/_usage.html.erb
 - app/views/examples/components/filter/code/_icon.html.erb
@@ -246,6 +256,10 @@ files:
 - app/views/examples/components/progress/_usage.erb
 - app/views/examples/components/progress/code/_preview.erb
 - app/views/examples/components/progress/code/_usage.erb
+- app/views/examples/components/select.html.erb
+- app/views/examples/components/select/_usage.html.erb
+- app/views/examples/components/select/code/_preview.erb
+- app/views/examples/components/select/code/_usage.erb
 - app/views/examples/components/separator.html.erb
 - app/views/examples/components/separator/_usage.html.erb
 - app/views/examples/components/separator/code/_fancy.erb
@@ -268,6 +282,10 @@ files:
 - app/views/examples/components/switch/_usage.html.erb
 - app/views/examples/components/switch/code/_preview.erb
 - app/views/examples/components/switch/code/_usage.erb
+- app/views/examples/components/table.html.erb
+- app/views/examples/components/table/_usage.html.erb
+- app/views/examples/components/table/code/_preview.erb
+- app/views/examples/components/table/code/_usage.erb
 - app/views/examples/components/tabs.html.erb
 - app/views/examples/components/tabs/_usage.html.erb
 - app/views/examples/components/tabs/code/_account.html.erb
@@ -379,7 +397,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.10
+rubygems_version: 3.4.18
 signing_key:
 specification_version: 4
 summary: Provides the shadcn-ui component library to a Ruby on Rails application.