Component: Timezone Picker

Ouverte
  • Quelque chose ne va pas ?
#91 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
55/100
Type d'issue
Fonctionnalité
Clarté
Clairement spécifiée
Activité
Active
Stack technique
react, tailwindcss, typescript
Domaine
frontend

Piste de recherche

Start with src/registry/components/locale-picker.tsx and its listbox navigation, then inspect useControllableState, test/, and the registry and documentation paths named in the issue. Build the timezone picker to meet the listed API and behavior, and add tests for grouping, search, offset formatting, and controlled versus uncontrolled use. Done means the component, exports, registry entry, tests, and documentation page are present.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

component date-time good first issue

Component: Timezone Picker

A searchable picker for IANA time zones, grouped by region, showing each zone's current UTC offset and local time.

Requirements
  • TypeScript-first with exported props interface
  • Zone list from Intl.supportedValuesOf("timeZone"); accept an optional timeZones prop to limit it
  • Grouped by region (Europe, America, Asia…), with human-readable city names (America/New_York → "New York")
  • Each option shows the current offset (UTC+02:00) and local time, computed with Intl.DateTimeFormat (timeZoneName: "shortOffset"), so it's correct across DST changes
  • Search matches city, region and offset
  • Defaults to the visitor's zone (Intl.DateTimeFormat().resolvedOptions().timeZone) when uncontrolled and no defaultValue is given
  • Follows the component conventions: value / defaultValue / onValueChange via useControllableState, forwarded ref, ...rest
  • Keyboard navigation through use-listbox-navigation, like LocalePicker
  • Labels (placeholder, "No results") passed as props
Expected API
<TimezonePicker
  defaultValue="Europe/Berlin"
  onValueChange={(zone) => saveUserTimezone(zone)}
  labels={{ placeholder: "Search time zones", empty: "No time zone found" }}
/>
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 grouping, search, offset formatting and controlled vs uncontrolled use
  • Documentation page in content/docs/components/locale-pickers/

LocalePicker (src/registry/components/locale-picker.tsx) is a good reference for the listbox and search behaviour.

See CONTRIBUTING.md and the Contributor Rulebook.

Langage dominant
TypeScript
Étoiles
39
Forks
16
Merge moyen
18 h 14 min
PR mergées (30 j)
35

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de babelize/babelize-elements

Toutes les issues de babelize/babelize-elements

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.