@xeplr/ui-factory 1.6.0 → 1.7.1

package/README.md

@@ -382,6 +382,13 @@ const flows = createFlowsApi({ fetch: authFetch, base: '/api/workflow' })
 - Approvals (another person's turn, with an assignee and a timeout) are not
   part of this designer.
 
+An app page needs only its two API clients — the flow and the forms are
+loaded for it:
+
+```jsx
+<FlowDesignerPage factory={factory} flows={flows} flowKey={key} urlKey="flow" />
+```
+
 Controllers, for a design of your own: `useFlowBuilder` (the flow, plus
 `navigationOf` / `setNavigation`), `useScreenEvents` (one screen's events,
 `adopt` to share its draft with a builder), `useFunctionCatalog` (the app's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeplr/ui-factory",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "description": "Design data-entry screens on @xeplr/ui-canvas, save them as JSON, run them as auto-saving forms with lists of saved records — built for Claude to draft and people to refine",
   "type": "module",
   "main": "src/index.js",

package/src/index.js

@@ -31,4 +31,4 @@ export { BuilderSample, ScreenSample, ListView, ScreenModal, FlowRunnerSample, F
 export { FactoryHooks } from './hooks.js'
 
 // Ready-made
-export { FactoryBuilder, FactoryScreen, FlowRunner, FlowBuilder, FlowDesigner } from './pages.jsx'
+export { FactoryBuilder, FactoryScreen, FlowRunner, FlowBuilder, FlowDesigner, FlowDesignerPage } from './pages.jsx'

package/src/pages.jsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useFactoryBuilder } from './useFactoryBuilder.js'
 import { useFactoryScreen } from './useFactoryScreen.js'
 import { useFlowRun } from './useFlowRun.js'
@@ -6,6 +6,7 @@ import { useFlowBuilder } from './useFlowBuilder.js'
 import { useScreenEvents } from './useScreenEvents.js'
 import { useFunctionCatalog } from './useFunctionCatalog.js'
 import { useUrlTab } from './useUrlPlaces.js'
+import { loadScreens } from './screenSource.js'
 import { BuilderSample, ScreenSample, ScreenModal, FlowRunnerSample, FlowBuilderSample, FlowDesignerSample } from './designs/index.js'
 
 /**
@@ -269,3 +270,52 @@ export function FlowDesigner(props) {
     />
   )
 }
+
+/**
+ * <FlowDesigner>, wired to an app's two API clients — what an app's
+ * /configure/flows/:key page renders, so the wiring lives here and not, copied
+ * and drifting, in every generated app.
+ *
+ * Loads the flow and the app's FORMS (screens with fields of their own — a
+ * step shows one to be filled in) and hands everything else straight on.
+ *
+ * @prop factory   createFactoryApi(…) — screens, drafts, publish, the app's functions
+ * @prop flows     createFlowsApi(…) — load, save, publish the flow
+ * @prop flowKey   the flow to open
+ * @prop urlKey    keep the selected step and tab in the URL
+ */
+export function FlowDesignerPage({ factory, flows, flowKey, urlKey, className, style }) {
+  const [flow, setFlow] = useState(null)
+  const [screens, setScreens] = useState(null)
+  const [error, setError] = useState(null)
+  useEffect(() => {
+    let gone = false
+    setFlow(null); setError(null)
+    Promise.all([flows.loadFlow(flowKey), loadScreens(factory)]).then(([f, list]) => {
+      if (gone) return
+      setFlow(f)
+      setScreens(list.filter((s) => s.fields && s.fields.length).map((s) => ({ id: s.key, name: s.name })))
+    }, (e) => { if (!gone) setError(e.message || `Could not open "${flowKey}"`) })
+    return () => { gone = true }
+  }, [factory, flows, flowKey])
+
+  if (error) return <div className="xeplr-factory-invalid" role="alert">{error}</div>
+  if (!flow || !screens) return <div className="xeplr-factory-hint">Opening the flow…</div>
+  return (
+    <FlowDesigner
+      flow={flow}
+      screens={screens}
+      loadScreen={factory.loadScreen}
+      onSave={flows.saveFlow}
+      onPublish={flows.publishFlow}
+      listFunctions={factory.listFunctions}
+      loadDraft={factory.loadDraft}
+      saveDraft={factory.saveDraft}
+      publishScreen={factory.publish}
+      builderProps={factory.builderProps}
+      urlKey={urlKey}
+      className={className}
+      style={style}
+    />
+  )
+}