Component: Locale-aware Number Input
メンテナーはふだん 1 日以内に返信
まだ誰も着手していません。
評価
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 初心者へのやさしさ
- 55/100
- issue の種類
- 機能追加
- 明瞭さ
- 明確に書かれている
- 活発さ
- 活発
- 技術スタック
- react, typescript
調査の方向性
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.
索引モデルが issue の本文から書いたものです。
説明
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(ornullwhen 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,stepandmaximumFractionDigits - 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.tsand entry insrc/registry/registry.ts - Tests in
test/covering parsing and formatting foren-US,de-DE,fr-FR(narrow no-break space grouping) andhi-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.
- 主要言語
- TypeScript
- スター
- 39
- フォーク
- 16
- 平均マージ
- 18時間 14分
- マージ済み PR（30日）
- 35
環境構築
- Dockerfile・Docker Compose ファイルなし
- プルリクエストのテンプレートあり
- コントリビューションガイドを読む
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
babelize/babelize-elements のほかの issue
-
accessibility help wanted
難易度 4/5 3〜5日 初心者へのやさしさ 48/100
babelize/babelize-elements#94 ·
メンテナーはふだん 1 日以内に返信
-
component date-time good first issue
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
babelize/babelize-elements#92 ·
メンテナーはふだん 1 日以内に返信
-
component date-time good first issue
難易度 4/5 3〜5日 初心者へのやさしさ 55/100
babelize/babelize-elements#91 ·
メンテナーはふだん 1 日以内に返信
-
component good first issue language-switcher
難易度 4/5 3〜5日 初心者へのやさしさ 56/100
babelize/babelize-elements#90 ·
メンテナーはふだん 1 日以内に返信
-
component enhancement help wanted
難易度 5/5 1週間以上 初心者へのやさしさ 35/100
babelize/babelize-elements#47 ·
メンテナーはふだん 1 日以内に返信
babelize/babelize-elements の issue をすべて見る
似ている issue
-
ci-cd desktop size:low telemetry-improvement telemetry-round-1
難易度 2/5 1〜3時間 初心者へのやさしさ 66/100
vfarcic/dot-agent-deck#2079 ·
メンテナーはふだん 1 日以内に返信
-
難易度 2/5 1〜3時間 初心者へのやさしさ 75/100
メンテナーはふだん 1 日以内に返信
-
難易度 1/5 1時間未満 初心者へのやさしさ 83/100
メンテナーはふだん 1 日以内に返信
-
status:in-linear
難易度 2/5 1〜3時間 初心者へのやさしさ 68/100
メンテナーはふだん 1 日以内に返信
-
🔊 a11y
難易度 2/5 1〜3時間 初心者へのやさしさ 82/100
betagouv/mon-entreprise#4726 ·
メンテナーはふだん 9 日以内に返信