m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,239 @@
+<%= render Docs::ComponentPageComponent.new(title: "Textarea") do |page| %>
+  <% page.with_header(
+    name: "Textarea",
+    description: "A multi-line text input field for capturing longer form content."
+  ) %>
+
+  <% page.with_installation(component_name: "textarea") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: textarea_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Textarea Example -->
+    <% default_html = capture do %>
+      <%= render M9sh::TextareaComponent.new(
+        name: "message",
+        placeholder: "Type your message here."
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: textarea_usage_code,
+      ai_command: textarea_usage_code
+    ) %>
+
+    <!-- Textarea with Label Example -->
+    <% with_label_html = capture do %>
+      <div class="space-y-2 w-full">
+        <%= render M9sh::LabelComponent.new(for_id: "message") do %>
+          Your message
+        <% end %>
+        <%= render M9sh::TextareaComponent.new(
+          id: "message",
+          name: "message",
+          placeholder: "Type your message here."
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Label",
+      preview_content: with_label_html,
+      code: textarea_with_label_code,
+      ai_command: textarea_with_label_code
+    ) %>
+
+    <!-- Disabled Textarea Example -->
+    <% disabled_html = capture do %>
+      <%= render M9sh::TextareaComponent.new(
+        name: "disabled-textarea",
+        placeholder: "This textarea is disabled",
+        disabled: true
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Disabled",
+      preview_content: disabled_html,
+      code: textarea_disabled_code,
+      ai_command: textarea_disabled_code
+    ) %>
+
+    <!-- With Placeholder Example -->
+    <% placeholder_html = capture do %>
+      <%= render M9sh::TextareaComponent.new(
+        name: "bio",
+        placeholder: "Tell us a little bit about yourself"
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Placeholder",
+      preview_content: placeholder_html,
+      code: textarea_with_placeholder_code,
+      ai_command: textarea_with_placeholder_code
+    ) %>
+
+    <!-- Different Sizes (Rows) Example -->
+    <% sizes_html = capture do %>
+      <div class="space-y-4 w-full">
+        <div class="space-y-2">
+          <%= render M9sh::LabelComponent.new(for_id: "small-textarea") do %>
+            Small (2 rows)
+          <% end %>
+          <%= render M9sh::TextareaComponent.new(
+            id: "small-textarea",
+            name: "small",
+            placeholder: "Smaller textarea",
+            rows: 2
+          ) %>
+        </div>
+
+        <div class="space-y-2">
+          <%= render M9sh::LabelComponent.new(for_id: "medium-textarea") do %>
+            Medium (3 rows - default)
+          <% end %>
+          <%= render M9sh::TextareaComponent.new(
+            id: "medium-textarea",
+            name: "medium",
+            placeholder: "Default textarea",
+            rows: 3
+          ) %>
+        </div>
+
+        <div class="space-y-2">
+          <%= render M9sh::LabelComponent.new(for_id: "large-textarea") do %>
+            Large (6 rows)
+          <% end %>
+          <%= render M9sh::TextareaComponent.new(
+            id: "large-textarea",
+            name: "large",
+            placeholder: "Larger textarea",
+            rows: 6
+          ) %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Different Sizes",
+      preview_content: sizes_html,
+      code: textarea_sizes_code,
+      ai_command: textarea_sizes_code
+    ) %>
+
+    <!-- With Value Example -->
+    <% with_value_html = capture do %>
+      <%= render M9sh::TextareaComponent.new(
+        name: "content",
+        value: "This textarea has pre-filled content that can be edited.",
+        placeholder: "Enter content"
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Value",
+      preview_content: with_value_html,
+      code: textarea_with_value_code,
+      ai_command: textarea_with_value_code
+    ) %>
+
+    <!-- Read-only Example -->
+    <% readonly_html = capture do %>
+      <%= render M9sh::TextareaComponent.new(
+        name: "readonly-textarea",
+        value: "This textarea is read-only and cannot be edited.",
+        readonly: true
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Read-only",
+      preview_content: readonly_html,
+      code: textarea_readonly_code,
+      ai_command: textarea_readonly_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "name",
+          type: "String",
+          default: "nil",
+          description: "The name attribute for the textarea field, used for form submission."
+        },
+        {
+          name: "value",
+          type: "String",
+          default: "nil",
+          description: "The initial value/content of the textarea."
+        },
+        {
+          name: "placeholder",
+          type: "String",
+          default: "nil",
+          description: "Placeholder text displayed when the textarea is empty."
+        },
+        {
+          name: "rows",
+          type: "Integer",
+          default: "3",
+          description: "The number of visible text rows. Controls the initial height of the textarea."
+        },
+        {
+          name: "disabled",
+          type: "Boolean",
+          default: "false",
+          description: "If true, the textarea is disabled and cannot be interacted with."
+        },
+        {
+          name: "readonly",
+          type: "Boolean",
+          default: "false",
+          description: "If true, the textarea is read-only and its value cannot be changed."
+        },
+        {
+          name: "**extra_attrs",
+          type: "Hash",
+          default: "{}",
+          description: "Additional HTML attributes to apply to the textarea element (e.g., id, class, data attributes)."
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Styling</h3>
+      <p class="text-sm text-muted-foreground">
+        The textarea component comes with default styles that match the design system:
+      </p>
+      <ul class="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+        <li>Border and background colors that adapt to light/dark themes</li>
+        <li>Focus states with visible ring for keyboard navigation</li>
+        <li>Invalid state styling via <code class="text-xs bg-muted px-1.5 py-0.5 rounded">aria-invalid</code> attribute</li>
+        <li>Smooth transitions for interactive states</li>
+        <li>Disabled state with reduced opacity and cursor changes</li>
+        <li>Minimum height of 16 (4rem) with flexible width</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Accessibility</h3>
+      <ul class="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+        <li>Use with <code class="text-xs bg-muted px-1.5 py-0.5 rounded">LabelComponent</code> for proper form field labeling</li>
+        <li>Supports <code class="text-xs bg-muted px-1.5 py-0.5 rounded">disabled</code> and <code class="text-xs bg-muted px-1.5 py-0.5 rounded">readonly</code> states</li>
+        <li>Includes <code class="text-xs bg-muted px-1.5 py-0.5 rounded">data-slot="textarea"</code> attribute for component composition</li>
+        <li>Keyboard accessible with visible focus indicators</li>
+        <li>Supports ARIA attributes via <code class="text-xs bg-muted px-1.5 py-0.5 rounded">extra_attrs</code></li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,135 @@
+<%= render Docs::ComponentPageComponent.new(title: "ThemeToggle") do |page| %>
+  <% page.with_header(
+    name: "ThemeToggle",
+    description: "A specialized toggle button for switching between light and dark themes."
+  ) %>
+
+  <% page.with_installation(component_name: "theme_toggle") do %>
+    <p class="text-sm text-muted-foreground">
+      This component requires the Stimulus controller:
+    </p>
+
+    <%= render Docs::CodeBlockComponent.new(
+      code: <<~JAVASCRIPT,
+        # app/javascript/controllers/m9sh/theme_controller.js
+      JAVASCRIPT
+      language: "bash"
+    ) %>
+  <% end %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: theme_toggle_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% theme_toggle_html = capture do %>
+      <%= render M9sh::ThemeToggleComponent.new %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: theme_toggle_html,
+      code: theme_toggle_default_code,
+      ai_command: theme_toggle_default_code
+    ) %>
+
+    <!-- With Context Example -->
+    <% with_context_html = capture do %>
+      <div class="flex items-center gap-3">
+        <span class="text-sm text-muted-foreground">Theme:</span>
+        <%= render M9sh::ThemeToggleComponent.new %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Label",
+      preview_content: with_context_html,
+      code: theme_toggle_with_label_code,
+      ai_command: theme_toggle_with_label_code
+    ) %>
+
+    <!-- In Header Example -->
+    <% in_header_html = capture do %>
+      <div class="flex items-center justify-between border rounded-lg p-4 bg-card">
+        <div>
+          <h3 class="text-lg font-semibold">Settings</h3>
+          <p class="text-sm text-muted-foreground">Manage your preferences</p>
+        </div>
+        <%= render M9sh::ThemeToggleComponent.new %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "In Header",
+      preview_content: in_header_html,
+      code: theme_toggle_in_header_code,
+      ai_command: theme_toggle_in_header_code
+    ) %>
+
+    <!-- In Navigation Example -->
+    <% in_nav_html = capture do %>
+      <nav class="flex items-center justify-between border rounded-lg p-4 bg-card">
+        <div class="flex items-center gap-4">
+          <span class="font-semibold">My App</span>
+          <a href="#" class="text-sm text-muted-foreground hover:text-foreground">Home</a>
+          <a href="#" class="text-sm text-muted-foreground hover:text-foreground">About</a>
+          <a href="#" class="text-sm text-muted-foreground hover:text-foreground">Contact</a>
+        </div>
+        <%= render M9sh::ThemeToggleComponent.new %>
+      </nav>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "In Navigation",
+      preview_content: in_nav_html,
+      code: theme_toggle_in_nav_code,
+      ai_command: theme_toggle_in_nav_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "**extra_attrs",
+          type: "Hash",
+          default: "{}",
+          description: "Additional HTML attributes to pass to the component wrapper (class, data attributes, etc.)"
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Features</h3>
+      <ul class="list-disc list-inside space-y-2 text-sm text-muted-foreground">
+        <li>Automatic theme persistence using localStorage</li>
+        <li>Smooth icon transitions between light and dark modes</li>
+        <li>Respects system theme preferences</li>
+        <li>Accessible with proper ARIA labels</li>
+        <li>Animated icon transitions using Tailwind CSS</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Stimulus Controller</h3>
+      <p class="text-sm text-muted-foreground">
+        The theme toggle functionality is powered by a Stimulus controller that:
+      </p>
+
+      <ul class="list-disc list-inside space-y-2 text-sm text-muted-foreground ml-4">
+        <li>Loads the saved theme preference from localStorage on connect</li>
+        <li>Applies the <code>dark</code> class to the document root element</li>
+        <li>Saves theme changes to localStorage</li>
+        <li>Listens for system theme preference changes</li>
+      </ul>
+
+      <p class="text-sm text-muted-foreground mt-4">
+        The controller exposes a <code>toggle</code> action that can be triggered by clicking the button.
+      </p>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,205 @@
+<%= render Docs::ComponentPageComponent.new(title: "Toast - m9sh Components") do |page| %>
+  <% page.with_header(
+    name: "Toast",
+    description: "A succinct message that is displayed temporarily at the corner of the screen."
+  ) %>
+
+  <% page.with_installation(component_name: "toast") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: toast_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_toast_html = capture do %>
+      <%= render M9sh::ToastComponent.new(
+        title: "Notification",
+        description: "Your changes have been saved successfully."
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_toast_html,
+      code: toast_default_code,
+      ai_command: toast_default_code
+    ) %>
+
+    <!-- Success Example -->
+    <% success_toast_html = capture do %>
+      <%= render M9sh::ToastComponent.new(
+        title: "Success",
+        description: "Your profile has been updated.",
+        variant: :success
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Success",
+      preview_content: success_toast_html,
+      code: toast_success_code,
+      ai_command: toast_success_code
+    ) %>
+
+    <!-- Error Example -->
+    <% error_toast_html = capture do %>
+      <%= render M9sh::ToastComponent.new(
+        title: "Error",
+        description: "Unable to save changes. Please try again.",
+        variant: :error
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Error",
+      preview_content: error_toast_html,
+      code: toast_error_code,
+      ai_command: toast_error_code
+    ) %>
+
+    <!-- Warning Example -->
+    <% warning_toast_html = capture do %>
+      <%= render M9sh::ToastComponent.new(
+        title: "Warning",
+        description: "Your session will expire in 5 minutes.",
+        variant: :warning
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Warning",
+      preview_content: warning_toast_html,
+      code: toast_warning_code,
+      ai_command: toast_warning_code
+    ) %>
+
+    <!-- Title Only Example -->
+    <% title_only_html = capture do %>
+      <%= render M9sh::ToastComponent.new(
+        title: "Message sent successfully!",
+        variant: :success
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Title Only",
+      preview_content: title_only_html,
+      code: toast_title_only_code,
+      ai_command: toast_title_only_code
+    ) %>
+
+    <!-- Custom Duration Example -->
+    <% custom_duration_html = capture do %>
+      <%= render M9sh::ToastComponent.new(
+        title: "Quick notification",
+        description: "This will disappear in 2 seconds.",
+        duration: 2000
+      ) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Custom Duration",
+      preview_content: custom_duration_html,
+      code: toast_custom_duration_code,
+      ai_command: toast_custom_duration_code
+    ) %>
+
+    <!-- Variants Example -->
+    <% variants_toast_html = capture do %>
+      <div class="space-y-4">
+        <%= render M9sh::ToastComponent.new(
+          title: "Default",
+          description: "This is a default toast.",
+          variant: :default
+        ) %>
+
+        <%= render M9sh::ToastComponent.new(
+          title: "Success",
+          description: "Your action was successful.",
+          variant: :success
+        ) %>
+
+        <%= render M9sh::ToastComponent.new(
+          title: "Error",
+          description: "An error occurred.",
+          variant: :error
+        ) %>
+
+        <%= render M9sh::ToastComponent.new(
+          title: "Warning",
+          description: "Please review your changes.",
+          variant: :warning
+        ) %>
+
+        <%= render M9sh::ToastComponent.new(
+          title: "Info",
+          description: "Here's some information.",
+          variant: :info
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "All Variants",
+      preview_content: variants_toast_html,
+      code: toast_variants_code,
+      ai_command: toast_variants_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <h3 class="text-lg font-semibold">Toast Component Props</h3>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "title",
+          type: "String",
+          default: nil,
+          description: "The title of the toast notification (required)"
+        },
+        {
+          name: "description",
+          type: "String",
+          default: "nil",
+          description: "Optional description text for the toast"
+        },
+        {
+          name: "variant",
+          type: "Symbol",
+          default: ":default",
+          description: "The visual style variant. Options: :default, :success, :error, :warning, :info"
+        },
+        {
+          name: "duration",
+          type: "Integer",
+          default: "5000",
+          description: "Duration in milliseconds before the toast auto-dismisses. Set to 0 to prevent auto-dismiss"
+        }
+      ]
+    ) %>
+
+    <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 toast automatically slides in from the right and animates when dismissed</li>
+        <li>Each toast includes a close button for manual dismissal</li>
+        <li>The description is optional - you can use title-only toasts for simpler messages</li>
+        <li>The component uses Stimulus controllers for animation and auto-dismiss functionality</li>
+        <li>Toasts are positioned using fixed positioning and should be used with the ToasterComponent container</li>
+        <li>The component includes proper ARIA attributes for accessibility</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Integration with Toaster</h3>
+      <p class="text-sm text-muted-foreground">
+        While you can render Toast components directly in your views, it's recommended to use them with the ToasterComponent
+        for better positioning and dynamic toast management. See the Toaster component documentation for more information.
+      </p>
+    </div>
+  <% end %>
+<% end %>