spina-streamfield 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 01ee088f4f8e8934b19134e09c9e1e26c1d6e4547cd580a58ff82b2fe08eeae2
+  data.tar.gz: d0fbe28fe4ae347d8b7e49c77a188ceb0f395a07d89c4ac8b5a8f8d6d84aa8eb
+SHA512:
+  metadata.gz: 6b7c40f5ef6061702dda7babc0ca0257706b74001524732331aa60ba1b8c9263e34e83a6ae63fd78c3faef2018630c48a5c9bf5073ea7a8a306c983c6b2d8040
+  data.tar.gz: 62dd082829b3bec16f996e6360ee941d85d9f7af0f4b71600d4bf974b091a14ea7749ee835badc394584d6bbaf29be5cbffdfe55f2ab09e93727b1672808ea82

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Winston Kotzan
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,87 @@
+# Spina::Streamfield
+
+A StreamField component for Spina
+
+## Installation
+
+```ruby
+# Gemfile
+gem 'Spina' # prerequisite
+gem 'spina-streamfield'
+```
+## What is this thing?
+
+It's basically a Ruby version of the StreamField component in the Python Wagtail CMS, but for Spina CMS! It provides an open-ended page component where the admin content creator can mixmatch any other Spina component in a sort of list, even custom components that you build in your app.
+
+![streamfield_demo.gif](docs/streamfield_demo.gif)
+
+It was created because I disliked the way Trix stored media like images and YouTube links in the RichText field. Links were hard coded, making them difficult to mass edit or customize how they are displayed.
+
+Here's how StreamField works in Wagtail. This one is very similar in concept:
+
+https://youtu.be/9YLBJC1rPnk?si=EliQ_gNI89cXhinQ
+
+## Usage
+
+Base components that are registered are MultiLine, RichText, and Image. To make other components available in the
+Streamfield:
+```ruby
+# config/initializers/spina.rb
+
+# Custom YouTube component in the hosting program  
+Spina::Part.register(Spina::Parts::YoutubeVideo)
+
+# Register custom StreamField block types.
+# Runs after class reload (which resets @component_types to defaults), so additions are re-applied on each reload.
+Spina::Parts::StreamField.register_component("YouTube Video", Spina::Parts::YoutubeVideo)
+# Spina::Parts::StreamField.unregister_component("Image")  # example: remove a default
+
+
+# config/initializers/themes/default.rb
+theme.parts = [
+  {name: "streamfield", title: "Article Body", part_type: "Spina::Parts::StreamField"},
+]
+
+theme.view_templates = [
+  {name: "page_parts_demo", title: "Page Parts Demo", parts: %w[streamfield]}
+]
+```
+
+In your display template:
+```erb
+<%= # app/views/defaults/pages/page_parts_demo.html.erb %>
+
+<% content(:streamfield)&.each do |item| %>
+  <% if item.part_type == "Spina::Parts::MultiLine" %>
+    <%= markdown(item.content_part.content) %>
+  <% elsif item.part_type == "Spina::Parts::YoutubeVideo" %>
+    <figure class="py-2">
+      <%= render(partial: 'default/pages/youtube_video', locals: { youtube_part: item.content_part }) %>
+    </figure>
+  <% elsif item.part_type == "Spina::Parts::Image" %>
+    <figure class="py-2">
+      <%= content.image_tag(item.content_part, {}, { style: "max-width: 600px;" }) %>
+      <% if item.content_part.alt.present? %>
+        <figcaption><%= item.content_part.alt %></figcaption>
+      <% end %>
+    </figure>
+  <% end %>
+<% end %>
+```
+
+Notice that in the example above I have a Markdown helper that allows me to use Markdown in the MultiLine component:
+```ruby
+module ApplicationHelper
+  def markdown(text_page_part)
+    Kramdown::Document.new(text_page_part.to_s).to_html.html_safe
+  end
+end
+```
+
+## Contributing
+
+Open a PR or Issue if you want, or not
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/app/assets/javascripts/spina/controllers/stream_field_controller.js

@@ -0,0 +1,79 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static get targets() {
+    return ["content", "typeMenu", "addButton"]
+  }
+
+  toggleTypeMenu(event) {
+    event.stopPropagation()
+    this.typeMenuTarget.classList.toggle("hidden")
+  }
+
+  closeTypeMenu() {
+    this.typeMenuTarget.classList.add("hidden")
+  }
+
+  addFields(event) {
+    this.typeMenuTarget.classList.add("hidden")
+
+    let button = event.currentTarget
+    let childIndex = button.dataset.childIndex
+    let time = new Date().getTime()
+    let regex = new RegExp(childIndex, "g")
+    let html = button.dataset.fields.replace(regex, time)
+
+    const parser = new DOMParser()
+    const docFields = parser.parseFromString(html, "text/html")
+    this.contentTarget.appendChild(docFields.body.firstChild)
+  }
+
+  removeFields(event) {
+    this._pendingDeleteId = event.currentTarget.dataset.id
+    this._showConfirmDialog()
+  }
+
+  moveUp(event) {
+    const pane = document.getElementById(event.currentTarget.dataset.id)
+    const prev = pane?.previousElementSibling
+    if (prev) this.contentTarget.insertBefore(pane, prev)
+  }
+
+  moveDown(event) {
+    const pane = document.getElementById(event.currentTarget.dataset.id)
+    const next = pane?.nextElementSibling
+    if (next) this.contentTarget.insertBefore(next, pane)
+  }
+
+  _showConfirmDialog() {
+    if (document.getElementById("stream-field-confirm-dialog")) return
+
+    const dialog = document.createElement("div")
+    dialog.id = "stream-field-confirm-dialog"
+    dialog.innerHTML = `
+      <div class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+        <div class="bg-white rounded-lg shadow-xl p-6 max-w-sm w-full mx-4">
+          <p class="text-gray-700 text-sm mb-4">Are you sure you want to delete this section?</p>
+          <div class="flex gap-3 justify-end">
+            <button id="stream-field-confirm-cancel" class="px-4 py-2 text-sm text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md">Cancel</button>
+            <button id="stream-field-confirm-yes" class="px-4 py-2 text-sm text-white bg-red-600 hover:bg-red-700 rounded-md">Yes</button>
+          </div>
+        </div>
+      </div>
+    `
+    document.body.appendChild(dialog)
+
+    document.getElementById("stream-field-confirm-yes").addEventListener("click", () => this._doDelete())
+    document.getElementById("stream-field-confirm-cancel").addEventListener("click", () => this._hideConfirmDialog())
+  }
+
+  _doDelete() {
+    document.getElementById(this._pendingDeleteId)?.remove()
+    this._hideConfirmDialog()
+  }
+
+  _hideConfirmDialog() {
+    document.getElementById("stream-field-confirm-dialog")?.remove()
+    this._pendingDeleteId = null
+  }
+}

data/app/models/spina/parts/stream_field.rb

@@ -0,0 +1,36 @@
+module Spina
+  module Parts
+    class StreamField < Base
+      include AttrJson::NestedAttributes
+
+      attr_json :content, StreamFieldContent.to_type, array: true
+      attr_json_accepts_nested_attributes_for :content
+
+      @component_types = {
+        "MultiLine" => "Spina::Parts::MultiLine",
+        "Image"     => "Spina::Parts::Image",
+        "Rich Text" => "Spina::Parts::Text"
+      }
+
+      class << self
+        def component_types
+          @component_types.dup.freeze
+        end
+
+        # label - human-readable string shown in the "Add Block" menu
+        # klass - part class or fully-qualified string name
+        def register_component(label, klass)
+          class_name = klass.is_a?(Class) ? klass.name : klass.to_s
+          raise ArgumentError, "label must be a non-empty String" if label.blank?
+          raise ArgumentError, "klass must resolve to a class name" if class_name.blank?
+          @component_types[label] = class_name
+        end
+
+        def unregister_component(label)
+          @component_types.delete(label)
+        end
+      end
+
+    end
+  end
+end

data/app/models/spina/parts/stream_field_content.rb

@@ -0,0 +1,22 @@
+module Spina
+  module Parts
+    class StreamFieldContent < Base
+      include AttrJson::NestedAttributes
+
+      attr_json :part_type, :string, default: "Spina::Parts::MultiLine"
+      attr_json :parts, AttrJson::Type::SpinaPartsModel.new, array: true
+      attr_json_accepts_nested_attributes_for :parts
+
+      def content_part
+        parts&.first
+      end
+
+      def label
+        type_label = StreamField.component_types.key(part_type) ||
+                     part_type.to_s.demodulize
+        content_label = content_part&.label.to_s
+        content_label.present? ? content_label : type_label
+      end
+    end
+  end
+end

data/app/views/spina/admin/parts/stream_fields/_fields.html.erb

@@ -0,0 +1,36 @@
+<div id="pane_<%= f.object.object_id %>" class="mt-6">
+  <%# TODO this HR styling is not working because of tailwind preflight overriding the utility classes %>
+  <hr class="border-t-2 border-solid border-red-900 my-4">
+  <div class="flex gap-3">
+    <div class="flex-1 min-w-0">
+      <div class="flex items-center justify-between mb-1">
+        <h4 class="text-sm font-semibold text-gray-700">
+          <%= Spina::Parts::StreamField.component_types.key(f.object.part_type) || f.object.part_type.to_s.demodulize %>
+        </h4>
+        <%= button_tag "Delete", type: :button, class: "btn btn-default bg-transparent hover:bg-white hover:text-red-500 h-8 px-3", data: {action: "stream-field#removeFields", id: "pane_#{f.object.object_id}"} %>
+      </div>
+
+      <%= f.hidden_field :part_type %>
+
+      <%
+        part_type_class = f.object.part_type.presence || "Spina::Parts::Markdown"
+        content_part = f.object.parts&.first || part_type_class.constantize.new(name: "content")
+      %>
+
+      <%= f.fields_for :parts, [content_part] do |ff| %>
+        <%= ff.hidden_field :type, value: ff.object.class %>
+        <%= ff.hidden_field :name %>
+        <%= render "spina/admin/parts/#{parts_partial_namespace(ff.object.class.to_s)}/form", f: ff %>
+      <% end %>
+    </div>
+
+    <div class="flex flex-col justify-center gap-1 shrink-0">
+      <%= button_tag type: :button, class: "btn btn-default bg-transparent hover:bg-white h-8 px-2", title: "Move up", data: {action: "stream-field#moveUp", id: "pane_#{f.object.object_id}"} do %>
+        <%= heroicon('chevron-up', style: :mini, class: "w-4 h-4") %>
+      <% end %>
+      <%= button_tag type: :button, class: "btn btn-default bg-transparent hover:bg-white h-8 px-2", title: "Move down", data: {action: "stream-field#moveDown", id: "pane_#{f.object.object_id}"} do %>
+        <%= heroicon('chevron-down', style: :mini, class: "w-4 h-4") %>
+      <% end %>
+    </div>
+  </div>
+</div>

data/app/views/spina/admin/parts/stream_fields/_form.html.erb

@@ -0,0 +1,46 @@
+<div class="mt-6" data-controller="stream-field">
+  <label class="block text-sm leading-5 font-medium text-gray-700"><%= f.object.title %></label>
+  <div class="text-gray-400 text-sm"><%= f.object.hint %></div>
+
+  <%
+    # Pre-render a fields template for each allowed part type.
+    # The JS uses these to inject new items when the user picks a type.
+    type_templates = Spina::Parts::StreamField.component_types.map do |type_label, part_class|
+      template_obj = Spina::Parts::StreamFieldContent.new(name: f.object.name, part_type: part_class)
+      html = f.fields_for(:content, [template_obj], child_index: template_obj.object_id) do |builder|
+        render("spina/admin/parts/stream_fields/fields", f: builder)
+      end.gsub("\n", "")
+      { label: type_label, part_class: part_class, html: html, child_index: template_obj.object_id }
+    end
+  %>
+
+  <div class="ml-3" data-stream-field-target="content">
+    <%= f.fields_for :content do |ff| %>
+      <%= render 'spina/admin/parts/stream_fields/fields', f: ff %>
+    <% end %>
+  </div>
+
+  <%# Type-picker dropdown — click "Add Block" to reveal the type menu %>
+  <div class="relative mt-2" data-action="click@window->stream-field#closeTypeMenu">
+    <button type="button" class="text-gray-400 pl-2 hover:text-gray-900 rounded-md truncate text-sm font-medium flex items-center h-10" data-action="stream-field#toggleTypeMenu" data-stream-field-target="addButton">
+      <%= heroicon('plus', style: :mini, class: "w-4 h-4 mr-2 ml-1") %>
+      Add Block
+    </button>
+
+    <div class="hidden absolute left-0 z-10 mt-1 w-48 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5" data-stream-field-target="typeMenu">
+      <div class="py-1" role="menu">
+        <% type_templates.each do |tmpl| %>
+          <button type="button"
+                  class="w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
+                  role="menuitem"
+                  data-action="stream-field#addFields"
+                  data-fields="<%= tmpl[:html] %>"
+                  data-child-index="<%= tmpl[:child_index] %>"
+                  data-type-label="<%= tmpl[:label] %>">
+            <%= tmpl[:label] %>
+          </button>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/lib/spina/streamfield/engine.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Spina
+  module Streamfield
+    class Engine < ::Rails::Engine
+      config.before_initialize do
+        ::Spina.config.tailwind_content.concat(
+          Spina::Streamfield::Engine.root.glob("app/views/**/*.*").map(&:to_s)
+        )
+      end
+
+      initializer "spina.streamfield.importmap" do
+        ::Spina.config.importmap.draw do
+          pin_all_from Spina::Streamfield::Engine.root.join("app/assets/javascripts/spina/controllers"),
+                       under: "controllers",
+                       to: "spina/controllers"
+        end
+      end
+
+      config.to_prepare do
+        ::Spina::Part.register(Spina::Parts::StreamField)
+      end
+    end
+  end
+end

data/lib/spina/streamfield/version.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+module Spina
+  module Streamfield
+    VERSION = "1.0.0"
+  end
+end

data/lib/spina/streamfield.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+require "spina"
+require_relative "streamfield/version"
+require_relative "streamfield/engine"
+
+module Spina
+  module Streamfield
+  end
+end

metadata

@@ -0,0 +1,69 @@
+--- !ruby/object:Gem::Specification
+name: spina-streamfield
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- Winston Kotzan
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2026-05-23 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: spina
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 2.1.0
+description: Adds a Streamfield component to Spina
+email:
+- contact@ustreasuryyieldcurve.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- LICENSE.txt
+- README.md
+- app/assets/javascripts/spina/controllers/stream_field_controller.js
+- app/models/spina/parts/stream_field.rb
+- app/models/spina/parts/stream_field_content.rb
+- app/views/spina/admin/parts/stream_fields/_fields.html.erb
+- app/views/spina/admin/parts/stream_fields/_form.html.erb
+- lib/spina/streamfield.rb
+- lib/spina/streamfield/engine.rb
+- lib/spina/streamfield/version.rb
+homepage: https://github.com/wakproductions/spina-streamfield
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/wakproductions/spina-streamfield
+  source_code_uri: https://github.com/wakproductions/spina-streamfield
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: 3.1.0
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.3.26
+signing_key: 
+specification_version: 4
+summary: Adds a Streamfield component to Spina
+test_files: []