m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,252 @@
+<%= render Docs::ComponentPageComponent.new(title: "Collapsible") do |page| %>
+  <% page.with_header(
+    name: "Collapsible",
+    description: "An interactive component that expands and collapses content."
+  ) %>
+
+  <% page.with_installation(component_name: "collapsible") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: collapsible_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <div class="w-full max-w-md">
+        <%= render M9sh::CollapsibleComponent.new(class: "space-y-2") do |c| %>
+          <% c.with_trigger do %>
+            <button class="flex w-full items-center justify-between rounded-md bg-muted px-4 py-2 text-sm font-medium transition-colors hover:bg-muted">
+              <span>@peduarte starred 3 repositories</span>
+              <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="transition-transform">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </button>
+          <% end %>
+          <% c.with_collapsible_content do %>
+            <div class="space-y-2 pt-2">
+              <div class="rounded-md border px-4 py-3 text-sm">
+                @radix-ui/primitives
+              </div>
+              <div class="rounded-md border px-4 py-3 text-sm">
+                @radix-ui/colors
+              </div>
+              <div class="rounded-md border px-4 py-3 text-sm">
+                @stitches/react
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: collapsible_default_code,
+      ai_command: collapsible_default_code
+    ) %>
+
+    <!-- Open by Default Example -->
+    <% open_html = capture do %>
+      <div class="w-full max-w-md">
+        <%= render M9sh::CollapsibleComponent.new(open: true, class: "space-y-2") do |c| %>
+          <% c.with_trigger do %>
+            <button class="flex w-full items-center justify-between rounded-md bg-muted px-4 py-2 text-sm font-medium transition-colors hover:bg-muted">
+              <span>Project Information</span>
+              <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="transition-transform">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </button>
+          <% end %>
+          <% c.with_collapsible_content do %>
+            <div class="space-y-2 pt-2">
+              <div class="rounded-md border px-4 py-3 text-sm">
+                <strong>Name:</strong> m9sh Components
+              </div>
+              <div class="rounded-md border px-4 py-3 text-sm">
+                <strong>Status:</strong> Active Development
+              </div>
+              <div class="rounded-md border px-4 py-3 text-sm">
+                <strong>Version:</strong> 1.0.0
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Open by Default",
+      preview_content: open_html,
+      code: collapsible_open_code,
+      ai_command: collapsible_open_code
+    ) %>
+
+    <!-- With Button Example -->
+    <% button_html = capture do %>
+      <div class="w-full max-w-md">
+        <%= render M9sh::CollapsibleComponent.new(class: "space-y-2") do |c| %>
+          <% c.with_trigger do %>
+            <%= render M9sh::ButtonComponent.new(variant: :outline, class: "w-full justify-between") do %>
+              <span>Show more details</span>
+              <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">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            <% end %>
+          <% end %>
+          <% c.with_collapsible_content do %>
+            <div class="rounded-md border p-4 text-sm">
+              <p class="text-muted-foreground">
+                This is additional content that can be toggled. The collapsible component
+                works with any trigger element, including buttons, links, or custom elements.
+              </p>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Button Component",
+      preview_content: button_html,
+      code: collapsible_button_code,
+      ai_command: collapsible_button_code
+    ) %>
+
+    <!-- FAQ Example -->
+    <% faq_html = capture do %>
+      <div class="w-full max-w-md space-y-4">
+        <%= render M9sh::CollapsibleComponent.new(class: "space-y-2") do |c| %>
+          <% c.with_trigger do %>
+            <button class="flex w-full items-center justify-between rounded-md border px-4 py-2 text-sm font-medium transition-colors hover:bg-muted">
+              <span>What is m9sh Components?</span>
+              <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">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </button>
+          <% end %>
+          <% c.with_collapsible_content do %>
+            <div class="border-x border-b rounded-b-md px-4 py-3 text-sm text-muted-foreground">
+              m9sh Components is a collection of reusable UI components for Rails applications,
+              built with ViewComponent and styled with Tailwind CSS.
+            </div>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CollapsibleComponent.new(class: "space-y-2") do |c| %>
+          <% c.with_trigger do %>
+            <button class="flex w-full items-center justify-between rounded-md border px-4 py-2 text-sm font-medium transition-colors hover:bg-muted">
+              <span>How do I install it?</span>
+              <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">
+                <polyline points="6 9 12 15 18 9"/>
+              </svg>
+            </button>
+          <% end %>
+          <% c.with_collapsible_content do %>
+            <div class="border-x border-b rounded-b-md px-4 py-3 text-sm text-muted-foreground">
+              Simply copy the component files into your Rails application and start using them
+              in your views. Each component is self-contained and easy to customize.
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "FAQ Style",
+      preview_content: faq_html,
+      code: collapsible_faq_code,
+      ai_command: collapsible_faq_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">CollapsibleComponent</h3>
+
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "open",
+          type: "Boolean",
+          default: "false",
+          description: "Whether the collapsible is open by default"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Slots</h3>
+
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "trigger",
+          type: "Slot",
+          default: "-",
+          description: "The element that toggles the collapsible when clicked. Can be any clickable element like a button, link, or div."
+        },
+        {
+          name: "collapsible_content",
+          type: "Slot",
+          default: "-",
+          description: "The content that will be shown or hidden when the trigger is clicked"
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-4">
+      <h3 class="text-lg font-semibold">Accessibility</h3>
+
+      <div class="space-y-3 text-sm">
+        <p>
+          The Collapsible component uses Stimulus to manage state and animations:
+        </p>
+
+        <ul class="list-disc list-inside space-y-2 text-muted-foreground">
+          <li>
+            Animated height transitions provide smooth visual feedback when expanding/collapsing
+          </li>
+          <li>
+            The trigger can be any interactive element - ensure it's keyboard accessible
+          </li>
+          <li>
+            Consider adding <code class="text-xs bg-muted px-1 py-0.5 rounded">aria-expanded</code> and <code class="text-xs bg-muted px-1 py-0.5 rounded">aria-controls</code> attributes to the trigger for better screen reader support
+          </li>
+          <li>
+            The component uses <code class="text-xs bg-muted px-1 py-0.5 rounded">data-state</code> attributes for styling based on open/closed state
+          </li>
+          <li>
+            Transitions are handled via CSS with a 300ms duration for smooth animations
+          </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>
+            The trigger slot is required and must contain a clickable element
+          </li>
+          <li>
+            The component automatically attaches a click handler to the trigger element
+          </li>
+          <li>
+            Use the <code class="text-xs bg-muted px-1 py-0.5 rounded">open</code> parameter to set the initial state
+          </li>
+          <li>
+            Multiple collapsible components can exist on the same page independently
+          </li>
+          <li>
+            The component works well with other m9sh components like Button, Card, etc.
+          </li>
+        </ul>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,323 @@
+<%= render Docs::ComponentPageComponent.new(title: "Dialog") do |page| %>
+  <% page.with_header(
+    name: "Dialog",
+    description: "A modal dialog that interrupts the user with important content and expects a response."
+  ) %>
+
+  <% page.with_installation(component_name: "dialog") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: dialog_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_dialog_html = capture do %>
+      <%= render M9sh::DialogComponent.new do |dialog| %>
+        <% dialog.with_dialog_trigger do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Open Dialog
+          <% end %>
+        <% end %>
+        <% dialog.with_dialog_content do |content| %>
+          <% content.with_dialog_header do |header| %>
+            <% header.with_dialog_title do %>
+              Are you absolutely sure?
+            <% end %>
+            <% header.with_dialog_description do %>
+              This action cannot be undone. This will permanently delete your account
+              and remove your data from our servers.
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_dialog_html,
+      code: dialog_default_code,
+      ai_command: dialog_default_code
+    ) %>
+
+    <!-- With Header Example -->
+    <% with_header_dialog_html = capture do %>
+      <%= render M9sh::DialogComponent.new do |dialog| %>
+        <% dialog.with_dialog_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Edit Profile
+          <% end %>
+        <% end %>
+        <% dialog.with_dialog_content do |content| %>
+          <% content.with_dialog_header do |header| %>
+            <% header.with_dialog_title do %>
+              Edit profile
+            <% end %>
+            <% header.with_dialog_description do %>
+              Make changes to your profile here. Click save when you're done.
+            <% end %>
+          <% end %>
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(text: "Name") %>
+              <%= render M9sh::InputComponent.new(type: "text", placeholder: "Pedro Duarte") %>
+            </div>
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(text: "Username") %>
+              <%= render M9sh::InputComponent.new(type: "text", placeholder: "@peduarte") %>
+            </div>
+          </div>
+          <% content.with_dialog_footer do %>
+            <%= render M9sh::ButtonComponent.new(type: "submit") do %>
+              Save changes
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Header",
+      preview_content: with_header_dialog_html,
+      code: dialog_with_header_code,
+      ai_command: dialog_with_header_code
+    ) %>
+
+    <!-- With Footer Example -->
+    <% with_footer_dialog_html = capture do %>
+      <%= render M9sh::DialogComponent.new do |dialog| %>
+        <% dialog.with_dialog_trigger do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Open Dialog
+          <% end %>
+        <% end %>
+        <% dialog.with_dialog_content do |content| %>
+          <% content.with_dialog_header do |header| %>
+            <% header.with_dialog_title do %>
+              Confirm Action
+            <% end %>
+            <% header.with_dialog_description do %>
+              This is a dialog with a footer containing action buttons.
+            <% end %>
+          <% end %>
+          <p class="text-sm">Are you sure you want to proceed with this action?</p>
+          <% content.with_dialog_footer do %>
+            <%= render M9sh::DialogCloseComponent.new(as_child: true) do %>
+              <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                Cancel
+              <% end %>
+            <% end %>
+            <%= render M9sh::ButtonComponent.new do %>
+              Continue
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Footer",
+      preview_content: with_footer_dialog_html,
+      code: dialog_with_footer_code,
+      ai_command: dialog_with_footer_code
+    ) %>
+
+    <!-- Form Dialog Example -->
+    <% form_dialog_html = capture do %>
+      <%= render M9sh::DialogComponent.new do |dialog| %>
+        <% dialog.with_dialog_trigger do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+            Share
+          <% end %>
+        <% end %>
+        <% dialog.with_dialog_content do |content| %>
+          <% content.with_dialog_header do |header| %>
+            <% header.with_dialog_title do %>
+              Share link
+            <% end %>
+            <% header.with_dialog_description do %>
+              Anyone who has this link will be able to view this.
+            <% end %>
+          <% end %>
+          <div class="flex items-center space-x-2">
+            <%= render M9sh::InputComponent.new(
+              value: "https://ui.shadcn.com/docs/installation",
+              readonly: true,
+              class: "flex-1"
+            ) %>
+            <%= render M9sh::ButtonComponent.new(type: "button", variant: :secondary, size: :sm) do %>
+              Copy
+            <% end %>
+          </div>
+          <% content.with_dialog_footer do %>
+            <%= render M9sh::DialogCloseComponent.new %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Form Dialog",
+      preview_content: form_dialog_html,
+      code: dialog_form_code,
+      ai_command: dialog_form_code
+    ) %>
+
+    <!-- Scrollable Content Example -->
+    <% scrollable_dialog_html = capture do %>
+      <%= render M9sh::DialogComponent.new do |dialog| %>
+        <% dialog.with_dialog_trigger do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            View Terms
+          <% end %>
+        <% end %>
+        <% dialog.with_dialog_content do |content| %>
+          <% content.with_dialog_header do |header| %>
+            <% header.with_dialog_title do %>
+              Terms and Conditions
+            <% end %>
+            <% header.with_dialog_description do %>
+              Please read and accept our terms and conditions.
+            <% end %>
+          <% end %>
+          <div class="max-h-[300px] overflow-y-auto space-y-4">
+            <p class="text-sm">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+            <p class="text-sm">
+              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            </p>
+            <p class="text-sm">
+              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            </p>
+            <p class="text-sm">
+              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+            </p>
+          </div>
+          <% content.with_dialog_footer do %>
+            <%= render M9sh::DialogCloseComponent.new(as_child: true) do %>
+              <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                Decline
+              <% end %>
+            <% end %>
+            <%= render M9sh::ButtonComponent.new do %>
+              Accept
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Scrollable Content",
+      preview_content: scrollable_dialog_html,
+      code: dialog_scrollable_code,
+      ai_command: dialog_scrollable_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">Dialog Component Props</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "open",
+          type: "Boolean",
+          default: "false",
+          description: "Controls whether the dialog is open by default"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Dialog Slots</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "dialog_trigger",
+          type: "Slot",
+          default: nil,
+          description: "The element that triggers the dialog to open. Use with_dialog_trigger. Supports as_child pattern."
+        },
+        {
+          name: "dialog_content",
+          type: "Slot",
+          default: nil,
+          description: "The main dialog content container. Use with_dialog_content. Contains header, body content, and footer."
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Dialog Content Slots</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "dialog_header",
+          type: "Slot",
+          default: nil,
+          description: "Header container with title and description. Use with_dialog_header."
+        },
+        {
+          name: "dialog_footer",
+          type: "Slot",
+          default: nil,
+          description: "Footer container for action buttons. Use with_dialog_footer."
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Dialog Header Slots</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "dialog_title",
+          type: "Slot",
+          default: nil,
+          description: "The title/heading of the dialog. Use with_dialog_title within dialog_header."
+        },
+        {
+          name: "dialog_description",
+          type: "Slot",
+          default: nil,
+          description: "The description text below the title. Use with_dialog_description within dialog_header."
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Additional Components</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "DialogCloseComponent",
+          type: "Component",
+          default: nil,
+          description: "A close button component. Supports as_child: true to wrap custom elements with close functionality."
+        }
+      ]
+    ) %>
+
+    <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--dialog#open"</code> - Opens the dialog</li>
+        <li><code>data-action="click->m9sh--dialog#close"</code> - Closes the dialog</li>
+        <li>The dialog automatically closes when clicking outside (on the overlay)</li>
+        <li>The close button (X) is automatically rendered in the top-right corner</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 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>The dialog can be closed by clicking the backdrop or the close button</li>
+        <li>Content is automatically scrollable if it exceeds the dialog height</li>
+        <li>Use the footer slot for action buttons like Cancel and Confirm</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>