fuik 0.8.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 263dbeb940d32f359659c36cbed9181e9cd75a73adbfbc525ee9af89dee6f010
-  data.tar.gz: 74f7e2c3abe2a7020869e4a5722550fcb3e9cb6a7439bb19b758d38773691ee1
+  metadata.gz: 88d837d843a47b5e38b77f2ee01839045c2cce4920fcf83c8be7739273132c0d
+  data.tar.gz: feb08cf1fa6f8a3328be3fed97af86997e1fac81ec79b78f71435e948289673a
 SHA512:
-  metadata.gz: ae37e3e0ee6eadfe94091d1bc24fa6490c59e8bcb8eb77f75eccf41c6b14abb30cef6732ad9dbd0f0ed1065927a53f4f21282e36332f501654797ece1fe68214
-  data.tar.gz: 8bc9a6bbb71631fd958530392283c3e616f253e2e4d0d2bc874e74456ac8d49a5697a30664e8b787ffe2bea21727e0376d867dde8ddd53e915bd85f1fc202413
+  metadata.gz: d64260c13efb33cdb8e10ebd8b6e862e067bcf4421f63ce8b228f91d345ea271602db298162f6898660f16e925635aeba429ced6462d08ec1b18e62a21eecc66
+  data.tar.gz: c89181684f34de8dab62991240d15021901dd56c1686811ea1c89dafc49122d819cb1c47e7a366227622931a3d280d61f72b34f1e9e5f279ca82ae4e104440d1

data/README.md

@@ -54,7 +54,7 @@ The engine mounts at `/webhooks` automatically.
 
 ### View events
 
-Visit `/webhooks` to see all received webhooks. Click any event to see the full payload, headers and status.
+Visit `/webhooks` to see all received webhooks. Click any event to view all the payload details and copy the payload or download as JSON.
 
 <img alt="Fuik event detail interface" src="https://raw.githubusercontent.com/Rails-Designer/fuik/HEAD/.github/docs/event-detail.jpg" style="max-width: 100%;">
 
@@ -63,15 +63,14 @@ Visit `/webhooks` to see all received webhooks. Click any event to see the full
 
 ### Add business logic
 
-Generate event handlers when you're ready to automate:
+Generate classes for events you want to process:
 ```bash
-bin/rails generate fuik:provider stripe checkout_session_completed customer_subscription_updated
+bin/rails generate fuik:provider stripe checkout_session_completed
 ```
 
 This creates:
 - `app/webhooks/stripe/base.rb`
 - `app/webhooks/stripe/checkout_session_completed.rb`
-- `app/webhooks/stripe/customer_subscription_updated.rb`
 
 Each class is a thin wrapper around your business logic:
 ```ruby
@@ -149,6 +148,12 @@ event_id:
   key: custom_id
 ```
 
+The options for `event_type`'s source are:
+
+- header
+- payload
+- static; for cases when no event type is present in header or payload
+
 
 ## Add your custom provider
 

data/app/assets/images/fuik/icons/webhook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#64748b" viewBox="0 0 256 256"><path d="M178.16 176h-66.84a48 48 0 1 1-85.72-36.81 8 8 0 0 1 12.8 9.61A31.69 31.69 0 0 0 32 168a32 32 0 0 0 64 0 8 8 0 0 1 8-8h74.16a16 16 0 1 1 0 16ZM64 184a16 16 0 0 0 14.08-23.61l35.77-58.14a8 8 0 0 0-2.62-11 32 32 0 1 1 46.1-40.06 8 8 0 1 0 14.67-6.4 48 48 0 1 0-75.62 55.33L64.44 152H64a16 16 0 0 0 0 32Zm128-64a48.18 48.18 0 0 0-18 3.49L142.08 71.6A16 16 0 1 0 128 80h.44l35.78 58.15a8 8 0 0 0 11 2.61A32 32 0 1 1 192 200a8 8 0 0 0 0 16 48 48 0 0 0 0-96Z"/></svg>

data/app/assets/stylesheets/fuik/application.css

@@ -68,25 +68,77 @@
       position: relative;
       overflow-x: auto;
     }
+
+    .actions {
+      display: flex;
+      align-items: center;
+      gap: .5rem;
+      position: absolute;
+      top: .5rem; right: .5rem;
+    }
+
+    svg {
+      width: 1rem;
+      aspect-ratio: 1 / 1;
+      color: oklch(from var(--color-text) l c h / 80%);
+      background: var(--color-bg);
+    }
+
+    dd .copy-button .success-icon {
+      display: none;
+    }
+
+    dd:has([data-copy-success="true"]) .copy-button .copy-icon {
+      display: none;
+    }
+
+    dd:has([data-copy-success="true"]) .copy-button .success-icon {
+      display: block;
+    }
   }
 }
 
 @layer components {
-  article {
-    margin-block-end: 1rem;
-    padding-block: .5rem;
-    padding-inline: .75rem;
-    border: 1px solid var(--color-border);
-    border-radius: .5rem;
-
-    &:hover { background: var(--color-bg-hover); }
-
-    a {
-      display: grid;
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-      gap: 1rem;
+  .events {
+    list-style: none;
+
+    li {
+      --icon-width: 1.125rem;
+
+      padding-block: .5rem;
+      padding-inline: .75rem;
+
+      &:hover { background: var(--color-bg-hover); }
+
+      a {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 1rem;
+
+        &:hover { text-decoration: none; }
+      }
+
+      .name {
+        display: grid;
+        grid-template-columns: var(--icon-width) 1fr;
+        align-items: center;
+        gap: .5rem;
+      }
+
+      .icon {
+        width: var(--icon-width);
+        aspect-ratio: 1/1;
+        border-radius: .125rem;
+      }
+
+      code {
+        display: flex;
+        align-items: center;
+      }
+    }
 
-      &:hover { text-decoration: none; }
+    li:not(:first-child) {
+      border-top: 1px solid var(--color-border);
     }
   }
 
@@ -95,18 +147,25 @@
     align-items: center;
     column-gap: .375rem;
 
-    &::before { content: "●"; }
+    &::before {
+      content: "";
+      width: .5rem;
+      aspect-ratio: 1/1;
+      background-color: currentColor;
+      border: 2px solid oklch(from currentColor 1 c h / 85%);
+      border-radius: .5rem;
+    }
 
-    &[data-status="pending"]::before { color: oklch(65% 0.15 75); }
+    &[data-status="pending"]::before { color: oklch(65% .15 80); }
 
-    &[data-status="processed"]::before { color: oklch(65% 0.15 150); }
+    &[data-status="processed"]::before { color: oklch(65% .15 150); }
 
-    &[data-status="failed"]::before { color: oklch(60% 0.2 25); }
+    &[data-status="failed"]::before { color: oklch(60% .2 25); }
   }
 
+  button,
   .copy-button {
     padding: .125rem;
-    color: oklch(from var(--color-text) l c h / 80%);
     background: var(--color-bg);
     border: 0;
     border-radius: .25rem;
@@ -117,15 +176,26 @@
       transition: transform ease-in-out 300ms;
       transform: scale(1.10);
     }
+  }
 
-    &[position="fixed"] {
-      position: absolute;
-      top: .5rem; right: .5rem;
+  .json-highlight {
+    .json-key {
+      color: oklch(35% .15 250);
+      cursor: pointer;
+
+      &:hover {
+        background: oklch(90% 0.02 250);
+      }
     }
 
-    svg {
-      width: 1rem;
-      aspect-ratio: 1 / 1;
+    .json-key-selected {
+      background: oklch(85% 0.05 250);
     }
+
+    .json-string { color: oklch(30% .18 160); }
+    .json-number { color: oklch(40% .15 130); }
+    .json-boolean { color: oklch(45% .18 260); }
+    .json-null { color: oklch(50% .05 250); }
+    .json-punctuation { color: oklch(20% .03 250); }
   }
 }

data/app/controllers/concerns/fuik/event_type.rb

@@ -32,6 +32,8 @@ module Fuik
         request.headers[config[key]["key"]]
       when "payload"
         payload[config[key]["key"]]
+      when "static"
+        config[key]["value"]
       end
     end
 

data/app/controllers/fuik/downloads_controller.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class Fuik::DownloadsController < ApplicationController
+  def create
+    webhook_event = Fuik::WebhookEvent.find(params[:event_id])
+
+    send_data webhook_event.body, filename: "webhook_#{webhook_event.provider}_#{webhook_event.event_id}.json", type: "application/json", disposition: "attachment"
+  end
+end

data/app/controllers/fuik/events_controller.rb

@@ -10,6 +10,11 @@ module Fuik
 
     def show
       @webhook_event = WebhookEvent.find(params[:id])
+
+      respond_to do |format|
+        format.html
+        format.json { render json: @webhook_event }
+      end
     end
   end
 end

data/app/helpers/fuik/highlight_helper.rb

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Fuik
+  module HighlightHelper
+    def highlighted(json)
+      annotate(JSON.parse(json), [], 0).html_safe
+    end
+
+    private
+
+    def annotate(object, current_path, depth)
+      case object
+      when Hash
+        hashed(object, current_path:, depth:)
+      when Array
+        arrayed(object, current_path:, depth:)
+      when String
+        %(<span class="json-string">"#{object}"</span>)
+      when Numeric
+        %(<span class="json-number">#{object}</span>)
+      when TrueClass, FalseClass
+        %(<span class="json-boolean">#{object}</span>)
+      when NilClass
+        '<span class="json-null">null</span>'
+      end
+    end
+
+    def hashed(object, current_path:, depth:)
+      indent = "  " * depth
+      next_indent = "  " * (depth + 1)
+
+      object.each_with_index.map do |(key, value), index|
+        key_path = current_path + [key]
+        path_string = key_path.map { "[\"#{it}\"]" }.join
+
+        comma = (index == object.size - 1) ? "" : '<span class="json-punctuation">,</span>'
+
+        "#{next_indent}#{%(<span class="json-key" data-path='#{path_string}'>"#{key}"</span>)}<span class=\"json-punctuation\">:</span> #{annotate(value, key_path, depth + 1)}#{comma}"
+      end.tap do |lines|
+        lines.unshift('<span class="json-punctuation">{</span>')
+
+        lines.push("#{indent}<span class=\"json-punctuation\">}</span>")
+      end.join("\n")
+    end
+
+    def arrayed(object, current_path:, depth:)
+      indent = "  " * depth
+      next_indent = "  " * (depth + 1)
+
+      object.each_with_index.map do |value, index|
+        comma = (index == object.size - 1) ? "" : '<span class="json-punctuation">,</span>'
+
+        "#{next_indent}#{annotate(value, current_path + [index], depth + 1)}#{comma}"
+      end.tap do |lines|
+        lines.unshift('<span class="json-punctuation">[</span>')
+
+        lines.push("#{indent}<span class=\"json-punctuation\">]</span>")
+      end.join("\n")
+    end
+  end
+end

data/app/helpers/fuik/icon_helper.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Fuik
+  module IconHelper
+    def icon(provider)
+      provider = provider.to_s.downcase
+      path = "fuik/icons/#{provider}.jpg"
+
+      if asset_exists?(path)
+        image_tag path, alt: provider.capitalize, class: "icon"
+      else
+        image_tag "fuik/icons/webhook.svg", alt: "Webhook", class: "icon"
+      end
+    end
+
+    private
+
+    def asset_exists?(path)
+      if defined?(Propshaft)
+        Rails.application.assets.load_path.find(path).present?
+      else
+        Rails.application.assets&.find_asset(path).present?
+      end
+    rescue
+      false
+    end
+  end
+end

data/app/views/fuik/events/_copy_button.html.erb

@@ -1,6 +1,10 @@
-<%# locals: (target:, delay: 5000, position: :relative) %>
-<button data-action="copy" data-target="<%= target %>" data-copy-delay="<%= delay %>" position="<%= position %>" class="copy-button">
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="">
+<%# locals: (target:, delay: 5000) %>
+<button data-action="copy" data-target="<%= target %>" data-copy-delay="<%= delay %>" class="copy-button">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon" class="copy-icon">
     <path fill-rule="evenodd" d="M13.887 3.182c.396.037.79.08 1.183.128C16.194 3.45 17 4.414 17 5.517V16.75A2.25 2.25 0 0 1 14.75 19h-9.5A2.25 2.25 0 0 1 3 16.75V5.517c0-1.103.806-2.068 1.93-2.207.393-.048.787-.09 1.183-.128A3.001 3.001 0 0 1 9 1h2c1.373 0 2.531.923 2.887 2.182ZM7.5 4A1.5 1.5 0 0 1 9 2.5h2A1.5 1.5 0 0 1 12.5 4v.5h-5V4Z" clip-rule="evenodd" ></path>
   </svg>
+
+  <svg class="success-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true" data-slot="icon" stroke-width="">
+    <path d="M200,32H163.74a47.92,47.92,0,0,0-71.48,0H56A16,16,0,0,0,40,48V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V48A16,16,0,0,0,200,32Zm-72,0a32,32,0,0,1,32,32H96A32,32,0,0,1,128,32Zm32,128H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Zm0-32H96a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z"></path>
+  </svg>
 </button>

data/app/views/fuik/events/index.html.erb

@@ -1,15 +1,21 @@
 <h1>Webhooks</h1>
 
-<% @webhook_events.each do |event| %>
-  <article>
-    <%= link_to event_path(event) do %>
-      <span><%= event.provider %></span>
+<ul class="events">
+  <% @webhook_events.each do |event| %>
+    <li>
+      <%= link_to event_path(event) do %>
+        <div class="name">
+          <%= icon event.provider %>
 
-      <code><%= event.event_type %></code>
+          <span><%= event.provider %></span>
+        </div>
 
-      <span class="status" data-status="<%= event.status %>"><%= event.status %></span>
+        <code><%= event.event_type %></code>
 
-      <time><%= event.created_at.strftime("%Y-%m-%d %H:%M:%S") %></time>
-    <% end %>
-  </article>
-<% end %>
+        <span class="status" data-status="<%= event.status %>"><%= event.status %></span>
+
+        <time><%= event.created_at.strftime("%Y-%m-%d %H:%M:%S") %></time>
+      <% end %>
+    </li>
+  <% end %>
+</ul>

data/app/views/fuik/events/show.html.erb

@@ -1,3 +1,5 @@
+<% content_for :title, "#{@webhook_event.provider} / #{@webhook_event.event_type} | Fuik Admin" %>
+
 <h1>
   <%= link_to "Webhooks", root_path %> / <%= @webhook_event.event_id %>
 </h1>
@@ -7,7 +9,7 @@
   <dd><%= @webhook_event.provider %></dd>
 
   <dt>Event ID</dt>
-  <dd><%= tag.code @webhook_event.event_id, id: "event_id" %> <%= render "copy_button", target: "#event_id" %></dd>
+  <dd><%= tag.code @webhook_event.event_id, id: "event_id" %> <%= render "copy_button", target: "event_id" %></dd>
 
   <dt>Type</dt>
   <dd><%= @webhook_event.event_type %></dd>
@@ -19,13 +21,26 @@
   <dd><%= @webhook_event.created_at.strftime("%Y-%m-%d %H:%M:%S") %></dd>
 
   <dt>Payload</dt>
-  <dd><pre id="payload"><%= JSON.pretty_generate(@webhook_event.payload) %></pre> <%= render "copy_button", target: "#payload", position: :fixed %></dd>
+  <dd><pre id="payload" data-root="payload" class="json-highlight"><%= highlighted(JSON.pretty_generate(@webhook_event.payload)) %></pre> <div class="actions"><%= button_to downloads_path, params: { event_id: @webhook_event.id }, method: :post, class: "" do %><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34Zm-56,83.32-24,24a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L120,164.69V120a8,8,0,0,1,16,0v44.69l10.34-10.35a8,8,0,0,1,11.32,11.32ZM152,88V44l44,44Z"/></svg><% end %> <%= render "copy_button", target: "payload" %></div></dd>
 
   <dt>Headers</dt>
-  <dd><pre id="headers"><%= JSON.pretty_generate(@webhook_event.headers) %></pre> <%= render "copy_button", target: "#headers", position: :fixed %></dd>
+  <dd><pre id="headers" class="json-highlight"><%= highlighted JSON.pretty_generate(@webhook_event.headers) %></pre> <div class="actions"><%= render "copy_button", target: "headers" %></div></dd>
 
   <% if @webhook_event.error.present? %>
     <dt>Error</dt>
     <dd><%= @webhook_event.error %></dd>
   <% end %>
 </dl>
+
+<script>
+  document.addEventListener("click", (event) => {
+    if (event.target.classList.contains("json-key")) {
+      const path = event.target.dataset.path;
+      const root = event.target.closest("[data-root]").dataset.root;
+      navigator.clipboard.writeText(root + path);
+
+      event.target.classList.add("json-key-selected");
+      setTimeout(() => event.target.classList.remove("json-key-selected"), 200);
+    }
+  });
+</script>

data/app/views/layouts/fuik/application.html.erb

@@ -1,14 +1,14 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Fuik Admin</title>
+  <title><%= content_for?(:title) ? yield(:title) : "Fuik Admin" %></title>
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
 
   <%= yield :head %>
 
   <%= stylesheet_link_tag "fuik/application", media: "all" %>
-  <script defer src="https://cdn.jsdelivr.net/npm/attractivejs@0.11.0"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/attractivejs@0.12.0"></script>
 </head>
 <body>
   <main>

data/config/routes.rb

@@ -3,6 +3,7 @@
 Fuik::Engine.routes.draw do
   root to: "events#index"
   resources :events, only: %w[show]
+  resources :downloads, only: %w[create]
 
   post ":provider", to: "webhooks#create"
 end

data/lib/fuik/engine.rb

@@ -6,5 +6,12 @@ module Fuik
 
     config.webhooks_controller_parent = "ActionController::Base"
     config.events_controller_parent = "ActionController::Base"
+
+    config.to_prepare do
+      ActiveSupport.on_load(:action_view) do
+        include Fuik::IconHelper
+        include Fuik::HighlightHelper
+      end
+    end
   end
 end

data/lib/fuik/version.rb

@@ -1,3 +1,3 @@
 module Fuik
-  VERSION = "0.8.0"
+  VERSION = "0.9.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: fuik
 version: !ruby/object:Gem::Version
-  version: 0.8.0
+  version: 0.9.0
 platform: ruby
 authors:
 - Rails Designer
@@ -35,11 +35,43 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/images/fuik/icons/adyen.jpg
+- app/assets/images/fuik/icons/anthropic.jpg
+- app/assets/images/fuik/icons/apple.jpg
+- app/assets/images/fuik/icons/basecamp.jpg
+- app/assets/images/fuik/icons/chirpform.jpg
+- app/assets/images/fuik/icons/dropbox.jpg
+- app/assets/images/fuik/icons/facebook.jpg
+- app/assets/images/fuik/icons/fizzy.jpg
+- app/assets/images/fuik/icons/github.jpg
+- app/assets/images/fuik/icons/gitlab.jpg
+- app/assets/images/fuik/icons/google.jpg
+- app/assets/images/fuik/icons/gumroad.jpg
+- app/assets/images/fuik/icons/linkedin.jpg
+- app/assets/images/fuik/icons/loops.jpg
+- app/assets/images/fuik/icons/mailgun.jpg
+- app/assets/images/fuik/icons/mailpace.jpg
+- app/assets/images/fuik/icons/mollie.jpg
+- app/assets/images/fuik/icons/moneybird.jpg
+- app/assets/images/fuik/icons/openai.jpg
+- app/assets/images/fuik/icons/postmark.jpg
+- app/assets/images/fuik/icons/resend.jpg
+- app/assets/images/fuik/icons/shopify.jpg
+- app/assets/images/fuik/icons/slack.jpg
+- app/assets/images/fuik/icons/stripe.jpg
+- app/assets/images/fuik/icons/telegram.jpg
+- app/assets/images/fuik/icons/twitter.jpg
+- app/assets/images/fuik/icons/userlist.jpg
+- app/assets/images/fuik/icons/webhook.svg
+- app/assets/images/fuik/icons/zoom.jpg
 - app/assets/stylesheets/fuik/application.css
 - app/controllers/concerns/fuik/event_type.rb
 - app/controllers/fuik/application_controller.rb
+- app/controllers/fuik/downloads_controller.rb
 - app/controllers/fuik/events_controller.rb
 - app/controllers/fuik/webhooks_controller.rb
+- app/helpers/fuik/highlight_helper.rb
+- app/helpers/fuik/icon_helper.rb
 - app/jobs/fuik/application_job.rb
 - app/models/fuik/application_record.rb
 - app/models/fuik/event.rb
@@ -90,7 +122,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.4
+rubygems_version: 4.0.8
 specification_version: 4
 summary: A fish trap for webhooks
 test_files: []