refactor: prefer-nullish-coalescing

apps/www/app/(blog)/blog/[...slug]/page.tsx

@@ -60,7 +60,7 @@ export async function generateMetadata({
       url: absoluteUrl(page.url),
       images: [
         {
-          url: doc.image || "",
+          url: doc.image ?? "",
           width: 1200,
           height: 630,
         },
@@ -71,7 +71,7 @@ export async function generateMetadata({
       title: doc.title,
       description: doc.description,
 
-      images: [doc.image || ""],
+      images: [doc.image ?? ""],
       creator: "@dillionverma",
     },
   }
@@ -117,7 +117,7 @@ export default async function BlogPage({ params }: PageProps) {
     dateModified: doc.publishedOn,
     author: {
       "@type": "Person",
-      name: doc.author || "Magic UI Team",
+      name: doc.author ?? "Magic UI Team",
       url: siteConfig.links?.twitter,
     },
     image: doc.image ? [doc.image] : undefined,

apps/www/app/og/route.tsx

@@ -43,6 +43,7 @@ export async function GET(request: Request) {
   const description = searchParams.get("description")
 
   const [fonts] = await Promise.all([loadAssets()])
+  const hasContent = [title, description].some(Boolean)
 
   return new ImageResponse(
     <div
@@ -53,7 +54,7 @@ export async function GET(request: Request) {
       <div tw="flex border absolute border-neutral-200 border-dashed inset-y-0 right-16 w-[1px]" />
       <div tw="flex border absolute border-neutral-200 inset-x-0 h-[1px] top-16" />
       <div tw="flex border absolute border-neutral-200 inset-x-0 h-[1px] bottom-16" />
-      {(title || description) && (
+      {hasContent && (
         <div tw="flex absolute flex-row items-center justify-center bottom-24 right-24 text-white">
           <Icons.logo width={48} height={48} />
           <div tw="text-black flex text-[32px] font-semibold tracking-tight ml-2">
@@ -62,7 +63,7 @@ export async function GET(request: Request) {
         </div>
       )}
       <div tw="flex flex-col absolute justify-center items-center inset-0 p-24 w-full h-full">
-        {title || description ? (
+        {hasContent ? (
           <div tw="flex flex-col items-center justify-center text-center w-full h-full">
             <div tw="tracking-tight flex flex-col justify-center text-black text-balance font-semibold text-[80px]">
               {title}

apps/www/components/blog/table-of-contents.tsx

@@ -31,7 +31,7 @@ export function BlogTableOfContents({
     // Extract headings from rendered DOM
     const extractHeadings = () => {
       const headingElements =
-        document.querySelector(".article-content")?.querySelectorAll("h2") || []
+        document.querySelector(".article-content")?.querySelectorAll("h2") ?? []
       const extractedHeadings: string[] = []
       headingElements.forEach((element) => {
         if (element.textContent) {
@@ -60,13 +60,13 @@ export function BlogTableOfContents({
     )
 
     const headingElements =
-      document.querySelector(".article-content")?.querySelectorAll("h2") || []
+      document.querySelector(".article-content")?.querySelectorAll("h2") ?? []
     headingElements.forEach((element) => observer.observe(element))
 
     // Also update active heading on scroll
     const onScroll = () => {
       const headings = Array.from(
-        document.querySelector(".article-content")?.querySelectorAll("h2") || []
+        document.querySelector(".article-content")?.querySelectorAll("h2") ?? []
       )
       const middle = window.innerHeight / 2
 

apps/www/components/code-tabs.tsx

@@ -9,7 +9,7 @@ export function CodeTabs({ children }: React.ComponentProps<typeof Tabs>) {
   const [config, setConfig] = useConfig()
 
   const installationType = React.useMemo(() => {
-    return config.installationType || "cli"
+    return config.installationType ?? "cli"
   }, [config])
 
   return (

apps/www/components/docs-sidebar.tsx

@@ -112,7 +112,7 @@ export function DocsSidebar({
               </SidebarGroupLabel>
               <SidebarGroupContent>
                 <DocsSidebarNavItems
-                  items={section.items || []}
+                  items={section.items ?? []}
                   pathname={pathname}
                 />
               </SidebarGroupContent>

apps/www/lib/rehype-component.ts

@@ -15,7 +15,7 @@ export function rehypeComponent() {
           name: string
           value?: string
           type?: string
-        }) || {}
+        }) ?? {}
 
       if (node.name === "ComponentSource") {
         const name = getNodeAttributeByName(node, "name")?.value as string
@@ -35,15 +35,15 @@ export function rehypeComponent() {
           } else {
             const component = Index[name]
             src = fileName
-              ? component.files.find((file: unknown) => {
+              ? (component.files.find((file: unknown) => {
                   if (typeof file === "string") {
                     return (
                       file.endsWith(`${fileName}.tsx`) ||
                       file.endsWith(`${fileName}.ts`)
                     )
                   }
                   return false
-                }) || component.files[0]?.path
+                }) ?? component.files[0]?.path)
               : component.files[0]?.path
           }
 

apps/www/mdx-components.tsx

@@ -287,10 +287,10 @@ export const mdxComponents = {
   }: React.ComponentProps<"img">) => (
     <Image
       className={cn("mt-6 rounded-md border", className)}
-      src={(src as string) || ""}
+      src={(src as string) ?? ""}
       width={Number(width)}
       height={Number(height)}
-      alt={alt || ""}
+      alt={alt ?? ""}
       {...props}
     />
   ),

apps/www/public/llms-full.txt

@@ -3394,8 +3394,8 @@ import { useRef } from "react"
 import {
   AnimatePresence,
   motion,
-  type MotionProps,
   useInView,
+  type MotionProps,
   type UseInViewOptions,
   type Variants,
 } from "motion/react"
@@ -3450,7 +3450,7 @@ export function BlurFade({
       filter: `blur(0px)`,
     },
   }
-  const combinedVariants = variant || defaultVariants
+  const combinedVariants = variant ?? defaultVariants
 
   const hiddenFilter = getFilter(combinedVariants.hidden)
   const visibleFilter = getFilter(combinedVariants.visible)
@@ -3888,7 +3888,7 @@ export const ClientTweetCard = ({
 
   if (isLoading) return fallback
   if (error || !data) {
-    const NotFound = components?.TweetNotFound || TweetNotFound
+    const NotFound = components?.TweetNotFound ?? TweetNotFound
     return <NotFound error={onError ? onError(error) : error} />
   }
 
@@ -7840,7 +7840,7 @@ export function IconCloud({ icons, images }: IconCloudProps) {
   useEffect(() => {
     if (!icons && !images) return
 
-    const items = icons || images || []
+    const items = icons ?? images ?? []
     imagesLoadedRef.current = new Array(items.length).fill(false)
 
     const newIconCanvases = items.map((item, index) => {
@@ -7890,7 +7890,7 @@ export function IconCloud({ icons, images }: IconCloudProps) {
 
   // Generate initial icon positions on a sphere
   useEffect(() => {
-    const items = icons || images || []
+    const items = icons ?? images ?? []
     const newIcons: Icon[] = []
     const numIcons = items.length || 20
 
@@ -15264,7 +15264,7 @@ export const TweetCard = async ({
     : undefined
 
   if (!tweet) {
-    const NotFound = components?.TweetNotFound || TweetNotFound
+    const NotFound = components?.TweetNotFound ?? TweetNotFound
     return <NotFound {...props} />
   }
 
@@ -15375,13 +15375,13 @@ export function TypingAnimation({
   })
 
   const wordsToAnimate = useMemo(
-    () => words || (children ? [children] : []),
+    () => words ?? (children ? [children] : []),
     [words, children]
   )
   const hasMultipleWords = wordsToAnimate.length > 1
 
-  const typingSpeed = typeSpeed || duration
-  const deletingSpeed = deleteSpeed || typingSpeed / 2
+  const typingSpeed = typeSpeed ?? duration
+  const deletingSpeed = deleteSpeed ?? typingSpeed / 2
 
   const shouldStart = startOnView ? isInView : true
 

apps/www/public/r/blur-fade.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/magicui/blur-fade.tsx",
-      "content": "\"use client\"\n\nimport { useRef } from \"react\"\nimport {\n  AnimatePresence,\n  motion,\n  type MotionProps,\n  useInView,\n  type UseInViewOptions,\n  type Variants,\n} from \"motion/react\"\n\ntype MarginType = UseInViewOptions[\"margin\"]\n\ninterface BlurFadeProps extends MotionProps {\n  children: React.ReactNode\n  className?: string\n  variant?: {\n    hidden: { y: number }\n    visible: { y: number }\n  }\n  duration?: number\n  delay?: number\n  offset?: number\n  direction?: \"up\" | \"down\" | \"left\" | \"right\"\n  inView?: boolean\n  inViewMargin?: MarginType\n  blur?: string\n}\n\nconst getFilter = (v: Variants[string]) =>\n  typeof v === \"function\" ? undefined : v.filter\n\nexport function BlurFade({\n  children,\n  className,\n  variant,\n  duration = 0.4,\n  delay = 0,\n  offset = 6,\n  direction = \"down\",\n  inView = false,\n  inViewMargin = \"-50px\",\n  blur = \"6px\",\n  ...props\n}: BlurFadeProps) {\n  const ref = useRef(null)\n  const inViewResult = useInView(ref, { once: true, margin: inViewMargin })\n  const isInView = !inView || inViewResult\n  const defaultVariants: Variants = {\n    hidden: {\n      [direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]:\n        direction === \"right\" || direction === \"down\" ? -offset : offset,\n      opacity: 0,\n      filter: `blur(${blur})`,\n    },\n    visible: {\n      [direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]: 0,\n      opacity: 1,\n      filter: `blur(0px)`,\n    },\n  }\n  const combinedVariants = variant || defaultVariants\n\n  const hiddenFilter = getFilter(combinedVariants.hidden)\n  const visibleFilter = getFilter(combinedVariants.visible)\n\n  const shouldTransitionFilter =\n    hiddenFilter != null &&\n    visibleFilter != null &&\n    hiddenFilter !== visibleFilter\n\n  return (\n    <AnimatePresence>\n      <motion.div\n        ref={ref}\n        initial=\"hidden\"\n        animate={isInView ? \"visible\" : \"hidden\"}\n        exit=\"hidden\"\n        variants={combinedVariants}\n        transition={{\n          delay: 0.04 + delay,\n          duration,\n          ease: \"easeOut\",\n          ...(shouldTransitionFilter ? { filter: { duration } } : {}),\n        }}\n        className={className}\n        {...props}\n      >\n        {children}\n      </motion.div>\n    </AnimatePresence>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useRef } from \"react\"\nimport {\n  AnimatePresence,\n  motion,\n  useInView,\n  type MotionProps,\n  type UseInViewOptions,\n  type Variants,\n} from \"motion/react\"\n\ntype MarginType = UseInViewOptions[\"margin\"]\n\ninterface BlurFadeProps extends MotionProps {\n  children: React.ReactNode\n  className?: string\n  variant?: {\n    hidden: { y: number }\n    visible: { y: number }\n  }\n  duration?: number\n  delay?: number\n  offset?: number\n  direction?: \"up\" | \"down\" | \"left\" | \"right\"\n  inView?: boolean\n  inViewMargin?: MarginType\n  blur?: string\n}\n\nconst getFilter = (v: Variants[string]) =>\n  typeof v === \"function\" ? undefined : v.filter\n\nexport function BlurFade({\n  children,\n  className,\n  variant,\n  duration = 0.4,\n  delay = 0,\n  offset = 6,\n  direction = \"down\",\n  inView = false,\n  inViewMargin = \"-50px\",\n  blur = \"6px\",\n  ...props\n}: BlurFadeProps) {\n  const ref = useRef(null)\n  const inViewResult = useInView(ref, { once: true, margin: inViewMargin })\n  const isInView = !inView || inViewResult\n  const defaultVariants: Variants = {\n    hidden: {\n      [direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]:\n        direction === \"right\" || direction === \"down\" ? -offset : offset,\n      opacity: 0,\n      filter: `blur(${blur})`,\n    },\n    visible: {\n      [direction === \"left\" || direction === \"right\" ? \"x\" : \"y\"]: 0,\n      opacity: 1,\n      filter: `blur(0px)`,\n    },\n  }\n  const combinedVariants = variant ?? defaultVariants\n\n  const hiddenFilter = getFilter(combinedVariants.hidden)\n  const visibleFilter = getFilter(combinedVariants.visible)\n\n  const shouldTransitionFilter =\n    hiddenFilter != null &&\n    visibleFilter != null &&\n    hiddenFilter !== visibleFilter\n\n  return (\n    <AnimatePresence>\n      <motion.div\n        ref={ref}\n        initial=\"hidden\"\n        animate={isInView ? \"visible\" : \"hidden\"}\n        exit=\"hidden\"\n        variants={combinedVariants}\n        transition={{\n          delay: 0.04 + delay,\n          duration,\n          ease: \"easeOut\",\n          ...(shouldTransitionFilter ? { filter: { duration } } : {}),\n        }}\n        className={className}\n        {...props}\n      >\n        {children}\n      </motion.div>\n    </AnimatePresence>\n  )\n}\n",
       "type": "registry:ui"
     }
   ]

apps/www/public/r/client-tweet-card.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/magicui/client-tweet-card.tsx",
-      "content": "\"use client\"\n\nimport { TweetProps, useTweet } from \"react-tweet\"\n\nimport {\n  MagicTweet,\n  TweetNotFound,\n  TweetSkeleton,\n} from \"@/registry/magicui/tweet-card\"\n\nexport const ClientTweetCard = ({\n  id,\n  apiUrl,\n  fallback = <TweetSkeleton />,\n  components,\n  fetchOptions,\n  onError,\n  ...props\n}: TweetProps & { className?: string }) => {\n  const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)\n\n  if (isLoading) return fallback\n  if (error || !data) {\n    const NotFound = components?.TweetNotFound || TweetNotFound\n    return <NotFound error={onError ? onError(error) : error} />\n  }\n\n  return <MagicTweet tweet={data} {...props} />\n}\n",
+      "content": "\"use client\"\n\nimport { TweetProps, useTweet } from \"react-tweet\"\n\nimport {\n  MagicTweet,\n  TweetNotFound,\n  TweetSkeleton,\n} from \"@/registry/magicui/tweet-card\"\n\nexport const ClientTweetCard = ({\n  id,\n  apiUrl,\n  fallback = <TweetSkeleton />,\n  components,\n  fetchOptions,\n  onError,\n  ...props\n}: TweetProps & { className?: string }) => {\n  const { data, error, isLoading } = useTweet(id, apiUrl, fetchOptions)\n\n  if (isLoading) return fallback\n  if (error || !data) {\n    const NotFound = components?.TweetNotFound ?? TweetNotFound\n    return <NotFound error={onError ? onError(error) : error} />\n  }\n\n  return <MagicTweet tweet={data} {...props} />\n}\n",
       "type": "registry:ui"
     }
   ]