m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,196 @@
+<%= render Docs::ComponentPageComponent.new(title: "Accordion") do |page| %>
+  <% page.with_header(
+    name: "Accordion",
+    description: "A vertically stacked set of interactive headings that each reveal a section of content."
+  ) %>
+
+  <% page.with_installation(component_name: "accordion") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: accordion_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% accordion_html = capture do %>
+      <div class="w-full max-w-md">
+        <% accordion = M9sh::AccordionComponent.new(type: "single", collapsible: true) %>
+        <% accordion.with_item(value: "item-1") do |item| %>
+          <% item.with_trigger do %>
+            Is it accessible?
+          <% end %>
+          <% item.with_body do %>
+            Yes. It adheres to the WAI-ARIA design pattern.
+          <% end %>
+        <% end %>
+
+        <% accordion.with_item(value: "item-2") do |item| %>
+          <% item.with_trigger do %>
+            Is it styled?
+          <% end %>
+          <% item.with_body do %>
+            Yes. It comes with default styles that matches the other components' aesthetic.
+          <% end %>
+        <% end %>
+
+        <% accordion.with_item(value: "item-3") do |item| %>
+          <% item.with_trigger do %>
+            Is it animated?
+          <% end %>
+          <% item.with_body do %>
+            Yes. It's animated by default with smooth height transitions.
+          <% end %>
+        <% end %>
+        <%= render accordion %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: accordion_html,
+      code: accordion_example_code,
+      ai_command: accordion_example_code
+    ) %>
+
+    <!-- Multiple Open Example -->
+    <% multiple_accordion_html = capture do %>
+      <div class="w-full max-w-md">
+        <% accordion = M9sh::AccordionComponent.new(type: "multiple") %>
+        <% accordion.with_item(value: "item-1") do |item| %>
+          <% item.with_trigger do %>
+            First Question
+          <% end %>
+          <% item.with_body do %>
+            This accordion allows multiple items to be open at the same time.
+          <% end %>
+        <% end %>
+
+        <% accordion.with_item(value: "item-2") do |item| %>
+          <% item.with_trigger do %>
+            Second Question
+          <% end %>
+          <% item.with_body do %>
+            Try opening this item while the first one is open!
+          <% end %>
+        <% end %>
+
+        <% accordion.with_item(value: "item-3") do |item| %>
+          <% item.with_trigger do %>
+            Third Question
+          <% end %>
+          <% item.with_body do %>
+            Both items above can stay open while you open this one.
+          <% end %>
+        <% end %>
+        <%= render accordion %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Multiple items open",
+      preview_content: multiple_accordion_html,
+      code: accordion_multiple_code,
+      ai_command: accordion_multiple_code
+    ) %>
+
+    <!-- Default Value Example -->
+    <% default_accordion_html = capture do %>
+      <div class="w-full max-w-md">
+        <% accordion = M9sh::AccordionComponent.new(type: "single", default_value: "item-2") %>
+        <% accordion.with_item(value: "item-1") do |item| %>
+          <% item.with_trigger do %>
+            First Item
+          <% end %>
+          <% item.with_body do %>
+            This item is closed by default.
+          <% end %>
+        <% end %>
+
+        <% accordion.with_item(value: "item-2") do |item| %>
+          <% item.with_trigger do %>
+            Second Item (Default Open)
+          <% end %>
+          <% item.with_body do %>
+            This item is open by default because we set default_value: "item-2".
+          <% end %>
+        <% end %>
+
+        <% accordion.with_item(value: "item-3") do |item| %>
+          <% item.with_trigger do %>
+            Third Item
+          <% end %>
+          <% item.with_body do %>
+            This item is also closed by default.
+          <% end %>
+        <% end %>
+        <%= render accordion %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default open item",
+      preview_content: default_accordion_html,
+      code: accordion_default_value_code,
+      ai_command: accordion_default_value_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">Accordion</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "type",
+          type: "String",
+          default: '"single"',
+          description: 'Controls whether one or multiple items can be open. Options: "single" or "multiple"'
+        },
+        {
+          name: "collapsible",
+          type: "Boolean",
+          default: "true",
+          description: "When type is 'single', allows closing the open item by clicking it again"
+        },
+        {
+          name: "default_value",
+          type: "String",
+          default: "nil",
+          description: "The value of the item to open by default"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Item</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "value",
+          type: "String",
+          default: nil,
+          description: "A unique value for the item (required)"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Slots</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "trigger",
+          type: "Slot",
+          default: nil,
+          description: "The button that toggles the item"
+        },
+        {
+          name: "body",
+          type: "Slot",
+          default: nil,
+          description: "The content that expands/collapses"
+        }
+      ]
+    ) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,272 @@
+<%= render Docs::ComponentPageComponent.new(title: "Alert") do |page| %>
+  <% page.with_header(
+    name: "Alert",
+    description: "Displays a callout for user attention with optional icon, title, and description."
+  ) %>
+
+  <% page.with_installation(component_name: "alert") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: alert_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_alert_html = capture do %>
+      <%= render M9sh::AlertComponent.new do |alert| %>
+        <% alert.with_title do %>
+          Heads up!
+        <% end %>
+        <% alert.with_description do %>
+          You can add components to your app using the CLI.
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_alert_html,
+      code: alert_default_code,
+      ai_command: alert_default_code
+    ) %>
+
+    <!-- Destructive Example -->
+    <% destructive_alert_html = capture do %>
+      <%= render M9sh::AlertComponent.new(variant: :destructive) do |alert| %>
+        <% alert.with_title do %>
+          Error
+        <% end %>
+        <% alert.with_description do %>
+          Your session has expired. Please log in again.
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Destructive",
+      preview_content: destructive_alert_html,
+      code: alert_destructive_code,
+      ai_command: alert_destructive_code
+    ) %>
+
+    <!-- With Icon Example -->
+    <% with_icon_alert_html = capture do %>
+      <%= render M9sh::AlertComponent.new do |alert| %>
+        <% alert.with_icon 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" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"/>
+            <line x1="12" y1="16" x2="12" y2="12"/>
+            <line x1="12" y1="8" x2="12.01" y2="8"/>
+          </svg>
+        <% end %>
+        <% alert.with_title do %>
+          Important Notice
+        <% end %>
+        <% alert.with_description do %>
+          This is an alert with an icon for better visual communication.
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Icon",
+      preview_content: with_icon_alert_html,
+      code: alert_with_icon_code,
+      ai_command: alert_with_icon_code
+    ) %>
+
+    <!-- Destructive With Icon Example -->
+    <% destructive_with_icon_html = capture do %>
+      <%= render M9sh::AlertComponent.new(variant: :destructive) do |alert| %>
+        <% alert.with_icon 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" stroke-linecap="round" stroke-linejoin="round">
+            <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
+            <line x1="12" y1="9" x2="12" y2="13"/>
+            <line x1="12" y1="17" x2="12.01" y2="17"/>
+          </svg>
+        <% end %>
+        <% alert.with_title do %>
+          Warning
+        <% end %>
+        <% alert.with_description do %>
+          This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Destructive With Icon",
+      preview_content: destructive_with_icon_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+
+    <!-- Title Only Example -->
+    <% title_only_html = capture do %>
+      <div class="space-y-4">
+        <%= render M9sh::AlertComponent.new do |alert| %>
+          <% alert.with_icon 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" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
+              <path d="m9 12 2 2 4-4"/>
+            </svg>
+          <% end %>
+          <% alert.with_title do %>
+            Your message has been sent successfully!
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::AlertComponent.new(variant: :destructive) do |alert| %>
+          <% alert.with_icon 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" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="15" y1="9" x2="9" y2="15"/>
+              <line x1="9" y1="9" x2="15" y2="15"/>
+            </svg>
+          <% end %>
+          <% alert.with_title do %>
+            Unable to process your request.
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Title Only",
+      preview_content: title_only_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+
+    <!-- Description Only Example -->
+    <% description_only_html = capture do %>
+      <%= render M9sh::AlertComponent.new do |alert| %>
+        <% alert.with_icon 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" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/>
+            <circle cx="12" cy="12" r="3"/>
+          </svg>
+        <% end %>
+        <% alert.with_description do %>
+          This is a simple alert with only an icon and description text, no title.
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Description Only",
+      preview_content: description_only_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+
+    <!-- Multiple Alerts Example -->
+    <% multiple_alerts_html = capture do %>
+      <div class="space-y-4">
+        <%= render M9sh::AlertComponent.new do |alert| %>
+          <% alert.with_icon 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" stroke-linecap="round" stroke-linejoin="round">
+              <circle cx="12" cy="12" r="10"/>
+              <line x1="12" y1="16" x2="12" y2="12"/>
+              <line x1="12" y1="8" x2="12.01" y2="8"/>
+            </svg>
+          <% end %>
+          <% alert.with_title do %>
+            System Maintenance
+          <% end %>
+          <% alert.with_description do %>
+            We will be performing scheduled maintenance on Sunday, October 15th from 2:00 AM to 6:00 AM EST.
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::AlertComponent.new(variant: :destructive) do |alert| %>
+          <% alert.with_icon 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" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/>
+              <line x1="12" y1="9" x2="12" y2="13"/>
+              <line x1="12" y1="17" x2="12.01" y2="17"/>
+            </svg>
+          <% end %>
+          <% alert.with_title do %>
+            Action Required
+          <% end %>
+          <% alert.with_description do %>
+            Your payment method is about to expire. Please update your billing information to avoid service interruption.
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::AlertComponent.new do |alert| %>
+          <% alert.with_icon 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" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>
+            </svg>
+          <% end %>
+          <% alert.with_title do %>
+            New Feature Available
+          <% end %>
+          <% alert.with_description do %>
+            Check out our new dark mode! You can enable it in your account settings under Appearance.
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Multiple Alerts",
+      preview_content: multiple_alerts_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">Alert Component Props</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "variant",
+          type: "Symbol",
+          default: ":default",
+          description: "The visual style variant. Options: :default, :destructive"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Alert Slots</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "icon",
+          type: "Slot",
+          default: nil,
+          description: "Optional icon to display at the start of the alert (usually an SVG)"
+        },
+        {
+          name: "title",
+          type: "Slot",
+          default: nil,
+          description: "The title/heading of the alert"
+        },
+        {
+          name: "description",
+          type: "Slot",
+          default: nil,
+          description: "The description/body text of the alert"
+        }
+      ]
+    ) %>
+
+    <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 automatically adjusts its layout based on whether an icon is present</li>
+        <li>All slots are optional - you can use any combination of icon, title, and description</li>
+        <li>The destructive variant is useful for error messages and critical warnings</li>
+        <li>The component includes proper ARIA role="alert" for accessibility</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>