katalyst-kpop 3.4.0 → 4.0.0.beta.1

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

@@ -1,88 +0,0 @@
-@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-radius: $border-radius;
-  overflow: hidden;
-  max-height: var(--max-height);
-  box-shadow:
-    rgb(0 0 0 / 25%) 0 1px 2px,
-    rgb(0 0 0 / 31%) 0 0 5px;
-
-  .kpop-title-bar {
-    grid-area: title-bar;
-    display: grid;
-    grid-template-areas: "close title empty";
-    grid-template-columns: 3.5rem auto 3.5rem;
-    border-bottom: 1px solid $keyline-color;
-    min-height: 3.5rem;
-    align-items: center;
-  }
-
-  .kpop-header {
-    grid-area: header;
-  }
-
-  .kpop-content {
-    grid-area: content;
-    display: flex;
-    flex-direction: column;
-    overflow: auto;
-  }
-
-  .kpop-footer {
-    grid-area: footer;
-    border-top: 1px solid $keyline-color;
-    padding: $default-padding;
-  }
-
-  .kpop-title {
-    grid-area: title;
-    font-weight: bold;
-    text-align: center;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-height: 3.5rem;
-  }
-
-  .kpop-close {
-    grid-area: close;
-    text-align: center;
-    background: none;
-    border: none;
-    display: block;
-    font-size: 2rem;
-    font-weight: 300;
-    text-decoration: none;
-    line-height: 3.5rem;
-  }
-
-  .button-set {
-    display: flex;
-    gap: var(--gap, 0.5rem);
-    justify-content: flex-end;
-    align-items: baseline;
-  }
-
-  &.iframe {
-    .kpop-content {
-      overflow: unset;
-    }
-
-    iframe {
-      height: var(--max-height);
-      width: var(--max-width);
-      flex-grow: 1;
-      overflow: scroll;
-    }
-  }
-}

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

@@ -1,46 +0,0 @@
-@use "variables" as *;
-
-.scrim {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: $scrim-background;
-  z-index: -1;
-  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;
-}
-
-@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

@@ -1,64 +0,0 @@
-@use "variables" as *;
-
-.kpop--frame.side-panel {
-  --opening-animation: slide-in-right;
-  --closing-animation: slide-out-right;
-  --min-width: 35dvw;
-  --max-width: calc(100dvw - 4rem);
-  --min-height: 100dvh;
-  --max-height: 100dvh;
-
-  margin-inline: auto 0;
-  align-self: flex-end;
-
-  @include mobile {
-    & {
-      --opening-animation: slide-in-bottom;
-      --closing-animation: slide-out-bottom;
-      --min-width: 100dvw;
-      --max-width: 100dvw;
-      --min-height: 50dvh;
-      --max-height: calc(100dvh - 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

@@ -1,24 +0,0 @@
-// frame variables
-$min-width: 35rem !default;
-$max-width: 52rem !default;
-$min-height: 0 !default;
-$max-height: 80dvh !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;
-$default-padding: 1rem 1.5rem !default;
-$keyline-color: #e0e0e0 !default;
-
-// scrim variables
-$scrim-background: rgba(0, 0, 0, 0.6) !default;

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

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

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

@@ -1,21 +0,0 @@
-# frozen_string_literal: true
-
-module Kpop
-  module Modal
-    class FooterComponent < ViewComponent::Base
-      include Katalyst::HtmlAttributes
-
-      def call
-        tag.div(content, **html_attributes)
-      end
-
-      def inspect
-        "#<#{self.class.name}>"
-      end
-
-      def default_html_attributes
-        { class: "kpop-footer" }
-      end
-    end
-  end
-end

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

@@ -1,21 +0,0 @@
-# frozen_string_literal: true
-
-module Kpop
-  module Modal
-    class HeaderComponent < ViewComponent::Base
-      include Katalyst::HtmlAttributes
-
-      def call
-        tag.div(content, **html_attributes)
-      end
-
-      def inspect
-        "#<#{self.class.name}>"
-      end
-
-      def default_html_attributes
-        { class: "kpop-header" }
-      end
-    end
-  end
-end

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

@@ -1,6 +0,0 @@
-<%= 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

@@ -1,28 +0,0 @@
-# frozen_string_literal: true
-
-module Kpop
-  module Modal
-    class TitleComponent < ViewComponent::Base
-      include Katalyst::HtmlAttributes
-
-      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/scrim_component.rb

@@ -1,32 +0,0 @@
-# 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,32 +0,0 @@
-# frozen_string_literal: true
-
-module KpopHelper
-  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_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_attributes.deep_merge_html_attributes(options || {}), &block)
-    else
-      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_attributes = nil, &)
-    default_html_attributes = {
-      form: { data: { turbo_frame: "kpop" } },
-    }
-    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, **, &block)
-    content = capture(yield) if block
-    tag.button(content, data: { action: "click->kpop--frame#dismiss:prevent" }, **)
-  end
-end

data/app/javascript/kpop/controllers/modal_controller.js

@@ -1,30 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-import DEBUG from "../debug";
-
-export default class Kpop__ModalController extends Controller {
-  static values = {
-    fallback_location: String,
-    layout: String,
-  };
-
-  connect() {
-    this.debug("connect");
-
-    if (this.layoutValue) {
-      document.querySelector("#kpop").classList.toggle(this.layoutValue, true);
-    }
-  }
-
-  disconnect() {
-    this.debug("disconnect");
-
-    if (this.layoutValue) {
-      document.querySelector("#kpop").classList.toggle(this.layoutValue, false);
-    }
-  }
-
-  debug(event, ...args) {
-    if (DEBUG) console.debug(`ModalController:${event}`, ...args);
-  }
-}

data/app/javascript/kpop/controllers/scrim_controller.js

@@ -1,159 +0,0 @@
-import { Controller } from "@hotwired/stimulus";
-
-import DEBUG from "../debug";
-
-/**
- * Scrim controller wraps an element that creates a whole page layer.
- * It is intended to be used behind a modal or nav drawer.
- *
- * If the Scrim element receives a click event, it automatically triggers "scrim:hide".
- *
- * You can show and hide the scrim programmatically by calling show/hide on the controller, e.g. using an outlet.
- *
- * If you need to respond to the scrim showing or hiding you should subscribe to "scrim:show" and "scrim:hide".
- */
-export default class ScrimController extends Controller {
-  static values = {
-    open: Boolean,
-    captive: Boolean,
-    zIndex: Number,
-  };
-
-  connect() {
-    if (DEBUG) console.debug("scrim:connect");
-
-    this.defaultZIndexValue = this.zIndexValue;
-    this.defaultCaptiveValue = this.captiveValue;
-
-    this.element.scrim = this;
-  }
-
-  disconnect() {
-    if (DEBUG) console.debug("scrim:disconnect");
-
-    delete this.element.scrim;
-  }
-
-  async show({
-    captive = this.defaultCaptiveValue,
-    zIndex = this.defaultZIndexValue,
-    top = window.scrollY,
-    animate = true,
-  } = {}) {
-    if (DEBUG) console.debug("scrim:before-show");
-
-    // hide the scrim before opening the new one if it's already open
-    if (this.openValue) {
-      await this.hide({ animate });
-    }
-
-    // update internal state
-    this.openValue = true;
-
-    // notify listeners of pending request
-    this.dispatch("show", { bubbles: true });
-
-    if (DEBUG) console.debug("scrim:show-start");
-
-    // update state, perform style updates
-    this.#show(captive, zIndex, top);
-
-    if (animate) {
-      // animate opening
-      // this will trigger an animationEnd event via CSS that completes the open
-      this.element.dataset.showAnimating = "";
-
-      await new Promise((resolve) => {
-        this.element.addEventListener("animationend", () => resolve(), {
-          once: true,
-        });
-      });
-
-      delete this.element.dataset.showAnimating;
-    }
-
-    if (DEBUG) console.debug("scrim:show-end");
-  }
-
-  async hide({ animate = true } = {}) {
-    if (!this.openValue || this.element.dataset.hideAnimating) return;
-
-    if (DEBUG) console.debug("scrim:before-hide");
-
-    // notify listeners of pending request
-    this.dispatch("hide", { bubbles: true });
-
-    if (DEBUG) console.debug("scrim:hide-start");
-
-    if (animate) {
-      // set animation state
-      // this will trigger an animationEnd event via CSS that completes the hide
-      this.element.dataset.hideAnimating = "";
-
-      await new Promise((resolve) => {
-        this.element.addEventListener("animationend", () => resolve(), {
-          once: true,
-        });
-      });
-
-      delete this.element.dataset.hideAnimating;
-    }
-
-    this.#hide();
-
-    this.openValue = false;
-
-    if (DEBUG) console.debug("scrim:hide-end");
-  }
-
-  dismiss(event) {
-    if (DEBUG) console.debug("scrim:dismiss");
-
-    if (!this.captiveValue) this.dispatch("dismiss", { bubbles: true });
-  }
-
-  escape(event) {
-    if (
-      event.key === "Escape" &&
-      !this.captiveValue &&
-      !event.defaultPrevented
-    ) {
-      this.dispatch("dismiss", { bubbles: true });
-    }
-  }
-
-  /**
-   * Clips body to viewport size and sets the z-index
-   */
-  #show(captive, zIndex, top) {
-    this.captiveValue = captive;
-    this.zIndexValue = zIndex;
-    this.scrollY = top;
-
-    this.element.style.zIndex = this.zIndexValue;
-    document.body.style.top = `-${top}px`;
-    document.body.style.position = "fixed";
-    document.body.style.paddingRight = `-${this.scrollPadding}px`;
-
-    if (document.body.scrollHeight > window.innerHeight) {
-      document.body.style.overflowY = "scroll";
-    }
-  }
-
-  /**
-   * Unclips body from viewport size and unsets the z-index
-   */
-  #hide() {
-    this.captiveValue = this.defaultCaptiveValue;
-    this.zIndexValue = this.defaultZIndexValue;
-
-    this.element.style.removeProperty("z-index");
-    document.body.style.removeProperty("position");
-    document.body.style.removeProperty("top");
-    document.body.style.removeProperty("overflow-y");
-
-    window.scrollTo({ left: 0, top: this.scrollY, behavior: "instant" });
-
-    delete this.scrollY;
-  }
-}

data/app/javascript/kpop/debug.js

@@ -1,3 +0,0 @@
-const DEBUG = false;
-
-export default DEBUG;

data/app/javascript/kpop/turbo_actions.js

@@ -1,46 +0,0 @@
-import { Turbo } from "@hotwired/turbo-rails";
-
-import DEBUG from "./debug";
-
-import { StreamModal } from "./modals/stream_modal";
-import { StreamRenderer } from "./utils/stream_renderer";
-
-function kpop(action) {
-  return action.targetElements[0]?.kpop;
-}
-
-Turbo.StreamActions.kpop_open = function () {
-  const animate = !kpop(this).openValue;
-
-  kpop(this)
-    ?.dismiss({ animate, reason: "before-turbo-stream" })
-    .then(() => {
-      new StreamRenderer(this.targetElements[0], this).render();
-      kpop(this)?.open(new StreamModal(this.target, this), { animate });
-    });
-};
-
-Turbo.StreamActions.kpop_dismiss = function () {
-  kpop(this)?.dismiss({ reason: "turbo_stream.kpop.dismiss" });
-};
-
-Turbo.StreamActions.kpop_redirect_to = function () {
-  if (this.dataset.turboFrame === this.target) {
-    if (DEBUG)
-      console.debug(
-        `kpop: redirecting ${this.target} to ${this.getAttribute("href")}`,
-      );
-    const a = document.createElement("A");
-    a.setAttribute("data-turbo-action", "replace");
-    this.targetElements[0].delegate.linkClickIntercepted(
-      a,
-      this.getAttribute("href"),
-    );
-  } else {
-    if (DEBUG)
-      console.debug(`kpop: redirecting to ${this.getAttribute("href")}`);
-    Turbo.visit(this.getAttribute("href"), {
-      action: this.dataset.turboAction,
-    });
-  }
-};

data/app/javascript/kpop/utils/stream_renderer.js

@@ -1,15 +0,0 @@
-import DEBUG from "../debug";
-
-export class StreamRenderer {
-  constructor(frame, action) {
-    this.frame = frame;
-    this.action = action;
-  }
-
-  render() {
-    if (DEBUG) console.debug("stream-renderer:render");
-    this.frame.src = "";
-    this.frame.innerHTML = "";
-    this.frame.append(this.action.templateContent);
-  }
-}

data/lib/katalyst/kpop/turbo.rb

@@ -1,49 +0,0 @@
-# frozen_string_literal: true
-
-module Katalyst
-  module Kpop
-    module Turbo
-      class TagBuilder
-        delegate :action, :turbo_stream_action_tag, to: :@builder
-
-        def initialize(builder)
-          @builder = builder
-        end
-
-        # Open a modal in the kpop frame identified by <tt>id</tt> either the <tt>content</tt> passed in or a
-        # rendering result determined by the <tt>rendering</tt> keyword arguments, the content in the block,
-        # or the rendering of the content as a record. Examples:
-        #
-        #   <%= turbo_stream.kpop.open modal %>
-        #   <%= turbo_stream.kpop.open partial: "modals/modal", locals: { record: } %>
-        #   <%= turbo_stream.kpop.open do %>
-        #     <%= render Kpop::ModalComponent.new(title: "Example") do %>
-        #       ...
-        #     <% end %>
-        #   <% end %>
-        def open(content = nil, id: "kpop", **, &)
-          action(:kpop_open, id, content, **, &)
-        end
-
-        # Render a turbo stream action that will dismiss any open kpop modal.
-        def dismiss(id: "kpop")
-          turbo_stream_action_tag(:kpop_dismiss, target: id)
-        end
-
-        # Renders a kpop redirect controller response that will escape the frame and navigate to the given URL.
-        # Note: turbo does not currently snapshot page history accurately when using "advance" (Oct 23).
-        def redirect_to(href, id: "kpop", action: "replace", target: nil)
-          turbo_stream_action_tag(
-            :kpop_redirect_to,
-            target: id,
-            href:,
-            data:   {
-              turbo_action: action,
-              turbo_frame:  target,
-            },
-          )
-        end
-      end
-    end
-  end
-end