turbo_turbo 0.2.0

data/app/assets/stylesheets/turbo_turbo/alerts.css

@@ -0,0 +1,7 @@
+#flashes_turbo_turbo {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10000;
+  width: 100%;
+}

data/app/assets/stylesheets/turbo_turbo/base.css

@@ -0,0 +1,4 @@
+/* TurboTurbo CSS - Import from gem */
+@import "alerts";
+@import "button";
+@import "modal";

data/app/assets/stylesheets/turbo_turbo/button.css

@@ -0,0 +1,24 @@
+.turbo-turbo-buttons {
+  @apply relative inline-flex items-center;
+}
+
+.turbo-turbo-button {
+  @apply relative inline-flex items-center rounded-md font-normal h-9 bg-primary-700 text-white focus:z-10 text-sm px-4 py-2.5 hover:bg-primary-900 drop-shadow-none shadow-none border-0 !important;
+
+  &:not(:first-child) {
+    @apply ml-3;
+  }
+
+  &.--cancel {
+    @apply bg-gray-200 text-gray-700 hover:bg-gray-300 !important;
+  }
+
+  &.--secondary {
+    @apply leading-6 rounded bg-white  py-2.5 px-3.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 block text-center font-normal
+  }
+}
+
+/* Legacy class names for backwards compatibility */
+.Buttons { @apply turbo-turbo-buttons; }
+.Button { @apply turbo-turbo-button; }
+

data/app/assets/stylesheets/turbo_turbo/modal.css

@@ -0,0 +1,81 @@
+.ModalBackground-turbo-turbo {
+  @apply fixed inset-0 bg-gray-500 bg-opacity-70 invisible;
+  transition: opacity 300ms ease-out;
+  opacity: 0;
+  z-index: 99998;
+}
+
+.ModalBackground-turbo-turbo.show {
+  @apply visible;
+  opacity: 1;
+}
+
+.ModalBackdrop-turbo-turbo {
+  z-index: 99999;
+  @apply fixed inset-0 w-full h-full overflow-y-auto items-end justify-center p-4 text-center sm:items-center sm:p-0;
+  display: flex;
+  transform: translateY(100%);
+  transition: transform 300ms ease-out;
+}
+
+.ModalBackdrop-turbo-turbo.show {
+  transform: translateY(0);
+}
+
+.Modal-turbo-turbo {
+  z-index: 100000;
+  @apply relative transform rounded-lg bg-white m-8 text-left;
+  transition: transform 300ms ease-out, opacity 300ms ease-out;
+  transform: translateY(1rem);
+  min-width: 320px;
+
+  & .input.radio_buttons, .input.check_boxes {
+    @apply grow-0 !important;
+  }
+
+  & .radio input, .checkbox input {
+    @apply p-2.5 mr-2 !important;
+  }
+
+  & .radio input {
+    @apply rounded-full;
+  }
+
+  & .checkbox input {
+    @apply rounded-md;
+  }
+
+  & input.radio_buttons {
+    @apply text-primary-700;
+  }
+
+  & textarea, trix-editor, input.string {
+    @apply grow border-0 rounded-md ring-1 ring-inset ring-gray-300 w-full !important;
+
+    &:focus {
+      @apply ring-primary-600 !important;
+    }
+  }
+
+  & .radio label, .checkbox label {
+    @apply flex items-center;
+  }
+}
+
+.Modal-turbo-turbo.show {
+  transform: translateY(0);
+}
+
+.ModalTitle-turbo-turbo {
+  @apply text-base rounded-t-lg leading-6 text-white bg-primary-300 p-4 mb-2;
+}
+
+.ModalBody-turbo-turbo {
+  @apply flex-auto overflow-auto flex flex-col;
+  padding-top: 0;
+}
+
+.ModalContent-turbo-turbo {
+  @apply flex flex-col grow overflow-auto px-4;
+  overflow-y: auto;
+}

data/app/components/turbo_turbo/alerts/alert_component.html.erb

@@ -0,0 +1,36 @@
+<div class="flash rounded-md p-4 bg-red-50" data-controller="turbo-turbo--flash">
+  <div class="flex">
+    <div class="flex-shrink-0">
+      <svg class="w-5 h-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
+      </svg>
+    </div>
+    <div class="ml-3">
+      <% if @header %>
+        <h3 class="text-sm font-medium text-red-800"><%= @header %></h3>
+
+        <% if @message.is_a?(Array) %>
+          <ul role="list">
+            <% @message.each do |item| %>
+              <li class="mt-2 text-sm text-red-700"><%= item %></li>
+            <% end %>
+          </ul>
+        <% else %>
+          <p class="mt-2 text-sm text-red-700"><%= @message %></p>
+        <% end %>
+      <% else %>
+        <h3 class="text-sm font-medium text-red-800"><%= @message %></h3>
+      <% end %>
+    </div>
+    <div class="ml-auto pl-3">
+      <div class="-mx-1.5 -my-1.5">
+        <button class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red-50 text-red-500 hover:bg-red-100 focus:ring-red-600 focus:ring-offset-red-50" type="button" data-action="turbo-turbo--flash#dismiss">
+          <span class="sr-only">Dismiss</span>
+          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/turbo_turbo/alerts/alert_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module TurboTurbo
+  module Alerts
+    class AlertComponent < ViewComponent::Base
+      def initialize(flash_contents)
+        @header = flash_contents[:header]
+        @message = flash_contents[:message]
+      end
+    end
+  end
+end

data/app/components/turbo_turbo/alerts/error_component.html.erb

@@ -0,0 +1,36 @@
+<div class="flash rounded-md p-4 bg-red-50" data-controller="turbo-turbo--flash">
+  <div class="flex">
+    <div class="flex-shrink-0">
+      <svg class="w-5 h-5 text-red-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
+      </svg>
+    </div>
+    <div class="ml-3">
+      <% if @header %>
+        <h3 class="text-sm font-medium text-red-800"><%= @header %></h3>
+
+        <% if @message.is_a?(Array) %>
+          <ul role="list">
+            <% @message.each do |item| %>
+              <li class="mt-2 text-sm text-red-700"><%= item %></li>
+            <% end %>
+          </ul>
+        <% else %>
+          <p class="mt-2 text-sm text-red-700"><%= @message %></p>
+        <% end %>
+      <% else %>
+        <h3 class="text-sm font-medium text-red-800"><%= @message %></h3>
+      <% end %>
+    </div>
+    <div class="ml-auto pl-3">
+      <div class="-mx-1.5 -my-1.5">
+        <button class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red-50 text-red-500 hover:bg-red-100 focus:ring-red-600 focus:ring-offset-red-50" type="button" data-action="turbo-turbo--flash#dismiss">
+          <span class="sr-only">Dismiss</span>
+          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/turbo_turbo/alerts/error_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module TurboTurbo
+  module Alerts
+    class ErrorComponent < ViewComponent::Base
+      def initialize(flash_contents)
+        @header = flash_contents[:header]
+        @message = flash_contents[:message]
+      end
+    end
+  end
+end

data/app/components/turbo_turbo/alerts/info_component.html.erb

@@ -0,0 +1,36 @@
+<div class="flash rounded-md p-4 bg-blue-50" data-controller="turbo-turbo--flash">
+  <div class="flex">
+    <div class="flex-shrink-0">
+      <svg class="w-5 h-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z" clip-rule="evenodd"></path>
+      </svg>
+    </div>
+    <div class="ml-3">
+      <% if @header %>
+        <h3 class="text-sm font-medium text-blue-800"><%= @header %></h3>
+
+        <% if @message.is_a?(Array) %>
+          <ul role="list">
+            <% @message.each do |item| %>
+              <li class="mt-2 text-sm text-blue-700"><%= item %></li>
+            <% end %>
+          </ul>
+        <% else %>
+          <p class="mt-2 text-sm text-blue-700"><%= @message %></p>
+        <% end %>
+      <% else %>
+        <h3 class="text-sm font-medium text-blue-800"><%= @message %></h3>
+      <% end %>
+    </div>
+    <div class="ml-auto pl-3">
+      <div class="-mx-1.5 -my-1.5">
+        <button class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 bg-blue-50 text-blue-500 hover:bg-blue-100 focus:ring-blue-600 focus:ring-offset-blue-50" type="button" data-action="turbo-turbo--flash#dismiss">
+          <span class="sr-only">Dismiss</span>
+          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/turbo_turbo/alerts/info_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module TurboTurbo
+  module Alerts
+    class InfoComponent < ViewComponent::Base
+      def initialize(flash_contents)
+        @header = flash_contents[:header]
+        @message = flash_contents[:message]
+      end
+    end
+  end
+end

data/app/components/turbo_turbo/alerts/success_component.html.erb

@@ -0,0 +1,47 @@
+<div class="pointer-events-none fixed inset-0 flex items-end px-4 py-6 sm:items-start sm:p-6" aria-live="assertive" data-controller="turbo-turbo--flash">
+  <div class="flex w-full flex-col items-center space-y-4 sm:items-end">
+    <div class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5">
+      <div class="p-4">
+        <div class="flex items-start">
+          <div class="flex-shrink-0">
+            <svg class="w-5 h-5 text-green-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd"></path>
+            </svg>
+          </div>
+          <div class="ml-3 w-0 flex-1 pt-0.5">
+            <% if @header %>
+              <p class="text-sm font-medium text-gray-900"><%= @header %></p>
+              <% if @message.is_a?(Array) %>
+                <ul role="list">
+                  <% @message.each do |item| %>
+                    <li class="mt-1 text-sm text-gray-500"><%= item %></li>
+                  <% end %>
+                </ul>
+              <% else %>
+                <p class="text-sm font-medium text-gray-500"><%= @message %></p>
+              <% end %>
+            <% else %>
+              <% if @message.is_a?(Array) %>
+                <ul role="list">
+                  <% @message.each do |item| %>
+                    <li class="mt-1 text-sm text-gray-700"><%= item %></li>
+                  <% end %>
+                </ul>
+              <% else %>
+                <p class="text-sm font-medium text-gray-900"><%= @message %></p>
+              <% end %>
+            <% end %>
+          </div>
+          <div class="ml-4 flex flex-shrink-0">
+            <button class="inline-flex rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" type="button" data-action="turbo-turbo--flash#dismiss">
+              <span class="sr-only">Close</span>
+              <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
+              </svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/turbo_turbo/alerts/success_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module TurboTurbo
+  module Alerts
+    class SuccessComponent < ViewComponent::Base
+      def initialize(flash_contents)
+        @header = flash_contents[:header]
+        @message = flash_contents[:message]
+      end
+    end
+  end
+end

data/app/components/turbo_turbo/alerts/warning_component.html.erb

@@ -0,0 +1,36 @@
+<div class="flash rounded-md p-4 bg-yellow-50" data-controller="turbo-turbo--flash">
+  <div class="flex">
+    <div class="flex-shrink-0">
+      <svg class="w-5 h-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
+      </svg>
+    </div>
+    <div class="ml-3">
+      <% if @header %>
+        <h3 class="text-sm font-medium text-yellow-800"><%= @header %></h3>
+
+        <% if @message.is_a?(Array) %>
+          <ul role="list">
+            <% @message.each do |item| %>
+              <li class="mt-2 text-sm text-yellow-700"><%= item %></li>
+            <% end %>
+          </ul>
+        <% else %>
+          <p class="mt-2 text-sm text-yellow-700"><%= @message %></p>
+        <% end %>
+      <% else %>
+        <h3 class="text-sm font-medium text-yellow-800"><%= @message %></h3>
+      <% end %>
+    </div>
+    <div class="ml-auto pl-3">
+      <div class="-mx-1.5 -my-1.5">
+        <button class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 bg-yellow-50 text-yellow-500 hover:bg-yellow-100 focus:ring-yellow-600 focus:ring-offset-yellow-50" type="button" data-action="turbo-turbo--flash#dismiss">
+          <span class="sr-only">Dismiss</span>
+          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"></path>
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/turbo_turbo/alerts/warning_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module TurboTurbo
+  module Alerts
+    class WarningComponent < ViewComponent::Base
+      def initialize(flash_contents)
+        @header = flash_contents[:header]
+        @message = flash_contents[:message]
+      end
+    end
+  end
+end

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

@@ -0,0 +1,20 @@
+<div class="ModalBackdrop-turbo-turbo" data-turbo-turbo--modal-target="modalBackdrop" data-action="click->turbo-turbo--modal#closeModal">
+  <div class="Modal-turbo-turbo border border-gray-200 bg-white py-5 rounded-lg flex flex-col max-h-[95vh]" data-turbo-turbo--modal-target="modal">
+    <div class="absolute right-0 top-0 pr-4 pt-4 sm:block">
+      <button class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" type="button" data-action="turbo-turbo--modal#closeModal">
+        <span class="sr-only">Close</span>
+        <svg class="h-6 w-6 pointer-events-none" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+    <div id="modal_title_bar_turbo_turbo">
+      <div class="border-b border-gray-200 bg-white px-4 py-5 sm:px-6">
+        <h3 class="text-base font-semibold leading-6 text-gray-900" data-turbo-turbo--modal-target="title"></h3>
+        <p class="mt-1 text-sm text-gray-500" data-turbo-turbo--modal-target="subtitle"></p>
+      </div>
+    </div>
+    <div id="modal_body_turbo_turbo" class="ModalBody-turbo-turbo p-4 max-w-full md:min-w-128" data-turbo-turbo--modal-target="body"></div>
+    <div id="modal_footer_turbo_turbo" class="mt-6 flex flex-row items-center justify-end gap-x-6 px-4 py-2" data-turbo-turbo--modal-target="footer"></div>
+  </div>
+</div>

data/app/components/turbo_turbo/modal_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module TurboTurbo
+  class ModalComponent < ViewComponent::Base
+    def initialize(show_close: false)
+      @show_close = show_close
+    end
+  end
+end

data/app/components/turbo_turbo/modal_footer_component.html.erb

@@ -0,0 +1,6 @@
+<div id="modal_footer" class="ModalFooterActions flex-shrink-0" data-turbo-turbo--modal-target="footer">
+  <% unless @skip_close %>
+    <%= link_to @close_label, "", data: { action: "turbo-turbo--modal#closeModal" }, class: "Button --cancel flex-1 justify-center" %>
+  <% end %>
+  <%= content %>
+</div>

data/app/components/turbo_turbo/modal_footer_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+module TurboTurbo
+  class ModalFooterComponent < ViewComponent::Base
+    def initialize(skip_close: false, close_label: "Cancel")
+      @skip_close = skip_close
+      @close_label = close_label
+    end
+  end
+end

data/config/locales/en.yml

@@ -0,0 +1,15 @@
+en:
+  turbo_turbo:
+    flash:
+      success:
+        create: "%{resource} created!"
+        update: "%{resource} updated!"
+        destroy: "%{resource} deleted!"
+        archive: "%{resource} archived!"
+        restore: "%{resource} restored!"
+        upload: "%{resource} uploaded!"
+        toggle_resolved: "%{resource} resolved!"
+        email_modal: "%{resource} updated!"
+        default: "%{resource} %{action}d!"
+      error:
+        default: "We encountered an error trying to %{action} %{resource}."

data/config/routes/turbo_turbo_routes.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+# TurboTurbo routes for modal-based CRUD operations
+# Add `draw(:turbo_turbo_routes)` to your main routes.rb file to include these routes
+
+namespace :turbo_turbo do
+  # Admin namespace for administrative modal operations
+  namespace :admin do
+    # Add your admin resources here
+    # Example: resources :pathways, only: [:new, :create, :show, :edit, :update, :destroy]
+  end
+
+  # Provider namespace for provider modal operations
+  namespace :provider do
+    # Add your provider resources here
+    # Example: resources :pathways, only: [:new, :create, :show, :edit, :update, :destroy]
+  end
+
+  # Add other namespaces as needed
+end