@xeplr/ui-factory 1.0.14 → 1.2.0

package/src/designs/BuilderSample.jsx

@@ -1,9 +1,10 @@
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { XeplrCanvas } from '@xeplr/ui-canvas'
 import ControlView from './ControlView.jsx'
 import Palette, { DRAG_TYPE } from './Palette.jsx'
 import PropertyPanel from './PropertyPanel.jsx'
 import { screenStyle } from './styles.js'
+import { presetFor } from '../presets.js'
 
 // The builder, drawn: name and save status on top, controls on the left, the
 // screen on the canvas in the middle, properties on the right — the selected
@@ -14,12 +15,15 @@ import { screenStyle } from './styles.js'
 // units with pageAspect = the screen's aspect: the same geometry ScreenSample
 // renders with, so the builder shows the screen at its real size.
 
+// NOTHING SAVES ITSELF — see the note in useFactoryBuilder. These say what
+// IS, not what is about to happen on its own: "unsaved" is a fact about the
+// screen, and the Save button beside it is what changes it.
 const STATUS = {
   idle: '',
-  pending: 'Unsaved changes…',
+  unsaved: 'Unsaved changes',
   saving: 'Saving…',
-  saved: 'All changes saved',
-  invalid: 'Not saved — fix the problems',
+  saved: 'Saved',
+  invalid: 'Fix the problems to save',
   error: 'Not saved'
 }
 
@@ -30,8 +34,10 @@ export default function BuilderSample({ ctrl, renderPreview, className, style })
 
   function onDrop(e) {
     const type = e.dataTransfer.getData(DRAG_TYPE) || e.dataTransfer.getData('text/plain')
-    const def = ctrl.controls[type]
-    if (!def) return
+    const preset = presetFor(type)
+    const base = ctrl.controls[preset ? preset.control : type]
+    if (!base) return
+    const def = { defaultSize: { ...base.defaultSize, ...(preset && preset.size) } }
     e.preventDefault()
     const inner = e.currentTarget.querySelector('.xeplr-canvas-inner')
     if (!inner) return ctrl.addControl(type)
@@ -45,6 +51,16 @@ export default function BuilderSample({ ctrl, renderPreview, className, style })
     })
   }
 
+  // WITH NOTHING SAVING ITSELF, closing the tab is how work is lost. The
+  // browser's own question is the only one that can be asked this late, and
+  // it is asked ONLY when there is something to lose.
+  useEffect(() => {
+    if (!ctrl.dirty) return undefined
+    function ask(e) { e.preventDefault(); e.returnValue = '' }
+    window.addEventListener('beforeunload', ask)
+    return () => window.removeEventListener('beforeunload', ask)
+  }, [ctrl.dirty])
+
   return (
     <div className={'xeplr-factory-builder' + (className ? ' ' + className : '')} style={style}>
       <header className="xeplr-factory-bar">
@@ -63,8 +79,32 @@ export default function BuilderSample({ ctrl, renderPreview, className, style })
             {problemCount} problem{problemCount === 1 ? '' : 's'}
           </span>
         )}
-        {ctrl.status === 'error' && (
-          <button type="button" className="xeplr-factory-secondary" onClick={ctrl.save}>Retry</button>
+        {/* Suggestions, not problems: they never stop a save or a publish.
+            Clicking one opens the field, where the panel offers the change. */}
+        {ctrl.hints.length > 0 && (
+          <button
+            type="button"
+            className="xeplr-factory-hints"
+            title={ctrl.hints.map((h) => h.message).join('\n')}
+            onClick={() => ctrl.setSelected(new Set([ctrl.hints[0].nodeId]))}
+          >
+            {ctrl.hints.length} suggestion{ctrl.hints.length === 1 ? '' : 's'}
+          </button>
+        )}
+        {/* SAVE IS AN ACT. It is offered whenever there is something to save
+            (and after a failure, which is the same thing), and it is the only
+            thing that writes the draft — trying a layout out and walking away
+            leaves the saved screen as it was. */}
+        {(ctrl.dirty || ctrl.status === 'error') && (
+          <button
+            type="button"
+            className="xeplr-factory-secondary"
+            onClick={ctrl.save}
+            disabled={ctrl.saving || !ctrl.validation.ok}
+            title={ctrl.validation.ok ? 'Save this design' : 'Fix the problems first'}
+          >
+            {ctrl.status === 'error' ? 'Try saving again' : ctrl.saving ? 'Saving…' : 'Save'}
+          </button>
         )}
         {renderPreview && (
           <button type="button" className="xeplr-factory-secondary" aria-pressed={preview} onClick={() => setPreview((p) => !p)}>
@@ -79,20 +119,35 @@ export default function BuilderSample({ ctrl, renderPreview, className, style })
       </header>
 
       {ctrl.publishResult && ctrl.publishResult.confirm && (
-        <div className="xeplr-factory-publish is-confirm" role="alertdialog" aria-label="Confirm removing columns">
+        <div className="xeplr-factory-publish is-confirm" role="alertdialog" aria-label="Confirm changes to saved data">
           <div className="xeplr-factory-confirm-text">
-            <strong>Publishing removes {ctrl.publishResult.confirm.length === 1 ? 'a column' : `${ctrl.publishResult.confirm.length} columns`} and all the data in {ctrl.publishResult.confirm.length === 1 ? 'it' : 'them'}.</strong>
-            <ul>
-              {ctrl.publishResult.confirm.map((c) => (
-                <li key={c.column}><code>{c.column}</code> — {c.records} saved value{c.records === 1 ? '' : 's'}, for every company using this table</li>
-              ))}
-            </ul>
-            This cannot be undone. To keep the data, put the field back before publishing.
+            {ctrl.publishResult.confirm.length > 0 && (
+              <>
+                <strong>Publishing removes {ctrl.publishResult.confirm.length === 1 ? 'a column' : `${ctrl.publishResult.confirm.length} columns`} and all the data in {ctrl.publishResult.confirm.length === 1 ? 'it' : 'them'}.</strong>
+                <ul>
+                  {ctrl.publishResult.confirm.map((c) => (
+                    <li key={c.column}><code>{c.column}</code> — {c.records} saved value{c.records === 1 ? '' : 's'}, for every company using this table</li>
+                  ))}
+                </ul>
+                This cannot be undone. To keep the data, put the field back before publishing.
+              </>
+            )}
+            {/* A field that changed kind: every saved value was checked and fits. */}
+            {(ctrl.publishResult.convert || []).length > 0 && (
+              <>
+                <strong>Publishing converts saved values to their field's new kind.</strong>
+                <ul>
+                  {ctrl.publishResult.convert.map((c) => (
+                    <li key={c.column}><code>{c.column}</code> — {c.from} → {c.to}: all {c.records} saved value{c.records === 1 ? '' : 's'} fit; blank ones become empty</li>
+                  ))}
+                </ul>
+              </>
+            )}
           </div>
           <div className="xeplr-factory-confirm-actions">
-            <button type="button" className="xeplr-factory-danger" disabled={ctrl.publishing}
-              onClick={() => ctrl.publish(ctrl.publishResult.confirm.map((c) => c.column))}>
-              {ctrl.publishing ? 'Publishing…' : 'Remove and publish'}
+            <button type="button" className={ctrl.publishResult.confirm.length ? 'xeplr-factory-danger' : 'xeplr-factory-primary'} disabled={ctrl.publishing}
+              onClick={() => ctrl.publish(ctrl.publishResult.confirm.map((c) => c.column), (ctrl.publishResult.convert || []).map((c) => c.column))}>
+              {ctrl.publishing ? 'Publishing…' : ctrl.publishResult.confirm.length ? 'Remove and publish' : 'Convert and publish'}
             </button>
             <button type="button" className="xeplr-factory-secondary" onClick={ctrl.clearPublishResult}>Cancel</button>
           </div>
@@ -179,12 +234,15 @@ export default function BuilderSample({ ctrl, renderPreview, className, style })
             doc={doc}
             node={ctrl.selectedNode}
             control={ctrl.selectedControl}
+            controls={ctrl.controls}
             selectionCount={ctrl.selected.size}
             errors={ctrl.selectedNode ? ctrl.errorsByNode[ctrl.selectedNode.id] : ctrl.errorsByNode._document}
             tables={ctrl.tables}
             screens={ctrl.screens}
             lockedNames={ctrl.lockedNames}
             onChange={(path, value) => ctrl.setProperty(ctrl.selectedNode.id, path, value)}
+            onConvert={(target) => ctrl.convertControl(ctrl.selectedNode.id, target)}
+            hint={ctrl.selectedNode ? ctrl.hints.find((h) => h.nodeId === ctrl.selectedNode.id) : null}
             onScreenChange={ctrl.setScreen}
             onRemove={ctrl.removeSelected}
           />

package/src/designs/ControlView.jsx

@@ -65,12 +65,21 @@ function inputProps(node, p, error, disabled, onBlur) {
   }
 }
 
+// What each keyboard setting makes the box: its type (the phone keyboard) and
+// what the browser's autofill offers.
+const TEXT_INPUT = {
+  email: { type: 'email', autoComplete: 'email', inputMode: 'email' },
+  tel: { type: 'tel', autoComplete: 'tel', inputMode: 'tel' },
+  url: { type: 'url', autoComplete: 'url', inputMode: 'url' }
+}
+
 function TextView({ node, p, value, error, onChange, onBlur, disabled }) {
+  const kind = TEXT_INPUT[p.inputType] || { type: 'text' }
   return (
     <Field node={node} p={p} error={error}>
       <input
         className="xeplr-factory-input"
-        type="text"
+        {...kind}
         placeholder={p.placeholder || ''}
         value={value ?? ''}
         onChange={(e) => onChange(e.target.value)}

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)