plutonium 0.15.6 → 0.15.8

data/lib/plutonium/ui/form/concerns/renders_nested_resource_fields.rb

@@ -0,0 +1,285 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      module Concerns
+        # Handles rendering of nested resource fields in forms
+        # TODO: further decompose this into components
+        # @api private
+        module RendersNestedResourceFields
+          extend ActiveSupport::Concern
+
+          DEFAULT_NESTED_LIMIT = 10
+          NESTED_OPTION_KEYS = [:allow_destroy, :update_only, :macro, :class].freeze
+          SINGULAR_MACROS = %i[belongs_to has_one].freeze
+
+          class NestedInputsDefinition
+            include Plutonium::Definition::DefineableProps
+
+            defineable_props :field, :input
+          end
+
+          class NestedFieldContext
+            attr_reader :name, :definition, :options, :permitted_fields
+
+            def initialize(name:, definition:, resource_class:, resource_definition:, object_class:)
+              @name = name
+              @definition = definition
+              @resource_definition = resource_definition
+              @resource_class = resource_class
+              @options = build_options
+              @permitted_fields = build_permitted_fields
+              @object_class = object_class
+            end
+
+            def nested_attribute_options
+              @nested_attribute_options ||= @resource_class.all_nested_attributes_options[@name] || {}
+            end
+
+            def nested_fields_input_param
+              @options[:as] || :"#{@name}_attributes"
+            end
+
+            def nested_fields_multiple?
+              @options[:multiple]
+            end
+
+            def blank_object
+              (@object_class || nested_attribute_options[:class])&.new
+            end
+
+            private
+
+            def build_options
+              options = @resource_definition.defined_nested_inputs[@name][:options].dup || {}
+              merge_nested_fields_options(options)
+              set_nested_fields_limits(options)
+              options
+            end
+
+            def merge_nested_fields_options(options)
+              NESTED_OPTION_KEYS.each do |key|
+                options.fetch(key) { options[key] = nested_attribute_options[key] }
+              end
+            end
+
+            def set_nested_fields_limits(options)
+              options.fetch(:limit) do
+                options[:limit] = if SINGULAR_MACROS.include?(nested_attribute_options[:macro])
+                  1
+                else
+                  nested_attribute_options[:limit] || DEFAULT_NESTED_LIMIT
+                end
+              end
+
+              options.fetch(:multiple) do
+                options[:multiple] = !SINGULAR_MACROS.include?(nested_attribute_options[:macro])
+              end
+            end
+
+            def build_permitted_fields
+              @options[:fields] || @definition.defined_inputs.keys
+            end
+          end
+
+          # Template object for new nested records
+
+          private
+
+          # Renders a nested resource field with associated inputs
+          # @param [Symbol] name The name of the nested resource field
+          # @raise [ArgumentError] if the nested input definition is missing required configuration
+          def render_nested_resource_field(name)
+            # debugger if $extracting_input
+            context = NestedFieldContext.new(
+              name: name,
+              definition: build_nested_fields_definition(name),
+              resource_class: resource_class,
+              resource_definition: resource_definition,
+              object_class: resource_definition.defined_nested_inputs[name][:options]&.fetch(:object_class, nil)
+            )
+
+            render_nested_field_container(context) do
+              render_nested_field_header(context)
+              render_nested_field_content(context)
+              render_nested_fields_add_button(context)
+            end
+          end
+
+          def build_nested_fields_definition(name)
+            nested_input_definition = resource_definition.defined_nested_inputs[name]
+
+            if nested_input_definition[:options]&.fetch(:using, nil)
+              nested_input_definition[:options][:using]
+            elsif nested_input_definition[:block]
+              build_nested_fields_definition_from_block(nested_input_definition[:block])
+            else
+              raise_missing_nested_definition_error(name)
+            end
+          end
+
+          def build_nested_fields_definition_from_block(block)
+            definition = NestedInputsDefinition.new
+            block.call(definition)
+            definition
+          end
+
+          def render_nested_field_container(context, &)
+            div(
+              class: "col-span-full space-y-2 my-4",
+              data: {
+                controller: "nested-resource-form-fields",
+                nested_resource_form_fields_limit_value: context.options[:limit]
+              },
+              &
+            )
+          end
+
+          def render_nested_field_header(context)
+            div do
+              h2(class: "text-lg font-semibold text-gray-900 dark:text-white") { context.name.to_s.humanize }
+              render_nested_fields_header_description(context.options[:description]) if context.options[:description]
+            end
+          end
+
+          def render_nested_fields_header_description(description)
+            p(class: "text-md font-normal text-gray-500 dark:text-gray-400") { description }
+          end
+
+          def render_nested_field_content(context)
+            if context.nested_fields_multiple?
+              render_multiple_nested_fields(context)
+            else
+              render_single_nested_field(context)
+            end
+
+            div(data_nested_resource_form_fields_target: :target, hidden: true)
+          end
+
+          def render_multiple_nested_fields(context)
+            nesting_method = :nest_many
+            options = {default: {NEW_RECORD: context.blank_object}}
+            render_template_for_nested_fields(context, options, nesting_method:)
+            render_existing_nested_fields(context, options, nesting_method:)
+          end
+
+          def render_single_nested_field(context)
+            nesting_method = :nest_one
+            options = {default: context.blank_object}
+            render_template_for_nested_fields(context, options, nesting_method:)
+            render_existing_nested_fields(context, options, nesting_method:)
+          end
+
+          def render_template_for_nested_fields(context, options, nesting_method:)
+            template_tag data_nested_resource_form_fields_target: "template" do
+              send(nesting_method, context.name, as: context.nested_fields_input_param, **options, template: true) do |nested|
+                render_nested_fields_fieldset(nested, context)
+              end
+            end
+          end
+
+          def render_existing_nested_fields(context, options, nesting_method:)
+            send(nesting_method, context.name, as: context.nested_fields_input_param, **options) do |nested|
+              render_nested_fields_fieldset(nested, context)
+            end
+          end
+
+          def render_nested_fields_fieldset(nested, context)
+            fieldset(
+              data_new_record: !nested.object&.persisted?,
+              class: "nested-resource-form-fields border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-4 relative"
+            ) do
+              render_nested_fields_fieldset_content(nested, context)
+              render_nested_fields_delete_button(nested, context.options)
+            end
+          end
+
+          def render_nested_fields_fieldset_content(nested, context)
+            div(class: "grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-4 grid-flow-row-dense") do
+              render_nested_fields_hidden_fields(nested, context)
+              render_nested_fields_visible_fields(nested, context)
+            end
+          end
+
+          def render_nested_fields_hidden_fields(nested, context)
+            if !context.options[:update_only] && context.options[:class]&.respond_to?(:primary_key)
+              render nested.field(context.options[:class].primary_key).hidden_tag
+            end
+            render nested.field(:_destroy).hidden_tag if context.options[:allow_destroy]
+          end
+
+          def render_nested_fields_visible_fields(nested, context)
+            context.permitted_fields.each do |input|
+              render_simple_resource_field(input, context.definition, nested)
+            end
+          end
+
+          def render_nested_fields_delete_button(nested, options)
+            return unless !nested.object&.persisted? || options[:allow_destroy]
+
+            render_nested_fields_delete_button_content
+          end
+
+          def render_nested_fields_delete_button_content
+            div(class: "flex items-center justify-end") do
+              label(class: "inline-flex items-center text-md font-medium text-red-900 cursor-pointer") do
+                plain "Delete"
+                render_nested_fields_delete_checkbox
+              end
+            end
+          end
+
+          def render_nested_fields_delete_checkbox
+            input(
+              type: :checkbox,
+              class: "w-4 h-4 ms-2 text-red-600 bg-red-100 border-red-300 rounded focus:ring-red-500 dark:focus:ring-red-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600 cursor-pointer",
+              data_action: "nested-resource-form-fields#remove"
+            )
+          end
+
+          def render_nested_fields_add_button(context)
+            div do
+              button(
+                type: :button,
+                class: "inline-block",
+                data: {
+                  action: "nested-resource-form-fields#add",
+                  nested_resource_form_fields_target: "addButton"
+                }
+              ) do
+                render_nested_fields_add_button_content(context.name)
+              end
+            end
+          end
+
+          def render_nested_fields_add_button_content(name)
+            span(class: "bg-secondary-700 text-white hover:bg-secondary-800 focus:ring-secondary-300 dark:bg-secondary-600 dark:hover:bg-secondary-700 dark:focus:ring-secondary-800 flex items-center justify-center px-4 py-1.5 text-sm font-medium rounded-lg focus:outline-none focus:ring-4") do
+              render Phlex::TablerIcons::Plus.new(class: "w-4 h-4 mr-1")
+              span { "Add #{name.to_s.singularize.humanize}" }
+            end
+          end
+
+          def raise_missing_nested_definition_error(name)
+            raise ArgumentError, %(
+              `nested_input :#{name}` is missing a definition
+
+              you can either pass in a block:
+              ```ruby
+              nested_input :#{name} do |definition|
+                input :city
+                input :country
+              end
+              ```
+
+              or pass in options:
+              ```ruby
+              nested_input :#{name}, using: #{name.to_s.classify}Definition, fields: %i[city country]
+              ```
+            )
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/form/resource.rb

@@ -4,6 +4,8 @@ module Plutonium
   module UI
     module Form
       class Resource < Base
+        include Plutonium::UI::Form::Concerns::RendersNestedResourceFields
+
         attr_reader :resource_fields, :resource_definition
 
         def initialize(*, resource_fields:, resource_definition:, **, &)
@@ -35,37 +37,45 @@ module Plutonium
 
         def render_resource_field(name)
           when_permitted(name) do
-            # field :name, as: :string
-            # input :name, as: :string
-            # input :description, class: "col-span-full"
-            # input :age, tag: {class: "max-h-fit"}
-            # input :dob do |f|
-            #   f.date_tag
-            # end
-
-            field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options] : {}
-
-            input_definition = resource_definition.defined_inputs[name] || {}
-            input_options = input_definition[:options] || {}
-
-            tag = field_options[:as] || input_options[:as]
-            tag_attributes = input_options[:tag] || {}
-            tag_block = input_definition[:block] || ->(f) {
-              tag ||= f.inferred_field_component
-              f.send(:"#{tag}_tag", **tag_attributes)
-            }
-
-            field_options = field_options.except(:as)
-            wrapper_options = input_options.except(:tag, :as)
-            if !wrapper_options[:class] || !wrapper_options[:class].include?("col-span")
-              # temp hack to allow col span overrides
-              # TODO: remove once we complete theming, which will support merges
-              wrapper_options[:class] = tokens("col-span-full", wrapper_options[:class])
+            if resource_definition.defined_nested_inputs[name]
+              render_nested_resource_field(name)
+            else
+              render_simple_resource_field(name, resource_definition, self)
             end
+          end
+        end
 
-            render field(name, **field_options).wrapped(**wrapper_options) do |f|
-              render tag_block.call(f)
-            end
+        def render_simple_resource_field(name, definition, form)
+          # field :name, as: :string
+          # input :name, as: :string
+          # input :description, class: "col-span-full"
+          # input :age, tag: {class: "max-h-fit"}
+          # input :dob do |f|
+          #   f.date_tag
+          # end
+
+          field_options = definition.defined_fields[name] ? definition.defined_fields[name][:options] : {}
+
+          input_definition = definition.defined_inputs[name] || {}
+          input_options = input_definition[:options] || {}
+
+          tag = field_options[:as] || input_options[:as]
+          tag_attributes = input_options[:tag] || {}
+          tag_block = input_definition[:block] || ->(f) {
+            tag ||= f.inferred_field_component
+            f.send(:"#{tag}_tag", **tag_attributes)
+          }
+
+          field_options = field_options.except(:as)
+          wrapper_options = input_options.except(:tag, :as)
+          if !wrapper_options[:class] || !wrapper_options[:class].include?("col-span")
+            # temp hack to allow col span overrides
+            # TODO: remove once we complete theming, which will support merges
+            wrapper_options[:class] = tokens("col-span-full", wrapper_options[:class])
+          end
+
+          render form.field(name, **field_options).wrapped(**wrapper_options) do |f|
+            render tag_block.call(f)
           end
         end
 

data/lib/plutonium/ui/form/theme.rb

@@ -7,7 +7,7 @@ module Plutonium
         def self.theme
           super.merge({
             base: "relative bg-white dark:bg-gray-800 shadow-md sm:rounded-lg my-3 p-6 space-y-6",
-            fields_wrapper: "grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-6 grid-flow-row-dense",
+            fields_wrapper: "grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-4 grid-flow-row-dense",
             actions_wrapper: "flex justify-end space-x-2",
             wrapper: nil,
             inner_wrapper: "w-full",

data/lib/plutonium/ui/frame_navigator_panel.rb

@@ -0,0 +1,53 @@
+module Plutonium
+  module UI
+    class FrameNavigatorPanel < Plutonium::UI::Component::Base
+      class PanelItem < Plutonium::UI::Component::Base
+        def initialize(label:, icon:, **attributes)
+          @label = label
+          @icon = icon
+          @attributes = attributes
+        end
+
+        def view_template
+          button(
+            title: @label,
+            style: "display: none",
+            class: "text-gray-600 dark:text-gray-300",
+            **@attributes
+          ) {
+            render @icon.new(class: "w-6 h-6")
+          }
+        end
+      end
+
+      class PanelContent < Plutonium::UI::Component::Base
+        def initialize(src:)
+          @src = src
+        end
+
+        def view_template
+          DynaFrameHost src: @src, loading: :lazy, data: {"frame-navigator-target": "frame"} do
+            SkeletonTable()
+          end
+        end
+      end
+
+      def initialize(title:, src:)
+        @title = title
+        @src = src
+      end
+
+      def view_template
+        div(data: {controller: %w[has-many-panel frame-navigator]}) do
+          Panel do |panel|
+            panel.with_title @title
+            panel.with_item PanelItem.new(label: "Home", icon: Phlex::TablerIcons::Home2, data_frame_navigator_target: %(homeButton))
+            panel.with_item PanelItem.new(label: "Back", icon: Phlex::TablerIcons::ChevronLeft, data_frame_navigator_target: %(backButton))
+            panel.with_item PanelItem.new(label: "Refresh", icon: Phlex::TablerIcons::RefreshDot, data_frame_navigator_target: %(refreshButton))
+            panel.with_content PanelContent.new(src: @src)
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/panel.rb

@@ -0,0 +1,63 @@
+module Plutonium
+  module UI
+    class Panel < Plutonium::UI::Component::Base
+      include Phlex::DeferredRender
+
+      def initialize
+        @items = []
+      end
+
+      def with_title(title)
+        @title = title
+      end
+
+      def with_item(item)
+        @items << item
+      end
+
+      def with_content(content)
+        @content = content
+      end
+
+      def view_template
+        wrapped do
+          render_toolbar if render_toolbar?
+          render_content if render_content?
+        end
+      end
+
+      private
+
+      def wrapped(&)
+        div(class: "mt-6", &)
+      end
+
+      def render_toolbar
+        div(class: %(flex justify-between items-center mb-4)) do
+          if @title.present?
+            h5(class: %(text-2xl font-bold tracking-tight text-gray-900 dark:text-white)) do
+              @title
+            end
+          end
+          div(class: "flex space-x-4") do
+            @items.each do |item|
+              render item
+            end
+          end
+        end
+      end
+
+      def render_content
+        render @content
+      end
+
+      def render_toolbar?
+        @title || @items.present?
+      end
+
+      def render_content?
+        @content
+      end
+    end
+  end
+end

data/lib/plutonium/ui/skeleton_table.rb

@@ -0,0 +1,29 @@
+module Plutonium
+  module UI
+    class SkeletonTable < Plutonium::UI::Component::Base
+      def view_template
+        div(
+          role: "status",
+          class:
+            "p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded shadow motion-safe:animate-pulse dark:divide-gray-700 md:p-6 dark:border-gray-700"
+        ) do
+          div(class: "flex items-center justify-between") do
+            div do
+              div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5")
+              div(class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700")
+            end
+            div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12")
+          end
+          div(class: "flex items-center justify-between pt-4") do
+            div do
+              div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-600 w-24 mb-2.5")
+              div(class: "w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700")
+            end
+            div(class: "h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 w-12")
+          end
+          span(class: "sr-only") { "Loading..." }
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/resource.rb

@@ -94,7 +94,7 @@ module Plutonium
         end
 
         def render_footer
-          div(class: "sticky bottom-[-2px] p-4 pb-6 w-full z-50 bg-gray-50 dark:bg-gray-900") {
+          div(class: "sticky dyna:static bottom-[-2px] mt-1 p-4 pb-6 w-full z-50 bg-gray-50 dark:bg-gray-900") {
             TableInfo(pagy_instance)
             TablePagination(pagy_instance)
           }

data/lib/plutonium/version.rb

@@ -1,5 +1,5 @@
 module Plutonium
-  VERSION = "0.15.6"
+  VERSION = "0.15.8"
   NEXT_MAJOR_VERSION = VERSION.split(".").tap { |v|
     v[1] = v[1].to_i + 1
     v[2] = 0

data/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@radioactive-labs/plutonium",
-      "version": "0.1.5",
+      "version": "0.1.6",
       "license": "MIT",
       "dependencies": {
         "@hotwired/stimulus": "^3.2.2",

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radioactive-labs/plutonium",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "Core assets for the Plutonium gem",
   "type": "module",
   "main": "src/js/core.js",

data/src/js/controllers/frame_navigator_controller.js

@@ -6,6 +6,7 @@ export default class extends Controller {
 
   connect() {
     console.log(`frame-navigator connected: ${this.element}`)
+    this.#loadingStarted()
 
     this.srcHistory = []
     this.originalFrameSrc = this.frameTarget.src
@@ -32,6 +33,9 @@ export default class extends Controller {
     this.frameLoading = this.frameLoading.bind(this);
     this.frameTarget.addEventListener("turbo:click", this.frameLoading);
     this.frameTarget.addEventListener("turbo:submit-start", this.frameLoading);
+
+    this.frameFailed = this.frameFailed.bind(this);
+    this.frameTarget.addEventListener("turbo:fetch-request-error", this.frameFailed);
   }
 
   disconnect() {
@@ -42,16 +46,19 @@ export default class extends Controller {
     this.frameTarget.removeEventListener("turbo:frame-load", this.frameLoaded);
     this.frameTarget.removeEventListener("turbo:click", this.frameLoading);
     this.frameTarget.removeEventListener("turbo:submit-start", this.frameLoading);
+    this.frameTarget.removeEventListener("turbo:fetch-request-error", this.frameFailed);
   }
 
   frameLoading(event) {
-    if (this.hasRefreshButtonTarget) this.refreshButtonTarget.classList.add("motion-safe:animate-spin")
-    this.frameTarget.classList.add("motion-safe:animate-pulse")
+    this.#loadingStarted()
+  }
+
+  frameFailed(event) {
+    this.#loadingStopped()
   }
 
   frameLoaded(event) {
-    if (this.hasRefreshButtonTarget) this.refreshButtonTarget.classList.remove("motion-safe:animate-spin")
-    this.frameTarget.classList.remove("motion-safe:animate-pulse")
+    this.#loadingStopped()
 
     let src = event.target.src
     if (src == this.currentSrc) {
@@ -63,7 +70,7 @@ export default class extends Controller {
     else
       this.srcHistory.push(src)
 
-    this.updateNavigationButtonsDisplay()
+    this.#updateNavigationButtonsDisplay()
   }
 
   refreshButtonClicked(event) {
@@ -87,13 +94,23 @@ export default class extends Controller {
 
   get currentSrc() { return this.srcHistory[this.srcHistory.length - 1] }
 
-  updateNavigationButtonsDisplay() {
+  #loadingStarted() {
+    if (this.hasRefreshButtonTarget) this.refreshButtonTarget.classList.add("motion-safe:animate-spin")
+    this.frameTarget.classList.add("motion-safe:animate-pulse")
+  }
+
+  #loadingStopped() {
+    if (this.hasRefreshButtonTarget) this.refreshButtonTarget.classList.remove("motion-safe:animate-spin")
+    this.frameTarget.classList.remove("motion-safe:animate-pulse")
+  }
+
+  #updateNavigationButtonsDisplay() {
     if (this.hasHomeButtonTarget) {
-      this.homeButtonTarget.style.display = this.srcHistory.length > 1 ? '' : 'none'
+      this.homeButtonTarget.style.display = this.srcHistory.length > 2 ? '' : 'none'
     }
 
     if (this.hasBackButtonTarget) {
-      this.backButtonTarget.style.display = this.srcHistory.length > 2 ? '' : 'none'
+      this.backButtonTarget.style.display = this.srcHistory.length > 1 ? '' : 'none'
     }
   }
 }

data/src/js/controllers/nested_resource_form_fields_controller.js

@@ -33,11 +33,11 @@ export default class extends Controller {
     e.preventDefault()
 
     const wrapper = e.target.closest(this.wrapperSelectorValue)
-
-    if (wrapper.dataset.newRecord === "true") {
+    if (wrapper.dataset.newRecord !== undefined) {
       wrapper.remove()
     } else {
       wrapper.style.display = "none"
+      wrapper.classList.remove(...wrapper.classList)
 
       const input = wrapper.querySelector("input[name*='_destroy']")
       input.value = "1"

data/tailwind.config.js

@@ -1,9 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 
+const tailwindPlugin = require('tailwindcss/plugin')
 const options = require("./tailwind.options.js")
 
 export const content = options.content
 export const darkMode = options.darkMode
-export const plugins = options.plugins.map((plugin) => require(plugin))
+export const plugins = options.plugins.map(function (plugin) {
+  switch (typeof plugin) {
+    case "function":
+      return tailwindPlugin(plugin)
+    case "string":
+      return require(plugin)
+    default:
+      throw Error(`unsupported plugin: ${plugin}: ${(typeof plugin)}`)
+  }
+})
 export const theme = options.theme
 export const safelist = options.safelist