innoboxrr-react-form-elements 3.0.0

package/README.md

@@ -0,0 +1,125 @@
+# innoboxrr-react-form-elements
+
+Gemelo React de [`innoboxrr-form-elements`](../form-elements). Los mismos 29
+componentes, con los mismos nombres.
+
+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.
+
+## Instalación
+
+```
+npm i innoboxrr-react-form-elements
+```
+
+Los estilos van una vez por aplicación:
+
+```js
+import 'innoboxrr-react-form-elements/src/css/form-elements.css'
+import '@yaireo/tagify/dist/tagify.css'          // si usas TagsInputComponent
+import 'react-phone-number-input/style.css'      // si usas CountrySelectInputComponent
+```
+
+## Uso
+
+```jsx
+import { TextInputComponent, SelectInputComponent } from 'innoboxrr-react-form-elements'
+
+<TextInputComponent
+    type="text"
+    name="title"
+    label="Título"
+    validators="required"
+    value={form.title}
+    onChange={(value) => setField('title', value)} />
+
+<SelectInputComponent name="status" label="Estado" value={form.status} onChange={...}>
+    <option value="">Selecciona</option>
+    <option value="draft">Borrador</option>
+</SelectInputComponent>
+```
+
+## Equivalencias con la versión Vue
+
+| Vue | React |
+|---|---|
+| `v-model` | `value` + `onChange(valor)` |
+| `:custom-class` | `customClass` |
+| `min_length` / `max_length` | `minLength` / `maxLength` (se aceptan también los de guion bajo) |
+| slot por defecto de `SelectInputComponent` | `children` |
+| `v-format` | prop `maskFormat` |
+| `@change` de `CountrySelectInputComponent` | `onCountryChange({ phone, country, callingCode, national, isValid })` |
+| `@submit` / `@selected` de `ModelSearchInputComponent` | `onSubmit` / `onSelected` |
+| `install(app)` | no existe: React no tiene plugin de aplicación |
+
+`onChange` recibe el **valor**, no el evento, igual que `update:modelValue`
+recibe el valor y no el `$event`. Para el evento del DOM están `onInput`,
+`onFocus`, `onBlur`, `onEnter` y `onPaste`.
+
+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.
+
+## Las librerías de debajo
+
+Cada componente envuelve el equivalente React de la librería que envuelve su
+gemelo Vue. Donde la librería es agnóstica, es literalmente la misma:
+
+| Componente | Vue | React |
+|---|---|---|
+| `TextInputComponent` (máscara) | `innoboxrr-maskjs/vue` | `innoboxrr-maskjs` — **el mismo motor** |
+| `TagsInputComponent` | `@yaireo/tagify` | `@yaireo/tagify/react` — **la misma librería** |
+| `EditorInputComponent` | `@tinymce/tinymce-vue` | `@tinymce/tinymce-react` — el envoltorio oficial hermano |
+| `CodeMirrorComponent` | `vue-codemirror` | `@uiw/react-codemirror` — el mismo CodeMirror 6 |
+| `SelectSearchInputComponent` | `vue-select` | `react-select` |
+| `CountrySelectInputComponent` | `vue-tel-input` | `react-phone-number-input` — el mismo `libphonenumber-js` |
+| `DynamicGroupInputComponent` | `vuedraggable` | `@dnd-kit/sortable` |
+| `ColorPickerInputComponent` | `lightvue` (opcional) | `react-colorful` |
+
+Tres notas sobre esas elecciones:
+
+- **`@dnd-kit`** es el sucesor de `react-beautiful-dnd`, que está archivado. A
+  diferencia de SortableJS trae **reordenación por teclado**, así que el asa de
+  arrastre es un `<button>` alcanzable con tabulador. Un formulario que solo se
+  reordena con el ratón no es accesible.
+- **`react-phone-number-input`** valida con `libphonenumber-js`, igual que
+  `vue-tel-input`. Sabe cuántos dígitos tiene un número de cada país.
+- **`react-colorful`** pesa 2,8 kB y no tiene dependencias. La versión Vue cae
+  a `<input type="color">` cuando `lightvue` no está, que abre el diálogo del
+  sistema operativo y no se puede estilar ni probar.
+
+## Máscaras
+
+```jsx
+<TextInputComponent
+    type="text"
+    name="phone"
+    label="Teléfono"
+    maskFormat={{ mask: '(___) ___-____', format: '(***) ***-****' }}
+    value={phone}
+    onChange={setPhone} />
+```
+
+En `format`: `*` es un dígito, `a` una letra, `A` letra o dígito. Todo lo demás
+es un literal. Ver [`innoboxrr-maskjs`](../maskjs).
+
+## Diferencias deliberadas
+
+- **`MultiCheckboxInputComponent`** deriva la selección del valor. La versión
+  Vue la recalculaba con `document.querySelectorAll`, así que dos grupos con el
+  mismo `id` se pisaban.
+- **`SelectSearchInputComponent`, `ColorPickerInputComponent`,
+  `CodeMirrorComponent` y `EditorInputComponent`** publican su valor en un
+  `<input type="hidden">` con el `name` y el `data-validators`. Sus librerías
+  no exponen un input donde ponerlos, y el validador del proyecto los lee del
+  DOM.
+- **Todos aceptan `id`.** Sin eso, pasar un `id` cambiaba el del control pero
+  no el `for` de la etiqueta, y la etiqueta quedaba apuntando a la nada.
+
+## Pruebas
+
+```
+npm test
+```

package/index.js

@@ -0,0 +1,42 @@
+/**
+ * Gemelo React de innoboxrr-form-elements.
+ *
+ * Los nombres son los mismos que en la versión Vue a propósito: el generador
+ * emite el mismo `form_component` del laraimport para los dos frameworks, así
+ * que un nombre distinto rompería esa simetría.
+ *
+ * React no tiene plugin de aplicación, así que no hay `install()`: se importan
+ * los componentes uno a uno. Los estilos van aparte, una vez por aplicación:
+ *
+ *     import 'innoboxrr-react-form-elements/src/css/form-elements.css'
+ */
+
+export { default as AvatarInputComponent } from './src/AvatarInputComponent.jsx'
+export { default as ButtonComponent } from './src/ButtonComponent.jsx'
+export { default as CheckboxInputComponent } from './src/CheckboxInputComponent.jsx'
+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 CountrySelectInputComponent } from './src/CountrySelectInputComponent.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'
+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 ModelSearchInputComponent } from './src/ModelSearchInputComponent.jsx'
+export { default as MultiCheckboxInputComponent } from './src/MultiCheckboxInputComponent.jsx'
+export { default as PolymorphicInputComponent } from './src/PolymorphicInputComponent.jsx'
+export { default as RadioInputComponent } from './src/RadioInputComponent.jsx'
+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 StarsInputComponent } from './src/StarsInputComponent.jsx'
+export { default as SwitchComponent } from './src/SwitchComponent.jsx'
+export { default as TagsInputComponent } from './src/TagsInputComponent.jsx'
+export { default as TextEditorMonoStyleInputComponent } from './src/TextEditorMonoStyleInputComponent.jsx'
+export { default as TextInputComponent } from './src/TextInputComponent.jsx'
+export { default as TextareaInputComponent } from './src/TextareaInputComponent.jsx'
+export { default as TimezoneSelectInputComponent } from './src/TimezoneSelectInputComponent.jsx'

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "innoboxrr-react-form-elements",
+  "version": "3.0.0",
+  "description": "Gemelo React de innoboxrr-form-elements: los mismos componentes, los mismos nombres y el mismo contrato.",
+  "type": "module",
+  "main": "index.js",
+  "exports": {
+    ".": "./index.js",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "index.js",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/innoboxrr/react-form-elements.git"
+  },
+  "keywords": [
+    "react",
+    "react19",
+    "form",
+    "elements",
+    "innoboxrr"
+  ],
+  "author": "Homero Raul Vargas Cruz",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.12",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/theme-one-dark": "^6.1.3",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@tinymce/tinymce-react": "^6.3.0",
+    "@uiw/react-codemirror": "^4.25.11",
+    "@yaireo/tagify": "^4.38.0",
+    "innoboxrr-form-core": "^2.0.0",
+    "innoboxrr-maskjs": "^2.0.0",
+    "react-colorful": "^5.8.1",
+    "react-phone-number-input": "^3.4.18",
+    "react-select": "^5.10.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.0",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^5.0.0",
+    "jsdom": "^25.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^7.1.0",
+    "vitest": "^3.0.0"
+  }
+}

package/src/AvatarInputComponent.jsx

@@ -0,0 +1,78 @@
+import { useRef, useState } from 'react'
+
+/**
+ * Gemelo de AvatarInputComponent.vue: la miniatura redonda que al pulsarla
+ * abre el diálogo y sube la imagen. `onUpload` recibe la respuesta del
+ * servidor.
+ */
+export default function AvatarInputComponent({
+    avatarUrl,
+    uploadUrl,
+    uploadMethod = 'POST',
+    name = 'avatar',
+    onUpload,
+}) {
+    const input = useRef(null)
+    const [preview, setPreview] = useState(null)
+    const [uploading, setUploading] = useState(false)
+
+    const csrfToken = () => globalThis.csrf_token
+        ?? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+        ?? ''
+
+    const upload = async (file) => {
+        setPreview(URL.createObjectURL(file))
+        setUploading(true)
+
+        const body = new FormData()
+
+        body.append('_token', csrfToken())
+        body.append(name, file)
+
+        try {
+            const response = await fetch(uploadUrl, { method: uploadMethod, body })
+
+            if (! response.ok) {
+                throw new Error('An error has occurred')
+            }
+
+            onUpload?.(await response.json())
+        } finally {
+            setUploading(false)
+        }
+    }
+
+    return (
+        <div>
+            <img
+                className="fe-avatar-preview"
+                src={preview ?? avatarUrl}
+                alt="avatar"
+                role="button"
+                tabIndex={0}
+                style={{ cursor: 'pointer', opacity: uploading ? 0.5 : 1 }}
+                onClick={() => input.current?.click()}
+                onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        input.current?.click()
+                    }
+                }} />
+
+            <input
+                ref={input}
+                type="file"
+                name={name}
+                accept="image/*"
+                style={{ display: 'none' }}
+                onChange={(event) => {
+                    const file = event.target.files?.[0]
+
+                    if (file) {
+                        upload(file)
+                    }
+
+                    event.target.value = ''
+                }} />
+        </div>
+    )
+}

package/src/ButtonComponent.jsx

@@ -0,0 +1,44 @@
+import useThemeClass from './internal/useThemeClass.js'
+
+const TOKENS = {
+    primary: 'button',
+    secondary: 'buttonSecondary',
+    danger: 'buttonDanger',
+    link: 'buttonLink',
+}
+
+/**
+ * Gemelo de ButtonComponent.vue.
+ *
+ * `value` es el texto, como en Vue. Se acepta también `children` para el caso
+ * en que haya que meter un icono dentro.
+ *
+ * `variant` elige el token del tema. Sin él, un formulario generado tendría
+ * que escribir la clase del botón secundario a mano, que es justo lo que el
+ * tema viene a evitar.
+ */
+export default function ButtonComponent({
+    variant = 'primary',
+    customClass = undefined,
+    disabled = false,
+    value,
+    type = 'submit',
+    onClick,
+    children,
+    ...rest
+}) {
+    const className = useThemeClass(TOKENS[variant] ?? 'button', customClass)
+
+    return (
+        <div className="fe-mb">
+            <button
+                type={type}
+                className={className}
+                disabled={disabled}
+                onClick={onClick}
+                {...rest}>
+                {children ?? value}
+            </button>
+        </div>
+    )
+}

package/src/CheckboxInputComponent.jsx

@@ -0,0 +1,55 @@
+import useControlled from './internal/useControlled.js'
+import useThemeClass from './internal/useThemeClass.js'
+
+/**
+ * Gemelo de CheckboxInputComponent.vue.
+ *
+ * Como en Vue, el comportamiento depende del valor enlazado: con un array se
+ * comporta como casilla de un grupo y añade o quita `val`; con cualquier otra
+ * cosa es un booleano.
+ */
+export default function CheckboxInputComponent({
+    customClass = undefined,
+    name,
+    validators = null,
+    text = '',
+    val = null,
+    value,
+    onChange,
+    children,
+    ...rest
+}) {
+    const [current, set] = useControlled(value, onChange, '')
+    const boxClass = useThemeClass('checkbox', customClass)
+
+    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">
+                <input
+                    className={boxClass}
+                    type="checkbox"
+                    name={name}
+                    data-validators={validators ?? undefined}
+                    value={val ?? undefined}
+                    checked={checked}
+                    onChange={(event) => {
+                        if (! isGroup) {
+                            set(event.target.checked)
+
+                            return
+                        }
+
+                        set(event.target.checked
+                            ? [...current, val]
+                            : current.filter((item) => item !== val))
+                    }}
+                    {...rest} />
+                {text}
+                {children}
+            </label>
+        </div>
+    )
+}

package/src/ClickToEditComponent.jsx

@@ -0,0 +1,65 @@
+import { useEffect, useRef, useState } from 'react'
+
+/**
+ * Gemelo de ClickToEditComponent.vue: texto que se convierte en input al
+ * hacer clic. `onInput` recibe el valor confirmado.
+ */
+export default function ClickToEditComponent({ value = '', onInput, customClass = 'fe-input' }) {
+    const [editing, setEditing] = useState(false)
+    const [draft, setDraft] = useState(value)
+    const input = useRef(null)
+
+    useEffect(() => {
+        setDraft(value)
+    }, [value])
+
+    useEffect(() => {
+        if (editing) {
+            input.current?.focus()
+        }
+    }, [editing])
+
+    const confirm = () => {
+        setEditing(false)
+        onInput?.(draft)
+    }
+
+    const cancel = () => {
+        setDraft(value)
+        setEditing(false)
+    }
+
+    if (! editing) {
+        return (
+            <span
+                role="button"
+                tabIndex={0}
+                onClick={() => setEditing(true)}
+                onKeyDown={(event) => {
+                    if (event.key === 'Enter' || event.key === ' ') {
+                        setEditing(true)
+                    }
+                }}>
+                {value}
+            </span>
+        )
+    }
+
+    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()
+                }
+            }} />
+    )
+}

package/src/CodeInputComponent.jsx

@@ -0,0 +1,108 @@
+import { useRef, useState } from 'react'
+import useControlled from './internal/useControlled.js'
+
+/**
+ * Gemelo de CodeInputComponent.vue: las casillas de un código de un solo uso.
+ *
+ * `onChange` recibe el código completo, y `onComplete` se dispara cuando están
+ * todas las casillas llenas — que es cuando el formulario quiere enviarlo.
+ */
+export default function CodeInputComponent({
+    fields = 6,
+    fieldWidth = 40,
+    fieldHeight = 40,
+    title = null,
+    className = '',
+    required = false,
+    disabled = false,
+    autoFocus = false,
+    value,
+    onChange,
+    onComplete,
+}) {
+    const [code, setCode] = useControlled(value, onChange, '')
+    const inputs = useRef([])
+    const [chars, setChars] = useState(() => Array.from({ length: fields }, (_, i) => (code ?? '')[i] ?? ''))
+
+    const commit = (next) => {
+        setChars(next)
+
+        const joined = next.join('')
+
+        setCode(joined)
+
+        if (joined.length === fields && ! next.includes('')) {
+            onComplete?.(joined)
+        }
+    }
+
+    const focus = (index) => {
+        inputs.current[index]?.focus()
+        inputs.current[index]?.select?.()
+    }
+
+    return (
+        <div className={['code-input-container', className].filter(Boolean).join(' ')}>
+            {title ? <p className="title">{title}</p> : null}
+
+            <div className="code-input fe-code-input">
+                {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"
+                        type="text"
+                        inputMode="numeric"
+                        pattern="[0-9]*"
+                        maxLength={1}
+                        style={{ width: `${fieldWidth}px`, height: `${fieldHeight}px` }}
+                        autoFocus={autoFocus && index === 0}
+                        data-id={index}
+                        required={required}
+                        disabled={disabled}
+                        value={char}
+                        onFocus={(event) => event.target.select()}
+                        onChange={(event) => {
+                            // Pegar el codigo entero en la primera casilla es
+                            // lo que hace todo el mundo; se reparte.
+                            const typed = event.target.value.replace(/\D/g, '')
+
+                            if (typed.length > 1) {
+                                const next = [...chars]
+
+                                typed.split('').slice(0, fields - index).forEach((digit, offset) => {
+                                    next[index + offset] = digit
+                                })
+
+                                commit(next)
+                                focus(Math.min(index + typed.length, fields - 1))
+
+                                return
+                            }
+
+                            const next = [...chars]
+                            next[index] = typed
+                            commit(next)
+
+                            if (typed && index < fields - 1) {
+                                focus(index + 1)
+                            }
+                        }}
+                        onKeyDown={(event) => {
+                            if (event.key === 'Backspace' && ! chars[index] && index > 0) {
+                                focus(index - 1)
+                            }
+
+                            if (event.key === 'ArrowLeft' && index > 0) {
+                                focus(index - 1)
+                            }
+
+                            if (event.key === 'ArrowRight' && index < fields - 1) {
+                                focus(index + 1)
+                            }
+                        }} />
+                ))}
+            </div>
+        </div>
+    )
+}

package/src/CodeMirrorComponent.jsx

@@ -0,0 +1,62 @@
+import { useMemo } from 'react'
+import CodeMirror from '@uiw/react-codemirror'
+import { oneDark } from '@codemirror/theme-one-dark'
+import { css } from '@codemirror/lang-css'
+import { html } from '@codemirror/lang-html'
+import { javascript } from '@codemirror/lang-javascript'
+import { json } from '@codemirror/lang-json'
+
+import Field from './internal/Field.jsx'
+import useControlled from './internal/useControlled.js'
+
+const LANGUAGES = { javascript, json, html, css }
+
+/**
+ * Gemelo de CodeMirrorComponent.vue.
+ *
+ * La versión Vue usa vue-codemirror sobre CodeMirror 6; aquí va
+ * `@uiw/react-codemirror`, que es el binding equivalente y el estándar de
+ * hecho en React. Los mismos modos de lenguaje y el mismo tema `one-dark` que
+ * declara el gemelo, así que un mismo bloque de código se ve igual en los dos.
+ *
+ * Antes esto montaba CodeMirror a mano con un `useEffect` y caía a un
+ * `<textarea>` si las dependencias no estaban. Eran opcionales, y por tanto
+ * casi nunca estaban.
+ */
+export default function CodeMirrorComponent({
+    label = '',
+    help = null,
+    name,
+    language = 'javascript',
+    height = '300px',
+    readOnly = false,
+    theme = 'dark',
+    validators = null,
+    value,
+    onChange,
+    ...rest
+}) {
+    const [current, set] = useControlled(value, onChange, '')
+
+    const extensions = useMemo(() => {
+        const support = LANGUAGES[language]
+
+        return support ? [support()] : []
+    }, [language])
+
+    return (
+        <Field label={label} help={help} inline={false}>
+            <CodeMirror
+                value={current ?? ''}
+                height={height}
+                readOnly={readOnly}
+                theme={theme === 'dark' ? oneDark : 'light'}
+                extensions={extensions}
+                onChange={set}
+                {...rest} />
+
+            {/* El validador del proyecto lee data-validators del DOM. */}
+            <input type="hidden" name={name} data-validators={validators ?? undefined} value={current ?? ''} readOnly />
+        </Field>
+    )
+}