@consus/react-forms

Modern rebuild of the Consus React forms library. Same public API as the legacy @consus/react-forms (drop-in replacement), rebuilt on the current stack with first-class IDE autocomplete.

Thin adapter layer over @consus/react-ui: each control binds a UI primitive to Formik (Form*) or react-hook-form (HookForm*). Built with React 19 (18+ compatible), Tailwind v4, Vite (multi-entry library), Vitest, and Storybook 10.

Why this rebuild

Same autocomplete-killers as the UI library, now fixed:

| Legacy problem | Fix here | | --- | --- | | [props: string]: any on FormControlProps and every control | Each control extends FormControlProps and the wrapped primitive's props via Omit<ComponentProps<typeof X>, …> | | React.FC + any render callbacks | Plain typed components; render bodies typed with FormControlRenderProps / HookFormRenderProps | | moment (deprecated) in date-time controls | Replaced with date-fns (matches @consus/react-ui) | | @consus/js-utils runtime dep | Inlined the few helpers used | | moduleResolution: node + styled-components v5 | moduleResolution: Bundler, Tailwind v4 |

v5 — sin styled-components

v5 sigue a @consus/react-ui v5: no hay CSS-in-JS ni ThemeProvider. Los controles se construyen con utilities de Tailwind y leen los mismos design tokens (--consus-*) que la librería base, así que heredan el modo claro/oscuro y el rebrand del consumidor por cascada.

Qué cambia al actualizar desde v4:

| v4 | v5 | | --- | --- | | <ThemeProvider theme={consusTheme}> | nada — solo importar las dos hojas de estilo | | <ConsusFormGlobalStyles /> | no-op deprecado; los estilos viajan en styles.css | | styled(FormContainer) y demás | los layouts son componentes normales que aceptan className | | color="error.normal" en los botones de FormArray | intent="danger" | | peer dep styled-components | eliminada |

Install

npm install @consus/react-forms
npm install @consus/react-ui react react-dom formik react-hook-form yup

Los estilos compilados se importan una vez, después de los de la librería base:

import '@consus/react-ui/styles.css'
import '@consus/react-forms/styles.css'

No hace falta instalar ni configurar Tailwind: el CSS ya viene compilado. La hoja de este paquete sólo trae sus propias utilities (~3 KB) — la base del documento y los tokens los aporta @consus/react-ui, que es peer dependency obligatoria.

formik, react-hook-form, yup and react-router-dom are optional peers — install only the ones the controls you use need (Formik Form*, RHF HookForm*, yup for StandardValidations, router for the auth pages).

Usage

import { Formik, Form } from 'formik'
import * as Yup from 'yup'
import { FormInput, FormCheckbox, SubmitButton, StandardValidations } from '@consus/react-forms'

const schema = Yup.object({ email: StandardValidations.mail(), password: StandardValidations.password() })

export const LoginForm = () => (
  <Formik initialValues={{ email: '', password: '', remember: false }} validationSchema={schema} onSubmit={() => {}}>
    <Form>
      <FormInput name="email" label="Email" />
      <FormInput name="password" label="Contraseña" type="password" />
      <FormCheckbox name="remember" label="Recordarme" />
      <SubmitButton>Ingresar</SubmitButton>
    </Form>
  </Formik>
)

No hay nada que montar: alcanza con los dos imports de CSS de arriba.

Scripts

npm run storybook     # component catalog at :6006
npm test              # Vitest
npm run typecheck     # tsc --noEmit
npm run build         # type-check + Vite multi-entry build (dist/)

Status

Full library migrated: both control families (Formik Form* + react-hook-form HookForm*), the dynamic array components, auth flows, validation helpers, field handlers and hooks — ~90 component/story files, 6 tests, tsc --noEmit clean, tree-shakeable ESM + CJS + per-file .d.ts.

Local development note

@consus/react-ui se consume desde el registry de npm (^5.0.0), no desde un symlink: un file:../consus-ui symlinkeado arrastra el @types/react de dev de ese paquete y produce errores TS2742 ("cannot be named without a reference") en las declaraciones generadas. Si hace falta probar un cambio local de la librería base, empaquetarla (npm pack) e instalar el tarball.

Storybook y los tests también necesitan los peers opcionales de @consus/react-ui (react-toastify, react-tooltip, react-router-dom) instalados para poder evaluar su barrel.