m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,260 @@
+<%= render Docs::ComponentPageComponent.new(title: "Select") do |c| %>
+  <% c.with_header(
+    name: "Select",
+    description: "Displays a list of options for the user to pick from—triggered by a select element."
+  ) %>
+
+  <% c.with_installation(component_name: "select") do %>
+    <p class="text-sm text-muted-foreground">
+      Copy and paste the following component file into your Rails application:
+    </p>
+
+    <%= render Docs::CodeBlockComponent.new(
+      code: <<~RUBY,
+        # app/components/m9sh/select_component.rb
+      RUBY
+      language: "bash"
+    ) %>
+  <% end %>
+
+  <% c.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: select_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% c.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <%= render M9sh::SelectComponent.new(
+        name: "country",
+        options: ["USA", "Canada", "Mexico", "United Kingdom"]
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: select_usage_code,
+      ai_command: select_usage_code
+    ) %>
+
+    <!-- With Label Example -->
+    <% with_label_html = capture do %>
+      <div class="space-y-2 max-w-xs">
+        <%= render M9sh::LabelComponent.new(for_id: "country") do %>
+          Select your country
+        <% end %>
+        <%= render M9sh::SelectComponent.new(
+          name: "country",
+          options: ["USA", "Canada", "Mexico", "United Kingdom"]
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Label",
+      preview_content: with_label_html,
+      code: select_with_label_code,
+      ai_command: select_with_label_code
+    ) %>
+
+    <!-- With Placeholder Example -->
+    <% with_placeholder_html = capture do %>
+      <%= render M9sh::SelectComponent.new(
+        name: "fruit",
+        options: ["Apple", "Banana", "Orange", "Strawberry"],
+        placeholder: "Select a fruit"
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Placeholder",
+      preview_content: with_placeholder_html,
+      code: select_with_placeholder_code,
+      ai_command: select_with_placeholder_code
+    ) %>
+
+    <!-- With Custom Options (Value/Label Pairs) Example -->
+    <% with_custom_options_html = capture do %>
+      <%= render M9sh::SelectComponent.new(
+        name: "country_code",
+        options: [
+          ["United States", "us"],
+          ["Canada", "ca"],
+          ["Mexico", "mx"],
+          ["United Kingdom", "uk"]
+        ]
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Custom Options",
+      preview_content: with_custom_options_html,
+      code: select_custom_options_code,
+      ai_command: select_custom_options_code
+    ) %>
+
+    <!-- With Selected Value Example -->
+    <% with_selected_html = capture do %>
+      <%= render M9sh::SelectComponent.new(
+        name: "language",
+        options: [
+          ["English", "en"],
+          ["Spanish", "es"],
+          ["French", "fr"],
+          ["German", "de"]
+        ],
+        selected: "es"
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Selected Value",
+      preview_content: with_selected_html,
+      code: select_with_selected_code,
+      ai_command: select_with_selected_code
+    ) %>
+
+    <!-- Disabled State Example -->
+    <% disabled_html = capture do %>
+      <div class="space-y-4 max-w-xs">
+        <%= render M9sh::SelectComponent.new(
+          name: "disabled",
+          options: ["Option 1", "Option 2", "Option 3"],
+          disabled: true
+        ) %>
+        <%= render M9sh::SelectComponent.new(
+          name: "disabled_with_value",
+          options: ["Option 1", "Option 2", "Option 3"],
+          selected: "Option 2",
+          disabled: true
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Disabled State",
+      preview_content: disabled_html,
+      code: select_disabled_code,
+      ai_command: select_disabled_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">User Information</h3>
+        <div class="space-y-4">
+          <div class="space-y-2">
+            <%= render M9sh::LabelComponent.new(for_id: "country") do %>
+              Country
+            <% end %>
+            <%= render M9sh::SelectComponent.new(
+              name: "user[country]",
+              options: [
+                ["United States", "us"],
+                ["Canada", "ca"],
+                ["Mexico", "mx"],
+                ["United Kingdom", "uk"]
+              ],
+              placeholder: "Select your country"
+            ) %>
+          </div>
+          <div class="space-y-2">
+            <%= render M9sh::LabelComponent.new(for_id: "timezone") do %>
+              Timezone
+            <% end %>
+            <%= render M9sh::SelectComponent.new(
+              name: "user[timezone]",
+              options: [
+                ["Eastern Time (ET)", "est"],
+                ["Central Time (CT)", "cst"],
+                ["Mountain Time (MT)", "mst"],
+                ["Pacific Time (PT)", "pst"]
+              ],
+              selected: "est"
+            ) %>
+          </div>
+          <div class="space-y-2">
+            <%= render M9sh::LabelComponent.new(for_id: "language") do %>
+              Preferred Language
+            <% end %>
+            <%= render M9sh::SelectComponent.new(
+              name: "user[language]",
+              options: ["English", "Spanish", "French", "German"],
+              selected: "English"
+            ) %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Form Integration",
+      preview_content: form_html,
+      code: select_form_integration_code,
+      ai_command: select_form_integration_code
+    ) %>
+  <% end %>
+
+  <% c.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "name",
+          type: "String",
+          default: "nil",
+          description: "The name attribute for the select element (used for form submissions)"
+        },
+        {
+          name: "options",
+          type: "Array",
+          default: "[]",
+          description: "Array of options. Can be an array of strings or an array of [label, value] pairs"
+        },
+        {
+          name: "selected",
+          type: "String",
+          default: "nil",
+          description: "The value of the option that should be selected by default"
+        },
+        {
+          name: "placeholder",
+          type: "String",
+          default: "nil",
+          description: "Optional placeholder text shown when no option is selected"
+        },
+        {
+          name: "disabled",
+          type: "Boolean",
+          default: "false",
+          description: "Whether the select element is disabled"
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Options Format</h3>
+      <p class="text-sm text-muted-foreground">
+        The <code>options</code> parameter accepts two formats:
+      </p>
+      <ul class="list-disc list-inside space-y-2 text-sm text-muted-foreground ml-4">
+        <li><strong>Simple array:</strong> <code>["Option 1", "Option 2"]</code> - Both label and value will be the same</li>
+        <li><strong>Label/Value pairs:</strong> <code>[["Label 1", "value1"], ["Label 2", "value2"]]</code> - Allows different display text and values</li>
+      </ul>
+    </div>
+
+    <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 select component uses native HTML select elements for better accessibility and mobile support</li>
+        <li>The component automatically handles the selected state based on the <code>selected</code> parameter</li>
+        <li>When a placeholder is provided, an empty option is added at the beginning</li>
+        <li>All additional HTML attributes can be passed via extra_attrs and will be applied to the select element</li>
+        <li>The component includes proper focus and disabled state styling</li>
+        <li>Works seamlessly with Rails form helpers and strong parameters</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,162 @@
+<%= render Docs::ComponentPageComponent.new(title: "Separator") do |page| %>
+  <% page.with_header(
+    name: "Separator",
+    description: "Visually or semantically separates content with a line."
+  ) %>
+
+  <% page.with_installation(component_name: "separator") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: separator_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <div class="w-full max-w-md">
+        <div class="space-y-1">
+          <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
+          <p class="text-sm text-muted-foreground">
+            An open-source UI component library.
+          </p>
+        </div>
+        <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+        <div class="flex h-5 items-center space-x-4 text-sm">
+          <div>Blog</div>
+          <%= render M9sh::SeparatorComponent.new(orientation: :vertical) %>
+          <div>Docs</div>
+          <%= render M9sh::SeparatorComponent.new(orientation: :vertical) %>
+          <div>Source</div>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: separator_horizontal_code,
+      ai_command: separator_horizontal_code
+    ) %>
+
+    <!-- Text Sections Example -->
+    <% sections_html = capture do %>
+      <div class="w-full max-w-md">
+        <div class="space-y-1">
+          <h4 class="text-sm font-medium leading-none">Introduction</h4>
+          <p class="text-sm text-muted-foreground">
+            An introduction to the product and its features.
+          </p>
+        </div>
+        <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+        <div class="space-y-1">
+          <h4 class="text-sm font-medium leading-none">Getting Started</h4>
+          <p class="text-sm text-muted-foreground">
+            Learn how to install and configure the components.
+          </p>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Text Sections",
+      preview_content: sections_html,
+      code: separator_text_sections_code,
+      ai_command: separator_text_sections_code
+    ) %>
+
+    <!-- Breadcrumb Example -->
+    <% breadcrumb_html = capture do %>
+      <div class="flex items-center text-sm text-muted-foreground">
+        <a href="#" class="hover:text-foreground transition-colors">Home</a>
+        <%= render M9sh::SeparatorComponent.new(orientation: :vertical, class: "mx-2 h-4") %>
+        <a href="#" class="hover:text-foreground transition-colors">Components</a>
+        <%= render M9sh::SeparatorComponent.new(orientation: :vertical, class: "mx-2 h-4") %>
+        <span class="text-foreground font-medium">Separator</span>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Breadcrumb Navigation",
+      preview_content: breadcrumb_html,
+      code: separator_breadcrumb_code,
+      ai_command: separator_breadcrumb_code
+    ) %>
+
+    <!-- In Card Example -->
+    <% card_html = capture do %>
+      <%= render M9sh::CardComponent.new(class: "w-full max-w-sm") do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title { "Account Settings" } %>
+          <% header.with_description { "Manage your account preferences and settings." } %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <div class="space-y-2">
+              <label class="text-sm font-medium leading-none">Email</label>
+              <p class="text-sm text-muted-foreground">m@example.com</p>
+            </div>
+            <%= render M9sh::SeparatorComponent.new %>
+            <div class="space-y-2">
+              <label class="text-sm font-medium leading-none">Plan</label>
+              <p class="text-sm text-muted-foreground">Pro</p>
+            </div>
+          </div>
+        <% end %>
+        <% card.with_footer do %>
+          <%= render M9sh::ButtonComponent.new(variant: :outline, class: "w-full") { "Manage Account" } %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "In Card",
+      preview_content: card_html,
+      code: separator_in_card_code,
+      ai_command: separator_in_card_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "orientation",
+          type: "Symbol",
+          default: ":horizontal",
+          description: "The orientation of the separator. Options: :horizontal, :vertical"
+        },
+        {
+          name: "decorative",
+          type: "Boolean",
+          default: "true",
+          description: "Whether the separator is purely decorative. When true, role is set to 'none', when false it's 'separator'"
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-3 text-sm">
+      <h3 class="text-lg font-semibold">Accessibility</h3>
+      <p>
+        The Separator component follows WAI-ARIA separator role specifications:
+      </p>
+
+      <ul class="list-disc list-inside space-y-2 text-muted-foreground">
+        <li>
+          By default, the separator is decorative (<code class="text-xs bg-muted px-1 py-0.5 rounded">role="none"</code>) and removed from the accessibility tree
+        </li>
+        <li>
+          Set <code class="text-xs bg-muted px-1 py-0.5 rounded">decorative: false</code> to make it a semantic separator (<code class="text-xs bg-muted px-1 py-0.5 rounded">role="separator"</code>)
+        </li>
+        <li>
+          The <code class="text-xs bg-muted px-1 py-0.5 rounded">aria-orientation</code> attribute is automatically set based on the orientation parameter
+        </li>
+        <li>
+          Use semantic separators when the division is meaningful to understanding the page structure
+        </li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,270 @@
+<%= render Docs::ComponentPageComponent.new(title: "Sheet") do |page| %>
+  <% page.with_header(
+    name: "Sheet",
+    description: "Extends the Dialog component to display content that slides in from the edge of the screen."
+  ) %>
+
+  <% page.with_installation(component_name: "sheet") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: sheet_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_sheet_html = capture do %>
+      <%= render M9sh::SheetComponent.new do |sheet| %>
+        <% sheet.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Open Sheet
+          <% end %>
+        <% end %>
+        <% sheet.with_title do %>
+          Sheet Title
+        <% end %>
+        <% sheet.with_description do %>
+          Make changes to your profile here. Click save when you're done.
+        <% end %>
+        <% sheet.with_sheet_content do %>
+          <div class="space-y-4">
+            <p class="text-sm">
+              This is a sheet component that slides in from the right side of the screen by default.
+              It provides a clean way to display additional content without navigating away from the current page.
+            </p>
+            <p class="text-sm text-muted-foreground">
+              Click the close button or outside the sheet to dismiss it.
+            </p>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_sheet_html,
+      code: sheet_usage_code,
+      ai_command: sheet_usage_code
+    ) %>
+
+    <!-- Different Sides Example -->
+    <% sides_sheet_html = capture do %>
+      <div class="flex flex-wrap gap-2">
+        <%= render M9sh::SheetComponent.new(side: "left") do |sheet| %>
+          <% sheet.with_trigger do %>
+            <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+              Open Left
+            <% end %>
+          <% end %>
+          <% sheet.with_title do %>
+            Left Sheet
+          <% end %>
+          <% sheet.with_description do %>
+            This sheet slides in from the left side.
+          <% end %>
+          <% sheet.with_sheet_content do %>
+            <p class="text-sm">Content from the left side.</p>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::SheetComponent.new(side: "right") do |sheet| %>
+          <% sheet.with_trigger do %>
+            <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+              Open Right
+            <% end %>
+          <% end %>
+          <% sheet.with_title do %>
+            Right Sheet
+          <% end %>
+          <% sheet.with_description do %>
+            This sheet slides in from the right side.
+          <% end %>
+          <% sheet.with_sheet_content do %>
+            <p class="text-sm">Content from the right side.</p>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::SheetComponent.new(side: "top") do |sheet| %>
+          <% sheet.with_trigger do %>
+            <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+              Open Top
+            <% end %>
+          <% end %>
+          <% sheet.with_title do %>
+            Top Sheet
+          <% end %>
+          <% sheet.with_description do %>
+            This sheet slides in from the top.
+          <% end %>
+          <% sheet.with_sheet_content do %>
+            <p class="text-sm">Content from the top.</p>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::SheetComponent.new(side: "bottom") do |sheet| %>
+          <% sheet.with_trigger do %>
+            <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+              Open Bottom
+            <% end %>
+          <% end %>
+          <% sheet.with_title do %>
+            Bottom Sheet
+          <% end %>
+          <% sheet.with_description do %>
+            This sheet slides in from the bottom.
+          <% end %>
+          <% sheet.with_sheet_content do %>
+            <p class="text-sm">Content from the bottom.</p>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "From Different Sides",
+      preview_content: sides_sheet_html,
+      code: sheet_side_code,
+      ai_command: sheet_side_code
+    ) %>
+
+    <!-- With Form Example -->
+    <% form_sheet_html = capture do %>
+      <%= render M9sh::SheetComponent.new do |sheet| %>
+        <% sheet.with_trigger do %>
+          <%= render M9sh::ButtonComponent.new do %>
+            Edit Profile
+          <% end %>
+        <% end %>
+        <% sheet.with_title do %>
+          Edit Profile
+        <% end %>
+        <% sheet.with_description do %>
+          Make changes to your profile here. Click save when you're done.
+        <% end %>
+        <% sheet.with_sheet_content do %>
+          <div class="space-y-4 py-4">
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for_id: "sheet-name") do %>
+                Name
+              <% end %>
+              <%= render M9sh::InputComponent.new(
+                id: "sheet-name",
+                type: "text",
+                placeholder: "Enter your name",
+                value: "John Doe"
+              ) %>
+            </div>
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for_id: "sheet-email") do %>
+                Email
+              <% end %>
+              <%= render M9sh::InputComponent.new(
+                id: "sheet-email",
+                type: "email",
+                placeholder: "Enter your email",
+                value: "john@example.com"
+              ) %>
+            </div>
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for_id: "sheet-bio") do %>
+                Bio
+              <% end %>
+              <%= render M9sh::TextareaComponent.new(
+                id: "sheet-bio",
+                name: "bio",
+                placeholder: "Tell us about yourself"
+              ) %>
+            </div>
+            <div class="flex justify-end gap-2 pt-4">
+              <%= render M9sh::ButtonComponent.new(variant: :outline) do %>
+                Cancel
+              <% end %>
+              <%= render M9sh::ButtonComponent.new do %>
+                Save Changes
+              <% end %>
+            </div>
+          </div>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Form",
+      preview_content: form_sheet_html,
+      code: sheet_with_form_code,
+      ai_command: sheet_with_form_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">Sheet Component</h3>
+
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "side",
+          type: "String",
+          default: '"right"',
+          description: "The side of the screen from which the sheet slides in. Options: 'left', 'right', 'top', 'bottom'"
+        }
+      ]
+    ) %>
+
+    <h3 class="text-lg font-semibold mt-6">Sheet Slots</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "trigger",
+          type: "Slot",
+          default: nil,
+          description: "The element that triggers the sheet to open. Typically a button or link."
+        },
+        {
+          name: "title",
+          type: "Slot",
+          default: nil,
+          description: "The title displayed in the sheet header."
+        },
+        {
+          name: "description",
+          type: "Slot",
+          default: nil,
+          description: "Optional description text displayed below the title in the header."
+        },
+        {
+          name: "sheet_content",
+          type: "Slot",
+          default: nil,
+          description: "The main content area of the sheet. This area is scrollable if content overflows."
+        }
+      ]
+    ) %>
+
+    <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>Slides in from any edge of the screen (left, right, top, or bottom)</li>
+        <li>Includes an overlay that dims the background content</li>
+        <li>Automatically adds a close button in the top-right corner</li>
+        <li>Can be dismissed by clicking the overlay, close button, or pressing Escape</li>
+        <li>Smooth animations for opening and closing transitions</li>
+        <li>Scrollable content area when content exceeds viewport height</li>
+        <li>Fixed width for side sheets (left/right) and full width for top/bottom sheets</li>
+        <li>Responsive design with appropriate sizing on mobile devices</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 sheet uses Stimulus controllers for interactive behavior</li>
+        <li>Side sheets (left/right) have a maximum width of sm (24rem) on larger screens</li>
+        <li>Top and bottom sheets span the full width of the screen</li>
+        <li>The overlay prevents interaction with background content while the sheet is open</li>
+        <li>All slots are optional except for trigger - a sheet must have a way to be opened</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>