shadcn-ui 0.0.3 → 0.0.5

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

@@ -1,7 +1,7 @@
 <div data-controller="ui--dialog">
+  <div data-action="click->ui--dialog#open"><%= content_for(:alert_dialog_trigger) %></div>
   <%= render "components/ui/shared/backdrop", as: "backdrop" %>
 
-  <%= trigger %>
   <div
     role="alertdialog"
     data-state="closed"
@@ -9,12 +9,16 @@
     tabindex="-1"
     style="pointer-events: auto"
     data-ui--dialog-target="dialog">
-    <div class="flex flex-col space-y-2 text-center sm:text-left">
-      <h2 class="text-lg font-semibold"><%= label %></h2>
-      <p class="text-sm text-muted-foreground"><%= description %></p>
-    </div>
+      <div>
+        <%= content_for(:alert_dialog_content) %>
+      </div>
     <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-      <%= cancel %> <%= continue %>
+      <div data-action="click->ui--dialog#close">
+        <%= content_for(:alert_dialog_cancel) %>
+      </div>
+      <div data-action="click->ui--dialog#close">
+        <%= content_for(:alert_dialog_continue) %>
+      </div>
     </div>
   </div>
 </div>

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

@@ -8,6 +8,12 @@
     <% end %>
   </div>
   <% end %>
-  <div class="p-0 <%= "p-6 pt-0" if !block && title %> <%= "p-6" if !block && !title %> "><%= body %></div>
+  <% if !block && !title %>
+    <%= content_tag( :div, class: "p-6" ){ body } %>
+  <% elsif !block %>
+    <%= content_tag( :div, class: "px-6" ){ body } %>
+  <% else %>
+    <%= body %>
+  <% end %>
   <% if footer %><footer class="mx-6 mb-6"><%= footer %></footer><% end %>
 </div>

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

@@ -41,29 +41,3 @@
       </button>
   </div>
 </div>
-<!-- <div data-controller="ui--dialog">
-  <div
-    data-ui--dialog-target="modal"
-    data-state="closed"
-    class="hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
-    style="pointer-events: auto"
-    data-aria-hidden="true"
-    aria-hidden="true"></div>
-
-  <%#= trigger %>
-  <div
-    role="alertdialog"
-    data-state="closed"
-    class="hidden fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full"
-    tabindex="-1"
-    style="pointer-events: auto"
-    data-ui--dialog-target="dialog">
-    <div class="flex flex-col space-y-2 text-center sm:text-left">
-      <h2 class="text-lg font-semibold"><%#= label %></h2>
-      <p class="text-sm text-muted-foreground"><%#= description %></p>
-    </div>
-    <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-      <%#= cancel %> <%#= continue %>
-    </div>
-  </div>
-</div> -->

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

@@ -1,8 +1,8 @@
 <div data-controller="ui--filter">
 <%= render_card do %>
   <div class="flex items-center">
-    <%= content_for :filter_icon %>
-  <%= render_input name: "filter", placeholder: "Filter items...", style: :borderless, class: input_class, data: {"ui--filter-target": "source", action: "input->ui--filter#filter"} %></div>
+  <%= content_for :filter_icon %>
+  <%= render_input name: "filter", placeholder: "Filter items...", variant: :borderless, class: input_class, data: {"ui--filter-target": "source", action: "input->ui--filter#filter"} %></div>
   <%= render_separator %>
   <div class="<%= options[:class] %>">
     <%= content_tag :div, role: "group" do
@@ -12,3 +12,4 @@
     end %>
   </div>
 <% end %>
+</div>

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

@@ -2,6 +2,9 @@
 <%= text_field_tag name, value, type: type, id: id,
               class: options[:class],
               placeholder: options[:placeholder],
+              autocomplete: options[:autocomplete],
+              autocapitalize: options[:autocapitalize],
+              autocorrect: options[:autocorrect],
               disabled: options[:disabled],
               required: options[:required],
               readonly: options[:readonly],

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

@@ -1,3 +1,3 @@
 <%= label_tag name, label,
   data: options[:data],
-  class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 #{options[:class]}" %>
+  class: tw("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 #{options[:class]}") %>

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

@@ -1,4 +1,8 @@
-<div role="region" aria-label="Notifications (F8)" tabindex="-1" style="" data-controller="ui--toast #{data[:controller]}">
+<div role="region" aria-label="Notifications (F8)" tabindex="-1" style=""
+  id="<%= options[:id] %>"
+  data-controller="ui--toast <%= data[:controller] %>"
+  data-auto="<%= options[:auto] %>"
+  class="hidden">
   <span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;"></span>
   <ol tabindex="-1" class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]">
     <li role="status"
@@ -9,7 +13,7 @@
       data-ui--toast-target="item"
       data-swipe-direction="right"
       data-duration="5000"
-      class="toast-item hidden group pointer-events-auto relative flex w-full items-center
+      class="<%= tw("toast-item hidden group pointer-events-auto relative flex w-full items-center
             justify-between space-x-4 overflow-hidden rounded-md p-6 pr-8 shadow-lg
              transition-all
              data-[swipe=cancel]:translate-x-0
@@ -20,14 +24,14 @@
              data-[state=closed]:fade-out-80
              data-[state=open]:slide-in-from-top-full
              data-[state=open]:sm:slide-in-from-bottom-full
-             border bg-background"
+             border bg-background #{options[:class]}") %>"
       style="user-select: none; touch-action: none;">
       <div class="grid gap-1">
         <div class="text-sm font-semibold"><%= header %></div>
         <div class="text-sm opacity-90"><%= description %></div>
       </div>
       <%= action %>
-      <button data-action="ui--toast#closeAll" type="button" class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600" toast-close="" data-radix-toast-announce-exclude=""><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="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg></button>
+      <button data-action="ui--toast#close" type="button" class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600" toast-close="" data-radix-toast-announce-exclude=""><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="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg></button>
     </li>
   </ol>
   <span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;"></span>

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

@@ -1 +1,21 @@
 # Component Generators
+
+The gem adds generators to your application to help you copy the code from this application into
+yours.
+
+Each time you run the generator it will check to make sure you have the prerequisites, like Tailwind
+and the shadcn stylesheet, and if not, do its best to reconcile that for you.
+
+After that it will copy the component files into your application. If you edit the component,
+re-running the generator for it will remove your edits. **Re-running a component generator is
+basically reinstalling it and overwriting any changes you might have made.**
+
+The generator will show up in `rails g` and it is called `shadcn-ui`
+
+## Usage
+
+```
+rails generate shadcn-ui <component_name>
+```
+
+You can list out the available components from `rails g shadcn-ui`.

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

@@ -0,0 +1,54 @@
+# Component Helpers
+
+The main entry point to using the component is always a `render_<component>` method defined in the
+helper located in `app/helpers/components/<component>_helper.rb`.
+
+The main responsibility of the component's render method is to ultimatelly render the component's
+partial, located in `app/views/components/ui/_<component>.html.erb`.
+
+The component partial generally will integrate all the content passed to the component helper,
+whether through arguments or blocks.
+
+The render helper generally takes a hash of arguments, and a block. The arguments are used for
+required values for the HTML or for the content. Blocks generally correspond to inner content or
+sections for the component.
+
+<%= code_partial("dialog/usage", :erb) %>
+
+Here the `render_dialog` helper takes a block, and the block is used to render the `dialog_trigger`
+within the corresponding DOM along with the `dialog_content` as a sibling.
+
+Inner content is generally rendered with a `content_for` call, and the component render method will
+yield to the block, capture the content, and pass it along to the main partial.
+
+```ruby
+module Components::DialogHelper
+  def render_dialog(**options, &block)
+    content = capture(&block) if block
+    render "components/ui/dialog", content: content, **options
+  end
+
+  def dialog_trigger(&block)
+    content_for :dialog_trigger, capture(&block), flush: true
+  end
+
+  def dialog_content(&block)
+    content_for :dialog_content, capture(&block), flush: true
+  end
+end
+```
+
+That is a pretty standard example of how the components work. The component partial is responsible
+for the end result HTML.
+
+## Options
+
+Most of the components accept a variaty of DOM/HTML/Data related options. Sometimes these are
+explcitly defined in the render method, and sometimes they are globed as an `**options` argument.
+This should be standardized. As much as possible, I've tried to ensure that these are correctly
+accounted for and passed along to the final html/dom elements, but I imagine that is not the case
+everywhere. **Would love it if you raised an issue when you find this.**
+
+## Standardiziation
+
+As I add more components and see edge cases, I will move to standardizing the API.

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

@@ -32,7 +32,7 @@ The components need a few things in order to render and function properly
    package.json if you need via `echo '{}' >> package.json`.
 
 ```
-npm install -D tailwind-animate
+npm install -D tailwindcss-animate
 ```
 
 These are the requirements if you want to add them individually:

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

@@ -0,0 +1,8 @@
+# Stimulus Controllers
+
+Many components are paired with a stimulus controller that lives in
+`app/javascript/controllers/ui/<component>_controller.js`. As much as possible I try to avoid adding
+depedencies and currently this application is managing them with importmaps and I'm pretty sure if
+you're not using importmaps, this breaks.
+
+The Stimulus controllers frankly need a lot of work.

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

@@ -4,14 +4,12 @@
 
 <% content_for :preview, flush: true do %>
 <div class="w-full">
-  <%= render_accordion title: "Did you know?", description: "You can wrap shadcn helpers in any
-  component library you want!" %>
-  <%= render_accordion title: "Use the generators.", description: "Add components with #{code("rails g shadcn_ui add accordion")}".html_safe %>
+  <%= render_code_preview('accordion') %>
 </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("accordion/code/preview", :erb) %>
+  <%= code_partial("accordion/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -24,7 +22,7 @@ rails generate shadcn-ui accodordion
 
 <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>
 
-<%= code_partial("accordion/code/usage", :erb) %>
+<%= code_partial("accordion/usage", :erb) %>
 
 <%= render_usage("accordion") %>
 
@@ -35,7 +33,7 @@ rails generate shadcn-ui accodordion
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("accordion/code/_description.html", :erb) %>
+  <%= code_partial("accordion/description.html", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -47,7 +45,7 @@ rails generate shadcn-ui accodordion
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("accordion/code/_block.html", :erb) %>
+  <%= code_partial("accordion/block.html", :erb) %>
 <% end %>
 
 <%= render_example %>

data/app/views/examples/components/alert-dialog/_usage.html.erb

@@ -0,0 +1,24 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Alert Dialog component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/alert_dialog_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_alert_dialog.html.erb") %></li>
+</ul>
+
+And relies on <%= code("app/javascript/controllers/ui/dialog_controller.js") %>.
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_alert_dialog") %> defined in <%= code("app/helpers/components/alert_dialog_helper.rb") %>
+accepts a block for the inner components  of the dialog. It renders the partial
+<%= code("app/views/components/ui/_alert_dialog.html.erb") %> which contains the model structure and
+and the 2 actions buttons of continue and cancel.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The modal is composed of 4 components with corresponding helper methods, <%= code("alert_dialog_trigger") %>,
+which accepts a block for the element that will trigger the modal, and <%= code("alert_dialog_content") %>,
+which accepts a block for the body of the modal and the two actions for the modal, <%= code("alert_dialog_cancel") %> for the element that you would like to cancel the dialog interaction, for example a button, and <%= code("alert_dialog_continue") %> for the element you would like to use to continue to interaction. Note, you should feel free to bind your own data actions to these buttons as they are enclosed in an element that will handle closing the modal on click.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+See <a href="/docs/components/dialog">Dialog</a> for more context as this component inherits functionality from that one.</p>

data/app/views/examples/components/alert-dialog/code/_preview.erb

@@ -0,0 +1,22 @@
+<%= render_alert_dialog do %>
+  <%= alert_dialog_trigger do %>
+    <%= render_button("Open Dialog", variant: :outline) %>
+  <% end %>
+
+  <%= alert_dialog_content do %>
+  <div class="flex flex-col space-y-2 text-center sm:text-left">
+    <h2 class="text-lg font-semibold">Are you absolutely sure?</h2>
+    <p class="text-sm text-muted-foreground">
+      This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+    </p>
+  </div>
+  <% end %>
+
+  <%= alert_dialog_cancel do %>
+    <%= render_button("Cancel", variant: :outline) %>
+  <% end %>
+
+  <%= alert_dialog_continue do %>
+    <%= render_button("Continue") %>
+  <% end %>
+<% end %>

data/app/views/examples/components/alert-dialog/code/_usage.erb

@@ -0,0 +1,13 @@
+<%= render_alert_dialog do %>
+  <%= alert_dialog_trigger do %>
+  <% end %>
+
+  <%= alert_dialog_content do %>
+  <% end %>
+
+  <%= alert_dialog_cancel do %>
+  <% end %>
+
+  <%= alert_dialog_continue do %>
+  <% end %>
+<% end %>

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

@@ -3,22 +3,25 @@
   title: "Alert Dialog",
   description: "A modal dialog that interrupts the user with important content and expects a response." %>
 
-<%= content_for :preview, flush: true do %>
-<div class="w-full flex justify-center">
-  <!--prettier-ignore-->
+<% content_for :preview, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render_code_preview('alert-dialog') %>
+  </div>
+<% end %>
 
-  <!--prettier-ignore-->
-  <%= render_alert_dialog(
-    trigger: render_button("Open Dialog", variant: :outline, data: {action: "ui--dialog#open" }),
-    continue: render_button("Continue"),
-    label: "Are you absolutely sure?",
-    description: "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
-  ) %>
-</div>
+<% content_for :code, flush: true do %>
+  <%= code_partial("alert-dialog/preview", :erb) %>
 <% 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 alert-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>
+
+<%= code_partial("alert-dialog/usage", :erb) %>
+
+<%= render_usage("alert-dialog") %>

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

@@ -5,25 +5,24 @@
 
 <% content_for :preview, flush: true do %>
   <div class="w-full">
-    <%= render_alert title: "Did you know?", description: "You can wrap shadcn helpers in any
-  component library you want!" %>
+    <%= render_code_preview('alert') %>
   </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/preview", :erb) %>
+  <%= code_partial("alert/preview", :erb) %>
 <% 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 accodordion
+rails generate shadcn-ui alert
 <% 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>
 
-<%= code_partial("alert/code/usage", :erb) %>
+<%= code_partial("alert/usage", :erb) %>
 
 <%= render_usage("alert") %>
 
@@ -40,7 +39,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/_success", :erb) %>
+  <%= code_partial("alert/success", :erb) %>
 <% end %>
 <%= render_example %>
 
@@ -57,7 +56,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/_info", :erb) %>
+  <%= code_partial("alert/info", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -75,7 +74,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/_attention", :erb) %>
+  <%= code_partial("alert/attention", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -87,7 +86,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/_destructive", :erb) %>
+  <%= code_partial("alert/destructive", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -99,7 +98,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("alert/code/_no_icon", :erb) %>
+  <%= code_partial("alert/no_icon", :erb) %>
 <% end %>
 
 <%= render_example %>

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

@@ -5,23 +5,11 @@
   description: "Displays a badge or a component that looks like a badge." %>
 
 <%= content_for :preview, flush: true do %>
-<div class="w-full mx-auto flex justify-center"><%= render_badge text: "Badge" %></div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_badge text: "Secondary", variant: :secondary %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_badge text: "Destructive", variant: :destructive %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_badge text: "Outline", variant: :outline %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_badge text: "Ghost", variant: :ghost %>
-</div>
+  <%= render_code_preview('badge') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("badge/code/preview", :erb) %>
+  <%= code_partial("badge/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -32,6 +20,6 @@
 <% 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("badge/code/usage", :erb) %>
+<%= code_partial("badge/usage", :erb) %>
 
 <%= render_usage("badge") %>

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

@@ -5,33 +5,11 @@
   description: "Displays a button or a component that looks like a button." %>
 
 <%= content_for :preview, flush: true do %>
-<div class="w-full mx-auto flex justify-center"><%= render_button "Button" %></div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button variant: :secondary do %>
-  <svg class="h-4 w-4 mr-2 text-primary" viewBox="0 0 20 20" fill="none" stroke="currentColor" aria-hidden="true">
-    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path>
-  </svg> Secondary with Icon
-  <% end %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button text: "Destructive", variant: :destructive %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button text: "Outline", variant: :outline %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button text: "Ghost", variant: :ghost %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button "Link", as: :link, href: "/" %>
-</div>
-<div class="w-full mx-auto flex justify-center">
-  <%= render_button text: "Ghost Link", variant: :ghost, as: :link %>
-</div>
+  <%= render_code_preview('button') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("button/code/preview", :erb) %>
+  <%= code_partial("button/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -42,6 +20,6 @@
 <% 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("button/code/usage", :erb) %>
+<%= code_partial("button/usage", :erb) %>
 
 <%= render_usage("button") %>

data/app/views/examples/components/card/code/{preview.erb → _preview.erb}

@@ -1,6 +1,6 @@
 <%= render_card body: "The Most Basic of Cards" %>
 
 <%= render_card title: "Did you know?",
-      subtitle: "This is kinda cool."
+      subtitle: "This is kinda cool.",
       body: "You can embed any HTML in the body with a block.",
       footer: "Have a great day!" %>

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

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

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

@@ -4,15 +4,11 @@
   description: "Displays a card with header, content, and footer." %>
 
 <%= content_for :preview, flush: true do %>
-  <div class="w-full flex justify-center"><%= render_card body: "The Most Basic of Cards" %></div>
-  <div class="w-full flex justify-center">
-    <%= render_card title: "Did you know?", body: "You can embed any HTML in the body of a card by
-    yielding to a block for the body?", subtitle: "This is important.", footer: "Have a great day!" %>
-  </div>
+  <%= render_code_preview('card') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("card/code/preview", :erb) %>
+  <%= code_partial("card/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -23,7 +19,7 @@
 <% 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("card/code/usage", :erb) %>
+<%= code_partial("card/usage", :erb) %>
 
 <%= render_usage("card") %>
 
@@ -32,7 +28,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("card/code/_form", :erb) %>
+  <%= code_partial("card/form", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -42,7 +38,7 @@
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("card/code/_notifications", :erb) %>
+  <%= code_partial("card/notifications", :erb) %>
 <% end %>
 
 <%= render_example %>

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

@@ -0,0 +1,2 @@
+<%= render_checkbox name: "terms",
+      label: "Accept terms and conditions" %>

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

@@ -2,11 +2,11 @@
       description: "A control that allows the user to toggle between checked and not checked." %>
 
 <%= content_for :preview, flush: true do %>
-  <%= render_checkbox label: "Accept terms and conditions", name: "terms" %>
+  <%= render_code_preview('checkbox') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("checkbox/code/preview", :erb) %>
+  <%= code_partial("checkbox/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -17,6 +17,6 @@
 <% 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("checkbox/code/usage", :erb) %>
+<%= code_partial("checkbox/usage", :erb) %>
 
 <%= render_usage("checkbox") %>