easy_connect 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 654a6e1e269bb504f49b7210387623291db8c164b6dd1a1eff76f865577619e7
+  data.tar.gz: ecbc1fe761242d120982dbd0237c086b78d8bc4bb78db038bbfacea17954da24
+SHA512:
+  metadata.gz: 0eb5312966d53e0d8125b33d152c24a9a1e14c6f162c907ec5cf116a5e2e8eef86f7ac4eb5505d4d799ce8149c6d3536dbd6d557efb3b61022050de175c22cd5
+  data.tar.gz: 1a5b739bcbc85ec4ed1a015085d414f4a1bcbf6aff73f11952eb54af080a4c0010483d5c6ff4123f58c06cbe51919158eaf812111cc5dccb7f12d9ca6ada159f

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright tylercschneider
+
+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,2 @@
+# easy_connect
+A canvas where an admin draws lines between items a Rails host app hands in

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+require "bundler/gem_tasks"

data/app/assets/builds/easy_connect/board.js

@@ -0,0 +1 @@
+(()=>{var X=globalThis.ReactDOM;var{createPortal:ct,createRoot:T,flushSync:ut,hydrateRoot:pt,preconnect:ft,prefetchDNS:mt,preinit:gt,preinitModule:bt,preload:ht,preloadModule:yt,requestFormReset:wt,unstable_batchedUpdates:vt,useFormState:xt,useFormStatus:St,version:kt}=X;var L=globalThis.React,r=L,{Children:Ct,Component:Dt,Fragment:Tt,PureComponent:Lt,StrictMode:Mt,Suspense:$t,cloneElement:Ot,createContext:jt,createElement:At,createRef:Bt,forwardRef:Nt,isValidElement:Pt,lazy:zt,memo:Ht,startTransition:It,useCallback:Wt,useContext:Ft,useDebugValue:Rt,useDeferredValue:Ut,useEffect:_t,useId:Vt,useImperativeHandle:Xt,useLayoutEffect:M,useMemo:Yt,useReducer:qt,useRef:v,useState:g,useSyncExternalStore:Jt,useTransition:Kt}=L;var $=new Map,h=new Map,O=(e,n)=>$.set(e,n),j=()=>{h.forEach(e=>e.unmount()),h.clear()},A=(e,n)=>e.querySelectorAll("[data-react-ui]").forEach(o=>{if(h.has(o))return;let s=$.get(o.dataset.reactUi),d=n(o);h.set(o,d),d.render(r.createElement(s,JSON.parse(o.dataset.props)))});var B=(e,n)=>{let o=()=>A(e,n);e.addEventListener("turbo:load",o),e.addEventListener("turbo:frame-load",o),e.addEventListener("turbo:before-cache",j),e.readyState==="loading"?e.addEventListener("DOMContentLoaded",o):o()};var Y="Your change was not saved because the server could not be reached.",N=({base:e,token:n,fetch:o,onDrawing:s,onError:d,onRedirect:i})=>async(u,p,c)=>{let l=await o(e+u,{method:p,headers:{"Content-Type":"application/json","X-CSRF-Token":n},body:c&&JSON.stringify(c)}).catch(()=>null);if(!l)return d(Y);if(!l.ok){let m=await l.json().catch(()=>({}));return d(m.error||"That change was refused.")}d(null);let f=l.status===204?{}:await l.json().catch(()=>({}));if(f.redirect)return i(f.redirect);s(await(await o(e+".json",{headers:{Accept:"application/json"}})).json())};var y=(e,n,o,s)=>{let d=e.left-o.left+s.scrollLeft,i=e.top-o.top+s.scrollTop;return n==="left"?{x:d,y:i+e.height/2}:n==="top"?{x:d+e.width/2,y:i}:n==="bottom"?{x:d+e.width/2,y:i+e.height}:{x:d+e.width,y:i+e.height/2}},P=(e,n)=>({path:`M ${e.x} ${e.y} L ${n.x} ${n.y}`,midX:(e.x+n.x)/2,midY:(e.y+n.y)/2}),z=(e,n,o,s)=>P(y(e,"bottom",o,s),y(n,"top",o,s)),H=(e,n,o,s)=>{let d=y(e,"right",o,s),i=y(n,"left",o,s);return P(d,i)};var I=e=>{if(!e.rows)return[];let n=new Set(e.lines.flatMap(o=>[o.from,o.to]));return e.rows.flat().filter(o=>!n.has(o.id)).map(o=>o.label)};var q={position:"relative"},J={display:"flex",gap:160,alignItems:"flex-start",padding:24},K={display:"flex",flexDirection:"column",gap:12,minWidth:240},G={display:"flex",flexDirection:"column",gap:72,padding:24},Q={display:"flex",gap:24,alignItems:"flex-start"},W={border:"1px solid #d1d5db",borderRadius:8,padding:"8px 14px",background:"white",cursor:"grab"},F={display:"flex",alignItems:"center",gap:12,padding:"0 24px"},R={padding:"8px 16px",borderRadius:8,border:0,background:"#2563eb",color:"white",fontWeight:600,cursor:"pointer"},Z=e=>e?`Saved ${new Date(e).toLocaleString()}`:"Not saved yet",tt={fontWeight:600},et={fontSize:13,color:"#6b7280"},ot={fontSize:13,color:"#2563eb"},nt=e=>/^https?:\/\//.test(e||""),x={marginTop:6,fontSize:12,padding:"2px 8px",borderRadius:6,border:"1px solid #d1d5db",background:"white",cursor:"pointer"},rt={margin:"0 24px",padding:"12px 14px",borderRadius:8,background:"#fffbeb",color:"#92400e"},st={margin:"0 24px",padding:"8px 14px",borderRadius:8,background:"#fef2f2",color:"#991b1b"},at={position:"absolute",transform:"translate(-50%, -50%)",width:22,height:22,borderRadius:11,border:"1px solid #d1d5db",background:"white",color:"#4b5563",cursor:"pointer",lineHeight:"18px",padding:0},dt={position:"absolute",inset:0,width:"100%",height:"100%",pointerEvents:"none",overflow:"visible"},it=(e,n,o,s)=>{let[d,i]=g([]);return M(()=>{let u=()=>{let p=n.current?.getBoundingClientRect();p&&i(e.lines.flatMap(c=>{let l=o.current[c.from]?.getBoundingClientRect(),f=o.current[c.to]?.getBoundingClientRect();if(!l||!f)return[];let m=e.rows?z:H;return[{...c,...m(l,f,p,n.current)}]}))};return u(),window.addEventListener("resize",u),()=>window.removeEventListener("resize",u)},[e,s]),d},lt=({base:e,token:n,initial:o})=>{let[s,d]=g(o),[i,u]=g(null),p=v(null),c=v({}),[l,f]=g(!1),[m,w]=g([]),S=it(s,p,c,l),k=t=>t.filter(a=>!(l&&a.done)),b=N({base:e,token:n,fetch:(...t)=>window.fetch(...t),onDrawing:d,onError:u,onRedirect:t=>window.location.assign(t)}),_=s.rows?s.rows.flat():s.columns.flatMap(t=>t.items),E=Object.fromEntries(_.map(t=>[t.id,t.label])),V=(t,a)=>{t.preventDefault();let D=t.dataTransfer.getData("text/plain");D&&b("/lines","POST",{from:D,to:a})},C=t=>r.createElement("div",{key:t.id,ref:a=>{c.current[t.id]=a},"data-item":t.id,"data-done":t.done?"true":void 0,draggable:!0,onDragStart:a=>{a.dataTransfer.effectAllowed="link",a.dataTransfer.setData("text/plain",t.id)},onDragOver:a=>a.preventDefault(),onDrop:a=>V(a,t.id),style:t.done?{...W,opacity:.55}:W},r.createElement("div",{style:tt},t.label),(t.details||[]).map(a=>r.createElement("div",{key:a,style:et},a)),r.createElement("button",{type:"button",draggable:!1,style:x,onClick:()=>b(`/items/${encodeURIComponent(t.id)}`,"PATCH",{done:!t.done})},t.done?"Undo done":"Mark done"),nt(t.url)&&r.createElement("a",{href:t.url,target:"_blank",rel:"noopener noreferrer",draggable:!1,style:ot},"Open"));return r.createElement("div",{ref:p,style:q},r.createElement("div",{style:F},r.createElement("button",{type:"button",style:R,onClick:()=>{let t=I(s);t.length?w(t):b("/save","POST")}},"Save"),r.createElement("button",{type:"button",style:x,onClick:()=>f(!l)},l?"Show done items":"Hide done items"),r.createElement("span",{"data-saved":!0},Z(s.saved_at))),m.length>0&&r.createElement("div",{role:"alertdialog",style:rt},r.createElement("p",null,"No line touches ",m.join(", "),". Save anyway?"),r.createElement("div",{style:F},r.createElement("button",{type:"button",style:x,onClick:()=>w([])},"Keep drawing"),r.createElement("button",{type:"button",style:R,onClick:()=>{w([]),b("/save","POST")}},"Save anyway"))),i&&r.createElement("p",{role:"alert",style:st},i),s.rows?r.createElement("div",{style:G},s.rows.map((t,a)=>r.createElement("div",{key:a,"data-row":a,style:Q},k(t).map(C)))):r.createElement("div",{style:J},s.columns.map(t=>r.createElement("section",{key:t.name,style:K},r.createElement("h2",null,t.name),k(t.items).map(C)))),r.createElement("svg",{style:dt},S.map(t=>r.createElement("path",{key:`${t.from} ${t.to}`,"data-line":`${t.from} ${t.to}`,d:t.path,stroke:"#4b5563",strokeWidth:"2",fill:"none"}))),S.map(t=>r.createElement("button",{key:`${t.from} ${t.to}`,type:"button",style:{...at,left:t.midX,top:t.midY},title:`Remove the line from ${E[t.from]} to ${E[t.to]}`,onClick:()=>b("/lines","DELETE",{from:t.from,to:t.to})},"\xD7")))},U=lt;O("easy_connect/board",U);B(document,T);})();

data/app/controllers/concerns/easy_connect/hosted.rb

@@ -0,0 +1,17 @@
+module EasyConnect
+  module Hosted
+    extend ActiveSupport::Concern
+
+    private
+
+    def connect_host
+      @connect_host ||= EasyConnect.host_named(request.path_parameters[:easy_connect_host])
+    end
+
+    def hosted_boards
+      return connect_host.boards unless connect_host.owner_method
+
+      connect_host.boards.where(owner: send(connect_host.owner_method))
+    end
+  end
+end

data/app/controllers/concerns/easy_connect/manage/authenticates_admin.rb

@@ -0,0 +1,19 @@
+module EasyConnect
+  module Manage
+    module AuthenticatesAdmin
+      extend ActiveSupport::Concern
+
+      included do
+        before_action :authenticate_admin
+      end
+
+      private
+
+      def authenticate_admin
+        return unless connect_host.admin_authentication_method
+
+        send(connect_host.admin_authentication_method)
+      end
+    end
+  end
+end

data/app/controllers/easy_connect/manage/base_controller.rb

@@ -0,0 +1,18 @@
+require "keystone_ui/react/mount_helper"
+
+module EasyConnect
+  module Manage
+    class BaseController < EasyConnect.base_controller.constantize
+      include Hosted
+      include AuthenticatesAdmin
+
+      layout -> { connect_host.admin_layout }
+
+      helper KeystoneUi::React::MountHelper
+
+      rescue_from Refused do |refusal|
+        render json: { error: refusal.message }, status: :unprocessable_entity
+      end
+    end
+  end
+end

data/app/controllers/easy_connect/manage/boards_controller.rb

@@ -0,0 +1,14 @@
+module EasyConnect
+  module Manage
+    class BoardsController < BaseController
+      def show
+        @board = hosted_boards.find(params[:id])
+
+        respond_to do |format|
+          format.html
+          format.json { render json: @board.drawing }
+        end
+      end
+    end
+  end
+end

data/app/controllers/easy_connect/manage/items_controller.rb

@@ -0,0 +1,10 @@
+module EasyConnect
+  module Manage
+    class ItemsController < BaseController
+      def update
+        hosted_boards.find(params[:board_id]).mark(params[:id], done: ActiveModel::Type::Boolean.new.cast(params[:done]))
+        head :no_content
+      end
+    end
+  end
+end

data/app/controllers/easy_connect/manage/lines_controller.rb

@@ -0,0 +1,21 @@
+module EasyConnect
+  module Manage
+    class LinesController < BaseController
+      def create
+        board.connect(params[:from], params[:to])
+        head :no_content
+      end
+
+      def destroy
+        board.disconnect(params[:from], params[:to])
+        head :no_content
+      end
+
+      private
+
+      def board
+        @board ||= hosted_boards.find(params[:board_id])
+      end
+    end
+  end
+end

data/app/controllers/easy_connect/manage/saves_controller.rb

@@ -0,0 +1,15 @@
+module EasyConnect
+  module Manage
+    class SavesController < BaseController
+      def create
+        board = hosted_boards.find(params[:board_id])
+        board.mark_saved!
+        address = send(connect_host.after_save_method, board.id) if connect_host.after_save_method
+
+        return render json: { redirect: address } if address.present?
+
+        head :no_content
+      end
+    end
+  end
+end

data/app/javascript/easy_connect/board/Board.jsx

@@ -0,0 +1,158 @@
+import React, { useLayoutEffect, useRef, useState } from "react"
+import { createSender } from "./sender"
+import { between, downward } from "./lines"
+import { untouched } from "./untouched"
+
+const surfaceSide = { position: "relative" }
+
+const columnsSide = { display: "flex", gap: 160, alignItems: "flex-start", padding: 24 }
+
+const column = { display: "flex", flexDirection: "column", gap: 12, minWidth: 240 }
+
+const rowsSide = { display: "flex", flexDirection: "column", gap: 72, padding: 24 }
+
+const row = { display: "flex", gap: 24, alignItems: "flex-start" }
+
+const node = { border: "1px solid #d1d5db", borderRadius: 8, padding: "8px 14px", background: "white", cursor: "grab" }
+
+const toolbar = { display: "flex", alignItems: "center", gap: 12, padding: "0 24px" }
+
+const saveButton = { padding: "8px 16px", borderRadius: 8, border: 0, background: "#2563eb", color: "white", fontWeight: 600, cursor: "pointer" }
+
+const savedWhen = (savedAt) => savedAt ? `Saved ${new Date(savedAt).toLocaleString()}` : "Not saved yet"
+
+const named = { fontWeight: 600 }
+
+const detail = { fontSize: 13, color: "#6b7280" }
+
+const opener = { fontSize: 13, color: "#2563eb" }
+
+const onTheWeb = (address) => /^https?:\/\//.test(address || "")
+
+const marker = { marginTop: 6, fontSize: 12, padding: "2px 8px", borderRadius: 6, border: "1px solid #d1d5db", background: "white", cursor: "pointer" }
+
+const asking = { margin: "0 24px", padding: "12px 14px", borderRadius: 8, background: "#fffbeb", color: "#92400e" }
+
+const refusal = { margin: "0 24px", padding: "8px 14px", borderRadius: 8, background: "#fef2f2", color: "#991b1b" }
+
+const remover = { position: "absolute", transform: "translate(-50%, -50%)", width: 22, height: 22, borderRadius: 11, border: "1px solid #d1d5db", background: "white", color: "#4b5563", cursor: "pointer", lineHeight: "18px", padding: 0 }
+
+const linesLayer = { position: "absolute", inset: 0, width: "100%", height: "100%", pointerEvents: "none", overflow: "visible" }
+
+const useLines = (drawing, surface, nodes, hidingDone) => {
+  const [ placed, setPlaced ] = useState([])
+
+  useLayoutEffect(() => {
+    const measure = () => {
+      const frame = surface.current?.getBoundingClientRect()
+      if (!frame) return
+
+      setPlaced(drawing.lines.flatMap((line) => {
+        const fromBox = nodes.current[line.from]?.getBoundingClientRect()
+        const toBox = nodes.current[line.to]?.getBoundingClientRect()
+        if (!fromBox || !toBox) return []
+
+        const joining = drawing.rows ? downward : between
+        return [ { ...line, ...joining(fromBox, toBox, frame, surface.current) } ]
+      }))
+    }
+
+    measure()
+    window.addEventListener("resize", measure)
+
+    return () => window.removeEventListener("resize", measure)
+  }, [ drawing, hidingDone ])
+
+  return placed
+}
+
+const Board = ({ base, token, initial }) => {
+  const [ drawing, setDrawing ] = useState(initial)
+  const [ error, setError ] = useState(null)
+  const surface = useRef(null)
+  const nodes = useRef({})
+  const [ hidingDone, setHidingDone ] = useState(false)
+  const [ leftOut, setLeftOut ] = useState([])
+  const placed = useLines(drawing, surface, nodes, hidingDone)
+  const shown = (held) => held.filter((item) => !(hidingDone && item.done))
+
+  const send = createSender({ base, token, fetch: (...request) => window.fetch(...request), onDrawing: setDrawing, onError: setError, onRedirect: (address) => window.location.assign(address) })
+
+  const items = drawing.rows ? drawing.rows.flat() : drawing.columns.flatMap((group) => group.items)
+  const labels = Object.fromEntries(items.map((item) => [ item.id, item.label ]))
+
+  const dropped = (event, to) => {
+    event.preventDefault()
+    const from = event.dataTransfer.getData("text/plain")
+    if (from) send("/lines", "POST", { from, to })
+  }
+
+  const drawNode = (item) => (
+    <div key={item.id}
+         ref={(element) => { nodes.current[item.id] = element }}
+         data-item={item.id}
+         data-done={item.done ? "true" : undefined}
+         draggable
+         onDragStart={(event) => { event.dataTransfer.effectAllowed = "link"; event.dataTransfer.setData("text/plain", item.id) }}
+         onDragOver={(event) => event.preventDefault()}
+         onDrop={(event) => dropped(event, item.id)}
+         style={item.done ? { ...node, opacity: 0.55 } : node}>
+      <div style={named}>{item.label}</div>
+      {(item.details || []).map((line) => <div key={line} style={detail}>{line}</div>)}
+      <button type="button" draggable={false} style={marker}
+              onClick={() => send(`/items/${encodeURIComponent(item.id)}`, "PATCH", { done: !item.done })}>{item.done ? "Undo done" : "Mark done"}</button>
+      {onTheWeb(item.url) && <a href={item.url} target="_blank" rel="noopener noreferrer" draggable={false} style={opener}>Open</a>}
+    </div>
+  )
+
+  return (
+    <div ref={surface} style={surfaceSide}>
+      <div style={toolbar}>
+        <button type="button" style={saveButton} onClick={() => {
+          const missing = untouched(drawing)
+          missing.length ? setLeftOut(missing) : send("/save", "POST")
+        }}>Save</button>
+        <button type="button" style={marker} onClick={() => setHidingDone(!hidingDone)}>{hidingDone ? "Show done items" : "Hide done items"}</button>
+        <span data-saved>{savedWhen(drawing.saved_at)}</span>
+      </div>
+      {leftOut.length > 0 && (
+        <div role="alertdialog" style={asking}>
+          <p>No line touches {leftOut.join(", ")}. Save anyway?</p>
+          <div style={toolbar}>
+            <button type="button" style={marker} onClick={() => setLeftOut([])}>Keep drawing</button>
+            <button type="button" style={saveButton} onClick={() => { setLeftOut([]); send("/save", "POST") }}>Save anyway</button>
+          </div>
+        </div>
+      )}
+      {error && <p role="alert" style={refusal}>{error}</p>}
+      {drawing.rows ? (
+        <div style={rowsSide}>
+          {drawing.rows.map((held, index) => (
+            <div key={index} data-row={index} style={row}>{shown(held).map(drawNode)}</div>
+          ))}
+        </div>
+      ) : (
+        <div style={columnsSide}>
+          {drawing.columns.map((group) => (
+            <section key={group.name} style={column}>
+              <h2>{group.name}</h2>
+              {shown(group.items).map(drawNode)}
+            </section>
+          ))}
+        </div>
+      )}
+      <svg style={linesLayer}>
+        {placed.map((line) => (
+          <path key={`${line.from} ${line.to}`} data-line={`${line.from} ${line.to}`} d={line.path} stroke="#4b5563" strokeWidth="2" fill="none" />
+        ))}
+      </svg>
+      {placed.map((line) => (
+        <button key={`${line.from} ${line.to}`} type="button" style={{ ...remover, left: line.midX, top: line.midY }}
+                title={`Remove the line from ${labels[line.from]} to ${labels[line.to]}`}
+                onClick={() => send("/lines", "DELETE", { from: line.from, to: line.to })}>×</button>
+      ))}
+    </div>
+  )
+}
+
+export default Board

data/app/javascript/easy_connect/board/lines.js

@@ -0,0 +1,21 @@
+export const anchor = (box, side, frame, surface) => {
+  const left = box.left - frame.left + surface.scrollLeft
+  const top = box.top - frame.top + surface.scrollTop
+
+  if (side === "left") return { x: left, y: top + box.height / 2 }
+  if (side === "top") return { x: left + box.width / 2, y: top }
+  if (side === "bottom") return { x: left + box.width / 2, y: top + box.height }
+  return { x: left + box.width, y: top + box.height / 2 }
+}
+
+const joined = (a, b) => ({ path: `M ${a.x} ${a.y} L ${b.x} ${b.y}`, midX: (a.x + b.x) / 2, midY: (a.y + b.y) / 2 })
+
+export const downward = (fromBox, toBox, frame, surface) =>
+  joined(anchor(fromBox, "bottom", frame, surface), anchor(toBox, "top", frame, surface))
+
+export const between = (fromBox, toBox, frame, surface) => {
+  const a = anchor(fromBox, "right", frame, surface)
+  const b = anchor(toBox, "left", frame, surface)
+
+  return joined(a, b)
+}

data/app/javascript/easy_connect/board/sender.js

@@ -0,0 +1,20 @@
+const UNREACHABLE = "Your change was not saved because the server could not be reached."
+
+export const createSender = ({ base, token, fetch, onDrawing, onError, onRedirect }) => async (path, method, body) => {
+  const response = await fetch(base + path, {
+    method, headers: { "Content-Type": "application/json", "X-CSRF-Token": token }, body: body && JSON.stringify(body)
+  }).catch(() => null)
+  if (!response) return onError(UNREACHABLE)
+
+  if (!response.ok) {
+    const answered = await response.json().catch(() => ({}))
+    return onError(answered.error || "That change was refused.")
+  }
+
+  onError(null)
+
+  const accepted = response.status === 204 ? {} : await response.json().catch(() => ({}))
+  if (accepted.redirect) return onRedirect(accepted.redirect)
+
+  onDrawing(await (await fetch(base + ".json", { headers: { Accept: "application/json" } })).json())
+}

data/app/javascript/easy_connect/board/untouched.js

@@ -0,0 +1,7 @@
+export const untouched = (drawing) => {
+  if (!drawing.rows) return []
+
+  const touched = new Set(drawing.lines.flatMap((line) => [ line.from, line.to ]))
+
+  return drawing.rows.flat().filter((item) => !touched.has(item.id)).map((item) => item.label)
+}

data/app/javascript/easy_connect/board.jsx

@@ -0,0 +1,8 @@
+import { createRoot } from "react-dom/client"
+import { register } from "keystone_ui-react/src/registry.js"
+import { startMounting } from "keystone_ui-react/src/mounting.js"
+import Board from "./board/Board"
+
+register("easy_connect/board", Board)
+
+startMounting(document, createRoot)

data/app/models/easy_connect/application_record.rb

@@ -0,0 +1,5 @@
+module EasyConnect
+  class ApplicationRecord < ActiveRecord::Base
+    self.abstract_class = true
+  end
+end

data/app/models/easy_connect/board.rb

@@ -0,0 +1,68 @@
+module EasyConnect
+  class Board < ApplicationRecord
+    self.table_name = "easy_connect_boards"
+
+    SHOWN = %w[id label details url done].freeze
+
+    belongs_to :owner, polymorphic: true, optional: true
+
+    validate :board_is_sound
+
+    def mark_saved!
+      update!(saved_at: Time.current)
+    end
+
+    def saved?
+      saved_at.present?
+    end
+
+    def result
+      { shape: shape, items: items.pluck("id"), lines: lines.map { |line| line.values_at("from", "to") } }.to_json
+    end
+
+    def connect(from, to)
+      line = shape_rules.line(from, to)
+      raise Refused, "Those two items are already joined." if lines.include?(line)
+
+      update!(lines: lines + [ line ])
+    end
+
+    def disconnect(from, to)
+      update!(lines: lines - [ shape_rules.line(from, to) ])
+    end
+
+    def add_items(added)
+      update!(items: items + added.map(&:stringify_keys))
+    end
+
+    def remove_items(ids)
+      update!(items: items.reject { |item| ids.include?(item["id"]) },
+        lines: lines.reject { |line| ids.include?(line["from"]) || ids.include?(line["to"]) })
+    end
+
+    def mark(id, done:)
+      raise Refused, "That item is not on this board." unless items.any? { |item| item["id"] == id }
+
+      update!(items: items.map { |item| item["id"] == id ? item.merge("done" => done) : item })
+    end
+
+    def shape_rules
+      Shapes.named(shape).new(groups, items, lines)
+    end
+
+    def drawing
+      shape_rules.placement(SHOWN).merge("lines" => lines, "saved_at" => saved_at&.iso8601)
+    end
+
+    private
+
+    def board_is_sound
+      return errors.add(:shape, "#{shape} is not a shape") unless Shapes.known?(shape)
+
+      shape_rules.problems.each { |problem| errors.add(:base, problem) }
+      items.pluck("id").tally.select { |_id, count| count > 1 }.each_key { |id| errors.add(:items, "share the id #{id}") }
+      items.select { |item| item["label"].blank? }.each { |item| errors.add(:items, "#{item["id"]} has no label") }
+      items.reject { |item| groups.include?(item["group"]) }.each { |item| errors.add(:items, "#{item["id"]} is in a group the board does not have") }
+    end
+  end
+end

data/app/models/easy_connect/rows.rb

@@ -0,0 +1,41 @@
+module EasyConnect
+  class Rows
+    def initialize(ids, lines)
+      @ids = ids
+      @lines = lines
+    end
+
+    def rows
+      walked = walk
+      stranded = @ids - walked.keys
+
+      walked.merge(stranded.index_with((walked.values.max || -1) + 1))
+    end
+
+    private
+
+    def walk
+      seen = {}
+      frontier = starting_points.map { |id| [ id, 0 ] }
+
+      until frontier.empty?
+        id, depth = frontier.shift
+        next if seen.key?(id)
+
+        seen[id] = depth
+        lines_from(id).each { |line| frontier << [ line["to"], depth + 1 ] }
+      end
+
+      seen
+    end
+
+    def starting_points
+      arrived = @lines.map { |line| line["to"] }
+      @ids.reject { |id| arrived.include?(id) }
+    end
+
+    def lines_from(id)
+      @lines.select { |line| line["from"] == id }
+    end
+  end
+end

data/app/models/easy_connect/shapes/connections.rb

@@ -0,0 +1,38 @@
+module EasyConnect
+  module Shapes
+    class Connections
+      def initialize(groups, items, lines = [])
+        @groups = groups
+        @items = items
+        @lines = lines
+      end
+
+      def problems
+        @groups.size == 2 ? [] : [ "A connections board needs exactly two groups" ]
+      end
+
+      def placement(shown)
+        { "columns" => @groups.map { |group| { "name" => group, "items" => held_by(group).map { |item| item.slice(*shown) } } } }
+      end
+
+      def line(from, to)
+        raise Refused, "That item is not on this board." unless group_of(from) && group_of(to)
+        raise Refused, "Both items are in the same group." if group_of(from) == group_of(to)
+
+        ends = [ from, to ].sort_by { |id| @groups.index(group_of(id)) }
+
+        { "from" => ends.first, "to" => ends.last }
+      end
+
+      private
+
+      def held_by(group)
+        @items.select { |item| item["group"] == group }
+      end
+
+      def group_of(id)
+        @items.find { |item| item["id"] == id }&.dig("group")
+      end
+    end
+  end
+end

data/app/models/easy_connect/shapes/ordering.rb

@@ -0,0 +1,34 @@
+module EasyConnect
+  module Shapes
+    class Ordering
+      def initialize(groups, items, lines = [])
+        @groups = groups
+        @items = items
+        @lines = lines
+      end
+
+      def problems
+        []
+      end
+
+      def placement(shown)
+        placed = Rows.new(@items.pluck("id"), @lines).rows
+
+        { "rows" => @items.group_by { |item| placed[item["id"]] }.sort.map { |_row, held| held.map { |item| item.slice(*shown) } } }
+      end
+
+      def line(from, to)
+        raise Refused, "That item is not on this board." unless on_board?(from) && on_board?(to)
+        raise Refused, "A line cannot run from an item to itself." if from == to
+
+        { "from" => from, "to" => to }
+      end
+
+      private
+
+      def on_board?(id)
+        @items.any? { |item| item["id"] == id }
+      end
+    end
+  end
+end

data/app/models/easy_connect/shapes.rb

@@ -0,0 +1,15 @@
+module EasyConnect
+  module Shapes
+    def self.named(name)
+      all.fetch(name)
+    end
+
+    def self.known?(name)
+      all.key?(name)
+    end
+
+    def self.all
+      { "connections" => Connections, "ordering" => Ordering }
+    end
+  end
+end

data/app/views/easy_connect/manage/boards/show.html.erb

@@ -0,0 +1,8 @@
+<% content_for :head do %>
+  <%= javascript_include_tag "keystone_ui/react", defer: true %>
+  <%= javascript_include_tag "easy_connect/board", defer: true %>
+<% end %>
+
+<h1><%= @board.title %></h1>
+
+<%= react_ui("easy_connect/board", { base: manage_board_path(@board), token: form_authenticity_token, initial: @board.drawing }) %>

data/config/routes.rb

@@ -0,0 +1,9 @@
+EasyConnect::Engine.routes.draw do
+  namespace :manage do
+    resources :boards, only: :show do
+      resource :lines, only: [ :create, :destroy ]
+      resource :save, only: :create
+      resources :items, only: :update, id: /[^\/]+/
+    end
+  end
+end

data/db/migrate/20261008120000_create_easy_connect_boards.rb

@@ -0,0 +1,15 @@
+class CreateEasyConnectBoards < ActiveRecord::Migration[8.1]
+  def change
+    create_table :easy_connect_boards do |t|
+      t.string :host, null: false
+      t.references :owner, polymorphic: true, index: false
+      t.string :shape, null: false, default: "connections"
+      t.string :title, null: false
+      t.json :groups, null: false
+      t.json :items, null: false
+      t.timestamps
+    end
+
+    add_index :easy_connect_boards, [ :host, :owner_type, :owner_id ]
+  end
+end

data/db/migrate/20261008130000_add_lines_to_easy_connect_boards.rb

@@ -0,0 +1,5 @@
+class AddLinesToEasyConnectBoards < ActiveRecord::Migration[8.1]
+  def change
+    add_column :easy_connect_boards, :lines, :json, null: false, default: []
+  end
+end

data/db/migrate/20261008140000_add_saved_at_to_easy_connect_boards.rb

@@ -0,0 +1,5 @@
+class AddSavedAtToEasyConnectBoards < ActiveRecord::Migration[8.1]
+  def change
+    add_column :easy_connect_boards, :saved_at, :datetime
+  end
+end

data/lib/easy_connect/engine.rb

@@ -0,0 +1,7 @@
+require "keystone_ui-react"
+
+module EasyConnect
+  class Engine < ::Rails::Engine
+    isolate_namespace EasyConnect
+  end
+end

data/lib/easy_connect/host.rb

@@ -0,0 +1,19 @@
+module EasyConnect
+  class Host
+    attr_reader :name
+    attr_writer :admin_layout
+    attr_accessor :admin_authentication_method, :owner_method, :after_save_method
+
+    def initialize(name)
+      @name = name.to_s
+    end
+
+    def admin_layout
+      @admin_layout || "application"
+    end
+
+    def boards
+      Board.where(host: name)
+    end
+  end
+end

data/lib/easy_connect/version.rb

@@ -0,0 +1,3 @@
+module EasyConnect
+  VERSION = "0.1.0"
+end

data/lib/easy_connect.rb

@@ -0,0 +1,27 @@
+require "easy_connect/version"
+require "easy_connect/host"
+require "easy_connect/engine"
+
+module EasyConnect
+  class Refused < StandardError; end
+
+  class << self
+    attr_writer :base_controller
+
+    def base_controller
+      @base_controller || "ActionController::Base"
+    end
+
+    def host(name)
+      hosts[name.to_s] = Host.new(name)
+    end
+
+    def hosts
+      @hosts ||= {}
+    end
+
+    def host_named(name)
+      hosts.fetch(name.to_s)
+    end
+  end
+end

metadata

@@ -0,0 +1,103 @@
+--- !ruby/object:Gem::Specification
+name: easy_connect
+version: !ruby/object:Gem::Version
+  version: 0.1.0
+platform: ruby
+authors:
+- tylercschneider
+bindir: bin
+cert_chain: []
+date: 1980-01-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 8.1.3
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 8.1.3
+- !ruby/object:Gem::Dependency
+  name: keystone_ui-react
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.1.2
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.1.2
+description: EasyConnect stores boards of items a host app creates, lets an admin
+  draw lines between them, and gives the host the lines as JSON.
+email:
+- tylercschneider@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.md
+- Rakefile
+- app/assets/builds/easy_connect/board.js
+- app/controllers/concerns/easy_connect/hosted.rb
+- app/controllers/concerns/easy_connect/manage/authenticates_admin.rb
+- app/controllers/easy_connect/manage/base_controller.rb
+- app/controllers/easy_connect/manage/boards_controller.rb
+- app/controllers/easy_connect/manage/items_controller.rb
+- app/controllers/easy_connect/manage/lines_controller.rb
+- app/controllers/easy_connect/manage/saves_controller.rb
+- app/javascript/easy_connect/board.jsx
+- app/javascript/easy_connect/board/Board.jsx
+- app/javascript/easy_connect/board/lines.js
+- app/javascript/easy_connect/board/sender.js
+- app/javascript/easy_connect/board/untouched.js
+- app/models/easy_connect/application_record.rb
+- app/models/easy_connect/board.rb
+- app/models/easy_connect/rows.rb
+- app/models/easy_connect/shapes.rb
+- app/models/easy_connect/shapes/connections.rb
+- app/models/easy_connect/shapes/ordering.rb
+- app/views/easy_connect/manage/boards/show.html.erb
+- config/routes.rb
+- db/migrate/20261008120000_create_easy_connect_boards.rb
+- db/migrate/20261008130000_add_lines_to_easy_connect_boards.rb
+- db/migrate/20261008140000_add_saved_at_to_easy_connect_boards.rb
+- lib/easy_connect.rb
+- lib/easy_connect/engine.rb
+- lib/easy_connect/host.rb
+- lib/easy_connect/version.rb
+homepage: https://github.com/DYB-Development/easy_connect
+licenses:
+- MIT
+metadata:
+  homepage_uri: https://github.com/DYB-Development/easy_connect
+  source_code_uri: https://github.com/DYB-Development/easy_connect
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 4.0.20
+specification_version: 4
+summary: A canvas where an admin draws lines between items a Rails host app hands
+  in.
+test_files: []