m9sh 0.2.1 → 0.2.2

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

@@ -0,0 +1,272 @@
+<%- content_for :title, "Usage - 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">
+      Usage
+    </h1>
+    <p class="text-lg text-muted-foreground">
+      Three ways to use m9sh/ui components in your Rails application.
+    </p>
+  </div>
+
+  <!-- Overview -->
+  <div class="space-y-6">
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Overview
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        m9sh/ui provides three different syntaxes for rendering components, giving you flexibility based on your preference and use case.
+      </p>
+    </div>
+
+    <!-- Short Syntax (Recommended) -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Short Syntax (Recommended)
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        The <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>ui_*<% end %> helper methods provide the most concise syntax, inspired by shadcn/ui.
+      </p>
+      <%= render Docs::CodeBlockComponent.new(
+        code: @short_syntax_code,
+        language: "erb"
+      ) %>
+    </div>
+
+    <!-- Backwards Compatible Syntax -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Backwards Compatible Syntax
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        The <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>render_*<% end %> aliases provide compatibility if you prefer more explicit naming.
+      </p>
+      <%= render Docs::CodeBlockComponent.new(
+        code: @backwards_syntax_code,
+        language: "erb"
+      ) %>
+    </div>
+
+    <!-- Original Syntax -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Original Syntax (Still Supported)
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        The original ViewComponent syntax is still fully supported and useful when you need maximum control or explicit component instantiation.
+      </p>
+      <%= render Docs::CodeBlockComponent.new(
+        code: @original_syntax_code,
+        language: "erb"
+      ) %>
+    </div>
+
+    <!-- Available Helpers -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Available Helpers
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        All m9sh/ui components have corresponding helper methods. Here's the complete list:
+      </p>
+      <div class="mt-6 grid gap-4 sm:grid-cols-2">
+        <% [
+          ["ui_button", "render_button"],
+          ["ui_badge", "render_badge"],
+          ["ui_card", "render_card"],
+          ["ui_input", "render_input"],
+          ["ui_label", "render_label"],
+          ["ui_textarea", "render_textarea"],
+          ["ui_checkbox", "render_checkbox"],
+          ["ui_switch", "render_switch"],
+          ["ui_separator", "render_separator"],
+          ["ui_spinner", "render_spinner"],
+          ["ui_skeleton", "render_skeleton"],
+          ["ui_progress", "render_progress"],
+          ["ui_avatar", "render_avatar"],
+          ["ui_alert", "render_alert"],
+          ["ui_slider", "render_slider"],
+          ["ui_toggle", "render_toggle"],
+          ["ui_accordion", "render_accordion"],
+          ["ui_tabs", "render_tabs"],
+          ["ui_dialog", "render_dialog"],
+          ["ui_alert_dialog", "render_alert_dialog"],
+          ["ui_sheet", "render_sheet"],
+          ["ui_popover", "render_popover"],
+          ["ui_tooltip", "render_tooltip"],
+          ["ui_hover_card", "render_hover_card"],
+          ["ui_dropdown_menu", "render_dropdown_menu"],
+          ["ui_collapsible", "render_collapsible"],
+          ["ui_table", "render_table"],
+          ["ui_breadcrumb", "render_breadcrumb"],
+          ["ui_navigation_menu", "render_navigation_menu"],
+          ["ui_radio_group", "render_radio_group"],
+          ["ui_select", "render_select"],
+          ["ui_typography", "render_typography"],
+          ["ui_theme_toggle", "render_theme_toggle"]
+        ].each do |short, long| %>
+          <%= render M9sh::CardComponent.new(class: "p-3") do %>
+            <div class="space-y-1">
+              <code class="text-sm font-mono text-primary"><%= short %></code>
+              <p class="text-xs text-muted-foreground">alias: <code class="font-mono"><%= long %></code></p>
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Comparison -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Syntax Comparison
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <p class="mt-4 text-muted-foreground leading-7">
+        Here's how the three syntaxes compare for a typical button with outline variant:
+      </p>
+      <div class="mt-6 space-y-4">
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do %>
+            <div class="flex items-center justify-between">
+              <h3 class="font-semibold">Short Syntax</h3>
+              <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>Recommended<% end %>
+            </div>
+          <% end %>
+          <% card.with_body do %>
+            <%= render Docs::CodeBlockComponent.new(
+              code: @inline_short_example,
+              language: "erb"
+            ) %>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do %>
+            <h3 class="font-semibold">Backwards Compatible</h3>
+          <% end %>
+          <% card.with_body do %>
+            <%= render Docs::CodeBlockComponent.new(
+              code: @comparison_backwards_code,
+              language: "erb"
+            ) %>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do %>
+            <h3 class="font-semibold">Original ViewComponent</h3>
+          <% end %>
+          <% card.with_body do %>
+            <%= render Docs::CodeBlockComponent.new(
+              code: @comparison_original_code,
+              language: "erb"
+            ) %>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Which Should I Use? -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Which Should I Use?
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <div class="mt-6 space-y-6">
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do %>
+            <h3 class="font-semibold">Use Short Syntax (ui_*) when:</h3>
+          <% end %>
+          <% card.with_body do %>
+            <ul class="list-disc ml-6 space-y-2 text-sm text-muted-foreground">
+              <li>You want the most concise, readable code</li>
+              <li>You're familiar with shadcn/ui and prefer similar syntax</li>
+              <li>You're writing new code</li>
+              <li>You want Rails-native helper method benefits (automatic escaping, etc.)</li>
+            </ul>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do %>
+            <h3 class="font-semibold">Use Backwards Compatible (render_*) when:</h3>
+          <% end %>
+          <% card.with_body do %>
+            <ul class="list-disc ml-6 space-y-2 text-sm text-muted-foreground">
+              <li>You prefer more explicit "render" naming</li>
+              <li>You're migrating from another component library</li>
+              <li>Your team prefers explicit over concise</li>
+            </ul>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do %>
+            <h3 class="font-semibold">Use Original Syntax when:</h3>
+          <% end %>
+          <% card.with_body do %>
+            <ul class="list-disc ml-6 space-y-2 text-sm text-muted-foreground">
+              <li>You need to assign the component to a variable first</li>
+              <li>You're working with complex component composition</li>
+              <li>You prefer explicit ViewComponent instantiation</li>
+              <li>You need maximum flexibility and control</li>
+            </ul>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Tips -->
+    <div>
+      <h2 class="scroll-m-20 pb-2 text-3xl font-semibold tracking-tight transition-colors">
+        Tips & Best Practices
+      </h2>
+      <%= render M9sh::SeparatorComponent.new(class: "my-4") %>
+      <div class="mt-6 space-y-4">
+        <div>
+          <h3 class="font-semibold">Mix and Match</h3>
+          <p class="mt-2 text-sm text-muted-foreground leading-7">
+            You can freely mix all three syntaxes in the same application. They all produce identical output.
+          </p>
+        </div>
+
+        <div>
+          <h3 class="font-semibold">Inline Blocks</h3>
+          <p class="mt-2 text-sm text-muted-foreground leading-7">
+            For single-line content, use the inline block syntax <%= render M9sh::BadgeComponent.new(variant: :secondary) do %><code class="text-xs">{ "text" }</code><% end %> for even more concise code.
+          </p>
+          <%= render Docs::CodeBlockComponent.new(
+            code: @inline_block_example,
+            language: "erb"
+          ) %>
+        </div>
+
+        <div>
+          <h3 class="font-semibold">All Parameters Supported</h3>
+          <p class="mt-2 text-sm text-muted-foreground leading-7">
+            All helper methods support the exact same parameters as their component counterparts. Check individual component documentation for available options.
+          </p>
+        </div>
+
+        <div>
+          <h3 class="font-semibold">Custom Classes</h3>
+          <p class="mt-2 text-sm text-muted-foreground leading-7">
+            Add custom Tailwind classes using the <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>class:<% end %> parameter with any syntax.
+          </p>
+          <%= render Docs::CodeBlockComponent.new(
+            code: @custom_class_example,
+            language: "erb"
+          ) %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/layouts/application.html.erb

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <title><%= content_for(:title) || "m9sh/ui - Component Library for Rails" %></title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+  <%= javascript_importmap_tags %>
+</head>
+
+<body class="min-h-screen bg-background text-foreground antialiased" data-controller="theme color-theme">
+  <%= render M9sh::ToasterComponent.new %>
+
+  <!-- Color Customizer Sheet -->
+  <div data-color-theme-target="customizer">
+    <%= render M9sh::SheetComponent.new(side: "right") do |sheet| %>
+      <% sheet.with_trigger do %>
+        <button id="color-customizer-trigger" class="hidden">Open Customizer</button>
+      <% end %>
+
+      <% sheet.with_sheet_content do %>
+        <%= render M9sh::ColorCustomizerComponent.new(theme_name: "neutral") %>
+      <% end %>
+    <% end %>
+  </div>
+
+  <!-- Top Navbar using NavbarComponent -->
+  <%= render "shared/app_navbar", sticky: true %>
+
+  <!-- Main Content -->
+  <main style="padding-top: calc(3.5rem + env(safe-area-inset-top)); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom);">
+    <%= yield %>
+  </main>
+
+  <!-- Footer -->
+  <footer class="border-t border-border bg-card">
+    <div class="container mx-auto px-4 md:px-6 py-16">
+      <div class="grid gap-12 md:grid-cols-[2fr_1fr_1fr_1fr] max-w-6xl mx-auto">
+        <!-- Brand Column -->
+        <div class="space-y-4">
+          <div class="flex items-center space-x-2">
+            <span class="font-bold text-xl text-foreground">m9sh/ui</span>
+          </div>
+          <p class="text-sm text-muted-foreground leading-relaxed max-w-xs">
+            A comprehensive collection of beautifully designed ViewComponents for Rails, built with Tailwind CSS and ready to use.
+          </p>
+          <div class="flex items-center gap-3 pt-2">
+            <a href="https://github.com" target="_blank" rel="noreferrer"
+               class="flex items-center justify-center w-9 h-9 rounded-lg bg-muted hover:bg-accent transition-colors text-muted-foreground hover:text-foreground"
+               aria-label="GitHub">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+              </svg>
+            </a>
+          </div>
+        </div>
+
+        <!-- Documentation Column -->
+        <div class="space-y-4">
+          <h4 class="text-sm font-semibold text-foreground">Documentation</h4>
+          <ul class="space-y-3 text-sm">
+            <li><a href="/docs" class="text-muted-foreground hover:text-foreground transition-colors">Components</a></li>
+            <li><a href="/blocks" class="text-muted-foreground hover:text-foreground transition-colors">Blocks</a></li>
+            <li><a href="/docs/installation" class="text-muted-foreground hover:text-foreground transition-colors">Installation</a></li>
+            <li><a href="/docs" class="text-muted-foreground hover:text-foreground transition-colors">Examples</a></li>
+          </ul>
+        </div>
+
+        <!-- Resources Column -->
+        <div class="space-y-4">
+          <h4 class="text-sm font-semibold text-foreground">Resources</h4>
+          <ul class="space-y-3 text-sm">
+            <li><a href="https://github.com" target="_blank" rel="noreferrer" class="text-muted-foreground hover:text-foreground transition-colors">GitHub</a></li>
+            <li><a href="#" class="text-muted-foreground hover:text-foreground transition-colors">Changelog</a></li>
+            <li><a href="#" class="text-muted-foreground hover:text-foreground transition-colors">Contributing</a></li>
+            <li><a href="#" class="text-muted-foreground hover:text-foreground transition-colors">Community</a></li>
+          </ul>
+        </div>
+
+        <!-- Legal Column -->
+        <div class="space-y-4">
+          <h4 class="text-sm font-semibold text-foreground">Legal</h4>
+          <ul class="space-y-3 text-sm">
+            <li><a href="#" class="text-muted-foreground hover:text-foreground transition-colors">Privacy Policy</a></li>
+            <li><a href="#" class="text-muted-foreground hover:text-foreground transition-colors">Terms of Service</a></li>
+            <li><a href="#" class="text-muted-foreground hover:text-foreground transition-colors">License</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="border-t border-border mt-12 pt-8 max-w-6xl mx-auto">
+        <div class="flex flex-col sm:flex-row items-center justify-between gap-4">
+          <p class="text-sm text-muted-foreground">
+            © 2024 m9sh/ui. All rights reserved.
+          </p>
+          <p class="text-sm text-muted-foreground">
+            Built with Rails and Tailwind CSS
+          </p>
+        </div>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>

data/app/views/layouts/backdrop.html.erb

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en" class="h-full">
+<head>
+  <title><%= content_for(:title) || "m9sh/ui" %></title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
+  <%= javascript_importmap_tags %>
+</head>
+
+<body class="h-screen bg-background text-foreground" data-controller="theme color-theme">
+  <%= render ::BackdropComponent.new(
+    show_left_sidebar: content_for?(:left_sidebar) || @show_docs_sidebars || @show_blocks_sidebars,
+    show_right_sidebar: content_for?(:right_sidebar) || @show_docs_sidebars || @show_blocks_sidebars,
+    left_sidebar_width: content_for(:left_sidebar_width) || "w-[300px]",
+    right_sidebar_width: content_for(:right_sidebar_width) || "w-[300px]"
+  ) do |backdrop| %>
+    <!-- Navbar -->
+    <% if content_for?(:navbar) || @show_docs_sidebars || @show_blocks_sidebars %>
+      <% backdrop.with_navbar do %>
+        <% if content_for?(:navbar) %>
+          <%= yield :navbar %>
+        <% else %>
+          <%= render "shared/app_navbar",
+              sticky: false,
+              show_left_toggle: backdrop.instance_variable_get(:@show_left_sidebar),
+              show_right_toggle: backdrop.instance_variable_get(:@show_right_sidebar) %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <!-- Left Sidebar -->
+    <% if content_for?(:left_sidebar) || @show_docs_sidebars || @show_blocks_sidebars %>
+      <% backdrop.with_left_sidebar do %>
+        <% if content_for?(:left_sidebar) %>
+          <%= yield :left_sidebar %>
+        <% elsif @show_docs_sidebars %>
+          <%= render "docs/sidebar" %>
+        <% elsif @show_blocks_sidebars %>
+          <%= render "blocks/sidebar" %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <!-- Right Sidebar -->
+    <% if content_for?(:right_sidebar) || @show_docs_sidebars || @show_blocks_sidebars %>
+      <% backdrop.with_right_sidebar do %>
+        <% if content_for?(:right_sidebar) %>
+          <%= yield :right_sidebar %>
+        <% elsif @show_docs_sidebars %>
+          <%= render "docs/toc" %>
+        <% elsif @show_blocks_sidebars %>
+          <%= render "blocks/toc" %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <!-- Main Content -->
+    <% backdrop.with_main_content do %>
+      <% if @show_docs_sidebars || @show_blocks_sidebars %>
+        <%= render M9sh::MainComponent.new(class_name: "m-0 md:mx-4 md:my-12") do %>
+          <div class="flex-1 overflow-y-auto">
+            <div class="max-w-4xl mx-auto">
+              <%= yield %>
+            </div>
+          </div>
+        <% end %>
+      <% else %>
+        <%= yield %>
+      <% end %>
+    <% end %>
+  <% end %>
+</body>
+</html>