innoboxrr-react-form-elements 3.3.0 → 3.5.0

package/README.md

@@ -1,12 +1,15 @@
 # innoboxrr-react-form-elements
 
-Gemelo React de [`innoboxrr-form-elements`](../form-elements). Los mismos 29
-componentes, con los mismos nombres.
+Gemelo React de [`innoboxrr-form-elements`](../form-elements). Los mismos 37
+componentes, con los mismos nombres: los controles de formulario y las piezas de
+escritorio (`DialogComponent`, `DrawerComponent`, `MenuComponent`,
+`CommandPaletteComponent`, `ToastRegionComponent`, `ConfirmHostComponent` y
+`SkeletonComponent`).
 
 Los nombres coinciden a propósito: `larapack-generator` emite el mismo
 `form_component` del `laraimport.json` para Vue y para React, así que un nombre
-distinto rompería esa simetría. Hay un test (`tests/parity.test.jsx`) que falla
-si un paquete exporta algo que el otro no.
+distinto rompería esa simetría. Hay un test de paridad en cada repositorio que
+falla si un paquete exporta algo que el otro no.
 
 ## Instalación
 
@@ -62,6 +65,36 @@ Todos los controles funcionan también **sin** `value`: se gobiernan solos. Eso
 permite montarlos en una prueba o en un formulario no controlado sin escribir
 estado alrededor.
 
+## Piezas de escritorio
+
+Sobre `<dialog>`, el atributo `popover` y Floating UI, con el mismo
+comportamiento que la rama Vue. Lo que cambia es la forma de pasar las cosas:
+
+| Vue | React |
+|---|---|
+| `v-model:open` | `open` + `onOpenChange(abierto)` |
+| slot `footer` / `header` con `{ close }` | prop `footer` / `header`: un nodo o una función `({ close }) => …` |
+| slot `trigger` de `MenuComponent` | `renderTrigger({ toggle, open, loading, triggerProps })` |
+| `@select` | `onSelect(item)` |
+| `:save` de `ClickToEditComponent` | `onSave(valor)` |
+
+```jsx
+import { DrawerComponent, ToastRegionComponent, ConfirmHostComponent } from 'innoboxrr-react-form-elements'
+import { notifySuccess } from 'innoboxrr-form-core'
+
+<DrawerComponent open={abierto} onOpenChange={setAbierto} title="Nuevo producto"
+    footer={({ close }) => <button type="button" onClick={close}>Cancelar</button>}>
+    <CreateForm onSubmit={(producto) => { notifySuccess('Producto creado'); setAbierto(false) }} />
+</DrawerComponent>
+
+// una vez, en la raíz
+<ToastRegionComponent />
+<ConfirmHostComponent />
+```
+
+React no escribe el atributo `autofocus` en el DOM, así que lo que tiene que
+recibir el foco al abrir un diálogo se marca con `data-autofocus`.
+
 ## Las librerías de debajo
 
 Cada componente envuelve el equivalente React de la librería que envuelve su

package/index.js

@@ -18,7 +18,11 @@ export { default as ClickToEditComponent } from './src/ClickToEditComponent.jsx'
 export { default as CodeInputComponent } from './src/CodeInputComponent.jsx'
 export { default as CodeMirrorComponent } from './src/CodeMirrorComponent.jsx'
 export { default as ColorPickerInputComponent } from './src/ColorPickerInputComponent.jsx'
+export { default as CommandPaletteComponent } from './src/CommandPaletteComponent.jsx'
+export { default as ConfirmHostComponent } from './src/ConfirmHostComponent.jsx'
 export { default as CountrySelectInputComponent } from './src/CountrySelectInputComponent.jsx'
+export { default as DialogComponent } from './src/DialogComponent.jsx'
+export { default as DrawerComponent } from './src/DrawerComponent.jsx'
 export { default as DynamicGroupInputComponent } from './src/DynamicGroupInputComponent.jsx'
 export { default as EditorInputComponent } from './src/EditorInputComponent.jsx'
 export { default as FileDropInputComponent } from './src/FileDropInputComponent.jsx'
@@ -26,6 +30,7 @@ export { default as IconComponent } from './src/IconComponent.jsx'
 export { default as FileInputComponent } from './src/FileInputComponent.jsx'
 export { default as FqsInputComponent } from './src/FqsInputComponent.jsx'
 export { default as InputErrorComponent } from './src/InputErrorComponent.jsx'
+export { default as MenuComponent } from './src/MenuComponent.jsx'
 export { default as ModelSearchInputComponent } from './src/ModelSearchInputComponent.jsx'
 export { default as MultiCheckboxInputComponent } from './src/MultiCheckboxInputComponent.jsx'
 export { default as PolymorphicInputComponent } from './src/PolymorphicInputComponent.jsx'
@@ -34,6 +39,7 @@ export { default as SelectInputComponent } from './src/SelectInputComponent.jsx'
 export { default as SelectSearchInputComponent } from './src/SelectSearchInputComponent.jsx'
 export { default as SimpleFileInputComponent } from './src/SimpleFileInputComponent.jsx'
 export { default as SingleCheckboxInputComponent } from './src/SingleCheckboxInputComponent.jsx'
+export { default as SkeletonComponent } from './src/SkeletonComponent.jsx'
 export { default as StarsInputComponent } from './src/StarsInputComponent.jsx'
 export { default as SwitchComponent } from './src/SwitchComponent.jsx'
 export { default as TagsInputComponent } from './src/TagsInputComponent.jsx'
@@ -41,3 +47,4 @@ export { default as TextEditorMonoStyleInputComponent } from './src/TextEditorMo
 export { default as TextInputComponent } from './src/TextInputComponent.jsx'
 export { default as TextareaInputComponent } from './src/TextareaInputComponent.jsx'
 export { default as TimezoneSelectInputComponent } from './src/TimezoneSelectInputComponent.jsx'
+export { default as ToastRegionComponent } from './src/ToastRegionComponent.jsx'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "innoboxrr-react-form-elements",
-  "version": "3.3.0",
-  "description": "Gemelo React de innoboxrr-form-elements: los mismos componentes, los mismos nombres y el mismo contrato.",
+  "version": "3.5.0",
+  "description": "Gemelo React de innoboxrr-form-elements: los mismos componentes, los mismos nombres y el mismo contrato, con diálogos, drawers, menús, avisos y paleta de comandos.",
   "type": "module",
   "main": "index.js",
   "exports": {
@@ -48,11 +48,12 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
+    "@floating-ui/dom": "^1.8.0",
     "@iconify/react": "^6.0.0",
     "@tinymce/tinymce-react": "^6.3.0",
     "@uiw/react-codemirror": "^4.25.11",
     "@yaireo/tagify": "^4.38.0",
-    "innoboxrr-form-core": "^2.3.0",
+    "innoboxrr-form-core": "^2.7.0",
     "innoboxrr-maskjs": "^2.0.0",
     "react-colorful": "^5.8.1",
     "react-phone-number-input": "^3.4.18",

package/src/CheckboxInputComponent.jsx

@@ -21,13 +21,14 @@ export default function CheckboxInputComponent({
 }) {
     const [current, set] = useControlled(value, onChange, '')
     const boxClass = useThemeClass('checkbox', customClass)
+    const labelClass = useThemeClass('label')
 
     const isGroup = Array.isArray(current)
     const checked = isGroup ? current.includes(val) : Boolean(current)
 
     return (
         <div className="fe-mb">
-            <label className="ml-2 text-sm font-medium text-gray-900 dark:text-white">
+            <label className={labelClass}>
                 <input
                     className={boxClass}
                     type="checkbox"

package/src/ClickToEditComponent.jsx

@@ -1,65 +1,140 @@
 import { useEffect, useRef, useState } from 'react'
+import useTheme from './internal/useTheme.js'
 
 /**
- * Gemelo de ClickToEditComponent.vue: texto que se convierte en input al
- * hacer clic. `onInput` recibe el valor confirmado.
+ * Gemelo de ClickToEditComponent.vue: un valor que se edita donde está.
+ *
+ *     <ClickToEditComponent value={producto.title} onSave={(title) => updateModel(producto.id, { title })} />
+ *
+ * Enter o salir del campo confirman; Escape cancela. Un valor sin cambios no
+ * llama a nada.
+ *
+ * Con `onSave`, la confirmación espera a que termine: mientras guarda el campo
+ * no se puede tocar, y si falla se queda abierto con el error. `onInput` sigue
+ * recibiendo el valor confirmado, y `customClass` sigue reemplazando la clase
+ * del campo.
  */
-export default function ClickToEditComponent({ value = '', onInput, customClass = 'fe-input' }) {
+export default function ClickToEditComponent({
+    value = '',
+    type = 'text',
+    placeholder = '—',
+    label = 'Editar',
+    onSave = null,
+    onInput,
+    customClass = undefined,
+}) {
+    const theme = useTheme()
     const [editing, setEditing] = useState(false)
-    const [draft, setDraft] = useState(value)
+    const [saving, setSaving] = useState(false)
+    const [error, setError] = useState(null)
+    const [draft, setDraft] = useState('')
+    const [shown, setShown] = useState(value)
     const input = useRef(null)
 
+    // Enter confirma y quita el campo, y quitarlo puede disparar blur: el
+    // estado de React aún no se ha actualizado en ese momento, así que la
+    // guarda va en una ref.
+    const status = useRef({ editing: false, saving: false })
+
     useEffect(() => {
-        setDraft(value)
+        setShown(value)
     }, [value])
 
     useEffect(() => {
-        if (editing) {
+        if (editing && ! saving) {
             input.current?.focus()
         }
-    }, [editing])
+    }, [editing, saving, error])
+
+    const setEditingState = (next) => {
+        status.current.editing = next
+        setEditing(next)
+    }
 
-    const confirm = () => {
-        setEditing(false)
-        onInput?.(draft)
+    const start = () => {
+        setDraft(shown ?? '')
+        setError(null)
+        setEditingState(true)
     }
 
     const cancel = () => {
-        setDraft(value)
-        setEditing(false)
+        setEditingState(false)
+        setError(null)
     }
 
-    if (! editing) {
-        return (
-            <span
-                role="button"
-                tabIndex={0}
-                onClick={() => setEditing(true)}
-                onKeyDown={(event) => {
-                    if (event.key === 'Enter' || event.key === ' ') {
-                        setEditing(true)
-                    }
-                }}>
-                {value}
-            </span>
-        )
+    const confirm = async () => {
+        if (! status.current.editing || status.current.saving) {
+            return
+        }
+
+        const next = draft
+
+        if (String(next) === String(shown ?? '')) {
+            setEditingState(false)
+
+            return
+        }
+
+        if (onSave) {
+            status.current.saving = true
+            setSaving(true)
+            setError(null)
+
+            try {
+                await onSave(next)
+            } catch (failure) {
+                status.current.saving = false
+                setSaving(false)
+                setError(failure?.message || 'No se pudo guardar')
+
+                return
+            }
+
+            status.current.saving = false
+            setSaving(false)
+        }
+
+        setShown(next)
+        setEditingState(false)
+        onInput?.(next)
     }
 
+    const empty = shown === '' || shown === null || shown === undefined
+    const text = empty ? placeholder : shown
+
     return (
-        <input
-            ref={input}
-            className={customClass}
-            value={draft}
-            onChange={(event) => setDraft(event.target.value)}
-            onBlur={confirm}
-            onKeyDown={(event) => {
-                if (event.key === 'Enter') {
-                    confirm()
-                }
-
-                if (event.key === 'Escape') {
-                    cancel()
-                }
-            }} />
+        <span className="fe-inline">
+
+            {editing ? (
+                <input
+                    ref={input}
+                    type={type}
+                    className={customClass ?? theme.input}
+                    aria-label={label}
+                    aria-invalid={error ? 'true' : undefined}
+                    disabled={saving}
+                    value={draft}
+                    onChange={(event) => setDraft(event.target.value)}
+                    onBlur={confirm}
+                    onKeyDown={(event) => {
+                        if (event.key === 'Enter') {
+                            event.preventDefault()
+                            confirm()
+                        }
+
+                        if (event.key === 'Escape') {
+                            event.preventDefault()
+                            cancel()
+                        }
+                    }} />
+            ) : (
+                <button type="button" className={theme.editable} aria-label={`${label}: ${text}`} onClick={start}>
+                    {text}
+                </button>
+            )}
+
+            {error ? <span className={theme.error} role="alert">{error}</span> : null}
+
+        </span>
     )
 }

package/src/CodeInputComponent.jsx

@@ -1,5 +1,6 @@
 import { useRef, useState } from 'react'
 import useControlled from './internal/useControlled.js'
+import useTheme, { joinClasses } from './internal/useTheme.js'
 
 /**
  * Gemelo de CodeInputComponent.vue: las casillas de un código de un solo uso.
@@ -20,6 +21,7 @@ export default function CodeInputComponent({
     onChange,
     onComplete,
 }) {
+    const theme = useTheme()
     const [code, setCode] = useControlled(value, onChange, '')
     const inputs = useRef([])
     const [chars, setChars] = useState(() => Array.from({ length: fields }, (_, i) => (code ?? '')[i] ?? ''))
@@ -45,12 +47,12 @@ export default function CodeInputComponent({
         <div className={['code-input-container', className].filter(Boolean).join(' ')}>
             {title ? <p className="title">{title}</p> : null}
 
-            <div className="code-input fe-code-input">
+            <div className={joinClasses('code-input', theme.codeInput)}>
                 {chars.map((char, index) => (
                     <input
                         key={index}
                         ref={(element) => { inputs.current[index] = element }}
-                        className="w-14 h-14 rounded-lg border border-gray outline-none focus:outline-none focus:border-primary focus:ring-0 text-center transition-all"
+                        className={theme.codeCell}
                         type="text"
                         inputMode="numeric"
                         pattern="[0-9]*"

package/src/CommandPaletteComponent.jsx

@@ -0,0 +1,182 @@
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
+import IconComponent from './IconComponent.jsx'
+import useNativeDialog from './internal/useNativeDialog.js'
+import useTheme, { joinClasses } from './internal/useTheme.js'
+
+const normalize = (value) => String(value ?? '')
+    .normalize('NFD')
+    .replace(/[̀-ͯ]/g, '')
+    .toLowerCase()
+
+/**
+ * Gemelo de CommandPaletteComponent.vue: buscar y ejecutar cualquier cosa sin
+ * tocar el ratón.
+ *
+ *     <CommandPaletteComponent open={abierta} onOpenChange={setAbierta} items={[
+ *         { id: 'products', label: 'Productos', group: 'Ir a', icon: 'box', action: () => navigate(…) },
+ *     ]} onSelect={…} />
+ *
+ * Ctrl+K o Cmd+K la abren y la cierran; `hotkey` cambia la tecla y `null` quita
+ * el atajo. El filtro no distingue mayúsculas ni acentos.
+ */
+export default function CommandPaletteComponent({
+    open = false,
+    items = [],
+    placeholder = 'Buscar…',
+    emptyText = 'Sin resultados',
+    label = 'Paleta de comandos',
+    hotkey = 'k',
+    onOpenChange,
+    onSelect,
+}) {
+    const theme = useTheme()
+    const listId = useId()
+    const input = useRef(null)
+    const [query, setQuery] = useState('')
+    const [active, setActive] = useState(0)
+
+    const latest = useRef({ open, hotkey, onOpenChange })
+
+    latest.current = { open, hotkey, onOpenChange }
+
+    const requestClose = () => onOpenChange?.(false)
+
+    const { ref, onClick } = useNativeDialog({ open, dismissible: true, onRequestClose: requestClose })
+
+    const filtered = useMemo(() => {
+        const needle = normalize(query).trim()
+
+        if (needle === '') {
+            return items
+        }
+
+        return items.filter((item) => normalize([item.label, item.group, ...(item.keywords ?? [])].join(' ')).includes(needle))
+    }, [items, query])
+
+    const sections = useMemo(() => {
+        const groups = new Map()
+
+        filtered.forEach((item, index) => {
+            const key = item.group ?? null
+
+            if (! groups.has(key)) {
+                groups.set(key, [])
+            }
+
+            groups.get(key).push({ item, index })
+        })
+
+        return [...groups].map(([group, entries]) => ({ group, entries }))
+    }, [filtered])
+
+    useEffect(() => {
+        if (open) {
+            setQuery('')
+            setActive(0)
+            input.current?.focus()
+        }
+    }, [open])
+
+    useEffect(() => {
+        const onHotkey = (event) => {
+            const { hotkey: key, open: isOpen, onOpenChange: change } = latest.current
+
+            if (key && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === key.toLowerCase()) {
+                event.preventDefault()
+                change?.(! isOpen)
+            }
+        }
+
+        window.addEventListener('keydown', onHotkey)
+
+        return () => window.removeEventListener('keydown', onHotkey)
+    }, [])
+
+    const optionId = (index) => `${listId}-${index}`
+
+    const choose = (item) => {
+        if (! item) {
+            return
+        }
+
+        requestClose()
+        onSelect?.(item)
+        item.action?.(item)
+    }
+
+    const onKeyDown = (event) => {
+        const total = filtered.length
+
+        if (event.key === 'ArrowDown' && total > 0) {
+            event.preventDefault()
+            setActive((current) => (current + 1) % total)
+        }
+
+        if (event.key === 'ArrowUp' && total > 0) {
+            event.preventDefault()
+            setActive((current) => (current - 1 + total) % total)
+        }
+
+        if (event.key === 'Enter') {
+            event.preventDefault()
+            choose(filtered[active])
+        }
+    }
+
+    return (
+        <dialog
+            ref={ref}
+            className={joinClasses(theme.dialog, theme.command)}
+            aria-label={label}
+            onClick={onClick}>
+
+            {open ? (
+                <>
+                    <input
+                        ref={input}
+                        type="text"
+                        className={theme.commandInput}
+                        placeholder={placeholder}
+                        value={query}
+                        role="combobox"
+                        aria-autocomplete="list"
+                        aria-expanded="true"
+                        aria-controls={listId}
+                        aria-activedescendant={filtered.length > 0 ? optionId(active) : undefined}
+                        onChange={(event) => {
+                            setQuery(event.target.value)
+                            setActive(0)
+                        }}
+                        onKeyDown={onKeyDown} />
+
+                    {filtered.length > 0 ? (
+                        <ul id={listId} className={theme.commandList} role="listbox" aria-label={label}>
+                            {sections.map((section) => [
+                                section.group
+                                    ? <li key={`group-${section.group}`} role="presentation" className={theme.commandGroup}>{section.group}</li>
+                                    : null,
+                                ...section.entries.map((entry) => (
+                                    <li
+                                        key={entry.item.id ?? entry.index}
+                                        id={optionId(entry.index)}
+                                        role="option"
+                                        aria-selected={entry.index === active ? 'true' : 'false'}
+                                        className={theme.commandItem}
+                                        onClick={() => choose(entry.item)}
+                                        onMouseMove={() => setActive(entry.index)}>
+                                        {entry.item.icon ? <IconComponent name={entry.item.icon} size={16} /> : null}
+                                        <span>{entry.item.label}</span>
+                                        {entry.item.shortcut ? <kbd className={theme.kbd}>{entry.item.shortcut}</kbd> : null}
+                                    </li>
+                                )),
+                            ])}
+                        </ul>
+                    ) : (
+                        <p className={theme.commandEmpty}>{emptyText}</p>
+                    )}
+                </>
+            ) : null}
+
+        </dialog>
+    )
+}

package/src/ConfirmHostComponent.jsx

@@ -0,0 +1,50 @@
+import { useSyncExternalStore } from 'react'
+import { getConfirmation, onConfirmationChange, resolveConfirmation } from 'innoboxrr-form-core'
+import DialogShell from './internal/DialogShell.jsx'
+import useTheme from './internal/useTheme.js'
+
+/**
+ * Gemelo de ConfirmHostComponent.vue: donde se pregunta lo que pide
+ * `confirmAction()`. Se monta una vez, en la raíz de la aplicación.
+ *
+ * Cerrar con Escape o con un clic fuera cuenta como cancelar, y el foco empieza
+ * en cancelar: un Enter por inercia no debe borrar nada.
+ */
+export default function ConfirmHostComponent({ closeLabel = 'Cerrar' }) {
+    const confirmation = useSyncExternalStore(onConfirmationChange, getConfirmation, getConfirmation)
+    const theme = useTheme()
+
+    return (
+        <DialogShell
+            kind="dialog"
+            size="sm"
+            open={confirmation !== null}
+            title={confirmation?.title ?? null}
+            closeLabel={closeLabel}
+            onOpenChange={(value) => {
+                if (! value) {
+                    resolveConfirmation(false)
+                }
+            }}
+            footer={(
+                <>
+                    <button
+                        type="button"
+                        className={theme.buttonSecondary}
+                        data-autofocus=""
+                        onClick={() => resolveConfirmation(false)}>
+                        {confirmation?.cancelLabel}
+                    </button>
+
+                    <button
+                        type="button"
+                        className={confirmation?.variant === 'danger' ? theme.buttonDanger : theme.button}
+                        onClick={() => resolveConfirmation(true)}>
+                        {confirmation?.confirmLabel}
+                    </button>
+                </>
+            )}>
+            <p>{confirmation?.message}</p>
+        </DialogShell>
+    )
+}

package/src/CountrySelectInputComponent.jsx

@@ -80,7 +80,7 @@ export default function CountrySelectInputComponent({
                     }}
                     {...rest} />
 
-                {help ? <p className="text-sm text-gray-500">{help}</p> : null}
+                {help ? <p className="fe-text-muted">{help}</p> : null}
             </div>
         </div>
     )

package/src/DialogComponent.jsx

@@ -0,0 +1,43 @@
+import DialogShell from './internal/DialogShell.jsx'
+
+/**
+ * Gemelo de DialogComponent.vue: un diálogo modal sobre <dialog>.
+ *
+ *     <DialogComponent open={abierto} onOpenChange={setAbierto} title="Borrar producto"
+ *         footer={({ close }) => <button onClick={close}>Cancelar</button>}>
+ *         ¿Seguro?
+ *     </DialogComponent>
+ *
+ * `dismissible={false}` impide cerrarlo con Escape, con un clic fuera y quita
+ * la X.
+ */
+export default function DialogComponent({
+    open = false,
+    title = null,
+    label = null,
+    size = 'md',
+    dismissible = true,
+    closeLabel = 'Cerrar',
+    onOpenChange,
+    onClose,
+    header = null,
+    footer = null,
+    children,
+}) {
+    return (
+        <DialogShell
+            kind="dialog"
+            open={open}
+            title={title}
+            label={label}
+            size={size}
+            dismissible={dismissible}
+            closeLabel={closeLabel}
+            onOpenChange={onOpenChange}
+            onClose={onClose}
+            header={header}
+            footer={footer}>
+            {children}
+        </DialogShell>
+    )
+}

package/src/DrawerComponent.jsx

@@ -0,0 +1,42 @@
+import DialogShell from './internal/DialogShell.jsx'
+
+/**
+ * Gemelo de DrawerComponent.vue: un panel lateral modal sobre <dialog>, para
+ * crear o editar sin salir de la tabla.
+ *
+ *     <DrawerComponent open={abierto} onOpenChange={setAbierto} title="Nuevo producto">
+ *         <CreateForm onSubmit={…} />
+ *     </DrawerComponent>
+ *
+ * `side="start"` lo pega a la izquierda.
+ */
+export default function DrawerComponent({
+    open = false,
+    title = null,
+    label = null,
+    side = 'end',
+    dismissible = true,
+    closeLabel = 'Cerrar',
+    onOpenChange,
+    onClose,
+    header = null,
+    footer = null,
+    children,
+}) {
+    return (
+        <DialogShell
+            kind="drawer"
+            open={open}
+            title={title}
+            label={label}
+            side={side}
+            dismissible={dismissible}
+            closeLabel={closeLabel}
+            onOpenChange={onOpenChange}
+            onClose={onClose}
+            header={header}
+            footer={footer}>
+            {children}
+        </DialogShell>
+    )
+}