@xeplr/ui-factory 1.8.3 → 1.8.5

package/src/designs/ButtonsView.jsx

@@ -0,0 +1,108 @@
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { boxStyle, fieldStyle } from './styles.js'
+
+// A PANEL OF BUTTONS. Each runs a function of the app on the server, with the
+// parameters the screen gives it; which ones show, and which are greyed out,
+// the controller works out from the record (useFactoryScreen.buttonsFor).
+//
+// A button that asks first opens a small dialog: its message, and a note box
+// when it takes a note. Presentation only — the press is the controller's.
+//
+// On the canvas (design) the buttons are drawn as they will look, inert.
+
+export default function ButtonsView({ node, design, panel }) {
+  const p = node.props || {}
+  const style = { ...fieldStyle(p.style), ...boxStyle(p.style) }
+  const [asking, setAsking] = useState(null)       // the button whose dialog is open
+
+  if (design || !panel) {
+    const all = p.buttons || []
+    return (
+      <div className="xeplr-factory-buttons xeplr-factory-buttons--design" style={style}>
+        {p.title && <span className="xeplr-factory-buttons-title">{p.title}</span>}
+        {all.length === 0 && <span className="xeplr-factory-hint">No buttons yet — add them in Properties.</span>}
+        {all.map((b) => <span key={b.id} className={`xeplr-factory-button xeplr-factory-button--${b.variant || 'default'}`}>{b.label}</span>)}
+      </div>
+    )
+  }
+
+  const run = (b) => (b.ask ? setAsking(b) : panel.press(b))
+  const note = panel.note
+
+  return (
+    <div className="xeplr-factory-buttons" style={style} role="group" aria-label={p.title || 'Actions'}>
+      {p.title && <span className="xeplr-factory-buttons-title">{p.title}</span>}
+      {panel.buttons.map((b) => (
+        <button
+          key={b.id}
+          type="button"
+          className={`xeplr-factory-button xeplr-factory-button--${b.variant || 'default'}${b.pressed ? ' xeplr-factory-button--pressed' : ''}`}
+          aria-pressed={b.pressedWhen ? Boolean(b.pressed) : undefined}
+          disabled={b.disabled || Boolean(panel.pressing)}
+          aria-busy={panel.pressing === b.id}
+          onClick={() => run(b)}
+        >
+          {panel.pressing === b.id ? `${b.label}…` : b.label}
+        </button>
+      ))}
+      {note && !asking && (
+        <span className={`xeplr-factory-buttons-note xeplr-factory-buttons-note--${note.kind}`} role={note.kind === 'error' ? 'alert' : 'status'}>
+          {note.text}
+          <button type="button" className="xeplr-factory-buttons-note-close" aria-label="Dismiss" onClick={panel.clearNote}>×</button>
+        </span>
+      )}
+      {asking && (
+        <AskDialog
+          button={asking}
+          busy={panel.pressing === asking.id}
+          error={note && note.kind === 'error' && note.button === asking.id ? note.text : null}
+          onCancel={() => { setAsking(null); panel.clearNote() }}
+          onConfirm={async (typed) => { if (await panel.press(asking, typed)) setAsking(null) }}
+        />
+      )}
+    </div>
+  )
+}
+
+/** "Change status to Packed?" — the button's message, and a note when it takes one. */
+function AskDialog({ button, busy, error, onCancel, onConfirm }) {
+  const ask = button.ask || {}
+  const [typed, setTyped] = useState('')
+  const ref = useRef(null)
+  useEffect(() => {
+    ref.current?.focus()
+    const onKey = (e) => { if (e.key === 'Escape' && !busy) onCancel() }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [busy, onCancel])
+  const titleId = `xf-ask-${button.id}`
+  // At the page's root: inside the screen, a control's own box could clip it.
+  return createPortal(
+    <div className="xeplr-factory-modal-backdrop" onMouseDown={(e) => { if (e.target === e.currentTarget && !busy) onCancel() }}>
+      <div ref={ref} className="xeplr-factory-modal xeplr-factory-ask" role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1}>
+        <header className="xeplr-factory-modal-head">
+          <span className="xeplr-factory-modal-title" id={titleId}>{ask.title || `${button.label}?`}</span>
+          <button type="button" className="xeplr-factory-modal-close" onClick={onCancel} disabled={busy} aria-label="Close">×</button>
+        </header>
+        <div className="xeplr-factory-modal-body">
+          {ask.message && <p className="xeplr-factory-ask-message">{ask.message}</p>}
+          {ask.note && (
+            <label className="xeplr-factory-ask-field" htmlFor={`${titleId}-note`}>
+              <span className="xeplr-factory-ask-label">{ask.note}</span>
+              <textarea id={`${titleId}-note`} className="xeplr-factory-ask-note" rows={3} maxLength={1000} value={typed} onChange={(e) => setTyped(e.target.value)} />
+            </label>
+          )}
+          {error && <p className="xeplr-factory-ask-error" role="alert">{error}</p>}
+        </div>
+        <footer className="xeplr-factory-ask-foot">
+          <button type="button" className="xeplr-factory-secondary" onClick={onCancel} disabled={busy}>Cancel</button>
+          <button type="button" className={button.variant === 'danger' ? 'xeplr-factory-danger' : 'xeplr-factory-primary'} onClick={() => onConfirm(typed)} disabled={busy}>
+            {busy ? 'Working…' : button.label}
+          </button>
+        </footer>
+      </div>
+    </div>,
+    document.body
+  )
+}

package/src/designs/ControlView.jsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { tableColumns, LABEL_PRESETS } from '../controls.js'
 import { stepsOf } from '../document.js'
 import ListView from './ListView.jsx'
+import ButtonsView from './ButtonsView.jsx'
 import { fieldStyle, labelStyle, boxStyle } from './styles.js'
 
 // How each control LOOKS — the one renderer, used both on the builder's
@@ -13,7 +14,7 @@ import { fieldStyle, labelStyle, boxStyle } from './styles.js'
 
 const ids = (node) => `xeplr-factory-${node.id}`
 
-export default function ControlView({ node, mode = 'live', value, error, options, onChange, onBlur, disabled, list, upload, stepper, subform, rows }) {
+export default function ControlView({ node, mode = 'live', value, error, options, onChange, onBlur, disabled, list, upload, stepper, subform, rows, buttons }) {
   const View = VIEWS[node.type]
   if (!View) {
     return <div className="xeplr-factory-unknown">Unknown control “{node.type}”</div>
@@ -35,6 +36,7 @@ export default function ControlView({ node, mode = 'live', value, error, options
       stepper={stepper}
       subform={subform}
       rows={rows}
+      buttons={buttons}
     />
   )
 }
@@ -538,6 +540,7 @@ export const VIEWS = {
   stepper: StepperView,
   label: LabelView,
   list: ListControl,
+  buttons: ({ node, design, buttons }) => <ButtonsView node={node} design={design} panel={buttons} />,
   table: TableView,
   subform: SubformView
 }

package/src/designs/FedList.jsx

@@ -0,0 +1,248 @@
+import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { XeplrTable } from '@xeplr/ui-table'
+import { boxStyle, fieldStyle } from './styles.js'
+
+// A LIST WHOSE ROWS A FUNCTION WORKS OUT (rowsFrom) — live, in @xeplr/ui-table.
+//
+// Everything it shows is TEXT THE SERVER WROTE: a column sorts by its `field`
+// and shows its `text` field, so "Today, 4:00 pm" or "2d 3h" is said once, by
+// the app that knows its time zone and its words, and reads the same in any
+// renderer. What this file draws is only how: a second line, badges, the
+// pictures, an activity line with its hover box.
+//
+// Above the rows: the search box and the filter chips, each chip with the
+// count the function gave it. Presentation only — the query, the rows and
+// what a click does arrive as props.
+
+const OPEN_DELAY_MS = 250
+const CLOSE_DELAY_MS = 200
+const BOX_WIDTH = 380
+const BOX_MAX_HEIGHT = 360
+const MIN_BELOW = 200
+
+export default function FedList({ node, list, query, onOpen, rowDetails, recordKey = 'id', extraActions = [] }) {
+  const p = node.props || {}
+  const columns = Array.isArray(p.columns) ? p.columns : []
+  const rows = list.rows || []
+  const counts = list.counts || {}
+  const chips = Array.isArray(p.filters) ? p.filters : []
+  const active = query.filter || (chips[0] && chips[0].key) || ''
+  const pageSize = p.pageSize || 10
+  const style = { ...fieldStyle(p.style), ...boxStyle(p.style) }
+
+  // The search box shows what is typed at once; the controller asks after a pause.
+  const [typed, setTyped] = useState(query.q)
+  useEffect(() => { setTyped(query.q) }, [query.q])
+
+  const open = p.rowOpen || (p.actions || []).includes('edit') ? onOpen : null
+
+  const rowActions = []
+  if ((p.actions || []).includes('edit')) rowActions.push({ key: 'edit', label: 'Edit', onClick: (row) => onOpen(row) })
+  extraActions.forEach((a, i) => rowActions.push({ key: 'extra-' + i + '-' + a.label, label: a.label, variant: a.variant, onClick: (row) => a.onClick(row) }))
+
+  const schema = {
+    0: {
+      key: node.id,
+      columns: columns.map((c, i) => ({
+        accessor: c.field,
+        header: c.label,
+        enableSorting: c.sortable !== false,
+        cell: ({ row }) => (
+          <Cell column={c} row={row.original} index={row.index} first={i === 0} open={open}
+                details={c.display === 'activity' && c.details ? () => rowDetails(node, c, row.original[recordKey]) : null}
+                onOpenAt={open ? (where) => open(row.original, where) : null} />
+        )
+      }))
+    }
+  }
+
+  // A click anywhere on a row opens it; the first cell is also a real button,
+  // for the keyboard. Clicks on the row's own buttons and links are theirs.
+  function openFromRow(e) {
+    if (!open || e.target.closest('button, a, input, select, .xeplr-factory-activity-box')) return
+    const tr = e.target.closest('tbody tr')
+    const marker = tr && tr.querySelector('[data-xf-row]')
+    if (marker) open(rows[Number(marker.getAttribute('data-xf-row'))])
+  }
+
+  return (
+    <div className="xeplr-factory-list xeplr-factory-list--fed" style={style}>
+      <div className="xeplr-factory-list-tools">
+        {p.title && <span className="xeplr-factory-list-title">{p.title}</span>}
+        {p.search && p.search.placeholder && (
+          <input
+            type="search"
+            className="xeplr-factory-list-search"
+            aria-label={p.search.placeholder}
+            placeholder={p.search.placeholder}
+            value={typed}
+            maxLength={200}
+            onChange={(e) => { setTyped(e.target.value); query.setQ(e.target.value) }}
+          />
+        )}
+        {chips.length > 0 && (
+          <div className="xeplr-factory-chips" role="tablist" aria-label={p.title ? `Filter ${p.title}` : 'Filter'}>
+            {chips.map((f) => (
+              <button
+                key={f.key}
+                type="button"
+                role="tab"
+                aria-selected={f.key === active}
+                className={'xeplr-factory-chip' + (f.key === active ? ' is-on' : '')}
+                onClick={() => query.setFilter(f.key === (chips[0] && chips[0].key) ? '' : f.key)}
+              >
+                {f.label}
+                {counts[f.key] !== undefined && <span className="xeplr-factory-chip-count">{counts[f.key]}</span>}
+              </button>
+            ))}
+          </div>
+        )}
+        {list.loading && <span className="xeplr-factory-hint">Loading…</span>}
+        {list.error && <span className="xeplr-factory-error-inline" role="alert">{list.error}</span>}
+      </div>
+      {rows.length === 0
+        ? !list.loading && !list.error && <div className="xeplr-factory-list-empty">{query.q ? 'Nothing matches that search.' : 'Nothing here yet.'}</div>
+        : (
+          <div className={'xeplr-factory-fed-table' + (open ? ' is-openable' : '')} onClick={openFromRow}>
+            <XeplrTable
+              data={rows}
+              schema={schema}
+              showToolbar={false}
+              enableFiltering={false}
+              pageSize={pageSize}
+              enablePagination={rows.length > pageSize}
+              rowActions={rowActions.length ? rowActions : undefined}
+              rowClassName={(row) => (p.highlight && row && row[p.highlight] ? 'xeplr-factory-row-marked' : null)}
+            />
+          </div>
+        )}
+    </div>
+  )
+}
+
+/** One cell: the server's text, and how this column draws it. */
+function Cell({ column: c, row, index, first, open, details, onOpenAt }) {
+  const value = row[c.field]
+  const shown = c.text ? row[c.text] : value
+  const badges = (c.badges || []).filter((b) => row[b.field])
+  const marker = first ? { 'data-xf-row': index } : {}
+
+  if (c.display === 'images') {
+    const pics = Array.isArray(value) ? value.filter((x) => x && x.src) : []
+    const more = c.more ? Number(row[c.more]) || 0 : 0
+    return (
+      <span className="xeplr-factory-thumbs" {...marker}>
+        {pics.map((img, n) => <img key={n} src={img.src} alt={img.name || ''} title={img.name || ''} loading="lazy" />)}
+        {more > 0 && <small>+{more}</small>}
+      </span>
+    )
+  }
+
+  if (c.display === 'activity') {
+    return <Activity text={text(shown)} details={details} onOpenAt={onOpenAt} marker={marker} />
+  }
+
+  const body = (
+    <>
+      <span className="xeplr-factory-cell-main">{text(shown)}</span>
+      {badges.map((b) => <span key={b.field} className={`xeplr-factory-badge xeplr-factory-badge--${b.tone || 'accent'}`}>{b.label}</span>)}
+      {c.sub && row[c.sub] !== undefined && row[c.sub] !== null && row[c.sub] !== '' && <span className="xeplr-factory-cell-sub">{text(row[c.sub])}</span>}
+    </>
+  )
+  // The first cell of a row that opens is a button: the keyboard's way in.
+  if (first && open) {
+    return <button type="button" className="xeplr-factory-cell xeplr-factory-cell-open" onClick={(e) => { e.stopPropagation(); open(row) }} {...marker}>{body}</button>
+  }
+  return <span className="xeplr-factory-cell" {...marker}>{body}</span>
+}
+
+function text(v) {
+  if (v === undefined || v === null) return ''
+  return typeof v === 'object' ? JSON.stringify(v) : String(v)
+}
+
+/**
+ * WHAT LAST HAPPENED, and a box with the latest few — on hover or focus,
+ * loaded the first time and kept until the line changes. Drawn at the page's
+ * root so the table's scrolling never clips it; under its cell, or above it
+ * near the bottom of the window. A tap on a phone opens the row instead.
+ */
+function Activity({ text: line, details, onOpenAt, marker }) {
+  const cellRef = useRef(null)
+  const timer = useRef(null)
+  const [box, setBox] = useState(null)              // { top, left, maxHeight, above }
+  const [items, setItems] = useState(null)          // { line, list, error }
+
+  useEffect(() => () => clearTimeout(timer.current), [])
+  useEffect(() => { setItems(null) }, [line])
+
+  if (!details) return <span className="xeplr-factory-cell xeplr-factory-activity" {...marker}>{line}</span>
+
+  function show() {
+    clearTimeout(timer.current)
+    timer.current = setTimeout(() => {
+      const r = cellRef.current && cellRef.current.getBoundingClientRect()
+      if (!r) return
+      const below = window.innerHeight - r.bottom - 16
+      const above = below < MIN_BELOW
+      const left = Math.max(8, Math.min(r.left, window.innerWidth - BOX_WIDTH - 8))
+      setBox(above
+        ? { left, bottom: window.innerHeight - r.top + 8, maxHeight: Math.min(BOX_MAX_HEIGHT, r.top - 16), above }
+        : { left, top: r.bottom + 8, maxHeight: Math.min(BOX_MAX_HEIGHT, below), above })
+      if (!items || items.line !== line) {
+        details().then(
+          (list) => setItems({ line, list: Array.isArray(list) ? list : [], error: null }),
+          (err) => setItems({ line, list: [], error: err.message || 'Could not load' })
+        )
+      }
+    }, OPEN_DELAY_MS)
+  }
+  function hide() {
+    clearTimeout(timer.current)
+    timer.current = setTimeout(() => setBox(null), CLOSE_DELAY_MS)
+  }
+  // Touch has no hover: a tap is the row's, which opens it.
+  const hoverable = typeof window === 'undefined' || !window.matchMedia || !window.matchMedia('(hover: none)').matches
+
+  return (
+    <span
+      ref={cellRef}
+      className="xeplr-factory-cell xeplr-factory-activity"
+      tabIndex={hoverable ? 0 : undefined}
+      onMouseEnter={hoverable ? show : undefined}
+      onMouseLeave={hoverable ? hide : undefined}
+      onFocus={hoverable ? show : undefined}
+      onBlur={hoverable ? hide : undefined}
+      {...marker}
+    >
+      {line}
+      {box && typeof document !== 'undefined' && createPortal(
+        <div
+          className="xeplr-factory-activity-box"
+          role="dialog"
+          aria-label="Latest activity"
+          style={{ left: box.left, top: box.top, bottom: box.bottom, maxHeight: box.maxHeight, width: BOX_WIDTH }}
+          onMouseEnter={() => clearTimeout(timer.current)}
+          onMouseLeave={hide}
+        >
+          {!items && <div className="xeplr-factory-hint">Loading…</div>}
+          {items && items.error && <div className="xeplr-factory-error-inline" role="alert">{items.error}</div>}
+          {items && !items.error && !items.list.length && <div className="xeplr-factory-hint">Nothing yet.</div>}
+          {items && items.list.map((it, i) => {
+            const body = (
+              <>
+                <span className="xeplr-factory-activity-text">{text(it.text)}</span>
+                {(it.sub || it.at) && <span className="xeplr-factory-activity-sub">{[it.sub, it.at].filter(Boolean).map(text).join(' · ')}</span>}
+              </>
+            )
+            return it.open && onOpenAt
+              ? <button key={i} type="button" className="xeplr-factory-activity-item" onClick={(e) => { e.stopPropagation(); setBox(null); onOpenAt(it.open) }}>{body}</button>
+              : <div key={i} className="xeplr-factory-activity-item">{body}</div>
+          })}
+        </div>,
+        document.body
+      )}
+    </span>
+  )
+}

package/src/designs/ListView.jsx

@@ -1,6 +1,7 @@
 import { XeplrTable } from '@xeplr/ui-table'
 import { displayValue, listColumns, listSource } from '../values.js'
 import { boxStyle, fieldStyle } from './styles.js'
+import FedList from './FedList.jsx'
 
 // A list of the saved records, in @xeplr/ui-table.
 //
@@ -9,8 +10,12 @@ import { boxStyle, fieldStyle } from './styles.js'
 // Edit and New open the list's edit screen in a popup (`editScreen`), or, for a
 // list on a form, load the row into the form's own fields. Delete removes it.
 
-export default function ListView({ node, doc, design, list, onEdit, onDelete, onNew, currentId, recordKey = 'id', canDelete, fieldNodes, optionsFor, extraActions = [] }) {
+export default function ListView({ node, doc, design, list, onEdit, onDelete, onNew, currentId, recordKey = 'id', canDelete, fieldNodes, optionsFor, extraActions = [], query, rowDetails, onOpen }) {
   const p = node.props || {}
+  // Rows a function works out: their own view — search, chips, the server's text.
+  if (!design && p.rowsFrom && list) {
+    return <FedList node={node} list={list} query={query || { q: '', filter: '', setQ: () => {}, setFilter: () => {} }} onOpen={onOpen || onEdit} rowDetails={rowDetails} recordKey={recordKey} extraActions={extraActions} />
+  }
   // The rows are passed in because a list of ANOTHER table has no other
   // description of itself — see listColumns.
   const columns = listColumns(doc, node, undefined, (list && list.rows) || [])