uifolio 0.5.1 → 0.5.4

package/src/components/ui/table.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import { cn } from '@/lib/utils'
+import { useControllableValue } from '@/lib/use-controllable'
+
+export interface TableColumn<T> {
+  /** Stable identifier, also used as the React key of the column. */
+  key: string
+  header: ReactNode
+  cell: (row: T) => ReactNode
+  /** Applied to the header and body cells: width, nowrap… */
+  className?: string
+  align?: 'left' | 'center' | 'right'
+}
+
+export interface TableProps<T> {
+  columns: ReadonlyArray<TableColumn<T>>
+  rows: ReadonlyArray<T>
+  rowKey: (row: T) => string | number
+  selectable?: boolean
+  selectedKeys?: string[]
+  defaultSelectedKeys?: string[]
+  onSelectionChange?: (keys: string[]) => void
+  actions?: (row: T) => ReactNode
+  actionsHeader?: ReactNode
+  onRowClick?: (row: T) => void
+  emptyText?: string
+  className?: string
+}
+
+function alignClass(align: TableColumn<unknown>['align']): string {
+  if (align === 'center') return 'text-center'
+  if (align === 'right') return 'text-right'
+  return 'text-left'
+}
+
+/**
+ * Data table with a shadcn-like API: typed columns, optional selection and a
+ * dedicated actions column. Every cell on the left shares the same `px-4`
+ * padding; the actions column keeps a wider `pl-10` gap with the last column.
+ */
+export function Table<T>({
+  columns,
+  rows,
+  rowKey,
+  selectable = false,
+  selectedKeys,
+  defaultSelectedKeys = [],
+  onSelectionChange,
+  actions,
+  actionsHeader = 'Actions',
+  onRowClick,
+  emptyText = 'No data.',
+  className,
+}: Readonly<TableProps<T>>) {
+  const [selection, setSelection] = useControllableValue<string[]>(
+    selectedKeys,
+    defaultSelectedKeys,
+    onSelectionChange,
+  )
+
+  const toggle = (key: string, checked: boolean) => {
+    setSelection((current) =>
+      checked
+        ? current.includes(key)
+          ? current
+          : [...current, key]
+        : current.filter((entry) => entry !== key),
+    )
+  }
+
+  const columnsCount = columns.length + (actions ? 1 : 0)
+
+  return (
+    <div className={cn('w-full overflow-x-auto rounded-sm border bg-card', className)}>
+      <table className="w-full min-w-[860px] border-collapse text-left text-xs">
+        <thead>
+          <tr className="border-b bg-muted/50">
+            {columns.map((column) => (
+              <th
+                key={column.key}
+                scope="col"
+                className={cn(
+                  'whitespace-nowrap px-4 py-3.5 text-[11px] font-medium text-muted-foreground',
+                  alignClass(column.align),
+                  column.className,
+                )}
+              >
+                {column.header}
+              </th>
+            ))}
+            {actions && (
+              <th
+                scope="col"
+                className="whitespace-nowrap py-3.5 pl-10 pr-4 text-right text-[11px] font-medium text-muted-foreground"
+              >
+                {actionsHeader}
+              </th>
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.length === 0 ? (
+            <tr>
+              <td colSpan={columnsCount} className="px-4 py-10 text-center text-muted-foreground">
+                {emptyText}
+              </td>
+            </tr>
+          ) : (
+            rows.map((row) => {
+              const key = String(rowKey(row))
+              const selected = selection.includes(key)
+
+              return (
+                <tr
+                  key={key}
+                  onClick={onRowClick ? () => onRowClick(row) : undefined}
+                  className={cn(
+                    'border-b transition last:border-b-0',
+                    onRowClick && 'cursor-pointer',
+                    selected ? 'bg-primary/5' : 'hover:bg-muted/30',
+                  )}
+                >
+                  {columns.map((column, index) => (
+                    <td
+                      key={column.key}
+                      className={cn(
+                        'px-4 py-3.5 align-middle',
+                        alignClass(column.align),
+                        column.className,
+                      )}
+                    >
+                      {selectable && index === 0 ? (
+                        <div className="flex items-center gap-3">
+                          <input
+                            type="checkbox"
+                            checked={selected}
+                            onChange={(event) => toggle(key, event.target.checked)}
+                            onClick={(event) => event.stopPropagation()}
+                            aria-label={`Select row ${key}`}
+                            className="size-4 shrink-0 cursor-pointer rounded-sm border-border accent-primary"
+                          />
+                          {column.cell(row)}
+                        </div>
+                      ) : (
+                        column.cell(row)
+                      )}
+                    </td>
+                  ))}
+                  {actions && (
+                    <td className="whitespace-nowrap py-3.5 pl-10 pr-4">
+                      <div className="flex items-center justify-end gap-1.5">{actions(row)}</div>
+                    </td>
+                  )}
+                </tr>
+              )
+            })
+          )}
+        </tbody>
+      </table>
+    </div>
+  )
+}

package/src/components/ui/video-player.tsx

@@ -90,7 +90,7 @@ export interface VideoPlayerHandle {
 }
 
 export interface VideoPlayerProps {
-  /** Une source, un fichier local, une liste de qualités, un flux HLS ou une URL YouTube/Vimeo. */
+  /** A source, a local file, a list of qualities, an HLS stream or a YouTube/Vimeo URL. */
   sources: PlayerSource | PlayerSource[]
   poster?: string
   title?: string
@@ -101,10 +101,10 @@ export interface VideoPlayerProps {
   rounded?: VideoRounded
   frame?: VideoFrame
   controls?: VideoControlsMode | boolean
-  /** Position de la barre de contrôles dans le cadre. */
+  /** Position of the control bar inside the frame. */
   controlsPosition?: 'bottom' | 'top'
   accent?: string
-  /** Police appliquée à la barre de contrôles et aux menus. */
+  /** Font applied to the control bar and the menus. */
   fontFamily?: string
   /** Bordure du cadre (px) et couleur CSS. */
   borderWidth?: number
@@ -161,17 +161,17 @@ const iconButton =
 const menuPosition = (position: 'bottom' | 'top') =>
   position === 'top' ? 'top-full mt-1.5' : 'bottom-full mb-1.5'
 
-/** Les barres suivent l'arrondi global (`--radius`) du thème, comme le reste du catalogue. */
+/** The bars follow the global theme radius (`--radius`), like the rest of the catalog. */
 const barRadius = 'rounded-sm'
 
 const rangeThumb =
   '[&::-webkit-slider-thumb]:size-2.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-sm [&::-webkit-slider-thumb]:border-0 [&::-webkit-slider-thumb]:bg-[var(--vp-accent)] [&::-moz-range-thumb]:size-2.5 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-sm [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:bg-[var(--vp-accent)]'
 
-/** Transforme les sources (URL, File, Blob, qualités) en sources lisibles et gère les object URLs. */
+/** Turns the sources (URL, File, Blob, qualities) into playable sources and manages object URLs. */
 interface SourceResolver {
   sources: ResolvedSource[]
   signature: string
-  /** Révoque les object URLs créées pour cette résolution. */
+  /** Revokes the object URLs created for this resolution. */
   dispose: () => void
 }
 
@@ -209,7 +209,7 @@ function resolveSources(input: PlayerSource | PlayerSource[]): SourceResolver {
   }
 }
 
-/** Piste active par défaut : celle marquée `default`, sinon la première avec des cues. */
+/** Default active track: the one marked `default`, otherwise the first one with cues. */
 function preferDefaultActiveSubtitle(
   loaded: ResolvedSubtitleTrack[],
   list: SubtitleTrack[],
@@ -227,14 +227,14 @@ function useResolvedSources(input: PlayerSource | PlayerSource[]) {
     resolver: resolveSources(input),
   }))
 
-  // Ajustement au rendu quand la source change réellement (pas d'effet).
+  // Render-time adjustment when the source really changes (no effect).
   if (entry.signature !== signature) {
     setEntry({ signature, resolver: resolveSources(input) })
   }
 
   const resolver = entry.resolver
-  // Libère les object URLs du résolveur remplacé (celui du montage n'est pas
-  // libéré au démontage : StrictMode simulerait un unmount/remount).
+  // Releases the object URLs of the replaced resolver (the one from mount is not
+  // released on unmount: StrictMode would simulate an unmount/remount).
   const previousResolver = useRef(resolver)
   useEffect(() => {
     if (previousResolver.current !== resolver) {
@@ -317,8 +317,8 @@ export function VideoPlayer({
   const [retryKey, setRetryKey] = useState(0)
   const [prevSignature, setPrevSignature] = useState(signature)
 
-  // Ajustement au rendu : la source change ⇒ on repart d'un état propre,
-  // sans effet ni render supplémentaire.
+  // Render-time adjustment: the source changed ⇒ we start from a clean state,
+  // with no effect and no extra render.
   if (prevSignature !== signature) {
     setPrevSignature(signature)
     setIndex(0)
@@ -338,8 +338,8 @@ export function VideoPlayer({
     [subtitles],
   )
 
-  // Les pistes déjà chargées ne correspondent plus à la signature courante :
-  // on les écarte pendant le rechargement plutôt que par un effet de reset.
+  // Tracks already loaded no longer match the current signature:
+  // we drop them during the reload instead of using a reset effect.
   const [loadedSubtitles, setLoadedSubtitles] = useState<{
     sig: string
     tracks: ResolvedSubtitleTrack[]
@@ -367,7 +367,7 @@ export function VideoPlayer({
   const shouldLoad = inView || !lazy || !observerSupported
   const playbackActive = isEmbed ? embedPlaying : playing
   // L'iframe ne transmet pas les mouvements du pointeur : pour un embed, la barre
-  // reste affichée, sinon elle ne pourrait plus jamais être rappelée.
+  // stays visible, otherwise it could never be called again.
   const showControls =
     isEmbed || !controlsHidden || !playbackActive || openMenu !== null
 
@@ -407,7 +407,7 @@ export function VideoPlayer({
     iframeRef.current?.contentWindow?.postMessage(message, '*')
   }, [])
 
-  /** Envoie une commande à l'iframe : la barre maison pilote le lecteur de la plateforme. */
+  /** Sends a command to the iframe: the custom bar drives the platform player. */
   const postEmbedCommand = useCallback(
     (command: EmbedCommand) => {
       if (!embedKind) return
@@ -416,7 +416,7 @@ export function VideoPlayer({
     [embedKind, postEmbed],
   )
 
-  /** Abonne le lecteur aux événements de l'iframe (temps, durée, état, volume). */
+  /** Subscribes the player to the iframe events (time, duration, state, volume). */
   const sendEmbedHandshake = useCallback(() => {
     if (!embedKind) return
     for (const message of embedHandshake(embedKind)) postEmbed(message)
@@ -426,7 +426,7 @@ export function VideoPlayer({
     postEmbedCommand({ type: 'rate', rate })
   }, [embedKind, postEmbed, postEmbedCommand, muted, volume, rate])
 
-  /** Monte l'iframe (façade → lecteur) : la lecture démarre avec le geste de l'utilisateur. */
+  /** Mounts the iframe (facade → player): playback starts with the user gesture. */
   const startEmbed = useCallback(() => {
     if (!embedId || !embedKind) return
     const effectiveMuted = muted ?? mutedProp
@@ -445,7 +445,7 @@ export function VideoPlayer({
   }, [embedId, embedKind, loop, muted, mutedProp, startAt])
 
   const toggleEmbedPlay = useCallback(() => {
-    // L'iframe n'est pas encore montée : on la lance au lieu d'envoyer une commande dans le vide.
+    // The iframe is not mounted yet: start it instead of sending a command into the void.
     if (!embedActive) {
       startEmbed()
       return
@@ -535,7 +535,7 @@ export function VideoPlayer({
       void document.exitFullscreen()
     } else if (element.requestFullscreen) {
       void element.requestFullscreen().catch(() => {
-        /* iOS Safari : plein écran natif indisponible sur un div */
+        /* iOS Safari: native fullscreen unavailable on a div */
       })
     }
   }, [])
@@ -550,7 +550,7 @@ export function VideoPlayer({
         await video.requestPictureInPicture()
       }
     } catch {
-      /* refusé par le navigateur */
+      /* refused by the browser */
     }
   }, [])
 
@@ -614,11 +614,11 @@ export function VideoPlayer({
   )
 
   /* ------------------------------------------------------------------ */
-  /* Synchronisation des props / de l'état                               */
+  /* Prop / state synchronization                                        */
   /* ------------------------------------------------------------------ */
 
-  // La réinitialisation d'état se fait au rendu (voir ci-dessus) ; on ne garde
-  // ici que les refs, qui ne doivent pas être écrites pendant le rendu.
+  // State resets happen during render (see above); only the refs are kept
+  // here, and they must not be written during render.
   useEffect(() => {
     startApplied.current = null
   }, [signature])
@@ -674,8 +674,8 @@ export function VideoPlayer({
     postEmbedCommand({ type: 'volume', volume })
   }, [embedActive, isEmbed, postEmbedCommand, volume])
 
-  // Branche l'iframe sur nos contrôles : on rejoue le handshake tant que le
-  // lecteur de la plateforme n'est pas prêt (il ignore les messages avant).
+  // Wires the iframe to our controls: the handshake is replayed while the
+  // platform player is not ready (it ignores messages before that).
   useEffect(() => {
     if (!isEmbed || !embedActive) return
     sendEmbedHandshake()
@@ -687,7 +687,7 @@ export function VideoPlayer({
     }
   }, [embedActive, isEmbed, sendEmbedHandshake])
 
-  // Le temps, la durée et l'état de lecture viennent de l'iframe.
+  // Time, duration and playback state come from the iframe.
   useEffect(() => {
     if (!isEmbed || !embedActive) return
     const onMessage = (event: MessageEvent) => {
@@ -732,7 +732,7 @@ export function VideoPlayer({
       (entries) => {
         const entry = entries[0]
         setInView(entry.isIntersecting)
-        // Optimisation : on coupe la lecture hors écran.
+        // Optimization: playback is paused off-screen.
         if (!entry.isIntersecting) {
           videoRef.current?.pause()
           if (isEmbed) {
@@ -774,16 +774,16 @@ export function VideoPlayer({
     }, 2600)
   }, [])
 
-  // À la reprise de lecture, les contrôles repartent visibles : ajustement au
-  // rendu plutôt qu'un setState synchrone dans l'effet.
+  // When playback resumes, the controls are visible again: a render-time
+  // adjustment rather than a synchronous setState in the effect.
   const [prevPlaybackActive, setPrevPlaybackActive] = useState(playbackActive)
   if (prevPlaybackActive !== playbackActive) {
     setPrevPlaybackActive(playbackActive)
     if (playbackActive) setControlsHidden(false)
   }
 
-  // L'effet ne fait qu'armer le minuteur (système externe) ; le reveal est
-  // géré par les événements pointeur ou par l'ajustement au rendu ci-dessus.
+  // The effect only arms the timer (external system); the reveal is
+  // handled by pointer events or by the render adjustment above.
   useEffect(() => {
     if (!playbackActive) {
       if (hideTimer.current) {
@@ -841,12 +841,12 @@ export function VideoPlayer({
             if (autoPlay) void attemptPlay()
           })
           instance.on(HlsConstructor.Events.ERROR, (_event, data) => {
-            if (data.fatal) setError("Le flux HLS n'a pas pu être chargé.")
+            if (data.fatal) setError('The HLS stream could not be loaded.')
           })
           holder.current = instance
         })
         .catch(() => {
-          setError("La librairie hls.js n'a pas pu être chargée.")
+          setError('The hls.js library could not be loaded.')
         })
     }
 
@@ -859,7 +859,7 @@ export function VideoPlayer({
   }, [active, attemptPlay, autoPlay, kind, retryKey, shouldLoad])
 
   /* ------------------------------------------------------------------ */
-  /* Evenements média                                                    */
+  /* Media events                                                        */
   /* ------------------------------------------------------------------ */
 
   const handleLoadedMetadata = () => {
@@ -935,7 +935,7 @@ export function VideoPlayer({
     const message =
       typeof MediaError !== 'undefined' && code === MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED
         ? "Format ou source non pris en charge."
-        : "La vidéo n'a pas pu être chargée."
+        : 'The video could not be loaded.'
     setError(message)
     setLoading(false)
     onError?.(message)
@@ -1010,7 +1010,7 @@ export function VideoPlayer({
       : undefined)
 
   const canPip = typeof document !== 'undefined' && document.pictureInPictureEnabled
-  const qualityLabel = active?.quality ?? 'Qualité'
+  const qualityLabel = active?.quality ?? 'Quality'
   const activeCues = activeSubtitle >= 0 ? subtitleTracks[activeSubtitle]?.cues : undefined
   const currentCue = activeCues?.find(
     (cue) => currentTime >= cue.start && currentTime <= cue.end,
@@ -1020,7 +1020,7 @@ export function VideoPlayer({
     <div
       ref={containerRef}
       role="region"
-      aria-label={title ?? 'Lecteur vidéo'}
+      aria-label={title ?? 'Video player'}
       tabIndex={0}
       onKeyDown={handleKeyDown}
       onPointerMove={handlePointerActivity}
@@ -1052,7 +1052,7 @@ export function VideoPlayer({
             ref={iframeRef}
             key={`${kind}-${embedId}`}
             src={embedSrc ?? undefined}
-            title={title ?? 'Lecteur vidéo'}
+            title={title ?? 'Video player'}
             className="absolute inset-0 z-0 h-full w-full border-0"
             allow="autoplay; fullscreen; picture-in-picture; encrypted-media; clipboard-write"
             referrerPolicy="strict-origin-when-cross-origin"
@@ -1063,7 +1063,7 @@ export function VideoPlayer({
           <button
             type="button"
             onClick={startEmbed}
-            aria-label={title ? `Lire ${title}` : 'Lire la vidéo'}
+            aria-label={title ? `Play ${title}` : 'Play the video'}
             className="absolute inset-0 z-0 h-full w-full cursor-pointer"
           >
             {thumbnail && shouldLoad ? (
@@ -1153,7 +1153,7 @@ export function VideoPlayer({
         <button
           type="button"
           onClick={() => void attemptPlay()}
-          aria-label={needsGesture ? 'Lancer la lecture' : 'Lire la vidéo'}
+          aria-label={needsGesture ? 'Start playback' : 'Play the video'}
           className="absolute inset-0 z-10 grid place-items-center bg-black/25 transition-colors duration-200 hover:bg-black/10"
         >
           <span className="grid size-16 place-items-center rounded-full bg-white/15 text-white ring-1 ring-white/30 backdrop-blur-md transition-transform duration-200 hover:scale-105">
@@ -1166,7 +1166,7 @@ export function VideoPlayer({
         <button
           type="button"
           onClick={toggleEmbedPlay}
-          aria-label="Lire la vidéo"
+          aria-label="Play the video"
           className="absolute inset-0 z-10 grid place-items-center bg-black/25 transition-colors duration-200 hover:bg-black/10"
         >
           <span className="grid size-16 place-items-center rounded-full bg-white/15 text-white ring-1 ring-white/30 backdrop-blur-md transition-transform duration-200 hover:scale-105">
@@ -1297,7 +1297,7 @@ export function VideoPlayer({
                       onClick={() =>
                         setOpenMenu((menu) => (menu === 'subtitles' ? null : 'subtitles'))
                       }
-                      aria-label="Sous-titres"
+                      aria-label="Subtitles"
                       aria-expanded={openMenu === 'subtitles'}
                       className={cn(iconButton, activeSubtitle >= 0 && 'text-[var(--vp-accent)]')}
                     >
@@ -1318,7 +1318,7 @@ export function VideoPlayer({
                               : 'text-white/80 hover:bg-white/10',
                           )}
                         >
-                          Désactivés
+                          Off
                           {activeSubtitle === -1 && <Check className="size-3.5" />}
                         </button>
                         {subtitleTracks.map((track, trackIndex) => (
@@ -1350,7 +1350,7 @@ export function VideoPlayer({
                     <button
                       type="button"
                       onClick={() => setOpenMenu((menu) => (menu === 'speed' ? null : 'speed'))}
-                      aria-label="Vitesse de lecture"
+                      aria-label="Playback speed"
                       aria-expanded={openMenu === 'speed'}
                       className="h-9 min-w-11 rounded-full px-2 text-[11px] font-semibold tabular-nums text-white/85 transition hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--vp-accent)]"
                     >
@@ -1386,7 +1386,7 @@ export function VideoPlayer({
                       onClick={() =>
                         setOpenMenu((menu) => (menu === 'quality' ? null : 'quality'))
                       }
-                      aria-label="Choisir la qualité"
+                      aria-label="Choose the quality"
                       aria-expanded={openMenu === 'quality'}
                       className="flex h-9 items-center gap-1 rounded-full px-2 text-[11px] font-semibold text-white/85 transition hover:bg-white/15 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--vp-accent)]"
                     >
@@ -1420,7 +1420,7 @@ export function VideoPlayer({
                   <button
                     type="button"
                     onClick={() => void togglePip()}
-                    aria-label="Image dans l'image"
+                    aria-label="Picture in picture"
                     className={cn(iconButton, 'hidden sm:inline-flex')}
                   >
                     <PictureInPicture2 className="size-4" />
@@ -1430,7 +1430,7 @@ export function VideoPlayer({
                 <button
                   type="button"
                   onClick={toggleFullscreen}
-                  aria-label={fullscreen ? 'Quitter le plein écran' : 'Plein écran'}
+                  aria-label={fullscreen ? 'Exit fullscreen' : 'Fullscreen'}
                   className={iconButton}
                 >
                   {fullscreen ? (
@@ -1461,7 +1461,7 @@ export function VideoPlayer({
             className="inline-flex items-center gap-2 rounded-full bg-white px-3.5 py-1.5 text-xs font-medium text-black transition hover:bg-white/85"
           >
             <RotateCcw className="size-3.5" />
-            Réessayer
+            Retry
           </button>
         </div>
       )}

package/src/lib/date.ts

@@ -4,29 +4,29 @@ export interface DateRange {
 }
 
 export const MONTHS = [
-  'janvier',
-  'février',
-  'mars',
-  'avril',
-  'mai',
-  'juin',
-  'juillet',
-  'août',
-  'septembre',
-  'octobre',
-  'novembre',
-  'décembre',
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
 ]
 
-export const WEEKDAYS_SHORT = ['L', 'M', 'M', 'J', 'V', 'S', 'D']
+export const WEEKDAYS_SHORT = ['M', 'T', 'W', 'T', 'F', 'S', 'S']
 export const WEEKDAYS_LONG = [
-  'lundi',
-  'mardi',
-  'mercredi',
-  'jeudi',
-  'vendredi',
-  'samedi',
-  'dimanche',
+  'Monday',
+  'Tuesday',
+  'Wednesday',
+  'Thursday',
+  'Friday',
+  'Saturday',
+  'Sunday',
 ]
 
 export function startOfDay(date: Date): Date {
@@ -60,7 +60,7 @@ export function daysInMonth(year: number, month: number): number {
   return new Date(year, month + 1, 0).getDate()
 }
 
-/** Calendrier de 6 semaines, lundi en premier. */
+/** 6-week calendar grid, Monday first. */
 export function getMonthMatrix(year: number, month: number): Date[] {
   const first = new Date(year, month, 1)
   const offset = (first.getDay() + 6) % 7
@@ -74,13 +74,13 @@ export function formatMonthYear(date: Date): string {
 
 export function formatLongDate(date: Date): string {
   const weekday = WEEKDAYS_LONG[(date.getDay() + 6) % 7]
-  return `${weekday} ${date.getDate()} ${MONTHS[date.getMonth()]} ${date.getFullYear()}`
+  return `${weekday}, ${MONTHS[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`
 }
 
 export function formatShortDate(date: Date): string {
   return [
-    String(date.getDate()).padStart(2, '0'),
     String(date.getMonth() + 1).padStart(2, '0'),
+    String(date.getDate()).padStart(2, '0'),
     date.getFullYear(),
   ].join('/')
 }
@@ -95,10 +95,10 @@ export function parseDateInput(text: string): Date | null {
     return Number.isNaN(date.getTime()) ? null : date
   }
 
-  const french = /^(\d{1,2})[/.-](\d{1,2})[/.-](\d{2,4})$/.exec(value)
-  if (french) {
-    const year = Number(french[3]) < 100 ? 2000 + Number(french[3]) : Number(french[3])
-    const date = new Date(year, Number(french[2]) - 1, Number(french[1]))
+  const monthFirst = /^(\d{1,2})[/.-](\d{1,2})[/.-](\d{2,4})$/.exec(value)
+  if (monthFirst) {
+    const year = Number(monthFirst[3]) < 100 ? 2000 + Number(monthFirst[3]) : Number(monthFirst[3])
+    const date = new Date(year, Number(monthFirst[1]) - 1, Number(monthFirst[2]))
     return Number.isNaN(date.getTime()) ? null : date
   }
 
@@ -120,7 +120,7 @@ export function clampDate(date: Date, min?: Date, max?: Date): Date {
 }
 
 export function formatBytes(bytes: number): string {
-  if (bytes < 1024) return `${bytes} o`
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} Ko`
-  return `${(bytes / (1024 * 1024)).toFixed(1)} Mo`
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
 }