uifolio 0.4.0 → 0.5.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "uifolio",
-  "version": "0.4.0",
-  "description": "CLI qui copie des composants React (calendrier, lecteurs vidéo/audio, OTP, éditeur, upload) et leurs helpers dans ton projet, avec des tokens Tailwind CSS 4.",
+  "version": "0.5.3",
+  "description": "CLI that copies React components (calendar, video/audio players, OTP, editor, upload) and their helpers into your project, with Tailwind CSS 4 tokens.",
   "type": "module",
   "license": "MIT",
   "author": "Barronakn <jeanbarronalokpon@gmail.com>",
@@ -53,6 +53,7 @@
   "files": [
     "cli",
     "src/components/ui",
+    "!src/components/ui/stories-tokens.ts",
     "src/lib/color.ts",
     "src/lib/date.ts",
     "src/lib/uploader.ts",

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

@@ -30,7 +30,7 @@ export function AudioPlayer({
   variant = 'card',
   loop = false,
   className,
-}: AudioPlayerProps) {
+}: Readonly<AudioPlayerProps>) {
   const audioRef = useRef<HTMLAudioElement>(null)
   const [playing, setPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)

package/src/components/ui/calendar.tsx

@@ -54,7 +54,7 @@ export function Calendar({
   disabled,
   manualInput = true,
   className,
-}: CalendarProps) {
+}: Readonly<CalendarProps>) {
   const [internalValue, setInternalValue] = useState<CalendarValue>(defaultValue ?? null)
   const currentValue = value !== undefined ? value : internalValue
 
@@ -199,7 +199,7 @@ export function Calendar({
             <>
               <label className="flex items-center gap-2 rounded-xl border bg-background/40 px-2.5 py-1.5 focus-within:ring-2 focus-within:ring-primary/40">
                 <CalendarDays className="size-3.5 shrink-0 text-muted-foreground" />
-                <span className="sr-only">Début (jj/mm/aaaa)</span>
+                <span className="sr-only">Start (MM/DD/YYYY)</span>
                 <input
                   value={fromDraft}
                   onChange={(event) => setFromDraft(event.target.value)}
@@ -210,14 +210,14 @@ export function Calendar({
                       applyRange(fromDraft, toDraft)
                     }
                   }}
-                  placeholder="du jj/mm/aaaa"
+                  placeholder="from MM/DD/YYYY"
                   inputMode="numeric"
                   className="w-full bg-transparent text-xs tabular-nums outline-none placeholder:text-muted-foreground/60"
                 />
               </label>
               <label className="flex items-center gap-2 rounded-xl border bg-background/40 px-2.5 py-1.5 focus-within:ring-2 focus-within:ring-primary/40">
                 <CalendarDays className="size-3.5 shrink-0 text-muted-foreground" />
-                <span className="sr-only">Fin (jj/mm/aaaa)</span>
+                <span className="sr-only">End (MM/DD/YYYY)</span>
                 <input
                   value={toDraft}
                   onChange={(event) => setToDraft(event.target.value)}
@@ -228,7 +228,7 @@ export function Calendar({
                       applyRange(fromDraft, toDraft)
                     }
                   }}
-                  placeholder="au jj/mm/aaaa"
+                  placeholder="to MM/DD/YYYY"
                   inputMode="numeric"
                   className="w-full bg-transparent text-xs tabular-nums outline-none placeholder:text-muted-foreground/60"
                 />
@@ -242,7 +242,7 @@ export function Calendar({
         <button
           type="button"
           onClick={() => setVisibleMonth((month) => addMonths(month, -1))}
-          aria-label="Mois précédent"
+          aria-label="Previous month"
           className="inline-flex size-7 items-center justify-center rounded-lg text-muted-foreground transition hover:bg-muted hover:text-foreground"
         >
           <ChevronLeft className="size-4" />

package/src/components/ui/choice.tsx

@@ -30,7 +30,7 @@ export function Choice({
   name,
   value,
   className,
-}: ChoiceProps) {
+}: Readonly<ChoiceProps>) {
   const id = useId()
   const padding = Math.max(2, Math.round(size * 0.1))
   const thumb = Math.max(6, size - padding * 2)

package/src/components/ui/color-picker.tsx

@@ -43,12 +43,12 @@ function ChannelField({
   value,
   disabled,
   onChange,
-}: {
+}: Readonly<{
   label: string
   value: number
   disabled: boolean
   onChange: (value: number) => void
-}) {
+}>) {
   const [draft, setDraft] = useState<string | null>(null)
 
   return (
@@ -123,7 +123,7 @@ export function ColorPicker({
   open,
   defaultOpen = false,
   onOpenChange,
-}: ColorPickerProps) {
+}: Readonly<ColorPickerProps>) {
   const generatedId = useId()
   const inputId = id ?? generatedId
   const panelId = `${inputId}-panel`
@@ -296,7 +296,7 @@ export function ColorPicker({
           type="button"
           onClick={toggle}
           disabled={disabled}
-          aria-label="Ouvrir le sélecteur de couleur"
+          aria-label="Open the color picker"
           aria-haspopup="dialog"
           aria-expanded={isOpen}
           aria-controls={panelId}
@@ -336,7 +336,7 @@ export function ColorPicker({
             }}
             spellCheck={false}
             aria-invalid={invalid}
-            aria-label="Valeur de la couleur"
+            aria-label="Color value"
             placeholder={displayFormat === 'hex' ? '#10B981' : displayFormat === 'rgb' ? 'rgb(16, 185, 129)' : 'hsl(160, 84%, 39%)'}
             className={cn(
               'h-8 w-full rounded-sm border bg-background pl-10 pr-2 font-mono text-[10.5px] text-foreground outline-none transition placeholder:normal-case placeholder:text-muted-foreground/70 focus:border-primary/60 focus:ring-2 focus:ring-primary/15 disabled:cursor-not-allowed',
@@ -349,8 +349,8 @@ export function ColorPicker({
           type="button"
           onClick={toggle}
           disabled={disabled}
-          aria-label="Personnaliser la couleur"
-          title="Personnaliser la couleur"
+          aria-label="Customize the color"
+          title="Customize the color"
           className={cn(
             'grid size-8 shrink-0 place-items-center rounded-sm border transition outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed',
             isOpen
@@ -372,7 +372,7 @@ export function ColorPicker({
             ref={panelRef}
             id={panelId}
             role="dialog"
-            aria-label="Sélecteur de couleur"
+            aria-label="Color picker"
             tabIndex={-1}
             style={{
               position: 'fixed',
@@ -386,7 +386,7 @@ export function ColorPicker({
           >
             <div className="flex items-start justify-between gap-3 border-b px-3.5 py-3">
               <div className="min-w-0">
-                <p className="text-[11px] font-semibold">Sélecteur de couleur</p>
+                <p className="text-[11px] font-semibold">Color picker</p>
                 <p className="mt-0.5 truncate font-mono text-[9.5px] uppercase tracking-wide text-muted-foreground">
                   {formatColor(current, 'hex', showAlpha)}
                 </p>
@@ -394,7 +394,7 @@ export function ColorPicker({
               <button
                 type="button"
                 onClick={close}
-                aria-label="Fermer le sélecteur de couleur"
+                aria-label="Close the color picker"
                 className="grid size-6 shrink-0 place-items-center rounded-sm text-muted-foreground transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring"
               >
                 <X className="size-3.5" />
@@ -404,7 +404,7 @@ export function ColorPicker({
             <div className="space-y-3 p-3.5">
               <div
                 role="group"
-                aria-label="Saturation et luminosité"
+                aria-label="Saturation and luminance"
                 tabIndex={disabled ? -1 : 0}
                 onPointerDown={(event) => {
                   if (disabled) return
@@ -530,8 +530,8 @@ export function ColorPicker({
                     type="button"
                     disabled={disabled}
                     onClick={pickFromScreen}
-                    title="Prélever une couleur à l’écran"
-                    aria-label="Prélever une couleur à l’écran"
+                    title="Pick a color from the screen"
+                    aria-label="Pick a color from the screen"
                     className="inline-flex items-center gap-1.5 rounded-sm border border-border px-2 py-1 text-[9px] font-semibold uppercase tracking-[0.1em] text-muted-foreground transition hover:border-primary/50 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
                   >
                     <Pipette className="size-3" />
@@ -614,7 +614,7 @@ export function ColorPicker({
 
               {checkerAlpha && (
                 <p className="text-[9px] leading-relaxed text-muted-foreground">
-                  La transparence est incluse dans la valeur exportée.
+                  The opacity is included in the exported value.
                 </p>
               )}
             </div>

package/src/components/ui/command-menu.tsx

@@ -34,10 +34,10 @@ export function CommandMenu({
   defaultOpen = false,
   onOpenChange,
   placeholder = 'Rechercher une commande…',
-  emptyText = 'Aucun résultat.',
+  emptyText = 'No result.',
   emptyState,
   className,
-}: CommandMenuProps) {
+}: Readonly<CommandMenuProps>) {
   const [internalOpen, setInternalOpen] = useState(defaultOpen)
   const isOpen = open ?? internalOpen
   const [query, setQuery] = useState('')

package/src/components/ui/file-upload.tsx

@@ -14,7 +14,7 @@ export interface UploadItem {
   progress: number
   status: UploadStatus
   error?: string
-  /** URL publique renvoyée par l'uploader (upload réel). */
+  /** Public URL returned by the uploader (real upload). */
   url?: string
 }
 
@@ -23,7 +23,7 @@ export interface FileUploadProps {
   multiple?: boolean
   maxSizeMb?: number
   maxFiles?: number
-  /** Renvoie l'URL publique du fichier (upload réel) ou void. */
+  /** Returns the public file URL (real upload) or void. */
   uploader?: (file: File, onProgress: (value: number) => void) => Promise<string | void>
   onChange?: (items: UploadItem[]) => void
   className?: string
@@ -43,7 +43,7 @@ export function FileUpload({
   uploader,
   onChange,
   className,
-}: FileUploadProps) {
+}: Readonly<FileUploadProps>) {
   const inputId = useId()
   const [items, setItems] = useState<UploadItem[]>([])
   const [dragging, setDragging] = useState(false)
@@ -142,11 +142,11 @@ export function FileUpload({
     for (const file of files) {
       if (accepted.length >= slots) break
       if (file.size > maxSizeMb * 1024 * 1024) {
-        errors.push(`${file.name} dépasse ${maxSizeMb} Mo`)
+        errors.push(`${file.name} exceeds ${maxSizeMb} MB`)
         continue
       }
       if (accept && !matchesAccept(file, accept)) {
-        errors.push(`${file.name} n'est pas un type accepté`)
+        errors.push(`${file.name} is not an accepted type`)
         continue
       }
       accepted.push(file)
@@ -218,10 +218,10 @@ export function FileUpload({
           <Upload className="size-5" />
         </span>
         <span className="text-sm font-medium">
-          {dragging ? 'Dépose ici' : 'Glisse tes fichiers ou clique'}
+          {dragging ? 'Drop here' : 'Drag your files or click'}
         </span>
         <span className="max-w-xs text-[11px] leading-relaxed text-muted-foreground">
-          {accept ? accept.replaceAll(',', ' · ') : 'Tous types'} — jusqu'à {maxSizeMb} Mo
+          {accept ? accept.replaceAll(',', ' · ') : 'All types'} — up to {maxSizeMb} MB
           {multiple ? ` · ${maxFiles} fichiers` : ''}
         </span>
         <input
@@ -302,9 +302,9 @@ export function FileUpload({
                   href={item.url}
                   target={item.url ? '_blank' : undefined}
                   rel="noreferrer"
-                  title={item.url ?? 'Envoyé'}
+                  title={item.url ?? 'Uploaded'}
                   className="grid size-7 shrink-0 place-items-center rounded-md text-emerald-400 transition hover:bg-emerald-400/10"
-                  aria-label={item.url ? `Ouvrir ${item.file.name}` : 'Envoyé'}
+                  aria-label={item.url ? `Open ${item.file.name}` : 'Uploaded'}
                 >
                   <Check className="size-4" />
                 </a>
@@ -313,7 +313,7 @@ export function FileUpload({
                 <button
                   type="button"
                   onClick={() => retry(item)}
-                  aria-label="Réessayer"
+                  aria-label="Retry"
                   className="grid size-7 place-items-center rounded-md text-muted-foreground transition hover:bg-muted hover:text-foreground"
                 >
                   <RotateCcw className="size-3.5" />

package/src/components/ui/icon-picker.tsx

@@ -126,11 +126,11 @@ function IconSvg({
   data,
   color,
   className,
-}: {
+}: Readonly<{
   data: IconData | null
   color: string
   className?: string
-}) {
+}>) {
   if (!data) {
     return <span className={cn('inline-block rounded bg-muted', className)} />
   }
@@ -149,16 +149,16 @@ export function IconGlyph({
   icon,
   color = 'currentColor',
   className,
-}: {
+}: Readonly<{
   icon: string
   color?: string
   className?: string
-}) {
+}>) {
   const [data, setData] = useState<IconData | null>(() => iconCache.get(icon) ?? null)
   const [prevIcon, setPrevIcon] = useState(icon)
   const loadRef = useRef<Promise<void> | null>(null)
 
-  // Ajustement pendant le rendu : une icône déjà en cache s'applique sans effet.
+  // Render-time adjustment: an icon already cached is applied with no effect.
   if (prevIcon !== icon) {
     setPrevIcon(icon)
     setData(iconCache.get(icon) ?? null)
@@ -184,9 +184,9 @@ export function IconPicker({
   value,
   color = 'var(--primary)',
   onChange,
-  placeholder = 'Choisir une icône',
+  placeholder = 'Choose an icon',
   className,
-}: IconPickerProps) {
+}: Readonly<IconPickerProps>) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
   const [icons, setIcons] = useState<string[]>([])
@@ -206,7 +206,7 @@ export function IconPicker({
           `https://api.iconify.design/search?query=${encodeURIComponent(q)}&limit=96&prefixes=${SEARCH_PREFIXES}`,
           { signal: controller.signal },
         )
-        if (!res.ok) throw new Error('Erreur lors de la recherche des icônes')
+        if (!res.ok) throw new Error('Error while searching icons')
         const data: IconSearchResponse = await res.json()
         setIcons(data.icons ?? [])
       } catch (err) {
@@ -270,12 +270,12 @@ export function IconPicker({
       {/* Picker */}
       {open && (
         <div className="absolute left-0 top-full z-50 mt-2 w-full overflow-hidden rounded-xl border border-border bg-card shadow-xl">
-          {/* En-tête */}
+          {/* Header */}
           <div className="flex items-center justify-between border-b border-border px-4 py-3">
             <div>
-              <p className="text-sm font-medium text-foreground">Choisir une icône</p>
+              <p className="text-sm font-medium text-foreground">Choose an icon</p>
               <p className="text-xs text-muted-foreground">
-                Recherchez parmi des milliers d'icônes
+                Search among thousands of icons
               </p>
             </div>
             <button
@@ -305,7 +305,7 @@ export function IconPicker({
             </div>
           </div>
 
-          {/* Liste d'icônes */}
+          {/* Icon list */}
           <div className="max-h-36 overflow-y-auto p-3">
             {loading ? (
               <div className="grid grid-cols-[repeat(auto-fill,minmax(2.5rem,1fr))] gap-2">
@@ -349,7 +349,7 @@ export function IconPicker({
               <div className="flex flex-col items-center justify-center py-6 text-center">
                 <Search size={26} className="mb-2 text-muted-foreground/50" />
                 <p className="text-sm font-medium text-muted-foreground">
-                  Aucune icône trouvée
+                  No icon found
                 </p>
                 <p className="mt-1 text-xs text-muted-foreground/70">
                   Essayez un autre terme

package/src/components/ui/motion.tsx

@@ -21,7 +21,7 @@ export function FadeIn({
   duration = 520,
   className,
   style,
-}: MotionProps) {
+}: Readonly<MotionProps>) {
   const reduced = useReducedMotion()
   return (
     <div
@@ -45,10 +45,12 @@ export function SlideIn({
   style,
   direction = 'up',
   distance = 20,
-}: MotionProps & {
-  direction?: 'up' | 'down' | 'left' | 'right'
-  distance?: number
-}) {
+}: Readonly<
+  MotionProps & {
+    direction?: 'up' | 'down' | 'left' | 'right'
+    distance?: number
+  }
+>) {
   const reduced = useReducedMotion()
   const offset = {
     up: `translate3d(0, ${distance}px, 0)`,
@@ -82,7 +84,7 @@ export function ScaleIn({
   className,
   style,
   from = 0.92,
-}: MotionProps & { from?: number }) {
+}: Readonly<MotionProps & { from?: number }>) {
   const reduced = useReducedMotion()
   return (
     <div
@@ -108,13 +110,13 @@ export function Stagger({
   duration = 460,
   className,
   itemClassName,
-}: {
+}: Readonly<{
   children: ReactNode
   delay?: number
   duration?: number
   className?: string
   itemClassName?: string
-}) {
+}>) {
   return (
     <div className={className}>
       {Children.map(children, (child, index) => (

package/src/components/ui/otp-input.tsx

@@ -39,7 +39,7 @@ export function OtpInput({
   error = false,
   className,
   inputClassName,
-}: OtpInputProps) {
+}: Readonly<OtpInputProps>) {
   const [internalValue, setInternalValue] = useState(defaultValue)
   const current = value ?? internalValue
   const complete = current.length === length && /^\d+$/.test(current)

package/src/components/ui/resizable.tsx

@@ -10,11 +10,11 @@ export function ResizablePanelGroup({
   direction = 'horizontal',
   className,
   children,
-}: {
+}: Readonly<{
   direction?: ResizableDirection
   className?: string
   children: ReactNode
-}) {
+}>) {
   return (
     <div
       data-resizable-group
@@ -35,12 +35,12 @@ export function ResizablePanel({
   minSize = 10,
   className,
   children,
-}: {
+}: Readonly<{
   defaultSize?: number
   minSize?: number
   className?: string
   children: ReactNode
-}) {
+}>) {
   return (
     <div
       data-resizable-panel
@@ -54,7 +54,7 @@ export function ResizablePanel({
   )
 }
 
-export function ResizableHandle({ className }: { className?: string }) {
+export function ResizableHandle({ className }: Readonly<{ className?: string }>) {
   const ref = useRef<HTMLDivElement>(null)
   const [orientation, setOrientation] = useState<'horizontal' | 'vertical'>('vertical')
 
@@ -183,7 +183,7 @@ export function ResizableHandle({ className }: { className?: string }) {
       }}
       className={cn('group/handle relative shrink-0 outline-none', className)}
     >
-      <span className="sr-only">Utilise les flèches pour redimensionner</span>
+      <span className="sr-only">Use the arrows to resize</span>
     </div>
   )
 }

package/src/components/ui/rich-text-editor.tsx

@@ -43,7 +43,7 @@ export function RichTextEditor({
   toolbar = true,
   minHeight = 220,
   className,
-}: RichTextEditorProps) {
+}: Readonly<RichTextEditorProps>) {
   const editorRef = useRef<HTMLDivElement>(null)
   const [internalValue, setInternalValue] = useState(defaultValue)
   const html = value ?? internalValue
@@ -143,14 +143,14 @@ export function RichTextEditor({
             <Italic className="size-3.5" />
           </ToolButton>
           <ToolButton
-            label="Souligné"
+            label="Underline"
             active={active.underline}
             onClick={() => exec('underline')}
           >
             <Underline className="size-3.5" />
           </ToolButton>
           <ToolButton
-            label="Barré"
+            label="Strikethrough"
             active={active.strikeThrough}
             onClick={() => exec('strikeThrough')}
           >
@@ -182,14 +182,14 @@ export function RichTextEditor({
           <Divider />
 
           <ToolButton
-            label="Liste à puces"
+            label="Bullet list"
             active={active.insertUnorderedList}
             onClick={() => exec('insertUnorderedList')}
           >
             <List className="size-3.5" />
           </ToolButton>
           <ToolButton
-            label="Liste numérotée"
+            label="Numbered list"
             active={active.insertOrderedList}
             onClick={() => exec('insertOrderedList')}
           >
@@ -204,7 +204,7 @@ export function RichTextEditor({
           <ToolButton label="Annuler" onClick={() => exec('undo')}>
             <Undo2 className="size-3.5" />
           </ToolButton>
-          <ToolButton label="Rétablir" onClick={() => exec('redo')}>
+          <ToolButton label="Redo" onClick={() => exec('redo')}>
             <Redo2 className="size-3.5" />
           </ToolButton>
           <ToolButton label="Effacer la mise en forme" onClick={() => exec('removeFormat')}>
@@ -254,12 +254,12 @@ function ToolButton({
   active,
   onClick,
   children,
-}: {
+}: Readonly<{
   label: string
   active?: boolean
   onClick: () => void
   children: ReactNode
-}) {
+}>) {
   return (
     <button
       type="button"

package/src/components/ui/stories.tsx

@@ -37,7 +37,7 @@ export function Stories({
   duration = 5000,
   className,
   textBackground = 'linear-gradient(160deg, color-mix(in oklab, var(--primary) 35%, #000) 0%, var(--primary) 55%, color-mix(in oklab, var(--primary) 65%, #fff) 100%)',
-}: StoriesProps) {
+}: Readonly<StoriesProps>) {
   const [internalOpen, setInternalOpen] = useState(defaultOpen)
   const isOpen = open ?? internalOpen
   const [index, setIndex] = useState(initialIndex)
@@ -51,7 +51,7 @@ export function Stories({
   const setOpen = useCallback(
     (next: boolean) => {
       if (next) {
-        // Réinitialise la lecture à l'ouverture plutôt que par un effet.
+        // Restarts playback at open rather than via an effect.
         elapsedRef.current = 0
         setPaused(false)
       }
@@ -204,7 +204,7 @@ export function Stories({
             )}
             <div className="min-w-0 flex-1">
               <p className="truncate text-xs font-medium text-white">{item.title ?? 'Stories'}</p>
-              <p className="text-[10px] text-white/55">à l'instant</p>
+              <p className="text-[10px] text-white/55">now</p>
             </div>
             <button
               type="button"

package/src/components/ui/time-picker.tsx

@@ -45,7 +45,7 @@ export function TimePicker({
   disabled = false,
   label,
   className,
-}: TimePickerProps) {
+}: Readonly<TimePickerProps>) {
   const [internalValue, setInternalValue] = useState(defaultValue)
   const current = value ?? internalValue
   const inputValue = toInputValue(current, withSeconds)