m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,267 @@
+<%= render Docs::ComponentPageComponent.new(title: "Popover") do |page| %>
+  <% page.with_header(
+    name: "Popover",
+    description: "Displays rich content in a portal, triggered by a button or other element."
+  ) %>
+
+  <% page.with_installation(component_name: "popover") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: popover_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_popover_html = capture do %>
+      <%= render M9sh::PopoverComponent.new do |popover| %>
+        <% popover.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Open Popover
+          <% end %>
+        <% end %>
+        <% popover.with_popover_content do %>
+          <div class="space-y-2">
+            <h4 class="font-medium text-sm">Popover Content</h4>
+            <p class="text-sm text-muted-foreground">
+              This is a simple popover with some text content. Popovers are great for displaying additional information without navigating away.
+            </p>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_popover_html,
+      code: popover_usage_code,
+      ai_command: popover_usage_code
+    ) %>
+
+    <!-- With Form Example -->
+    <% form_popover_html = capture do %>
+      <%= render M9sh::PopoverComponent.new do |popover| %>
+        <% popover.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) 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" class="mr-2">
+              <circle cx="12" cy="12" r="3"/>
+              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
+            </svg>
+            Settings
+          <% end %>
+        <% end %>
+        <% popover.with_popover_content do %>
+          <div class="space-y-4">
+            <h4 class="font-medium text-sm">Dimensions</h4>
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for_id: "popover-width") do %>
+                Width
+              <% end %>
+              <%= render M9sh::InputComponent.new(
+                id: "popover-width",
+                type: "number",
+                placeholder: "100",
+                value: "300"
+              ) %>
+            </div>
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for_id: "popover-height") do %>
+                Height
+              <% end %>
+              <%= render M9sh::InputComponent.new(
+                id: "popover-height",
+                type: "number",
+                placeholder: "100",
+                value: "200"
+              ) %>
+            </div>
+            <%= render M9sh::ButtonComponent.new(class: "w-full") do %>
+              Save Changes
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Form",
+      preview_content: form_popover_html,
+      code: popover_with_form_code,
+      ai_command: popover_with_form_code
+    ) %>
+
+    <!-- With Rich Content Example -->
+    <% rich_popover_html = capture do %>
+      <%= render M9sh::PopoverComponent.new do |popover| %>
+        <% popover.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) 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" 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>
+            User Info
+          <% end %>
+        <% end %>
+        <% popover.with_popover_content do %>
+          <div class="space-y-3">
+            <div class="flex items-center gap-3">
+              <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center font-semibold text-primary">
+                JD
+              </div>
+              <div>
+                <h4 class="font-semibold text-sm">John Doe</h4>
+                <p class="text-xs text-muted-foreground">john@example.com</p>
+              </div>
+            </div>
+            <div class="border-t pt-3">
+              <p class="text-xs text-muted-foreground mb-2">Bio</p>
+              <p class="text-sm">Software developer passionate about building great user experiences.</p>
+            </div>
+            <div class="flex gap-2 pt-2">
+              <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm, class: "flex-1") do %>
+                View Profile
+              <% end %>
+              <%= render M9sh::ButtonComponent.new(size: :sm, class: "flex-1") do %>
+                Message
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Rich Content",
+      preview_content: rich_popover_html,
+      code: popover_rich_content_code,
+      ai_command: popover_rich_content_code
+    ) %>
+
+    <!-- Different Positions Example -->
+    <% positions_popover_html = capture do %>
+      <div class="flex flex-col items-center gap-4">
+        <div>
+          <%= render M9sh::PopoverComponent.new(side: "top") do |popover| %>
+            <% popover.with_trigger do %>
+              <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                Top
+              <% end %>
+            <% end %>
+            <% popover.with_popover_content do %>
+              <p class="text-sm">This popover appears at the top.</p>
+            <% end %>
+          <% end %>
+        </div>
+        <div class="flex gap-4">
+          <%= render M9sh::PopoverComponent.new(side: "left") do |popover| %>
+            <% popover.with_trigger do %>
+              <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                Left
+              <% end %>
+            <% end %>
+            <% popover.with_popover_content do %>
+              <p class="text-sm">This popover appears on the left.</p>
+            <% end %>
+          <% end %>
+
+          <%= render M9sh::PopoverComponent.new(side: "right") do |popover| %>
+            <% popover.with_trigger do %>
+              <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                Right
+              <% end %>
+            <% end %>
+            <% popover.with_popover_content do %>
+              <p class="text-sm">This popover appears on the right.</p>
+            <% end %>
+          <% end %>
+        </div>
+        <div>
+          <%= render M9sh::PopoverComponent.new(side: "bottom") do |popover| %>
+            <% popover.with_trigger do %>
+              <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                Bottom
+              <% end %>
+            <% end %>
+            <% popover.with_popover_content do %>
+              <p class="text-sm">This popover appears at the bottom.</p>
+            <% end %>
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Different Positions",
+      preview_content: positions_popover_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">Popover Component</h3>
+
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "align",
+          type: "String",
+          default: '"center"',
+          description: "The alignment of the popover relative to the trigger. Options: 'start', 'center', 'end'"
+        },
+        {
+          name: "side",
+          type: "String",
+          default: '"bottom"',
+          description: "The side of the trigger where the popover appears. Options: 'top', 'right', 'bottom', 'left'"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Popover Slots</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "trigger",
+          type: "Slot",
+          default: nil,
+          description: "The element that triggers the popover to open. Typically a button or link."
+        },
+        {
+          name: "popover_content",
+          type: "Slot",
+          default: nil,
+          description: "The content displayed inside the popover. Can contain any HTML including forms, text, images, etc."
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Features</h3>
+      <ul class="list-disc list-inside text-sm text-muted-foreground space-y-1">
+        <li>Can be positioned on any side of the trigger (top, right, bottom, left)</li>
+        <li>Supports alignment options for fine-tuned positioning</li>
+        <li>Toggles on click - clicking the trigger again closes the popover</li>
+        <li>Automatically closes when clicking outside the popover</li>
+        <li>Smooth fade and zoom animations for opening and closing</li>
+        <li>Fixed width (w-72 / 18rem) by default for consistent sizing</li>
+        <li>Supports rich content including forms, images, and interactive elements</li>
+        <li>Includes subtle border and shadow for visual depth</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 popover uses Stimulus controllers for interactive behavior</li>
+        <li>Click outside or click the trigger again to close the popover</li>
+        <li>The popover content has a fixed width - use custom classes to override if needed</li>
+        <li>Both trigger and popover_content slots are required for the component to function</li>
+        <li>The popover is positioned absolutely relative to its inline-block container</li>
+        <li>Consider using Sheet component for larger amounts of content or complex interactions</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,107 @@
+<%= render Docs::ComponentPageComponent.new(title: "Progress") do |page| %>
+  <% page.with_header(
+    name: "Progress",
+    description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar."
+  ) %>
+
+  <% page.with_installation(component_name: "progress") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: progress_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <%= render M9sh::ProgressComponent.new(value: 60) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: progress_usage_code,
+      ai_command: progress_usage_code
+    ) %>
+
+    <!-- Different Values Example -->
+    <% values_html = capture do %>
+      <div class="space-y-4 w-full">
+        <div>
+          <p class="text-sm text-muted-foreground mb-2">25%</p>
+          <%= render M9sh::ProgressComponent.new(value: 25) %>
+        </div>
+        <div>
+          <p class="text-sm text-muted-foreground mb-2">50%</p>
+          <%= render M9sh::ProgressComponent.new(value: 50) %>
+        </div>
+        <div>
+          <p class="text-sm text-muted-foreground mb-2">75%</p>
+          <%= render M9sh::ProgressComponent.new(value: 75) %>
+        </div>
+        <div>
+          <p class="text-sm text-muted-foreground mb-2">100%</p>
+          <%= render M9sh::ProgressComponent.new(value: 100) %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Different Values",
+      preview_content: values_html,
+      code: progress_values_code,
+      ai_command: progress_values_code
+    ) %>
+
+    <!-- Indeterminate Example -->
+    <% indeterminate_html = capture do %>
+      <div class="space-y-2 w-full">
+        <%= render M9sh::ProgressComponent.new(value: 0) %>
+        <p class="text-sm text-muted-foreground">Loading...</p>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Indeterminate",
+      preview_content: indeterminate_html,
+      code: progress_indeterminate_code,
+      ai_command: progress_indeterminate_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "value",
+          type: "Number",
+          default: "0",
+          description: "The current progress value. Should be between 0 and max."
+        },
+        {
+          name: "max",
+          type: "Number",
+          default: "100",
+          description: "The maximum progress value. Used to calculate the percentage."
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Accessibility</h3>
+      <ul class="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+        <li>Uses proper ARIA attributes (<code>role="progressbar"</code>, <code>aria-valuenow</code>, <code>aria-valuemin</code>, <code>aria-valuemax</code>)</li>
+        <li>Works with screen readers to announce progress updates</li>
+        <li>Follows WAI-ARIA design pattern for progress bars</li>
+      </ul>
+    </div>
+
+    <div class="mt-4 p-4 border rounded-lg bg-muted">
+      <p class="text-sm text-muted-foreground">
+        <strong>Note:</strong> The progress component automatically calculates the percentage based on the <code class="text-sm">value</code> and <code class="text-sm">max</code> props. The visual indicator will fill from left to right as the value increases.
+      </p>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,209 @@
+<%= render Docs::ComponentPageComponent.new(title: "Radio Group") do |page| %>
+  <% page.with_header(name: "Radio Group", description: "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.") %>
+  <% page.with_installation(component_name: "radio_group") %>
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(code: radio_group_usage_code, language: "erb") %>
+  <% end %>
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <%= render M9sh::RadioGroupComponent.new(name: "default") do |radio_group| %>
+        <% radio_group.with_item(value: "option1", label: "Option 1", checked: true) %>
+        <% radio_group.with_item(value: "option2", label: "Option 2") %>
+        <% radio_group.with_item(value: "option3", label: "Option 3") %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: radio_group_default_code,
+      ai_command: radio_group_default_code
+    ) %>
+
+    <!-- With Labels Example -->
+    <% with_labels_html = capture do %>
+      <div class="space-y-4">
+        <%= render M9sh::LabelComponent.new do %>
+          Select your display preference
+        <% end %>
+        <%= render M9sh::RadioGroupComponent.new(name: "display") do |radio_group| %>
+          <% radio_group.with_item(value: "default", label: "Default", checked: true) %>
+          <% radio_group.with_item(value: "comfortable", label: "Comfortable") %>
+          <% radio_group.with_item(value: "compact", label: "Compact") %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Labels",
+      preview_content: with_labels_html,
+      code: radio_group_with_label_code,
+      ai_command: radio_group_with_label_code
+    ) %>
+
+    <!-- With Description Example -->
+    <% with_description_html = capture do %>
+      <%= render M9sh::RadioGroupComponent.new(name: "plan") do |radio_group| %>
+        <% radio_group.with_item(
+          value: "free",
+          label: "Free",
+          description: "Perfect for personal use",
+          checked: true
+        ) %>
+        <% radio_group.with_item(
+          value: "pro",
+          label: "Pro",
+          description: "Best for professionals"
+        ) %>
+        <% radio_group.with_item(
+          value: "enterprise",
+          label: "Enterprise",
+          description: "For large organizations"
+        ) %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Description",
+      preview_content: with_description_html,
+      code: radio_group_with_description_code,
+      ai_command: radio_group_with_description_code
+    ) %>
+
+    <!-- Disabled State Example -->
+    <% disabled_html = capture do %>
+      <%= render M9sh::RadioGroupComponent.new(name: "disabled-group") do |radio_group| %>
+        <% radio_group.with_item(value: "option1", label: "Available option", checked: true) %>
+        <% radio_group.with_item(value: "option2", label: "Disabled option", disabled: true) %>
+        <% radio_group.with_item(value: "option3", label: "Another available option") %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Disabled State",
+      preview_content: disabled_html,
+      code: radio_group_disabled_code,
+      ai_command: radio_group_disabled_code
+    ) %>
+
+    <!-- Horizontal Layout Example -->
+    <% horizontal_html = capture do %>
+      <%= render M9sh::RadioGroupComponent.new(name: "horizontal", class: "flex flex-row space-x-4") do |radio_group| %>
+        <% radio_group.with_item(value: "yes", label: "Yes", checked: true) %>
+        <% radio_group.with_item(value: "no", label: "No") %>
+        <% radio_group.with_item(value: "maybe", label: "Maybe") %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Horizontal Layout",
+      preview_content: horizontal_html,
+      code: radio_group_horizontal_code,
+      ai_command: radio_group_horizontal_code
+    ) %>
+
+    <!-- Form Integration Example -->
+    <% form_html = capture do %>
+      <div class="border rounded-lg p-6 max-w-md">
+        <h3 class="text-lg font-semibold mb-4">Notification Settings</h3>
+        <div class="space-y-6">
+          <div class="space-y-3">
+            <div class="font-medium">Email frequency</div>
+            <%= render M9sh::RadioGroupComponent.new(name: "email_frequency") do |radio_group| %>
+              <% radio_group.with_item(
+                value: "realtime",
+                label: "Realtime",
+                description: "Get notified immediately",
+                checked: true
+              ) %>
+              <% radio_group.with_item(
+                value: "daily",
+                label: "Daily digest",
+                description: "Once per day at 9 AM"
+              ) %>
+              <% radio_group.with_item(
+                value: "weekly",
+                label: "Weekly digest",
+                description: "Every Monday morning"
+              ) %>
+              <% radio_group.with_item(
+                value: "never",
+                label: "Never",
+                description: "Disable email notifications"
+              ) %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Form Integration",
+      preview_content: form_html,
+      code: radio_group_form_integration_code,
+      ai_command: radio_group_form_integration_code
+    ) %>
+  <% end %>
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">RadioGroupComponent</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "name",
+          type: "String",
+          default: "nil",
+          description: "The name attribute for the radio group (required for form submissions)"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">ItemComponent (via with_item)</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "value",
+          type: "String",
+          default: "nil",
+          description: "The value for this radio button (required)"
+        },
+        {
+          name: "label",
+          type: "String",
+          default: "nil",
+          description: "The label text for this radio button (required)"
+        },
+        {
+          name: "description",
+          type: "String",
+          default: "nil",
+          description: "Optional description text shown below the label"
+        },
+        {
+          name: "checked",
+          type: "Boolean",
+          default: "false",
+          description: "Whether this radio button is checked by default"
+        },
+        {
+          name: "disabled",
+          type: "Boolean",
+          default: "false",
+          description: "Whether this radio button is disabled"
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Additional Notes</h3>
+      <ul class="list-disc list-inside space-y-2 text-sm text-muted-foreground">
+        <li>The radio group component uses a Stimulus controller (m9sh--radio) for state management</li>
+        <li>Only one radio button in a group can be selected at a time</li>
+        <li>The component automatically manages ARIA attributes for accessibility</li>
+        <li>By default, radio buttons are displayed vertically. Use the class parameter with flex utilities for horizontal layout</li>
+        <li>All additional HTML attributes can be passed via extra_attrs and will be applied to the container element</li>
+        <li>The radio group follows the WAI-ARIA design pattern for radio groups</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>