RubyGems - shadcn-ui - Versions diffs - 0.0.1 → 0.0.3 - Mend

shadcn-ui 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (128) hide show

checksums.yaml +4 -4
data/.env +1 -0
data/.prettierrc.json +6 -0
data/README.md +260 -0
data/Rakefile +6 -3
data/app/assets/stylesheets/{application.scss → application.css} +0 -27
data/app/assets/stylesheets/application.tailwind.css +46 -73
data/app/assets/stylesheets/shadcn.css +216 -0
data/app/controllers/components_controller.rb +1 -1
data/app/controllers/documentation_controller.rb +10 -0
data/app/helpers/application_helper.rb +19 -0
data/app/helpers/components/accordion_helper.rb +14 -1
data/app/helpers/components/alert_helper.rb +4 -2
data/app/helpers/components/button_helper.rb +2 -1
data/app/helpers/components/card_helper.rb +2 -2
data/app/helpers/components/checkbox_helper.rb +2 -2
data/app/helpers/components/collapsible_helper.rb +8 -0
data/app/helpers/components/filter_helper.rb +12 -0
data/app/helpers/components/input_helper.rb +21 -0
data/app/helpers/components/label_helper.rb +5 -0
data/app/helpers/components/list_helper.rb +15 -0
data/app/helpers/components/progress_helper.rb +5 -0
data/app/helpers/components/sheet_helper.rb +29 -0
data/app/helpers/components/skeleton_helper.rb +5 -0
data/app/helpers/components/slider_helper.rb +5 -0
data/app/helpers/components_helper.rb +11 -0
data/app/helpers/documentation_helper.rb +2 -0
data/app/helpers/examples_helper.rb +1 -2
data/app/javascript/controllers/theme_controller.js +25 -0
data/app/javascript/controllers/ui/dialog_controller.js +3 -1
data/app/javascript/controllers/ui/dropdown_controller.js +2 -22
data/app/javascript/controllers/ui/filter_controller.js +20 -0
data/app/javascript/controllers/ui/popover_controller.js +29 -1
data/app/javascript/controllers/ui/sheet_controller.js +33 -0
data/app/javascript/controllers/ui/slider_controller.js +14 -0
data/app/javascript/controllers/ui/tooltip_controller.js +1 -1
data/app/views/application/index.html.erb +122 -0
data/app/views/components/ui/_accordion.html.erb +2 -2
data/app/views/components/ui/_alert.html.erb +15 -3
data/app/views/components/ui/_alert_dialog.html.erb +1 -1
data/app/views/components/ui/_card.html.erb +2 -2
data/app/views/components/ui/_checkbox.html.erb +3 -7
data/app/views/components/ui/_collapsible.html.erb +2 -6
data/app/views/components/ui/_command.html.erb +0 -0
data/app/views/components/ui/_dialog.html.erb +1 -1
data/app/views/components/ui/_filter.html.erb +14 -0
data/app/views/components/ui/_input.html.erb +8 -0
data/app/views/components/ui/_label.html.erb +3 -0
data/app/views/components/ui/_list.html.erb +5 -0
data/app/views/components/ui/_progress.html.erb +15 -0
data/app/views/components/ui/_sheet.html.erb +44 -0
data/app/views/components/ui/_skeleton.html.erb +1 -0
data/app/views/components/ui/_slider.html.erb +2 -0
data/app/views/components/ui/_textarea.html.erb +1 -1
data/app/views/components/ui/shared/{_dialog_background.html.erb → _backdrop.html.erb} +1 -0
data/app/views/components/ui/svg/_check.html.erb +11 -0
data/app/views/documentation/about.html.md +20 -0
data/app/views/documentation/generators.html.md +1 -0
data/app/views/documentation/index.html.erb.bak +70 -0
data/app/views/documentation/index.html.md +37 -0
data/app/views/documentation/installation.html.md +377 -0
data/app/views/examples/components/accordion/_usage.html.erb +15 -0
data/app/views/examples/components/accordion/code/_block.html.erb +8 -0
data/app/views/examples/components/accordion/code/_description.html.erb +7 -0
data/app/views/examples/components/accordion/code/preview.erb +3 -0
data/app/views/examples/components/accordion/code/usage.erb +16 -0
data/app/views/examples/components/accordion.html.erb +36 -0
data/app/views/examples/components/alert/_usage.html.erb +10 -0
data/app/views/examples/components/alert/code/_attention.erb +3 -0
data/app/views/examples/components/alert/code/_destructive.erb +2 -0
data/app/views/examples/components/alert/code/_info.erb +3 -0
data/app/views/examples/components/alert/code/_no_icon.erb +3 -0
data/app/views/examples/components/alert/code/_success.erb +3 -0
data/app/views/examples/components/alert/code/preview.erb +2 -0
data/app/views/examples/components/alert/code/usage.erb +1 -0
data/app/views/examples/components/alert.html.erb +90 -7
data/app/views/examples/components/badge/_usage.html.erb +10 -0
data/app/views/examples/components/badge/code/preview.erb +5 -0
data/app/views/examples/components/badge/code/usage.erb +1 -0
data/app/views/examples/components/badge.html.erb +11 -4
data/app/views/examples/components/button/_usage.html.erb +19 -0
data/app/views/examples/components/button/code/preview.erb +13 -0
data/app/views/examples/components/button/code/usage.erb +6 -0
data/app/views/examples/components/button.html.erb +20 -6
data/app/views/examples/components/card/_usage.html.erb +21 -0
data/app/views/examples/components/card/code/_form.erb +72 -0
data/app/views/examples/components/card/code/_notifications.erb +61 -0
data/app/views/examples/components/card/code/preview.erb +6 -0
data/app/views/examples/components/card/code/usage.erb +3 -0
data/app/views/examples/components/card.html.erb +35 -143
data/app/views/examples/components/checkbox/_usage.html.erb +9 -0
data/app/views/examples/components/checkbox/code/preview.erb +2 -0
data/app/views/examples/components/checkbox/code/usage.erb +1 -0
data/app/views/examples/components/checkbox.html.erb +14 -0
data/app/views/examples/components/collapsible/_usage.html.erb +16 -0
data/app/views/examples/components/collapsible/code/preview.erb +9 -0
data/app/views/examples/components/collapsible/code/usage.erb +7 -0
data/app/views/examples/components/collapsible.html.erb +13 -3
data/app/views/examples/components/dialog.html.erb +1 -1
data/app/views/examples/components/filter.html.erb +25 -0
data/app/views/examples/components/input.html.erb +18 -0
data/app/views/examples/components/label.html.erb +13 -0
data/app/views/examples/components/progress.html.erb +12 -0
data/app/views/examples/components/sheet.html.erb +19 -0
data/app/views/examples/components/skeleton.html.erb +12 -0
data/app/views/examples/components/slider.html.erb +12 -0
data/app/views/layouts/application.html.erb +2 -3
data/app/views/layouts/component.html.erb +2 -2
data/app/views/layouts/documentation.html.erb +39 -0
data/app/views/layouts/shared/_components.html.erb +62 -0
data/app/views/layouts/shared/_header.html.erb +25 -33
data/app/views/layouts/shared/_sidebar.html.erb +10 -0
data/config/application.rb +2 -1
data/config/importmap.rb +6 -6
data/config/initializers/markdown.rb +24 -0
data/config/routes.rb +7 -1
data/config/shadcn.tailwind.js +98 -0
data/config/tailwind.config.js +13 -74
data/lib/components.json +305 -0
data/lib/generators/shadcn-ui_generator.rb +201 -0
data/lib/shadcn-ui/version.rb +1 -1
data/package-lock.json +90 -3
data/package.json +4 -0
data/public/accordion.png +0 -0
metadata +81 -7
data/app/views/layouts/_sidebar.html.erb +0 -270
data/lib/generators/shadcn_ui_generator.rb +0 -32
/data/app/assets/stylesheets/{lambda.light.scss → lambda.light.css} +0 -0

data/app/views/examples/components/input.html.erb ADDED Viewed

@@ -0,0 +1,18 @@
+<%= render_component_header title: "Input",
+      description: "Displays a form input field or a component that looks like an input field." %>
+<% content_for :preview, flush: true do %>
+  <%= render_input name: "sample_input", id: "sample_input" %>
+<% end %>
+<% content_for :code, flush: true do %>
+<% end %>
+<%= render_preview %>
+<%= content_for :examples, flush: true do %>
+  <%= render_input name: "sample_input", id: "sample_input", style: :borderless %>
+<% end %>
+<%= render_example %>

data/app/views/examples/components/label.html.erb ADDED Viewed

@@ -0,0 +1,13 @@
+<%= render_component_header title: "Input",
+      description: "Displays a form input field or a component that looks like an input field." %>
+<% content_for :preview, flush: true do %>
+  <%= render_label name: "sample_input", label: "Sample Input", class: "block text-left w-full" %>
+  <%= render_input name: "sample_input", id: "sample_input" %>
+<% end %>
+<% content_for :code, flush: true do %>
+<% end %>
+<%= render_preview %>

data/app/views/examples/components/progress.html.erb ADDED Viewed

@@ -0,0 +1,12 @@
+<%= render_component_header title: "Progress",
+      description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar." %>
+<% content_for :preview, flush: true do %>
+  <%= render_progress value: 37 %>
+<% end %>
+<% content_for :code, flush: true do %>
+<% end %>
+<%= render_preview %>

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

@@ -0,0 +1,19 @@
+<%= render_component_header title: "Sheet",
+      description: "Extends the Dialog component to display content that complements the main content of the screen." %>
+<% 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 %>
+  </div>
+<% end %>
+<%= render_preview %>

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

@@ -0,0 +1,12 @@
+<%= render_component_header title: "Skeleton",
+      description: "Use to show a placeholder while content is loading." %>
+<% content_for :preview, flush: true do %>
+  <%= render_skeleton %>
+<% end %>
+<% content_for :code, flush: true do %>
+<% end %>
+<%= render_preview %>

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

@@ -0,0 +1,12 @@
+<%= render_component_header title: "Slider",
+      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 %>
+<% end %>
+<% content_for :code, flush: true do %>
+<% end %>
+<%= render_preview %>

data/app/views/layouts/application.html.erb CHANGED Viewed

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>ShadcnRails</title>
+    <title><%= page_title %></title>
     <meta
       name="viewport"
       content="width=device-width,initial-scale=1">
@@ -21,9 +21,8 @@
       <div class="flex-1">
         <div class="border-b">
           <div
-            class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
+            class="container flex-1 items-start ">
             <!--prettier-ignore-->
-            <%= render 'layouts/sidebar' %>
             <%= yield %>
           </div>
         </div>

data/app/views/layouts/component.html.erb CHANGED Viewed

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>ShadcnRails</title>
+    <title><%= page_title %></title>
     <meta
       name="viewport"
       content="width=device-width,initial-scale=1">
@@ -23,7 +23,7 @@
           <div
             class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
             <!--prettier-ignore-->
-            <%= render 'layouts/sidebar' %>
+            <%= render 'layouts/shared/sidebar' %>
             <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
               <div class="mx-auto w-full min-w-0"><%= yield %></div>
             </main>

data/app/views/layouts/documentation.html.erb ADDED Viewed

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= page_title %></title>
+    <meta
+      name="viewport"
+      content="width=device-width,initial-scale=1">
+    <!--prettier-ignore-->
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
+    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+    <%= javascript_importmap_tags %>
+  </head>
+  <body>
+    <div class="relative flex min-h-screen flex-col">
+      <%= render 'layouts/shared/header' %>
+      <div class="flex-1">
+        <div class="border-b">
+          <div
+            class="container flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-6 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
+            <!--prettier-ignore-->
+            <%= render 'layouts/shared/sidebar' %>
+            <main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
+              <div class="mx-auto w-full min-w-0">
+              <article class="documentation">
+                <%= yield %>
+              </article>
+              </div>
+            </main>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

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

@@ -0,0 +1,62 @@
+<div
+  class="h-full w-full rounded-[inherit] overflow-y-scroll-auto overflow-x-hidden">
+  <div style="min-width: 100%; display: table">
+    <div class="w-full">
+      <div class="pb-4">
+        <h4 class="mb-1 rounded-md px-2 py-1 text-sm font-semibold">Getting Started</h4>
+        <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 "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" %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/layouts/shared/_header.html.erb CHANGED Viewed

@@ -1,3 +1,13 @@
+<%= render_sheet id: "sidebar_sheet", direction: "left", width: "w-auto" do %>
+  <div class=" h-full">
+  <%= sheet_content do %>
+    <div class=" h-full">
+      <%= render 'layouts/shared/components' %>
+    </div>
+  <% end %>
+  </div>
+<% end %>
 <header
   class="supports-backdrop-blur:bg-background/60 sticky top-0 z-40 w-full border-b bg-background/95 backdrop-blur">
   <div class="container flex h-14 items-center">
@@ -37,32 +47,24 @@
         <span class="hidden font-bold sm:inline-block">shadcn/ui on Rails</span>
       </a>
       <nav class="flex items-center space-x-6 text-sm font-medium">
+        <%= link_to "Home", root_path, class: "transition-colors hover:text-foreground/80  #{params[:controller] == 'application' ? "text-foreground" : "text-foreground/60"}" %>
+        <%= link_to "Documentation", documentation_index_path, class: "transition-colors hover:text-foreground/80 text-foreground/60 #{params[:controller] == 'documentation' ? "text-foreground" : "text-foreground/60"}" %>
+        <%= link_to "Components", component_path("accordion"), class: "transition-colors hover:text-foreground/80 text-foreground/60 #{params[:controller] == 'components' ? "text-foreground" : "text-foreground/60"}" %>
         <a
-          class="transition-colors hover:text-foreground/80 text-foreground/60"
-          href="/docs"
-          >Documentation</a
-        ><a
-          class="transition-colors hover:text-foreground/80 text-foreground"
-          href="/docs/components"
-          >Components</a
-        ><a
-          class="transition-colors hover:text-foreground/80 text-foreground/60"
-          href="/examples"
-          >Examples</a
-        ><a
           class="hidden text-foreground/60 transition-colors hover:text-foreground/80 lg:block"
-          href="https://github.com/shadcn/ui"
-          >GitHub</a
-        >
+          href="https://github.com/aviflombaum/shadcn-rails">GitHub</a>
       </nav>
     </div>
     <button
       class="inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:text-accent-foreground h-9 py-2 mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
       type="button"
       aria-haspopup="dialog"
       aria-expanded="false"
-      aria-controls="radix-:R15hja:"
-      data-state="closed">
+      data-state="closed"
+      data-controller="ui--sheet"
+      data-action="click->ui--sheet#toggleOutlet"
+      data--ui-sheet-outlet="#sidebar_sheet">
       <svg
         width="15"
         height="15"
@@ -79,23 +81,12 @@
       <span class="sr-only">Toggle Menu</span>
     </button>
     <div class="flex flex-1 items-center justify-between space-x-2 md:justify-end">
-      <div class="w-full flex-1 md:w-auto md:flex-none">
-        <button
-          class="inline-flex items-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 relative w-full justify-start text-sm text-muted-foreground sm:pr-12 md:w-40 lg:w-64">
-          <span class="hidden lg:inline-flex">Search documentation...</span
-          ><span class="inline-flex lg:hidden">Search...</span
-          ><kbd
-            class="pointer-events-none absolute right-1.5 top-1.5 hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex"
-            ><span class="text-xs">⌘</span>K</kbd
-          >
-        </button>
-      </div>
       <nav class="flex items-center">
         <a
           target="_blank"
           rel="noreferrer"
-          href="https://github.com/shadcn/ui"
-          ><div
+          href="https://github.com/aviflombaum/shadcn-rails"><div
             class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 py-2 w-9 px-0">
             <svg
               viewBox="0 0 438.549 438.549"
@@ -110,8 +101,7 @@
         <a
           target="_blank"
           rel="noreferrer"
-          href="https://twitter.com/shadcn"
-          ><div
+          href="https://twitter.com/aviflombaum"><div
             class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 py-2 w-9 px-0">
             <svg
               xmlns="http://www.w3.org/2000/svg"
@@ -129,7 +119,9 @@
           id="radix-:Rtlhja:"
           aria-haspopup="menu"
           aria-expanded="false"
-          data-state="closed">
+          data-state="closed"
+          data-controller="theme"
+          data-action="theme#toggle">
           <svg
             width="15"
             height="15"

data/app/views/layouts/shared/_sidebar.html.erb ADDED Viewed

@@ -0,0 +1,10 @@
+<aside
+  class="fixed top-14 z-30 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block ">
+  <div
+    dir="ltr"
+    class="relative overflow-hidden h-full py-6 pl-2 pr-6 lg:py-8"
+    style="position: relative;">
+    <%= render "layouts/shared/components" %>
+  </div>
+</aside>

data/config/application.rb CHANGED Viewed

@@ -32,6 +32,7 @@ module ShadcnRails
     # config.eager_load_paths << Rails.root.join("extras")
     # Don't generate system test files.
-    config.generators.system_tests = nil
+    config.generators.system_tests = :rspec
+    config.generators.test_framework :rspec
   end
 end

data/config/importmap.rb CHANGED Viewed

@@ -5,9 +5,9 @@ pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
 pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.2.1/dist/stimulus.js"
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true
 pin_all_from "app/javascript/controllers", under: "controllers"
-pin "@kanety/stimulus-static-actions", to: "https://ga.jspm.io/npm:@kanety/stimulus-static-actions@1.0.1/dist/index.modern.js"
-pin "highlight.js", to: "https://ga.jspm.io/npm:highlight.js@11.8.0/es/index.js"
-pin "stimulus-use", to: "https://ga.jspm.io/npm:stimulus-use@0.51.3/dist/index.js"
-pin "stimulus-dropdown", to: "https://ga.jspm.io/npm:stimulus-dropdown@2.1.0/dist/stimulus-dropdown.mjs"
-pin "hotkeys-js", to: "https://ga.jspm.io/npm:hotkeys-js@3.10.4/dist/hotkeys.esm.js"
-pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js"
+pin "@kanety/stimulus-static-actions", to: "https://ga.jspm.io/npm:@kanety/stimulus-static-actions@1.0.1/dist/index.modern.js", preload: true
+pin "highlight.js", to: "https://ga.jspm.io/npm:highlight.js@11.8.0/es/index.js", preload: true
+pin "stimulus-use", to: "https://ga.jspm.io/npm:stimulus-use@0.51.3/dist/index.js", preload: true
+pin "stimulus-dropdown", to: "https://ga.jspm.io/npm:stimulus-dropdown@2.1.0/dist/stimulus-dropdown.mjs", preload: true
+pin "hotkeys-js", to: "https://ga.jspm.io/npm:hotkeys-js@3.10.4/dist/hotkeys.esm.js", preload: true
+pin "@popperjs/core", to: "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js", preload: true

data/config/initializers/markdown.rb ADDED Viewed

@@ -0,0 +1,24 @@
+require "redcarpet"
+require "rouge"
+require "rouge/plugins/redcarpet"
+class HTML < Redcarpet::Render::HTML
+  include Rouge::Plugins::Redcarpet # yep, that's it.
+end
+# config/initializers/markdown.rb
+# We define a module that can parse markdown to HTML with its `call` method
+module MarkdownHandler
+  def self.erb
+    @erb ||= ActionView::Template.registered_template_handler(:erb)
+  end
+  def self.call(template, source)
+    compiled_source = erb.call(template, source)
+    "Redcarpet::Markdown.new(Redcarpet::Render::HTML.new(with_toc_data: true), extensions = {fenced_code_blocks: true}).render(begin;#{compiled_source};end).html_safe"
+  end
+end
+# Now we tell Rails to process any files with the `.md` extension using our new MarkdownHandler
+ActionView::Template.register_template_handler :md, MarkdownHandler

data/config/routes.rb CHANGED Viewed

@@ -1,7 +1,13 @@
 Rails.application.routes.draw do
   # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
   get "/examples/:example", to: "application#examples", as: :example
-  get "/docs//components/:component", to: "components#show", as: :component
+  get "/docs/components/:component", to: "components#show", as: :component
+  get "/docs/components", to: redirect("/docs/components/accordion")
+  get "/components", to: redirect("/docs/components/accordion"), as: :components
+  get "/docs/:id" => "documentation#show", :as => :documentation, :format => false
+  get "/docs", to: "documentation#index", as: :documentation_index
   # Defines the root path route ("/")
   root "application#index"
 end

data/config/shadcn.tailwind.js ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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"),
-  ],
 };