uifolio 0.3.0 → 0.5.1

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "uifolio",
-  "version": "0.3.0",
+  "version": "0.5.1",
   "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.",
   "type": "module",
   "license": "MIT",
   "author": "Barronakn <jeanbarronalokpon@gmail.com>",
-  "homepage": "https://github.com/Barronakn/UIfolio#readme",
+  "homepage": "https://ui.folio.barrondev.site",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Barronakn/UIfolio.git"
@@ -14,17 +14,32 @@
     "url": "https://github.com/Barronakn/UIfolio/issues"
   },
   "keywords": [
-    "uifolio",
     "react",
-    "components",
-    "ui",
-    "cli",
-    "tailwind",
+    "react-component",
     "tailwindcss",
+    "ui-components",
+    "component-library",
+    "cli",
+    "uifolio",
     "calendar",
     "video-player",
+    "audio-player",
     "otp",
-    "shadcn"
+    "color-picker",
+    "file-upload",
+    "rich-text-editor",
+    "command-menu",
+    "resizable-panels",
+    "time-picker",
+    "cadence",
+    "storytelling",
+    "accordion",
+    "text-reveal",
+    "hls.js",
+    "vtt",
+    "shadcn",
+    "shadcn-clone",
+    "shadcn-like"
   ],
   "engines": {
     "node": ">=18"
@@ -38,9 +53,11 @@
   "files": [
     "cli",
     "src/components/ui",
+    "!src/components/ui/stories-tokens.ts",
     "src/lib/color.ts",
     "src/lib/date.ts",
     "src/lib/uploader.ts",
+    "src/lib/use-controllable.ts",
     "src/lib/use-hotkeys.ts",
     "src/lib/use-reduced-motion.ts",
     "src/lib/use-theme.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
 

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`

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

@@ -37,7 +37,7 @@ export function CommandMenu({
   emptyText = 'Aucun résultat.',
   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

@@ -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)

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Search, X, Check, ChevronDown } from 'lucide-react'
 import { cn } from '@/lib/utils'
 
@@ -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,26 +149,31 @@ 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.
+  if (prevIcon !== icon) {
+    setPrevIcon(icon)
+    setData(iconCache.get(icon) ?? null)
+  }
 
   useEffect(() => {
-    const cached = iconCache.get(icon)
-    if (cached) {
-      setData(cached)
-      return
-    }
-    let cancelled = false
-    setData(null)
-    loadIcons([icon]).then((icons) => {
-      if (!cancelled) setData(icons[icon] ?? null)
+    if (iconCache.get(icon)) return
+    const current = loadIcons([icon]).then((icons) => {
+      if (loadRef.current === current) {
+        setData(icons[icon] ?? null)
+      }
     })
+    loadRef.current = current
     return () => {
-      cancelled = true
+      loadRef.current = null
     }
   }, [icon])
 
@@ -181,12 +186,13 @@ export function IconPicker({
   onChange,
   placeholder = 'Choisir une icône',
   className,
-}: IconPickerProps) {
+}: Readonly<IconPickerProps>) {
   const [open, setOpen] = useState(false)
   const [search, setSearch] = useState('')
   const [icons, setIcons] = useState<string[]>([])
   const [bodies, setBodies] = useState<Record<string, IconData>>({})
   const [loading, setLoading] = useState(false)
+  const loadingRef = useRef<Promise<void> | null>(null)
 
   useEffect(() => {
     if (!open) return
@@ -221,12 +227,14 @@ export function IconPicker({
 
   useEffect(() => {
     if (icons.length === 0) return
-    let cancelled = false
-    loadIcons(icons).then((loaded) => {
-      if (!cancelled) setBodies((prev) => ({ ...prev, ...loaded }))
+    const current = loadIcons(icons).then((loaded) => {
+      if (loadingRef.current === current) {
+        setBodies((prev) => ({ ...prev, ...loaded }))
+      }
     })
+    loadingRef.current = current
     return () => {
-      cancelled = true
+      loadingRef.current = null
     }
   }, [icons])
 

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,14 +39,13 @@ export function OtpInput({
   error = false,
   className,
   inputClassName,
-}: OtpInputProps) {
+}: Readonly<OtpInputProps>) {
   const [internalValue, setInternalValue] = useState(defaultValue)
   const current = value ?? internalValue
-  const [phase, setPhase] = useState<'idle' | 'success'>('idle')
+  const complete = current.length === length && /^\d+$/.test(current)
+  const phase = complete && !error ? 'success' : 'idle'
 
   const inputs = useRef<Array<HTMLInputElement | null>>([])
-  const completed = useRef(false)
-  const completedValue = useRef<string | null>(null)
   const onChangeRef = useRef(onChange)
   const onCompleteRef = useRef(onComplete)
 
@@ -55,39 +54,16 @@ export function OtpInput({
     onCompleteRef.current = onComplete
   })
 
+  useEffect(() => {
+    if (autoFocus) inputs.current[0]?.focus()
+  }, [autoFocus])
+
   const commit = (next: string) => {
     const cleaned = next.replace(/\D/g, '').slice(0, length)
     if (value === undefined) setInternalValue(cleaned)
     onChangeRef.current?.(cleaned)
   }
 
-  const complete = current.length === length && /^\d+$/.test(current)
-
-  useEffect(() => {
-    if (!complete) {
-      completed.current = false
-      completedValue.current = null
-      setPhase('idle')
-      return
-    }
-    if (completed.current && completedValue.current === current) return
-    completed.current = true
-    completedValue.current = current
-    setPhase('success')
-    onCompleteRef.current?.(current)
-  }, [complete, current, length])
-
-  useEffect(() => {
-    if (!error) return
-    completed.current = false
-    completedValue.current = null
-    setPhase('idle')
-  }, [error])
-
-  useEffect(() => {
-    if (autoFocus) inputs.current[0]?.focus()
-  }, [autoFocus])
-
   const focusInput = (index: number) => {
     inputs.current[Math.max(0, Math.min(length - 1, index))]?.focus()
     inputs.current[Math.max(0, Math.min(length - 1, index))]?.select()

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')
 

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
@@ -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)
@@ -50,6 +50,11 @@ export function Stories({
 
   const setOpen = useCallback(
     (next: boolean) => {
+      if (next) {
+        // Réinitialise la lecture à l'ouverture plutôt que par un effet.
+        elapsedRef.current = 0
+        setPaused(false)
+      }
       if (open === undefined) setInternalOpen(next)
       onOpenChange?.(next)
     },
@@ -76,13 +81,6 @@ export function Stories({
 
   const close = useCallback(() => setOpen(false), [setOpen])
 
-  useEffect(() => {
-    if (!isOpen) return
-    setIndex(initialIndex)
-    setPaused(false)
-    elapsedRef.current = 0
-  }, [initialIndex, isOpen])
-
   useEffect(() => {
     if (!isOpen) return
     const previous = document.body.style.overflow
@@ -115,14 +113,19 @@ export function Stories({
     else void video.play().catch(() => {})
   }, [index, isOpen, paused])
 
+  const mainLoopRef = useRef<{ startedAt: number; total: number } | null>(null)
+
   useEffect(() => {
     if (!isOpen || paused) return
     if (barRef.current) barRef.current.style.transform = 'scaleX(0)'
 
-    const total = items[index]?.duration ?? duration
+    const item = items[index]
+    const total = item?.duration ?? duration
     const startedAt = performance.now() - elapsedRef.current
-    let frame = 0
 
+    mainLoopRef.current = { startedAt, total }
+
+    let frame = 0
     const tick = (now: number) => {
       const elapsed = now - startedAt
       elapsedRef.current = elapsed

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)