Component: Locale-aware Number Input

Abierto
  • ¿Algo no está bien?
#93 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
55/100
Tipo de issue
Nueva funcionalidad
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
react, typescript
Área
frontend, internationalization

Línea de trabajo

Start by reading CONTRIBUTING.md and the component conventions, then inspect src/registry/components/ and its index.ts, src/registry/registry.ts, and tests in test/. Implement and verify locale parsing and formatting for en-US, de-DE, fr-FR, and hi-IN, including caret behavior, min/max, and empty input; done means the component, exports, registry entry, tests, and documentation page are in place.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

component help wanted

Component: Locale-aware Number Input

A number input that lets people type and read numbers the way their locale writes them: 1.234,56 in German, 1,234.56 in English, 1 234,56 in French. It still gives your code a plain JavaScript number.

Requirements
  • TypeScript-first with exported props interface
  • Derives the decimal and grouping separators from Intl.NumberFormat(locale).formatToParts(), not from a hardcoded table
  • Accepts input with the locale's separators, parses it to a number (or null when empty), and reformats on blur
  • Keeps the caret in a sensible place while typing; doesn't reformat mid-typing in a way that jumps the cursor
  • Supports min, max, step and maximumFractionDigits
  • Follows the component conventions: value / defaultValue / onValueChange (number), forwarded ref, ...rest
  • inputMode="decimal" so mobile keyboards show the right keys
  • Works with React Hook Form and other form libraries (controlled and uncontrolled)
Expected API
<NumberInput
  locale="de-DE"
  defaultValue={1234.56}
  maximumFractionDigits={2}
  onValueChange={(value) => setAmount(value)} // 1234.56
/>
Deliverables
  • Component source in src/registry/components/
  • Export in src/registry/components/index.ts and entry in src/registry/registry.ts
  • Tests in test/ covering parsing and formatting for en-US, de-DE, fr-FR (narrow no-break space grouping) and hi-IN (lakh grouping), plus min/max and empty input
  • Documentation page in content/docs/components/inputs/

Related: #5 (Currency Input) could build on this once it lands.

See CONTRIBUTING.md and the Contributor Rulebook.

Lenguaje dominante
TypeScript
Estrellas
39
Forks
16
Merge medio
18 h 14 min
PR fusionados (30 d)
35

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de babelize/babelize-elements

Todos los issues de babelize/babelize-elements

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.