plutonium 0.14.0 → 0.15.0.pre.rc1

data/lib/plutonium/ui/action_button.rb

@@ -0,0 +1,125 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    class ActionButton < Plutonium::UI::Component::Base
+      include Phlex::Rails::Helpers::LinkTo
+      include Phlex::Rails::Helpers::ButtonTo
+
+      def initialize(action, url:, variant: :default)
+        @action = action
+        @url = url
+        @variant = variant
+      end
+
+      def view_template
+        if @action.route_options.method == :get
+          render_link
+        else
+          render_button
+        end
+      end
+
+      private
+
+      def render_link
+        link_to(
+          @url,
+          class: button_classes,
+          data: {turbo_frame: @action.turbo_frame}
+        ) do
+          render_button_content
+        end
+      end
+
+      def render_button
+        button_to(
+          @url,
+          method: @action.route_options.method,
+          name: :return_to, value: request.original_url,
+          class: "inline-block",
+          form: {
+            data: {
+              turbo_confirm: @action.confirmation,
+              turbo_frame: @action.turbo_frame
+            }
+          }
+        ) do
+          span(class: button_classes) do
+            render_button_content
+          end
+        end
+      end
+
+      def render_button_content
+        if @action.icon
+          render @action.icon.new(class: icon_classes)
+        end
+        span { @action.label } unless @variant == :table
+      end
+
+      def button_classes
+        tokens(
+          base_classes,
+          color_classes,
+          size_classes,
+          -> { @action.icon && @variant != :table } => "space-x-1"
+        )
+      end
+
+      def base_classes
+        if @variant == :table
+          "inline-flex items-center justify-center p-1 rounded-lg focus:outline-none focus:ring-2"
+        else
+          "flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg focus:outline-none focus:ring-4"
+        end
+      end
+
+      def icon_classes
+        if @variant == :table
+          "h-4 w-4"
+        else
+          "h-3.5 w-3.5 mr-2 -ml-1"
+        end
+      end
+
+      def size_classes
+        (@variant == :table) ? "text-xs" : "text-sm"
+      end
+
+      def color_classes
+        case @action.color || @action.category.to_sym
+        when :primary
+          table_variant_class(
+            "bg-primary-100 text-primary-700 hover:bg-primary-200 focus:ring-primary-300 dark:bg-primary-700 dark:text-primary-100 dark:hover:bg-primary-600 dark:focus:ring-primary-600",
+            "bg-primary-700 text-white hover:bg-primary-800 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+          )
+        when :warning
+          table_variant_class(
+            "bg-yellow-100 text-yellow-700 hover:bg-yellow-200 focus:ring-yellow-300 dark:bg-yellow-700 dark:text-yellow-100 dark:hover:bg-yellow-600 dark:focus:ring-yellow-600",
+            "bg-yellow-400 text-white hover:bg-yellow-500 focus:ring-yellow-300 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:focus:ring-yellow-800"
+          )
+        when :danger
+          table_variant_class(
+            "bg-red-100 text-red-700 hover:bg-red-200 focus:ring-red-300 dark:bg-red-700 dark:text-red-100 dark:hover:bg-red-600 dark:focus:ring-red-600",
+            "bg-red-700 text-white hover:bg-red-800 focus:ring-red-300 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
+          )
+        when :success
+          table_variant_class(
+            "bg-green-100 text-green-700 hover:bg-green-200 focus:ring-green-300 dark:bg-green-700 dark:text-green-100 dark:hover:bg-green-600 dark:focus:ring-green-600",
+            "bg-green-700 text-white hover:bg-green-800 focus:ring-green-300 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
+          )
+        else
+          table_variant_class(
+            "bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 dark:focus:ring-gray-600",
+            "border border-gray-200 bg-white text-gray-900 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+          )
+        end
+      end
+
+      def table_variant_class(table_class, default_class)
+        (@variant == :table) ? table_class : default_class
+      end
+    end
+  end
+end

data/lib/plutonium/ui/breadcrumbs.rb

@@ -0,0 +1,163 @@
+module Plutonium
+  module UI
+    class Breadcrumbs < Plutonium::UI::Component::Base
+      include Phlex::Rails::Helpers::ActionName
+      include Phlex::Rails::Helpers::LinkTo
+
+      def view_template
+        nav(
+          class:
+            "flex py-3 text-gray-700 mb-2",
+          aria_label: "Breadcrumb"
+        ) do
+          ol(
+            class:
+              "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse"
+          ) do
+            # Dashboard
+            li(class: "inline-flex items-center") do
+              a(
+                href: helpers.root_path,
+                class:
+                  "inline-flex items-center text-sm font-medium text-gray-700 hover:text-primary-600 dark:text-gray-200 dark:hover:text-white"
+              ) do
+                svg(
+                  class: "w-3 h-3 me-2.5",
+                  aria_hidden: "true",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "currentColor",
+                  viewbox: "0 0 20 20"
+                ) do |s|
+                  s.path(
+                    d:
+                      "m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
+                  )
+                end
+                plain " Dashboard "
+              end
+            end
+
+            # Parent
+            if current_parent.present?
+              # Parent Resource
+              li(class: "flex items-center") do
+                svg(
+                  class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
+                  aria_hidden: "true",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewbox: "0 0 6 10"
+                ) do |s|
+                  s.path(
+                    stroke: "currentColor",
+                    stroke_linecap: "round",
+                    stroke_linejoin: "round",
+                    stroke_width: "2",
+                    d: "m1 9 4-4-4-4"
+                  )
+                end
+                link_to resource_name_plural(current_parent.class),
+                  resource_url_for(current_parent.class, parent: nil),
+                  class:
+                    "ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white"
+              end
+
+              # Parent Itself
+              li(class: "flex items-center") do
+                svg(
+                  class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
+                  aria_hidden: "true",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewbox: "0 0 6 10"
+                ) do |s|
+                  s.path(
+                    stroke: "currentColor",
+                    stroke_linecap: "round",
+                    stroke_linejoin: "round",
+                    stroke_width: "2",
+                    d: "m1 9 4-4-4-4"
+                  )
+                end
+                link_to display_name_of(current_parent),
+                  resource_url_for(current_parent, parent: nil),
+                  class:
+                    "ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white"
+              end
+            end
+
+            # Record
+            if resource_record.present?
+              # Record Resource
+              li(class: "flex items-center") do
+                svg(
+                  class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
+                  aria_hidden: "true",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  fill: "none",
+                  viewbox: "0 0 6 10"
+                ) do |s|
+                  s.path(
+                    stroke: "currentColor",
+                    stroke_linecap: "round",
+                    stroke_linejoin: "round",
+                    stroke_width: "2",
+                    d: "m1 9 4-4-4-4"
+                  )
+                end
+                link_to resource_name_plural(resource_class),
+                  resource_url_for(resource_class),
+                  class:
+                    "ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white"
+              end
+
+              # Record Itself
+              if resource_record.persisted? && action_name != "show"
+                li(class: "flex items-center") do
+                  svg(
+                    class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
+                    aria_hidden: "true",
+                    xmlns: "http://www.w3.org/2000/svg",
+                    fill: "none",
+                    viewbox: "0 0 6 10"
+                  ) do |s|
+                    s.path(
+                      stroke: "currentColor",
+                      stroke_linecap: "round",
+                      stroke_linejoin: "round",
+                      stroke_width: "2",
+                      d: "m1 9 4-4-4-4"
+                    )
+                  end
+                  link_to display_name_of(resource_record),
+                    resource_url_for(resource_record),
+                    class:
+                      "ms-1 text-sm font-medium text-gray-700 hover:text-primary-600 md:ms-2 dark:text-gray-200 dark:hover:text-white"
+                end
+              end
+            end
+
+            # Trailing Caret
+            li(class: "flex items-center") do
+              svg(
+                class: "rtl:rotate-180 block w-3 h-3 mx-1 text-gray-400",
+                aria_hidden: "true",
+                xmlns: "http://www.w3.org/2000/svg",
+                fill: "none",
+                viewbox: "0 0 6 10"
+              ) do |s|
+                s.path(
+                  stroke: "currentColor",
+                  stroke_linecap: "round",
+                  stroke_linejoin: "round",
+                  stroke_width: "2",
+                  d: "m1 9 4-4-4-4"
+                )
+              end
+            end
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+require "phlex"
+
+module Plutonium
+  module UI
+    module Component
+      class Base < (defined?(::ApplicationComponent) ? ::ApplicationComponent : Phlex::HTML)
+        include Plutonium::UI::Component::Behaviour
+      end
+    end
+  end
+end

data/lib/plutonium/ui/component/behaviour.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Component
+      module Behaviour
+        extend ActiveSupport::Concern
+        include Methods
+        include Kit
+
+        if Rails.env.development?
+          def around_template(&)
+            comment { "open:#{self.class.name}" }
+            super
+            comment { "close:#{self.class.name}" }
+          end
+        end
+
+        protected
+
+        def phlexi_render(arg, &)
+          return unless arg
+          raise ArgumentError, "phlexi_render requires a default render block" unless block_given?
+
+          # Handle Phlex components or Rails Renderables
+          if arg.class < Phlex::SGML || arg.respond_to?(:render_in)
+            render arg
+          # Handle procs
+          elsif arg.respond_to?(:to_proc)
+            instance_exec(&arg)
+          else
+            yield
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/component/kit.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+require "phlex"
+
+module Plutonium
+  module UI
+    module Component
+      module Kit
+        extend ActiveSupport::Concern
+
+        def Breadcrumbs(...) = render Plutonium::UI::Breadcrumbs.new(...)
+
+        def DynaFrameContent(...) = render Plutonium::UI::DynaFrame::Content.new(...)
+
+        def PageHeader(...) = render Plutonium::UI::PageHeader.new(...)
+
+        def ActionButton(...) = render Plutonium::UI::ActionButton.new(...)
+
+        def EmptyCard(...) = render Plutonium::UI::EmptyCard.new(...)
+
+        def TableSearchBar(...) = render Plutonium::UI::Table::Components::SearchBar.new(...)
+
+        def TableScopesBar(...) = render Plutonium::UI::Table::Components::ScopesBar.new(...)
+
+        def TableInfo(...) = render Plutonium::UI::Table::Components::PagyInfo.new(...)
+
+        def TablePagination(...) = render Plutonium::UI::Table::Components::PagyPagination.new(...)
+      end
+    end
+  end
+end

data/lib/plutonium/ui/component/methods.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+require "phlex"
+
+module Plutonium
+  module UI
+    module Component
+      module Methods
+        extend ActiveSupport::Concern
+
+        private
+
+        def resource_class
+          helpers.controller.send(:resource_class)
+        end
+
+        def resource_record
+          helpers.controller.send(:resource_record)
+        end
+
+        def current_parent
+          helpers.controller.send(:current_parent)
+        end
+
+        def params
+          helpers.controller.params
+        end
+
+        def request
+          helpers.controller.request
+        end
+
+        def pagy_instance
+          helpers.controller.instance_variable_get(:@pagy)
+        end
+
+        delegate \
+          :resource_name,
+          :resource_name_plural,
+          :display_name_of,
+          :resource_url_for,
+          :current_definition,
+          :current_query_object,
+          :resource_query_params,
+          :current_policy,
+          :current_turbo_frame,
+          :policy_for,
+          :allowed_to?,
+          :registered_resources,
+          to: :helpers
+      end
+    end
+  end
+end

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

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      class Base < Phlexi::Display::Base
+        include Plutonium::UI::Component::Behaviour
+
+        class Builder < Builder
+          def association_tag(**, &)
+            create_component(Plutonium::UI::Display::Component::Association, :association, **, &)
+          end
+        end
+
+        private
+
+        def fields_wrapper(&)
+          div(class: themed(:fields_wrapper)) {
+            yield
+          }
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/display/component/association.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      module Component
+        class Association < Phlexi::Display::Components::Association
+          include Plutonium::UI::Component::Methods
+
+          def render_value(value)
+            p(**attributes) {
+              if registered_resources.include?(value.class)
+                href = resource_url_for(value, parent: (field.association_reflection.macro == :has_many) ? field.object : nil)
+                a(class: themed(:link), href:) {
+                  display_name_of value
+                }
+              else
+                display_name_of value
+              end
+            }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,77 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      class Resource < Base
+        attr_reader :resource_fields, :resource_associations, :resource_definition
+
+        def initialize(*, resource_fields:, resource_associations:, resource_definition:, **, &)
+          super(*, **, &)
+          @resource_fields = resource_fields
+          @resource_associations = resource_associations
+          @resource_definition = resource_definition
+        end
+
+        def display_template
+          render_fields
+          render_associations if present_associations?
+        end
+
+        private
+
+        def render_fields
+          fields_wrapper {
+            resource_fields.each { |name|
+              render_resource_field name
+            }
+          }
+        end
+
+        def render_associations
+          nil
+          # TODO
+          # resource_associations.each do |name, renderer|
+          #   #     <%= render renderer.with(record: details.record) %>
+          # end
+        end
+
+        def render_resource_field(name)
+          # display :name, as: :string
+          # display :description, class: "col-span-full"
+          # display :age, field: {class: "max-h-fit"}
+          # display :dob do |f|
+          #   f.date_tag
+          # end
+
+          when_permitted(name) do
+            display_definition = resource_definition.defined_displays[name] || {}
+            display_options = display_definition[:options] || {}
+            display_field_as = display_options.delete(:as)
+
+            display_field_options = display_options.delete(:field) || {}
+            display_block = display_definition[:block] || ->(f) {
+              display_field_as ||= f.inferred_field_component
+              f.send(:"#{display_field_as}_tag", **display_field_options)
+            }
+
+            field_options = resource_definition.defined_fields[name] ? resource_definition.defined_fields[name][:options] : {}
+            render field(name, **field_options).wrapped(**display_options) do |f|
+              render display_block.call(f)
+            end
+          end
+        end
+
+        def when_permitted(name, &)
+          return unless @resource_fields.include? name
+
+          yield
+        end
+
+        def present_associations?
+          current_parent.nil?
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Display
+      class Theme < Phlexi::Display::Theme
+        def self.theme
+          super.merge({
+            base: "relative bg-white dark:bg-gray-800 shadow-md sm:rounded-lg my-3",
+            fields_wrapper: "p-6 grid grid-cols-1 md:grid-cols-2 2xl:grid-cols-4 gap-6 gap-y-10 grid-flow-row-dense",
+            label: "text-base font-bold text-gray-500 dark:text-gray-400 mb-1",
+            description: "text-sm text-gray-400 dark:text-gray-500",
+            placeholder: "text-md text-gray-500 dark:text-gray-300 mb-1 italic",
+            string: "max-h-[300px] overflow-y-auto text-md text-gray-900 dark:text-white mb-1 whitespace-pre-line",
+            text: "max-h-[300px] overflow-y-auto text-md text-gray-900 dark:text-white mb-1 whitespace-pre-line",
+            link: "text-primary-600 dark:text-primary-500 whitespace-pre-line",
+            color: "flex items-center text-md text-gray-900 dark:text-white mb-1 whitespace-pre-line",
+            color_indicator: "w-10 h-10 rounded-full mr-2", # max-h-fit
+            email: "flex items-center text-md text-primary-600 dark:text-primary-500 mb-1 whitespace-pre-line",
+            json: "max-h-[300px] overflow-y-auto text-sm text-gray-900 dark:text-white mb-1 whitespace-pre font-mono shadow-inner p-4",
+            prefixed_icon: "w-8 h-8 mr-2"
+          })
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/dyna_frame/content.rb

@@ -0,0 +1,20 @@
+module Plutonium
+  module UI
+    module DynaFrame
+      class Content < Plutonium::UI::Component::Base
+        include Phlex::Rails::Helpers::TurboFrameTag
+
+        def view_template
+          if current_turbo_frame.present?
+            render turbo_frame_tag(current_turbo_frame) {
+              render "flash"
+              yield
+            }
+          else
+            yield
+          end
+        end
+      end
+    end
+  end
+end

data/lib/plutonium/ui/empty_card.rb

@@ -0,0 +1,20 @@
+module Plutonium
+  module UI
+    class EmptyCard < Plutonium::UI::Component::Base
+      attr_accessor :message
+
+      def initialize(message)
+        @message = message
+      end
+
+      def view_template
+        div(class: "relative bg-white dark:bg-gray-800 shadow-md") do
+          div(class: "p-6 flex items-center flex-col gap-2") do
+            p(class: "text-gray-500 sm:text-lg dark:text-gray-200 text-center") { message }
+            yield if block_given?
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Plutonium
+  module UI
+    module Form
+      class Base < Phlexi::Form::Base
+        include Plutonium::UI::Component::Behaviour
+
+        private
+
+        def render_actions
+          actions_wrapper {
+            render submit_button
+          }
+        end
+
+        def fields_wrapper(&)
+          div(class: themed(:fields_wrapper, nil)) {
+            yield
+          }
+        end
+
+        def actions_wrapper(&)
+          div(class: themed(:actions_wrapper, nil)) {
+            yield
+          }
+        end
+
+        def form_action
+          return @form_action unless object.present? && @form_action != false && helpers.present?
+
+          @form_action ||= url_for(object, action: object.new_record? ? :create : :update)
+        end
+      end
+    end
+  end
+end