easy_flow 0.1.0 → 0.2.0

data/app/javascript/easy_flow/canvas/styles.js

@@ -0,0 +1,3 @@
+export const CARD = 240
+export const GAP_X = 40
+export const GAP_Y = 64

data/app/javascript/easy_flow/canvas/useConnectors.js

@@ -0,0 +1,75 @@
+import { useLayoutEffect, useState } from "react"
+
+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 === "right") return { x: left + box.width, y: top + box.height / 2 }
+  if (side === "top") return { x: left + box.width / 2, y: top }
+  return { x: left + box.width / 2, y: top + box.height }
+}
+
+export const shy = (point, side) => {
+  if (side === "top") return { x: point.x, y: point.y - 3 }
+  if (side === "left") return { x: point.x - 3, y: point.y }
+  if (side === "right") return { x: point.x + 3, y: point.y }
+  return { x: point.x, y: point.y + 3 }
+}
+
+export const drawn = (edge, a, b, lane, detour) => {
+  const path = {
+    straight: `M ${a.x} ${a.y} L ${b.x} ${b.y}`,
+    turn: `M ${a.x} ${a.y} H ${b.x} V ${b.y}`,
+    lane: `M ${a.x} ${a.y} V ${lane} H ${b.x} V ${b.y}`,
+    detour: `M ${a.x} ${a.y} H ${detour} V ${b.y} H ${b.x}`
+  }[edge.route]
+
+  return {
+    ...edge, path,
+    midX: edge.route === "detour" ? detour : (a.x + b.x) / 2,
+    midY: edge.route === "lane" ? lane : (a.y + b.y) / 2
+  }
+}
+
+const useConnectors = (flow, surface, cards, watching) => {
+  const [ links, setLinks ] = useState([])
+  const [ extent, setExtent ] = useState({ width: "100%", height: "100%" })
+
+  useLayoutEffect(() => {
+    const measure = () => {
+      const frame = surface.current?.getBoundingClientRect()
+      if (!frame) return
+
+      setExtent({ width: surface.current.scrollWidth, height: surface.current.scrollHeight })
+
+      setLinks(flow.edges.flatMap((edge) => {
+        const fromBox = cards.current[edge.source]?.getBoundingClientRect()
+        const toBox = cards.current[edge.target]?.getBoundingClientRect()
+        if (!fromBox || !toBox) return []
+
+        const a = anchor(fromBox, edge.leaves, frame, surface.current)
+        const b = shy(anchor(toBox, edge.enters, frame, surface.current), edge.enters)
+        const lane = (anchor(fromBox, "bottom", frame, surface.current).y + anchor(toBox, "top", frame, surface.current).y) / 2
+        const detour = edge.leaves === "left" ? Math.min(a.x, b.x) - 28 : Math.max(a.x, b.x) + 28
+
+        return [ drawn(edge, a, b, lane, detour) ]
+      }))
+    }
+
+    measure()
+    window.addEventListener("resize", measure)
+
+    const watcher = new ResizeObserver(measure)
+    if (surface.current) watcher.observe(surface.current)
+
+    return () => {
+      window.removeEventListener("resize", measure)
+      watcher.disconnect()
+    }
+  }, watching)
+
+  return { links, extent }
+}
+
+export default useConnectors

data/app/javascript/easy_flow/canvas/useFlow.js

@@ -0,0 +1,17 @@
+import { useMemo, useState } from "react"
+import { createFlowSender } from "./flowSender"
+
+const useFlow = (base, token, initial) => {
+  const [ flow, setFlow ] = useState(initial)
+  const [ error, setError ] = useState(null)
+  const [ notice, setNotice ] = useState(null)
+
+  const send = useMemo(
+    () => createFlowSender({ base, token, fetch: (...request) => window.fetch(...request), onFlow: setFlow, onError: setError, onNotice: setNotice }),
+    [ base, token ]
+  )
+
+  return { flow, error, notice, send }
+}
+
+export default useFlow

data/app/javascript/easy_flow/canvas.jsx

@@ -0,0 +1,13 @@
+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 Canvas from "./canvas/Canvas"
+
+register("easy_flow/flow-editor", Canvas)
+
+document.addEventListener("easy_flow:flow-named", (event) => {
+  const heading = document.querySelector("[data-flow-heading]")
+  if (heading) heading.textContent = event.detail
+})
+
+startMounting(document, createRoot)

data/app/views/easy_flow/flows/complete.html.erb

@@ -0,0 +1,22 @@
+<% content_for(:title, "Complete") %>
+
+<% starting_over = flow_start_path(@guide.slug) %>
+
+<%= ui_page(max_width: :md) do %>
+  <%= ui_page_header(title: "That's everything", subtitle: "Thanks — here's what you told us") do |header| %>
+    <% header.action do %>
+      <%= ui_button(label: "Start over", href: starting_over, variant: :secondary) %>
+    <% end %>
+  <% end %>
+
+  <%= ui_section do %>
+    <ul class="divide-y divide-gray-100 border-y border-gray-100">
+      <% @answered.each do |step, value| %>
+        <li data-answer="<%= step %>" class="flex items-baseline justify-between gap-6 py-3">
+          <span class="text-gray-600"><%= @guide.question_text(step) %></span>
+          <span class="shrink-0 font-medium text-gray-900"><%= @guide.choice_label(step, value) %></span>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

data/app/views/easy_flow/flows/show.html.erb

@@ -0,0 +1,17 @@
+<% content_for(:title, @flow.title.presence || @flow.slug) %>
+
+<%= ui_page(max_width: :md) do %>
+  <%= ui_page_header(title: @flow.title.presence || @flow.slug) %>
+
+  <%= ui_section do %>
+    <div class="flex flex-wrap items-center gap-3">
+      <% if @flow.each_step? && @flow.definition.present? && !previewing? %>
+        <%= ui_form(action: easy_flow.flow_runs_path(@flow.slug), method: :post) do %>
+          <%= ui_button(label: @flow.start_label.presence || "Start", type: :submit) %>
+        <% end %>
+      <% else %>
+        <%= ui_button(label: @flow.start_label.presence || "Start", href: flow_step_path(@flow.slug)) %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/easy_flow/flows/step.html.erb

@@ -0,0 +1,27 @@
+<% content_for(:title, @guide.headline) %>
+
+<%= ui_page(max_width: :md) do %>
+  <%= link_to "← Start over", flow_start_path(@guide.slug), class: "text-sm text-accent-600 hover:text-accent-700" %>
+
+  <div class="mt-6 mb-6">
+    <%= ui_progress(value: @answers.size, max: [ @guide.steps_on_path(@answers).size, 1 ].max, label: "Question #{@answers.size + 1}") %>
+  </div>
+
+  <%= form_with url: step_form[:url], method: step_form[:method], data: { turbo: false } do %>
+    <% if carries_answers? %>
+      <% @answers.each do |key, value| %>
+        <%= hidden_field_tag "answers[#{key}]", value %>
+      <% end %>
+    <% end %>
+
+    <%= render @drawing, step: @question %>
+
+    <div class="mt-8 flex items-center gap-4">
+      <%= ui_button(label: "Next", type: :submit) %>
+
+      <% if @answers.any? %>
+        <button type="submit" name="back" value="1" formnovalidate class="cursor-pointer text-sm text-gray-500 underline underline-offset-2 hover:text-gray-900">← Back</button>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/app/views/easy_flow/manage/definitions/edit.html.erb

@@ -0,0 +1,13 @@
+<%= ui_page(max_width: :lg) do %>
+  <p class="mb-4">
+    <%= link_to "← Back to the flow", easy_flow.manage_flow_path(@flow), class: "text-sm text-accent-600 hover:text-accent-700" %>
+  </p>
+
+  <%= ui_form_page(title: "Definition", back_url: easy_flow.manage_flow_path(@flow), subtitle: @flow.slug) %>
+
+  <%= ui_form(action: easy_flow.manage_flow_definition_path(@flow), method: :patch) do %>
+    <%= ui_textarea(name: "definition", value: JSON.pretty_generate(@flow.document), rows: 30) %>
+
+    <%= ui_button(label: "Save", type: :submit) %>
+  <% end %>
+<% end %>

data/app/views/easy_flow/manage/flows/edit.html.erb

@@ -0,0 +1,26 @@
+<%= ui_page(max_width: :lg) do %>
+  <p class="mb-4">
+    <%= link_to "← Back to the flow", easy_flow.manage_flow_path(@flow), class: "text-sm text-accent-600 hover:text-accent-700" %>
+  </p>
+
+  <%= ui_form_page(title: "Edit details", back_url: easy_flow.manage_flow_path(@flow)) %>
+
+  <%= ui_form(action: easy_flow.manage_flow_path(@flow), method: :patch) do %>
+    <%= ui_section(title: "How this is introduced") do %>
+      <label class="block text-sm font-medium mb-1">Title</label>
+      <%= ui_input(name: "flow[title]", value: @flow.title) %>
+
+      <label class="block text-sm font-medium mb-1 mt-4">Start label</label>
+      <%= ui_input(name: "flow[start_label]", value: @flow.start_label) %>
+    <% end %>
+
+    <%= ui_section(title: "What this keeps of a run") do %>
+      <%= ui_select(name: "flow[persists]", selected: @flow.persists,
+            options: [ [ "Nothing", "unsaved" ],
+                       [ "Every answer as it is given", "each_step" ],
+                       [ "The whole run once it finishes", "on_finish" ] ]) %>
+    <% end %>
+
+    <%= ui_button(label: "Save", type: :submit) %>
+  <% end %>
+<% end %>

data/app/views/easy_flow/manage/flows/index.html.erb

@@ -0,0 +1,32 @@
+<%= ui_page(max_width: :xl) do %>
+  <%= ui_page_header(title: "Flows", subtitle: "Build and edit your flows") %>
+
+  <%= ui_data_table(
+    items: @flows,
+    columns: [ { title: "Title" }, { slug: "Slug" }, { kind: "Kind" }, { status: "Status" } ],
+    empty_message: "No flows yet."
+  ) do |table| %>
+    <% table.link(:title) { |flow| easy_flow.manage_flow_path(flow) } %>
+    <% table.actions do |flow| %>
+      <%= ui_form(action: easy_flow.manage_flow_path(flow), method: :delete) do %>
+        <%= ui_button(label: "Remove", type: :submit, variant: :secondary) %>
+      <% end %>
+    <% end %>
+  <% end %>
+
+  <%= ui_section(title: "Create a flow") do %>
+    <% if @flow&.errors&.any? %>
+      <%= ui_alert(message: @flow.errors.full_messages.to_sentence, type: :error) %>
+    <% end %>
+
+    <%= ui_form(action: easy_flow.manage_flows_path, method: :post) do %>
+      <label class="block text-sm font-medium mb-1">Slug</label>
+      <%= ui_input(name: "flow[slug]", placeholder: "e.g. business-scorecard") %>
+
+      <label class="block text-sm font-medium mb-1 mt-4">Kind</label>
+      <%= ui_select(name: "flow[kind]", options: [ [ "Scored", "scored" ], [ "Guide", "guide" ] ]) %>
+
+      <%= ui_button(label: "Create", type: :submit, variant: :secondary) %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/easy_flow/manage/flows/show.html.erb

@@ -0,0 +1,26 @@
+<% content_for :head do %>
+  <%= javascript_include_tag "keystone_ui/react", defer: true %>
+  <%= javascript_include_tag "easy_flow/canvas", defer: true %>
+<% end %>
+
+<div class="flex h-screen flex-col overflow-hidden">
+  <header class="flex shrink-0 items-center justify-between gap-4 border-b border-gray-200 px-6 py-3">
+    <div>
+      <h1 class="text-lg font-semibold text-gray-900" data-flow-heading><%= @flow.title.presence || @flow.slug %></h1>
+      <p class="text-sm text-gray-500"><%= @flow.slug %></p>
+    </div>
+    <div class="flex items-center gap-2">
+      <button type="button" data-open-panel
+              onclick="document.dispatchEvent(new CustomEvent('easy_flow:open-flow'))"
+              class="inline-flex items-center justify-center font-semibold rounded-lg border-0 cursor-pointer bg-accent-600 text-white hover:bg-accent-700 text-base px-4 py-2">This flow</button>
+
+      <%= ui_button(label: "Try it", href: easy_flow.manage_flow_preview_path(@flow), variant: :secondary) %>
+
+      <%= ui_button(label: "All flows", href: easy_flow.manage_flows_path, variant: :secondary) %>
+    </div>
+  </header>
+
+  <%= react_ui("easy_flow/flow-editor", { base: easy_flow.manage_flow_canvas_path(@flow), token: form_authenticity_token, initial: @canvas },
+               class: "min-h-0 flex-1",
+               data: { flow_canvas: true }) %>
+</div>

data/app/views/easy_flow/manage/versions/index.html.erb

@@ -0,0 +1,41 @@
+<%= ui_page(max_width: :lg) do %>
+  <p class="mb-4">
+    <%= link_to "← Back to the flow", easy_flow.manage_flow_path(@flow), class: "text-sm text-accent-600 hover:text-accent-700" %>
+  </p>
+
+  <%= ui_page_header(title: "History", subtitle: @flow.title.presence || @flow.slug) %>
+
+  <%= ui_section do %>
+    <ul class="divide-y divide-gray-100 border-y border-gray-100">
+      <% @versions.each do |version| %>
+        <li data-version="<%= version.number %>" class="py-4">
+          <div class="flex items-baseline justify-between gap-4">
+            <span class="font-medium text-gray-900">Version <%= version.number %></span>
+            <span class="text-sm text-gray-500"><%= version.created_at.to_fs(:long) %></span>
+          </div>
+
+          <% if version == @flow.live_version %>
+            <p data-live class="mt-1 text-sm font-medium text-green-700">Visitors run this version</p>
+          <% end %>
+
+          <% if version.changes.any? %>
+            <ul class="mt-2 space-y-0.5">
+              <% version.changes.each do |change| %>
+                <li data-captured class="text-sm text-gray-600"><%= EasyFlow::Change.phrase(change) %></li>
+              <% end %>
+            </ul>
+          <% else %>
+            <p class="mt-2 text-sm text-gray-500">Nothing was recorded against this version.</p>
+          <% end %>
+
+          <% unless version == @versions.first %>
+            <%= button_to "Return the flow to this version",
+                  easy_flow.return_manage_flow_version_path(@flow, version),
+                  form: { data: { turbo: false } }, data: { return: true },
+                  class: "mt-3 inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm text-gray-900 hover:bg-gray-50 cursor-pointer" %>
+          <% end %>
+        </li>
+      <% end %>
+    </ul>
+  <% end %>
+<% end %>

data/app/views/easy_flow/steps/_choosing.html.erb

@@ -0,0 +1,9 @@
+<fieldset>
+  <legend class="mb-5 text-xl font-semibold leading-snug text-gray-900"><%= step.text %></legend>
+
+  <div class="space-y-3">
+    <% step.choices.each do |choice| %>
+      <%= ui_radio_card(name: "answers[#{step.id}]", value: choice.value, label: choice.label.presence || choice.value, hint: choice.hint) %>
+    <% end %>
+  </div>
+</fieldset>

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

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>EasyFlow</title>
+  <%= csrf_meta_tags %>
+  <%= csp_meta_tag %>
+
+  <%= yield :head %>
+</head>
+<body>
+
+<%= yield %>
+
+</body>
+</html>

data/config/routes.rb

@@ -1,2 +1,34 @@
 EasyFlow::Engine.routes.draw do
+  namespace :manage do
+    resources :flows, only: [ :index, :create, :show, :edit, :update, :destroy ] do
+      resource :definition, only: [ :edit, :update ]
+      resource :preview, only: :show, controller: "previews" do
+        get :step
+      end
+      resources :versions, only: :index do
+        post :return, on: :member
+      end
+
+      resource :canvas, only: :show, controller: "canvas" do
+        post   "steps",       action: :add_step
+        patch  "steps/:step", action: :configure_step
+        delete "steps/:step",      action: :remove_step
+        patch  "steps/:step/move", action: :move_step
+        post   "versions",    action: :create
+        post   "publish",     action: :publish
+        patch  "details",     action: :details
+        post   "undo",        action: :undo
+        post   "redo",        action: :redo
+        post   "edges",       action: :connect
+        delete "edges",       action: :disconnect
+      end
+    end
+  end
+
+  post ":slug/runs", to: "flows#start", as: :flow_runs
+  get "runs/:id", to: "flows#step", as: :run
+  patch "runs/:id", to: "flows#update"
+
+  get ":slug", to: "flows#show", as: :flow
+  get ":slug/step", to: "flows#step", as: :flow_step
 end

data/lib/easy_flow/engine.rb

@@ -1,7 +1,18 @@
+require "keystone_ui-react"
+
 module EasyFlow
   class Engine < ::Rails::Engine
     isolate_namespace EasyFlow
 
+    initializer "easy_flow.tailwind" do
+      next unless Gem.loaded_specs.key?("keystone_ui")
+
+      require "keystone_ui"
+      KeystoneUi.configuration.tailwind_sources << root.join("app/views/**/*.erb").to_s
+      KeystoneUi.configuration.tailwind_sources << root.join("app/javascript/**/*.{js,jsx}").to_s
+      KeystoneUi.configuration.tailwind_sources << root.join("app/assets/builds/easy_flow/*.js").to_s
+    end
+
     initializer "easy_flow.step_types" do |app|
       app.config.to_prepare do
         EasyFlow::Start.register

data/lib/easy_flow/version.rb

@@ -1,3 +1,3 @@
 module EasyFlow
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/lib/easy_flow.rb

@@ -21,6 +21,21 @@ module EasyFlow
   DRAWING = "easy_flow/steps/choosing".freeze
 
   class << self
+    attr_writer :layout, :base_controller, :admin_layout
+    attr_accessor :visitor_authorization_method, :refusal_method, :admin_authentication_method
+
+    def layout
+      @layout || "easy_flow/application"
+    end
+
+    def base_controller
+      @base_controller || "ActionController::Base"
+    end
+
+    def admin_layout
+      @admin_layout || "application"
+    end
+
     def draws_with(template)
       @drawing = template
     end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: easy_flow
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - tylercschneider
@@ -23,6 +23,20 @@ dependencies:
     - - ">="
       - !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: EasyFlow stores flows as versioned documents of steps and the connections
   between them, and runs a visitor through the live version one step at a time. Apps
   register their own step types.
@@ -35,6 +49,39 @@ files:
 - MIT-LICENSE
 - README.md
 - Rakefile
+- app/assets/builds/easy_flow/canvas.js
+- app/controllers/concerns/easy_flow/manage/authenticates_admin.rb
+- app/controllers/concerns/easy_flow/manage/draws_canvas.rb
+- app/controllers/easy_flow/application_controller.rb
+- app/controllers/easy_flow/flows_controller.rb
+- app/controllers/easy_flow/manage/base_controller.rb
+- app/controllers/easy_flow/manage/canvas_controller.rb
+- app/controllers/easy_flow/manage/definitions_controller.rb
+- app/controllers/easy_flow/manage/flows_controller.rb
+- app/controllers/easy_flow/manage/previews_controller.rb
+- app/controllers/easy_flow/manage/versions_controller.rb
+- app/javascript/easy_flow/canvas.jsx
+- app/javascript/easy_flow/canvas/Canvas.jsx
+- app/javascript/easy_flow/canvas/Connector.jsx
+- app/javascript/easy_flow/canvas/ConnectorLayer.jsx
+- app/javascript/easy_flow/canvas/Control.jsx
+- app/javascript/easy_flow/canvas/Inspector.jsx
+- app/javascript/easy_flow/canvas/Panel.jsx
+- app/javascript/easy_flow/canvas/Placeholder.jsx
+- app/javascript/easy_flow/canvas/Port.jsx
+- app/javascript/easy_flow/canvas/Records.jsx
+- app/javascript/easy_flow/canvas/StepCard.jsx
+- app/javascript/easy_flow/canvas/Toolbar.jsx
+- app/javascript/easy_flow/canvas/TypePicker.jsx
+- app/javascript/easy_flow/canvas/changes.js
+- app/javascript/easy_flow/canvas/choices.js
+- app/javascript/easy_flow/canvas/flow.js
+- app/javascript/easy_flow/canvas/flowSender.js
+- app/javascript/easy_flow/canvas/ids.js
+- app/javascript/easy_flow/canvas/rows.js
+- app/javascript/easy_flow/canvas/styles.js
+- app/javascript/easy_flow/canvas/useConnectors.js
+- app/javascript/easy_flow/canvas/useFlow.js
 - app/models/easy_flow/admission.rb
 - app/models/easy_flow/application_record.rb
 - app/models/easy_flow/asked.rb
@@ -70,6 +117,16 @@ files:
 - app/models/easy_flow/validator.rb
 - app/models/easy_flow/version.rb
 - app/models/easy_flow/violation.rb
+- app/views/easy_flow/flows/complete.html.erb
+- app/views/easy_flow/flows/show.html.erb
+- app/views/easy_flow/flows/step.html.erb
+- app/views/easy_flow/manage/definitions/edit.html.erb
+- app/views/easy_flow/manage/flows/edit.html.erb
+- app/views/easy_flow/manage/flows/index.html.erb
+- app/views/easy_flow/manage/flows/show.html.erb
+- app/views/easy_flow/manage/versions/index.html.erb
+- app/views/easy_flow/steps/_choosing.html.erb
+- app/views/layouts/easy_flow/application.html.erb
 - config/routes.rb
 - db/migrate/20260924120000_create_easy_flow_definitions.rb
 - db/migrate/20260924120100_create_easy_flow_versions.rb