katalyst-kpop 2.0.9 → 3.0.0.beta.1

data/app/assets/config/kpop.js

@@ -1 +1 @@
-//= link_tree ../javascripts/controllers
+//= link_tree ../builds

data/app/assets/stylesheets/katalyst/kpop/_frame.scss

@@ -0,0 +1,104 @@
+@use "variables" as *;
+
+.kpop--container {
+  display: none;
+
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+
+  align-items: center;
+  z-index: 100;
+  pointer-events: none;
+
+  > * {
+    pointer-events: auto;
+  }
+}
+
+.kpop--frame {
+  --opening-animation: slide-in-up;
+  --closing-animation: slide-out-down;
+
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  margin: 0 auto;
+
+  --min-width: #{$min-width};
+  --max-width: #{$max-width};
+  --min-height: #{$min-height};
+  --max-height: #{$max-height};
+
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  min-height: var(--min-height);
+  max-height: var(--max-height);
+
+  grid-template-columns: min(var(--max-width), max(var(--min-width), 100%));
+  grid-template-rows: min(var(--max-height), max(var(--min-height), 100%));
+}
+
+@media (max-width: $mobile-width), (max-height: $mobile-height) {
+  .kpop--frame {
+    --min-width: 100vw;
+    --max-width: 100vw;
+    --min-height: 50vh;
+    --max-height: calc(100vh - 1.5rem);
+  }
+}
+
+.scrim[data-scrim-open-value="false"] + .kpop--container .kpop--frame {
+  display: none;
+}
+
+.scrim[data-hide-animating]
+  + .kpop--container
+  .kpop--frame[data-kpop--frame-open-value="true"] {
+  animation: var(--closing-animation);
+  animation-duration: $duration;
+  animation-fill-mode: forwards;
+}
+
+.scrim[data-show-animating] + .kpop--container .kpop--frame {
+  animation: var(--opening-animation);
+  animation-duration: $duration;
+  animation-fill-mode: forwards;
+}
+
+.kpop-modal.iframe {
+  .kpop-content {
+    overflow: unset;
+  }
+
+  iframe {
+    height: $max-height;
+    width: $max-width;
+    flex-grow: 1;
+    overflow: scroll;
+  }
+}
+
+@keyframes slide-in-up {
+  0% {
+    transform: translateY(10%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+}
+
+@keyframes slide-out-down {
+  0% {
+    transform: translateY(0%);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(10%);
+    opacity: 0;
+  }
+}

data/app/assets/stylesheets/katalyst/kpop/_modal.scss

@@ -0,0 +1,95 @@
+@use "variables" as *;
+
+.kpop-modal {
+  display: grid;
+  grid-template-areas:
+    "title-bar"
+    "header"
+    "content"
+    "footer";
+  grid-template-rows: auto auto 1fr auto;
+
+  background-color: white;
+  border: 1px solid black;
+  border-radius: $border-radius;
+}
+
+.kpop-title-bar {
+  grid-area: title-bar;
+  display: flex;
+  background: $title-background-color;
+  color: $title-text-color;
+
+  .kpop-title {
+    padding: $default-padding;
+    flex-grow: 1;
+  }
+
+  .kpop-close {
+    background: none;
+    border: none;
+    color: $title-text-color;
+    cursor: pointer;
+    display: block;
+    font-size: 2rem;
+    font-weight: bold;
+    padding: 0 0.75rem;
+    text-decoration: none;
+  }
+}
+
+.kpop-header {
+  grid-area: header;
+}
+
+.kpop-content {
+  grid-area: content;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+}
+
+.kpop-footer {
+  grid-area: footer;
+  background: white;
+  border-top: 1px solid black;
+  padding: $default-padding;
+}
+
+.kpop-buttons {
+  display: flex;
+  gap: 0.5rem;
+  justify-content: space-between;
+}
+
+.kpop-modal.iframe {
+  .kpop-content {
+    overflow: unset;
+  }
+
+  iframe {
+    height: $max-height;
+    width: $max-width;
+    flex-grow: 1;
+    overflow: scroll;
+  }
+}
+
+@include mobile {
+  .kpop-modal {
+    border-radius: 0;
+    border: none;
+  }
+
+  .kpop-modal.iframe {
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .kpop-buttons {
+    flex-direction: column-reverse;
+    text-align: center;
+  }
+}

data/app/assets/stylesheets/katalyst/kpop/_scrim.scss

@@ -1,16 +1,46 @@
+@use "variables" as *;
+
 .scrim {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
-  background: rgba(0, 0, 0, 0.6);
+  background: $scrim-background;
   z-index: -1;
-  transition: opacity 0.2s ease-in-out, z-index 0.2s step-end;
   opacity: 0;
+
+  &[data-hide-animating] {
+    animation: fade-out;
+    animation-duration: $duration;
+    animation-fill-mode: forwards;
+  }
+
+  &[data-show-animating] {
+    animation: fade-in;
+    animation-duration: $duration;
+    animation-fill-mode: forwards;
+  }
 }
 
 .scrim[data-scrim-open-value="true"] {
   opacity: 1;
-  transition: opacity 0.2s ease-in-out, z-index 0.2s step-start;
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
 }

data/app/assets/stylesheets/katalyst/kpop/_side_panel.scss

@@ -0,0 +1,64 @@
+@use "variables" as *;
+
+.kpop--frame.side-panel {
+  --opening-animation: slide-in-right;
+  --closing-animation: slide-out-right;
+  --min-width: 30vw;
+  --max-width: 50vw;
+  --min-height: 100vh;
+  --max-height: 100vh;
+
+  margin-inline: auto 0;
+  align-self: flex-end;
+
+  @include mobile {
+    & {
+      --opening-animation: slide-in-bottom;
+      --closing-animation: slide-out-bottom;
+      --min-width: 100vw;
+      --max-width: 100vw;
+      --min-height: 50vh;
+      --max-height: calc(100vh - 1.5rem);
+    }
+  }
+
+  .kpop-modal {
+    border-radius: 0;
+  }
+}
+
+@keyframes slide-in-right {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slide-out-right {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slide-in-bottom {
+  0% {
+    transform: translateY(100%);
+  }
+  100% {
+    transform: translateY(0%);
+  }
+}
+
+@keyframes slide-out-bottom {
+  0% {
+    transform: translateY(0%);
+  }
+  100% {
+    transform: translateY(100%);
+  }
+}

data/app/assets/stylesheets/katalyst/kpop/_variables.scss

@@ -0,0 +1,25 @@
+// frame variables
+$min-width: 35rem !default;
+$max-width: 52rem !default;
+$min-height: 30vh !default;
+$max-height: 80vh !default;
+$duration: 0.2s !default;
+
+// breakpoints
+$mobile-width: 600px !default;
+$mobile-height: 400px !default;
+
+@mixin mobile {
+  @media (max-width: $mobile-width), (max-height: $mobile-height) {
+    @content;
+  }
+}
+
+// modal variables
+$border-radius: 0.5rem !default;
+$title-background-color: #344055 !default;
+$title-text-color: white !default;
+$default-padding: 1rem 1.5rem !default;
+
+// scrim variables
+$scrim-background: rgba(0, 0, 0, 0.6) !default;

data/app/assets/stylesheets/katalyst/kpop.scss

@@ -1 +1,6 @@
-@use "kpop/index";
+@forward "kpop/variables";
+
+@use "kpop/scrim";
+@use "kpop/frame";
+@use "kpop/side_panel";
+@use "kpop/modal";

data/app/components/concerns/kpop/has_html_attributes.rb

@@ -0,0 +1,78 @@
+# frozen_string_literal: true
+
+require "html_attributes_utils"
+
+module Kpop
+  # Adds HTML attributes to a component.
+  # Accepts HTML attributes from the constructor or via `html_attributes=`.
+  # These are merged with the default attributes defined in the component.
+  # Adds support for custom html attributes for other tags, e.g.:
+  #   define_html_attribute_methods :table_attributes, default: {}
+  #   tag.table(**table_attributes)
+  module HasHtmlAttributes
+    extend ActiveSupport::Concern
+
+    using HTMLAttributesUtils
+
+    MERGEABLE_ATTRIBUTES = [
+      *HTMLAttributesUtils::DEFAULT_MERGEABLE_ATTRIBUTES,
+      %i[data controller],
+      %i[data action],
+    ].freeze
+
+    FLATTENABLE_ATTRIBUTES = [
+      %i[data controller],
+      %i[data action],
+    ].freeze
+
+    refine NilClass do
+      def flatten_html(*)
+        self
+      end
+    end
+
+    refine Hash do
+      def merge_html(attributes)
+        result = deep_merge_html_attributes(attributes, mergeable_attributes: MERGEABLE_ATTRIBUTES)
+        FLATTENABLE_ATTRIBUTES.each_with_object(result) do |path, flattened|
+          flattened.flatten_html(*path)
+        end
+      end
+
+      def flatten_html(key, *path)
+        if path.empty?
+          self[key] = self[key].join(" ") if self[key].is_a?(Array)
+        else
+          self[key].flatten_html(*path)
+        end
+      end
+    end
+
+    class_methods do
+      using HasHtmlAttributes
+
+      def define_html_attribute_methods(name, default: {})
+        define_method("default_#{name}") { default }
+        private("default_#{name}")
+
+        define_method(name) do
+          send("default_#{name}").merge_html(instance_variable_get("@#{name}") || {})
+        end
+
+        define_method("#{name}=") do |options|
+          instance_variable_set("@#{name}", options.slice(:id, :aria, :class, :data).merge(options.fetch(:html, {})))
+        end
+      end
+    end
+
+    included do
+      define_html_attribute_methods :html_attributes, default: {}
+    end
+
+    def initialize(**options)
+      super(**options.except(:id, :aria, :class, :data, :html))
+
+      self.html_attributes = options
+    end
+  end
+end

data/app/components/kpop/frame_component.html.erb

@@ -0,0 +1,14 @@
+<div class="kpop--container">
+  <%= turbo_frame_tag(id, **html_attributes) do %>
+    <%= content %>
+    <% if flash[:kpop] %>
+      <%= tag.div("", data: {
+                    controller:                        "kpop--redirect",
+                    kpop__redirect_kpop__frame_outlet: "##{id}",
+                    kpop__redirect_path_value:         flash[:kpop],
+                    kpop__redirect_target_value:       id,
+                    turbo_temporary:                   "",
+                  }) %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/kpop/frame_component.rb

@@ -0,0 +1,45 @@
+# frozen_string_literal: true
+
+module Kpop
+  class FrameComponent < ViewComponent::Base
+    include HasHtmlAttributes
+    include Turbo::FramesHelper
+
+    attr_reader :id
+
+    ACTIONS = %w[
+      popstate@window->kpop--frame#popstate
+      scrim:dismiss@window->kpop--frame#dismiss
+      scrim:hide@window->kpop--frame#dismiss
+      turbo:before-frame-render->kpop--frame#beforeFrameRender
+      turbo:before-visit@window->kpop--frame#beforeVisit
+      turbo:frame-load->kpop--frame#frameLoad
+    ].freeze
+
+    def initialize(id: "kpop", scrim: "#scrim", **)
+      super
+
+      @id    = id
+      @scrim = scrim
+    end
+
+    def inspect
+      "#<#{self.class.name} id: #{id.inspect}>"
+    end
+
+    private
+
+    def default_html_attributes
+      {
+        class:  "kpop--frame",
+        data:   {
+          controller:                 "kpop--frame",
+          action:                     ACTIONS.join(" "),
+          "kpop--frame-scrim-outlet": @scrim,
+          turbo_action:               "advance",
+        },
+        target: "_top",
+      }
+    end
+  end
+end

data/app/components/kpop/modal/title_component.html.erb

@@ -0,0 +1,6 @@
+<%= tag.div(class: "kpop-title-bar", **html_attributes) do %>
+  <span class="kpop-title"><%= title %></span>
+  <% unless captive? %>
+    <button class="kpop-close" data-action="click->kpop--frame#dismiss:prevent">×</button>
+  <% end %>
+<% end %>

data/app/components/kpop/modal/title_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Kpop
+  module Modal
+    class TitleComponent < ViewComponent::Base
+      include HasHtmlAttributes
+
+      def initialize(title: nil, captive: false, **)
+        super
+
+        @title = title
+        @captive = captive
+      end
+
+      def title
+        content? ? content : @title
+      end
+
+      def captive?
+        @captive
+      end
+
+      def inspect
+        "#<#{self.class.name} title: #{title.inspect}>"
+      end
+    end
+  end
+end

data/app/components/kpop/modal_component.html.erb

@@ -0,0 +1,8 @@
+<%= tag.div(**html_attributes) do %>
+  <%= title if title? %>
+  <%= header if header? %>
+  <div class="kpop-content">
+    <%= content %>
+  </div>
+  <%= footer if footer? %>
+<% end %>

data/app/components/kpop/modal_component.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module Kpop
+  class ModalComponent < ViewComponent::Base
+    include HasHtmlAttributes
+
+    renders_one :title, "Kpop::Modal::TitleComponent"
+    renders_one :header
+    renders_one :footer
+
+    def initialize(title:, captive: false, fallback_location: nil, layout: nil, **)
+      super
+
+      @fallback_location = fallback_location
+      @layout            = layout
+
+      # Generate a title bar. This can be overridden by calling title_bar again.
+      with_title(title:, captive:) if title.present?
+    end
+
+    def inspect
+      "#<#{self.class.name} title: #{title.inspect}>"
+    end
+
+    private
+
+    def default_html_attributes
+      {
+        class: "kpop-modal",
+        data:  {
+          controller:                            "kpop--modal",
+          "kpop--modal-current-location-value":  request.path,
+          "kpop--modal-fallback-location-value": @fallback_location,
+          "kpop--modal-layout-value":            @layout&.to_s&.dasherize,
+        },
+      }
+    end
+  end
+end

data/app/components/scrim_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+class ScrimComponent < ViewComponent::Base
+  attr_reader :id, :z_index
+
+  ACTIONS = %w[
+    click->scrim#dismiss
+    keyup@window->scrim#escape
+  ].freeze
+
+  def initialize(id: "scrim", z_index: 40)
+    super
+
+    @id      = id
+    @z_index = z_index
+  end
+
+  def call
+    tag.div(id:,
+            class: "scrim",
+            data:  {
+              controller:          "scrim",
+              scrim_z_index_value: z_index,
+              turbo_permanent:     "",
+              action:              ACTIONS.join(" "),
+            })
+  end
+
+  def inspect
+    "#<#{self.class.name} id: #{id.inspect}>"
+  end
+end

data/app/helpers/kpop_helper.rb

@@ -1,55 +1,32 @@
 # frozen_string_literal: true
 
 module KpopHelper
-  # Render a modal dialog. Intended for use inside a kpop turbo frame tag.
-  # See builder for options.
-  def render_kpop(options = {}, &block)
-    Kpop::Modal.new(self).render(options, &block)
-  end
-
-  # Render a turbo stream action that will dismiss any open kpop modals.
-  def dismiss_kpop
-    turbo_stream.update("kpop", "")
-  end
-
-  # Render a turbo frame tag that can be targeted for rendering kpop modals.
-  def kpop_frame_tag(**html_attributes, &block)
-    html_attributes[:class]                  ||= "kpop-container"
-    html_attributes[:data]                   ||= {}
-    html_attributes[:data][:controller]      = "kpop"
-    html_attributes[:data][:action]          = "scrim:hide@window->kpop#dismiss"
-
-    turbo_frame_tag("kpop", **html_attributes) do
-      capture(&block) if block
-    end
-  end
+  using HTMLAttributesUtils
 
   # Renders a link that will navigate the kpop turbo frame to the given URL.
   # The URL should render a modal response inside a kpop frame tag.
-  def kpop_link_to(name = nil, options = nil, html_options = nil, &block)
-    default_html_options = {
-      data: { turbo: true, turbo_frame: "kpop" },
-    }
+  def kpop_link_to(name = nil, options = nil, html_attributes = nil, &block)
+    default_html_attributes = { data: { turbo_frame: "kpop" } }
     if block
       # Param[name] is the path for the link
-      link_to(name, default_html_options.deep_merge(options || {}), &block)
+      link_to(name, default_html_attributes.deep_merge_html_attributes(options || {}), &block)
     else
-      link_to(name, options, default_html_options.deep_merge(html_options || {}))
+      link_to(name, options, default_html_attributes.deep_merge_html_attributes(html_attributes || {}))
     end
   end
 
   # Renders a button that will navigate the kpop turbo frame to the given URL.
   # The URL should render a modal response inside a kpop frame tag.
-  def kpop_button_to(name = nil, options = nil, html_options = nil, &block)
-    default_html_options = {
-      form: { data: { turbo: true, turbo_frame: "kpop" } },
+  def kpop_button_to(name = nil, options = nil, html_attributes = nil, &)
+    default_html_attributes = {
+      form: { data: { turbo_frame: "kpop" } },
     }
-    button_to(name, options, default_html_options.deep_merge(html_options || {}), &block)
+    button_to(name, options, default_html_attributes.deep_merge_html_attributes(html_attributes || {}), &)
   end
 
   # Renders a button that will close the current kpop modal, if any.
-  def kpop_button_close(content = nil, **options, &block)
-    content = block ? capture(yield) : content
-    tag.button content, data: { action: "click->kpop#dismiss:prevent" }, **options
+  def kpop_button_close(content = nil, **, &block)
+    content = capture(yield) if block
+    tag.button(content, data: { action: "click->kpop--frame#dismiss:prevent" }, **)
   end
 end

data/app/javascript/kpop/application.js

@@ -0,0 +1,15 @@
+import CloseController from "../kpop/controllers/close_controller";
+import FrameController from "../kpop/controllers/frame_controller";
+import ModalController from "../kpop/controllers/modal_controller";
+import RedirectController from "../kpop/controllers/redirect_controller";
+import ScrimController from "../kpop/controllers/scrim_controller";
+
+const Definitions = [
+  { identifier: "kpop--close", controllerConstructor: CloseController },
+  { identifier: "kpop--frame", controllerConstructor: FrameController },
+  { identifier: "kpop--modal", controllerConstructor: ModalController },
+  { identifier: "kpop--redirect", controllerConstructor: RedirectController },
+  { identifier: "scrim", controllerConstructor: ScrimController },
+];
+
+export { Definitions as default };