innoboxrr-react-form-elements 3.0.0

package/src/StarsInputComponent.jsx

@@ -0,0 +1,49 @@
+import { useState } from 'react'
+import useControlled from './internal/useControlled.js'
+
+/**
+ * Gemelo de StarsInputComponent.vue.
+ *
+ * La versión Vue montaba un radio nativo por estrella y pintaba encima con
+ * CSS. Aquí son botones: el control ya es accesible por teclado sin depender
+ * de la hoja de estilos, y el valor sigue siendo el mismo número.
+ */
+export default function StarsInputComponent({
+    max = 5,
+    value,
+    onChange,
+    name = 'rating',
+    char = '★',
+    inactiveChar = null,
+    readOnly = false,
+    starsSize = '50px',
+    ...rest
+}) {
+    const [current, set] = useControlled(value, onChange, 0)
+    const [hovered, setHovered] = useState(null)
+
+    const shown = hovered ?? current ?? 0
+
+    return (
+        <div
+            className="fe-stars"
+            style={{ fontSize: starsSize }}
+            onMouseLeave={() => setHovered(null)}
+            {...rest}>
+            {Array.from({ length: max }, (_, index) => index + 1).map((position) => (
+                <button
+                    key={position}
+                    type="button"
+                    name={`${name}${position}`}
+                    disabled={readOnly}
+                    aria-label={`${position}`}
+                    aria-pressed={position <= (current ?? 0)}
+                    data-active={position <= shown}
+                    onMouseEnter={() => (readOnly ? null : setHovered(position))}
+                    onClick={() => (readOnly ? null : set(position))}>
+                    {position <= shown ? char : (inactiveChar ?? char)}
+                </button>
+            ))}
+        </div>
+    )
+}

package/src/SwitchComponent.jsx

@@ -0,0 +1,25 @@
+import useControlled from './internal/useControlled.js'
+
+/**
+ * Gemelo de SwitchComponent.vue.
+ *
+ * Los estilos `.fe-switch` van en form-elements.css: en Vue estaban en un
+ * <style scoped> y React no tiene equivalente.
+ */
+export default function SwitchComponent({ value, onChange, onToggle, ...rest }) {
+    const [current, set] = useControlled(value, onChange, false)
+
+    return (
+        <label className="fe-switch">
+            <input
+                type="checkbox"
+                checked={Boolean(current)}
+                onChange={(event) => {
+                    set(event.target.checked)
+                    onToggle?.(event)
+                }}
+                {...rest} />
+            <div className="fe-switch-slider fe-switch-lg"></div>
+        </label>
+    )
+}

package/src/TagsInputComponent.jsx

@@ -0,0 +1,88 @@
+import { useCallback, useId, useMemo, useRef } from 'react'
+import Tags from '@yaireo/tagify/react'
+import Field from './internal/Field.jsx'
+import useThemeClass from './internal/useThemeClass.js'
+import useControlled from './internal/useControlled.js'
+
+/**
+ * Gemelo de TagsInputComponent.vue.
+ *
+ * Es literalmente la misma librería que usa la versión Vue —Tagify—, con su
+ * envoltorio oficial de React. Eso mantiene el mismo comportamiento, el mismo
+ * marcado y la misma hoja de estilos (`@yaireo/tagify/dist/tagify.css`), que
+ * es lo que importa para que un formulario generado se vea igual en los dos
+ * frameworks.
+ *
+ * El valor sigue siendo un array de cadenas, como en Vue. Acepta también una
+ * cadena separada por comas.
+ */
+export default function TagsInputComponent({
+    id: providedId = undefined,
+    label = '',
+    help = null,
+    customClass = undefined,
+    name,
+    placeholder = '',
+    validators = null,
+    whitelist = undefined,
+    maxTags = undefined,
+    duplicates = false,
+    value,
+    onChange,
+    tagifyRef,
+}) {
+    const generatedId = useId()
+    const uid = providedId ?? generatedId
+    const [current, set] = useControlled(value, onChange, [])
+    const inputClass = useThemeClass('input', customClass)
+    const latest = useRef(null)
+
+    latest.current = set
+
+    const tags = useMemo(() => (
+        Array.isArray(current)
+            ? current
+            : String(current ?? '').split(',').map((tag) => tag.trim()).filter(Boolean)
+    ), [current])
+
+    const settings = useMemo(() => {
+        const options = {
+            placeholder,
+            duplicates,
+            // Tagify emite objetos {value}; el contrato guarda cadenas.
+            originalInputValueFormat: (values) => values.map((tag) => tag.value).join(','),
+        }
+
+        // Tagify no distingue "no lo pases" de "pasalo como undefined": con
+        // whitelist a undefined revienta al filtrar sugerencias.
+        if (whitelist !== undefined) {
+            options.whitelist = whitelist
+        }
+
+        if (maxTags !== undefined) {
+            options.maxTags = maxTags
+        }
+
+        return options
+    }, [placeholder, whitelist, maxTags, duplicates])
+
+    const onTagifyChange = useCallback((event) => {
+        const raw = event.detail?.value ?? ''
+
+        latest.current(raw ? raw.split(',').map((tag) => tag.trim()).filter(Boolean) : [])
+    }, [])
+
+    return (
+        <Field label={label} help={help} htmlFor={uid}>
+            <Tags
+                id={uid}
+                name={name}
+                className={inputClass}
+                data-validators={validators ?? undefined}
+                settings={settings}
+                value={tags}
+                tagifyRef={tagifyRef}
+                onChange={onTagifyChange} />
+        </Field>
+    )
+}

package/src/TextEditorMonoStyleInputComponent.jsx

@@ -0,0 +1,27 @@
+import CodeMirrorComponent from './CodeMirrorComponent.jsx'
+
+/**
+ * Gemelo de TextEditorMonoStyleInputComponent.vue: el editor monoespaciado
+ * para plantillas HTML.
+ */
+export default function TextEditorMonoStyleInputComponent({
+    label = '',
+    help = null,
+    name,
+    height = '400px',
+    readOnly = false,
+    value,
+    onChange,
+}) {
+    return (
+        <CodeMirrorComponent
+            label={label}
+            help={help}
+            name={name}
+            language="html"
+            height={height}
+            readOnly={readOnly}
+            value={value}
+            onChange={onChange} />
+    )
+}

package/src/TextInputComponent.jsx

@@ -0,0 +1,117 @@
+import { useId, useState } from 'react'
+import { applyMask, isMaskSpec } from 'innoboxrr-maskjs'
+import Field from './internal/Field.jsx'
+import useThemeClass from './internal/useThemeClass.js'
+import useControlled from './internal/useControlled.js'
+
+/**
+ * Gemelo de TextInputComponent.vue.
+ *
+ * Mismos nombres de prop salvo los que React escribe en camelCase: se aceptan
+ * también `min_length` y `max_length` porque son los que declara el laraimport
+ * y los que emite el generador de Vue.
+ */
+export default function TextInputComponent({
+    id: providedId = undefined,
+    label = '',
+    help = null,
+    icon = '',
+    customClass = undefined,
+    type,
+    name,
+    placeholder = null,
+    autoFocus = undefined,
+    autoComplete = undefined,
+    validators = null,
+    minLength = null,
+    maxLength = null,
+    min_length = null,
+    max_length = null,
+    steps = null,
+    readOnly = undefined,
+    maskFormat = null,
+    value,
+    onChange,
+    onEnter,
+    onInput,
+    onFocus,
+    onBlur,
+    onPaste,
+    ...rest
+}) {
+    const generatedId = useId()
+    const uid = providedId ?? generatedId
+    const [current, set] = useControlled(value, onChange, '')
+    const [showPassword, setShowPassword] = useState(false)
+    const inputClass = useThemeClass('input', customClass)
+
+    const isPassword = type === 'password'
+    const effectiveType = isPassword ? (showPassword ? 'text' : 'password') : type
+
+    const minimum = minLength ?? min_length
+    const maximum = maxLength ?? max_length
+
+    const hasIcon = icon !== '' && icon != null
+
+    // El equivalente de la directiva v-format de Vue. Un input controlado no
+    // necesita el hook de maskjs: basta con formatear el valor de entrada,
+    // porque applyMask es pura e idempotente.
+    const masked = isMaskSpec(maskFormat)
+
+    const shown = masked ? applyMask(current, maskFormat).value : (current ?? '')
+
+    return (
+        <Field label={label} help={help} htmlFor={uid}>
+            {hasIcon ? <span className="fe-field-icon" uk-icon={`icon: ${icon}`}></span> : null}
+
+            <div className="fe-input-wrap">
+                <input
+                    id={uid}
+                    data-uid={uid}
+                    className={[inputClass, isPassword ? 'fe-has-toggle' : ''].filter(Boolean).join(' ')}
+                    type={effectiveType}
+                    name={name}
+                    placeholder={placeholder ?? undefined}
+                    autoFocus={autoFocus ?? undefined}
+                    autoComplete={autoComplete ?? undefined}
+                    data-validators={validators ?? undefined}
+                    data-mask={masked ? maskFormat.mask : undefined}
+                    data-format={masked ? maskFormat.format : undefined}
+                    data-min_length={minimum ?? undefined}
+                    data-max_length={maximum ?? undefined}
+                    min={minimum ?? undefined}
+                    max={maximum ?? undefined}
+                    step={steps ?? undefined}
+                    readOnly={readOnly ?? undefined}
+                    value={shown}
+                    onKeyUp={(event) => {
+                        if (event.key === 'Enter' && onEnter) {
+                            onEnter(event)
+                        }
+                    }}
+                    onChange={(event) => {
+                        set(masked ? applyMask(event.target.value, maskFormat).value : event.target.value)
+
+                        if (onInput) {
+                            onInput(event)
+                        }
+                    }}
+                    onFocus={onFocus}
+                    onBlur={onBlur}
+                    onPaste={onPaste}
+                    {...rest} />
+
+                {isPassword ? (
+                    <button
+                        type="button"
+                        tabIndex={-1}
+                        className="fe-password-toggle"
+                        aria-label={showPassword ? 'Hide password' : 'Show password'}
+                        onClick={() => setShowPassword((shown) => ! shown)}>
+                        <i className={showPassword ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'}></i>
+                    </button>
+                ) : null}
+            </div>
+        </Field>
+    )
+}

package/src/TextareaInputComponent.jsx

@@ -0,0 +1,50 @@
+import { useId } from 'react'
+import Field from './internal/Field.jsx'
+import useThemeClass from './internal/useThemeClass.js'
+import useControlled from './internal/useControlled.js'
+
+/**
+ * Gemelo de TextareaInputComponent.vue.
+ */
+export default function TextareaInputComponent({
+    id: providedId = undefined,
+    label = '',
+    help = null,
+    customClass = undefined,
+    rows = 5,
+    name,
+    placeholder = null,
+    validators = null,
+    minLength = null,
+    maxLength = null,
+    min_length = null,
+    max_length = null,
+    value,
+    onChange,
+    ...rest
+}) {
+    const generatedId = useId()
+    const uid = providedId ?? generatedId
+    const [current, set] = useControlled(value, onChange, '')
+    const areaClass = useThemeClass('textarea', customClass)
+
+    const minimum = minLength ?? min_length
+    const maximum = maxLength ?? max_length
+
+    return (
+        <Field label={label} help={help} htmlFor={uid}>
+            <textarea
+                id={uid}
+                className={areaClass}
+                rows={rows}
+                name={name}
+                placeholder={placeholder ?? undefined}
+                data-validators={validators ?? undefined}
+                data-min_length={minimum ?? undefined}
+                data-max_length={maximum ?? undefined}
+                value={current ?? ''}
+                onChange={(event) => set(event.target.value)}
+                {...rest}></textarea>
+        </Field>
+    )
+}

package/src/TimezoneSelectInputComponent.jsx

@@ -0,0 +1,32 @@
+import SelectSearchInputComponent from './SelectSearchInputComponent.jsx'
+import { timezones } from 'innoboxrr-form-core'
+
+/**
+ * Gemelo de TimezoneSelectInputComponent.vue: el buscador con la lista de
+ * zonas horarias ya cargada. El valor que sale es la cadena IANA.
+ */
+export default function TimezoneSelectInputComponent({
+    label = '',
+    placeholder = 'Select a timezone',
+    help = null,
+    name,
+    validators = '',
+    value,
+    onChange,
+    ...rest
+}) {
+    return (
+        <SelectSearchInputComponent
+            name={name}
+            inputLabel={label}
+            help={help}
+            validators={validators}
+            placeholder={placeholder}
+            options={timezones}
+            label="label"
+            reduce={(option) => option.value}
+            value={value}
+            onChange={onChange}
+            {...rest} />
+    )
+}

package/src/css/form-elements.css

@@ -0,0 +1,187 @@
+/**
+ * Los estilos que en el paquete Vue viven en los bloques <style scoped>.
+ *
+ * React no tiene scoped styles, así que se publican como una hoja única que la
+ * aplicación importa una vez. Los selectores llevan prefijo `fe-` para que no
+ * choquen con nada del anfitrión.
+ */
+
+.fe-input-wrap {
+    position: relative;
+    width: 100%;
+}
+
+/* Deja sitio a la derecha para que el texto no pase por debajo del ojo. */
+.fe-input-wrap .fe-has-toggle {
+    padding-right: 2.75rem;
+}
+
+.fe-password-toggle {
+    position: absolute;
+    top: 50%;
+    right: 0.75rem;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.75rem;
+    height: 1.75rem;
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: none;
+    border-radius: 9999px;
+    cursor: pointer;
+    color: #6b7280;
+    transition: color 0.15s ease, background-color 0.15s ease;
+    z-index: 2;
+}
+
+.fe-password-toggle:hover {
+    color: #111827;
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
+.fe-password-toggle:focus {
+    outline: none;
+}
+
+.dark .fe-password-toggle,
+html.dark .fe-password-toggle {
+    color: #94a3b8;
+}
+
+.dark .fe-password-toggle:hover,
+html.dark .fe-password-toggle:hover {
+    color: #f1f5f9;
+    background-color: rgba(255, 255, 255, 0.08);
+}
+
+.fe-input-error {
+    margin: -20px 0 0 2px;
+    font-size: 0.8em;
+}
+
+.fe-stars {
+    display: inline-flex;
+    gap: 0.25rem;
+    cursor: pointer;
+}
+
+.fe-stars button {
+    background: transparent;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+    color: #d1d5db;
+    line-height: 1;
+}
+
+.fe-stars button[data-active='true'] {
+    color: #f59e0b;
+}
+
+.fe-file-drop {
+    border: 2px dashed #d1d5db;
+    border-radius: 0.5rem;
+    padding: 1.5rem;
+    text-align: center;
+    transition: border-color 0.15s ease, background-color 0.15s ease;
+}
+
+.fe-file-drop[data-dragging='true'] {
+    border-color: #3b82f6;
+    background-color: rgba(59, 130, 246, 0.05);
+}
+
+.fe-avatar-preview {
+    width: 8rem;
+    height: 8rem;
+    border-radius: 9999px;
+    object-fit: cover;
+}
+
+.fe-dynamic-group-row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: flex-start;
+    margin-bottom: 0.5rem;
+}
+
+.fe-dynamic-group-row > *:first-child {
+    flex: 1 1 auto;
+}
+
+/* SwitchComponent: en Vue estos estilos iban en su <style scoped>. */
+
+.fe-switch {
+    position: relative;
+    display: inline-block;
+    height: 19px;
+    width: 30px;
+}
+
+.fe-switch input {
+    display: none;
+}
+
+.fe-switch-slider {
+    background-color: rgba(0, 0, 0, 0.22);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    border-radius: 500px;
+    bottom: 0;
+    cursor: pointer;
+    transition-property: background-color;
+    transition-duration: 0.2s;
+    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.07);
+}
+
+.fe-switch-slider:before {
+    content: '';
+    background-color: #fff;
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    left: 2px;
+    bottom: 2px;
+    border-radius: 50%;
+    transition-property: transform, box-shadow;
+    transition-duration: 0.2s;
+}
+
+.fe-switch input:checked + .fe-switch-slider {
+    background-color: #39f !important;
+}
+
+.fe-switch input:checked + .fe-switch-slider:before {
+    transform: translateX(13px);
+}
+
+.fe-switch-slider.fe-switch-lg:before {
+    transform: scale(1.2);
+    box-shadow: 0 0 6px rgba(0, 0, 0, 0.22);
+}
+
+.fe-switch input:checked + .fe-switch-slider.fe-switch-lg:before {
+    transform: translateX(13px) scale(1.2);
+}
+
+/* CodeInputComponent */
+
+.fe-code-input {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.fe-code-input input::-webkit-outer-spin-button,
+.fe-code-input input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.fe-code-input input {
+    -moz-appearance: textfield;
+}

package/src/internal/Field.jsx

@@ -0,0 +1,21 @@
+import { useSyncExternalStore } from 'react'
+import { getTheme, onThemeChange } from 'innoboxrr-form-core'
+import FieldLabel from './FieldLabel.jsx'
+
+/**
+ * El envoltorio `fe-mb > fe-inline` que llevan casi todos los controles.
+ */
+export default function Field({ label, help, htmlFor, children, inline = true }) {
+    const theme = useSyncExternalStore(onThemeChange, () => getTheme(), () => getTheme())
+
+    const body = inline
+        ? <div className={theme.fieldInner}>{children}</div>
+        : children
+
+    return (
+        <div className={theme.field}>
+            {(label || help) ? <FieldLabel label={label} help={help} htmlFor={htmlFor} /> : null}
+            {body}
+        </div>
+    )
+}

package/src/internal/FieldLabel.jsx

@@ -0,0 +1,29 @@
+/**
+ * La etiqueta con su icono de ayuda.
+ *
+ * En el paquete Vue este bloque está copiado en los treinta componentes. El
+ * marcado es idéntico a propósito: las dos versiones comparten el mismo CSS
+ * (UIkit + Tailwind) del proyecto anfitrión, así que cambiarlo aquí
+ * descuadraría los formularios generados para React respecto a los de Vue.
+ */
+import { useSyncExternalStore } from 'react'
+import { getTheme, onThemeChange } from 'innoboxrr-form-core'
+
+export default function FieldLabel({ label, help, htmlFor = undefined }) {
+    const theme = useSyncExternalStore(onThemeChange, () => getTheme(), () => getTheme())
+
+    if (! label && ! help) {
+        return null
+    }
+
+    return (
+        <label htmlFor={htmlFor} className={theme.label}>
+            {help ? (
+                <span className={theme.help}>
+                    <i uk-tooltip={`title: ${help}`} className={theme.helpIcon}></i>
+                </span>
+            ) : null}
+            {label}
+        </label>
+    )
+}

package/src/internal/useControlled.js

@@ -0,0 +1,38 @@
+import { useCallback, useRef, useState } from 'react'
+
+/**
+ * `value` + `onChange(valor)` es el equivalente React de `v-model`: onChange
+ * recibe el valor, no el evento, igual que `update:modelValue` recibe el valor
+ * y no el `$event`. El generador emite las dos formas desde el mismo
+ * laraimport, así que tienen que significar lo mismo.
+ *
+ * Si no llega `value` el componente se gobierna solo. Eso permite montarlo en
+ * una prueba o en un formulario no controlado sin escribir estado alrededor, y
+ * evita el aviso de React por pasar de no controlado a controlado.
+ *
+ * @template T
+ * @param {T|undefined} value
+ * @param {((next: T) => void)|undefined} onChange
+ * @param {T} fallback
+ * @returns {[T, (next: T) => void]}
+ */
+export default function useControlled(value, onChange, fallback = '') {
+    // El modo se fija en el primer render: cambiarlo a mitad de vida es
+    // justamente lo que provoca el aviso de React.
+    const controlled = useRef(value !== undefined)
+    const [internal, setInternal] = useState(value !== undefined ? value : fallback)
+
+    const current = controlled.current ? value : internal
+
+    const set = useCallback((next) => {
+        if (! controlled.current) {
+            setInternal(next)
+        }
+
+        if (onChange) {
+            onChange(next)
+        }
+    }, [onChange])
+
+    return [current, set]
+}

package/src/internal/useThemeClass.js

@@ -0,0 +1,22 @@
+import { useSyncExternalStore } from 'react'
+import { classFor, getTheme, onThemeChange } from 'innoboxrr-form-core'
+
+/**
+ * La clase de un control según el tema, dejando que `customClass` mande.
+ *
+ * Va por `useSyncExternalStore` y no por una lectura directa porque el tema es
+ * estado de módulo: si alguien llama a `setTheme` con la aplicación ya montada
+ * —cambiar de claro a oscuro, por ejemplo—, lo leído directamente no
+ * repintaría nada.
+ *
+ * @param {string} token
+ * @param {string|null|undefined} customClass
+ * @returns {string}
+ */
+export default function useThemeClass(token, customClass) {
+    const theme = useSyncExternalStore(onThemeChange, () => getTheme(), () => getTheme())
+
+    return customClass ?? (theme[token] ?? '')
+}
+
+export { classFor }