m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,378 @@
+<%= render Docs::ComponentPageComponent.new(title: "Card") do |page| %>
+  <% page.with_header(
+    name: "Card",
+    description: "Displays a flexible container component with optional header, body, and footer sections for organizing content."
+  ) %>
+
+  <% page.with_installation(component_name: "card") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: card_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Card Example -->
+    <% default_card_html = capture do %>
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_body do %>
+          <p class="text-sm">
+            This is a simple card with just body content. Cards provide a clean container with subtle borders and shadows.
+          </p>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_card_html,
+      code: card_usage_code,
+      ai_command: card_usage_code
+    ) %>
+
+    <!-- Card with Header -->
+    <% card_with_header_html = capture do %>
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Card Title
+          <% end %>
+          <% header.with_description do %>
+            Card description provides additional context
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <p class="text-sm">
+            This card includes a header with a title and description. The header is automatically styled with appropriate spacing and typography.
+          </p>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Header",
+      preview_content: card_with_header_html,
+      code: card_with_header_code,
+      ai_command: card_with_header_code
+    ) %>
+
+    <!-- Card with Footer -->
+    <% card_with_footer_html = capture do %>
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_body do %>
+          <p class="text-sm">
+            This card includes a footer section below the main content, perfect for action buttons or metadata.
+          </p>
+        <% end %>
+        <% card.with_footer do %>
+          <p class="text-sm text-muted-foreground">Last updated: 2 hours ago</p>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Footer",
+      preview_content: card_with_footer_html,
+      code: card_with_footer_code,
+      ai_command: card_with_footer_code
+    ) %>
+
+    <!-- Complete Card Example -->
+    <% complete_card_html = capture do %>
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Create Project
+          <% end %>
+          <% header.with_description do %>
+            Deploy your new project in one-click.
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for_id: "project-name") do %>
+                Name
+              <% end %>
+              <%= render M9sh::InputComponent.new(
+                id: "project-name",
+                type: "text",
+                placeholder: "Name of your project"
+              ) %>
+            </div>
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for_id: "framework") do %>
+                Framework
+              <% end %>
+              <%= render M9sh::SelectComponent.new(
+                name: "framework",
+                options: ["Next.js", "SvelteKit", "Astro", "Nuxt.js"]
+              ) %>
+            </div>
+          </div>
+        <% end %>
+        <% card.with_footer do %>
+          <div class="flex justify-between w-full">
+            <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+              Cancel
+            <% end %>
+            <%= render M9sh::ButtonComponent.new do %>
+              Deploy
+            <% end %>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Complete Card",
+      preview_content: complete_card_html,
+      code: card_complete_code,
+      ai_command: card_complete_code
+    ) %>
+
+    <!-- Card with Header Action -->
+    <% card_with_action_html = capture do %>
+      <%= render M9sh::CardComponent.new(class: "max-w-md") do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Notifications
+          <% end %>
+          <% header.with_description do %>
+            You have 3 unread messages.
+          <% end %>
+          <% header.with_action do %>
+            <%= render M9sh::ButtonComponent.new(variant: :ghost, size: :sm) do %>
+              Mark all as read
+            <% end %>
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-3">
+            <div class="flex items-start gap-3 p-3 rounded-md hover:bg-muted transition-colors border border-transparent hover:border-border">
+              <div class="flex-shrink-0 w-2 h-2 rounded-full bg-primary mt-2"></div>
+              <div class="flex-1 space-y-1">
+                <p class="text-sm font-medium">Your call has been confirmed.</p>
+                <p class="text-xs text-muted-foreground">5 minutes ago</p>
+              </div>
+            </div>
+            <div class="flex items-start gap-3 p-3 rounded-md hover:bg-muted transition-colors border border-transparent hover:border-border">
+              <div class="flex-shrink-0 w-2 h-2 rounded-full bg-primary mt-2"></div>
+              <div class="flex-1 space-y-1">
+                <p class="text-sm font-medium">You have a new message!</p>
+                <p class="text-xs text-muted-foreground">10 minutes ago</p>
+              </div>
+            </div>
+            <div class="flex items-start gap-3 p-3 rounded-md hover:bg-muted transition-colors border border-transparent hover:border-border">
+              <div class="flex-shrink-0 w-2 h-2 rounded-full bg-primary mt-2"></div>
+              <div class="flex-1 space-y-1">
+                <p class="text-sm font-medium">Your subscription is expiring soon!</p>
+                <p class="text-xs text-muted-foreground">2 hours ago</p>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Header Action",
+      preview_content: card_with_action_html,
+      code: card_with_action_code,
+      ai_command: card_with_action_code
+    ) %>
+
+    <!-- Multiple Cards in a Grid -->
+    <% multiple_cards_html = capture do %>
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title do %>
+              Total Revenue
+            <% end %>
+            <% header.with_description do %>
+              Monthly earnings
+            <% end %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-2xl font-bold">$45,231.89</div>
+            <p class="text-xs text-muted-foreground mt-1">+20.1% from last month</p>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title do %>
+              Subscriptions
+            <% end %>
+            <% header.with_description do %>
+              Active subscribers
+            <% end %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-2xl font-bold">+2,350</div>
+            <p class="text-xs text-muted-foreground mt-1">+180.1% from last month</p>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title do %>
+              Active Now
+            <% end %>
+            <% header.with_description do %>
+              Current online users
+            <% end %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-2xl font-bold">+573</div>
+            <p class="text-xs text-muted-foreground mt-1">+201 since last hour</p>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Multiple Cards",
+      preview_content: multiple_cards_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+
+    <!-- Card with Custom Content -->
+    <% custom_content_card_html = capture do %>
+      <%= render M9sh::CardComponent.new(class: "max-w-md") do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title do %>
+            Team Members
+          <% end %>
+          <% header.with_description do %>
+            Invite your team members to collaborate.
+          <% end %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <div class="flex items-center justify-between p-2 rounded-md hover:bg-muted transition-colors">
+              <div class="flex items-center gap-3">
+                <%= render M9sh::AvatarComponent.new(fallback: "JD", class: "h-10 w-10") %>
+                <div>
+                  <p class="text-sm font-medium">John Doe</p>
+                  <p class="text-xs text-muted-foreground">john@example.com</p>
+                </div>
+              </div>
+              <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+                Owner
+              <% end %>
+            </div>
+            <div class="flex items-center justify-between p-2 rounded-md hover:bg-muted transition-colors">
+              <div class="flex items-center gap-3">
+                <%= render M9sh::AvatarComponent.new(fallback: "JS", class: "h-10 w-10") %>
+                <div>
+                  <p class="text-sm font-medium">Jane Smith</p>
+                  <p class="text-xs text-muted-foreground">jane@example.com</p>
+                </div>
+              </div>
+              <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+                Admin
+              <% end %>
+            </div>
+            <div class="flex items-center justify-between p-2 rounded-md hover:bg-muted transition-colors">
+              <div class="flex items-center gap-3">
+                <%= render M9sh::AvatarComponent.new(fallback: "BJ", class: "h-10 w-10") %>
+                <div>
+                  <p class="text-sm font-medium">Bob Johnson</p>
+                  <p class="text-xs text-muted-foreground">bob@example.com</p>
+                </div>
+              </div>
+              <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+                Member
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+        <% card.with_footer do %>
+          <%= render M9sh::ButtonComponent.new(class: "w-full") do %>
+            Invite Team Member
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Custom Content",
+      preview_content: custom_content_card_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">Card Component</h3>
+    <p class="text-sm text-muted-foreground mb-4">
+      The Card component accepts all standard HTML attributes which are passed through to the root div element.
+    </p>
+
+    <h3 class="text-lg font-semibold mt-6">Card Slots</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "header",
+          type: "HeaderComponent",
+          default: nil,
+          description: "Optional header section. Supports title, description, and action slots"
+        },
+        {
+          name: "body",
+          type: "Slot",
+          default: nil,
+          description: "Main content area of the card"
+        },
+        {
+          name: "footer",
+          type: "Slot",
+          default: nil,
+          description: "Optional footer section for actions or metadata"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Header Component Slots</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "title",
+          type: "Slot",
+          default: nil,
+          description: "The title/heading text displayed in the header"
+        },
+        {
+          name: "description",
+          type: "Slot",
+          default: nil,
+          description: "Optional description text displayed below the title"
+        },
+        {
+          name: "action",
+          type: "Slot",
+          default: nil,
+          description: "Optional action element (e.g., button, link) displayed in the top-right corner of the header"
+        }
+      ]
+    ) %>
+
+    <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>All slots (header, body, footer) are optional and can be used in any combination</li>
+        <li>The card includes hover effects that enhance the border and shadow on mouse over</li>
+        <li>The header component supports a grid layout when an action slot is provided</li>
+        <li>The header title and description are automatically styled with appropriate typography</li>
+        <li>The body content is wrapped in a container with horizontal padding for consistent spacing</li>
+        <li>The footer automatically aligns items with proper spacing</li>
+        <li>Cards are responsive and work well in grid layouts (as shown in the Multiple Cards example)</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,212 @@
+<%= render Docs::ComponentPageComponent.new(title: "Checkbox") do |page| %>
+  <% page.with_header(name: "Checkbox", description: "A control that allows the user to toggle between checked and not checked.") %>
+  <% page.with_installation(component_name: "checkbox") %>
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(code: checkbox_usage_code, language: "erb") %>
+  <% end %>
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <%= render M9sh::CheckboxComponent.new(name: "default") %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: checkbox_usage_code,
+      ai_command: checkbox_usage_code
+    ) %>
+
+    <!-- With Label Example -->
+    <% with_label_html = capture do %>
+      <div class="flex items-center space-x-2">
+        <%= render M9sh::CheckboxComponent.new(name: "terms", id: "terms") %>
+        <%= render M9sh::LabelComponent.new(for_id: "terms") do %>
+          Accept terms and conditions
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Label",
+      preview_content: with_label_html,
+      code: checkbox_with_label_code,
+      ai_command: checkbox_with_label_code
+    ) %>
+
+    <!-- Checked State Example -->
+    <% checked_html = capture do %>
+      <div class="flex items-center space-x-2">
+        <%= render M9sh::CheckboxComponent.new(name: "checked", id: "checked", checked: true) %>
+        <%= render M9sh::LabelComponent.new(for_id: "checked") do %>
+          This checkbox is checked by default
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Checked State",
+      preview_content: checked_html,
+      code: checkbox_checked_code,
+      ai_command: checkbox_checked_code
+    ) %>
+
+    <!-- Disabled State Example -->
+    <% disabled_html = capture do %>
+      <div class="flex flex-col space-y-4">
+        <div class="flex items-center space-x-2">
+          <%= render M9sh::CheckboxComponent.new(name: "disabled", id: "disabled", disabled: true) %>
+          <%= render M9sh::LabelComponent.new(for_id: "disabled") do %>
+            Disabled unchecked
+          <% end %>
+        </div>
+        <div class="flex items-center space-x-2">
+          <%= render M9sh::CheckboxComponent.new(name: "disabled_checked", id: "disabled_checked", checked: true, disabled: true) %>
+          <%= render M9sh::LabelComponent.new(for_id: "disabled_checked") do %>
+            Disabled checked
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Disabled State",
+      preview_content: disabled_html,
+      code: checkbox_disabled_code,
+      ai_command: checkbox_disabled_code
+    ) %>
+
+    <!-- Multiple Checkboxes Example -->
+    <% multiple_html = capture do %>
+      <div class="space-y-3">
+        <div class="flex items-center space-x-2">
+          <%= render M9sh::CheckboxComponent.new(name: "preferences[]", value: "email", id: "email_notifications") %>
+          <%= render M9sh::LabelComponent.new(for_id: "email_notifications") do %>
+            Email notifications
+          <% end %>
+        </div>
+        <div class="flex items-center space-x-2">
+          <%= render M9sh::CheckboxComponent.new(name: "preferences[]", value: "sms", id: "sms_notifications", checked: true) %>
+          <%= render M9sh::LabelComponent.new(for_id: "sms_notifications") do %>
+            SMS notifications
+          <% end %>
+        </div>
+        <div class="flex items-center space-x-2">
+          <%= render M9sh::CheckboxComponent.new(name: "preferences[]", value: "push", id: "push_notifications") %>
+          <%= render M9sh::LabelComponent.new(for_id: "push_notifications") do %>
+            Push notifications
+          <% end %>
+        </div>
+        <div class="flex items-center space-x-2">
+          <%= render M9sh::CheckboxComponent.new(name: "preferences[]", value: "newsletter", id: "newsletter", checked: true) %>
+          <%= render M9sh::LabelComponent.new(for_id: "newsletter") do %>
+            Weekly newsletter
+          <% end %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Multiple Checkboxes",
+      preview_content: multiple_html,
+      code: checkbox_multiple_code,
+      ai_command: checkbox_multiple_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">Account Settings</h3>
+        <div class="space-y-4">
+          <div class="flex items-start space-x-2">
+            <%= render M9sh::CheckboxComponent.new(name: "account[two_factor]", id: "two_factor", checked: true) %>
+            <div class="grid gap-1.5 leading-none">
+              <%= render M9sh::LabelComponent.new(for_id: "two_factor", class: "font-medium") do %>
+                Enable two-factor authentication
+              <% end %>
+              <p class="text-sm text-muted-foreground">
+                Add an extra layer of security to your account.
+              </p>
+            </div>
+          </div>
+          <div class="flex items-start space-x-2">
+            <%= render M9sh::CheckboxComponent.new(name: "account[public_profile]", id: "public_profile") %>
+            <div class="grid gap-1.5 leading-none">
+              <%= render M9sh::LabelComponent.new(for_id: "public_profile", class: "font-medium") do %>
+                Public profile
+              <% end %>
+              <p class="text-sm text-muted-foreground">
+                Make your profile visible to everyone.
+              </p>
+            </div>
+          </div>
+          <div class="flex items-start space-x-2">
+            <%= render M9sh::CheckboxComponent.new(name: "account[marketing]", id: "marketing") %>
+            <div class="grid gap-1.5 leading-none">
+              <%= render M9sh::LabelComponent.new(for_id: "marketing", class: "font-medium") do %>
+                Marketing emails
+              <% end %>
+              <p class="text-sm text-muted-foreground">
+                Receive emails about new products and features.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Form Integration",
+      preview_content: form_html,
+      code: checkbox_form_code,
+      ai_command: checkbox_form_code
+    ) %>
+  <% end %>
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "name",
+          type: "String",
+          default: "nil",
+          description: "The name attribute for the checkbox input element"
+        },
+        {
+          name: "checked",
+          type: "Boolean",
+          default: "false",
+          description: "Whether the checkbox is checked by default"
+        },
+        {
+          name: "value",
+          type: "String",
+          default: '"1"',
+          description: "The value attribute for the checkbox input element"
+        },
+        {
+          name: "disabled",
+          type: "Boolean",
+          default: "false",
+          description: "Whether the checkbox is disabled"
+        },
+        {
+          name: "id",
+          type: "String",
+          default: "nil",
+          description: "The id attribute for the checkbox input element (useful for associating with labels)"
+        }
+      ]
+    ) %>
+
+    <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 checkbox component includes a Stimulus controller (m9sh--checkbox) for enhanced interactivity</li>
+        <li>The component automatically manages the data-state attribute for checked/unchecked states</li>
+        <li>All additional HTML attributes can be passed via extra_attrs and will be applied to the input element</li>
+        <li>The checkbox follows the WAI-ARIA design pattern for accessibility</li>
+        <li>For multiple checkboxes with the same name, use array notation (e.g., name: "preferences[]")</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>