m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,259 @@
+<%= render Docs::ComponentPageComponent.new(title: "Table") do |page| %>
+  <% page.with_header(
+    name: "Table",
+    description: "A responsive table component for displaying data in rows and columns."
+  ) %>
+
+  <% page.with_installation(component_name: "table") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: table_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <%= render M9sh::TableComponent.new do %>
+        <%= render M9sh::TableComponent::HeaderComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Name
+            <% end %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Email
+            <% end %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Role
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::TableComponent::BodyComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              John Doe
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              john@example.com
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              Admin
+            <% end %>
+          <% end %>
+
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              Jane Smith
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              jane@example.com
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              User
+            <% end %>
+          <% end %>
+
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              Bob Johnson
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              bob@example.com
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              User
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: table_default_code,
+      ai_command: table_default_code
+    ) %>
+
+    <!-- With Caption Example -->
+    <% caption_html = capture do %>
+      <%= render M9sh::TableComponent.new do %>
+        <%= render M9sh::TableComponent::CaptionComponent.new do %>
+          A list of your recent invoices.
+        <% end %>
+
+        <%= render M9sh::TableComponent::HeaderComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Invoice
+            <% end %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Status
+            <% end %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Amount
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::TableComponent::BodyComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              INV001
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              Paid
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              $250.00
+            <% end %>
+          <% end %>
+
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              INV002
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              Pending
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              $150.00
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Caption",
+      preview_content: caption_html,
+      code: table_caption_code,
+      ai_command: table_caption_code
+    ) %>
+
+    <!-- With Footer Example -->
+    <% footer_html = capture do %>
+      <%= render M9sh::TableComponent.new do %>
+        <%= render M9sh::TableComponent::HeaderComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Product
+            <% end %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Quantity
+            <% end %>
+            <%= render M9sh::TableComponent::HeadComponent.new do %>
+              Price
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::TableComponent::BodyComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              Widget A
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              5
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              $50.00
+            <% end %>
+          <% end %>
+
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              Widget B
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              3
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              $30.00
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::TableComponent::FooterComponent.new do %>
+          <%= render M9sh::TableComponent::RowComponent.new do %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              Total
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              8
+            <% end %>
+            <%= render M9sh::TableComponent::CellComponent.new do %>
+              $80.00
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Footer",
+      preview_content: footer_html,
+      code: table_footer_code,
+      ai_command: table_footer_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">Sub-components</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "TableComponent",
+          type: "Component",
+          default: nil,
+          description: "The main table wrapper with overflow handling"
+        },
+        {
+          name: "HeaderComponent",
+          type: "Component",
+          default: nil,
+          description: "The table header (<thead>) section"
+        },
+        {
+          name: "BodyComponent",
+          type: "Component",
+          default: nil,
+          description: "The table body (<tbody>) section"
+        },
+        {
+          name: "FooterComponent",
+          type: "Component",
+          default: nil,
+          description: "The table footer (<tfoot>) section"
+        },
+        {
+          name: "RowComponent",
+          type: "Component",
+          default: nil,
+          description: "A table row (<tr>) with hover effects"
+        },
+        {
+          name: "HeadComponent",
+          type: "Component",
+          default: nil,
+          description: "A table header cell (<th>)"
+        },
+        {
+          name: "CellComponent",
+          type: "Component",
+          default: nil,
+          description: "A table data cell (<td>)"
+        },
+        {
+          name: "CaptionComponent",
+          type: "Component",
+          default: nil,
+          description: "A table caption describing the table content"
+        }
+      ]
+    ) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,225 @@
+<%= render Docs::ComponentPageComponent.new(title: "Tabs") do |page| %>
+  <% page.with_header(
+    name: "Tabs",
+    description: "A set of layered sections of content—known as tab panels—that are displayed one at a time."
+  ) %>
+
+  <% page.with_installation(component_name: "tabs") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: tabs_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Simple Example -->
+    <% simple_tabs_html = capture do %>
+      <div class="w-full max-w-md">
+        <%= render M9sh::TabsComponent.new(default_value: "tab1") do |tabs| %>
+          <% tabs.with_tabs_list do |list| %>
+            <%= render list.tabs_trigger(value: "tab1") { "Tab 1" } %>
+            <%= render list.tabs_trigger(value: "tab2") { "Tab 2" } %>
+            <%= render list.tabs_trigger(value: "tab3") { "Tab 3" } %>
+          <% end %>
+
+          <% tabs.with_tabs_content(value: "tab1") do %>
+            <p class="text-sm">Content for tab 1</p>
+          <% end %>
+
+          <% tabs.with_tabs_content(value: "tab2") do %>
+            <p class="text-sm">Content for tab 2</p>
+          <% end %>
+
+          <% tabs.with_tabs_content(value: "tab3") do %>
+            <p class="text-sm">Content for tab 3</p>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Simple tabs",
+      preview_content: simple_tabs_html,
+      code: tabs_simple_code,
+      ai_command: tabs_simple_code
+    ) %>
+
+    <!-- Default Example with Rich Content -->
+    <% default_tabs_html = capture do %>
+      <div class="w-full max-w-2xl">
+        <%= render M9sh::TabsComponent.new(default_value: "account") do |tabs| %>
+          <% tabs.with_tabs_list do |list| %>
+            <%= render list.tabs_trigger(value: "account") { "Account" } %>
+            <%= render list.tabs_trigger(value: "password") { "Password" } %>
+          <% end %>
+
+          <% tabs.with_tabs_content(value: "account") do %>
+            <div class="space-y-4">
+              <div class="space-y-2">
+                <h3 class="text-lg font-medium">Account Settings</h3>
+                <p class="text-sm text-muted-foreground">
+                  Make changes to your account here. Click save when you're done.
+                </p>
+              </div>
+              <div class="space-y-2">
+                <label class="text-sm font-medium">Name</label>
+                <input type="text" placeholder="Enter your name" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
+              </div>
+              <div class="space-y-2">
+                <label class="text-sm font-medium">Email</label>
+                <input type="email" placeholder="Enter your email" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
+              </div>
+            </div>
+          <% end %>
+
+          <% tabs.with_tabs_content(value: "password") do %>
+            <div class="space-y-4">
+              <div class="space-y-2">
+                <h3 class="text-lg font-medium">Password Settings</h3>
+                <p class="text-sm text-muted-foreground">
+                  Change your password here. After saving, you'll be logged out.
+                </p>
+              </div>
+              <div class="space-y-2">
+                <label class="text-sm font-medium">Current Password</label>
+                <input type="password" placeholder="Enter current password" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
+              </div>
+              <div class="space-y-2">
+                <label class="text-sm font-medium">New Password</label>
+                <input type="password" placeholder="Enter new password" class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm" />
+              </div>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Tabs with rich content",
+      preview_content: default_tabs_html,
+      code: tabs_default_code,
+      ai_command: tabs_default_code
+    ) %>
+
+    <!-- Multiple Tab Groups Example -->
+    <% multiple_tabs_html = capture do %>
+      <div class="w-full max-w-2xl">
+        <div class="space-y-8">
+          <div>
+            <h3 class="text-lg font-semibold mb-4">User Settings</h3>
+            <%= render M9sh::TabsComponent.new(default_value: "profile") do |tabs| %>
+              <% tabs.with_tabs_list do |list| %>
+                <%= render list.tabs_trigger(value: "profile") { "Profile" } %>
+                <%= render list.tabs_trigger(value: "preferences") { "Preferences" } %>
+              <% end %>
+
+              <% tabs.with_tabs_content(value: "profile") do %>
+                <p class="text-sm">Profile settings content</p>
+              <% end %>
+
+              <% tabs.with_tabs_content(value: "preferences") do %>
+                <p class="text-sm">Preferences content</p>
+              <% end %>
+            <% end %>
+          </div>
+
+          <div>
+            <h3 class="text-lg font-semibold mb-4">System Settings</h3>
+            <%= render M9sh::TabsComponent.new(default_value: "general") do |tabs| %>
+              <% tabs.with_tabs_list do |list| %>
+                <%= render list.tabs_trigger(value: "general") { "General" } %>
+                <%= render list.tabs_trigger(value: "advanced") { "Advanced" } %>
+              <% end %>
+
+              <% tabs.with_tabs_content(value: "general") do %>
+                <p class="text-sm">General settings content</p>
+              <% end %>
+
+              <% tabs.with_tabs_content(value: "advanced") do %>
+                <p class="text-sm">Advanced settings content</p>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Multiple independent tab groups",
+      preview_content: multiple_tabs_html,
+      code: tabs_multiple_groups_code,
+      ai_command: tabs_multiple_groups_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">TabsComponent</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "default_value",
+          type: "String",
+          default: "nil",
+          description: "The value of the tab that should be active by default"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Slots</h3>
+
+    <div class="mt-4 space-y-4">
+      <div>
+        <h4 class="text-base font-semibold">tabs_list</h4>
+        <p class="text-sm text-muted-foreground mt-1">
+          Container for tab triggers. Use <code class="text-xs bg-muted px-1 py-0.5 rounded">with_tabs_list</code> to define the list of tab buttons.
+        </p>
+      </div>
+
+      <div>
+        <h4 class="text-base font-semibold">tabs_content</h4>
+        <p class="text-sm text-muted-foreground mt-1">
+          Individual tab panel content. Use <code class="text-xs bg-muted px-1 py-0.5 rounded">with_tabs_content(value:)</code> for each tab's content.
+        </p>
+        <%= render Docs::PropTableComponent.new(
+          props: [
+            {
+              name: "value",
+              type: "String",
+              default: nil,
+              description: "A unique identifier that matches the trigger value (required)"
+            }
+          ]
+        ) %>
+      </div>
+    </div>
+
+    <h3 class="text-lg font-semibold mt-6">TabsTriggerComponent</h3>
+    <p class="text-sm text-muted-foreground mt-1 mb-4">
+      Created via <code class="text-xs bg-muted px-1 py-0.5 rounded">list.tabs_trigger(value:)</code> within the <code class="text-xs bg-muted px-1 py-0.5 rounded">with_tabs_list</code> block.
+    </p>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "value",
+          type: "String",
+          default: nil,
+          description: "A unique identifier that matches the content value (required)"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Usage Pattern</h3>
+    <div class="text-sm text-muted-foreground mt-2 space-y-2">
+      <p>The Tabs component uses a slot-based architecture:</p>
+      <ol class="list-decimal list-inside space-y-1 ml-2">
+        <li>Render the TabsComponent with a block parameter</li>
+        <li>Define the tab list with <code class="text-xs bg-muted px-1 py-0.5 rounded">with_tabs_list</code></li>
+        <li>Add triggers using <code class="text-xs bg-muted px-1 py-0.5 rounded">render list.tabs_trigger(value:)</code></li>
+        <li>Define content for each tab with <code class="text-xs bg-muted px-1 py-0.5 rounded">with_tabs_content(value:)</code></li>
+        <li>Each trigger's value must match its corresponding content's value</li>
+      </ol>
+    </div>
+  <% end %>
+<% end %>