innoboxrr-react-form-elements 3.0.0

package/src/FqsInputComponent.jsx

@@ -0,0 +1,72 @@
+import TextInputComponent from './TextInputComponent.jsx'
+import TextareaInputComponent from './TextareaInputComponent.jsx'
+import useControlled from './internal/useControlled.js'
+
+const DEFAULT_LABELS = {
+    title: 'Add frequency asked questions',
+    question: 'Question',
+    answer: 'Answer',
+    add: 'Add Question',
+    remove: 'Remove question',
+}
+
+/**
+ * Gemelo de FqsInputComponent.vue: la lista de preguntas frecuentes.
+ *
+ * El valor es un array de `{ question, answer }` y nunca se muta en sitio: se
+ * emite uno nuevo, como ya hace la versión Vue corregida.
+ */
+export default function FqsInputComponent({
+    value,
+    onChange,
+    inputClass = 'fe-input  ',
+    labels = DEFAULT_LABELS,
+    name = 'fqs',
+}) {
+    const [current, set] = useControlled(value, onChange, [])
+
+    const items = current ?? []
+    const text = { ...DEFAULT_LABELS, ...labels }
+
+    const updateAt = (index, field, next) => set(
+        items.map((item, position) => (position === index ? { ...item, [field]: next } : item))
+    )
+
+    return (
+        <div>
+            <h4>{text.title}</h4>
+
+            {items.map((item, index) => (
+                <div key={index} className="fe-card fe-card-sm fe-card-body fe-mb">
+                    <TextInputComponent
+                        type="text"
+                        name={`${name}[${index}][question]`}
+                        label={text.question}
+                        customClass={inputClass}
+                        value={item.question ?? ''}
+                        onChange={(next) => updateAt(index, 'question', next)} />
+
+                    <TextareaInputComponent
+                        name={`${name}[${index}][answer]`}
+                        label={text.answer}
+                        value={item.answer ?? ''}
+                        onChange={(next) => updateAt(index, 'answer', next)} />
+
+                    <button
+                        type="button"
+                        className="fe-button fe-button-danger fe-button-sm"
+                        onClick={() => set(items.filter((_, position) => position !== index))}>
+                        {text.remove}
+                    </button>
+                </div>
+            ))}
+
+            <button
+                type="button"
+                className="fe-button"
+                onClick={() => set([...items, { question: '', answer: '' }])}>
+                {text.add}
+            </button>
+        </div>
+    )
+}

package/src/InputErrorComponent.jsx

@@ -0,0 +1,26 @@
+/**
+ * Gemelo de InputErrorComponent.vue.
+ *
+ * `errors` es el objeto que devuelve Laravel en un 422 (`{ campo: [...] }`) y
+ * `type` la clave que mira este control.
+ */
+import { useSyncExternalStore } from 'react'
+import { getTheme, onThemeChange } from 'innoboxrr-form-core'
+
+export default function InputErrorComponent({ errors, type }) {
+    const theme = useSyncExternalStore(onThemeChange, () => getTheme(), () => getTheme())
+
+    const messages = errors?.[type]
+
+    if (! messages?.length) {
+        return null
+    }
+
+    return (
+        <div>
+            {messages.map((error) => (
+                <p key={error} className={theme.error}>{error}</p>
+            ))}
+        </div>
+    )
+}

package/src/ModelSearchInputComponent.jsx

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import SelectSearchInputComponent from './SelectSearchInputComponent.jsx'
+
+/**
+ * Gemelo de ModelSearchInputComponent.vue: busca contra un endpoint y deja
+ * elegir un registro.
+ *
+ * `onSubmit` recibe el id elegido y `onSelected` el registro completo, igual
+ * que los eventos `submit` y `selected` de la versión Vue.
+ */
+export default function ModelSearchInputComponent({
+    customClass = null,
+    hideOnEmit = false,
+    labelStr,
+    placeholderStr,
+    route,
+    method = 'get',
+    q = 'id',
+    externalFilters = {},
+    reduce = (option) => option.id,
+    optionLabel = 'name',
+    multiple = false,
+    minLength = 1,
+    debounce = 300,
+    value,
+    onSubmit,
+    onSelected,
+}) {
+    const [options, setOptions] = useState([])
+    const [selected, setSelected] = useState(value ?? null)
+    const [visible, setVisible] = useState(true)
+    const timer = useRef(null)
+
+    const search = useCallback(async (term) => {
+        if (term.length < minLength) {
+            setOptions([])
+
+            return
+        }
+
+        const params = { ...externalFilters, [q]: term }
+
+        try {
+            if (method.toLowerCase() === 'get') {
+                const url = new URL(route, globalThis.location?.origin ?? 'http://localhost')
+
+                Object.entries(params).forEach(([key, item]) => url.searchParams.set(key, item))
+
+                const response = await fetch(url, { headers: { Accept: 'application/json' } })
+
+                setOptions((await response.json())?.data ?? [])
+
+                return
+            }
+
+            const response = await fetch(route, {
+                method: method.toUpperCase(),
+                headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+                body: JSON.stringify(params),
+            })
+
+            setOptions((await response.json())?.data ?? [])
+        } catch {
+            setOptions([])
+        }
+    }, [route, method, q, externalFilters, minLength])
+
+    // Un fetch por tecla satura el endpoint; la version Vue lo dejaba al
+    // criterio de quien montara el componente.
+    useEffect(() => () => window.clearTimeout(timer.current), [])
+
+    if (! visible) {
+        return null
+    }
+
+    return (
+        <SelectSearchInputComponent
+            customClass={customClass ?? undefined}
+            name={q}
+            inputLabel={labelStr}
+            placeholder={placeholderStr}
+            options={options}
+            label={optionLabel}
+            reduce={reduce}
+            value={selected}
+            onSearch={(term) => {
+                window.clearTimeout(timer.current)
+                timer.current = window.setTimeout(() => search(term), debounce)
+            }}
+            onChange={(next) => {
+                setSelected(next)
+                onSubmit?.(next)
+
+                if (! multiple && next != null) {
+                    const record = options.find((option) => reduce(option) === next)
+
+                    if (record) {
+                        onSelected?.(record)
+                    }
+
+                    if (hideOnEmit) {
+                        setVisible(false)
+                    }
+                }
+            }} />
+    )
+}

package/src/MultiCheckboxInputComponent.jsx

@@ -0,0 +1,35 @@
+import SingleCheckboxInputComponent from './SingleCheckboxInputComponent.jsx'
+
+/**
+ * Gemelo de MultiCheckboxInputComponent.vue.
+ *
+ * La versión Vue recalculaba la selección leyendo el DOM con
+ * `document.querySelectorAll`, lo que ataba el componente a que sus inputs
+ * estuvieran montados en el documento y rompía con dos grupos del mismo `id`.
+ * Aquí la selección sale del propio valor, que es de donde tenía que salir.
+ *
+ * @param {{id?: string, value: Array, options: Array<{id: any, name: string}>, onChange?: (value: Array) => void}} props
+ */
+export default function MultiCheckboxInputComponent({ id = '', value, options, onChange }) {
+    const selected = value ?? []
+
+    const toggle = (optionId, checked) => {
+        onChange?.(checked
+            ? [...selected, optionId]
+            : selected.filter((item) => item !== optionId))
+    }
+
+    return (
+        <div>
+            {options.map((option) => (
+                <SingleCheckboxInputComponent
+                    key={option.id}
+                    id={id}
+                    label={option.name}
+                    value={option.id}
+                    checked={selected.includes(option.id)}
+                    onCheckedChange={(checked) => toggle(option.id, checked)} />
+            ))}
+        </div>
+    )
+}

package/src/PolymorphicInputComponent.jsx

@@ -0,0 +1,181 @@
+import { useId, useState } from 'react'
+import CheckboxInputComponent from './CheckboxInputComponent.jsx'
+import EditorInputComponent from './EditorInputComponent.jsx'
+import RadioInputComponent from './RadioInputComponent.jsx'
+import SelectInputComponent from './SelectInputComponent.jsx'
+import SimpleFileInputComponent from './SimpleFileInputComponent.jsx'
+import SwitchComponent from './SwitchComponent.jsx'
+import TextInputComponent from './TextInputComponent.jsx'
+import TextareaInputComponent from './TextareaInputComponent.jsx'
+import useControlled from './internal/useControlled.js'
+
+const TEXT_TYPES = ['text', 'number', 'date', 'time', 'url', 'email']
+
+/**
+ * Gemelo de PolymorphicInputComponent.vue: un solo componente que decide qué
+ * control pintar a partir de `config.type`.
+ *
+ * En Vue el prop se llama literalmente `props`; aquí se llama `config`, que es
+ * lo que significa, y se acepta `props` como alias para no romper a quien ya
+ * lo pasaba así.
+ */
+export default function PolymorphicInputComponent({
+    config,
+    props: legacyConfig,
+    value,
+    onChange,
+    onSave,
+    onEnter,
+    onInput,
+    onFocus,
+    onBlur,
+}) {
+    const settings = config ?? legacyConfig ?? {}
+    const uid = useId()
+    const [current, set] = useControlled(value, onChange, '')
+    const [dirty, setDirty] = useState(false)
+
+    const update = (next) => {
+        setDirty(true)
+        set(next)
+    }
+
+    const saveButton = onSave && dirty ? (
+        <button
+            type="button"
+            className="fe-button fe-button-sm"
+            onClick={() => {
+                setDirty(false)
+                onSave(current)
+            }}>
+            &check;
+        </button>
+    ) : null
+
+    const control = () => {
+        if (TEXT_TYPES.includes(settings.type)) {
+            return (
+                <TextInputComponent
+                    label={settings.label}
+                    icon={settings.icon}
+                    customClass={settings.customClass}
+                    type={settings.type}
+                    name={settings.name}
+                    placeholder={settings.placeholder}
+                    validators={settings.validators}
+                    minLength={settings.minLength}
+                    maxLength={settings.maxLength}
+                    readOnly={settings.readonly}
+                    value={current}
+                    onChange={update}
+                    onEnter={onEnter}
+                    onInput={onInput}
+                    onFocus={onFocus}
+                    onBlur={onBlur} />
+            )
+        }
+
+        switch (settings.type) {
+            case 'textarea':
+                return (
+                    <TextareaInputComponent
+                        label={settings.label}
+                        customClass={settings.customClass}
+                        name={settings.name}
+                        placeholder={settings.placeholder}
+                        validators={settings.validators}
+                        minLength={settings.minLength}
+                        maxLength={settings.maxLength}
+                        value={current}
+                        onChange={update} />
+                )
+
+            case 'radio':
+                return (
+                    <div>
+                        {settings.label ? <div className="fe-mb"><label>{settings.label}</label></div> : null}
+                        {(settings.options ?? []).map((option) => (
+                            <RadioInputComponent
+                                key={option}
+                                customClass={settings.customClass}
+                                name={settings.name}
+                                validators={settings.validators}
+                                text={option}
+                                val={option}
+                                value={current}
+                                onChange={update} />
+                        ))}
+                    </div>
+                )
+
+            case 'checkbox':
+                return (
+                    <div>
+                        {settings.label ? <div className="fe-mb"><label>{settings.label}</label></div> : null}
+                        {(settings.options ?? []).map((option) => (
+                            <CheckboxInputComponent
+                                key={option}
+                                customClass={settings.customClass}
+                                name={settings.name}
+                                validators={settings.validators}
+                                text={option}
+                                val={option}
+                                value={Array.isArray(current) ? current : []}
+                                onChange={update} />
+                        ))}
+                    </div>
+                )
+
+            case 'select':
+                return (
+                    <SelectInputComponent
+                        label={settings.label}
+                        customClass={settings.customClass}
+                        name={settings.name}
+                        validators={settings.validators}
+                        value={current}
+                        onChange={update}>
+                        <option value="">{settings.placeholder ?? ''}</option>
+                        {(settings.options ?? []).map((option) => (
+                            <option key={option.value ?? option} value={option.value ?? option}>
+                                {option.label ?? option}
+                            </option>
+                        ))}
+                    </SelectInputComponent>
+                )
+
+            case 'switch':
+                return <SwitchComponent value={Boolean(current)} onChange={update} />
+
+            case 'editor':
+                return (
+                    <EditorInputComponent
+                        id={uid}
+                        name={settings.name}
+                        label={settings.label}
+                        value={current}
+                        onChange={update} />
+                )
+
+            case 'file':
+                return (
+                    <SimpleFileInputComponent
+                        inputName={settings.name}
+                        label={settings.label}
+                        onInput={(file) => update(file)} />
+                )
+
+            default:
+                return <div>{`Tipo de campo desconocido: ${settings.type}`}</div>
+        }
+    }
+
+    return (
+        <div>
+            <div className="fe-grid-sm" fe-grid="">
+                <div className="fe-w-expand">{control()}</div>
+                {saveButton ? <div className="fe-w-auto">{saveButton}</div> : null}
+            </div>
+        </div>
+    )
+}

package/src/RadioInputComponent.jsx

@@ -0,0 +1,38 @@
+import useControlled from './internal/useControlled.js'
+import useThemeClass from './internal/useThemeClass.js'
+
+/**
+ * Gemelo de RadioInputComponent.vue. Seleccionado es `value === val`.
+ */
+export default function RadioInputComponent({
+    customClass = undefined,
+    name,
+    validators = null,
+    text = '',
+    val,
+    value,
+    onChange,
+    children,
+    ...rest
+}) {
+    const [current, set] = useControlled(value, onChange, '')
+    const radioClass = useThemeClass('radio', customClass)
+
+    return (
+        <div className="fe-mb">
+            <label className="ml-2 text-sm font-medium text-gray-900 dark:text-white">
+                <input
+                    className={radioClass}
+                    type="radio"
+                    name={name}
+                    data-validators={validators ?? undefined}
+                    value={val}
+                    checked={current === val}
+                    onChange={() => set(val)}
+                    {...rest} />
+                {text}
+                {children}
+            </label>
+        </div>
+    )
+}

package/src/SelectInputComponent.jsx

@@ -0,0 +1,51 @@
+import { useId } from 'react'
+import Field from './internal/Field.jsx'
+import useThemeClass from './internal/useThemeClass.js'
+import useControlled from './internal/useControlled.js'
+
+/**
+ * Gemelo de SelectInputComponent.vue. Las opciones van como hijos, igual que
+ * el slot por defecto en Vue.
+ */
+export default function SelectInputComponent({
+    id: providedId = undefined,
+    label = '',
+    help = null,
+    customClass = undefined,
+    name,
+    multiple = false,
+    size = null,
+    validators = null,
+    value,
+    onChange,
+    children,
+    ...rest
+}) {
+    const generatedId = useId()
+    const uid = providedId ?? generatedId
+    const [current, set] = useControlled(value, onChange, multiple ? [] : '')
+    const selectClass = useThemeClass('select', customClass)
+
+    return (
+        <Field label={label} help={help} htmlFor={uid}>
+            <select
+                id={uid}
+                className={selectClass}
+                name={name}
+                multiple={multiple}
+                data-validators={validators ?? undefined}
+                size={size ?? undefined}
+                value={current ?? (multiple ? [] : '')}
+                onChange={(event) => {
+                    // Un select múltiple entrega un array, como el v-model de
+                    // Vue: quien lo consume no debería notar la diferencia.
+                    set(multiple
+                        ? Array.from(event.target.selectedOptions, (option) => option.value)
+                        : event.target.value)
+                }}
+                {...rest}>
+                {children}
+            </select>
+        </Field>
+    )
+}

package/src/SelectSearchInputComponent.jsx

@@ -0,0 +1,102 @@
+import { useCallback, useId, useMemo } from 'react'
+import Select from 'react-select'
+import Field from './internal/Field.jsx'
+import useControlled from './internal/useControlled.js'
+
+/**
+ * Gemelo de SelectSearchInputComponent.vue.
+ *
+ * La versión Vue envuelve vue-select; aquí va react-select, que es su
+ * equivalente en React: la misma búsqueda, el mismo multiselección, el mismo
+ * `appendToBody` (aquí `menuPortalTarget`) y accesibilidad de teclado de
+ * serie.
+ *
+ * El contrato público es el del gemelo Vue: `options`, `label` como nombre de
+ * la propiedad que se muestra, `reduce` para quedarse con el valor, y
+ * `value` + `onChange(valor)`.
+ */
+export default function SelectSearchInputComponent({
+    id: providedId = undefined,
+    inputLabel = '',
+    help = null,
+    customClass = null,
+    name,
+    options = [],
+    label = 'label',
+    placeholder = '',
+    clearable = true,
+    disabled = false,
+    multiple = false,
+    appendToBody = false,
+    loading = false,
+    reduce = (option) => option,
+    validators = null,
+    value,
+    onChange,
+    onSearch,
+    ...rest
+}) {
+    const generatedId = useId()
+    const uid = providedId ?? generatedId
+    const [current, set] = useControlled(value, onChange, multiple ? [] : null)
+
+    const getOptionLabel = useCallback(
+        (option) => (typeof option === 'object' && option !== null ? String(option[label] ?? '') : String(option)),
+        [label]
+    )
+
+    // react-select trabaja con la opcion entera; el contrato guarda solo lo
+    // que devuelve reduce. Esta es la traduccion entre los dos, y es la razon
+    // de que quien consume el componente no note el cambio de libreria.
+    const selected = useMemo(() => {
+        if (multiple) {
+            const wanted = Array.isArray(current) ? current : []
+
+            return options.filter((option) => wanted.includes(reduce(option)))
+        }
+
+        return options.find((option) => reduce(option) === current) ?? null
+    }, [options, current, multiple, reduce])
+
+    return (
+        <Field label={inputLabel} help={help} htmlFor={uid} inline={false}>
+            <Select
+                inputId={uid}
+                className={customClass ?? undefined}
+                classNamePrefix="fe-select"
+                options={options}
+                getOptionLabel={getOptionLabel}
+                getOptionValue={(option) => String(reduce(option))}
+                placeholder={placeholder}
+                isClearable={clearable}
+                isDisabled={disabled}
+                isMulti={multiple}
+                isLoading={loading}
+                aria-label={inputLabel || name}
+                // Con `appendToBody` el menu se saca del flujo, que es lo que
+                // resuelve los recortes por overflow y los z-index.
+                menuPortalTarget={appendToBody && typeof document !== 'undefined' ? document.body : undefined}
+                styles={appendToBody ? { menuPortal: (base) => ({ ...base, zIndex: 1015 }) } : undefined}
+                value={selected}
+                onInputChange={(term, meta) => {
+                    if (meta.action === 'input-change') {
+                        onSearch?.(term)
+                    }
+
+                    return term
+                }}
+                onChange={(option) => {
+                    set(multiple
+                        ? (option ?? []).map((item) => reduce(item))
+                        : (option ? reduce(option) : null))
+                }}
+                {...rest} />
+
+            {/* El validador del proyecto lee data-validators del DOM, y
+                react-select no expone un input donde ponerlo. */}
+            <input type="hidden" name={name} data-validators={validators ?? undefined} value={
+                multiple ? (Array.isArray(current) ? current.join(',') : '') : (current ?? '')
+            } readOnly />
+        </Field>
+    )
+}

package/src/SimpleFileInputComponent.jsx

@@ -0,0 +1,40 @@
+import { useId, useState } from 'react'
+
+/**
+ * Gemelo de SimpleFileInputComponent.vue: un botón que abre el diálogo de
+ * archivos y muestra el nombre del elegido. `onInput` recibe el File o null.
+ */
+export default function SimpleFileInputComponent({
+    customClass = null,
+    inputName = 'file',
+    label = 'Seleccionar archivo',
+    accept = undefined,
+    onInput,
+}) {
+    const uid = useId()
+    const [file, setFile] = useState(null)
+
+    return (
+        <div className={['file-select', customClass].filter(Boolean).join(' ')}>
+            <label htmlFor={uid} className="select-button" style={{ cursor: 'pointer' }}>
+                {file?.name ?? label}
+            </label>
+
+            <input
+                id={uid}
+                type="file"
+                name={inputName}
+                accept={accept}
+                style={{ display: 'none' }}
+                onChange={(event) => {
+                    // Cancelar el dialogo deja la lista vacia: hay que
+                    // devolver null, no undefined, o quien lo consume revienta
+                    // al leer file.size.
+                    const selected = event.target.files?.[0] ?? null
+
+                    setFile(selected)
+                    onInput?.(selected)
+                }} />
+        </div>
+    )
+}

package/src/SingleCheckboxInputComponent.jsx

@@ -0,0 +1,33 @@
+/**
+ * Gemelo de SingleCheckboxInputComponent.vue.
+ *
+ * Es el bloque que usa MultiCheckboxInputComponent para cada opción: el estado
+ * lo lleva el padre, aquí solo se avisa del cambio.
+ */
+export default function SingleCheckboxInputComponent({
+    id,
+    label = '',
+    checked = false,
+    value = null,
+    onCheckedChange,
+    ...rest
+}) {
+    const htmlId = `${id}_${label}`
+
+    return (
+        <div className="fe-mb">
+            <label htmlFor={htmlId} className="ml-2 text-sm font-medium text-gray-900 dark:text-white">
+                <input
+                    id={htmlId}
+                    className="fe-checkbox"
+                    type="checkbox"
+                    name={`input_${id}`}
+                    checked={checked}
+                    value={value ?? undefined}
+                    onChange={(event) => onCheckedChange?.(event.target.checked)}
+                    {...rest} />
+                &nbsp;{label}
+            </label>
+        </div>
+    )
+}