innoboxrr-react-form-elements 3.0.0

package/src/ColorPickerInputComponent.jsx

@@ -0,0 +1,85 @@
+import { useId } from 'react'
+import { HexColorInput, HexColorPicker } from 'react-colorful'
+import Field from './internal/Field.jsx'
+import useControlled from './internal/useControlled.js'
+
+export const DEFAULT_COLORS = [
+    '#F44336', '#E91E63', '#9C27B0', '#673AB7',
+    '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4',
+    '#009688', '#4CAF50', '#8BC34A', '#CDDC39',
+    '#FFEB3B', '#FFC107', '#FF9800', '#795548',
+]
+
+/**
+ * Gemelo de ColorPickerInputComponent.vue.
+ *
+ * La versión Vue intenta cargar lightvue y, si no está, cae a un
+ * `<input type="color">` — que abre el diálogo del sistema operativo y no se
+ * puede estilar ni probar. Aquí va react-colorful: 2,8 kB, sin dependencias,
+ * accesible y con el mismo aspecto en todos los navegadores.
+ *
+ * La paleta de accesos rápidos se mantiene porque es parte del contrato.
+ */
+export default function ColorPickerInputComponent({
+    id: providedId = undefined,
+    label = '',
+    help = null,
+    clearable = true,
+    colors = DEFAULT_COLORS,
+    name = 'color',
+    validators = null,
+    value,
+    onChange,
+}) {
+    const generatedId = useId()
+    const uid = providedId ?? generatedId
+    const [current, set] = useControlled(value, onChange, '#607C8A')
+
+    return (
+        <Field label={label} help={help} htmlFor={uid} inline={false}>
+            <div className="fe-flex" style={{ gap: '1rem', flexWrap: 'wrap', alignItems: 'flex-start' }}>
+                <HexColorPicker color={current || '#607C8A'} onChange={set} />
+
+                <div>
+                    <HexColorInput
+                        id={uid}
+                        className="fe-input"
+                        color={current || ''}
+                        prefixed
+                        onChange={set} />
+
+                    <input type="hidden" name={name} data-validators={validators ?? undefined} value={current ?? ''} readOnly />
+
+                    <div className="fe-flex fe-mt-sm" style={{ gap: '0.25rem', flexWrap: 'wrap', maxWidth: '12rem' }}>
+                        {colors.map((color) => (
+                            <button
+                                key={color}
+                                type="button"
+                                aria-label={color}
+                                title={color}
+                                onClick={() => set(color)}
+                                style={{
+                                    width: '1.25rem',
+                                    height: '1.25rem',
+                                    borderRadius: '0.25rem',
+                                    border: current === color ? '2px solid #111827' : '1px solid #d1d5db',
+                                    backgroundColor: color,
+                                    cursor: 'pointer',
+                                    padding: 0,
+                                }} />
+                        ))}
+                    </div>
+
+                    {clearable ? (
+                        <button
+                            type="button"
+                            className="fe-button fe-button-link fe-mt-sm"
+                            onClick={() => set('')}>
+                            Limpiar
+                        </button>
+                    ) : null}
+                </div>
+            </div>
+        </Field>
+    )
+}

package/src/CountrySelectInputComponent.jsx

@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import PhoneInput, { isValidPhoneNumber, parsePhoneNumber } from 'react-phone-number-input'
+import Field from './internal/Field.jsx'
+
+/**
+ * Gemelo de CountrySelectInputComponent.vue.
+ *
+ * La versión Vue envuelve vue-tel-input, que por debajo usa libphonenumber-js.
+ * `react-phone-number-input` es exactamente eso mismo en React: el mismo
+ * libphonenumber, la misma validación por país y el mismo selector con
+ * banderas. Antes esto era una lista de prefijos escrita a mano, que se queda
+ * desactualizada sola y valida cualquier cosa de 6 a 15 dígitos.
+ *
+ * `onCountryChange` recibe `{ phone, country, isValid }`, la misma forma que
+ * emitía `change` en Vue, para que el formulario que ya lo consumía siga
+ * funcionando igual.
+ *
+ * Los estilos van una vez por aplicación:
+ *
+ *     import 'react-phone-number-input/style.css'
+ */
+export default function CountrySelectInputComponent({
+    wrapperClass = 'fe-mb',
+    containerClass = 'fe-inline fe-w-full',
+    labelClass = 'ml-2 text-sm font-medium text-gray-900 dark:text-white',
+    label = '',
+    help = null,
+    defaultPhone = '',
+    defaultCountry = null,
+    disabled = false,
+    name = 'telephone',
+    placeholder = 'Ingresa un número telefónico',
+    validators = null,
+    onCountryChange,
+    ...rest
+}) {
+    const [phone, setPhone] = useState(defaultPhone ? String(defaultPhone) : '')
+    const [country, setCountry] = useState(defaultCountry ?? undefined)
+
+    const valid = Boolean(phone) && isValidPhoneNumber(phone)
+
+    const announce = (nextPhone, nextCountry) => {
+        const isValid = Boolean(nextPhone) && isValidPhoneNumber(nextPhone)
+        const parsed = isValid ? parsePhoneNumber(nextPhone) : null
+
+        onCountryChange?.({
+            phone: isValid ? nextPhone : '',
+            country: parsed?.country ?? nextCountry ?? null,
+            callingCode: parsed?.countryCallingCode ?? null,
+            national: parsed?.nationalNumber ?? null,
+            isValid,
+        })
+    }
+
+    return (
+        <div className={wrapperClass}>
+            <div className={containerClass}>
+                {label ? <label className={labelClass} htmlFor={name}>{label}</label> : null}
+
+                <PhoneInput
+                    id={name}
+                    name={name}
+                    className={(! valid && phone.length !== 0) ? 'error' : undefined}
+                    international
+                    countryCallingCodeEditable={false}
+                    defaultCountry={defaultCountry ?? undefined}
+                    disabled={disabled}
+                    placeholder={placeholder}
+                    data-validators={validators ?? undefined}
+                    value={phone}
+                    onCountryChange={(next) => {
+                        setCountry(next)
+                        announce(phone, next)
+                    }}
+                    onChange={(next) => {
+                        const clean = next ?? ''
+
+                        setPhone(clean)
+                        announce(clean, country)
+                    }}
+                    {...rest} />
+
+                {help ? <p className="text-sm text-gray-500">{help}</p> : null}
+            </div>
+        </div>
+    )
+}
+
+export { isValidPhoneNumber, parsePhoneNumber }

package/src/DynamicGroupInputComponent.jsx

@@ -0,0 +1,216 @@
+import { useCallback, useMemo, useRef } from 'react'
+import {
+    DndContext,
+    KeyboardSensor,
+    PointerSensor,
+    closestCenter,
+    useSensor,
+    useSensors,
+} from '@dnd-kit/core'
+import {
+    SortableContext,
+    sortableKeyboardCoordinates,
+    useSortable,
+    verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+
+import EditorInputComponent from './EditorInputComponent.jsx'
+import SelectInputComponent from './SelectInputComponent.jsx'
+import TextInputComponent from './TextInputComponent.jsx'
+import TextareaInputComponent from './TextareaInputComponent.jsx'
+import useControlled from './internal/useControlled.js'
+
+const COMPONENTS = {
+    text: TextInputComponent,
+    editor: EditorInputComponent,
+    select: SelectInputComponent,
+    textarea: TextareaInputComponent,
+}
+
+/**
+ * Gemelo de DynamicGroupInputComponent.vue: N grupos de campos, con orden,
+ * duplicado y borrado.
+ *
+ * La versión Vue usa vuedraggable (SortableJS). En React el equivalente vivo
+ * es dnd-kit: es el sucesor de react-beautiful-dnd —archivado—, no toca el DOM
+ * por su cuenta y trae ordenación **por teclado**, que ni SortableJS ni la API
+ * nativa de arrastre dan. Aquí no es un detalle: un formulario que solo se
+ * puede reordenar con el ratón no es accesible.
+ */
+function SortableGroup({ id, children }) {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id })
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={{ transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1 }}
+            className="border rounded-lg bg-white dark:bg-slate-800 shadow-sm relative dark:border-slate-600">
+            {children({ attributes, listeners })}
+        </div>
+    )
+}
+
+export default function DynamicGroupInputComponent({
+    value,
+    onChange,
+    inputsConfig,
+    label = '',
+    addButtonLabel = 'Añadir',
+    removeButtonLabel = 'Eliminar',
+    itemLabel = 'Item',
+}) {
+    const [current, set] = useControlled(value, onChange, [])
+    const nextKey = useRef(0)
+
+    const groups = current ?? []
+
+    const sensors = useSensors(
+        useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
+        useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+    )
+
+    // dnd-kit necesita un id estable por elemento. El indice no vale: al
+    // reordenar cambia, y el elemento arrastrado saltaria.
+    const keyed = useMemo(
+        () => groups.map((group) => {
+            if (! group.__key) {
+                group.__key = `grupo-${nextKey.current++}`
+            }
+
+            return group
+        }),
+        [groups]
+    )
+
+    const emptyGroup = () => inputsConfig.reduce(
+        (group, field) => ({ ...group, [field.key]: '' }),
+        { _collapsed: false, __key: `grupo-${nextKey.current++}` }
+    )
+
+    const updateAt = (index, key, next) => set(
+        keyed.map((group, position) => (position === index ? { ...group, [key]: next } : group))
+    )
+
+    const onDragEnd = useCallback((event) => {
+        const { active, over } = event
+
+        if (! over || active.id === over.id) {
+            return
+        }
+
+        const from = keyed.findIndex((group) => group.__key === active.id)
+        const to = keyed.findIndex((group) => group.__key === over.id)
+
+        const next = [...keyed]
+        const [moved] = next.splice(from, 1)
+
+        next.splice(to, 0, moved)
+        set(next)
+    }, [keyed, set])
+
+    return (
+        <div>
+            {label ? (
+                <label className="block mb-4 ml-2 text-sm font-medium text-slate-900 dark:text-slate-100">
+                    {label}
+                </label>
+            ) : null}
+
+            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={onDragEnd}>
+                <SortableContext items={keyed.map((group) => group.__key)} strategy={verticalListSortingStrategy}>
+                    <div className="space-y-2 rounded-lg">
+                        {keyed.map((group, index) => (
+                            <SortableGroup key={group.__key} id={group.__key}>
+                                {({ attributes, listeners }) => (
+                                    <>
+                                        <div className="flex justify-between items-center px-4 py-3 border-b bg-slate-50 dark:bg-slate-700 dark:border-slate-600 rounded-t-lg">
+                                            <div className="flex items-center gap-2">
+                                                <button
+                                                    type="button"
+                                                    aria-label={`Mover ${itemLabel} ${index + 1}`}
+                                                    className="cursor-move drag-handle text-slate-400"
+                                                    {...attributes}
+                                                    {...listeners}>
+                                                    <i className="fa-solid fa-grip-vertical"></i>
+                                                </button>
+                                                <h4 className="text-md font-semibold text-slate-800 dark:text-slate-100">
+                                                    {itemLabel} #{index + 1}
+                                                </h4>
+                                            </div>
+
+                                            <div className="flex items-center space-x-4 text-slate-400">
+                                                <button
+                                                    type="button"
+                                                    aria-label={`Duplicar ${itemLabel} ${index + 1}`}
+                                                    className="hover:text-blue-500 transition mr-2"
+                                                    onClick={() => set([
+                                                        ...keyed.slice(0, index + 1),
+                                                        { ...group, __key: `grupo-${nextKey.current++}` },
+                                                        ...keyed.slice(index + 1),
+                                                    ])}>
+                                                    <i className="fa-solid fa-clone"></i>
+                                                </button>
+
+                                                <button
+                                                    type="button"
+                                                    aria-label={`${removeButtonLabel} ${index + 1}`}
+                                                    className="text-red-800 dark:text-red-400 text-sm"
+                                                    onClick={() => set(keyed.filter((_, position) => position !== index))}>
+                                                    <i className="fa-solid fa-trash"></i>
+                                                </button>
+
+                                                <button
+                                                    type="button"
+                                                    aria-label={`Expandir ${itemLabel} ${index + 1}`}
+                                                    aria-expanded={! group._collapsed}
+                                                    className="hover:text-slate-600 dark:hover:text-slate-300 transition"
+                                                    onClick={() => updateAt(index, '_collapsed', ! group._collapsed)}>
+                                                    <i className={`fa-solid ${group._collapsed ? 'fa-chevron-up' : 'fa-chevron-down'}`}></i>
+                                                </button>
+                                            </div>
+                                        </div>
+
+                                        {! group._collapsed ? (
+                                            <div className="p-4">
+                                                {inputsConfig.map((field) => {
+                                                    const Component = COMPONENTS[field.type] ?? TextInputComponent
+
+                                                    return (
+                                                        <Component
+                                                            key={field.key}
+                                                            type={field.type === 'text' ? 'text' : undefined}
+                                                            id={`${field.key}-${index}`}
+                                                            name={`${field.key}[${index}]`}
+                                                            label={field.label ?? field.key}
+                                                            value={group[field.key] ?? ''}
+                                                            onChange={(next) => updateAt(index, field.key, next)}>
+                                                            {field.type === 'select' && field.options
+                                                                ? field.options.map((option) => (
+                                                                    <option key={option.value ?? option} value={option.value ?? option}>
+                                                                        {option.label ?? option}
+                                                                    </option>
+                                                                ))
+                                                                : null}
+                                                        </Component>
+                                                    )
+                                                })}
+                                            </div>
+                                        ) : null}
+                                    </>
+                                )}
+                            </SortableGroup>
+                        ))}
+                    </div>
+                </SortableContext>
+            </DndContext>
+
+            <button
+                type="button"
+                className="fe-button fe-mt"
+                onClick={() => set([...keyed, emptyGroup()])}>
+                {addButtonLabel}
+            </button>
+        </div>
+    )
+}

package/src/EditorInputComponent.jsx

@@ -0,0 +1,52 @@
+import { Editor } from '@tinymce/tinymce-react'
+import Field from './internal/Field.jsx'
+import useControlled from './internal/useControlled.js'
+
+/**
+ * Gemelo de EditorInputComponent.vue.
+ *
+ * `@tinymce/tinymce-react` es el envoltorio oficial, gemelo exacto del
+ * `@tinymce/tinymce-vue` que declara la versión Vue. Antes se cargaba con un
+ * import diferido y, si no estaba, quedaba un `<textarea>`: como era opcional,
+ * lo normal era acabar con el textarea.
+ *
+ * `apiKey` viene de TinyMCE Cloud. Para una instalación propia se pasa
+ * `tinymceScriptSrc` apuntando al `tinymce.min.js` servido por la aplicación.
+ */
+export default function EditorInputComponent({
+    id,
+    name,
+    label = '',
+    help = null,
+    height = 300,
+    disabled = false,
+    initialValue = '',
+    validators = null,
+    apiKey = undefined,
+    tinymceScriptSrc = undefined,
+    plugins = 'lists link image table code help wordcount',
+    toolbar = 'undo redo | blocks | bold italic | bullist numlist | link image | code',
+    value,
+    onChange,
+    ...rest
+}) {
+    const [current, set] = useControlled(value, onChange, initialValue)
+
+    return (
+        <Field label={label} help={help} htmlFor={id} inline={false}>
+            <Editor
+                id={id}
+                apiKey={apiKey}
+                tinymceScriptSrc={tinymceScriptSrc}
+                disabled={disabled}
+                value={current ?? ''}
+                init={{ height, menubar: false, plugins, toolbar }}
+                onEditorChange={set}
+                {...rest} />
+
+            {/* El validador del proyecto lee data-validators del DOM, y el
+                editor no expone un input donde ponerlo. */}
+            <input type="hidden" name={name} data-validators={validators ?? undefined} value={current ?? ''} readOnly />
+        </Field>
+    )
+}

package/src/FileDropInputComponent.jsx

@@ -0,0 +1,51 @@
+import { useRef, useState } from 'react'
+
+/**
+ * Gemelo de FileDropInputComponent.vue. `onFilesChange` recibe un array de
+ * File, venga de arrastrar o del diálogo.
+ */
+export default function FileDropInputComponent({
+    multiple = false,
+    accept = undefined,
+    mainText = 'Arrastra y suelta el archivo aquí',
+    subText = 'o haz clic para seleccionar los archivos.',
+    onFilesChange,
+}) {
+    const input = useRef(null)
+    const [dragging, setDragging] = useState(false)
+
+    return (
+        <div
+            className="fe-file-drop"
+            data-dragging={dragging}
+            role="button"
+            tabIndex={0}
+            onClick={() => input.current?.click()}
+            onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    input.current?.click()
+                }
+            }}
+            onDragOver={(event) => {
+                event.preventDefault()
+                setDragging(true)
+            }}
+            onDragLeave={() => setDragging(false)}
+            onDrop={(event) => {
+                event.preventDefault()
+                setDragging(false)
+                onFilesChange?.(Array.from(event.dataTransfer.files))
+            }}>
+            <p>{mainText}</p>
+            <p>{subText}</p>
+
+            <input
+                ref={input}
+                type="file"
+                multiple={multiple}
+                accept={accept}
+                style={{ display: 'none' }}
+                onChange={(event) => onFilesChange?.(Array.from(event.target.files ?? []))} />
+        </div>
+    )
+}

package/src/FileInputComponent.jsx

@@ -0,0 +1,186 @@
+import { useCallback, useMemo, useRef, useState } from 'react'
+import { describeFiles, sizeParser } from 'innoboxrr-form-core'
+
+const DEFAULT_MIMES = [
+    'text/plain',
+    'image/gif', 'image/jpeg', 'image/png',
+    'audio/mp3', 'audio/mpeg', 'audio/midi',
+    'video/mp4', 'video/quicktime',
+    'application/pdf',
+    'application/msword',
+    'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+    'application/vnd.ms-excel',
+    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    'application/zip',
+]
+
+/**
+ * Gemelo de FileInputComponent.vue: soltar o elegir archivos, validarlos y
+ * subirlos a `uploadUrl`.
+ *
+ * Se conservan los tres avisos del original — `onStartUpload`,
+ * `onFileListChange`, `onEndUpload` —, con nombres de prop de React.
+ */
+export default function FileInputComponent({
+    uploadUrl,
+    method = 'POST',
+    autoUpload = false,
+    name = 'file',
+    visibility = 'public',
+    maxSize = 0,
+    totalMaxSize = 0,
+    maxFiles = 1,
+    validMimes = DEFAULT_MIMES,
+    onStartUpload,
+    onFileListChange,
+    onEndUpload,
+}) {
+    const input = useRef(null)
+    const [files, setFiles] = useState([])
+    const [errors, setErrors] = useState([])
+    const [dragging, setDragging] = useState(false)
+    const [uploading, setUploading] = useState(false)
+
+    const rules = useMemo(() => ({ maxSize, validMimes }), [maxSize, validMimes])
+
+    const multiple = maxFiles > 1
+    const maxFilesReached = files.length >= maxFiles
+
+    const csrfToken = () => globalThis.csrf_token
+        ?? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+        ?? ''
+
+    const push = useCallback(async (incoming) => {
+        if (uploading) {
+            return
+        }
+
+        const described = describeFiles(incoming, rules)
+
+        setFiles((current) => [...current, ...described.filter((entry) => entry.validation)])
+        setErrors((current) => [...current, ...described.filter((entry) => ! entry.validation)])
+    }, [rules, uploading])
+
+    const upload = async () => {
+        setUploading(true)
+        onStartUpload?.(true)
+
+        const uploaded = []
+
+        for (const entry of files) {
+            if (entry.uploaded || ! entry.validation) {
+                uploaded.push(entry)
+
+                continue
+            }
+
+            const body = new FormData()
+
+            body.append('_token', csrfToken())
+            // El File de verdad, no el descriptor.
+            body.append('file', entry.file)
+            body.append('visibility', visibility)
+
+            try {
+                const response = await fetch(uploadUrl, { method, body })
+
+                if (! response.ok) {
+                    throw new Error('An error has occurred')
+                }
+
+                const data = await response.json()
+
+                // El original mutaba el File en sitio. Aqui se copian los
+                // datos de la respuesta en una entrada nueva: mutar un File
+                // que React tiene en estado no dispara ningun re-render.
+                uploaded.push({ ...entry, uploaded: true, path: data.path, id: data.id, response: data })
+            } catch (error) {
+                uploaded.push(entry)
+
+                setErrors((current) => [...current, { name: entry.name, errors: [String(error)] }])
+            }
+        }
+
+        setFiles(uploaded)
+        setUploading(false)
+
+        onFileListChange?.(uploaded)
+        onEndUpload?.(true)
+    }
+
+    const remove = (target) => {
+        // El original hacia `files.pop(file)`: pop() ignora sus argumentos y
+        // quita el ultimo lote, asi que borrar un archivo eliminaba otro.
+        setFiles((current) => current.filter((entry) => entry !== target))
+    }
+
+    const totalSize = files.reduce((sum, entry) => sum + entry.size, 0)
+    const overTotal = totalMaxSize > 0 && totalSize > totalMaxSize
+
+    return (
+        <div>
+            <div
+                className="fe-file-drop"
+                data-dragging={dragging}
+                role="button"
+                tabIndex={0}
+                onClick={() => (maxFilesReached ? null : input.current?.click())}
+                onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        input.current?.click()
+                    }
+                }}
+                onDragOver={(event) => {
+                    event.preventDefault()
+                    setDragging(true)
+                }}
+                onDragLeave={() => setDragging(false)}
+                onDrop={(event) => {
+                    event.preventDefault()
+                    setDragging(false)
+                    push(Array.from(event.dataTransfer.files))
+                }}>
+                <p>{maxFilesReached ? 'Máximo de archivos alcanzado' : 'Arrastra y suelta o haz clic'}</p>
+
+                <input
+                    ref={input}
+                    type="file"
+                    name={name}
+                    multiple={multiple}
+                    style={{ display: 'none' }}
+                    onChange={(event) => {
+                        push(Array.from(event.target.files ?? []))
+                        event.target.value = ''
+                    }} />
+            </div>
+
+            <ul className="fe-list">
+                {files.map((entry, index) => (
+                    <li key={`${entry.name}-${index}`}>
+                        <img src={entry.preview} alt={entry.name} width="48" />
+                        <span>{entry.name}</span>
+                        <span> ({sizeParser(entry.size)})</span>
+                        {entry.uploaded ? <span> ✓</span> : null}
+                        <button type="button" onClick={() => remove(entry)}>&times;</button>
+                    </li>
+                ))}
+            </ul>
+
+            {errors.length ? (
+                <ul className="fe-list text-red-600">
+                    {errors.map((entry, index) => (
+                        <li key={`${entry.name}-error-${index}`}>{entry.name}: {entry.errors?.join(', ')}</li>
+                    ))}
+                </ul>
+            ) : null}
+
+            {overTotal ? <p className="text-red-600">El tamaño total supera el máximo permitido.</p> : null}
+
+            {! autoUpload && files.length ? (
+                <button type="button" className="fe-button" disabled={uploading || overTotal} onClick={upload}>
+                    {uploading ? 'Subiendo…' : 'Subir'}
+                </button>
+            ) : null}
+        </div>
+    )
+}