m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,180 @@
+<%= render Docs::ComponentPageComponent.new(title: "Typography") do |page| %>
+  <% page.with_header(
+    name: "Typography",
+    description: "Styles for headings, paragraphs, lists, and other text elements."
+  ) %>
+
+  <% page.with_installation(component_name: "typography") %>
+
+  <% page.with_usage do %>
+    <%= render Docs::CodeBlockComponent.new(
+      code: typography_usage_code,
+      language: "erb"
+    ) %>
+  <% end %>
+
+  <% page.with_examples do %>
+    <!-- Headings Example -->
+    <% headings_html = capture do %>
+      <div class="space-y-4">
+        <%= render M9sh::TypographyComponent.new(variant: :h1) do %>
+          Taxing Laughter: The Joke Tax Chronicles
+        <% end %>
+        <%= render M9sh::TypographyComponent.new(variant: :h2) do %>
+          The People of the Kingdom
+        <% end %>
+        <%= render M9sh::TypographyComponent.new(variant: :h3) do %>
+          The Joke Tax
+        <% end %>
+        <%= render M9sh::TypographyComponent.new(variant: :h4) do %>
+          People stopped telling jokes
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Headings",
+      preview_content: headings_html,
+      code: typography_headings_code,
+      ai_command: typography_headings_code
+    ) %>
+
+    <!-- Paragraph Example -->
+    <% paragraph_html = capture do %>
+      <%= render M9sh::TypographyComponent.new(variant: :p) do %>
+        The king, seeing how much happier his subjects were, realized the error of his ways
+        and repealed the joke tax.
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Paragraph",
+      preview_content: paragraph_html,
+      code: typography_paragraph_code,
+      ai_command: typography_paragraph_code
+    ) %>
+
+    <!-- Blockquote Example -->
+    <% blockquote_html = capture do %>
+      <%= render M9sh::TypographyComponent.new(variant: :blockquote) do %>
+        "After all," he said, "everyone enjoys a good joke, so it's only fair that they should
+        pay for the privilege."
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Blockquote",
+      preview_content: blockquote_html,
+      code: typography_blockquote_code,
+      ai_command: typography_blockquote_code
+    ) %>
+
+    <!-- List Example -->
+    <% list_html = capture do %>
+      <%= render M9sh::TypographyComponent.new(variant: :list) do %>
+        <li>1st level of puns: 5 gold coins</li>
+        <li>2nd level of jokes: 10 gold coins</li>
+        <li>3rd level of one-liners: 20 gold coins</li>
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "List",
+      preview_content: list_html,
+      code: typography_list_code,
+      ai_command: typography_list_code
+    ) %>
+
+    <!-- Inline Code Example -->
+    <% inline_code_html = capture do %>
+      <p class="leading-7">
+        Install the <%= render M9sh::TypographyComponent.new(variant: :inline_code) do %>@radix-ui/react-alert-dialog<% end %> package.
+      </p>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Inline Code",
+      preview_content: inline_code_html,
+      code: typography_inline_code_code,
+      ai_command: typography_inline_code_code
+    ) %>
+
+    <!-- Lead Example -->
+    <% lead_html = capture do %>
+      <%= render M9sh::TypographyComponent.new(variant: :lead) do %>
+        A modal dialog that interrupts the user with important content and expects a response.
+      <% end %>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Lead Text",
+      preview_content: lead_html,
+      code: typography_lead_code,
+      ai_command: typography_lead_code
+    ) %>
+
+    <!-- Text Variants Example -->
+    <% variants_html = capture do %>
+      <div class="space-y-4">
+        <%= render M9sh::TypographyComponent.new(variant: :large) do %>
+          Are you absolutely sure?
+        <% end %>
+        <%= render M9sh::TypographyComponent.new(variant: :small) do %>
+          Email address
+        <% end %>
+        <%= render M9sh::TypographyComponent.new(variant: :muted) do %>
+          Enter your email address.
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render Docs::ComponentPreviewComponent.new(
+      title: "Text Variants",
+      preview_content: variants_html,
+      code: typography_variants_code,
+      ai_command: typography_variants_code
+    ) %>
+  <% end %>
+
+  <% page.with_api do %>
+    <%= render Docs::PropTableComponent.new(
+      props: [
+        {
+          name: "variant",
+          type: "Symbol",
+          default: ":p",
+          description: "The typography style. Options: :h1, :h2, :h3, :h4, :p, :blockquote, :list, :inline_code, :lead, :large, :small, :muted"
+        },
+        {
+          name: "tag",
+          type: "Symbol",
+          default: "nil",
+          description: "Override the default HTML tag for the variant. By default, each variant uses an appropriate semantic tag."
+        }
+      ]
+    ) %>
+
+    <div class="mt-6 space-y-3 text-sm">
+      <h3 class="text-lg font-semibold">Default Tags</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">:h1</code>, <code class="text-xs bg-muted px-1 py-0.5 rounded">:h2</code>, <code class="text-xs bg-muted px-1 py-0.5 rounded">:h3</code>, <code class="text-xs bg-muted px-1 py-0.5 rounded">:h4</code> - Use their corresponding heading tags</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">:p</code>, <code class="text-xs bg-muted px-1 py-0.5 rounded">:lead</code>, <code class="text-xs bg-muted px-1 py-0.5 rounded">:muted</code> - Use <code class="text-xs bg-muted px-1 py-0.5 rounded">&lt;p&gt;</code> tag</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">:blockquote</code> - Uses <code class="text-xs bg-muted px-1 py-0.5 rounded">&lt;blockquote&gt;</code> tag</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">:list</code> - Uses <code class="text-xs bg-muted px-1 py-0.5 rounded">&lt;ul&gt;</code> tag</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">:inline_code</code> - Uses <code class="text-xs bg-muted px-1 py-0.5 rounded">&lt;code&gt;</code> tag</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">:small</code> - Uses <code class="text-xs bg-muted px-1 py-0.5 rounded">&lt;small&gt;</code> tag</li>
+        <li><code class="text-xs bg-muted px-1 py-0.5 rounded">:large</code> - Uses <code class="text-xs bg-muted px-1 py-0.5 rounded">&lt;div&gt;</code> tag</li>
+      </ul>
+    </div>
+
+    <div class="mt-6 space-y-3 text-sm">
+      <h3 class="text-lg font-semibold">Notes</h3>
+      <ul class="list-disc list-inside space-y-1 text-muted-foreground">
+        <li>The Typography component provides consistent styling for text elements across your application</li>
+        <li>Each variant uses appropriate semantic HTML tags by default, but can be overridden with the <code class="text-xs bg-muted px-1 py-0.5 rounded">tag</code> parameter</li>
+        <li>The component automatically applies proper spacing, sizing, and styling based on the variant</li>
+        <li>Use <code class="text-xs bg-muted px-1 py-0.5 rounded">:lead</code> for introductory paragraphs and <code class="text-xs bg-muted px-1 py-0.5 rounded">:muted</code> for secondary text</li>
+      </ul>
+    </div>
+  <% end %>
+<% end %>

data/app/views/docs/index.html.erb

@@ -0,0 +1,143 @@
+<% content_for :title, "Introduction - m9sh/ui" %>
+
+<div class="space-y-12">
+  <!-- Hero Section -->
+  <div class="space-y-6 py-8">
+    <div class="space-y-4">
+      <h1 class="scroll-m-20 text-5xl font-bold tracking-tight lg:text-6xl">
+        Build faster with m9sh/ui
+      </h1>
+      <p class="text-xl text-muted-foreground max-w-[700px]">
+        Beautifully designed components based on shadcn/ui that you can copy and paste into your Rails applications.
+        Accessible. Customizable. Open Source.
+      </p>
+    </div>
+
+    <div class="flex gap-4 pt-4">
+      <%= link_to docs_installation_path do %>
+        <%= render M9sh::ButtonComponent.new(size: :lg) do %>
+          Get Started
+        <% end %>
+      <% end %>
+      <%= link_to docs_component_path('accordion') do %>
+        <%= render M9sh::ButtonComponent.new(variant: :outline, size: :lg) do %>
+          Browse Components
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+
+  <!-- Key Points -->
+  <div class="space-y-8">
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        What is m9sh/ui?
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        This is NOT a component library. It's a collection of re-usable ViewComponents that you can copy and paste into your Rails apps.
+      </p>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Pick the components you need. Copy the code into your project and customize to your needs. The code is yours.
+      </p>
+    </div>
+
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Philosophy
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        The idea behind this is to give you ownership and control over the code, allowing you to decide how the components are built and styled.
+      </p>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Start with some sensible defaults, then customize the components to your needs.
+      </p>
+      <p class="mt-4 text-muted-foreground leading-7">
+        One of the drawbacks of packaging the components in a gem is that the style is coupled with the implementation. The design of your components should be separate from their implementation.
+      </p>
+    </div>
+
+    <!-- Features Grid -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Features
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <div class="mt-6 grid gap-6 sm:grid-cols-2">
+        <%= render M9sh::CardComponent.new(class: "space-y-2") do |card| %>
+          <% card.with_header do %>
+            <h3 class="font-semibold">Accessible</h3>
+          <% end %>
+          <% card.with_body do %>
+            <p class="text-sm text-muted-foreground">
+              Built with accessibility in mind. Components follow WAI-ARIA design patterns and support keyboard navigation.
+            </p>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new(class: "space-y-2") do |card| %>
+          <% card.with_header do %>
+            <h3 class="font-semibold">Customizable</h3>
+          <% end %>
+          <% card.with_body do %>
+            <p class="text-sm text-muted-foreground">
+              Full control over styling. Copy the code and modify it to match your design system.
+            </p>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new(class: "space-y-2") do |card| %>
+          <% card.with_header do %>
+            <h3 class="font-semibold">ViewComponent</h3>
+          <% end %>
+          <% card.with_body do %>
+            <p class="text-sm text-muted-foreground">
+              Built with ViewComponent for Rails. Testable, reusable, and follows Rails conventions.
+            </p>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new(class: "space-y-2") do |card| %>
+          <% card.with_header do %>
+            <h3 class="font-semibold">Modern Stack</h3>
+          <% end %>
+          <% card.with_body do %>
+            <p class="text-sm text-muted-foreground">
+              Uses Tailwind CSS for styling and Stimulus for JavaScript interactions.
+            </p>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        FAQ
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <div class="mt-6 space-y-6">
+        <div>
+          <h3 class="font-semibold">Why Rails ViewComponents?</h3>
+          <p class="mt-2 text-sm text-muted-foreground leading-7">
+            ViewComponents provide a Ruby-native way to build reusable, testable view components in Rails. They integrate seamlessly with your Rails application and Stimulus controllers.
+          </p>
+        </div>
+
+        <div>
+          <h3 class="font-semibold">Do I need to install a gem?</h3>
+          <p class="mt-2 text-sm text-muted-foreground leading-7">
+            No. Simply browse the components in the sidebar, copy the code, and paste it into your Rails application. The code is yours to customize.
+          </p>
+        </div>
+
+        <div>
+          <h3 class="font-semibold">Can I use this in my project?</h3>
+          <p class="mt-2 text-sm text-muted-foreground leading-7">
+            Yes. Free to use for personal and commercial projects. No attribution required.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/docs/installation.html.erb

@@ -0,0 +1,155 @@
+<% content_for :title, "Installation - m9sh/ui" %>
+
+<div class="space-y-12 max-w-3xl">
+  <!-- Page Header -->
+  <div class="space-y-4">
+    <h1 class="scroll-m-20 text-4xl font-bold tracking-tight lg:text-5xl">
+      Installation
+    </h1>
+    <p class="text-lg text-muted-foreground">
+      How to install dependencies and structure your app.
+    </p>
+  </div>
+
+  <!-- Requirements -->
+  <div class="space-y-6">
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Requirements
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        This project requires the following dependencies:
+      </p>
+      <ul class="mt-4 ml-6 list-disc text-muted-foreground leading-7 space-y-2">
+        <li>Ruby on Rails 7.0 or higher</li>
+        <li>view_component gem</li>
+        <li>Tailwind CSS</li>
+        <li>Stimulus (for interactive components)</li>
+      </ul>
+    </div>
+
+    <!-- Install ViewComponent -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Install ViewComponent
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Add the view_component gem to your Gemfile:
+      </p>
+      <%= render Docs::CodeBlockComponent.new(
+        code: 'gem "view_component"',
+        language: "ruby"
+      ) %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Then run:
+      </p>
+      <%= render Docs::CodeBlockComponent.new(
+        code: 'bundle install',
+        language: "bash"
+      ) %>
+    </div>
+
+    <!-- Configure Tailwind CSS -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Configure Tailwind CSS
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        This project uses Tailwind CSS. If you don't have it installed yet, follow the official Rails + Tailwind CSS installation guide.
+      </p>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Make sure your <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>tailwind.config.js<% end %> includes the components directory:
+      </p>
+      <%= render Docs::CodeBlockComponent.new(
+        code: <<~JS,
+          module.exports = {
+            content: [
+              './app/components/**/*.{rb,erb}',
+              './app/views/**/*.{erb,html}',
+              './app/helpers/**/*.rb',
+              './app/javascript/**/*.js'
+            ]
+          }
+        JS
+        language: "javascript"
+      ) %>
+    </div>
+
+    <!-- Install M9sh CLI -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Install M9sh CLI (Recommended)
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        The easiest way to add components is using the M9sh CLI. Install it globally:
+      </p>
+      <%= render Docs::CodeBlockComponent.new(
+        code: 'gem install m9sh',
+        language: "bash"
+      ) %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Initialize M9sh in your project:
+      </p>
+      <%= render Docs::CodeBlockComponent.new(
+        code: 'm9sh init',
+        language: "bash"
+      ) %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Add components with automatic dependency resolution:
+      </p>
+      <%= render Docs::CodeBlockComponent.new(
+        code: <<~BASH,
+          # Add a single component
+          m9sh add button
+
+          # Add multiple components
+          m9sh add card dialog tabs
+
+          # Add all components
+          m9sh add --all
+        BASH
+        language: "bash"
+      ) %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        List available components:
+      </p>
+      <%= render Docs::CodeBlockComponent.new(
+        code: 'm9sh list',
+        language: "bash"
+      ) %>
+    </div>
+
+    <!-- Manual Installation -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Manual Installation
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Alternatively, you can manually copy and paste component code from the documentation pages.
+      </p>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Components should be placed in:
+      </p>
+      <ul class="mt-4 ml-6 list-disc text-muted-foreground leading-7 space-y-2">
+        <li><%= render M9sh::BadgeComponent.new(variant: :secondary) do %>app/components/m9sh/<% end %> for Ruby component files</li>
+        <li><%= render M9sh::BadgeComponent.new(variant: :secondary) do %>app/javascript/controllers/m9sh/<% end %> for Stimulus controllers</li>
+      </ul>
+    </div>
+
+    <!-- That's it! -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        That's it!
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        You can now start using the components in your Rails application. Each component page includes usage examples and code snippets.
+      </p>
+    </div>
+  </div>
+</div>

data/app/views/docs/simple_test.html.erb

@@ -0,0 +1,13 @@
+<h1>Simple Test</h1>
+
+<% component = M9sh::AccordionComponent.new(type: "single", collapsible: true) %>
+<% component.with_item(value: "test-1") do |item| %>
+  <% item.with_trigger do %>
+    Trigger Text
+  <% end %>
+  <% item.with_body do %>
+    Body Text
+  <% end %>
+<% end %>
+
+<%= render component %>

data/app/views/docs/test_accordion.html.erb

@@ -0,0 +1,14 @@
+<h1>Test Accordion</h1>
+
+<div class="p-8">
+  <%= render M9sh::AccordionComponent.new(type: "single", collapsible: true) do |accordion| %>
+    <% accordion.with_item(value: "test-1") do |item| %>
+      <% item.with_trigger do %>
+        Test Question 1
+      <% end %>
+      <% item.with_body do %>
+        Test Answer 1
+      <% end %>
+    <% end %>
+  <% end %>
+</div>