m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,264 @@
+<%= render Docs::ComponentPageComponent.new(title: "Breadcrumb") do |page| %>
+  <% page.with_header(
+    name: "Breadcrumb",
+    description: "Displays the path to the current resource using a hierarchy of links."
+  ) %>
+
+  <% page.with_installation(component_name: "breadcrumb") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: breadcrumb_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_breadcrumb_html = capture do %>
+      <%= render M9sh::BreadcrumbComponent.new do |breadcrumb| %>
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Home", "#", class: "hover:text-foreground transition-colors" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Components", "#", class: "hover:text-foreground transition-colors" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item(current: true) do |item| %>
+          <% item.with_page do %>
+            Breadcrumb
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_breadcrumb_html,
+      code: breadcrumb_default_code,
+      ai_command: breadcrumb_default_code
+    ) %>
+
+    <!-- With Icons Example -->
+    <% with_icons_html = capture do %>
+      <%= render M9sh::BreadcrumbComponent.new do |breadcrumb| %>
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "#", class: "flex items-center gap-1 hover:text-foreground transition-colors" 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="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
+                <polyline points="9 22 9 12 15 12 15 22"/>
+              </svg>
+              Home
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Documents", "#", class: "hover:text-foreground transition-colors" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item(current: true) do |item| %>
+          <% item.with_page do %>
+            README.md
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Icons",
+      preview_content: with_icons_html,
+      code: breadcrumb_with_icons_code,
+      ai_command: breadcrumb_with_icons_code
+    ) %>
+
+    <!-- With Dropdown Example -->
+    <% with_dropdown_html = capture do %>
+      <%= render M9sh::BreadcrumbComponent.new do |breadcrumb| %>
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Home", "#", class: "hover:text-foreground transition-colors" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item do |item| %>
+          <div class="relative group">
+            <button type="button" class="flex items-center gap-1 hover:text-foreground transition-colors">
+              <span>...</span>
+              <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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>
+          </div>
+        <% end %>
+
+        <% breadcrumb.with_item do |item| %>
+          <% item.with_link do %>
+            <%= link_to "Components", "#", class: "hover:text-foreground transition-colors" %>
+          <% end %>
+        <% end %>
+
+        <% breadcrumb.with_item(current: true) do |item| %>
+          <% item.with_page do %>
+            Breadcrumb
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Collapsed Items (Dropdown)",
+      preview_content: with_dropdown_html,
+      code: breadcrumb_dropdown_code,
+      ai_command: breadcrumb_dropdown_code
+    ) %>
+
+    <!-- Multiple Breadcrumbs Example -->
+    <% multiple_breadcrumb_html = capture do %>
+      <div class="space-y-4">
+        <%= render M9sh::BreadcrumbComponent.new do |breadcrumb| %>
+          <% breadcrumb.with_item do |item| %>
+            <% item.with_link do %>
+              <%= link_to "Home", "#", class: "hover:text-foreground transition-colors" %>
+            <% end %>
+          <% end %>
+
+          <% breadcrumb.with_item do |item| %>
+            <% item.with_link do %>
+              <%= link_to "Library", "#", class: "hover:text-foreground transition-colors" %>
+            <% end %>
+          <% end %>
+
+          <% breadcrumb.with_item(current: true) do |item| %>
+            <% item.with_page do %>
+              Data
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::BreadcrumbComponent.new do |breadcrumb| %>
+          <% breadcrumb.with_item do |item| %>
+            <% item.with_link do %>
+              <%= link_to "App", "#", class: "hover:text-foreground transition-colors" %>
+            <% end %>
+          <% end %>
+
+          <% breadcrumb.with_item do |item| %>
+            <% item.with_link do %>
+              <%= link_to "Products", "#", class: "hover:text-foreground transition-colors" %>
+            <% end %>
+          <% end %>
+
+          <% breadcrumb.with_item(current: true) do |item| %>
+            <% item.with_page do %>
+              Product Details
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Multiple Breadcrumbs",
+      preview_content: multiple_breadcrumb_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+
+    <!-- Responsive Example -->
+    <% responsive_breadcrumb_html = capture do %>
+      <div class="w-full">
+        <%= render M9sh::BreadcrumbComponent.new do |breadcrumb| %>
+          <% breadcrumb.with_item do |item| %>
+            <% item.with_link do %>
+              <%= link_to "Dashboard", "#", class: "hover:text-foreground transition-colors" %>
+            <% end %>
+          <% end %>
+
+          <% breadcrumb.with_item do |item| %>
+            <% item.with_link do %>
+              <%= link_to "Projects", "#", class: "hover:text-foreground transition-colors" %>
+            <% end %>
+          <% end %>
+
+          <% breadcrumb.with_item do |item| %>
+            <% item.with_link do %>
+              <%= link_to "Web Development", "#", class: "hover:text-foreground transition-colors" %>
+            <% end %>
+          <% end %>
+
+          <% breadcrumb.with_item do |item| %>
+            <% item.with_link do %>
+              <%= link_to "E-Commerce", "#", class: "hover:text-foreground transition-colors" %>
+            <% end %>
+          <% end %>
+
+          <% breadcrumb.with_item(current: true) do |item| %>
+            <% item.with_page do %>
+              Shopping Cart Implementation
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Responsive (Long Path)",
+      preview_content: responsive_breadcrumb_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">Breadcrumb Component</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "class_name",
+          type: "String",
+          default: "nil",
+          description: "Additional CSS classes to add to the nav element"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Item Component</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "current",
+          type: "Boolean",
+          default: "false",
+          description: "Whether this item represents the current page"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Item Slots</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "link",
+          type: "Slot",
+          default: nil,
+          description: "Content for a navigable breadcrumb item (usually a link_to)"
+        },
+        {
+          name: "page",
+          type: "Slot",
+          default: nil,
+          description: "Content for the current page (non-navigable)"
+        }
+      ]
+    ) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,229 @@
+<%= render Docs::ComponentPageComponent.new(title: "Button") do |page| %>
+  <% page.with_header(
+    name: "Button",
+    description: "Displays a button or a component that looks like a button."
+  ) %>
+
+  <% page.with_installation(component_name: "button") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: button_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% button = M9sh::ButtonComponent.new %>
+    <% button_html = capture do %>
+      <%= render button do %>
+        Button
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: button_html,
+      code: button_default_code,
+      ai_command: button_default_code
+    ) %>
+
+    <!-- Variants Example -->
+    <% variants_html = capture do %>
+      <div class="flex flex-wrap gap-2">
+        <%= render M9sh::ButtonComponent.new(variant: :default) do %>
+          Default
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(variant: :secondary) do %>
+          Secondary
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(variant: :destructive) do %>
+          Destructive
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+          Outline
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(variant: :ghost) do %>
+          Ghost
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(variant: :link) do %>
+          Link
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Variants",
+      preview_content: variants_html,
+      code: button_variants_code,
+      ai_command: button_variants_code
+    ) %>
+
+    <!-- Sizes Example -->
+    <% sizes_html = capture do %>
+      <div class="flex items-center gap-2">
+        <%= render M9sh::ButtonComponent.new(size: :sm) do %>
+          Small
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(size: :md) do %>
+          Medium
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(size: :lg) do %>
+          Large
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Sizes",
+      preview_content: sizes_html,
+      code: button_sizes_code,
+      ai_command: button_sizes_code
+    ) %>
+
+    <!-- Disabled Example -->
+    <% disabled_html = capture do %>
+      <div class="flex gap-2">
+        <%= render M9sh::ButtonComponent.new(disabled: true) do %>
+          Disabled Default
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(variant: :secondary, disabled: true) do %>
+          Disabled Secondary
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(variant: :outline, disabled: true) do %>
+          Disabled Outline
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Disabled",
+      preview_content: disabled_html,
+      code: button_disabled_code,
+      ai_command: button_disabled_code
+    ) %>
+
+    <!-- Icon Button Example -->
+    <% icon_html = capture do %>
+      <div class="flex gap-2">
+        <%= render M9sh::ButtonComponent.new(variant: :outline, size: :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="M6 9l6 6 6-6"/>
+          </svg>
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(variant: :ghost, size: :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 5v14M5 12h14"/>
+          </svg>
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(size: :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">
+            <rect width="18" height="18" x="3" y="3" rx="2" ry="2"/>
+          </svg>
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(variant: :destructive, size: :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="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/>
+          </svg>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Icon Buttons",
+      preview_content: icon_html,
+      code: button_icon_code,
+      ai_command: button_icon_code
+    ) %>
+
+    <!-- With Icons Example -->
+    <% with_icons_html = capture do %>
+      <div class="flex gap-2">
+        <%= render M9sh::ButtonComponent.new 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 12H5M12 19l-7-7 7-7"/>
+          </svg>
+          Back
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(variant: :secondary) do %>
+          Next
+          <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="ml-2">
+            <path d="M5 12h14M12 5l7 7-7 7"/>
+          </svg>
+        <% end %>
+        <%= 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="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/>
+          </svg>
+          Download
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Icons",
+      preview_content: with_icons_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+
+    <!-- Loading State Example -->
+    <% loading_html = capture do %>
+      <div class="flex gap-2">
+        <%= render M9sh::ButtonComponent.new(disabled: true) do %>
+          <svg class="mr-2 h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          Loading...
+        <% end %>
+        <%= render M9sh::ButtonComponent.new(variant: :outline, disabled: true) do %>
+          <svg class="mr-2 h-4 w-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+          Please wait
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Loading State",
+      preview_content: loading_html,
+      code: nil,
+      ai_command: nil
+    ) %>
+  <% 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, :ghost, :link"
+        },
+        {
+          name: "size",
+          type: "Symbol",
+          default: ":md",
+          description: "The size of the button. Options: :sm, :md, :lg, :icon"
+        },
+        {
+          name: "type",
+          type: "String",
+          default: '"button"',
+          description: "The HTML button type attribute. Options: 'button', 'submit', 'reset'"
+        },
+        {
+          name: "disabled",
+          type: "Boolean",
+          default: "false",
+          description: "Whether the button is disabled"
+        }
+      ]
+    ) %>
+  <% end %>
+<% end %>