m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,232 @@
+<%= render Docs::ComponentPageComponent.new(title: "Alert Dialog") do |page| %>
+  <% page.with_header(
+    name: "Alert Dialog",
+    description: "A modal dialog that interrupts the user with important content and expects a response. Similar to Dialog but specifically for alerts and confirmations."
+  ) %>
+
+  <% page.with_installation(component_name: "alert_dialog") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: alert_dialog_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Confirmation Example -->
+    <% default_alert_dialog_html = capture do %>
+      <%= render M9sh::AlertDialogComponent.new do |alert| %>
+        <% alert.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Show Dialog
+          <% end %>
+        <% end %>
+        <% alert.with_title do %>
+          Are you absolutely sure?
+        <% end %>
+        <% alert.with_description do %>
+          This action cannot be undone. This will permanently delete your account
+          and remove your data from our servers.
+        <% end %>
+        <% alert.with_footer do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline, data: { action: "click->m9sh--alert-dialog#close" }) do %>
+            Cancel
+          <% end %>
+          <%= render M9sh::ButtonComponent.new(data: { action: "click->m9sh--alert-dialog#close" }) do %>
+            Continue
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default Confirmation",
+      preview_content: default_alert_dialog_html,
+      code: alert_dialog_default_code,
+      ai_command: alert_dialog_default_code
+    ) %>
+
+    <!-- Destructive Action Example -->
+    <% destructive_alert_dialog_html = capture do %>
+      <%= render M9sh::AlertDialogComponent.new do |alert| %>
+        <% alert.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :destructive) do %>
+            Delete Account
+          <% end %>
+        <% end %>
+        <% alert.with_title do %>
+          Delete Account
+        <% end %>
+        <% alert.with_description do %>
+          This action cannot be undone. This will permanently delete your account
+          and all associated data.
+        <% end %>
+        <% alert.with_footer do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline, data: { action: "click->m9sh--alert-dialog#close" }) do %>
+            Cancel
+          <% end %>
+          <%= render M9sh::ButtonComponent.new(variant: :destructive, data: { action: "click->m9sh--alert-dialog#close" }) do %>
+            Delete
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Destructive Action",
+      preview_content: destructive_alert_dialog_html,
+      code: alert_dialog_destructive_code,
+      ai_command: alert_dialog_destructive_code
+    ) %>
+
+    <!-- With Description Example -->
+    <% with_description_alert_dialog_html = capture do %>
+      <%= render M9sh::AlertDialogComponent.new do |alert| %>
+        <% alert.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Continue
+          <% end %>
+        <% end %>
+        <% alert.with_title do %>
+          Confirm your action
+        <% end %>
+        <% alert.with_description do %>
+          This will submit your form data. Please review your information before
+          continuing. You can still go back and make changes if needed.
+        <% end %>
+        <% alert.with_footer do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline, data: { action: "click->m9sh--alert-dialog#close" }) do %>
+            Go Back
+          <% end %>
+          <%= render M9sh::ButtonComponent.new(data: { action: "click->m9sh--alert-dialog#close" }) do %>
+            Submit
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Description",
+      preview_content: with_description_alert_dialog_html,
+      code: alert_dialog_with_description_code,
+      ai_command: alert_dialog_with_description_code
+    ) %>
+
+    <!-- Custom Content Example -->
+    <% custom_content_alert_dialog_html = capture do %>
+      <%= render M9sh::AlertDialogComponent.new do |alert| %>
+        <% alert.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Delete Items
+          <% end %>
+        <% end %>
+        <% alert.with_title do %>
+          Delete Multiple Items
+        <% end %>
+        <% alert.with_description do %>
+          You are about to delete 5 items. This action cannot be undone.
+        <% end %>
+        <% alert.with_alert_content do %>
+          <div class="rounded-md border p-3 mt-4 space-y-2">
+            <p class="text-sm font-medium">Items to be deleted:</p>
+            <ul class="text-sm text-muted-foreground space-y-1">
+              <li>- Document.pdf</li>
+              <li>- Image.jpg</li>
+              <li>- Spreadsheet.xlsx</li>
+              <li>- Presentation.pptx</li>
+              <li>- Notes.txt</li>
+            </ul>
+          </div>
+        <% end %>
+        <% alert.with_footer do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline, data: { action: "click->m9sh--alert-dialog#close" }) do %>
+            Cancel
+          <% end %>
+          <%= render M9sh::ButtonComponent.new(variant: :destructive, data: { action: "click->m9sh--alert-dialog#close" }) do %>
+            Delete All
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Custom Content",
+      preview_content: custom_content_alert_dialog_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">Alert Dialog Slots</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "trigger",
+          type: "Slot",
+          default: nil,
+          description: "The element that triggers the alert dialog to open (usually a button)"
+        },
+        {
+          name: "title",
+          type: "Slot",
+          default: nil,
+          description: "The title/heading of the alert dialog"
+        },
+        {
+          name: "description",
+          type: "Slot",
+          default: nil,
+          description: "The description text that appears below the title"
+        },
+        {
+          name: "alert_content",
+          type: "Slot",
+          default: nil,
+          description: "Optional additional content to display in the body of the alert"
+        },
+        {
+          name: "footer",
+          type: "Slot",
+          default: nil,
+          description: "Footer content for action buttons (typically Cancel and Confirm)"
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">JavaScript Actions</h3>
+      <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
+        <li><code>data-action="click->m9sh--alert-dialog#open"</code> - Opens the alert dialog</li>
+        <li><code>data-action="click->m9sh--alert-dialog#close"</code> - Closes the alert dialog</li>
+        <li>The alert dialog automatically closes when an action button is clicked</li>
+        <li>Unlike regular dialogs, clicking the overlay does not close the alert dialog (by design)</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Differences from Dialog</h3>
+      <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
+        <li>Alert Dialog is specifically for critical confirmations and alerts</li>
+        <li>Does not have a close button (X) - users must choose an action</li>
+        <li>Cannot be dismissed by clicking the backdrop</li>
+        <li>Uses <code>role="alertdialog"</code> for proper accessibility</li>
+        <li>Typically requires explicit user action before closing</li>
+        <li>Best used for destructive actions or important confirmations</li>
+      </ul>
+    </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>The alert dialog is centered on the screen with a dark overlay backdrop</li>
+        <li>Includes smooth animations for opening and closing</li>
+        <li>Automatically manages focus and accessibility with proper ARIA attributes</li>
+        <li>Always include at least two action buttons (e.g., Cancel and Confirm)</li>
+        <li>Use the destructive variant for delete or dangerous actions</li>
+        <li>The title and description help users understand the consequences of their action</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,207 @@
+<%= render Docs::ComponentPageComponent.new(title: "Avatar") do |page| %>
+  <% page.with_header(
+    name: "Avatar",
+    description: "Displays an image that represents a user or entity with fallback support for initials."
+  ) %>
+
+  <% page.with_installation(component_name: "avatar") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: avatar_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example with Image -->
+    <% default_avatar_html = capture do %>
+      <%= render M9sh::AvatarComponent.new(
+        src: "https://github.com/shadcn.png",
+        alt: "User Avatar"
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_avatar_html,
+      code: avatar_usage_code,
+      ai_command: avatar_usage_code
+    ) %>
+
+    <!-- With Fallback Initials -->
+    <% fallback_avatar_html = capture do %>
+      <%= render M9sh::AvatarComponent.new(
+        fallback: "JD"
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Fallback Initials",
+      preview_content: fallback_avatar_html,
+      code: avatar_with_fallback_code,
+      ai_command: avatar_with_fallback_code
+    ) %>
+
+    <!-- Image with Fallback -->
+    <% image_with_fallback_html = capture do %>
+      <div class="flex items-center gap-4">
+        <%= render M9sh::AvatarComponent.new(
+          src: "https://github.com/shadcn.png",
+          alt: "User Avatar",
+          fallback: "CN"
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          src: "https://invalid-image-url.png",
+          alt: "Invalid Avatar",
+          fallback: "AB"
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Image with Fallback",
+      preview_content: image_with_fallback_html,
+      code: avatar_with_fallback_example_code,
+      ai_command: avatar_with_fallback_example_code
+    ) %>
+
+    <!-- Different Sizes -->
+    <% sizes_avatar_html = capture do %>
+      <div class="flex items-center gap-4">
+        <%= render M9sh::AvatarComponent.new(
+          src: "https://github.com/shadcn.png",
+          alt: "Small Avatar",
+          size: :sm
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          src: "https://github.com/shadcn.png",
+          alt: "Medium Avatar",
+          size: :md
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          src: "https://github.com/shadcn.png",
+          alt: "Large Avatar",
+          size: :lg
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          src: "https://github.com/shadcn.png",
+          alt: "Extra Large Avatar",
+          size: :xl
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Sizes",
+      preview_content: sizes_avatar_html,
+      code: avatar_sizes_code,
+      ai_command: avatar_sizes_code
+    ) %>
+
+    <!-- Fallback Sizes -->
+    <% fallback_sizes_html = capture do %>
+      <div class="flex items-center gap-4">
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "SM",
+          size: :sm
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "MD",
+          size: :md
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "LG",
+          size: :lg
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "XL",
+          size: :xl
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Fallback Sizes",
+      preview_content: fallback_sizes_html,
+      code: avatar_fallback_sizes_code,
+      ai_command: avatar_fallback_sizes_code
+    ) %>
+
+    <!-- Multiple Avatars -->
+    <% multiple_avatars_html = capture do %>
+      <div class="flex -space-x-2">
+        <%= render M9sh::AvatarComponent.new(
+          src: "https://github.com/shadcn.png",
+          alt: "Avatar 1",
+          class: "border-2 border-background"
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "JD",
+          class: "border-2 border-background"
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "AB",
+          class: "border-2 border-background"
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "CD",
+          class: "border-2 border-background"
+        ) %>
+        <%= render M9sh::AvatarComponent.new(
+          fallback: "+3",
+          class: "border-2 border-background"
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Avatar Stack",
+      preview_content: multiple_avatars_html,
+      code: avatar_stack_code,
+      ai_command: avatar_stack_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "src",
+          type: "String",
+          default: "nil",
+          description: "The image source URL for the avatar"
+        },
+        {
+          name: "alt",
+          type: "String",
+          default: "nil",
+          description: "Alternative text for the avatar image"
+        },
+        {
+          name: "fallback",
+          type: "String",
+          default: "nil",
+          description: "Text to display when image is not available (typically initials)"
+        },
+        {
+          name: "size",
+          type: "Symbol",
+          default: ":md",
+          description: "Size of the avatar. Options: :sm (24px), :md (32px), :lg (40px), :xl (48px)"
+        }
+      ]
+    ) %>
+
+    <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>When both src and fallback are provided, the image will be displayed if it loads successfully, otherwise the fallback text will be shown</li>
+        <li>The avatar is always rendered as a circular element with rounded-full styling</li>
+        <li>The fallback background uses the muted color scheme for consistency</li>
+        <li>Images are automatically sized to fill the avatar container with proper aspect ratio</li>
+        <li>Use the class parameter to add custom styling like borders for avatar stacks</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,145 @@
+<%= render Docs::ComponentPageComponent.new(title: "Badge") do |page| %>
+  <% page.with_header(
+    name: "Badge",
+    description: "Displays a badge for labels, tags, and status indicators."
+  ) %>
+
+  <% page.with_installation(component_name: "badge") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: badge_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <%= render M9sh::BadgeComponent.new do %>
+        Badge
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: badge_usage_code,
+      ai_command: badge_usage_code
+    ) %>
+
+    <!-- Variants Example -->
+    <% variants_html = capture do %>
+      <div class="flex flex-wrap gap-2">
+        <%= render M9sh::BadgeComponent.new(variant: :default) do %>
+          Default
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+          Secondary
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :destructive) do %>
+          Destructive
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :outline) do %>
+          Outline
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :success) do %>
+          Success
+        <% end %>
+        <%= render M9sh::BadgeComponent.new(variant: :warning) do %>
+          Warning
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Variants",
+      preview_content: variants_html,
+      code: badge_variants_code,
+      ai_command: badge_variants_code
+    ) %>
+
+    <!-- Secondary Example -->
+    <% secondary_html = capture do %>
+      <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+        Secondary
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Secondary",
+      preview_content: secondary_html,
+      code: badge_secondary_code,
+      ai_command: badge_secondary_code
+    ) %>
+
+    <!-- Destructive Example -->
+    <% destructive_html = capture do %>
+      <%= render M9sh::BadgeComponent.new(variant: :destructive) do %>
+        Destructive
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Destructive",
+      preview_content: destructive_html,
+      code: badge_destructive_code,
+      ai_command: badge_destructive_code
+    ) %>
+
+    <!-- Outline Example -->
+    <% outline_html = capture do %>
+      <%= render M9sh::BadgeComponent.new(variant: :outline) do %>
+        Outline
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Outline",
+      preview_content: outline_html,
+      code: badge_outline_code,
+      ai_command: badge_outline_code
+    ) %>
+
+    <!-- Success Example -->
+    <% success_html = capture do %>
+      <%= render M9sh::BadgeComponent.new(variant: :success) do %>
+        Success
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Success",
+      preview_content: success_html,
+      code: badge_success_code,
+      ai_command: badge_success_code
+    ) %>
+
+    <!-- Warning Example -->
+    <% warning_html = capture do %>
+      <%= render M9sh::BadgeComponent.new(variant: :warning) do %>
+        Warning
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Warning",
+      preview_content: warning_html,
+      code: badge_warning_code,
+      ai_command: badge_warning_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "variant",
+          type: "Symbol",
+          default: ":default",
+          description: "The visual style variant. Options: :default, :secondary, :destructive, :outline, :success, :warning"
+        }
+      ]
+    ) %>
+  <% end %>
+<% end %>