Merge pull request #119 from rbui-labs/refactor-component-view-gen

Refactor component view gen

Gemfile

@@ -75,7 +75,7 @@ end
 
 gem "phlex-rails"
 
-gem "rbui", github: "rbui-labs/rbui"
+gem "rbui", github: "rbui-labs/rbui", branch: "main"
 # gem "rbui", path: "../rbui"
 
 gem "pry"

Gemfile.lock

@@ -1,8 +1,9 @@
 GIT
   remote: https://github.com/rbui-labs/rbui.git
-  revision: 19a1b5df2db0e000a21b9b2c5a573179c07506be
+  revision: abb3ec1e5971413d4930ce4a56f688b7acb66a5e
+  branch: main
   specs:
-    rbui (0.2.0)
+    rbui (1.0.0.pre.alpha.3)
       phlex (~> 1.10)
       rouge (~> 4.2.0)
       tailwind_merge (>= 0.12)

app/components/rbui/index.js

@@ -0,0 +1,8 @@
+import { application } from "../../../app/javascript/controllers/application";
+
+// Import all controller files
+
+// Register all controllers
+
+import RBUI from "rbui-js";
+RBUI.initialize(application);

app/javascript/application.js

@@ -1,4 +1,5 @@
 // Entry point for the build script in your package.json
 import "@hotwired/turbo-rails";
-import "rbui-js";
 import "./controllers";
+
+import "../components/rbui";

app/views/application_view.rb

@@ -1,5 +1,18 @@
 # frozen_string_literal: true
 
+class MethodCallFinder < Prism::Visitor
+  attr_reader :calls
+
+  def initialize(calls)
+    @calls = calls
+  end
+
+  def visit_call_node(node)
+    super
+    calls << node.name
+  end
+end
+
 class ApplicationView < ApplicationComponent
   include RBUI
   # The ApplicationView is an abstract class for all your views.
@@ -8,24 +21,35 @@ class ApplicationView < ApplicationComponent
   # can change that to `Phlex::HTML` if you want to keep views and
   # components independent.
 
-  def components(component, code_example = nil, use_component_files = false)
+  GITHUB_REPO_URL = "https://github.com/rbui-labs/rbui/"
+  GITHUB_FILE_URL = "#{GITHUB_REPO_URL}blob/main/"
+
+  def component_references(component, code_example = nil, use_component_files = false)
     return [] unless code_example
 
-    component_names = code_example.scan(/(?<=^|\s)Combobox\w*/).uniq
+    calls = []
+    Prism.parse(code_example).value.accept(MethodCallFinder.new(calls))
+    calls_set = Set.new(calls.map(&:to_s))
+    descendants = Phlex::HTML.descendants.map { |d| d.to_s.gsub(/^RBUI::/, "") }
+    component_names = descendants.select { |d| calls_set.include?(d) }
+
+    # component_names = code_example.scan(/(?<=^|\s)#{component}\w*/).uniq
 
     component_names.map do |name|
       Docs::ComponentStruct.new(
         name: name,
-        source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/#{component.downcase}/#{name.underscore}.rb",
+        source: "lib/rbui/#{camel_to_snake(component)}/#{camel_to_snake(name)}.rb",
         built_using: :phlex
       )
-    end.push(
-      Docs::ComponentStruct.new(
-        name: "ComboboxController",
-        source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/command_controller.js",
-        built_using: :stimulus
-      )
-    )
+    end
+
+    # component_names.push(
+    #   Docs::ComponentStruct.new(
+    #     name: "ComboboxController",
+    #     source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/command_controller.js",
+    #     built_using: :stimulus
+    #   )
+    # )
   end
 
   require "rubygems"
@@ -36,7 +60,7 @@ def component_files(component, gem_name = "rbui")
     return [] unless gem_spec
 
     # Construct the path to the component files within the gem
-    component_dir = File.join(gem_spec.gem_dir, "lib", "rbui", component.to_s.downcase)
+    component_dir = File.join(gem_spec.gem_dir, "lib", "rbui", camel_to_snake(component))
 
     return [] unless Dir.exist?(component_dir)
 
@@ -50,7 +74,8 @@ def component_files(component, gem_name = "rbui")
       basename = File.basename(file, ext)
 
       name = basename.camelize
-      source = "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/#{component.to_s.downcase}/#{File.basename(file)}"
+      # source = "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/#{component.to_s.downcase}/#{File.basename(file)}"
+      source = "lib/rbui/#{camel_to_snake(component)}/#{File.basename(file)}"
       built_using = if ext == ".rb"
         :phlex
       else # ".js"
@@ -64,4 +89,16 @@ def component_files(component, gem_name = "rbui")
       )
     end
   end
+
+  def camel_to_snake(string)
+    string.gsub("::", "/")
+      .gsub(/([A-Z]+)([A-Z][a-z])/, '\1_\2')
+      .gsub(/([a-z\d])([A-Z])/, '\1_\2')
+      .tr("-", "_")
+      .downcase
+  end
+
+  def snake_to_camel(string)
+    string.split("_").map(&:capitalize).join
+  end
 end

app/views/components/docs/components_table.rb

@@ -11,8 +11,8 @@ def view_template
 
     Tabs(default_value: "account", class: "") do
       TabsList do
-        TabsTrigger(value: "components") { "Components shown above" }
-        TabsTrigger(value: "file-components") { "File Components" } if @file_components
+        TabsTrigger(value: "components") { "Components Referenced" }
+        TabsTrigger(value: "file-components") { "Component files" }
       end
       TabsContent(value: "components") do
         div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
@@ -25,7 +25,11 @@ def view_template
         TabsContent(value: "file-components") do
           div(class: "rounded-lg border p-6 space-y-4 bg-background text-foreground") do
             div do
-              component_table_view(@file_components)
+              if @file_components.present?
+                component_table_view(@file_components)
+              else
+                TypographyP { "No components for this page" }
+              end
             end
           end
         end
@@ -65,7 +69,7 @@ def component_table_view(components)
               end
               TableCell do
                 div(class: "flex justify-end") do
-                  Link(href: component.source, variant: :outline, size: :sm) do
+                  Link(href: component.source, variant: :outline, size: :sm, target: "_blank") do
                     github_icon
                     span(class: "ml-2") { "See source" }
                   end

app/views/components/docs/visual_code_example.rb

@@ -1,6 +1,16 @@
 # frozen_string_literal: true
 
 class Docs::VisualCodeExample < ApplicationComponent
+  @@collected_code = []
+
+  def self.collected_code
+    @@collected_code.join("\n")
+  end
+
+  def self.reset_collected_code
+    @@collected_code = []
+  end
+
   def initialize(title: nil, description: nil, context: nil)
     @title = title
     @description = description
@@ -10,6 +20,7 @@ def initialize(title: nil, description: nil, context: nil)
   # standard:disable Style/ArgumentsForwarding
   def view_template(&block)
     @display_code = CGI.unescapeHTML(capture(&block))
+    @@collected_code << @display_code
 
     div(id: @title) do
       div(class: "relative") do

app/views/docs/accordion_view.rb

@@ -3,13 +3,14 @@
 class Docs::AccordionView < ApplicationView
   def view_template
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
-      render Docs::Header.new(title: "Accordion",
+      component = "Accordion"
+      render Docs::Header.new(title: component,
         description: "A vertically stacked set of interactive headings that each reveal a section of content.")
 
       TypographyH2 { "Usage" }
 
       render Docs::VisualCodeExample.new(title: "Example", context: self) do
-        <<~RUBY
+        @@code = <<~RUBY
           div(class: "w-full") do
               Accordion do
                 AccordionItem do
@@ -44,26 +45,7 @@ def view_template
         RUBY
       end
 
-      render Docs::ComponentsTable.new(components)
+      render Docs::ComponentsTable.new(component_references(component, @@code), component_files(component))
     end
   end
-
-  private
-
-  def components
-    [
-      Docs::ComponentStruct.new(name: "AccordionController",
-        source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "Accordion",
-        source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AccordionItem",
-        source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion_item.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AccordionTrigger",
-        source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion_trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AccordionContent",
-        source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion_content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AccordionIcon",
-        source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion_icon.rb", built_using: :phlex)
-    ]
-  end
 end

app/views/docs/alert_dialog_view.rb

@@ -2,6 +2,7 @@
 
 class Docs::AlertDialogView < ApplicationView
   def view_template
+    component = "AlertDialog"
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Alert Dialog", description: "A modal dialog that interrupts the user with important content and expects a response.")
 
@@ -26,24 +27,7 @@ def view_template
         RUBY
       end
 
-      render Docs::ComponentsTable.new(components)
+      render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component))
     end
   end
-
-  private
-
-  def components
-    [
-      Docs::ComponentStruct.new(name: "AlertDialogController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/alert_dialog_controller.js", built_using: :stimulus),
-      Docs::ComponentStruct.new(name: "AlertDialog", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AlertDialogTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/trigger.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AlertDialogContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/content.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AlertDialogHeader", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/header.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AlertDialogTitle", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/title.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AlertDialogDescription", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/description.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AlertDialogFooter", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/footer.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AlertDialogCancel", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/cancel.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AlertDialogAction", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert_dialog/action.rb", built_using: :phlex)
-    ]
-  end
 end

app/views/docs/alert_view.rb

@@ -2,6 +2,7 @@
 
 class Docs::AlertView < ApplicationView
   def view_template
+    component = "Alert"
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Alert", description: "Displays a callout for user attention.")
 
@@ -56,20 +57,12 @@ def view_template
         RUBY
       end
 
-      render Docs::ComponentsTable.new(components)
+      render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component))
     end
   end
 
   private
 
-  def components
-    [
-      Docs::ComponentStruct.new(name: "Alert", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AlertTitle", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert/title.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AlertDescription", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/alert/description.rb", built_using: :phlex)
-    ]
-  end
-
   def rocket_icon
     svg(
       xmlns: "http://www.w3.org/2000/svg",

app/views/docs/aspect_ratio_view.rb

@@ -2,6 +2,7 @@
 
 class Docs::AspectRatioView < ApplicationView
   def view_template
+    component = "AspectRatio"
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Aspect Ratio", description: "Displays content within a desired ratio.")
 
@@ -59,15 +60,7 @@ def view_template
         RUBY
       end
 
-      render Docs::ComponentsTable.new(components)
+      render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component))
     end
   end
-
-  private
-
-  def components
-    [
-      Docs::ComponentStruct.new(name: "AspectRatio", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/aspect_ratio.rb", built_using: :phlex)
-    ]
-  end
 end

app/views/docs/avatar_view.rb

@@ -2,6 +2,7 @@
 
 class Docs::AvatarView < ApplicationView
   def view_template
+    component = "Avatar"
     div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
       render Docs::Header.new(title: "Avatar", description: "An image element with a fallback for representing the user.")
 
@@ -57,7 +58,7 @@ def view_template
       end
 
       render Docs::VisualCodeExample.new(title: "Sizes (only fallback)", context: self) do
-        <<~RUBY
+        @@code = <<~RUBY
           div(class: 'flex items-center space-x-2') do
             # size: :xs
             Avatar(size: :xs) do
@@ -83,17 +84,7 @@ def view_template
         RUBY
       end
 
-      render Docs::ComponentsTable.new(components)
+      render Docs::ComponentsTable.new(component_references(component, Docs::VisualCodeExample.collected_code), component_files(component))
     end
   end
-
-  private
-
-  def components
-    [
-      Docs::ComponentStruct.new(name: "Avatar", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/avatar.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AvatarImage", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/avatar/image.rb", built_using: :phlex),
-      Docs::ComponentStruct.new(name: "AvatarFallback", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/avatar/fallback.rb", built_using: :phlex)
-    ]
-  end
 end

app/views/docs/badge_view.rb

@@ -70,15 +70,7 @@ def view_template
       end
 
       # components
-      render Docs::ComponentsTable.new(components)
+      render Docs::ComponentsTable.new(component_references("Badge", Docs::VisualCodeExample.collected_code), component_files("Badge"))
     end
   end
-
-  private
-
-  def components
-    [
-      Docs::ComponentStruct.new(name: "Badge", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/badge.rb", built_using: :phlex)
-    ]
-  end
 end

app/views/docs/button_view.rb

@@ -121,15 +121,7 @@ def view_template
         RUBY
       end
 
-      render Docs::ComponentsTable.new(components)
+      render Docs::ComponentsTable.new(component_references("Button", Docs::VisualCodeExample.collected_code), component_files("Button"))
     end
   end
-
-  private
-
-  def components
-    [
-      Docs::ComponentStruct.new(name: "Button", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/button.rb", built_using: :phlex)
-    ]
-  end
 end