@smicolon/fasla-ui 0.3.0 → 0.4.1

package/registry/effects/effects.test.tsx

@@ -61,6 +61,67 @@ describe("TypewriterText", () => {
     expect(first).not.toHaveBeenCalled()
     expect(latest).toHaveBeenCalledTimes(1)
   })
+
+  it("starts a new text from nothing, never showing the old one", () => {
+    vi.useFakeTimers()
+    const { container, rerender } = render(<TypewriterText text="Hello" speed={10} cursor={false} />)
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(container.textContent).toBe("Hello")
+    rerender(<TypewriterText text="Bye" speed={10} cursor={false} />)
+    expect(container.textContent).toBe("")
+    act(() => {
+      vi.advanceTimersByTime(100)
+    })
+    expect(container.textContent).toBe("Bye")
+  })
+
+  it("types the text again after loopDelay when looping", () => {
+    vi.useFakeTimers()
+    const { container } = render(<TypewriterText text="Hi" speed={10} loop loopDelay={50} cursor={false} />)
+    act(() => {
+      vi.advanceTimersByTime(40)
+    })
+    expect(container.textContent).toBe("Hi")
+    // Done at 20ms; the second pass starts at 70ms and types its next letter at 80.
+    act(() => {
+      vi.advanceTimersByTime(35)
+    })
+    expect(container.textContent).toBe("H")
+  })
+})
+
+describe("Typewriter under reduced motion", () => {
+  const reduceMotion = () =>
+    vi.spyOn(window, "matchMedia").mockImplementation(
+      (query: string) =>
+        ({
+          matches: query.includes("reduce"),
+          media: query,
+          addEventListener: () => {},
+          removeEventListener: () => {},
+        }) as unknown as MediaQueryList
+    )
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it("TypewriterText shows the whole text at once, with no cursor, and reports it complete", () => {
+    reduceMotion()
+    const onComplete = vi.fn()
+    const { container } = render(<TypewriterText text="Your order is on its way." onComplete={onComplete} />)
+    expect(container.textContent).toBe("Your order is on its way.")
+    expect(onComplete).toHaveBeenCalledTimes(1)
+  })
+
+  it("TypewriterWords shows the first word, still", async () => {
+    reduceMotion()
+    const { TypewriterWords } = await import("./typewriter-text/typewriter-text")
+    const { container } = render(<TypewriterWords words={["linen", "wool"]} />)
+    expect(container.textContent).toBe("linen")
+  })
 })
 
 describe("SpotlightCard", () => {

package/registry/effects/glow-card/glow-card.tsx

@@ -3,21 +3,27 @@
 import * as React from "react"
 import { cn } from "../../../src/lib/utils"
 
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)"
+
+function subscribeToReducedMotion(onChange: () => void) {
+  if (typeof window.matchMedia !== "function") return () => {}
+  const query = window.matchMedia(REDUCED_MOTION)
+  query.addEventListener("change", onChange)
+  return () => query.removeEventListener("change", onChange)
+}
+
 /**
- * Whether the user asks for reduced motion. It starts false, so the server and
- * the first client render agree, then follows the setting as it changes.
+ * Whether the user asks for reduced motion. False on the server and while
+ * hydrating, so both renders agree, then the setting as it is and as it
+ * changes. Read through useSyncExternalStore, not set from an effect: an
+ * effect's setState renders everything twice, and React's lint rejects it.
  */
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = React.useState(false)
-  React.useEffect(() => {
-    if (typeof window.matchMedia !== "function") return
-    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
-    setReduced(query.matches)
-    const onChange = () => setReduced(query.matches)
-    query.addEventListener("change", onChange)
-    return () => query.removeEventListener("change", onChange)
-  }, [])
-  return reduced
+  return React.useSyncExternalStore(
+    subscribeToReducedMotion,
+    () => typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches,
+    () => false
+  )
 }
 
 /** The value, or the fallback when it is missing or blank (a cleared control, say). */

package/registry/effects/text-reveal/text-reveal.tsx

@@ -38,7 +38,9 @@ function splitGraphemes(text: string): string[] {
   }
   // Without Segmenter (Firefox before 125, for one), keep each combining mark
   // with the character before it, so a letter and its accent animate together.
-  return text.match(/\P{M}\p{M}*|\p{M}+/gu) ?? []
+  // Built from a string: TypeScript rejects the u flag in a regex literal when
+  // the target is below ES2015, as it is in a Next.js 14 tsconfig.
+  return text.match(new RegExp("\\P{M}\\p{M}*|\\p{M}+", "gu")) ?? []
 }
 
 /**

package/registry/effects/typewriter-text/typewriter-text.tsx

@@ -3,21 +3,27 @@
 import * as React from "react"
 import { cn } from "../../../src/lib/utils"
 
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)"
+
+function subscribeToReducedMotion(onChange: () => void) {
+  if (typeof window.matchMedia !== "function") return () => {}
+  const query = window.matchMedia(REDUCED_MOTION)
+  query.addEventListener("change", onChange)
+  return () => query.removeEventListener("change", onChange)
+}
+
 /**
- * Whether the user asks for reduced motion. It starts false, so the server and
- * the first client render agree, then follows the setting as it changes.
+ * Whether the user asks for reduced motion. False on the server and while
+ * hydrating, so both renders agree, then the setting as it is and as it
+ * changes. Read through useSyncExternalStore, not set from an effect: an
+ * effect's setState renders everything twice, and React's lint rejects it.
  */
 function usePrefersReducedMotion() {
-  const [reduced, setReduced] = React.useState(false)
-  React.useEffect(() => {
-    if (typeof window.matchMedia !== "function") return
-    const query = window.matchMedia("(prefers-reduced-motion: reduce)")
-    setReduced(query.matches)
-    const onChange = () => setReduced(query.matches)
-    query.addEventListener("change", onChange)
-    return () => query.removeEventListener("change", onChange)
-  }, [])
-  return reduced
+  return React.useSyncExternalStore(
+    subscribeToReducedMotion,
+    () => typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches,
+    () => false
+  )
 }
 
 /** The value, or the fallback when it is missing or blank (a cleared control, say). */
@@ -56,57 +62,57 @@ export function TypewriterText({
   ...props
 }: TypewriterTextProps) {
   const cursorChar = filled(cursorCharProp, "|")
-  const [displayText, setDisplayText] = React.useState("")
-  const [isTyping, setIsTyping] = React.useState(false)
   const prefersReducedMotion = usePrefersReducedMotion()
   const showCursor = cursor && !prefersReducedMotion
 
+  // How far the current run has typed. A new text, speed or timing starts a
+  // new run, and progress left by an older one reads as nothing typed yet, so
+  // the run never has to clear state as it starts.
+  const run = JSON.stringify([text, speed, delay, loop, loopDelay])
+  const [progress, setProgress] = React.useState({ run: "", typed: 0, typing: false })
+  const current = progress.run === run
+  // Reduced motion: the whole text, at once.
+  const displayText = prefersReducedMotion ? text : current ? text.slice(0, progress.typed) : ""
+  const isTyping = current ? progress.typing : true
+
   // Held in a ref: an inline callback is a new function every render, and as
   // an effect dependency it restarted the typing each time the parent rendered.
+  // Updated after each render, never during one.
   const onCompleteRef = React.useRef(onComplete)
-  onCompleteRef.current = onComplete
+  React.useEffect(() => {
+    onCompleteRef.current = onComplete
+  })
 
   React.useEffect(() => {
-    // If user prefers reduced motion, show full text immediately
     if (prefersReducedMotion) {
-      setDisplayText(text)
       onCompleteRef.current?.()
       return
     }
 
     let timeoutId: ReturnType<typeof setTimeout>
-    let charIndex = 0
-    setDisplayText("")
-    setIsTyping(true)
 
     const startTyping = () => {
+      let charIndex = 0
       const typeChar = () => {
         if (charIndex < text.length) {
-          setDisplayText(text.slice(0, charIndex + 1))
           charIndex++
+          setProgress({ run, typed: charIndex, typing: true })
           timeoutId = setTimeout(typeChar, speed)
         } else {
-          setIsTyping(false)
+          setProgress({ run, typed: charIndex, typing: false })
           onCompleteRef.current?.()
-
-          if (loop) {
-            timeoutId = setTimeout(() => {
-              charIndex = 0
-              setDisplayText("")
-              setIsTyping(true)
-              startTyping()
-            }, loopDelay)
-          }
+          if (loop) timeoutId = setTimeout(startTyping, loopDelay)
         }
       }
 
+      setProgress({ run, typed: 0, typing: true })
       typeChar()
     }
 
     timeoutId = setTimeout(startTyping, delay)
 
     return () => clearTimeout(timeoutId)
-  }, [text, speed, delay, loop, loopDelay, prefersReducedMotion])
+  }, [run, text, speed, delay, loop, loopDelay, prefersReducedMotion])
 
   // Cursor blink effect
   const [cursorVisible, setCursorVisible] = React.useState(true)
@@ -163,25 +169,24 @@ export function TypewriterWords({
   ...props
 }: TypewriterWordsProps) {
   const [wordIndex, setWordIndex] = React.useState(0)
-  const [displayText, setDisplayText] = React.useState("")
+  const [typedText, setTypedText] = React.useState("")
   const [isDeleting, setIsDeleting] = React.useState(false)
 
   const prefersReducedMotion = usePrefersReducedMotion()
+  // Reduced motion: the first word, still.
+  const displayText = prefersReducedMotion ? (words[0] ?? "") : typedText
 
   React.useEffect(() => {
-    if (prefersReducedMotion) {
-      setDisplayText(words[0] ?? "")
-      return
-    }
+    if (prefersReducedMotion) return
 
     const currentWord = words[wordIndex] ?? ""
     let timeoutId: ReturnType<typeof setTimeout>
 
     if (!isDeleting) {
       // Typing
-      if (displayText.length < currentWord.length) {
+      if (typedText.length < currentWord.length) {
         timeoutId = setTimeout(() => {
-          setDisplayText(currentWord.slice(0, displayText.length + 1))
+          setTypedText(currentWord.slice(0, typedText.length + 1))
         }, speed)
       } else {
         // Word complete, wait then start deleting
@@ -191,21 +196,21 @@ export function TypewriterWords({
       }
     } else {
       // Deleting
-      if (displayText.length > 0) {
+      if (typedText.length > 0) {
         timeoutId = setTimeout(() => {
-          setDisplayText(displayText.slice(0, -1))
+          setTypedText(typedText.slice(0, -1))
         }, speed / 2)
       } else {
-        // Deletion complete, move to next word
-        setIsDeleting(false)
+        // Deletion complete: after a pause, type the next word.
         timeoutId = setTimeout(() => {
+          setIsDeleting(false)
           setWordIndex((prev) => (prev + 1) % words.length)
         }, wordDelay)
       }
     }
 
     return () => clearTimeout(timeoutId)
-  }, [displayText, isDeleting, wordIndex, words, speed, deleteDelay, wordDelay, prefersReducedMotion])
+  }, [typedText, isDeleting, wordIndex, words, speed, deleteDelay, wordDelay, prefersReducedMotion])
 
   // Cursor blink
   const [cursorVisible, setCursorVisible] = React.useState(true)

package/registry/next14-tsconfig.test.ts

@@ -0,0 +1,43 @@
+// @vitest-environment node
+import { describe, it, expect } from "vitest"
+import { readdirSync } from "node:fs"
+import { join } from "node:path"
+import ts from "typescript"
+
+const registry = __dirname
+
+function sourceFiles(dir: string): string[] {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(dir, entry.name)
+    if (entry.isDirectory()) return sourceFiles(path)
+    return /\.tsx?$/.test(entry.name) && !/\.(test|stories)\.tsx?$/.test(entry.name) ? [path] : []
+  })
+}
+
+// The compiler options create-next-app@14 writes. It sets no target, so
+// TypeScript falls back to ES5, and syntax that needs ES2015 or later (a u
+// flag on a regex literal, for one) fails `next build`.
+const next14 = {
+  lib: ["lib.dom.d.ts", "lib.dom.iterable.d.ts", "lib.esnext.d.ts"],
+  allowJs: true,
+  skipLibCheck: true,
+  strict: true,
+  noEmit: true,
+  esModuleInterop: true,
+  module: ts.ModuleKind.ESNext,
+  moduleResolution: ts.ModuleResolutionKind.Bundler,
+  resolveJsonModule: true,
+  isolatedModules: true,
+  jsx: ts.JsxEmit.Preserve,
+}
+
+describe("registry under a Next.js 14 tsconfig", () => {
+  it("type-checks with no target set", () => {
+    const program = ts.createProgram(sourceFiles(registry), next14)
+    const errors = ts.getPreEmitDiagnostics(program).map((d) => {
+      const where = d.file ? `${d.file.fileName.replace(registry, "registry")}:${d.file.getLineAndCharacterOfPosition(d.start ?? 0).line + 1}` : ""
+      return `${where} TS${d.code} ${ts.flattenDiagnosticMessageText(d.messageText, " ")}`
+    })
+    expect(errors).toEqual([])
+  }, 60_000)
+})

package/registry/ui/checkbox/checkbox.test.tsx

@@ -0,0 +1,23 @@
+import { describe, it, expect } from "vitest"
+import { render, screen } from "@testing-library/react"
+import { Checkbox } from "./checkbox"
+
+describe("Checkbox id", () => {
+  it("uses the id it is given", () => {
+    render(<Checkbox id="terms" label="Accept the terms" />)
+    expect(screen.getByLabelText("Accept the terms").id).toBe("terms")
+  })
+
+  it("generates an id that ties the label to the input", () => {
+    render(<Checkbox label="Accept the terms" />)
+    expect(screen.getByLabelText("Accept the terms").id).not.toBe("")
+  })
+
+  it("keeps working when the id is added and removed between renders", () => {
+    const { rerender } = render(<Checkbox label="Accept the terms" />)
+    rerender(<Checkbox id="terms" label="Accept the terms" />)
+    expect(screen.getByLabelText("Accept the terms").id).toBe("terms")
+    rerender(<Checkbox label="Accept the terms" />)
+    expect(screen.getByLabelText("Accept the terms").id).not.toBe("terms")
+  })
+})

package/registry/ui/checkbox/checkbox.tsx

@@ -26,7 +26,9 @@ const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
       }
     }, [indeterminate])
 
-    const inputId = id || React.useId()
+    // Called on every render, so the hook order holds when id comes and goes
+    const generatedId = React.useId()
+    const inputId = id || generatedId
 
     const checkbox = (
       <div className="relative flex items-center">

package/registry/ui/combobox/combobox.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest"
+import { describe, it, expect, beforeAll } from "vitest"
 import { render, screen, fireEvent } from "@testing-library/react"
 import { Combobox } from "./combobox"
 
@@ -41,3 +41,32 @@ describe("Combobox text", () => {
     expect(screen.getByText("جارٍ التحميل")).toBeTruthy()
   })
 })
+
+describe("Combobox highlight", () => {
+  // The highlighted option is scrolled into view, which jsdom does not implement
+  beforeAll(() => {
+    Element.prototype.scrollIntoView ??= () => {}
+  })
+
+  it("moves back to the first option when the search changes", () => {
+    const cities = [...options, { value: "dammam", label: "Dammam" }]
+    render(<Combobox options={cities} />)
+    const input = screen.getByRole("combobox")
+
+    fireEvent.focus(input)
+    fireEvent.keyDown(input, { key: "ArrowDown" })
+    fireEvent.keyDown(input, { key: "ArrowDown" })
+    expect(screen.getByRole("option", { name: "Dammam" })).toHaveAttribute("data-highlighted", "true")
+
+    fireEvent.change(input, { target: { value: "a" } })
+    expect(screen.getByRole("option", { name: "Riyadh" })).toHaveAttribute("data-highlighted", "true")
+    expect(screen.getByRole("option", { name: "Dammam" })).toHaveAttribute("data-highlighted", "false")
+  })
+
+  it("quotes the search in the create option", () => {
+    render(<Combobox options={options} creatable onCreate={() => {}} />)
+    const input = screen.getByRole("combobox")
+    fireEvent.change(input, { target: { value: "Mecca" } })
+    expect(screen.getByRole("option").textContent).toBe('Create "Mecca"')
+  })
+})

package/registry/ui/combobox/combobox.tsx

@@ -189,10 +189,13 @@ export function Combobox({
     }
   }, [highlightedIndex, open])
 
-  // Reset highlighted index when search changes
-  React.useEffect(() => {
+  // Reset highlighted index when search changes. Done while rendering rather
+  // than in an effect, so the list never paints with the old highlight.
+  const [highlightedSearch, setHighlightedSearch] = React.useState(search)
+  if (highlightedSearch !== search) {
+    setHighlightedSearch(search)
     setHighlightedIndex(0)
-  }, [search])
+  }
 
   // Close on outside click
   React.useEffect(() => {
@@ -334,7 +337,7 @@ export function Combobox({
                     )}
                   >
                     <PlusIcon size={16} strokeWidth={1.5} className="me-2" />
-                    {createText} "{search}"
+                    {createText} &quot;{search}&quot;
                   </li>
                 )}
               </>

package/registry/ui/input/input.test.tsx

@@ -16,7 +16,7 @@ describe("Input", () => {
     expect(screen.getByTestId("input")).toHaveClass("border-destructive")
 
     rerender(<Input variant="success" data-testid="input" />)
-    expect(screen.getByTestId("input")).toHaveClass("border-green-500")
+    expect(screen.getByTestId("input")).toHaveClass("border-success")
   })
 
   it("renders with different sizes", () => {

package/registry/ui/input/input.tsx

@@ -9,7 +9,7 @@ const inputVariants = cva(
       variant: {
         default: "border-input shadow-sm",
         error: "border-destructive focus-visible:ring-destructive",
-        success: "border-green-500 focus-visible:ring-green-500",
+        success: "border-success focus-visible:ring-success",
       },
       inputSize: {
         default: "h-9 px-3 py-1",

package/registry/ui/skeleton/index.ts

@@ -2,6 +2,7 @@ export {
   Skeleton,
   SkeletonText,
   SkeletonAvatar,
+  SkeletonListItem,
   SkeletonCard,
   type SkeletonProps,
 } from "./skeleton"