oversee 0.2.0 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: af99387ad6126bddd510d80a2fd929a776c48ef101e61a3ecfd93c1f8106fa87
-  data.tar.gz: 1d8f34bc6c2fd6225b00edf30b833b4ba6bf52ced03c4c5b16be9a33162ad1a7
+  metadata.gz: 82a5bb3d0823ed6874fe8b7bb09934ed3b72b7b9a2964da6c6d8cdd7b82ac28a
+  data.tar.gz: 5ddf616584c7319a2ef611227fb4f5e0cf876c1dc20b1228c47330411715054c
 SHA512:
-  metadata.gz: 577e608656e45f6797397728ec9820cd39854eccffa550d7d60b3735581f8480817a3d4ce235c49bcceab3b9394b06356637ec17c3c2808f2549158ad7a32ea1
-  data.tar.gz: 4ef646cc6bef74b8ffccfbd97c796bc147d6f9a144ff5f4068630235e1967ff6fe6f9b4e08bfcdb899c49bdbe106e8a37cbde59603377edf2fd7c8866c115cbc
+  metadata.gz: 16cf0583966c0f07deae2be76299544a4fb5678efc5345a292acc0ad628d263a979b44e2d60f8749cc87bbfd5471eb85cfe5619fdc58af5bedb8b9e5a0efe755
+  data.tar.gz: f0d8ae31255ca03aecb010393356d55a9ac63b99699b50b8c9b6bae8d6c11c8f1d3b876dcd6fe9c9118e19c6015989f45f3e7ed74eadb259e885007eb215e764

data/README.md

@@ -1,10 +1,14 @@
-
 # Oversee
 
-Plug & play admin dashboard for Rails applications.
+Plug & play content management system (CMS) for Rails applications. Some may call it an admin dashboard too.
 
+<a href="https://rubygems.org/gems/oversee">
+  <img alt="Oversee GEM Version" src="https://img.shields.io/gem/v/oversee?color=10b981&include_prereleases&logo=ruby&logoColor=f43f5e">
+</a>
 
-[![Gem Version](https://badge.fury.io/rb/oversee.svg)](https://badge.fury.io/rb/oversee)
+<a href="https://rubygems.org/gems/oversee">
+  <img alt="Oversee GEM Version" src="https://img.shields.io/gem/dt/oversee?color=10b981&include_prereleases&logo=ruby&logoColor=f43f5e">
+</a>
 
 ---
 
@@ -35,6 +39,7 @@ $ bundle add oversee
 
 > [!TIP]
 > Currently, we don't release new gem versions too often due to the fragile nature of the gem. However, you can use the edge version of the gem by pointing directly to the git repository.
+>
 > ```ruby
 > gem "oversee", git: "https://github.com/primevise/oversee", branch: :main
 > ```

data/app/assets/config/oversee_manifest.js

@@ -0,0 +1,2 @@
+//= link oversee/application.js
+//= link_tree ../../javascript/oversee/controllers .js

data/app/components/oversee/dashboard/actions.rb

@@ -0,0 +1,58 @@
+class Oversee::Dashboard::Actions < Oversee::Base
+  def initialize(params: nil)
+    @params = params
+  end
+
+  def view_template(&)
+    div(class: "flex items-center justify-between") do
+      div(class: "flex items-center gap-2") do
+        if show_action_section?
+          button(
+            class:"rounded-full bg-gray-100 inline-flex gap-2 items-center text-xs px-4 py-2 font-medium hover:bg-gray-200",
+            data: { controller: "reveal", action: "reveal#toggle", reveal_revealable_id_value: "oversee-filters" }
+          ) do
+            render Phlex::Icons::Iconoir::FilterAlt.new(class: "size-3")
+            plain "Filters"
+          end
+        end
+        if false
+          a(class:"rounded-full bg-gray-100 inline-flex gap-2 items-center text-xs px-4 py-2 font-medium hover:bg-gray-200") do
+            render Phlex::Icons::Iconoir::XMark.new(class: "size-4 text-gray-500")
+            plain "Clear sorting"
+          end
+        end
+      end
+      div(class: "flex items-center gap-4") do
+        form(action: "", class: "flex items-center gap-2") do
+          input(
+            type: :search,
+            name: :query,
+            value: @params[:query],
+            placeholder: search_placeholder,
+            class: "flex bg-gray-100 min-w-64 w-64 focus:w-96 transition-all h-10 items-center pl-4 py-2 placeholder:text-gray-500 rounded-sm text-sm"
+          )
+          button(class: "size-10 inline-flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition-colors") { render Phlex::Icons::Iconoir::Search.new(class: "size-4 text-gray-600") }
+        end
+      end
+    end
+    render Oversee::Dashboard::Filters.new if show_action_section?
+  end
+
+  private
+
+  def show_action_section?
+    Rails.env.development? || @params[:experimental] == "true"
+  end
+
+  def sortless_path
+    sortless_query_params = @params.except(:sort_attribute, :sort_direction, :controller, :action)
+    # helpers.resources_path(sortless_query_params)
+  end
+
+  def search_placeholder
+    context = Oversee::Search.new(collection: nil, resource_class: @params[:resource_class_name].constantize)
+    attr = context.default_searchable_attribute
+
+    "Search by #{attr}"
+  end
+ end

data/app/components/oversee/dashboard/filter.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+class Oversee::Dashboard::Filter < Oversee::Base
+  def view_template
+    div(class: "flex items-center gap-2") do
+      render Phlex::Icons::Iconoir::LongArrowDownRight.new(class: "size-4 text-gray-500")
+      form(action: "", class: "flex items-center gap-2") do
+        input(type: :text, placeholder: "Title [EQ]", name: "filters[title][eq][]", class: "bg-gray-100 px-4 py-2 text-xs")
+        button(type: :submit, class: "button", class: "bg-gray-900 text-white px-4 py-2 text-xs font-medium") { plain "Apply" }
+      end
+    end
+  end
+end

data/app/components/oversee/dashboard/filters.rb

@@ -1,54 +1,8 @@
+# frozen_string_literal: true
 class Oversee::Dashboard::Filters < Oversee::Base
-  def initialize(params: nil)
-
-    @params = params
-
-    puts "params: #{params}"
-    puts "sortless_path: #{sortless_path}"
-  end
-
-  def view_template(&)
-    div(class: "border-b p-4") do
-      div(class: "flex items-center justify-between") do
-        div(class: "flex items-center gap-2") do
-          if show_action_section?
-            button(class:"rounded-full bg-gray-100 inline-flex gap-2 items-center text-xs px-4 py-2 font-medium hover:bg-gray-200") do
-              render Phlex::Icons::Iconoir::FilterAlt.new(class: "size-3")
-              plain "Filters"
-            end
-          end
-          if false
-            a(class:"rounded-full bg-gray-100 inline-flex gap-2 items-center text-xs px-4 py-2 font-medium hover:bg-gray-200") do
-              render Phlex::Icons::Iconoir::XMark.new(class: "size-4 text-gray-500")
-              plain "Clear sorting"
-            end
-          end
-        end
-        div(class: "flex items-center gap-4") do
-          form(action: "", class: "flex items-center gap-2") do
-            input(type: :search, name: :query, class: "flex bg-gray-100 min-w-80 h-10 items-center pl-4 py-2 placeholder:text-gray-500 rounded-sm text-sm", placeholder: search_placeholder, value: @params[:query])
-            button(class: "size-10 inline-flex items-center justify-center bg-gray-100 hover:bg-gray-200 transition-colors") { render Phlex::Icons::Iconoir::Search.new(class: "size-4 text-gray-600") }
-          end
-        end
-      end
+  def view_template
+    div(id: :oversee_filters, class: "hidden pt-4 mt-4 border-t flex flex-col gap-2") do
+      render Oversee::Dashboard::Filter.new
     end
   end
-
-  private
-
-  def show_action_section?
-    Rails.env.development? || @params[:experimental] == "true"
-  end
-
-  def sortless_path
-    sortless_query_params = @params.except(:sort_attribute, :sort_direction, :controller, :action)
-    # helpers.resources_path(sortless_query_params)
-  end
-
-  def search_placeholder
-    context = Search.new(collection: nil, resource_class: @params[:resource_class_name].constantize)
-    attr = context.default_searchable_attribute
-
-    "Search by #{attr}"
-  end
- end
+end

data/app/components/oversee/dashboard/header.rb

@@ -1,4 +1,9 @@
 class Oversee::Dashboard::Header < Oversee::Base
+  attr_reader :title
+  attr_reader :subtitle
+  attr_reader :return_path
+  attr_reader :show_back_button
+
   def initialize(title: nil, subtitle: nil, return_path: nil, show_back_button: true)
     @title = title || "Dashboard"
     @subtitle = subtitle || "Manage your account"
@@ -7,31 +12,42 @@ class Oversee::Dashboard::Header < Oversee::Base
   end
 
   def view_template(&)
-    div(id: "dashboard_header", class: "p-8 border-b flex items-center justify-between") do
-      div(class: "flex items-center gap-4") do
-        back_button
-        div do
-          h1(class: "text-xl text-gray-800") { @title }
-          p(class: "text-sm text-gray-600") { @subtitle }
-        end
-      end
-      div(class: "flex items-center gap-2") do
-        yield if block_given?
+
+    div(class: "min-h-10 flex items-center justify-between") do
+      if block_given?
+        yield(self)
+      else
+        left
+        right
       end
     end
   end
 
+  def left(&)
+    div(class: "flex items-center gap-2") do
+      back_button if show_back_button
+      h3(class: "text-lg font-medium text-gray-900") { title } if title.present?
+      yield if block_given?
+    end
+  end
+
+  def right(&)
+    div(class: "flex items-center gap-4", &)
+  end
+
+  def separator
+    render Phlex::Icons::Iconoir::Slash.new(class: "size-4 text-gray-300", stroke_width: 1.75)
+  end
+
   private
 
   def back_button
-    if @show_back_button
-      a(
-        href: return_button_path,
-        class: "size-10 inline-flex items-center justify-center bg-gray-50 text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-colors",
-        data: { controller: "back", action: "back#navigate", turbo_action: "replace" }
-      ) do
-        render Phlex::Icons::Iconoir::ArrowLeft.new(class: "size-4 text-gray-900")
-      end
+    a(
+      href: return_button_path,
+      class: "mr-2 size-8 inline-flex items-center justify-center bg-gray-50 text-gray-500 hover:text-gray-900 hover:bg-gray-200 transition-colors",
+      data: { controller: "back", action: "back#navigate", turbo_action: "replace" }
+    ) do
+      render Phlex::Icons::Iconoir::ArrowLeft.new(class: "size-3", stroke_width: 2.5)
     end
   end
 

data/app/components/oversee/dashboard/index.rb

@@ -1,23 +1,35 @@
 # frozen_string_literal: true
 
 class Oversee::Dashboard::Index < Oversee::Base
+
+  def around_template
+    render Oversee::Layout::Application.new { super }
+  end
+
   def view_template
-    div(class: "p-8") do
-      div(class: "flex items-center justify-between") do
-        div do
-          p(class: "text-xs uppercase font-medium text-gray-400") { "Dashboard" }
-          h1(class: "text-xl") { "Welcome" }
+    div(class: "flex items-center justify-between") do
+      h1(class: "text-lg font-medium text-gray-900") { "Dashboard" }
+      h1(class: "text-sm font-medium text-gray-500") { Date.current.to_fs(:long) }
+    end
+
+    if Oversee.card_class_names.present?
+      div(class: "grid grid-cols-4 gap-4") do
+        Oversee.card_class_names.each do |card_name|
+          render Oversee::Card.new(card_name: card_name)
         end
       end
     end
 
-    if Oversee.card_class_names.present?
-      div(class: "p-8") do
-        div(class: "grid grid-cols-4 gap-4") do
-          Oversee.card_class_names.each do |card_name|
-            render Oversee::Card.new(card_name: card_name)
+    hr(class: "my-4")
+
+    div(class: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4") do
+      Oversee.application_resource_names.sort.each do |resource_class_name|
+          a(href: helpers.resources_path(resource_class_name:), class: "w-full bg-gray-100/75 block hover:bg-gray-50 p-4 truncate") do
+            div(class: "flex items-center justify-center size-8 bg-white") do
+              render Phlex::Icons::Iconoir::Folder.new(class: "size-4 text-gray-400")
+            end
+            p(class: "mt-4 font-medium text-gray-700") { resource_class_name }
           end
-        end
       end
     end
   end

data/app/components/oversee/dashboard/javascript.rb

@@ -1,9 +1,9 @@
 class Oversee::Dashboard::Javascript < Phlex::HTML
+  include Phlex::Rails::Helpers::JavascriptImportmapTags
+
   def view_template
-    script(async: true, src:"https://unpkg.com/es-module-shims/dist/es-module-shims.js")
-    script(type: "importmap", data_turbo_track: "reload") do
-      raw %({"imports":{"@hotwired/stimulus":"https://unpkg.com/@hotwired/stimulus/dist/stimulus.js","@hotwired/turbo":"https://unpkg.com/@hotwired/turbo","@hotwired/turbo-rails":"https://unpkg.com/@hotwired/turbo-rails"}}).html_safe
-    end
+    script(async: true, src:"https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js")
+    javascript_importmap_tags("application", importmap: Oversee.importmap)
     script(type: "module") { raw %(import * as Turbo from "@hotwired/turbo-rails").html_safe }
   end
 end

data/app/components/oversee/dashboard/pagination.rb

@@ -9,7 +9,7 @@ class Oversee::Dashboard::Pagination < Oversee::Base
   end
 
   def view_template
-    div(class:"p-4 border-t flex items-center justify-between") do
+    div(class:"mt-4 flex items-center justify-between") do
 
       div(class: "font-regular text-xs") do
         raw pagy_info(@pagy).html_safe

data/app/components/oversee/dashboard/sidebar.rb

@@ -21,8 +21,45 @@ class Oversee::Dashboard::Sidebar < Oversee::Base
         end
       end
 
+      if Rails.env.development?
+        hr(class: "my-4 -mx-4")
+        details(
+          id: "links-menu",
+          class: "group",
+          # open: true,
+          data: {
+            controller: "sidebar--state",
+            action: "sidebar--state#persist",
+            sidebar__state_target: "expandable"
+          }
+        ) do
+          summary(class: "flex items-center justify-between cursor-pointer") do
+            p(class: "text-[0.7rem] uppercase text-gray-400 font-medium") { "Links" }
+            render Phlex::Icons::Iconoir::NavArrowDown.new(class: "size-4 text-gray-400 transform transition-transform group-open:rotate-180 group-hover:text-blue-500")
+          end
+          ul(class: "mt-2 text-sm text-gray-700 overflow-x-hidden") do
+            li do
+              a(href: "https://github.com/primevise/oversee", target: "_blank", class: "flex items-center gap-2 hover:bg-gray-50 p-2 truncate") do
+                render Phlex::Icons::Iconoir::ArrowUpRightSquare.new(class: "size-4 text-gray-400")
+                span { "Repository" }
+              end
+            end
+          end
+        end
+      end
+
       hr(class: "my-4 -mx-4")
-      details(open: true, class: "group") do
+
+      details(
+        id: "resources-menu",
+        class: "group",
+        # open: true,
+        data: {
+          controller: "sidebar--state",
+          action: "sidebar--state#persist",
+          sidebar__state_target: "expandable"
+        }
+      ) do
         summary(class: "flex items-center justify-between cursor-pointer") do
           p(class: "text-[0.7rem] uppercase text-gray-400 font-medium") { "Resources" }
           render Phlex::Icons::Iconoir::NavArrowDown.new(class: "size-4 text-gray-400 transform transition-transform group-open:rotate-180 group-hover:text-blue-500")

data/app/components/oversee/dashboard/tailwind.rb

@@ -1,11 +1,40 @@
 class Oversee::Dashboard::Tailwind < Phlex::HTML
   def view_template
-    script(src: "https://cdn.tailwindcss.com?plugins=typography")
+    script(src: "https://cdn.tailwindcss.com/3.4.15?plugins=typography@0.5.15")
     style(type:"text/tailwindcss") do
       raw pagy_css.html_safe
+      raw trix_css.html_safe
     end
   end
 
+  def trix_css
+    <<~CSS
+      trix-editor {
+        @apply rounded-b rounded-t-none border border-t-0 border-gray-200 !ring-0;
+      }
+
+      .trix-active {
+        @apply !bg-gray-100 !text-blue-500;
+      }
+
+      .trix-button-row {
+        @apply overflow-hidden rounded-t border;
+      }
+
+      .trix-button {
+        @apply !relative !inline-flex !h-7 !items-center !justify-center border-0 !border-b-0 !border-l-0 !px-7 !py-4;
+      }
+
+      .trix-button::before {
+        @apply !top-1.5 !h-5;
+      }
+
+      .trix-button-group {
+        @apply !mb-0 rounded-b-none !border-0 border-gray-200;
+      }
+    CSS
+  end
+
   def pagy_css
     <<~CSS
       .pagy {

data/app/components/oversee/field/display.rb

@@ -1,29 +1,20 @@
-class Oversee::Field::Display < Oversee::Base
-  def initialize(resource:, key: nil, value: nil, datatype: :string, interactive: true)
-    @resource = resource
-    @key = key
-    @value = value
-    @datatype = datatype
-    @interactive = interactive
-  end
-
+class Oversee::Field::Display < Oversee::Field
   def view_template
-    wrapper_tag(
-      id: dom_id(@resource, @key),
-      href: helpers.resource_input_field_path(resource_class_name: resource_class_name, key: @key),
-      class: "bg-gray-100 h-10 flex items-center px-4 py-2 hover:bg-gray-200 transition-colors w-full cursor-pointer",
-      data: { turbo_stream: true }) do
-      render Oversee::Field::Value.new(key: @key, value: @resource.send(@key), datatype: @datatype)
+    html_tag(
+      id: dom_id(resource, key),
+      href: helpers.resource_input_path(resource_class_name:, key:, datatype:),
+      title: key.to_s.titleize,
+      class: "bg-gray-100 h-10 flex items-center justify-between px-4 py-2 hover:bg-gray-200 transition-colors w-full cursor-pointer group",
+      data: { turbo_stream: true }
+    ) do
+      render Oversee::Field::Value.new(key:, value:, datatype:, **@options)
+      render Phlex::Icons::Iconoir::Edit.new(class: "text-gray-500 size-4 opacity-0 group-hover:opacity-100 transition-opacity", stroke_width: 1.75)
     end
   end
 
   private
 
-  def resource_class_name
-    @resource.class.name
-  end
+  def edittable? = @options[:edittable] || true
 
-  def wrapper_tag(...)
-    @interactive ? a(...) : div(...)
-  end
+  def html_tag(...) = edittable? ? a(...) : div(...)
 end

data/app/components/oversee/field/form.rb

@@ -1,49 +1,17 @@
-class Oversee::Field::Form < Oversee::Base
+class Oversee::Field::Form < Oversee::Field
   include Phlex::Rails::Helpers::FormWith
 
-  def initialize(resource:, key: nil, value: nil, datatype: :string, method: :patch)
-    @resource = resource
-    @key = key
-    @value = value
-    @datatype = datatype
-    @method = method
-  end
-
   def view_template
-    form_with(id: dom_id(@resource, @key), model: @resource, url: helpers.update_resource_path(resource_class_name: resource_class_name, id: @resource.id), method: @method, class: "flex items-center w-full gap-4") do |form|
+    form_with(id: field_form_id, model: resource, url: helpers.update_resource_path(resource_class_name: resource_class_name, id: @resource.id), method: @method, class: "flex items-center w-full gap-4") do |form|
       input type: :hidden, id: "oversee_key", name: "oversee_key", value: @key.to_s
       input type: :hidden, id: "oversee_datatype", name: "oversee_datatype", value: @datatype
-      render Oversee::Field::Input.new(key: @key, value: @value, datatype: @datatype)
-      button(class:"h-9 bg-gray-900 hover:bg-gray-700 text-white inline-flex items-center cursor-pointer gap-2 px-4 rounded-full text-xs font-medium") {
-        save_icon
-        plain "Save"
-      }
+      render Oversee::Field::Input.new(key: @key, value: @value, datatype: @datatype, **@options)
     end
   end
 
   private
 
-  def resource_class_name
-    @resource.class.name
-  end
-
-  def save_icon
-    svg(
-      stroke_width: "2.5",
-      viewbox: "0 0 24 24",
-      fill: "none",
-      xmlns: "http://www.w3.org/2000/svg",
-      class: "size-4",
-      color: "currentColor"
-    ) do |s|
-      s.path(
-        d: "M5 13L9 17L19 7",
-        stroke: "currentColor",
-        stroke_width: "2.5",
-        stroke_linecap: "round",
-        stroke_linejoin: "round"
-      )
-    end
+  def method
+    @method ||= @options[:method] || :patch
   end
-
 end

data/app/components/oversee/field/input/belongs_to.rb

@@ -0,0 +1,5 @@
+class Oversee::Field::Input::BelongsTo < Oversee::Field::Input
+  def view_template
+    input(type: "text", id: field_id, name: field_name, value:, class: "flex border px-4 py-2 text-sm w-full rounded-sm")
+  end
+end

data/app/components/oversee/field/input/boolean.rb

@@ -1,23 +1,8 @@
-class Oversee::Field::Input::Boolean < Phlex::HTML
-  def initialize(key:, value:)
-    @key = key
-    @value = value
-  end
-
+class Oversee::Field::Input::Boolean < Oversee::Field::Input
   def view_template
     select(id: field_id, name: field_name, class: "flex w-full border rounded-sm px-4 py-2 text-sm") do
-      option(value: 1, selected: @value) { "True" }
-      option(value: 0, selected: !@value) { "False" }
+      option(value: 1, selected: value) { "True" }
+      option(value: 0, selected: !value) { "False" }
     end
   end
-
-  private
-
-  def field_id
-    "resource_#{@key.to_s}"
-  end
-
-  def field_name
-    "resource[#{@key.to_s}]"
-  end
 end

data/app/components/oversee/field/input/date.rb

@@ -0,0 +1,5 @@
+class Oversee::Field::Input::Date < Oversee::Field::Input
+  def view_template
+    input(type: "datetime-local", id: field_id, name: field_name, value: value&.strftime("%Y-%m-%dT%T"), class: "flex w-full border rounded-sm px-4 py-2 text-sm")
+  end
+end

data/app/components/oversee/field/input/datetime.rb

@@ -1,20 +1,5 @@
-class Oversee::Field::Input::Datetime < Phlex::HTML
-  def initialize(key:, value:)
-    @key = key
-    @value = value
-  end
-
+class Oversee::Field::Input::Datetime < Oversee::Field::Input
   def view_template
-    input type: "datetime-local", id: field_id, name: field_name, value: @value&.strftime("%Y-%m-%dT%T"), class: "flex w-full border rounded-sm px-4 py-2 text-sm"
-  end
-
-  private
-
-  def field_id
-    "resource_#{@key.to_s}"
-  end
-
-  def field_name
-    "resource[#{@key.to_s}]"
+    input(type: "datetime-local", id: field_id, name: field_name, value: value&.strftime("%Y-%m-%dT%T"), class: "flex w-full border rounded-sm px-4 py-2 text-sm")
   end
 end

data/app/components/oversee/field/input/integer.rb

@@ -1,20 +1,5 @@
-class Oversee::Field::Input::Integer < Phlex::HTML
-  def initialize(key:, value:)
-    @key = key
-    @value = value
-  end
-
+class Oversee::Field::Input::Integer < Oversee::Field::Input
   def view_template
-    input type: "number", id: field_id, name: field_name, value: @value, class: "flex w-full border rounded-sm px-4 py-2 text-sm"
-  end
-
-  private
-
-  def field_id
-    "resource_#{@key.to_s}"
-  end
-
-  def field_name
-    "resource[#{@key.to_s}]"
+    input(type: "number", id: field_id, name: field_name, value:, class: "flex w-full border rounded-sm px-4 py-2 text-sm")
   end
 end

data/app/components/oversee/field/input/json.rb

@@ -0,0 +1,5 @@
+class Oversee::Field::Input::Json < Oversee::Field::Input
+  def view_template
+    textarea(type: "text", id: field_id, name: field_name, class: "flex border px-4 py-2 text-sm w-full rounded-sm") { value.to_s }
+  end
+end

data/app/components/oversee/field/input/rich_text.rb

@@ -0,0 +1,10 @@
+class Oversee::Field::Input::RichText < Oversee::Field::Input
+  register_element :trix_editor
+
+  def view_template
+    div do
+      input(type: "hidden", id: field_id, name: field_name, value:)
+      trix_editor(id: "#{field_id}_trix_editor", input: field_id)
+    end
+  end
+end

data/app/components/oversee/field/input/string.rb

@@ -1,20 +1,5 @@
-class Oversee::Field::Input::String < Phlex::HTML
-  def initialize(key:, value:)
-    @key = key
-    @value = value
-  end
-
+class Oversee::Field::Input::String < Oversee::Field::Input
   def view_template
-    input type: "text", id: field_id, name: field_name, value: @value, class: "flex border px-4 py-2 text-sm w-full rounded-sm"
-  end
-
-  private
-
-  def field_id
-    "resource_#{@key.to_s}"
-  end
-
-  def field_name
-    "resource[#{@key.to_s}]"
+    input(type: "text", id: field_id, name: field_name, value:, class: "flex border px-4 py-2 text-sm w-full rounded-sm")
   end
 end