coveragebook_components 0.6.5 → 0.7.0

data/app/components/coco/base/modal/modal.html.erb

@@ -0,0 +1,25 @@
+<% if render_as_modal? %>
+  <%= turbo_frame_tag coco_modal_frame_id(name), class: "modal-frame" do %>
+    <%= render component_tag(
+      id: id,
+      role: "dialog",
+      aria: {modal: "true"},
+      data: {turbo_temporary: true},
+      x: {
+        data: x_data("modal"),
+        bind: "root",
+        cloak: true,
+      },
+    ) do %>
+      <div class="modal-overlay" x-show="open" x-transition.opacity></div>
+      <div class="modal-container" x-show="open" x-transition>
+        <div class="modal-content" x-trap.noscroll.inert.noreturn="open">
+          <%= modal_content %>
+        </div>
+      </div>
+    <% end %>
+    <%= render_flash_messages %>
+  <% end %>
+<% else %>
+  <%= content %>
+<% end %>

data/app/components/coco/base/modal/modal.js

@@ -0,0 +1,54 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("modal", () => {
+  return {
+    open: false,
+    frame: null,
+    options: ["dismissable", "closeOnSubmit"],
+
+    init() {
+      this.onFrameSubmitEnd = this.onFrameSubmitEnd.bind(this);
+
+      this.frame = this.$el.closest("turbo-frame");
+      this.frame.addEventListener("turbo:submit-end", this.onFrameSubmitEnd);
+
+      this.$nextTick(() => this.show()); // ensure transitions run
+    },
+
+    show() {
+      this.open = true;
+    },
+
+    hide() {
+      this.open = false;
+      setTimeout(() => this.clearFrame(), 100);
+    },
+
+    dismiss(event) {
+      if (this.$options.dismissable) this.hide();
+    },
+
+    clearFrame() {
+      this.frame.removeAttribute("src");
+      this.frame.removeAttribute("complete");
+      this.frame.innerHTML = "";
+    },
+
+    onFrameSubmitEnd() {
+      if (this.$options.closeOnSubmit && event.detail.success) {
+        this.hide();
+      }
+    },
+
+    destroy() {
+      this.frame.removeEventListener("turbo:submit-end", this.onFrameSubmitEnd);
+    },
+
+    root: {
+      "x-options": "options",
+      "x-show": "open",
+      "@keydown.escape.document": "dismiss",
+      "@modal:hide.document": "hide",
+    },
+  };
+});

data/app/components/coco/base/modal/modal.rb

@@ -0,0 +1,52 @@
+module Coco
+  class Modal < Coco::Component
+    include Concerns::AcceptsOptions
+    include Turbo::FramesHelper
+
+    accepts_option :dismissable, from: [true, false], default: true
+    accepts_option :close_on_submit, from: [true, false], default: true
+
+    renders_one :title
+
+    renders_one :dialog, ->(**kwargs, &block) do
+      @dialog_content = capture { block.call }
+      Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), **kwargs)
+    end
+
+    before_render do
+      if dialog? && title?
+        dialog.with_title { title.to_s }
+      end
+    end
+
+    attr_reader :name, :show
+
+    def initialize(name:, show: false, **kwargs)
+      @name = name
+      @show = show
+      title { kwargs[:title] } if kwargs[:title]
+    end
+
+    def render_as_modal?
+      request.headers["Turbo-Frame"].present? || show
+    end
+
+    def id
+      "coco-modal-#{name.to_s.dasherize}"
+    end
+
+    def modal_content
+      dialog? ? dialog : content
+    end
+
+    def content
+      @dialog_content || super
+    end
+
+    def render_flash_messages
+      if helpers.respond_to?(:render_turbo_stream_flash_messages)
+        helpers.render_turbo_stream_flash_messages
+      end
+    end
+  end
+end

data/app/components/coco/base/modal_dialog/modal_dialog.css

@@ -0,0 +1,28 @@
+@layer components {
+  [data-coco][data-component="modal-dialog"] {
+    @apply shadow-2xl rounded-xl w-full;
+    @apply max-w-2xl; /* temp until sizes added */
+
+    .modal-dialog-header {
+      @apply relative flex items-center justify-center;
+      @apply px-8 h-16 border-b border-gray-300 rounded-t-xl bg-white;
+    }
+
+    .modal-dialog-title {
+      @apply text-lg pr-6 w-full font-semibold truncate;
+    }
+
+    .modal-dialog-close {
+      @apply flex-none block p-2 absolute top-1/2 right-3 -translate-y-1/2;
+      @apply focus:ring-0 focus:outline-none text-content-dark-muted hover:text-content-dark-2;
+    }
+
+    .modal-dialog-content {
+      @apply px-8 py-6 rounded-xl bg-background-light-3;
+    }
+
+    .modal-dialog-header + .modal-dialog-content {
+      @apply rounded-t-none;
+    }
+  }
+}

data/app/components/coco/base/modal_dialog/modal_dialog.html.erb

@@ -0,0 +1,19 @@
+<%= render component_tag(x: {data: x_data("modalDialog")}) do %>
+  <% if header? %>
+    <header class="modal-dialog-header">
+      <% if title? %>
+        <h4 class="modal-dialog-title" data-role="title">
+          <%= title %>
+        </h4>
+      <% end %>
+      <% if dismissable? %>
+        <button type="button" class="modal-dialog-close" data-role="close" @click="close">
+          <%= coco_icon(:x, size: :md) %>
+        </button>
+      <% end %>
+    </header>
+  <% end %>
+  <div class="modal-dialog-content">
+    <%= content %>
+  </div>
+<% end %>

data/app/components/coco/base/modal_dialog/modal_dialog.js

@@ -0,0 +1,36 @@
+import { CocoComponent } from "@js/coco";
+
+export default CocoComponent("modalDialog", () => {
+  return {
+    frame: null,
+
+    init() {
+      this.onFrameLoad = this.onFrameLoad.bind(this);
+      this.frame = this.$el.closest("turbo-frame");
+
+      if (this.frame) {
+        this.frame.addEventListener("turbo:frame-load", this.onFrameLoad);
+      }
+    },
+
+    close() {
+      this.$dispatch("modal:hide");
+    },
+
+    onFrameLoad() {
+      this.$focus.focus(this.firstInput);
+    },
+
+    destroy() {
+      if (this.frame) {
+        this.frame.removeEventListener("turbo:frame-load", this.onFrameLoad);
+      }
+    },
+
+    get firstInput() {
+      return this.$root.querySelector(
+        "input:not([type=hidden]), textarea, select"
+      );
+    },
+  };
+});

data/app/components/coco/base/modal_dialog/modal_dialog.rb

@@ -0,0 +1,27 @@
+module Coco
+  class ModalDialog < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :dismissable, from: [true, false], default: true
+
+    renders_one :title
+
+    before_render do
+      unless title?
+        raise ArgumentError, "A title is required for modal dialogs"
+      end
+    end
+
+    def initialize(**kwargs)
+      title { kwargs[:title] } if kwargs[:title]
+    end
+
+    def header?
+      title || dismissable?
+    end
+
+    def dismissable?
+      get_option_value(:dismissable)
+    end
+  end
+end

data/app/helpers/coco/base_helper.rb

@@ -1,32 +1,59 @@
 module Coco
   module BaseHelper
-    def coco_tag(*args, **kwargs, &block)
-      render Coco::Tag.new(*args, **kwargs), &block
+    def coco_tag(*, **, &block)
+      render Coco::Tag.new(*, **), &block
     end
 
-    def coco_svg(path = nil, **kwargs)
-      render Coco::Svg.new(path: path, **kwargs)
+    def coco_svg(path = nil, **)
+      render Coco::Svg.new(path: path, **)
     end
 
-    def coco_image(src = nil, **kwargs)
-      render Coco::Image.new(src: src, **kwargs)
+    def coco_image(src = nil, **)
+      render Coco::Image.new(src: src, **)
     end
 
-    def coco_icon(icon_name = nil, **kwargs, &block)
-      render Coco::Icon.new(name: icon_name, **kwargs), &block
+    def coco_icon(icon_name = nil, **, &block)
+      render Coco::Icon.new(name: icon_name, **), &block
     end
 
-    def coco_embed(platform, url = nil, **kwargs)
+    def coco_embed(platform, url = nil, **)
       case platform
       when :youtube
-        render Coco::Embeds::Youtube.new(url: url, **kwargs)
+        render Coco::Embeds::Youtube.new(url: url, **)
       else
         raise ArgumentError, "`#{platform}` is not a valid embed type"
       end
     end
 
-    def coco_placeholder(*args, **kwargs, &block)
-      render Coco::Placeholder.new(*args, **kwargs), &block
+    def coco_placeholder(*, **, &block)
+      render Coco::Placeholder.new(*, **), &block
+    end
+
+    def coco_modal(name = "default", **, &block)
+      render(Coco::Modal.new(name: name, **), &block)
+    end
+
+    def coco_modal_dialog(name = "default", **, &block)
+      render(Coco::Modal.new(name: name, **)) do |modal|
+        modal.with_dialog(&block)
+      end
+    end
+
+    def coco_modal_link(*, data: {}, modal: nil, **kwargs, &)
+      kwargs[:data] = coco_modal_data_attributes(modal || "default").merge(data)
+
+      link_to(*, **kwargs, &)
+    end
+
+    def coco_modal_frame_id(name = "default")
+      "coco-modal-frame-#{name.to_s.dasherize}"
+    end
+
+    def coco_modal_data_attributes(name = "default")
+      {
+        turbo: true,
+        turbo_frame: coco_modal_frame_id(name)
+      }
     end
   end
 end

data/lib/coco/engine.rb

@@ -1,5 +1,6 @@
 require "rails/engine"
 require "view_component"
+require "turbo-rails"
 
 module Coco
   class Engine < ::Rails::Engine

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.6.5"
+  VERSION = "0.7.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.6.5
+  version: 0.7.0
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-09-08 00:00:00.000000000 Z
+date: 2023-09-21 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -52,6 +52,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '2.5'
+- !ruby/object:Gem::Dependency
+  name: turbo-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description:
 email:
 - dev@coveragebook.com
@@ -1487,6 +1501,14 @@ files:
 - app/components/coco/base/image_uploader/image_uploader.rb
 - app/components/coco/base/link/link.css
 - app/components/coco/base/link/link.rb
+- app/components/coco/base/modal/modal.css
+- app/components/coco/base/modal/modal.html.erb
+- app/components/coco/base/modal/modal.js
+- app/components/coco/base/modal/modal.rb
+- app/components/coco/base/modal_dialog/modal_dialog.css
+- app/components/coco/base/modal_dialog/modal_dialog.html.erb
+- app/components/coco/base/modal_dialog/modal_dialog.js
+- app/components/coco/base/modal_dialog/modal_dialog.rb
 - app/components/coco/base/placeholder/placeholder.css
 - app/components/coco/base/placeholder/placeholder.html.erb
 - app/components/coco/base/placeholder/placeholder.rb