m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,254 @@
+<%= render Docs::ComponentPageComponent.new(title: "Input") do |page| %>
+  <% page.with_header(
+    name: "Input",
+    description: "Displays a form input field with customizable types, placeholders, and states."
+  ) %>
+
+  <% page.with_installation(component_name: "input") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: input_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Default Input Example -->
+    <% default_html = capture do %>
+      <div class="w-full max-w-sm">
+        <%= render M9sh::InputComponent.new(
+          type: "text",
+          placeholder: "Enter text..."
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Default Input",
+      preview_content: default_html,
+      code: input_usage_code,
+      ai_command: input_usage_code
+    ) %>
+
+    <!-- Input Types Example -->
+    <% types_html = capture do %>
+      <div class="w-full max-w-sm space-y-4">
+        <%= render M9sh::InputComponent.new(
+          type: "text",
+          placeholder: "Text input"
+        ) %>
+
+        <%= render M9sh::InputComponent.new(
+          type: "email",
+          placeholder: "Email input"
+        ) %>
+
+        <%= render M9sh::InputComponent.new(
+          type: "password",
+          placeholder: "Password input"
+        ) %>
+
+        <%= render M9sh::InputComponent.new(
+          type: "number",
+          placeholder: "Number input"
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Input Types",
+      preview_content: types_html,
+      code: input_types_code,
+      ai_command: input_types_code
+    ) %>
+
+    <!-- Input with Label Example -->
+    <% with_label_html = capture do %>
+      <div class="w-full max-w-sm space-y-2">
+        <%= render M9sh::LabelComponent.new(for_id: "email") do %>
+          Email
+        <% end %>
+        <%= render M9sh::InputComponent.new(
+          id: "email",
+          type: "email",
+          placeholder: "Enter your email"
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Input with Label",
+      preview_content: with_label_html,
+      code: input_with_label_code,
+      ai_command: input_with_label_code
+    ) %>
+
+    <!-- Disabled Input Example -->
+    <% disabled_html = capture do %>
+      <div class="w-full max-w-sm">
+        <%= render M9sh::InputComponent.new(
+          type: "text",
+          placeholder: "Disabled input",
+          disabled: true
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Disabled State",
+      preview_content: disabled_html,
+      code: input_disabled_code,
+      ai_command: input_disabled_code
+    ) %>
+
+    <!-- Input with Placeholder Example -->
+    <% placeholder_html = capture do %>
+      <div class="w-full max-w-sm">
+        <%= render M9sh::InputComponent.new(
+          type: "text",
+          placeholder: "This is a placeholder..."
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Placeholder",
+      preview_content: placeholder_html,
+      code: input_placeholder_code,
+      ai_command: input_placeholder_code
+    ) %>
+
+    <!-- Input with Value Example -->
+    <% value_html = capture do %>
+      <div class="w-full max-w-sm">
+        <%= render M9sh::InputComponent.new(
+          type: "text",
+          value: "Pre-filled value",
+          placeholder: "Enter text..."
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "With Default Value",
+      preview_content: value_html,
+      code: input_value_code,
+      ai_command: input_value_code
+    ) %>
+
+    <!-- File Input Example -->
+    <% file_html = capture do %>
+      <div class="w-full max-w-sm">
+        <%= render M9sh::InputComponent.new(
+          type: "file"
+        ) %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "File Input",
+      preview_content: file_html,
+      code: input_file_code,
+      ai_command: input_file_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "type",
+          type: "String",
+          default: '"text"',
+          description: "The input type (text, email, password, number, file, etc.). Accepts any valid HTML input type."
+        },
+        {
+          name: "name",
+          type: "String",
+          default: "nil",
+          description: "The name attribute for the input field, used when submitting forms."
+        },
+        {
+          name: "value",
+          type: "String",
+          default: "nil",
+          description: "The default value for the input field."
+        },
+        {
+          name: "placeholder",
+          type: "String",
+          default: "nil",
+          description: "Placeholder text displayed when the input is empty."
+        },
+        {
+          name: "disabled",
+          type: "Boolean",
+          default: "false",
+          description: "Whether the input is disabled. Disabled inputs cannot be edited or submitted."
+        },
+        {
+          name: "**extra_attrs",
+          type: "Hash",
+          default: "{}",
+          description: "Additional HTML attributes to apply to the input element (e.g., id, class, data attributes, required, readonly, etc.)."
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Styling</h3>
+      <p class="text-sm text-muted-foreground">
+        The input component includes comprehensive styling with:
+      </p>
+      <ul class="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+        <li>Rounded borders with <code class="text-xs bg-muted px-1.5 py-0.5 rounded">border-input</code> color</li>
+        <li>Transparent background that adapts to theme</li>
+        <li>Focus ring with <code class="text-xs bg-muted px-1.5 py-0.5 rounded">focus-visible:ring-1</code></li>
+        <li>Smooth transitions on color changes</li>
+        <li>File input styling with <code class="text-xs bg-muted px-1.5 py-0.5 rounded">file:</code> pseudo-element modifiers</li>
+        <li>Placeholder styling with muted foreground color</li>
+        <li>Disabled state with reduced opacity and not-allowed cursor</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>Supports all standard HTML input types for proper semantics</li>
+        <li>Use with <code class="text-xs bg-muted px-1.5 py-0.5 rounded">LabelComponent</code> to associate labels with inputs</li>
+        <li>Disabled state properly prevents interaction and updates cursor</li>
+        <li>Focus-visible ring ensures keyboard navigation visibility</li>
+        <li>Placeholder text uses muted color for better accessibility</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-2">
+      <h3 class="text-lg font-semibold">Common Input Types</h3>
+      <div class="grid grid-cols-2 gap-4 text-sm">
+        <div>
+          <h4 class="font-semibold mb-2">Text Types</h4>
+          <ul class="list-disc list-inside space-y-1 text-muted-foreground">
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">text</code> - Standard text input</li>
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">email</code> - Email address input</li>
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">password</code> - Password input (hidden)</li>
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">tel</code> - Telephone number</li>
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">url</code> - URL input</li>
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">search</code> - Search input</li>
+          </ul>
+        </div>
+        <div>
+          <h4 class="font-semibold mb-2">Other Types</h4>
+          <ul class="list-disc list-inside space-y-1 text-muted-foreground">
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">number</code> - Numeric input</li>
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">date</code> - Date picker</li>
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">time</code> - Time picker</li>
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">datetime-local</code> - Date and time</li>
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">file</code> - File upload</li>
+            <li><code class="text-xs bg-muted px-1.5 py-0.5 rounded">color</code> - Color picker</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,128 @@
+<%= render Docs::ComponentPageComponent.new(title: "Label") do |page| %>
+  <% page.with_header(
+    name: "Label",
+    description: "Renders an accessible label associated with form controls."
+  ) %>
+
+  <% page.with_installation(component_name: "label") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: label_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Basic Label Example -->
+    <% basic_html = capture do %>
+      <%= render M9sh::LabelComponent.new(for_id: "email") do %>
+        Email
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Basic Label",
+      preview_content: basic_html,
+      code: label_usage_code,
+      ai_command: label_usage_code
+    ) %>
+
+    <!-- Label with Input Field Example -->
+    <% with_input_html = capture do %>
+      <div class="space-y-2 w-full max-w-sm">
+        <%= render M9sh::LabelComponent.new(for_id: "email") do %>
+          Email
+        <% end %>
+        <input
+          id="email"
+          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 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        />
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Label with Input Field",
+      preview_content: with_input_html,
+      code: label_with_input_code,
+      ai_command: label_with_input_code
+    ) %>
+
+    <!-- Label with Required Indicator Example -->
+    <% required_html = capture do %>
+      <div class="space-y-2 w-full max-w-sm">
+        <%= render M9sh::LabelComponent.new(for_id: "username") do %>
+          Username <span class="text-destructive">*</span>
+        <% end %>
+        <input
+          id="username"
+          type="text"
+          placeholder="Enter your username"
+          required
+          class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        />
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Label with Required Indicator",
+      preview_content: required_html,
+      code: label_with_required_code,
+      ai_command: label_with_required_code
+    ) %>
+
+    <!-- Label with Disabled Input Example -->
+    <% disabled_html = capture do %>
+      <div class="space-y-2 w-full max-w-sm group" data-disabled="true">
+        <%= render M9sh::LabelComponent.new(for_id: "disabled-input") do %>
+          Disabled Field
+        <% end %>
+        <input
+          id="disabled-input"
+          type="text"
+          placeholder="This field is disabled"
+          disabled
+          class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        />
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Label with Disabled Input",
+      preview_content: disabled_html,
+      code: label_with_disabled_code,
+      ai_command: label_with_disabled_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "for_id",
+          type: "String",
+          default: "nil",
+          description: "The ID of the form control this label is associated with. Sets the HTML 'for' attribute."
+        },
+        {
+          name: "**extra_attrs",
+          type: "Hash",
+          default: "{}",
+          description: "Additional HTML attributes to apply to the label element (e.g., class, data attributes)."
+        }
+      ]
+    ) %>
+
+    <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>The label uses the <code class="text-xs bg-muted px-1.5 py-0.5 rounded">for</code> attribute to associate with form controls</li>
+        <li>Labels are not selectable using the <code class="text-xs bg-muted px-1.5 py-0.5 rounded">select-none</code> class</li>
+        <li>Automatically responds to disabled state via <code class="text-xs bg-muted px-1.5 py-0.5 rounded">group-data-[disabled=true]</code> and <code class="text-xs bg-muted px-1.5 py-0.5 rounded">peer-disabled</code> selectors</li>
+        <li>Includes a <code class="text-xs bg-muted px-1.5 py-0.5 rounded">data-slot="label"</code> attribute for component composition</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>