m9sh 0.2.1 → 0.2.2

data/app/components/backdrop_component.rb

@@ -0,0 +1,103 @@
+# frozen_string_literal: true
+
+class BackdropComponent < ViewComponent::Base
+  renders_one :navbar
+  renders_one :left_sidebar
+  renders_one :right_sidebar
+  renders_one :main_content
+
+  def initialize(
+    show_left_sidebar: true,
+    show_right_sidebar: true,
+    left_sidebar_width: "w-[300px]",
+    right_sidebar_width: "w-[300px]",
+    **extra_attrs
+  )
+    @show_left_sidebar = show_left_sidebar
+    @show_right_sidebar = show_right_sidebar
+    @left_sidebar_width = left_sidebar_width
+    @right_sidebar_width = right_sidebar_width
+    @extra_attrs = extra_attrs
+    super()
+  end
+
+  def call
+    tag.div(**component_attrs("h-screen w-screen flex flex-col overflow-hidden"), data: { controller: "backdrop" }) do
+      safe_join([
+        render_navbar_section,
+        render_overlay,
+        render_content_area
+      ].compact)
+    end
+  end
+
+  private
+
+  def component_attrs(default_classes)
+    classes = [default_classes, @extra_attrs[:class]].compact.join(" ")
+    @extra_attrs.merge(class: classes)
+  end
+
+  def render_navbar_section
+    return unless navbar?
+
+    # Render navbar with toggle buttons passed as slots
+    navbar.to_s.html_safe
+  end
+
+  def render_content_area
+    tag.div(class: "flex-1 flex overflow-hidden") do
+      safe_join([
+        render_left_sidebar_section,
+        render_main_content_section,
+        render_right_sidebar_section
+      ].compact)
+    end
+  end
+
+  def render_left_sidebar_section
+    return unless @show_left_sidebar && left_sidebar?
+
+    # Convert width to responsive: w-[300px] -> w-screen md:w-[300px]
+    desktop_width = @left_sidebar_width.start_with?('w-') ? "md:#{@left_sidebar_width}" : "md:w-[300px]"
+
+    tag.div(
+      class: "pt-16 w-screen #{desktop_width} flex-shrink-0 overflow-y-auto fixed md:relative left-0 md:left-auto -translate-x-full md:translate-x-0 top-0 bottom-0 md:bottom-auto z-40 md:z-auto transition-all duration-300 ease-in-out bg-transparent md:bg-background shadow-xl md:shadow-none md:border-r md:border-transparent",
+      data: { backdrop_target: "leftSidebar" }
+    ) do
+      left_sidebar.to_s.html_safe
+    end
+  end
+
+  def render_main_content_section
+    return unless main_content?
+
+    tag.div(class: "pt-16 flex-1 overflow-auto") do
+      main_content.to_s.html_safe
+    end
+  end
+
+  def render_right_sidebar_section
+    return unless @show_right_sidebar && right_sidebar?
+
+    # Convert width to responsive: w-[300px] -> w-screen md:w-[300px]
+    desktop_width = @right_sidebar_width.start_with?('w-') ? "md:#{@right_sidebar_width}" : "md:w-[300px]"
+
+    tag.div(
+      class: "pt-16 w-screen #{desktop_width} flex-shrink-0 overflow-y-auto fixed md:relative right-0 md:right-auto translate-x-full md:translate-x-0 top-0 bottom-0 md:bottom-auto z-40 md:z-auto transition-all duration-300 ease-in-out bg-transparent md:bg-background shadow-xl md:shadow-none md:border-l md:border-transparent",
+      data: { backdrop_target: "rightSidebar" }
+    ) do
+      right_sidebar.to_s.html_safe
+    end
+  end
+
+  def render_overlay
+    tag.div(
+      class: "hidden fixed top-16 left-0 right-0 bottom-0 bg-background/80 backdrop-blur-sm z-30 md:hidden",
+      data: {
+        backdrop_target: "overlay",
+        action: "click->backdrop#closeAll"
+      }
+    )
+  end
+end

data/app/components/docs/code_block_component.rb

@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+require "rouge"
+
+module Docs
+  class CodeBlockComponent < ViewComponent::Base
+    attr_reader :code, :language, :show_copy
+
+    def initialize(code:, language: "ruby", show_copy: true)
+      @code = code.strip
+      @language = language
+      @show_copy = show_copy
+    end
+
+    def call
+      tag.div(class: "relative my-4") do
+        safe_join([
+          copy_button,
+          highlighted_code
+        ])
+      end
+    end
+
+    private
+
+    def copy_button
+      return unless @show_copy
+
+      tag.div(class: "absolute right-2 top-2") do
+        render M9sh::ButtonComponent.new(
+          variant: :ghost,
+          size: :sm,
+          data: {
+            controller: "docs--copy-button",
+            action: "click->docs--copy-button#copy",
+            docs__copy_button_text_value: @code
+          }
+        ) do
+          "Copy"
+        end
+      end
+    end
+
+    def highlighted_code
+      formatter = Rouge::Formatters::HTML.new
+      lexer = Rouge::Lexer.find(@language) || Rouge::Lexers::PlainText.new
+      highlighted = formatter.format(lexer.lex(@code))
+
+      tag.div(class: "overflow-x-auto rounded-lg border border-border bg-muted") do
+        tag.pre(class: "p-4 text-sm") do
+          tag.code(highlighted.html_safe, class: "language-#{@language}")
+        end
+      end
+    end
+  end
+end

data/app/components/docs/component_api_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Docs
+  class ComponentApiComponent < ViewComponent::Base
+    def initialize
+      # No parameters needed for API section wrapper
+    end
+
+    def call
+      tag.div(id: "api-reference", class: "space-y-4") do
+        concat(tag.h2("API Reference", class: "text-2xl font-semibold border-b border-border pb-2"))
+        concat(tag.div(class: "space-y-6") { content })
+      end
+    end
+  end
+end

data/app/components/docs/component_examples_component.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+module Docs
+  class ComponentExamplesComponent < ViewComponent::Base
+    def initialize
+      # No parameters needed for examples section wrapper
+    end
+
+    def call
+      tag.div(id: "examples", class: "space-y-6") do
+        concat(tag.h2("Examples", class: "text-2xl font-semibold border-b border-border pb-2"))
+        concat(tag.div(class: "space-y-6") { content })
+      end
+    end
+  end
+end

data/app/components/docs/component_header_component.html.erb

@@ -0,0 +1,8 @@
+<div class="space-y-4">
+  <h1 class="scroll-m-20 text-4xl font-bold tracking-tight lg:text-5xl">
+    <%= name %>
+  </h1>
+  <p class="text-lg text-muted-foreground">
+    <%= description %>
+  </p>
+</div>

data/app/components/docs/component_header_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Docs
+  class ComponentHeaderComponent < ViewComponent::Base
+    def initialize(name:, description:)
+      @name = name
+      @description = description
+    end
+
+    private
+
+    attr_reader :name, :description
+  end
+end

data/app/components/docs/component_installation_component.html.erb

@@ -0,0 +1,15 @@
+<div id="installation" class="space-y-4">
+  <h2 class="text-2xl font-semibold border-b border-border pb-2">Installation</h2>
+  <div class="space-y-3">
+    <p class="text-sm text-muted-foreground">
+      Install the component using the M9sh CLI (with automatic dependency resolution) or by copying the files manually.
+    </p>
+    <%= render Docs::CodeBlockComponent.new(
+      code: "m9sh add #{component_name}",
+      language: "bash"
+    ) %>
+    <p class="text-sm text-muted-foreground mt-4">
+      Or copy the component files manually from the documentation into your project's <%= render M9sh::BadgeComponent.new(variant: :secondary) do %>app/components/m9sh<% end %> directory.
+    </p>
+  </div>
+</div>

data/app/components/docs/component_installation_component.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Docs
+  class ComponentInstallationComponent < ViewComponent::Base
+    def initialize(component_name:)
+      @component_name = component_name
+    end
+
+    private
+
+    attr_reader :component_name
+  end
+end

data/app/components/docs/component_page_component.html.erb

@@ -0,0 +1,9 @@
+<% content_for :title, "#{title} - m9sh Components" %>
+
+<div class="space-y-8">
+  <%= header if header? %>
+  <%= installation if installation? %>
+  <%= usage if usage? %>
+  <%= examples if examples? %>
+  <%= api if api? %>
+</div>

data/app/components/docs/component_page_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module Docs
+  class ComponentPageComponent < ViewComponent::Base
+    renders_one :header, Docs::ComponentHeaderComponent
+    renders_one :installation, Docs::ComponentInstallationComponent
+    renders_one :usage, Docs::ComponentUsageComponent
+    renders_one :examples, Docs::ComponentExamplesComponent
+    renders_one :api, Docs::ComponentApiComponent
+
+    def initialize(title:)
+      @title = title
+    end
+
+    private
+
+    attr_reader :title
+  end
+end

data/app/components/docs/component_preview_component.rb

@@ -0,0 +1,318 @@
+# frozen_string_literal: true
+
+module Docs
+  class ComponentPreviewComponent < ViewComponent::Base
+    attr_reader :title, :preview_content, :code, :ai_command, :mobile_optimized
+
+    def initialize(title: nil, preview_content: nil, code: nil, ai_command: nil, mobile_optimized: true)
+      @title = title
+      @preview_content = preview_content
+      @code = code
+      @ai_command = ai_command
+      @mobile_optimized = mobile_optimized
+    end
+
+    def call
+      tag.div(
+        class: "my-6",
+        data: {
+          controller: "docs--component-preview",
+          docs__component_preview_default_tab_value: "preview"
+        }
+      ) do
+        safe_join([
+          header_section,
+          preview_container
+        ].compact)
+      end
+    end
+
+    private
+
+    def header_section
+      return unless @title
+
+      tag.div(class: "flex items-center justify-between mb-4") do
+        tag.h3(@title, class: "text-lg font-semibold")
+      end
+    end
+
+    def preview_container
+      tag.div(class: "rounded-lg border border-border bg-card overflow-hidden") do
+        safe_join([
+          tabs_header,
+          tabs_content
+        ])
+      end
+    end
+
+    def tabs_header
+      tag.div(class: "flex items-center justify-between border-b border-border bg-muted") do
+        safe_join([
+          tabs_list,
+          controls_section
+        ])
+      end
+    end
+
+    def tabs_list
+      tag.div(
+        class: "flex items-center gap-1 p-1",
+        data: { docs__component_preview_target: "tabList" }
+      ) do
+        safe_join([
+          tab_trigger("Preview", "preview", true),
+          (@mobile_optimized ? tab_trigger("iOS", "ios") : nil),
+          (@mobile_optimized ? tab_trigger("Android", "android") : nil),
+          (@code ? tab_trigger("Code", "code") : nil),
+          (@ai_command ? tab_trigger("AI Commands", "ai") : nil)
+        ].compact)
+      end
+    end
+
+    def tab_trigger(label, value, active = false)
+      tag.button(
+        label,
+        class: "px-3 py-1.5 text-sm font-medium rounded-md transition-colors hover:bg-accent " \
+               "#{active ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground'}",
+        data: {
+          docs__component_preview_target: "tab",
+          action: "click->docs--component-preview#selectTab",
+          tab_value: value,
+          state: active ? "active" : "inactive"
+        },
+        aria: { selected: active.to_s }
+      )
+    end
+
+    def controls_section
+      tag.div(class: "flex items-center gap-1 p-1") do
+        safe_join([
+          copy_button,
+          theme_toggle_button,
+          fullscreen_button
+        ])
+      end
+    end
+
+    def copy_button
+      return unless @code
+
+      tag.button(
+        class: "p-2 rounded-md hover:bg-accent transition-colors text-muted-foreground hover:text-foreground",
+        data: {
+          action: "click->docs--component-preview#copyCode",
+          docs__component_preview_target: "copyButton"
+        },
+        title: "Copy code"
+      ) do
+        copy_icon
+      end
+    end
+
+    def theme_toggle_button
+      tag.button(
+        class: "p-2 rounded-md hover:bg-accent transition-colors text-muted-foreground hover:text-foreground",
+        data: {
+          action: "click->docs--component-preview#toggleTheme",
+          docs__component_preview_target: "themeButton"
+        },
+        title: "Toggle theme"
+      ) do
+        theme_icon
+      end
+    end
+
+    def fullscreen_button
+      tag.button(
+        class: "p-2 rounded-md hover:bg-accent transition-colors text-muted-foreground hover:text-foreground",
+        data: {
+          action: "click->docs--component-preview#toggleFullscreen",
+          docs__component_preview_target: "fullscreenButton"
+        },
+        title: "Toggle fullscreen"
+      ) do
+        fullscreen_icon
+      end
+    end
+
+    def tabs_content
+      tag.div(
+        class: "relative",
+        data: { docs__component_preview_target: "previewContainer" }
+      ) do
+        safe_join([
+          preview_panel,
+          (@mobile_optimized ? ios_panel : nil),
+          (@mobile_optimized ? android_panel : nil),
+          (@code ? code_panel : nil),
+          (@ai_command ? ai_panel : nil)
+        ].compact)
+      end
+    end
+
+    def preview_panel
+      tab_panel("preview", true) do
+        tag.div(class: "p-8 min-h-[300px] flex items-center justify-center") do
+          preview_content_to_render
+        end
+      end
+    end
+
+    def ios_panel
+      tab_panel("ios") do
+        tag.div(class: "p-8 flex items-center justify-center bg-muted") do
+          tag.div(class: "ios-frame relative bg-background rounded-[3rem] shadow-2xl border-[14px] border-gray-800 overflow-hidden") do
+            safe_join([
+              ios_notch,
+              tag.div(class: "h-[812px] w-[375px] overflow-y-auto p-4 flex items-center justify-center") do
+                preview_content_to_render
+              end
+            ])
+          end
+        end
+      end
+    end
+
+    def android_panel
+      tab_panel("android") do
+        tag.div(class: "p-8 flex items-center justify-center bg-muted") do
+          tag.div(class: "android-frame relative bg-background rounded-[2rem] shadow-2xl border-[12px] border-gray-900 overflow-hidden") do
+            safe_join([
+              tag.div(class: "h-[800px] w-[360px] overflow-y-auto p-4 flex items-center justify-center") do
+                preview_content_to_render
+              end,
+              android_nav_bar
+            ])
+          end
+        end
+      end
+    end
+
+    def preview_content_to_render
+      # Use block content if provided, otherwise use the preview_content parameter
+      content.present? ? content : @preview_content
+    end
+
+    def code_panel
+      tab_panel("code") do
+        tag.div(class: "p-4") do
+          render Docs::CodeBlockComponent.new(
+            code: @code,
+            language: "erb",
+            show_copy: false
+          )
+        end
+      end
+    end
+
+    def ai_panel
+      tab_panel("ai") do
+        tag.div(class: "p-6 space-y-4") do
+          safe_join([
+            tag.p("Use this component with the following command:", class: "text-sm text-muted-foreground mb-4"),
+            render(Docs::CodeBlockComponent.new(
+              code: @ai_command,
+              language: "erb",
+              show_copy: true
+            ))
+          ])
+        end
+      end
+    end
+
+    def tab_panel(value, active = false)
+      tag.div(
+        class: "#{active ? '' : 'hidden'}",
+        data: {
+          docs__component_preview_target: "panel",
+          panel_value: value
+        },
+        aria: { hidden: (!active).to_s }
+      ) do
+        yield
+      end
+    end
+
+    # SVG Icons
+    def copy_icon
+      tag.svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do
+        safe_join([
+          tag.rect(x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2"),
+          tag.path(d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1")
+        ])
+      end
+    end
+
+    def theme_icon
+      tag.svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do
+        safe_join([
+          tag.circle(cx: "12", cy: "12", r: "5"),
+          tag.line(x1: "12", y1: "1", x2: "12", y2: "3"),
+          tag.line(x1: "12", y1: "21", x2: "12", y2: "23"),
+          tag.line(x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64"),
+          tag.line(x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78"),
+          tag.line(x1: "1", y1: "12", x2: "3", y2: "12"),
+          tag.line(x1: "21", y1: "12", x2: "23", y2: "12"),
+          tag.line(x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36"),
+          tag.line(x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22")
+        ])
+      end
+    end
+
+    def fullscreen_icon
+      tag.svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do
+        safe_join([
+          tag.path(d: "M8 3H5a2 2 0 0 0-2 2v3"),
+          tag.path(d: "M21 8V5a2 2 0 0 0-2-2h-3"),
+          tag.path(d: "M3 16v3a2 2 0 0 0 2 2h3"),
+          tag.path(d: "M16 21h3a2 2 0 0 0 2-2v-3")
+        ])
+      end
+    end
+
+    def ios_notch
+      tag.div(class: "absolute top-0 left-1/2 -translate-x-1/2 w-[200px] h-[30px] bg-gray-800 rounded-b-3xl z-10")
+    end
+
+    def android_nav_bar
+      tag.div(class: "absolute bottom-0 left-0 right-0 h-[40px] bg-gray-900 flex items-center justify-center gap-8") do
+        safe_join([
+          tag.div(class: "w-2 h-2 rounded-full bg-gray-500"),
+          tag.div(class: "w-2 h-2 rounded-full bg-gray-500"),
+          tag.div(class: "w-2 h-2 rounded-full bg-gray-500")
+        ])
+      end
+    end
+  end
+end

data/app/components/docs/component_usage_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Docs
+  class ComponentUsageComponent < ViewComponent::Base
+    renders_many :code_examples
+
+    def initialize
+      # No parameters needed for usage section wrapper
+    end
+
+    def call
+      tag.div(id: "usage", class: "space-y-4") do
+        concat(tag.h2("Usage", class: "text-2xl font-semibold border-b border-border pb-2"))
+        concat(tag.div(class: "space-y-4") { content })
+      end
+    end
+  end
+end

data/app/components/docs/prop_table_component.rb

@@ -0,0 +1,64 @@
+# frozen_string_literal: true
+
+module Docs
+  class PropTableComponent < ViewComponent::Base
+    attr_reader :props
+
+    def initialize(props:)
+      @props = props
+    end
+
+    def call
+      tag.div(class: "my-6 overflow-x-auto") do
+        tag.table(class: "w-full border-collapse") do
+          safe_join([
+            table_header,
+            table_body
+          ])
+        end
+      end
+    end
+
+    private
+
+    def table_header
+      tag.thead(class: "border-b border-border") do
+        tag.tr do
+          safe_join([
+            tag.th("Prop", class: "px-4 py-2 text-left text-sm font-semibold"),
+            tag.th("Type", class: "px-4 py-2 text-left text-sm font-semibold"),
+            tag.th("Default", class: "px-4 py-2 text-left text-sm font-semibold"),
+            tag.th("Description", class: "px-4 py-2 text-left text-sm font-semibold")
+          ])
+        end
+      end
+    end
+
+    def table_body
+      tag.tbody do
+        safe_join(
+          @props.map do |prop|
+            tag.tr(class: "border-b border-border hover:bg-muted") do
+              safe_join([
+                tag.td(class: "px-4 py-3") do
+                  render(M9sh::BadgeComponent.new(variant: :secondary)) { prop[:name] }
+                end,
+                tag.td(class: "px-4 py-3") do
+                  render(M9sh::BadgeComponent.new(variant: :outline)) { prop[:type] }
+                end,
+                tag.td(class: "px-4 py-3") do
+                  if prop[:default]
+                    render(M9sh::BadgeComponent.new(variant: :secondary)) { prop[:default] }
+                  else
+                    tag.span("-", class: "text-muted-foreground")
+                  end
+                end,
+                tag.td(prop[:description], class: "px-4 py-3 text-sm text-muted-foreground")
+              ])
+            end
+          end
+        )
+      end
+    end
+  end
+end

data/app/controllers/application_controller.rb

@@ -0,0 +1,3 @@
+class ApplicationController < ActionController::Base
+  protect_from_forgery with: :exception
+end