@xeplr/ui-factory 1.0.13 → 1.1.0

package/src/designs/FlowRunnerSample.jsx

@@ -4,9 +4,9 @@ import ScreenSample from './ScreenSample.jsx'
 // A flow, running: the screen the run is parked on, and one button forward.
 //
 // Presentation only — everything comes from useFlowRun and useFactoryScreen.
-// The screen saves itself into its own table exactly as it does anywhere else;
-// "Next" hands the run what was filled in, and the run says which screen comes
-// after it. Nothing here knows the journey.
+// "Next" saves the screen into its own table (one AJAX call, only if anything
+// is unsaved), then hands the run what was filled in, and the run says which
+// screen comes after it. Nothing here knows the journey.
 
 export default function FlowRunnerSample({ run, screen, className, style, title, renderDone }) {
   const values = useRef({})
@@ -47,7 +47,9 @@ export default function FlowRunnerSample({ run, screen, className, style, title,
           ...screen,
           // The flow's forward button IS the screen's own, renamed: one button,
           // not two that both look like the way on.
-          done: () => run.submit(values.current, record.current),
+          // The id comes from the save that Next just made when there was one:
+          // a new record's id has not reached the ref yet (that is a render away).
+          done: (r) => run.submit(values.current, r && r.record && r.record[screen.recordKey] != null ? r.record[screen.recordKey] : record.current),
           doneLabel: run.sending ? 'Saving…' : 'Next'
         }}
       />

package/src/designs/ListView.jsx

@@ -73,28 +73,47 @@ export default function ListView({ node, doc, design, list, onEdit, onDelete, on
     rowActions.push({ key: 'extra-' + i + '-' + a.label, label: a.label, variant: a.variant, onClick: (row) => a.onClick(row.__record) })
   })
 
-  return (
-    <div className="xeplr-factory-list" style={style}>
-      <div className="xeplr-factory-list-head">
-        <span className="xeplr-factory-list-title">{p.title}</span>
-        {list.loading && <span className="xeplr-factory-hint">Loading…</span>}
-        {list.error && <span className="xeplr-factory-error-inline" role="alert">{list.error}</span>}
-        {actions.includes('new') && (
-          <button type="button" className="xeplr-factory-list-new" onClick={onNew}>+ New</button>
-        )}
+  const pageSize = p.pageSize || 10
+  const title = <span className="xeplr-factory-list-title">{p.title}</span>
+  const notes = (
+    <>
+      {list.loading && <span className="xeplr-factory-hint">Loading…</span>}
+      {list.error && <span className="xeplr-factory-error-inline" role="alert">{list.error}</span>}
+    </>
+  )
+  const newButton = actions.includes('new') && (
+    <button type="button" className="xeplr-factory-list-new" onClick={onNew}>+ New</button>
+  )
+
+  // ONE CARD. With rows, the title and + New ride in the table's own toolbar
+  // rather than in a header bar stacked on top of it — two bars, two frames,
+  // and a "Clear Sort" nobody asked for. Paging shows only when there is more
+  // than one page of it.
+  // Nothing to show yet: the header alone, over the empty state. (Loading and
+  // errors over rows already shown stay in the toolbar — the table does not
+  // blink away on every refresh.)
+  if (rows.length === 0) {
+    return (
+      <div className="xeplr-factory-list" style={style}>
+        <div className="xeplr-factory-list-head">{title}{notes}{newButton}</div>
+        {!list.loading && !list.error && <div className="xeplr-factory-list-empty">Nothing saved yet.</div>}
       </div>
-      {!list.loading && !list.error && rows.length === 0 ? (
-        <div className="xeplr-factory-list-empty">Nothing saved yet.</div>
-      ) : (
-        <XeplrTable
-          data={rows}
-          schema={{ 0: { key: listSource(doc, node) || 'records', columns: columns.map((c) => ({ accessor: c.field, header: c.label })) } }}
-          pageSize={p.pageSize || 10}
-          rowActions={rowActions.length ? rowActions : undefined}
-          rowClassName={(row) => (currentId !== null && currentId !== undefined && row.__record && row.__record[recordKey] === currentId ? 'xeplr-factory-row-open' : null)}
-          enableFiltering={rows.length > 5}
-        />
-      )}
+    )
+  }
+
+  return (
+    <div className="xeplr-factory-list xeplr-factory-list--table" style={style}>
+      <XeplrTable
+        data={rows}
+        schema={{ 0: { key: listSource(doc, node) || 'records', columns: columns.map((c) => ({ accessor: c.field, header: c.label })) } }}
+        pageSize={pageSize}
+        enablePagination={rows.length > pageSize}
+        rowActions={rowActions.length ? rowActions : undefined}
+        rowClassName={(row) => (currentId !== null && currentId !== undefined && row.__record && row.__record[recordKey] === currentId ? 'xeplr-factory-row-open' : null)}
+        enableFiltering={rows.length > 5}
+        toolbarLeading={() => <>{title}{notes}</>}
+        toolbarActions={() => newButton || null}
+      />
     </div>
   )
 }

package/src/designs/Palette.jsx

@@ -23,7 +23,8 @@ export default function Palette({ groups, onAdd }) {
               onClick={() => onAdd(c.type)}
               title={`Drag onto the screen, or click to add ${c.label.toLowerCase()} at the bottom`}
             >
-              <span className={`xeplr-factory-palette-icon xeplr-factory-palette-icon--${c.type}`} aria-hidden="true" />
+              {/* A ready-made field wears the icon of the control it is made of. */}
+              <span className={`xeplr-factory-palette-icon xeplr-factory-palette-icon--${c.icon || c.type}`} aria-hidden="true" />
               {c.label}
             </button>
           ))}

package/src/designs/PropertyPanel.jsx

@@ -1,4 +1,6 @@
+import { useEffect, useState } from 'react'
 import { getAtPath } from '../propertyPath.js'
+import { FIELD_PRESETS, presetFor } from '../presets.js'
 import { slugify, inputNodes } from '../document.js'
 import { FONT_FAMILIES, STYLE_KEYS, SCREEN_STYLE_KEYS, LIST_ACTIONS, FILE_KINDS } from '../controls.js'
 
@@ -6,7 +8,57 @@ import { FONT_FAMILIES, STYLE_KEYS, SCREEN_STYLE_KEYS, LIST_ACTIONS, FILE_KINDS
 // each field there names a path and an editor type, and this file owns only
 // what each editor type looks like. A new property is a line in controls.js.
 
-export default function PropertyPanel({ doc, node, control, errors, tables, screens, lockedNames, onChange, onScreenChange, onRemove, selectionCount }) {
+/**
+ * WHAT KIND OF FIELD THIS IS — at the top of every field's panel, and
+ * changeable at any time: a plain control (Text, Number…) or a ready-made one
+ * (Email, LinkedIn profile, Age…). Changing it keeps the label, name, position
+ * and required, and says what did not carry over.
+ *
+ * Under it, when the label reads like a ready-made field this is not ("LinkedIn
+ * URL" on a plain text box), the offer to make it one — or to stop asking.
+ */
+function FieldType({ node, controls, hint, onConvert, onKeepPlain }) {
+  const [note, setNote] = useState(null)
+  useEffect(() => { setNote(null) }, [node.id])
+  const registry = controls || {}
+  const plain = Object.values(registry).filter((c) => c.input)
+  const ready = FIELD_PRESETS.filter((p) => registry[p.control] && registry[p.control].input)
+  const current = presetFor(node.props && node.props.preset) ? 'preset:' + node.props.preset : node.type
+  const change = (target) => {
+    if (target === current) return
+    const dropped = onConvert(target) || []
+    const name = presetFor(target) ? presetFor(target).label : (registry[target] && registry[target].label)
+    setNote(dropped.length ? `Now ${name}. Not carried over: ${dropped.join(', ')}.` : `Now ${name}.`)
+  }
+  const suggested = hint && presetFor(hint.preset)
+  return (
+    <div className="xeplr-factory-fieldtype">
+      <label className="xeplr-factory-prop-label" htmlFor={`xf-type-${node.id}`}>Field type</label>
+      <select id={`xf-type-${node.id}`} className="xeplr-factory-prop-input" value={current} onChange={(e) => change(e.target.value)}>
+        <optgroup label="Controls">
+          {plain.map((c) => <option key={c.type} value={c.type}>{c.label}</option>)}
+        </optgroup>
+        {ready.length > 0 && (
+          <optgroup label="Ready-made fields">
+            {ready.map((p) => <option key={p.key} value={'preset:' + p.key}>{p.label}</option>)}
+          </optgroup>
+        )}
+      </select>
+      {note && <div className="xeplr-factory-prop-help" role="status">{note}</div>}
+      {suggested && (
+        <div className="xeplr-factory-suggest" role="note">
+          <span>{hint.message}.</span>
+          <div className="xeplr-factory-suggest-actions">
+            <button type="button" className="xeplr-factory-primary" onClick={() => change('preset:' + suggested.key)}>Make it {suggested.label}</button>
+            <button type="button" className="xeplr-factory-secondary" onClick={onKeepPlain}>Keep as is</button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function PropertyPanel({ doc, node, control, controls, errors, tables, screens, lockedNames, onChange, onConvert, hint, onScreenChange, onRemove, selectionCount }) {
   if (selectionCount > 1) {
     return (
       <aside className="xeplr-factory-panel">
@@ -30,6 +82,10 @@ export default function PropertyPanel({ doc, node, control, errors, tables, scre
         <button type="button" className="xeplr-factory-link-danger" onClick={onRemove} title="Delete (Del)">Delete</button>
       </header>
 
+      {control.input && onConvert && (
+        <FieldType node={node} controls={controls} hint={hint} onConvert={onConvert} onKeepPlain={() => onChange('props.preset', false)} />
+      )}
+
       {control.properties.map((group) => (
         <fieldset key={group.key} className="xeplr-factory-group">
           <legend>{group.title}</legend>

package/src/designs/ScreenEditorSample.jsx

@@ -0,0 +1,97 @@
+// DESIGNING A FORM WHERE IT IS USED — the body of another package's modal.
+//
+// @xeplr/ui-workflow's designer offers a Screen step and a `screenEditor`
+// render prop: it owns the window, the host owns what is inside it, because a
+// screen belongs to the app and that package knows only a screen key. This is
+// @xeplr/factory's answer to it, so that no application has to write one.
+//
+// Shaped to that contract exactly — ({ screenKey, onDone }) — but it is not
+// about workflow: anything wanting "design this screen, tell me what it holds
+// when it is saved" uses the same component. `screenKey` null means make one.
+//
+// PUBLISH IS WHAT COUNTS. A draft changes nothing anybody can run; publishing
+// is what changes the table and makes the fields real, so that is the moment
+// `onDone` fires and whoever is using the screen is told what it now holds.
+import { useCallback, useEffect, useState } from 'react'
+import { describeScreen, keyFromName, editScreenOf } from '../screenSource.js'
+
+/**
+ * @prop api        a createFactoryApi() instance
+ * @prop screenKey  the screen to design; null to make a new one
+ * @prop onDone     ({ key, name, fields }) → void, on publish
+ * @prop labels     optional copy overrides
+ */
+export function ScreenEditorSample({ api, screenKey, onDone, Builder, labels = {} }) {
+  const [current, setCurrent] = useState(null)   // { key, document, lockedNames }
+  const [name, setName] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [error, setError] = useState(null)
+
+  const open = useCallback(async (key) => {
+    // The draft if there is one, else what is published — with the names that
+    // are already columns and therefore cannot be renamed.
+    const row = await api.loadDraft(key)
+    setCurrent({ key, document: row.document, lockedNames: row.lockedNames || [] })
+  }, [api])
+
+  useEffect(() => {
+    if (!screenKey) return
+    open(screenKey).catch((e) => setError(e.message))
+  }, [screenKey, open])
+
+  // A NEW FORM IS A NEW ENTITY: createEntity makes both screens (the add/edit
+  // form and its list) as drafts. The form half is the one a step shows.
+  const create = async (e) => {
+    e.preventDefault()
+    const label = name.trim()
+    if (!label || busy) return
+    setBusy(true)
+    try {
+      const key = keyFromName(label)
+      const made = await api.createEntity({ entity: key })
+      await open(editScreenOf(made, key + '_edit'))
+      setError(null)
+    } catch (err) {
+      setError(err.message)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const publish = useCallback(async (doc, options) => {
+    const result = await api.publish(doc, options)
+    const row = await api.loadDraft(doc.id)
+    setCurrent((c) => (c && c.key === doc.id ? { ...c, lockedNames: row.lockedNames || [] } : c))
+    if (onDone) onDone(describeScreen(doc))
+    return result
+  }, [api, onDone])
+
+  if (error) return <div className="xf-screen-editor-error">{error}</div>
+
+  if (!current) {
+    if (screenKey) return <p className="xf-screen-editor-wait">{labels.opening || 'Opening'} {screenKey}…</p>
+    return (
+      <form className="xf-screen-editor-new" onSubmit={create}>
+        <label>
+          <span>{labels.nameIt || 'What is this form called?'}</span>
+          <input autoFocus value={name} onChange={(e) => setName(e.target.value)} placeholder={labels.placeholder || 'Leave request'} />
+        </label>
+        <button type="submit" disabled={!name.trim() || busy}>
+          {busy ? (labels.making || 'Making it…') : (labels.make || 'Make the form')}
+        </button>
+      </form>
+    )
+  }
+
+  return (
+    <Builder
+      key={current.key}
+      {...api.builderProps}
+      document={current.document}
+      lockedNames={current.lockedNames}
+      onPublish={publish}
+    />
+  )
+}
+
+export default ScreenEditorSample

package/src/designs/ScreenModal.jsx

@@ -3,8 +3,8 @@ import { useEffect, useRef } from 'react'
 // The popup a list's Edit / New opens its edit screen in.
 //
 // A real dialog: focus moves in, Escape and the backdrop close it, and focus
-// returns to whatever opened it. There is nothing to confirm on close — the
-// screen inside has already saved itself.
+// returns to whatever opened it. Closing is the host's onClose, which asks
+// before dropping unsaved changes (FactoryScreen in pages.jsx).
 
 export default function ScreenModal({ title, width, onClose, children }) {
   const dialogRef = useRef(null)

package/src/designs/ScreenSample.jsx

@@ -11,23 +11,39 @@ import { CHOICE_TYPES } from '../controls.js'
 // The screen is never wider than the width it was designed at, so what was
 // designed at 800px is shown at 800px, and only a narrower screen scales it.
 //
-// NO SUBMIT. The status line says what the background save is doing.
+// SAVE IS A BUTTON, AND AN AJAX CALL — never a form submit. The <form> below
+// exists for semantics only: its submit is swallowed, so Enter in a field
+// posts nothing and saves nothing. Only the Save button saves.
+//
+// ONE FOOTER. Back, "Step 2 of 3" with the save status under it, then Next,
+// Cancel and Save — a single bar under the fields, inset by the screen's
+// margin so its edges line up with theirs.
 
 const STATUS = {
   idle: '',
-  pending: 'Unsaved changes…',
+  pending: 'Unsaved changes',
   saving: 'Saving…',
-  saved: 'All changes saved',
-  incomplete: 'Fill in the required fields to save',
+  saved: 'Saved',
+  incomplete: 'Fill in the required fields',
   invalid: 'Fix the highlighted fields to save'
 }
 
+/** What the background save is doing, in words. */
+function SaveStatus({ ctrl }) {
+  const text = ctrl.status === 'error' ? `Not saved — ${ctrl.saveError}` : STATUS[ctrl.status]
+  return (
+    <span className={`xeplr-factory-footer-status xeplr-factory-footer-status--${ctrl.status}`} role="status" aria-live="polite">
+      {text}
+    </span>
+  )
+}
+
 /**
  * Back and Next, under the page. Next holds at a step whose own fields are not
  * filled in — and shows why, rather than moving on and leaving a problem
  * behind on a step nobody is looking at.
  */
-function StepNav({ ctrl, node, children }) {
+function StepNav({ ctrl, node, status, children }) {
   const at = ctrl.steps.active(node.id)
   const total = ctrl.steps.count(node.id)
   const off = ctrl.steps.disabled(node.id)
@@ -44,28 +60,67 @@ function StepNav({ ctrl, node, children }) {
   // "Step 2 of 4" counts the steps that apply, not the ones ruled out.
   const live = total - off.length
   const place = at - off.filter((i) => i < at).length + 1
+  // A screen that moves on to something else when it is finished — the next
+  // screen of a flow — has ONE way forward: this form's own steps first, then
+  // that. Two buttons both called Next, one of which skips the steps still to
+  // do, is how a journey gets left half filled in.
+  const handsOn = Boolean(children) && Boolean(ctrl.doneLabel)
+  const lastStep = forward === null
   return (
-    <div className="xeplr-factory-stepnav">
+    // Moving between steps (Back, Next) sits on the left as quiet buttons;
+    // Save — the one thing that writes — is the only filled button, on the
+    // right. In a flow, Next IS the way forward, so there it stays filled.
+    <div className="xeplr-factory-footer xeplr-factory-stepnav">
       <button type="button" className="xeplr-factory-secondary" onClick={() => go(back, 'back')} disabled={back === null}>Back</button>
-      <span className="xeplr-factory-stepnav-where">Step {place} of {live}</span>
-      <button type="button" className="xeplr-factory-primary" onClick={() => go(forward, 'next')} disabled={forward === null}>Next</button>
-      {children}
+      {!handsOn && (
+        <button type="button" className="xeplr-factory-secondary" onClick={() => go(forward, 'next')} disabled={lastStep}>Next</button>
+      )}
+      <div className="xeplr-factory-footer-mid">
+        <span className="xeplr-factory-stepnav-where">Step {place} of {live}</span>
+        {status}
+      </div>
+      {handsOn && !lastStep && (
+        <button type="button" className="xeplr-factory-primary" onClick={() => go(forward, 'next')}>Next</button>
+      )}
+      {(!handsOn || lastStep) && children}
     </div>
   )
 }
 
-/** Leaves the page — after whatever is still being saved has gone out. */
-function DoneButton({ ctrl }) {
-  const saving = ctrl.status === 'pending' || ctrl.status === 'saving'
+/**
+ * The ways out, at the end of the footer.
+ *
+ *   Save    one AJAX call. On a page or in a popup (the host gave onDone) it
+ *           then goes back; a form embedded in a page stays, showing "Saved".
+ *   Cancel  goes back without saving — asking first if anything is unsaved.
+ *           Only where there is somewhere to go back to.
+ *
+ * Inside a flow the flow names the button (doneLabel, "Next"): it saves what
+ * is unsaved, then moves the journey on — one button, not two.
+ */
+function SaveButtons({ ctrl }) {
+  const saving = ctrl.status === 'saving'
+  if (ctrl.doneLabel) {
+    return (
+      <button type="button" className="xeplr-factory-primary" disabled={saving}
+        onClick={() => ctrl.flush().then((r) => { if (r && r.ok) ctrl.done(r) })}>
+        {ctrl.doneLabel}
+      </button>
+    )
+  }
+  const save = () => ctrl.save().then((r) => { if (r && r.ok && ctrl.done) ctrl.done() })
   return (
-    <button
-      type="button"
-      className={ctrl.doneLabel ? 'xeplr-factory-primary' : 'xeplr-factory-secondary'}
-      disabled={!ctrl.canSave && ctrl.status === 'invalid'}
-      onClick={() => ctrl.flush().then(ctrl.done, ctrl.done)}
-    >
-      {saving ? 'Saving…' : (ctrl.doneLabel || 'Done')}
-    </button>
+    <>
+      {ctrl.done && (
+        <button type="button" className="xeplr-factory-secondary" disabled={saving}
+          onClick={() => { if (ctrl.confirmDiscard()) ctrl.done() }}>
+          Cancel
+        </button>
+      )}
+      <button type="button" className="xeplr-factory-primary" disabled={saving} onClick={save}>
+        {saving ? 'Saving…' : 'Save'}
+      </button>
+    </>
   )
 }
 
@@ -89,26 +144,22 @@ export default function ScreenSample({ ctrl, className, style, renderPopup }) {
   const shown = ctrl.visibleNodes && ctrl.visibleNodes.length ? ctrl.visibleNodes : doc.nodes
   const pageHeight = (contentBottom(doc, shown) + MARGIN) * aspect * 100
   const fieldNodes = inputNodes(doc)
-  const statusText = ctrl.status === 'error' ? `Not saved — ${ctrl.saveError}` : STATUS[ctrl.status]
-  // A screen with no fields of its own (a list screen) has nothing to save.
+  // A screen with no fields of its own (a list screen) has nothing to save —
+  // and no sheet: its list is the card (factory.css, --bare).
   const hasFields = fieldNodes.length > 0
+  const status = hasFields ? <SaveStatus ctrl={ctrl} /> : null
+  const steppers = ctrl.steps.nodes
 
   return (
     <div
-      className={'xeplr-factory-screen' + (className ? ' ' + className : '')}
-      style={{ maxWidth: doc.width, ...screenStyle(doc), ...style }}
+      className={'xeplr-factory-screen' + (hasFields ? '' : ' xeplr-factory-screen--bare') + (className ? ' ' + className : '')}
+      style={{ maxWidth: doc.width, '--xf-margin': `${MARGIN * 100}%`, ...screenStyle(doc), ...style }}
     >
-      {hasFields && (
-        <div className={`xeplr-factory-status xeplr-factory-status--${ctrl.status}`} role="status" aria-live="polite">
-          <span>{ctrl.recordId !== null && ctrl.recordId !== undefined ? 'Editing record' : 'New record'}</span>
-          <span>{statusText}</span>
-        </div>
-      )}
       <form
         className="xeplr-factory-page"
         style={{ height: `${pageHeight}cqw` }}
-        // Enter in a field saves now rather than posting a page.
-        onSubmit={(e) => { e.preventDefault(); ctrl.saveNow() }}
+        // Never a submit: Enter posts nothing and saves nothing. Save is a button.
+        onSubmit={(e) => e.preventDefault()}
         noValidate
         aria-label={doc.name}
       >
@@ -148,22 +199,30 @@ export default function ScreenSample({ ctrl, className, style, renderPopup }) {
                 extraActions: ctrl.actionsFor ? ctrl.actionsFor(node) : [],
                 // A list with an edit screen opens it in a popup; one on a form
                 // opens the row in the form's own fields.
-                onEdit: (rec) => (node.props.editScreen ? ctrl.openEditor(node, rec) : ctrl.openRecord(rec)),
+                // A list on the form itself swaps the record in the fields — so
+                // unsaved changes to the one showing are asked about first.
+                onEdit: (rec) => (node.props.editScreen ? ctrl.openEditor(node, rec) : (ctrl.confirmDiscard() && ctrl.openRecord(rec))),
                 // eslint-disable-next-line no-alert
                 onDelete: (rec) => ctrl.deleteRecord(node, rec).catch((err) => window.alert(err.message || 'Could not delete')),
-                onNew: () => (node.props.editScreen ? ctrl.openEditor(node, null) : ctrl.newRecord())
+                onNew: () => (node.props.editScreen ? ctrl.openEditor(node, null) : (ctrl.confirmDiscard() && ctrl.newRecord()))
               } : undefined}
             />
           </div>
         ))}
       </form>
-      {ctrl.steps.nodes.map((node, i) => (
-        <StepNav key={node.id} ctrl={ctrl} node={node}>
-          {ctrl.done && i === ctrl.steps.nodes.length - 1 && <DoneButton ctrl={ctrl} />}
-        </StepNav>
-      ))}
-      {ctrl.done && !ctrl.steps.nodes.length && (
-        <div className="xeplr-factory-done"><DoneButton ctrl={ctrl} /></div>
+      {steppers.map((node, i) => {
+        const last = i === steppers.length - 1
+        return (
+          <StepNav key={node.id} ctrl={ctrl} node={node} status={last ? status : null}>
+            {last && (hasFields || ctrl.doneLabel) && <SaveButtons ctrl={ctrl} />}
+          </StepNav>
+        )
+      })}
+      {!steppers.length && (hasFields || ctrl.doneLabel) && (
+        <div className="xeplr-factory-footer">
+          <div className="xeplr-factory-footer-mid">{status}</div>
+          <SaveButtons ctrl={ctrl} />
+        </div>
       )}
       {ctrl.popup && renderPopup && renderPopup(ctrl.popup, ctrl)}
     </div>