shadcn-ui 0.0.3 → 0.0.4

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

@@ -3,17 +3,24 @@
 
 <% content_for :preview, flush: true do %>
   <div class="w-full flex justify-center">
-    <%= render_sheet direction: "right" do %>
-      <%= sheet_trigger do %>
-        <%= render_button("Open Sidebar", variant: :outline) %>
-      <% end %>
-      <%= sheet_content do %>
-        <h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">The King's Plan</h2>
-        <p class="leading-7 [&:not(:first-child)]:mt-6">The king thought long and hard, and finally came up with <a href="#" class="font-medium text-primary underline underline-offset-4">a brilliant plan</a>: he would tax the jokes in the kingdom.</p>
-        <blockquote class="mt-6 border-l-2 pl-6 italic">"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."</blockquote>
-      <% end %>
-    <% end %>
+    <%= render_code_preview('sheet') %>
   </div>
 <% end %>
 
+<% content_for :code, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= code_partial("sheet/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 sheet
+<% 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("sheet/usage", :erb) %>
+
+<%= render_usage("sheet") %>

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

@@ -0,0 +1,9 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Skeleton component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/skeleton_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_skeleton.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_skeleton") %> will output the skeleton component.</p>

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

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

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

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

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

@@ -2,11 +2,25 @@
       description: "Use to show a placeholder while content is loading." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_skeleton %>
+  <div class="w-full flex justify-center">
+    <%= render_code_preview('skeleton') %>
+  </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+<div class="w-full flex justify-center">
+  <%= code_partial("skeleton/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 skeleton
+<% 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("skeleton/usage", :erb) %>
+
+<%= render_usage("skeleton") %>

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

@@ -0,0 +1,11 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Slider component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/slider_helper.rb") %></li>
+  <li><%= code("app/javascript/controllers/ui/slider_controller.js") %></li>
+  <li><%= code("app/views/components/ui/_slider.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_slider") %> accepts one keyword argument for the <%= code("name") %> of the slider element. It optionally accepts a <%= code("value") %> keyword for the starting value of the slider.
+The javascript controller is responsible for maintaining the state and visual of the slider from the underlying range input.</p>

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

@@ -0,0 +1,3 @@
+<%= render_slider name: "sample_slider",
+                  id: "sample_slider",
+                  value: 23 %>

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

@@ -0,0 +1 @@
+<%= render_slider name: %>

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

@@ -2,11 +2,25 @@
       description: "An input where the user selects a value from within a given range." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_slider name: "sample_slider", id: "sample_slider", value: 23 %>
+  <div class="w-full flex justify-center">
+    <%= render_code_preview('slider') %>
+  </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+<div class="w-full flex justify-center">
+  <%= code_partial("slider/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 slider
+<% 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("slider/usage", :erb) %>
+
+<%= render_usage("slider") %>

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

@@ -0,0 +1,9 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Textarea component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/textarea_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_textarea.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_textarea") %> accepts one keyword argument for the <%= code("name") %> of the textarea element.</p>

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

@@ -0,0 +1 @@
+<%= render_textarea name: "sample_textarea" %>

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

@@ -0,0 +1 @@
+<%= render_textarea name: %>

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

@@ -2,11 +2,25 @@
       description: "Displays a form textarea or a component that looks like a textarea." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_textarea name: "sample_textarea" %>
+  <div class="w-full flex justify-center">
+    <%= render_code_preview('textarea') %>
+  </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+<div class="w-full flex justify-center">
+  <%= code_partial("textarea/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 textarea
+<% 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("textarea/usage", :erb) %>
+
+<%= render_usage("textarea") %>

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

@@ -0,0 +1,11 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Toast component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/toast_helper.rb") %></li>
+  <li><%= code("app/javascript/controllers/ui/toast_controller.js") %></li>
+  <li><%= code("app/views/components/ui/_toast.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_toast") %> accepts two keyword arguments, one for the <%= code("header") %> and the second for the <%= code("description") %>
+or body of the toast. An optional 3rd argument can be provided for an <%= code("action") %> element like a button.</p>

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

@@ -0,0 +1,3 @@
+  <%= render_toast header: "Scheduled: Catch up",
+    description: "Friday, February 10, 2023 at 5:57 PM",
+    action: render_button("Undo", variant: :outline) %>

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

@@ -0,0 +1,2 @@
+  <%= render_toast header: ,
+                   description: %>

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

@@ -3,13 +3,21 @@
 
 <% content_for :preview, flush: true do %>
   <%= render_button "Trigger Toast", variant: "outline", data: {controller: "ui--toast", action: "ui--toast#test"} %>
-  <%= render_toast header: "Scheduled: Catch up",
-    description: "Friday, February 10, 2023 at 5:57 PM",
-    action: render_button("Undo", variant: :outline) %>
+  <%= render_code_preview('toast') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+  <%= code_partial("toast/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 toast
+<% 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("toast/usage", :erb) %>
+
+<%= render_usage("toast") %>

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

@@ -0,0 +1,10 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Toggle component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/toggle_helper.rb") %></li>
+  <li><%= code("app/javascript/controllers/ui/toggle_controller.js") %></li>
+  <li><%= code("app/views/components/ui/_toggle.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_toggle") %> an argument for the content for the button that will become a toggle.</p>

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

@@ -0,0 +1 @@
+<%= render_toggle "𝐁" %>

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

@@ -0,0 +1 @@
+  <%= render_toggle 'content' %>

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

@@ -2,11 +2,25 @@
       description: "A two-state button that can be either on or off." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_toggle "𝐁" %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('toggle') %>
+</div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+<div class="w-full flex justify-center">
+  <%= code_partial("toggle/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 toggle
+<% 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("toggle/usage", :erb) %>
+
+<%= render_usage("toggle") %>

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

@@ -0,0 +1,11 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Tooltip component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/tooltip_helper.rb") %></li>
+  <li><%= code("app/javascript/controllers/ui/tooltip_controller.js") %></li>
+  <li><%= code("app/views/components/ui/_tooltip.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_tooltip") %> accepts a block that contains calls to <%= code("tooltip_trigger") %> and <%= code("tooltip_content") %> each accepting a block for their respective content.
+The <%= code("tooltip_trigger") %> is the element that upon hovering over, will reveal the <%= code("tooltip_content") %>.

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

@@ -0,0 +1,12 @@
+<%= 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 %>

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

@@ -0,0 +1,7 @@
+<%= render_tooltip do %>
+  <%= tooltip_trigger do %>
+  <% end %>
+
+  <%= tooltip_content do %>
+  <% end %>
+<% end %>

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

@@ -8,6 +8,8 @@
           <%= 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>
@@ -16,45 +18,45 @@
         <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 "✅ 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 "❌ 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 "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 "✅ 📖 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/lib/shadcn-ui/version.rb

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