m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,150 @@
+<%= render Docs::ComponentPageComponent.new(title: "Skeleton") do |page| %>
+  <% page.with_header(
+    name: "Skeleton",
+    description: "Use to show a placeholder while content is loading."
+  ) %>
+
+  <% page.with_installation(component_name: "skeleton") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: skeleton_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <div class="space-y-2">
+        <%= render M9sh::SkeletonComponent.new(class: "w-full h-12") %>
+        <%= render M9sh::SkeletonComponent.new(class: "w-full h-12") %>
+        <%= render M9sh::SkeletonComponent.new(class: "w-full h-12") %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: skeleton_default_code,
+      ai_command: skeleton_default_code
+    ) %>
+
+    <!-- Rounded Example -->
+    <% rounded_html = capture do %>
+      <div class="flex flex-wrap items-center gap-4">
+        <%= render M9sh::SkeletonComponent.new(rounded: :none, class: "w-20 h-12") %>
+        <%= render M9sh::SkeletonComponent.new(rounded: :sm, class: "w-20 h-12") %>
+        <%= render M9sh::SkeletonComponent.new(rounded: :md, class: "w-20 h-12") %>
+        <%= render M9sh::SkeletonComponent.new(rounded: :lg, class: "w-20 h-12") %>
+        <%= render M9sh::SkeletonComponent.new(rounded: :xl, class: "w-20 h-12") %>
+        <%= render M9sh::SkeletonComponent.new(rounded: :full, class: "w-24 h-24") %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Rounded",
+      preview_content: rounded_html,
+      code: skeleton_rounded_code,
+      ai_command: skeleton_rounded_code
+    ) %>
+
+    <!-- Card Skeleton Example -->
+    <% card_html = capture do %>
+      <div class="border rounded-lg p-6 space-y-4 max-w-md w-full">
+        <div class="flex items-center space-x-4">
+          <%= render M9sh::SkeletonComponent.new(rounded: :full, class: "w-12 h-12") %>
+          <div class="flex-1 space-y-2">
+            <%= render M9sh::SkeletonComponent.new(class: "w-3/4 h-4") %>
+            <%= render M9sh::SkeletonComponent.new(class: "w-1/2 h-4") %>
+          </div>
+        </div>
+        <%= render M9sh::SkeletonComponent.new(class: "w-full h-32") %>
+        <div class="space-y-2">
+          <%= render M9sh::SkeletonComponent.new(class: "w-full h-4") %>
+          <%= render M9sh::SkeletonComponent.new(class: "w-5/6 h-4") %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Card Skeleton",
+      preview_content: card_html,
+      code: skeleton_card_code,
+      ai_command: skeleton_card_code
+    ) %>
+
+    <!-- List Skeleton Example -->
+    <% list_html = capture do %>
+      <div class="space-y-4 max-w-md w-full">
+        <% 3.times do %>
+          <div class="flex items-center space-x-4">
+            <%= render M9sh::SkeletonComponent.new(rounded: :full, class: "w-10 h-10") %>
+            <div class="flex-1 space-y-2">
+              <%= render M9sh::SkeletonComponent.new(class: "w-3/4 h-4") %>
+              <%= render M9sh::SkeletonComponent.new(class: "w-1/2 h-3") %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "List Skeleton",
+      preview_content: list_html,
+      code: skeleton_list_code,
+      ai_command: skeleton_list_code
+    ) %>
+
+    <!-- Table Skeleton Example -->
+    <% table_html = capture do %>
+      <div class="border rounded-lg overflow-hidden max-w-2xl w-full">
+        <div class="border-b p-4 space-y-2">
+          <%= render M9sh::SkeletonComponent.new(class: "w-1/4 h-6") %>
+        </div>
+        <% 5.times do %>
+          <div class="border-b last:border-b-0 p-4">
+            <div class="grid grid-cols-3 gap-4">
+              <%= render M9sh::SkeletonComponent.new(class: "w-full h-4") %>
+              <%= render M9sh::SkeletonComponent.new(class: "w-full h-4") %>
+              <%= render M9sh::SkeletonComponent.new(class: "w-full h-4") %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Table Skeleton",
+      preview_content: table_html,
+      code: skeleton_table_code,
+      ai_command: skeleton_table_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "rounded",
+          type: "Symbol",
+          default: ":md",
+          description: "The border radius. Options: :none, :sm, :md, :lg, :xl, :full"
+        },
+        {
+          name: "class",
+          type: "String",
+          default: nil,
+          description: "Additional CSS classes for custom sizing and styling"
+        }
+      ]
+    ) %>
+
+    <div class="mt-4 p-4 border rounded-lg bg-muted">
+      <p class="text-sm text-muted-foreground">
+        <strong>Note:</strong> The Skeleton component requires custom sizing via the <code class="text-sm">class</code> parameter.
+        Use Tailwind utilities like <code class="text-sm">w-full h-12</code> to define dimensions.
+      </p>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,218 @@
+<%= render Docs::ComponentPageComponent.new(title: "Slider") do |page| %>
+  <% page.with_header(
+    name: "Slider",
+    description: "An input where the user selects a value from within a given range."
+  ) %>
+
+  <% page.with_installation(component_name: "slider") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: slider_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <%= render M9sh::SliderComponent.new %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: slider_usage_code,
+      ai_command: slider_usage_code
+    ) %>
+
+    <!-- With Min/Max/Step Example -->
+    <% range_html = capture do %>
+      <div class="space-y-2 w-full">
+        <%= render M9sh::SliderComponent.new(
+          min: 0,
+          max: 100,
+          step: 5,
+          value: 50
+        ) %>
+        <p class="text-sm text-muted-foreground">Range: 0-100, Step: 5</p>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Min/Max/Step",
+      preview_content: range_html,
+      code: slider_range_code,
+      ai_command: slider_range_code
+    ) %>
+
+    <!-- With Labels Example -->
+    <% labels_html = capture do %>
+      <div class="space-y-4 w-full">
+        <div class="space-y-2">
+          <%= render M9sh::LabelComponent.new(for_id: "volume") do %>
+            Volume
+          <% end %>
+          <%= render M9sh::SliderComponent.new(
+            name: "volume",
+            min: 0,
+            max: 100,
+            value: 75
+          ) %>
+        </div>
+        <div class="space-y-2">
+          <%= render M9sh::LabelComponent.new(for_id: "brightness") do %>
+            Brightness
+          <% end %>
+          <%= render M9sh::SliderComponent.new(
+            name: "brightness",
+            min: 0,
+            max: 100,
+            value: 50
+          ) %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Labels",
+      preview_content: labels_html,
+      code: slider_with_label_code,
+      ai_command: slider_with_label_code
+    ) %>
+
+    <!-- Disabled State Example -->
+    <% disabled_html = capture do %>
+      <div class="space-y-4 w-full">
+        <%= render M9sh::SliderComponent.new(
+          value: 50,
+          disabled: true
+        ) %>
+        <p class="text-sm text-muted-foreground">This slider is disabled</p>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Disabled",
+      preview_content: disabled_html,
+      code: slider_disabled_code,
+      ai_command: slider_disabled_code
+    ) %>
+
+    <!-- Form Integration Example -->
+    <% form_html = capture do %>
+      <div class="space-y-6 w-full max-w-md">
+        <div class="space-y-4">
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <%= render M9sh::LabelComponent.new(for_id: "price-range") do %>
+                Price Range
+              <% end %>
+              <span class="text-sm text-muted-foreground" id="price-value">$50</span>
+            </div>
+            <%= render M9sh::SliderComponent.new(
+              name: "price",
+              min: 0,
+              max: 100,
+              step: 1,
+              value: 50
+            ) %>
+          </div>
+
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <%= render M9sh::LabelComponent.new(for_id: "quantity") do %>
+                Quantity
+              <% end %>
+              <span class="text-sm text-muted-foreground" id="quantity-value">5</span>
+            </div>
+            <%= render M9sh::SliderComponent.new(
+              name: "quantity",
+              min: 1,
+              max: 10,
+              step: 1,
+              value: 5
+            ) %>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Form Integration",
+      preview_content: form_html,
+      code: slider_form_integration_code,
+      ai_command: slider_form_integration_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "min",
+          type: "Number",
+          default: "0",
+          description: "The minimum value of the slider."
+        },
+        {
+          name: "max",
+          type: "Number",
+          default: "100",
+          description: "The maximum value of the slider."
+        },
+        {
+          name: "step",
+          type: "Number",
+          default: "1",
+          description: "The stepping interval between values."
+        },
+        {
+          name: "value",
+          type: "Number",
+          default: "50",
+          description: "The current value of the slider."
+        },
+        {
+          name: "name",
+          type: "String",
+          default: "nil",
+          description: "The name attribute for the hidden input element. Used for form submissions."
+        },
+        {
+          name: "disabled",
+          type: "Boolean",
+          default: "false",
+          description: "Whether the slider is disabled and cannot be interacted with."
+        }
+      ]
+    ) %>
+
+    <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>Uses proper ARIA attributes (<code>role="slider"</code>, <code>aria-valuenow</code>, <code>aria-valuemin</code>, <code>aria-valuemax</code>)</li>
+        <li>Keyboard accessible with arrow keys for precise control</li>
+        <li>Works with screen readers to announce value changes</li>
+        <li>Supports disabled state with proper cursor and opacity</li>
+        <li>Focus indicators for keyboard navigation</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 slider component uses a Stimulus controller (<code>m9sh--slider</code>) to handle dragging interactions.
+        The controller manages mouse and touch events, updates the visual position of the thumb and range indicators,
+        and maintains the current value in a hidden input field when a <code>name</code> is provided.
+      </p>
+    </div>
+
+    <div class="mt-4 p-4 border rounded-lg bg-muted">
+      <p class="text-sm text-muted-foreground">
+        <strong>Note:</strong> The slider value can be changed by clicking/tapping on the track, or by dragging the thumb.
+        When used in a form with a <code class="text-sm">name</code> attribute, the slider value will be submitted with the form data.
+      </p>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,132 @@
+<%= render Docs::ComponentPageComponent.new(title: "Spinner") do |page| %>
+  <% page.with_header(
+    name: "Spinner",
+    description: "An indicator that can be used to show a loading state."
+  ) %>
+
+  <% page.with_installation(component_name: "spinner") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: spinner_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <div class="flex items-center justify-center py-12">
+        <%= render M9sh::SpinnerComponent.new %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: spinner_usage_code,
+      ai_command: spinner_usage_code
+    ) %>
+
+    <!-- Sizes Example -->
+    <% sizes_html = capture do %>
+      <div class="flex items-center justify-center gap-4 py-12">
+        <%= render M9sh::SpinnerComponent.new(size: :sm) %>
+        <%= render M9sh::SpinnerComponent.new %>
+        <%= render M9sh::SpinnerComponent.new(size: :md) %>
+        <%= render M9sh::SpinnerComponent.new(size: :lg) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Sizes",
+      preview_content: sizes_html,
+      code: spinner_sizes_code,
+      ai_command: spinner_sizes_code
+    ) %>
+
+    <!-- Colors Example -->
+    <% colors_html = capture do %>
+      <div class="flex items-center justify-center gap-4 py-12">
+        <%= render M9sh::SpinnerComponent.new(class: "text-primary") %>
+        <%= render M9sh::SpinnerComponent.new(class: "text-destructive") %>
+        <%= render M9sh::SpinnerComponent.new(class: "text-green-500") %>
+        <%= render M9sh::SpinnerComponent.new(class: "text-blue-500") %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Colors",
+      preview_content: colors_html,
+      code: spinner_colors_code,
+      ai_command: spinner_colors_code
+    ) %>
+
+    <!-- Button with Spinner Example -->
+    <% button_html = capture do %>
+      <div class="flex items-center justify-center gap-4 py-12">
+        <%= render M9sh::ButtonComponent.new(disabled: true) do %>
+          <div class="flex items-center gap-2">
+            <%= render M9sh::SpinnerComponent.new(size: :sm) %>
+            <span>Please wait</span>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Button with Spinner",
+      preview_content: button_html,
+      code: spinner_button_code,
+      ai_command: spinner_button_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "size",
+          type: "Symbol",
+          default: ":default",
+          description: "The size of the spinner. Options: :sm, :default, :md, :lg"
+        },
+        {
+          name: "class",
+          type: "String",
+          default: "nil",
+          description: "Additional CSS classes (e.g., for custom colors using text utilities)"
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-3 text-sm">
+      <h3 class="text-lg font-semibold">Size Mapping</h3>
+      <ul class="list-disc list-inside space-y-1 text-muted-foreground">
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">:sm</code> - size-3 (12px)</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">:default</code> - size-4 (16px)</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">:md</code> - size-6 (24px)</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">:lg</code> - size-8 (32px)</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-3 text-sm">
+      <h3 class="text-lg font-semibold">Usage Notes</h3>
+      <ul class="list-disc list-inside space-y-2 text-muted-foreground">
+        <li>The spinner uses the <code class="text-xs bg-muted px-1 py-0.5 rounded">animate-spin</code> class for smooth rotation animation</li>
+        <li>Color is controlled by the current text color, making it easy to customize with Tailwind utilities</li>
+        <li>The spinner is an inline element and can be placed inside buttons, badges, or other components</li>
+        <li>Use smaller sizes (:sm) when placing inside buttons or compact UI elements</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-3 text-sm">
+      <h3 class="text-lg font-semibold">Accessibility</h3>
+      <ul class="list-disc list-inside space-y-2 text-muted-foreground">
+        <li>The spinner has <code class="text-xs bg-muted px-1 py-0.5 rounded">role="status"</code> for screen readers</li>
+        <li>Includes <code class="text-xs bg-muted px-1 py-0.5 rounded">aria-label="Loading"</code> to provide context</li>
+        <li>Consider adding visually hidden text for more specific loading context when needed</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,148 @@
+<%= render Docs::ComponentPageComponent.new(title: "Switch") do |page| %>
+  <% page.with_header(
+    name: "Switch",
+    description: "A control that allows the user to toggle between checked and unchecked states."
+  ) %>
+
+  <% page.with_installation(component_name: "switch") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: switch_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Example -->
+    <% default_html = capture do %>
+      <%= render M9sh::SwitchComponent.new %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default",
+      preview_content: default_html,
+      code: switch_usage_code,
+      ai_command: switch_usage_code
+    ) %>
+
+    <!-- With Label Example -->
+    <% with_label_html = capture do %>
+      <div class="flex items-center space-x-2">
+        <%= render M9sh::SwitchComponent.new(name: "notifications") %>
+        <%= render M9sh::LabelComponent.new(for_id: "notifications") do %>
+          Enable notifications
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Label",
+      preview_content: with_label_html,
+      code: switch_with_label_code,
+      ai_command: switch_with_label_code
+    ) %>
+
+    <!-- Checked State Example -->
+    <% checked_html = capture do %>
+      <%= render M9sh::SwitchComponent.new(checked: true) %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Checked State",
+      preview_content: checked_html,
+      code: switch_checked_code,
+      ai_command: switch_checked_code
+    ) %>
+
+    <!-- Disabled State Example -->
+    <% disabled_html = capture do %>
+      <div class="flex flex-col space-y-4">
+        <%= render M9sh::SwitchComponent.new(disabled: true) %>
+        <%= render M9sh::SwitchComponent.new(checked: true, disabled: true) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Disabled State",
+      preview_content: disabled_html,
+      code: switch_disabled_states_code,
+      ai_command: switch_disabled_states_code
+    ) %>
+
+    <!-- Form Integration Example -->
+    <% form_html = capture do %>
+      <div class="space-y-4">
+        <div class="flex items-center justify-between">
+          <div class="space-y-0.5">
+            <div class="font-medium">Marketing emails</div>
+            <div class="text-sm text-muted-foreground">
+              Receive emails about new products and features.
+            </div>
+          </div>
+          <%= render M9sh::SwitchComponent.new(name: "marketing_emails", checked: true) %>
+        </div>
+
+        <div class="flex items-center justify-between">
+          <div class="space-y-0.5">
+            <div class="font-medium">Security emails</div>
+            <div class="text-sm text-muted-foreground">
+              Receive emails about your account security.
+            </div>
+          </div>
+          <%= render M9sh::SwitchComponent.new(name: "security_emails", checked: true, disabled: true) %>
+        </div>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Form Integration",
+      preview_content: form_html,
+      code: switch_form_code,
+      ai_command: switch_form_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "name",
+          type: "String",
+          default: "nil",
+          description: "The name attribute for the switch input element. Used for form submissions."
+        },
+        {
+          name: "checked",
+          type: "Boolean",
+          default: "false",
+          description: "Whether the switch is in the checked state."
+        },
+        {
+          name: "disabled",
+          type: "Boolean",
+          default: "false",
+          description: "Whether the switch is disabled and cannot be interacted with."
+        }
+      ]
+    ) %>
+
+    <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>Uses proper ARIA attributes (<code>role="switch"</code> and <code>aria-checked</code>)</li>
+        <li>Keyboard accessible with focus indicators</li>
+        <li>Works with screen readers</li>
+        <li>Supports disabled state with proper cursor and opacity</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 switch component uses a Stimulus controller (<code>m9sh--switch</code>) to handle state toggling.
+        The controller manages the checked state and updates the visual appearance when clicked.
+      </p>
+    </div>
+  <% end %>
+<% end %>