Merge pull request #157 from sul-dlss/json

Use andypf json viewer.

Author: justinlittman

Gemfile

@@ -51,7 +51,7 @@ gem 'okcomputer'
 gem 'roo' # work with newer Excel files and other types (xlsx, ods, csv).
 # Note that dropping roo-xls for older xls support since not updated for roo 3.x.
 gem 'rsolr'
-gem 'sdr_view_components'
+gem 'sdr_view_components', github: 'sul-dlss/sdr_view_components', branch: 'lookbook'
 gem 'view_component'
 
 group :development, :test do
@@ -76,6 +76,7 @@ end
 
 group :development do
   gem 'erb_lint', require: false
+  gem 'lookbook'
   gem 'overmind'
   # Use console on exceptions pages [https://github.com/rails/web-console]
   gem 'web-console'

Gemfile.lock

@@ -0,0 +1,14 @@
+<%= tag.andypf_json_viewer indent: 3,
+                           expanded:,
+                           theme: 'cupertino',
+                           'show-data-types': false,
+                           'show-toolbar': show_toolbar,
+                           'expand-icon-type': 'arrow',
+                           'show-copy': true,
+                           'show-size': false,
+                           'preserve-expanded': false,
+                           'expand-empty': false,
+                           data: %>
+<% if show_tip %>
+  <p class="mt-2"><small><em>Tip: Shift + Click to expand/collapse all nodes.</em></small></p>
+<% end %>

app/components/elements/json_viewer_component.html.erb

@@ -0,0 +1,23 @@
+# frozen_string_literal: true
+
+module Elements
+  # Component to display a JSON hash in a pretty format.
+  # Wrapper around the @andypf/json-viewer library.
+  # See https://github.com/andypf/json-viewer for more details and documentation of options.
+  class JsonViewerComponent < ApplicationComponent
+    def initialize(hash:, expanded: true, show_toolbar: true, show_tip: false, compact: true)
+      @hash = hash
+      @expanded = expanded
+      @show_toolbar = show_toolbar
+      @show_tip = show_tip
+      @compact = compact
+      super()
+    end
+
+    attr_reader :hash, :expanded, :show_toolbar, :show_tip, :compact
+
+    def data
+      helpers.format_hash(hash, compact:, pretty: false)
+    end
+  end
+end

app/components/elements/json_viewer_component.rb

@@ -20,4 +20,13 @@ def format_datetime(datetime, format: :long)
 
     I18n.l(datetime.in_time_zone('Pacific Time (US & Canada)'), format:)
   end
+
+  def format_hash(hash, compact: true, pretty: true)
+    formatted_hash = compact ? CocinaDisplay::Utils.deep_compact_blank(hash) : hash
+    if pretty
+      JSON.pretty_generate(formatted_hash)
+    else
+      JSON.generate(formatted_hash)
+    end
+  end
 end

app/helpers/application_helper.rb

@@ -2,3 +2,4 @@
 import '@hotwired/turbo-rails'
 import 'controllers'
 import * as bootstrap from 'bootstrap' // eslint-disable-line no-unused-vars
+import '@andypf/json-viewer'

app/javascript/application.js

@@ -28,14 +28,13 @@
 
     <link rel="apple-touch-icon" href="/icon.png">
 
-    <% component_library_url = 'https://cdn.jsdelivr.net/gh/sul-dlss/component-library@v2025-09-11' %>
-    <%= tag.link rel: 'icon', href: "#{component_library_url}/styles/icon.png", type: 'image/png' %>
-    <%= tag.link rel: 'icon', href: "#{component_library_url}/styles/icon.svg", type: 'image/svg+xml' %>
-    <%= tag.link rel: 'apple-touch-icon', href: "#{component_library_url}/styles/icon.png" %>
+    <%= tag.link rel: 'icon', href: "#{Settings.component_library.url}/styles/icon.png", type: 'image/png' %>
+    <%= tag.link rel: 'icon', href: "#{Settings.component_library.url}/styles/icon.svg", type: 'image/svg+xml' %>
+    <%= tag.link rel: 'apple-touch-icon', href: "#{Settings.component_library.url}/styles/icon.png" %>
 
     <%# Includes all stylesheet files in app/assets/stylesheets %>
     <%= stylesheet_link_tag :app, 'data-turbo-track': 'reload' %>
-    <%= tag.link rel: 'stylesheet', href: "#{component_library_url}/styles/sul.css" %>
+    <%= tag.link rel: 'stylesheet', href: "#{Settings.component_library.url}/styles/sul.css" %>
     <%= javascript_importmap_tags %>
   </head>
 

app/views/layouts/application.html.erb

@@ -1,3 +1,3 @@
 <%= turbo_frame_tag(@cocina_hash[:externalIdentifier], 'cocina_json') do %>
-  <pre><%= JSON.pretty_generate(@cocina_hash) %></pre>
+  <%= render Elements::JsonViewerComponent.new(hash: @cocina_hash, expanded: 1, show_tip: true) %>
 <% end %>

app/views/objects/show_json.html.erb

@@ -75,4 +75,6 @@
 
   # Raise error when a before_action's only/except options reference missing actions.
   config.action_controller.raise_on_missing_callback_actions = true
+
+  # config.view_component.previews.default_layout = "lookbook"
 end

config/environments/development.rb

@@ -9,3 +9,4 @@
 pin_all_from 'app/javascript/controllers', under: 'controllers'
 pin 'bootstrap', to: 'bootstrap.bundle.min.js'
 pin 'stimulus-autocomplete' # @3.1.0
+pin '@andypf/json-viewer', to: '@andypf--json-viewer.js' # @2.4.0