shadcn-ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,249 @@
+# Alpha Usage/Installation
+
+Prior to the initial gem release, you can use this as an alpha by cloning this repository and
+starting up the app as you would a standard rails app.
+
+```sh
+git clone https://github.com/aviflombaum/shadcn-rails.git
+cd shadcn-rails
+bundle install
+./bin/dev
+```
+
+There are very few dependencies and no database so it should just boot up. Visit
+http://localhost:3000 to see the demo app which is also the documentation. You'll be able to browse
+the components at http://localhost:3000/components.
+
+If there's a component you want to try in your app, you will be copying the code from this app to
+yours. There's a few other steps you'll need.
+
+## Installing a Component
+
+### Add Tailwind CSS
+
+Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.
+
+[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation)
+
+### Add dependencies
+
+If you haven't already, install Tailwind into your rails application by adding `tailwindcss-rails`
+to your `Gemfile` and install tailwind into your app:
+
+```sh
+./bin/bundle add tailwindcss-rails
+./bin/rails tailwindcss:install
+```
+
+Then install ./bin/rails tailwindcss:install
+
+### Configure tailwind.config.js
+
+Here's what my `tailwind.config.js` file looks like:
+
+```js
+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))",
+        },
+        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"),
+  ],
+};
+```
+
+### Configure styles
+
+Add the following to your app/assets/stylesheets/application.tailwind.css file.
+
+```css
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+}
+```
+
+### Copy a a component's files to your application
+
+For example, if you want to use the Accordion component, you would copy the following files to your
+application:
+
+- `app/javascript/controllers/components/ui/accordion_controller.js` The Stimulus controller for any
+  component that requires javascript.
+- `app/helpers/components/accordion_helper.rb` The helper for the component that allows for easy
+  rendering within views.
+- `app/views/components/ui/_accordion.html.erb` The html for the component.
+
+Once those are copied in your application you can render an accordion with:
+
+```
+<%%= render_accordion title: "Did you know?",
+                      description: "You can wrap shadcn helpers in any
+                                    component library you want!" %>
+```
+
+Result:
+
+<img src="/accordion.png" alt="Example of Accordion" />
+
+See the component's demo page in `app/views/examples/components/accordion.html.erb` for more
+examples.
+
+This will be similar for each component.

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

@@ -0,0 +1,25 @@
+<%
+  items = [{:value => "Ruby on Rails", name: "Ruby on Rails"}, {:value => "Next.js", name: "Next.js"}, {:value => "Remix.run", name: "Remix.run"}]
+%>
+
+<%= render_component_header title: "Filter",
+      description: "Displays a list that is filterable via the included input." %>
+
+<% content_for :preview, flush: true do %>
+  <div class="w-full flex justify-center">
+  <%= render_filter items, class: "p-1" do %>
+    <%= filter_icon do %>
+      <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="mr-2 h-4 w-4 shrink-0 opacity-50 ml-2"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line></svg>
+    <% end %>
+  <% end %>
+<% end %>
+
+<%= render_preview %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+  <%= render_filter items, class: "p-1" do %>
+  <% end %>
+<% end %>
+
+<%= render_example %>

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,61 @@
+<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 "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

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

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

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

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