m9sh 0.2.1 → 0.2.2

data/app/controllers/blocks_controller.rb

@@ -0,0 +1,51 @@
+class BlocksController < ApplicationController
+  layout "backdrop"
+  before_action :setup_layout
+
+  BLOCKS = %w[
+    dashboard-01
+    dashboard-02
+    dashboard-03
+    settings-01
+    settings-02
+    settings-03
+  ].freeze
+
+  BLOCK_DESCRIPTIONS = {
+    'dashboard-01' => 'Comprehensive dashboard with stats cards, charts, and recent activity.',
+    'dashboard-02' => 'Analytics-focused dashboard with metrics, progress indicators, and activity feed.',
+    'dashboard-03' => 'E-commerce dashboard with orders, inventory, and customer insights.',
+    'settings-01' => 'Profile and account settings with form inputs, avatar upload, and preferences.',
+    'settings-02' => 'Appearance and display settings with theme selection and layout options.',
+    'settings-03' => 'Notifications and integrations with connected accounts and API access.'
+  }.freeze
+
+  BLOCK_CATEGORIES = {
+    'Dashboard' => %w[dashboard-01 dashboard-02 dashboard-03],
+    'Settings' => %w[settings-01 settings-02 settings-03]
+  }.freeze
+
+  def index
+    # Blocks landing page showing all available blocks
+    @current_page = 'index'
+  end
+
+  def show
+    @block = params[:name]
+
+    unless BLOCKS.include?(@block)
+      redirect_to blocks_path, alert: "Block not found"
+      return
+    end
+
+    render "blocks/examples/#{@block}"
+  rescue ActionView::MissingTemplate
+    redirect_to blocks_path, alert: "Block #{@block} is not yet available"
+  end
+
+  private
+
+  def setup_layout
+    @show_blocks_sidebars = true
+  end
+end

data/app/controllers/docs_controller.rb

@@ -0,0 +1,162 @@
+class DocsController < ApplicationController
+  layout "backdrop"
+  before_action :setup_layout
+
+  GETTING_STARTED_PAGES = %w[
+    installation usage about
+  ].freeze
+
+  COMPONENTS = %w[
+    accordion alert alert_dialog avatar badge breadcrumb button card
+    checkbox collapsible dialog dropdown_menu hover_card input label
+    main navbar navigation_menu popover progress radio_group select separator sheet sidebar
+    skeleton slider spinner switch table tabs textarea theme_toggle toast
+    toaster tooltip toggle typography
+  ].freeze
+
+  COMPONENT_DESCRIPTIONS = {
+    'accordion' => 'A vertically stacked set of interactive headings that each reveal a section of content.',
+    'alert' => 'Displays a callout for user attention.',
+    'alert_dialog' => 'A modal dialog that interrupts the user with important content and expects a response.',
+    'avatar' => 'An image element with a fallback for representing the user.',
+    'badge' => 'Displays a badge or a component that looks like a badge.',
+    'breadcrumb' => 'Displays the path to the current resource using a hierarchy of links.',
+    'button' => 'Displays a button or a component that looks like a button.',
+    'card' => 'Displays a card with header, content, and footer.',
+    'checkbox' => 'A control that allows the user to toggle between checked and not checked.',
+    'collapsible' => 'An interactive component which expands/collapses a panel.',
+    'dialog' => 'A window overlaid on either the primary window or another dialog window.',
+    'dropdown_menu' => 'Displays a menu to the user — such as a set of actions or functions — triggered by a button.',
+    'hover_card' => 'For sighted users to preview content available behind a link.',
+    'input' => 'Displays a form input field or a component that looks like an input field.',
+    'label' => 'Renders an accessible label associated with controls.',
+    'main' => 'A container component that creates a rounded, elevated content area with shadow effects.',
+    'navbar' => 'A responsive navigation header component with logo, navigation links, and action buttons.',
+    'navigation_menu' => 'A collection of links for navigating websites.',
+    'popover' => 'Displays rich content in a portal, triggered by a button.',
+    'progress' => 'Displays an indicator showing the completion progress of a task.',
+    'radio_group' => 'A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.',
+    'select' => 'Displays a list of options for the user to pick from—triggered by a button.',
+    'separator' => 'Visually or semantically separates content.',
+    'sheet' => 'Extends the Dialog component to display content that complements the main content of the screen.',
+    'sidebar' => 'A composable, themeable sidebar component with collapsible navigation and responsive behavior.',
+    'skeleton' => 'Use to show a placeholder while content is loading.',
+    'slider' => 'An input where the user selects a value from within a given range.',
+    'spinner' => 'An indicator that can be used to show a loading state.',
+    'switch' => 'A control that allows the user to toggle between checked and not checked.',
+    'table' => 'A responsive table component.',
+    'tabs' => 'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
+    'textarea' => 'Displays a form textarea or a component that looks like a textarea.',
+    'theme_toggle' => 'A toggle button to switch between light and dark themes.',
+    'toast' => 'A succinct message that is displayed temporarily.',
+    'toaster' => 'The provider component for the toast notification system.',
+    'tooltip' => 'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
+    'toggle' => 'A two-state button that can be either on or off.',
+    'typography' => 'Styles for headings, paragraphs, lists, and other text elements.'
+  }.freeze
+
+  def index
+    # Introduction page
+    @current_page = 'introduction'
+  end
+
+  def installation
+    @current_page = 'installation'
+  end
+
+  def usage
+    @current_page = 'usage'
+
+    @short_syntax_code = %q{<%# Button %>
+<%= ui_button(variant: :outline, class: "w-full") do %>
+  Click me
+<% end %>
+
+<%# Badge %>
+<%= ui_badge(variant: :secondary) do %>
+  New
+<% end %>
+
+<%# Input %>
+<%= ui_input(type: "email", placeholder: "Enter your email") %>
+
+<%# Card with slots %>
+<%= ui_card(class: "w-full") do |card| %>
+  <% card.with_header do %>
+    <h3 class="font-semibold">Card Title</h3>
+  <% end %>
+  <% card.with_body do %>
+    Card content goes here.
+  <% end %>
+<% end %>}
+
+    @backwards_syntax_code = %q{<%# These are aliases to the ui_* methods %>
+<%= render_button(variant: :outline) do %>
+  Click me
+<% end %>
+
+<%= render_badge(variant: :secondary) do %>
+  New
+<% end %>
+
+<%= render_input(type: "email", placeholder: "Enter your email") %>}
+
+    @original_syntax_code = %q{<%# Full ViewComponent syntax %>
+<%= render M9sh::ButtonComponent.new(variant: :outline, class: "w-full") do %>
+  Click me
+<% end %>
+
+<%= render M9sh::BadgeComponent.new(variant: :secondary) do %>
+  New
+<% end %>
+
+<%= render M9sh::InputComponent.new(type: "email", placeholder: "Enter your email") %>}
+
+    @comparison_backwards_code = %q{<%= render_button(variant: :outline, class: "w-full") do %>
+  Submit
+<% end %>}
+
+    @comparison_original_code = %q{<%= render M9sh::ButtonComponent.new(variant: :outline, class: "w-full") do %>
+  Submit
+<% end %>}
+
+    @inline_short_example = %q{<%= ui_button(variant: :outline, class: "w-full") { "Submit" } %>}
+    @inline_block_example = %q{<%= ui_button(variant: :outline) { "Click me" } %>}
+    @custom_class_example = %q{<%= ui_button(variant: :outline, class: "w-full mt-4") { "Full Width" } %>}
+  end
+
+  def about
+    @current_page = 'about'
+  end
+
+  def test_accordion
+    # Test page for accordion
+  end
+
+  def debug_accordion
+    # Debug page for accordion
+  end
+
+  def simple_test
+    # Simple test page
+  end
+
+  def component
+    @component = params[:name]
+
+    unless COMPONENTS.include?(@component)
+      redirect_to docs_path, alert: "Component not found"
+      return
+    end
+
+    render "docs/components/#{@component}"
+  rescue ActionView::MissingTemplate
+    redirect_to docs_path, alert: "Documentation for #{@component} is not yet available"
+  end
+
+  private
+
+  def setup_layout
+    @show_docs_sidebars = true
+  end
+end

data/app/controllers/showcase_controller.rb

@@ -0,0 +1,42 @@
+class ShowcaseController < ApplicationController
+  def index
+    # Main showcase page with all components
+  end
+
+  def v2
+    # New showcase v2 - uses application layout with m9sh components
+    @components = DocsController::COMPONENTS
+    @descriptions = DocsController::COMPONENT_DESCRIPTIONS
+  end
+
+  def components
+    # Components gallery page
+    @components = DocsController::COMPONENTS
+    @descriptions = DocsController::COMPONENT_DESCRIPTIONS
+    render layout: false
+  end
+
+  def buttons
+    # Button component examples
+  end
+
+  def cards
+    # Card component examples
+  end
+
+  def forms
+    # Form component examples
+  end
+
+  def accordion
+    # Accordion component examples
+  end
+
+  def dialog
+    # Dialog component examples
+  end
+
+  def tabs
+    # Tabs component examples
+  end
+end

data/app/helpers/blocks_helper.rb

@@ -0,0 +1,343 @@
+# frozen_string_literal: true
+
+module BlocksHelper
+  # Extract code from the current view file between markers
+  def extract_block_code(start_marker, end_marker)
+    view_file = caller_locations.find { |loc| loc.path.include?('app/views/blocks/examples') }&.path
+    return "" unless view_file && File.exist?(view_file)
+
+    content = File.read(view_file)
+    start_index = content.index(start_marker)
+    end_index = content.index(end_marker, start_index) if start_index
+
+    return "" unless start_index && end_index
+
+    # Extract the code between markers and clean it up
+    code = content[start_index + start_marker.length...end_index]
+
+    # Remove leading whitespace while preserving relative indentation
+    lines = code.lines
+    return "" if lines.empty?
+
+    # Find minimum indentation (excluding empty lines)
+    min_indent = lines.reject { |line| line.strip.empty? }
+                      .map { |line| line[/^\s*/].length }
+                      .min || 0
+
+    # Remove the minimum indentation from all lines
+    lines.map { |line| line.strip.empty? ? line : line[min_indent..] || line }.join.strip
+  end
+  def dashboard_01_code
+    <<~'CODE'
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <!-- Stats Cards -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header(class: "flex flex-row items-center justify-between pb-2") do %>
+            <h3 class="text-sm font-medium text-muted-foreground">Total Revenue</h3>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+              <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+            </svg>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-2xl font-bold">$45,231.89</div>
+            <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header(class: "flex flex-row items-center justify-between pb-2") do %>
+            <h3 class="text-sm font-medium text-muted-foreground">Subscriptions</h3>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+              <circle cx="9" cy="7" r="4" />
+              <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+            </svg>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-2xl font-bold">+2350</div>
+            <p class="text-xs text-muted-foreground">+180.1% from last month</p>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header(class: "flex flex-row items-center justify-between pb-2") do %>
+            <h3 class="text-sm font-medium text-muted-foreground">Sales</h3>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+              <rect width="20" height="14" x="2" y="5" rx="2" />
+              <path d="M2 10h20" />
+            </svg>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-2xl font-bold">+12,234</div>
+            <p class="text-xs text-muted-foreground">+19% from last month</p>
+          <% end %>
+        <% end %>
+
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header(class: "flex flex-row items-center justify-between pb-2") do %>
+            <h3 class="text-sm font-medium text-muted-foreground">Active Now</h3>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+              <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+            </svg>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-2xl font-bold">+573</div>
+            <p class="text-xs text-muted-foreground">+201 since last hour</p>
+          <% end %>
+        <% end %>
+      </div>
+    CODE
+  end
+
+  def dashboard_02_code
+    <<~'CODE'
+      <!-- Top Metrics Row -->
+      <div class="grid gap-4 md:grid-cols-3">
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Total Users" } %>
+            <% header.with_description { "Active users this month" } %>
+          <% end %>
+          <% card.with_body do %>
+            <div class="text-3xl font-bold">12,543</div>
+            <p class="text-xs text-muted-foreground mt-2">
+              <%= render M9sh::BadgeComponent.new(variant: :default) { "+12.5%" } %>
+              from last month
+            </p>
+          <% end %>
+        <% end %>
+        <!-- Add more metric cards... -->
+      </div>
+
+      <!-- Activity Feed and Goals -->
+      <div class="grid gap-4 md:grid-cols-2">
+        <!-- Activity Feed -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Recent Activity" } %>
+          <% end %>
+          <% card.with_body do %>
+            <!-- Activity items with avatars and badges -->
+          <% end %>
+        <% end %>
+
+        <!-- Goals Progress -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Monthly Goals" } %>
+          <% end %>
+          <% card.with_body do %>
+            <%= render M9sh::ProgressComponent.new(value: 84.2) %>
+            <!-- More progress indicators -->
+          <% end %>
+        <% end %>
+      </div>
+    CODE
+  end
+
+  def dashboard_03_code
+    <<~'CODE'
+      <!-- Quick Stats -->
+      <div class="grid gap-4 md:grid-cols-4">
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_body do %>
+            <div class="flex items-center justify-between">
+              <div>
+                <p class="text-sm font-medium text-muted-foreground">Total Sales</p>
+                <p class="text-2xl font-bold mt-1">$54,239</p>
+              </div>
+              <!-- Icon SVG -->
+            </div>
+          <% end %>
+        <% end %>
+        <!-- Add more stat cards... -->
+      </div>
+
+      <!-- Recent Orders and Top Products -->
+      <div class="grid gap-4 md:grid-cols-2">
+        <!-- Orders Table -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Recent Orders" } %>
+          <% end %>
+          <% card.with_body do %>
+            <%= render M9sh::TableComponent.new do |table| %>
+              <!-- Table content -->
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <!-- Top Products -->
+        <%= render M9sh::CardComponent.new do |card| %>
+          <% card.with_header do |header| %>
+            <% header.with_title { "Top Products" } %>
+          <% end %>
+          <% card.with_body do %>
+            <!-- Product list with badges -->
+          <% end %>
+        <% end %>
+      </div>
+    CODE
+  end
+
+  def settings_01_code
+    <<~'CODE'
+      <!-- Profile Section -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title { "Profile" } %>
+          <% header.with_description { "Update your personal information and profile picture." } %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-6">
+            <!-- Avatar Upload -->
+            <div class="flex items-center gap-4">
+              <%= render M9sh::AvatarComponent.new(fallback: "JD", class: "h-20 w-20") %>
+              <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm) { "Change Avatar" } %>
+            </div>
+
+            <!-- Form Fields -->
+            <div class="grid gap-4 md:grid-cols-2">
+              <div class="space-y-2">
+                <%= render M9sh::LabelComponent.new(for: "first-name") { "First Name" } %>
+                <%= render M9sh::InputComponent.new(id: "first-name", placeholder: "John") %>
+              </div>
+              <div class="space-y-2">
+                <%= render M9sh::LabelComponent.new(for: "last-name") { "Last Name" } %>
+                <%= render M9sh::InputComponent.new(id: "last-name", placeholder: "Doe") %>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <%= render M9sh::LabelComponent.new(for: "email") { "Email" } %>
+              <%= render M9sh::InputComponent.new(id: "email", type: :email) %>
+            </div>
+          </div>
+        <% end %>
+        <% card.with_footer do %>
+          <%= render M9sh::ButtonComponent.new { "Save Changes" } %>
+        <% end %>
+      <% end %>
+
+      <!-- Preferences with Switches -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title { "Preferences" } %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="flex items-center justify-between">
+            <div class="space-y-0.5">
+              <%= render M9sh::LabelComponent.new(for: "marketing") { "Marketing Emails" } %>
+              <p class="text-sm text-muted-foreground">Receive emails about new products.</p>
+            </div>
+            <%= render M9sh::SwitchComponent.new(id: "marketing") %>
+          </div>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def settings_02_code
+    <<~'CODE'
+      <!-- Theme Selection -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title { "Theme" } %>
+          <% header.with_description { "Select your preferred color theme." } %>
+        <% end %>
+        <% card.with_body do %>
+          <%= render M9sh::RadioGroupComponent.new(name: "theme", default_value: "light") do |group| %>
+            <div class="grid gap-4 md:grid-cols-3">
+              <label class="border rounded-lg p-4 cursor-pointer hover:bg-accent">
+                <%= group.radio_item(value: "light", id: "theme-light") %>
+                <p class="font-medium">Light</p>
+                <p class="text-sm text-muted-foreground">Clean and bright</p>
+              </label>
+              <label class="border rounded-lg p-4 cursor-pointer hover:bg-accent">
+                <%= group.radio_item(value: "dark", id: "theme-dark") %>
+                <p class="font-medium">Dark</p>
+                <p class="text-sm text-muted-foreground">Easy on the eyes</p>
+              </label>
+              <label class="border rounded-lg p-4 cursor-pointer hover:bg-accent">
+                <%= group.radio_item(value: "system", id: "theme-system") %>
+                <p class="font-medium">System</p>
+                <p class="text-sm text-muted-foreground">Use system preference</p>
+              </label>
+            </div>
+          <% end %>
+        <% end %>
+      <% end %>
+
+      <!-- Layout Options -->
+      <%= render M9sh::CardComponent.new do |card| %>
+        <% card.with_header do |header| %>
+          <% header.with_title { "Layout" } %>
+        <% end %>
+        <% card.with_body do %>
+          <div class="space-y-4">
+            <div class="flex items-start space-x-3">
+              <%= render M9sh::CheckboxComponent.new(id: "compact") %>
+              <div class="space-y-1">
+                <%= render M9sh::LabelComponent.new(for: "compact") { "Compact Mode" } %>
+                <p class="text-sm text-muted-foreground">Reduce spacing between elements.</p>
+              </div>
+            </div>
+          </div>
+        <% end %>
+        <% card.with_footer do %>
+          <%= render M9sh::ButtonComponent.new { "Save Preferences" } %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+
+  def settings_03_code
+    <<~'CODE'
+      <%= render M9sh::TabsComponent.new(default_value: "notifications") do |tabs| %>
+        <% tabs.with_tabs_list do %>
+          <%= tabs.tabs_trigger(value: "notifications") { "Notifications" } %>
+          <%= tabs.tabs_trigger(value: "integrations") { "Integrations" } %>
+        <% end %>
+
+        <!-- Notifications Tab -->
+        <% tabs.with_tabs_content(value: "notifications") do %>
+          <%= render M9sh::CardComponent.new do |card| %>
+            <% card.with_header do |header| %>
+              <% header.with_title { "Email Notifications" } %>
+            <% end %>
+            <% card.with_body do %>
+              <div class="flex items-center justify-between">
+                <div class="space-y-0.5">
+                  <%= render M9sh::LabelComponent.new(for: "comments") { "Comments" } %>
+                  <p class="text-sm text-muted-foreground">Notifications about comments.</p>
+                </div>
+                <%= render M9sh::SwitchComponent.new(id: "comments", checked: true) %>
+              </div>
+            <% end %>
+          <% end %>
+        <% end %>
+
+        <!-- Integrations Tab -->
+        <% tabs.with_tabs_content(value: "integrations") do %>
+          <%= render M9sh::CardComponent.new do |card| %>
+            <% card.with_header do |header| %>
+              <% header.with_title { "Connected Accounts" } %>
+            <% end %>
+            <% card.with_body do %>
+              <div class="flex items-center justify-between">
+                <div class="flex items-center gap-3">
+                  <div class="h-10 w-10 rounded-full bg-muted"></div>
+                  <div>
+                    <p class="font-medium">GitHub</p>
+                    <%= render M9sh::BadgeComponent.new { "Connected" } %>
+                  </div>
+                </div>
+                <%= render M9sh::ButtonComponent.new(variant: :outline, size: :sm) { "Disconnect" } %>
+              </div>
+            <% end %>
+          <% end %>
+        <% end %>
+      <% end %>
+    CODE
+  end
+end