m9sh 0.2.1 → 0.2.2

data/app/views/docs/components/dropdown_menu.html.erb

@@ -0,0 +1,289 @@
+<%= render Docs::ComponentPageComponent.new(title: "Dropdown Menu") do |page| %>
+  <% page.with_header(
+    name: "Dropdown Menu",
+    description: "Displays a menu to the user with a list of actions or options."
+  ) %>
+
+  <% page.with_installation(component_name: "dropdown_menu") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: dropdown_menu_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <div class="flex justify-center items-center p-8">
+        <%= render M9sh::DropdownMenuComponent.new do %>
+          <%= render M9sh::DropdownMenuTriggerComponent.new(class: "px-4 py-2 rounded-md border border-border bg-background hover:bg-muted transition-colors") do %>
+            Open
+          <% end %>
+          <%= render M9sh::DropdownMenuContentComponent.new do %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              Profile
+            <% end %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              Settings
+            <% end %>
+            <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              Logout
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: dropdown_menu_default_code,
+      ai_command: dropdown_menu_default_code
+    ) %>
+
+    <!-- With Icons Example -->
+    <% icons_html = capture do %>
+      <div class="flex justify-center items-center p-8">
+        <%= render M9sh::DropdownMenuComponent.new do %>
+          <%= render M9sh::DropdownMenuTriggerComponent.new(class: "px-4 py-2 rounded-md border border-border bg-background hover:bg-muted transition-colors") do %>
+            Open Menu
+          <% end %>
+          <%= render M9sh::DropdownMenuContentComponent.new do %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
+                <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/>
+                <circle cx="12" cy="7" r="4"/>
+              </svg>
+              Profile
+            <% end %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
+                <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/>
+                <circle cx="12" cy="12" r="3"/>
+              </svg>
+              Settings
+            <% end %>
+            <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-2">
+                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
+                <polyline points="16 17 21 12 16 7"/>
+                <line x1="21" y1="12" x2="9" y2="12"/>
+              </svg>
+              Logout
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Icons",
+      preview_content: icons_html,
+      code: dropdown_menu_with_icons_code,
+      ai_command: dropdown_menu_with_icons_code
+    ) %>
+
+    <!-- With Separators Example -->
+    <% separators_html = capture do %>
+      <div class="flex justify-center items-center p-8">
+        <%= render M9sh::DropdownMenuComponent.new do %>
+          <%= render M9sh::DropdownMenuTriggerComponent.new(class: "px-4 py-2 rounded-md border border-border bg-background hover:bg-muted transition-colors") do %>
+            Options
+          <% end %>
+          <%= render M9sh::DropdownMenuContentComponent.new do %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              New Tab
+            <% end %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              New Window
+            <% end %>
+            <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              History
+            <% end %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              Downloads
+            <% end %>
+            <%= render M9sh::DropdownMenuSeparatorComponent.new %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              Settings
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Separators",
+      preview_content: separators_html,
+      code: dropdown_menu_with_separators_code,
+      ai_command: dropdown_menu_with_separators_code
+    ) %>
+
+    <!-- Alignment Example -->
+    <% alignment_html = capture do %>
+      <div class="flex justify-center items-center gap-4 p-8">
+        <%= render M9sh::DropdownMenuComponent.new(align: "start") do %>
+          <%= render M9sh::DropdownMenuTriggerComponent.new(class: "px-4 py-2 rounded-md border border-border bg-background hover:bg-muted transition-colors text-sm") do %>
+            Align Start
+          <% end %>
+          <%= render M9sh::DropdownMenuContentComponent.new do %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              Item 1
+            <% end %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              Item 2
+            <% end %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              Item 3
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::DropdownMenuComponent.new(align: "end") do %>
+          <%= render M9sh::DropdownMenuTriggerComponent.new(class: "px-4 py-2 rounded-md border border-border bg-background hover:bg-muted transition-colors text-sm") do %>
+            Align End
+          <% end %>
+          <%= render M9sh::DropdownMenuContentComponent.new do %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              Item 1
+            <% end %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              Item 2
+            <% end %>
+            <%= render M9sh::DropdownMenuItemComponent.new do %>
+              Item 3
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Alignment",
+      preview_content: alignment_html,
+      code: dropdown_menu_alignment_code,
+      ai_command: dropdown_menu_alignment_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">DropdownMenuComponent</h3>
+
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "align",
+          type: "String",
+          default: '"end"',
+          description: "The alignment of the menu relative to the trigger. Options: 'start', 'end'"
+        },
+        {
+          name: "side",
+          type: "String",
+          default: '"bottom"',
+          description: "The preferred side of the trigger to render against. Options: 'top', 'bottom'"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">DropdownMenuTriggerComponent</h3>
+
+    <p class="text-sm text-muted-foreground">
+      The button that toggles the dropdown menu. Accepts all standard button attributes and can be styled with additional classes.
+    </p>
+
+    <h3 class="text-lg font-semibold mt-6">DropdownMenuContentComponent</h3>
+
+    <p class="text-sm text-muted-foreground">
+      The container for the dropdown menu items. Appears as a popover with shadow and border styling. Automatically positioned based on the parent component's align and side settings.
+    </p>
+
+    <h3 class="text-lg font-semibold mt-6">DropdownMenuItemComponent</h3>
+
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "href",
+          type: "String",
+          default: "nil",
+          description: "If provided, renders the item as a link instead of a button"
+        },
+        {
+          name: "method",
+          type: "String",
+          default: "nil",
+          description: "HTTP method for the link (e.g., :delete, :post)"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">DropdownMenuSeparatorComponent</h3>
+
+    <p class="text-sm text-muted-foreground">
+      A visual separator to group related menu items. Renders as a thin horizontal line.
+    </p>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Accessibility</h3>
+
+      <div class="space-y-3 text-sm">
+        <p>
+          The Dropdown Menu component is built with keyboard navigation and screen reader support:
+        </p>
+
+        <ul class="list-disc list-inside space-y-2 text-muted-foreground">
+          <li>
+            Toggle the menu by clicking the trigger button
+          </li>
+          <li>
+            The menu automatically closes when clicking outside or selecting an item
+          </li>
+          <li>
+            Menu items can be either buttons or links, supporting different interaction patterns
+          </li>
+          <li>
+            Items are styled with hover and focus states for clear visual feedback
+          </li>
+          <li>
+            Smooth transitions provide polished enter and exit animations
+          </li>
+          <li>
+            The menu is positioned absolutely and uses z-index to appear above other content
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Notes</h3>
+      <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
+        <li>
+          Use <code class="text-xs bg-muted px-1 py-0.5 rounded">DropdownMenuItemComponent</code> with the <code class="text-xs bg-muted px-1 py-0.5 rounded">href</code> parameter for navigation
+        </li>
+        <li>
+          Use <code class="text-xs bg-muted px-1 py-0.5 rounded">DropdownMenuItemComponent</code> without <code class="text-xs bg-muted px-1 py-0.5 rounded">href</code> for actions that trigger JavaScript or form submissions
+        </li>
+        <li>
+          Separators help organize menu items into logical groups
+        </li>
+        <li>
+          Icons can be added to menu items by including SVG elements in the item content
+        </li>
+        <li>
+          The menu automatically closes when an item is clicked
+        </li>
+        <li>
+          Use the <code class="text-xs bg-muted px-1 py-0.5 rounded">align</code> parameter to control whether the menu aligns to the start or end of the trigger
+        </li>
+        <li>
+          Multiple dropdown menus can exist on the same page independently
+        </li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

data/app/views/docs/components/hover_card.html.erb

@@ -0,0 +1,220 @@
+<%= render Docs::ComponentPageComponent.new(title: "Hover Card") do |page| %>
+  <% page.with_header(
+    name: "Hover Card",
+    description: "For sighted users to preview content available behind a link in a richer format."
+  ) %>
+
+  <% page.with_installation(component_name: "hover_card") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: hover_card_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <div class="flex justify-center items-center p-8">
+        <%= render M9sh::HoverCardComponent.new do |card| %>
+          <% card.with_trigger do %>
+            <span class="underline cursor-pointer text-sm font-medium">@username</span>
+          <% end %>
+          <% card.with_hover_content do %>
+            <div class="space-y-2">
+              <h4 class="text-sm font-semibold">@username</h4>
+              <p class="text-sm text-muted-foreground">
+                The hover card component is a rich preview that appears when hovering over a trigger element.
+              </p>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: hover_card_default_code,
+      ai_command: hover_card_default_code
+    ) %>
+
+    <!-- With Avatar Example -->
+    <% avatar_html = capture do %>
+      <div class="flex justify-center items-center p-8">
+        <%= render M9sh::HoverCardComponent.new do |card| %>
+          <% card.with_trigger do %>
+            <span class="underline cursor-pointer text-sm font-medium">@nextjs</span>
+          <% end %>
+          <% card.with_hover_content do %>
+            <div class="flex gap-4">
+              <%= render M9sh::AvatarComponent.new(
+                src: "https://github.com/vercel.png",
+                fallback: "VC",
+                size: :md
+              ) %>
+              <div class="space-y-1">
+                <h4 class="text-sm font-semibold">@nextjs</h4>
+                <p class="text-sm text-muted-foreground">
+                  The React Framework - created and maintained by @vercel.
+                </p>
+                <div class="flex items-center pt-2">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="mr-1">
+                    <rect x="2" y="7" width="20" height="14" rx="2" ry="2"/>
+                    <path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>
+                  </svg>
+                  <span class="text-xs text-muted-foreground">Joined December 2021</span>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Avatar and Content",
+      preview_content: avatar_html,
+      code: hover_card_with_avatar_code,
+      ai_command: hover_card_with_avatar_code
+    ) %>
+
+    <!-- Complex Content Example -->
+    <% complex_html = capture do %>
+      <div class="flex justify-center items-center p-8">
+        <%= render M9sh::HoverCardComponent.new(open_delay: 300, close_delay: 400) do |card| %>
+          <% card.with_trigger do %>
+            <span class="underline cursor-pointer text-sm font-medium">View Details</span>
+          <% end %>
+          <% card.with_hover_content do %>
+            <div class="space-y-3">
+              <div>
+                <h4 class="text-sm font-semibold mb-1">Product Information</h4>
+                <p class="text-xs text-muted-foreground">
+                  Hover over elements to see detailed information without navigating away from the current page.
+                </p>
+              </div>
+              <div class="border-t pt-3 space-y-2">
+                <div class="flex justify-between text-xs">
+                  <span class="text-muted-foreground">Price:</span>
+                  <span class="font-medium">$29.99</span>
+                </div>
+                <div class="flex justify-between text-xs">
+                  <span class="text-muted-foreground">In Stock:</span>
+                  <span class="font-medium text-green-600">Yes</span>
+                </div>
+                <div class="flex justify-between text-xs">
+                  <span class="text-muted-foreground">Rating:</span>
+                  <span class="font-medium">4.5/5</span>
+                </div>
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Complex Content",
+      preview_content: complex_html,
+      code: hover_card_complex_code,
+      ai_command: hover_card_complex_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">HoverCardComponent</h3>
+
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "open_delay",
+          type: "Number",
+          default: "200",
+          description: "The duration in milliseconds from when the mouse enters the trigger until the hover card opens"
+        },
+        {
+          name: "close_delay",
+          type: "Number",
+          default: "300",
+          description: "The duration in milliseconds from when the mouse leaves the trigger or content until the hover card closes"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Slots</h3>
+
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "trigger",
+          type: "Slot",
+          default: "-",
+          description: "The element that triggers the hover card. Typically a link or interactive element."
+        },
+        {
+          name: "hover_content",
+          type: "Slot",
+          default: "-",
+          description: "The rich content to display in the hover card"
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-4">
+      <h3 class="text-lg font-semibold">Accessibility</h3>
+
+      <div class="space-y-3 text-sm">
+        <p>
+          The Hover Card component is designed for sighted users and provides enhanced preview functionality:
+        </p>
+
+        <ul class="list-disc list-inside space-y-2 text-muted-foreground">
+          <li>
+            The hover card appears after a configurable delay when hovering over the trigger element
+          </li>
+          <li>
+            Users can move their mouse into the hover card content, which prevents it from closing
+          </li>
+          <li>
+            The card automatically closes when the mouse leaves both the trigger and content areas
+          </li>
+          <li>
+            Smooth animations with fade and zoom effects provide polished transitions
+          </li>
+          <li>
+            The content is positioned in a fixed-width container (w-64) by default with a popover style
+          </li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="mt-6 space-y-4">
+      <h3 class="text-lg font-semibold">Notes</h3>
+
+      <div class="space-y-3 text-sm">
+        <ul class="list-disc list-inside space-y-2 text-muted-foreground">
+          <li>
+            Hover cards are ideal for user profiles, product previews, and supplementary information
+          </li>
+          <li>
+            Unlike tooltips, hover cards can contain interactive elements and richer content
+          </li>
+          <li>
+            The <code class="text-xs bg-muted px-1 py-0.5 rounded">open_delay</code> prevents the card from appearing too quickly during casual mouse movements
+          </li>
+          <li>
+            The <code class="text-xs bg-muted px-1 py-0.5 rounded">close_delay</code> gives users time to move their mouse into the card content
+          </li>
+          <li>
+            Hover cards work well with Avatar, Badge, and other components to create rich previews
+          </li>
+          <li>
+            Content should be concise but can include multiple elements like images, text, and metadata
+          </li>
+        </ul>
+      </div>
+    </div>
+  <% end %>
+<% end %>