plutonium 0.14.0 → 0.15.0.pre.rc1

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

@@ -0,0 +1,75 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      class Resource < Base
+        attr_reader :resource_fields, :resource_definition
+
+        def initialize(*, resource_fields:, resource_definition:, **, &)
+          super(*, **, &)
+          @resource_fields = resource_fields
+          @resource_definition = resource_definition
+        end
+
+        def form_template
+          render_fields
+          render_actions
+        end
+
+        private
+
+        def render_fields
+          fields_wrapper {
+            resource_fields.each { |name|
+              render_resource_field name
+            }
+          }
+        end
+
+        def form_action
+          return @form_action unless object.present? && @form_action != false && helpers.present?
+
+          @form_action ||= resource_url_for(object, action: object.new_record? ? :create : :update)
+        end
+
+        def render_resource_field(name)
+          # input :name, as: :string
+          # input :description, class: "col-span-full"
+          # input :age, field: {class: "max-h-fit"}
+          # input :dob do |f|
+          #   f.date_tag
+          # end
+
+          when_permitted(name) do
+            input_definition = resource_definition.defined_inputs[name] || {}
+            input_options = input_definition[:options] || {}
+            input_field_as = input_options.delete(:as)
+
+            input_field_options = input_options.delete(:field) || {}
+            input_block = input_definition[:block] || ->(f) {
+              input_field_as ||= f.inferred_field_component
+              f.send(:"#{input_field_as}_tag", **input_field_options)
+            }
+
+            field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options] : {}
+            if !input_options[:class] || !input_options[:class].include?("col-span")
+              # temp hack to allow col span overrides
+              # TODO: remove once we complete theming, which will support merges
+              input_options[:class] = tokens("col-span-full", input_options[:class])
+            end
+            render field(name, **field_options).wrapped(**input_options) do |f|
+              render input_block.call(f)
+            end
+          end
+        end
+
+        def when_permitted(name, &)
+          return unless @resource_fields.include? name
+
+          yield
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      class Theme < Phlexi::Form::Theme
+        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",
+            actions_wrapper: "flex justify-end space-x-2",
+            wrapper: nil,
+            inner_wrapper: "w-full",
+            # label themes
+            label: "mt-2 block mb-2 text-base font-bold",
+            invalid_label: "text-red-700 dark:text-red-500",
+            valid_label: "text-green-700 dark:text-green-500",
+            neutral_label: "text-gray-500 dark:text-gray-400",
+            # input themes
+            input: "w-full p-2 border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700",
+            invalid_input: "bg-red-50 border-red-500 dark:border-red-500 text-red-900 dark:text-red-500 placeholder-red-700 dark:placeholder-red-500 focus:ring-red-500 focus:border-red-500",
+            valid_input: "bg-green-50 border-green-500 dark:border-green-500 text-green-900 dark:text-green-400 placeholder-green-700 dark:placeholder-green-500 focus:ring-green-500 focus:border-green-500",
+            neutral_input: "border-gray-300 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white focus:ring-primary-500 focus:border-primary-500",
+            # color
+            color: "pu-color-input appearance-none bg-transparent border-none cursor-pointer w-10 h-10",
+            invalid_color: nil,
+            valid_color: nil,
+            neutral_color: nil,
+            # file
+            file: "w-full border rounded-md shadow-sm font-medium text-sm dark:bg-gray-700 focus:outline-none",
+            # hint themes
+            hint: "mt-2 text-sm text-gray-500 dark:text-gray-200",
+            # error themes
+            error: "mt-2 text-sm text-red-600 dark:text-red-500",
+            # button themes
+            button: "px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500"
+          })
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/page/base.rb

@@ -0,0 +1,112 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Page
+      class Base < Plutonium::UI::Component::Base
+        def initialize(page_title: nil, page_description: nil, page_actions: nil)
+          @page_title = page_title
+          @page_description = page_description
+          @page_actions = page_actions
+        end
+
+        def view_template(&)
+          render_before_header
+          render_header
+          render_after_header
+
+          render_before_content
+          render_content(&)
+          render_after_content
+
+          render_before_footer
+          render_footer
+          render_after_footer
+        end
+
+        private
+
+        attr_reader :page_title, :page_description, :page_actions
+
+        def render_header
+          render_before_breadcrumbs
+          render_breadcrumbs
+          render_after_breadcrumbs
+
+          render_before_page_header
+          render_page_header
+          render_after_page_header
+
+          render_before_toolbar
+          render_toolbar
+          render_after_toolbar
+        end
+
+        def render_breadcrumbs
+          Breadcrumbs()
+        end
+
+        def render_page_header
+          return unless page_title
+
+          PageHeader(title: page_title, description: page_description, actions: page_actions)
+        end
+
+        def render_toolbar
+          # Implement toolbar content
+        end
+
+        def render_content(&block)
+          block ||= proc { render_default_content }
+
+          DynaFrameContent(&block)
+        end
+
+        def render_default_content
+          raise NotImplementedError, "#{self.class}#render_default_content"
+        end
+
+        def render_footer
+          # Implement footer content
+        end
+
+        # Customization hooks
+        def render_before_header
+        end
+
+        def render_after_header
+        end
+
+        def render_before_breadcrumbs
+        end
+
+        def render_after_breadcrumbs
+        end
+
+        def render_before_page_header
+        end
+
+        def render_after_page_header
+        end
+
+        def render_before_toolbar
+        end
+
+        def render_after_toolbar
+        end
+
+        def render_before_content
+        end
+
+        def render_after_content
+        end
+
+        def render_before_footer
+        end
+
+        def render_after_footer
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/page/edit.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Page
+      class Edit < Base
+        private
+
+        def page_title
+          current_definition.edit_page_title || super || "Edit"
+        end
+
+        def page_description
+          current_definition.edit_page_description || super
+        end
+
+        def render_default_content
+          render "resource_form"
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/page/index.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Page
+      class Index < Base
+        private
+
+        def page_title
+          super || current_definition.index_page_title || resource_name_plural(resource_class)
+        end
+
+        def page_description
+          super || current_definition.index_page_description
+        end
+
+        def page_actions
+          super || current_definition.defined_actions.values.select { |a| a.resource_action? && a.permitted_by?(current_policy) }
+        end
+
+        def render_default_content
+          render "resource_table"
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/page/new.rb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Page
+      class New < Base
+        private
+
+        def page_title
+          current_definition.new_page_title || super || "New"
+        end
+
+        def page_description
+          current_definition.new_page_description || super
+        end
+
+        def render_default_content
+          render "resource_form"
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/page/show.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Page
+      class Show < Base
+        private
+
+        def page_title
+          current_definition.show_page_title || super || display_name_of(resource_record)
+        end
+
+        def page_description
+          current_definition.show_page_description || super
+        end
+
+        def page_actions
+          super || current_definition.defined_actions.values.select { |a| a.record_action? && a.permitted_by?(current_policy) }
+        end
+
+        def render_default_content
+          render "resource_details"
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/page_header.rb

@@ -0,0 +1,49 @@
+module Plutonium
+  module UI
+    class PageHeader < Plutonium::UI::Component::Base
+      def initialize(title:, description:, actions:)
+        @title = title
+        @description = description
+        @actions = actions || []
+      end
+
+      def view_template
+        div(class: "sm:flex sm:space-y-0 sm:space-x-4 sm:flex-row items-center justify-between space-y-3 mb-6") {
+          div {
+            phlexi_render(@title) {
+              render_title @title
+            }
+
+            phlexi_render(@description) {
+              render_description @description
+            }
+          }
+          div(class: "flex flex-row space-x-2") {
+            render_actions
+          }
+        }
+      end
+
+      private
+
+      def render_title(title)
+        h2(class: "mb-2 text-3xl font-extrabold leading-none tracking-tight text-gray-900 md:text-4xl dark:text-white") {
+          title
+        }
+      end
+
+      def render_description(description)
+        p(class: "text-gray-500 dark:text-gray-400") {
+          description
+        }
+      end
+
+      def render_actions
+        @actions.each do |action|
+          url = resource_url_for(resource_record || resource_class, *action.route_options.url_args, **action.route_options.url_options)
+          ActionButton(action, url:)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      class Base < Phlexi::Table::Base
+        include Plutonium::UI::Component::Behaviour
+
+        class Display < Plutonium::UI::Display::Base; end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/pagy_info.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        class PagyInfo < Plutonium::UI::Component::Base
+          include Pagy::Frontend
+
+          def initialize(pagy, per_page_options: [5, 10, 20, 50, 100])
+            @pagy = pagy
+            @per_page_options = (per_page_options + [@pagy.limit]).uniq.sort
+          end
+
+          def view_template
+            div(class: "flex flex-col md:flex-row justify-between items-center text-sm text-gray-500 dark:text-gray-400") do
+              results_info
+              per_page_selector
+            end
+          end
+
+          private
+
+          def results_info
+            div do
+              plain "Showing "
+              b { @pagy.from.to_s }
+              plain " to "
+              b { @pagy.to.to_s }
+              plain " of "
+              b { @pagy.count }
+              plain " results"
+            end
+          end
+
+          def per_page_selector
+            original_attributes = Phlex::HTML::EVENT_ATTRIBUTES
+            temp_attributes = Phlex::HTML::EVENT_ATTRIBUTES.dup
+            temp_attributes.delete("onchange")
+            Phlex::HTML.const_set(:EVENT_ATTRIBUTES, temp_attributes)
+
+            div(class: "flex items-center space-x-2 mt-2 md:mt-0") do
+              label(for: "perPage", class: "mr-2") { "Per page" }
+              select(id: "perPage", name: "items", class: select_classes, onchange: "window.location.href=this.value") do
+                @per_page_options.each do |option|
+                  option(value: page_url(option), selected: option == @pagy.limit) { option.to_s }
+                end
+              end
+            end
+          ensure
+            # TODO: remove this once Phlex adds support for SafeValues
+            Phlex::HTML.const_set(:EVENT_ATTRIBUTES, original_attributes)
+          end
+
+          def select_classes
+            "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          end
+
+          def page_url(limit)
+            original_limit = @pagy.vars[:limit]
+            @pagy.vars[:limit] = limit
+            pagy_url_for(@pagy, @pagy.page)
+          ensure
+            @pagy.vars[:limit] = original_limit
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/pagy_page_info.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        class PagyPageInfo < Plutonium::UI::Component::Base
+          include Pagy::Frontend
+
+          def initialize(pagy, per_page_options: [5, 10, 20, 50, 100])
+            @pagy = pagy
+            @per_page_options = (per_page_options + [@pagy.limit]).uniq.sort
+          end
+
+          def view_template
+            div(class: "flex flex-col md:flex-row justify-between items-center text-sm text-gray-500 dark:text-gray-400") do
+              results_info
+              per_page_selector
+            end
+          end
+
+          private
+
+          def results_info
+            div do
+              plain "Showing "
+              b { @pagy.from.to_s }
+              plain " to "
+              b { @pagy.to.to_s }
+              plain " of "
+              b { @pagy.count }
+              plain " results"
+            end
+          end
+
+          def per_page_selector
+            original_attributes = Phlex::HTML::EVENT_ATTRIBUTES
+            temp_attributes = Phlex::HTML::EVENT_ATTRIBUTES.dup
+            temp_attributes.delete("onchange")
+            Phlex::HTML.const_set(:EVENT_ATTRIBUTES, temp_attributes)
+
+            div(class: "flex items-center space-x-2 mt-2 md:mt-0") do
+              label(for: "perPage", class: "mr-2") { "Per page" }
+              select(id: "perPage", name: "items", class: select_classes, onchange: "window.location.href=this.value") do
+                @per_page_options.each do |option|
+                  option(value: page_url(option), selected: option == @pagy.limit) { option.to_s }
+                end
+              end
+            end
+          ensure
+            # TODO: remove this once Phlex adds support for SafeValues
+            Phlex::HTML.const_set(:EVENT_ATTRIBUTES, original_attributes)
+          end
+
+          def select_classes
+            "bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+          end
+
+          def page_url(limit)
+            original_limit = @pagy.vars[:limit]
+            @pagy.vars[:limit] = limit
+            pagy_url_for(@pagy, @pagy.page)
+          ensure
+            @pagy.vars[:limit] = original_limit
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/table/components/pagy_pagination.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Table
+      module Components
+        class PagyPagination < Plutonium::UI::Component::Base
+          include Pagy::Frontend
+
+          def initialize(pagy)
+            @pagy = pagy
+          end
+
+          def view_template
+            nav(aria_label: "Page navigation", class: "flex justify-center mt-4") do
+              ul(class: "inline-flex -space-x-px text-sm") do
+                prev_link
+                page_links
+                next_link
+              end
+            end
+          end
+
+          private
+
+          def prev_link
+            li do
+              if @pagy.prev
+                a(href: page_url(@pagy.prev), class: link_classes(true)) {
+                  render Phlex::TablerIcons::ChevronLeft.new
+                }
+              else
+                a(href: "#", class: disabled_link_classes(true), aria_disabled: "true") {
+                  render Phlex::TablerIcons::ChevronLeft.new
+                }
+              end
+            end
+          end
+
+          def next_link
+            li do
+              if @pagy.next
+                a(href: page_url(@pagy.next), class: link_classes(false, true)) {
+                  render Phlex::TablerIcons::ChevronRight.new
+                }
+              else
+                a(href: "#", class: disabled_link_classes(false, true), aria_disabled: "true") {
+                  render Phlex::TablerIcons::ChevronRight.new
+                }
+              end
+            end
+          end
+
+          def page_links
+            @pagy.series.each do |item|
+              li do
+                case item
+                when Integer
+                  page_link(item)
+                when String
+                  current_page_link(item)
+                when :gap
+                  gap_link
+                end
+              end
+            end
+          end
+
+          def page_link(page)
+            a(href: page_url(page), class: link_classes) { page.to_s }
+          end
+
+          def current_page_link(page)
+            a(href: "#", class: current_link_classes, aria_current: "page") { page.to_s }
+          end
+
+          def gap_link
+            a(href: "#", class: link_classes, aria_disabled: "true") { "..." }
+          end
+
+          def link_classes(first = false, last = false)
+            classes = ["flex", "items-center", "justify-center", "px-3", "h-8", "leading-tight", "text-gray-500", "bg-white", "border", "border-gray-300", "hover:bg-gray-100", "hover:text-gray-700", "dark:bg-gray-800", "dark:border-gray-700", "dark:text-gray-400", "dark:hover:bg-gray-700", "dark:hover:text-white"]
+            classes << "rounded-s-lg" if first
+            classes << "rounded-e-lg" if last
+            classes.join(" ")
+          end
+
+          def current_link_classes
+            "flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
+          end
+
+          def disabled_link_classes(first = false, last = false)
+            classes = link_classes(first, last).split
+            classes << "opacity-50" << "cursor-not-allowed"
+            classes.join(" ")
+          end
+
+          def page_url(page)
+            pagy_url_for(@pagy, page)
+          end
+        end
+      end
+    end
+  end
+end