katalyst-kpop 3.4.0 → 4.0.0.beta.2

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-kpop
 version: !ruby/object:Gem::Version
-  version: 3.4.0
+  version: 4.0.0.beta.2
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -63,35 +63,24 @@ files:
 - app/assets/builds/katalyst/kpop.min.js
 - app/assets/builds/katalyst/kpop.min.js.map
 - app/assets/config/katalyst-kpop.js
-- app/assets/stylesheets/katalyst/kpop.scss
-- app/assets/stylesheets/katalyst/kpop/_frame.scss
-- app/assets/stylesheets/katalyst/kpop/_modal.scss
-- app/assets/stylesheets/katalyst/kpop/_scrim.scss
-- app/assets/stylesheets/katalyst/kpop/_side_panel.scss
-- app/assets/stylesheets/katalyst/kpop/_variables.scss
+- app/assets/stylesheets/katalyst/kpop.css
 - app/components/kpop/frame_component.html.erb
 - app/components/kpop/frame_component.rb
-- app/components/kpop/modal/footer_component.rb
-- app/components/kpop/modal/header_component.rb
-- app/components/kpop/modal/title_component.html.erb
-- app/components/kpop/modal/title_component.rb
 - app/components/kpop/modal_component.html.erb
 - app/components/kpop/modal_component.rb
-- app/components/scrim_component.rb
 - app/controllers/concerns/katalyst/kpop/frame_request.rb
-- app/helpers/kpop_helper.rb
 - app/javascript/kpop/application.js
 - app/javascript/kpop/controllers/frame_controller.js
-- app/javascript/kpop/controllers/modal_controller.js
-- app/javascript/kpop/controllers/scrim_controller.js
-- app/javascript/kpop/debug.js
 - app/javascript/kpop/modals/content_modal.js
 - app/javascript/kpop/modals/frame_modal.js
 - app/javascript/kpop/modals/modal.js
 - app/javascript/kpop/modals/stream_modal.js
-- app/javascript/kpop/turbo_actions.js
-- app/javascript/kpop/utils/stream_renderer.js
+- app/javascript/kpop/utils/debug.js
+- app/javascript/kpop/utils/link_observer.js
+- app/javascript/kpop/utils/ruleset.js
+- app/javascript/kpop/utils/stream_actions.js
 - app/views/layouts/kpop/frame.html.erb
+- app/views/layouts/kpop/stream.html.erb
 - config/importmap.rb
 - lib/katalyst/kpop.rb
 - lib/katalyst/kpop/engine.rb
@@ -104,10 +93,10 @@ files:
 - lib/katalyst/kpop/matchers/modal_matcher.rb
 - lib/katalyst/kpop/matchers/redirect_matcher.rb
 - lib/katalyst/kpop/matchers/response_matcher.rb
+- lib/katalyst/kpop/matchers/src_matcher.rb
 - lib/katalyst/kpop/matchers/stream_matcher.rb
 - lib/katalyst/kpop/matchers/title_finder.rb
 - lib/katalyst/kpop/matchers/title_matcher.rb
-- lib/katalyst/kpop/turbo.rb
 homepage: https://github.com/katalyst/kpop
 licenses:
 - MIT

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

@@ -1,90 +0,0 @@
-@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;
-  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: 100dvw;
-    --max-width: 100dvw;
-    --min-height: 30dvh;
-    --max-height: calc(100dvh - 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;
-}
-
-@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

@@ -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);
-  }
-}