rails_devtools 0.1.1

data/app/views/rails_devtools/components/lucide/pocket_knife.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  module Components
+    class Lucide::PocketKnife < Lucide::Base
+      def view_template
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: width,
+          height: height,
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "lucide lucide-pocket-knife"
+        ) do |s|
+          s.path(d: "M3 2v1c0 1 2 1 2 2S3 6 3 7s2 1 2 2-2 1-2 2 2 1 2 2")
+          s.path(d: "M18 6h.01")
+          s.path(d: "M6 18h.01")
+          s.path(d: "M20.83 8.83a4 4 0 0 0-5.66-5.66l-12 12a4 4 0 1 0 5.66 5.66Z")
+          s.path(d: "M18 11.66V22a4 4 0 0 0 4-4V6")
+        end
+      end
+    end
+  end
+end

data/app/views/rails_devtools/components/lucide/sign_post.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  module Components
+    class Lucide::SignPost < Lucide::Base
+      def view_template
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: width,
+          height: height,
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "lucide lucide-signpost"
+        ) do |s|
+          s.path(d: "M12 13v8")
+          s.path(d: "M12 3v3")
+          s.path(
+            d:
+              "M18 6a2 2 0 0 1 1.387.56l2.307 2.22a1 1 0 0 1 0 1.44l-2.307 2.22A2 2 0 0 1 18 13H6a2 2 0 0 1-1.387-.56l-2.306-2.22a1 1 0 0 1 0-1.44l2.306-2.22A2 2 0 0 1 6 6z"
+          )
+        end
+      end
+    end
+  end
+end

data/app/views/rails_devtools/components/lucide/trash.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  module Components
+    class Lucide::Trash < Lucide::Base
+      def view_template
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: width,
+          height: height,
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "lucide lucide-trash"
+        ) do |s|
+          s.path(d: "M3 6h18")
+          s.path(d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6")
+          s.path(d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2")
+        end
+      end
+    end
+  end
+end

data/app/views/rails_devtools/components/lucide/triangle_alert.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  module Components
+    class Lucide::TriangleAlert < Lucide::Base
+      def view_template
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          width: width,
+          height: height,
+          viewbox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          stroke_width: "2",
+          stroke_linecap: "round",
+          stroke_linejoin: "round",
+          class: "lucide lucide-triangle-alert"
+        ) do |s|
+          s.path(
+            d:
+              "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
+          )
+          s.path(d: "M12 9v4")
+          s.path(d: "M12 17h.01")
+        end
+      end
+    end
+  end
+end

data/app/views/rails_devtools/components/page_content.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  module Components
+    class PageContent < Components::ApplicationComponent
+      def view_template(&)
+        turbo_frame_tag("page_content", &)
+      end
+
+      def page_title(&)
+        h1(class: "text-2xl font-bold", &)
+      end
+
+      def search_form(form:, path:, method: :get)
+        render Components::Ui::SearchForm.new(
+          form: form,
+          path: path,
+          method: method
+        )
+      end
+
+      def results(&)
+        div(class: "mt-4", &)
+      end
+    end
+  end
+end

data/app/views/rails_devtools/components/ui/drawer.rb

@@ -0,0 +1,49 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  module Components
+    class Ui::Drawer < Components::ApplicationComponent
+      def initialize(id:, direction: "left", classes: "")
+        @id = id
+        @direction = direction
+        @classes = classes
+      end
+
+      def view_template(&block)
+        div(class: drawer_classes, data_controller: "checkbox") do
+          input(id: @id, type: "checkbox", class: "drawer-toggle", data_checkbox_target: "checkbox")
+          block.call
+        end
+      end
+
+      def content(&)
+        div(class: "drawer-content flex flex-col", &)
+      end
+
+      def drawer_side(&block)
+        div(class: "drawer-side") do
+          label(
+            for: @id,
+            aria_label: "close sidebar",
+            class: "drawer-overlay"
+          )
+          block.call
+        end
+      end
+
+      private
+
+      def drawer_classes
+        [
+          "drawer",
+          direction_class,
+          @classes
+        ].join(" ")
+      end
+
+      def direction_class
+        @direction == "left" ? "" : "drawer-end"
+      end
+    end
+  end
+end

data/app/views/rails_devtools/components/ui/menu.rb

@@ -0,0 +1,81 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  class Components::Ui::Menu < Components::ApplicationComponent
+    include Phlex::Rails::Helpers::CurrentPage
+
+    def view_template
+      large_screen_menu
+      small_screen_menu
+    end
+
+    private
+
+    def large_screen_menu
+      div(class: "hidden lg:block h-full") do
+        menu_items(classes: "w-60 p-4") do
+          div(class: "border-b-2 border-base-300 pl-4 pb-4 mb-2") do
+            menu_title
+          end
+        end
+      end
+    end
+
+    def small_screen_menu
+      div(
+        data_controller: "reveal",
+        data_reveal_hidden_class: "hidden",
+        class: "lg:hidden w-full p-3 bg-base-200"
+      ) do
+        div(class: "flex flex-col") do
+          div(class: "flex justify-between") do
+            menu_title
+            button(data_action: " click->reveal#toggle", type: "button") do
+              render Components::Lucide::Menu
+            end
+          end
+        end
+        div(
+          data_reveal_target: "item",
+          class: "hidden mt-2 pl-3 border-t-2 border-base-300 "
+        ) do
+          menu_items(classes: "")
+        end
+      end
+    end
+
+    def menu_title
+      div(class: "flex gap-3") do
+        render Components::Lucide::PocketKnife
+        h2(class: "font-bold text-xl") { "Devtools" }
+      end
+    end
+
+    MenuItem = Data.define(:icon, :name, :path)
+
+    def menu_items(classes:, &block)
+      ul(class: [classes, "menu bg-base-200 text-base-content h-full"]) do
+        block.call if block_given?
+
+        items.each do |menu_item|
+          item = MenuItem.new(**menu_item)
+          li do
+            a(href: item.path, class: current_page?(item.path) && "active") do
+              span(class: "mr-1") { render item.icon.new(width: 16, height: 16) }
+              span { item.name }
+            end
+          end
+        end
+      end
+    end
+
+    def items
+      [
+        { icon: Lucide::Database, name: "Database tables", path: helpers.database_tables_path },
+        { icon: Lucide::Package, name: "Gems", path: helpers.gems_path },
+        { icon: Lucide::SignPost, name: "Routes", path: helpers.routes_path },
+        { icon: Lucide::Images, name: "Image assets", path: helpers.image_assets_path }
+      ]
+    end
+  end
+end

data/app/views/rails_devtools/components/ui/search_form.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  module Components
+    class Ui::SearchForm < Components::ApplicationComponent
+      include Phlex::Rails::Helpers::FormWith
+      include Phlex::Rails::Helpers::Request
+
+      def initialize(form:, path:, method:)
+        @form = form
+        @path = path
+        @method = method
+      end
+
+      def view_template
+        div(class: "flex gap-2 mt-4") do
+          form_with(
+            model: @form,
+            url: @path,
+            method: @method,
+            data: { turbo_action: :advance },
+            class: "w-full max-w-sm"
+          ) do |form|
+            label(class: "input input-bordered flex items-center gap-2 w-full grow") do
+              form.text_field(:search,
+                              { class: " w-full ", placeholder: "Type search then enter", value: search_params })
+              search_icon
+            end
+          end
+
+          reset_button if search_params.present?
+        end
+      end
+
+      private
+
+      def reset_button
+        link_to(@path, class: "btn text-neutral", data: { turbo_action: :advance }) do
+          render Components::Lucide::Close.new(width: 16, height: 16)
+          plain "Reset"
+        end
+      end
+
+      def search_params
+        request.params.dig(@form.model_name.param_key.to_sym, :search)
+      end
+
+      def search_icon
+        svg(
+          xmlns: "http://www.w3.org/2000/svg",
+          viewbox: "0 0 16 16",
+          fill: "currentColor",
+          class: "h-4 w-4 opacity-70"
+        ) do |s|
+          s.path(
+            fill_rule: "evenodd",
+            d:
+              "M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z",
+            clip_rule: "evenodd"
+          )
+        end
+      end
+    end
+  end
+end

data/app/views/rails_devtools/components.rb

@@ -0,0 +1,5 @@
+module RailsDevtools
+  module Components
+    extend Phlex::Kit
+  end
+end

data/app/views/rails_devtools/database_tables/index.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  class DatabaseTables::Index < ApplicationView
+    def initialize(form: nil, tables: [])
+      @tables = tables
+      @form = form
+    end
+
+    def view_template
+      render Components::PageContent.new do |page|
+        page.page_title { "Database tables" }
+        page.search_form(form: @form, path: helpers.database_tables_path)
+        page.results { results }
+      end
+    end
+
+    private
+
+    def results
+      if @tables.empty?
+        div(class: "text-neutral") { "No results found" }
+      else
+        div(class: "grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 3xl:grid-cols-4 gap-2 w-full items-start") do
+          @tables.each do |table|
+            render DatabaseTables::TableCard.new(table: table)
+          end
+        end
+      end
+    end
+  end
+end

data/app/views/rails_devtools/database_tables/table_card.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  class DatabaseTables::TableCard < Components::ApplicationComponent
+    def initialize(table:)
+      @table = table
+    end
+
+    def view_template
+      div(class: "card bg-white text-sm w-full shadow-sm") do
+        div(class: "card-body") do
+          h2(class: "card-title") { @table.table_name.capitalize }
+          columns_list
+          indexes_list
+        end
+      end
+    end
+
+    private
+
+    def columns_list
+      div(class: "flex flex-col gap-2 divide-y divide-base-200") do
+        @table.columns.each do |column|
+          div(class: "flex gap-x-2 text-neutral pt-2 justify-between items-center") do
+            div(class: "flex gap-x-2") do
+              div(class: "font-bold") { column.name }
+              div(class: "text-neutral italic") { column.type }
+            end
+            span(class: "text-xs opacity-75") { column.default } if column.default
+            div(class: "text-xs opacity-75") { "not null" } unless column.null
+          end
+        end
+      end
+    end
+
+    def indexes_list
+      div(class: "mt-8") do
+        h3(class: "text-lg font-bold") { "#{@table.table_name.capitalize} indexes" }
+        div(class: "mt-2 flex flex-col gap-2 divide-y divide-base-200") do
+          @table.indexes.each do |index|
+            div(class: "flex gap-x-2 text-neutral pt-2 justify-between items-center") do
+              div do
+                div(class: "font-bold") { index.name }
+                div(class: "text-xs opacity-75") do
+                  [index.unique ? "unique" : nil, index_columns_text(index.columns)].compact.join(" ")
+                end
+              end
+            end
+          end
+        end
+      end
+    end
+
+    def index_columns_text(columns)
+      columns_list = columns.join(", ")
+      return columns_list if columns.size == 1
+
+      "composite of #{columns_list}"
+    end
+  end
+end

data/app/views/rails_devtools/gems/gem_card.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  class Gems::GemCard < Components::ApplicationComponent
+    include Phlex::Rails::Helpers::DistanceOfTimeInWords
+
+    def initialize(gem:)
+      @gem = gem
+    end
+
+    def view_template
+      div(class: "card card-compact bg-white text-sm w-full shadow-sm") do
+        div(class: "card-body") do
+          div(class: "card-actions") do
+            @gem.groups.each do |group|
+              div(class: "badge badge-sm") { group }
+            end
+          end
+          h2(class: "inline-flex card-title justify-between items-center") do
+            div(class: "flex items-center gap-2") do
+              span do
+                [@gem.name.titleize.capitalize, @gem.actual_version].join(" ")
+              end
+              span(class: "badge badge-sm badge-warning font-normal") { "outdated" } if @gem.outdated?
+            end
+            span(class: "text-sm text-neutral opacity-75 font-normal") do
+              @gem.date.strftime("%b %d, %Y")
+            end
+          end
+
+          div(class: "text-neutral opacity-75") do
+            outdated_info
+            div { @gem.summary }
+          end
+          div(class: "card-actions mt-4 justify-end") do
+            if @gem.source_code
+              a(href: @gem.source_code, class: "btn btn-xs btn-outline btn-secondary") do
+                "Source Code"
+              end
+            end
+            if @gem.documentation
+              a(href: @gem.documentation, class: "btn btn-xs btn-outline btn-secondary") do
+                "Documentation"
+              end
+            end
+            a(href: @gem.homepage, class: "btn btn-xs") { "Homepage" } if @gem.homepage
+          end
+        end
+      end
+    end
+
+    private
+
+    def outdated_info
+      return unless @gem.outdated?
+
+      div(class: "alert mb-4 flex justify-between") do
+        div do
+          h4(class: "font-bold text-left") { "Version #{@gem.latest_version.version} available" }
+          p(class: "text-left") do
+            "Your version came out #{months_since_last_update} months before the current release"
+          end
+        end
+        div do
+          a(href: @gem.changelog, class: "btn btn-sm btn-secondary") { "Changelog" } if @gem.changelog
+        end
+      end
+    end
+
+    def months_since_last_update
+      (@gem.latest_version.date - @gem.date).seconds.in_months.to_i
+    end
+  end
+end

data/app/views/rails_devtools/gems/index.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  class Gems::Index < ApplicationView
+    def initialize(form: nil, gems: [])
+      @gems = gems
+      @form = form
+    end
+
+    def view_template
+      render Components::PageContent.new do |page|
+        page.page_title { "Gems" }
+        page.search_form(form: @form, path: helpers.gems_path)
+        page.results { results }
+      end
+    end
+
+    private
+
+    def results
+      if @gems.empty?
+        div(class: "text-neutral") { "No results found" }
+      else
+        div(class: "w-full flex flex-col gap-y-2") do
+          @gems.each do |gem|
+            render Gems::GemCard.new(gem: gem)
+          end
+        end
+      end
+    end
+  end
+end

data/app/views/rails_devtools/image_assets/image_card.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  class ImageAssets::ImageCard < Components::ApplicationComponent
+    def initialize(image_info:)
+      @image_info = image_info
+    end
+
+    def view_template
+      turbo_frame_tag(@image_info.full_path) do
+        a(
+          href: helpers.image_asset_path(
+            @image_info.name,
+            full_name: @image_info.basename,
+            image_path: @image_info.full_path
+          ),
+          data: { turbo_frame: 'drawer_content', action: 'click->checkbox#toggle' },
+          class: 'group'
+        ) do
+          div(class: 'card card-compact bg-white shadow-sm group-hover:bg-primary w-[150px]') do
+            figure do
+              img(
+                src: helpers.host_app_image_path(@image_info.devtools_image_path),
+                class: 'card-image',
+                width: '150'
+              )
+            end
+
+            div(class: 'card-body group-hover:text-primary-content') do
+              p(class: 'text-xs truncate') { @image_info.basename }
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/views/rails_devtools/image_assets/image_details.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module RailsDevtools
+  class ImageAssets::ImageDetails < Components::ApplicationComponent
+    def initialize(image_info:)
+      @image_info = image_info
+    end
+
+    def view_template
+      turbo_frame_tag("drawer_content", class: "flex flex-col") do
+        figure do
+          img(
+            src: helpers.host_app_image_path(@image_info.devtools_image_path),
+            width: "400"
+          )
+        end
+
+        div(class: "mt-4") do
+          h3(class: "text-lg font-bold") { @image_info.basename }
+          div(class: "mt-4 pt-4 border-t-2 border-base-300 grid grid-cols-3 gap-x-4 gap-y-2 mt-2 text-sm text-neutral") do
+            # Image size
+            div(class: "text-right font-bold ") { "Image size" }
+            div(class: "col-span-2") { "#{@image_info.width} x #{@image_info.height}" }
+
+            # File size
+            div(class: "text-right font-bold text-neutral") { "File size" }
+            div(class: "col-span-2") { bytes_to_kb(@image_info.file_size) }
+          end
+        end
+
+        image_tag_input
+
+        div(class: "mt-8 pt-8 border-t-2 border-base-300 flex gap-x-2 justify-end") do
+          delete_button
+        end
+      end
+    end
+
+    def image_tag_input
+      div(class: "mt-8 w-full") do
+        div(
+          class: "join w-full",
+          data_controller: "clipboard",
+          data_clipboard_success_content_value: "Copied!"
+        ) do
+          input(
+            value: @image_info.image_helper_snippet,
+            class: "input input-bordered input-primary input-sm w-full join-item",
+            data_clipboard_target: "source"
+          )
+          button(
+            class: "btn btn-primary btn-outline btn-sm join-item",
+            data_action: "clipboard#copy",
+            data_clipboard_target: "button"
+          ) { "Copy" }
+        end
+      end
+    end
+
+    def delete_button
+      button_to(
+        helpers.image_asset_path(@image_info.name, image_path: @image_info.full_path),
+        class: "btn btn-outline btn-error btn-sm",
+        method: :delete,
+        form: { data: {
+          turbo_confirm: "Are you sure you want to delete this image?",
+          action: "turbo:submit-end->checkbox#toggle"
+        } }
+      ) do
+        span { render Components::Lucide::Trash.new(width: 16, height: 16) }
+        plain "delete"
+      end
+    end
+
+    private
+
+    def bytes_to_kb(bytes)
+      kb = bytes.to_f / 1024
+      "#{kb.round(2)} KB"
+    end
+  end
+end