chore: upgrade to motion

Signed-off-by: Innei <tukon479@gmail.com>

package.json

@@ -68,7 +68,6 @@
     "emoji-mart": "5.6.0",
     "emoji-picker-react": "4.12.0",
     "foxact": "0.2.40",
-    "framer-motion": "11.11.1",
     "fuse.js": "7.0.0",
     "idb-keyval": "6.2.1",
     "immer": "^10.1.1",
@@ -85,6 +84,7 @@
     "marked": "14.1.3",
     "medium-zoom": "1.1.0",
     "mermaid": "11.4.0",
+    "motion": "11.11.14",
     "nanoid": "^5.0.7",
     "next": "14.2.8",
     "next-auth": "4.24.7",
@@ -210,4 +210,4 @@
   "browserslist": [
     "defaults and fully supports es6-module"
   ]
-}
+}

src/app/(app)/(home)/components/ActivityPostList.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { m } from 'framer-motion'
+import { m } from 'motion/react'
 import Link from 'next/link'
-import React from 'react'
+import * as React from 'react'
 
 import { Divider } from '~/components/ui/divider'
 import { RelativeTime } from '~/components/ui/relative-time'

src/app/(app)/(home)/components/ActivityRecent.tsx

@@ -2,7 +2,7 @@
 
 import { useQuery } from '@tanstack/react-query'
 import clsx from 'clsx'
-import { m } from 'framer-motion'
+import { m } from 'motion/react'
 import { useMemo } from 'react'
 
 import { ScrollArea } from '~/components/ui/scroll-area'

src/app/(app)/(home)/page.tsx

@@ -2,9 +2,9 @@
 
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import clsx from 'clsx'
-import { m } from 'framer-motion'
+import { m } from 'motion/react'
 import Image from 'next/image'
-import type React from 'react'
+import type * as React from 'react'
 import { createElement } from 'react'
 
 import { ErrorBoundary } from '~/components/common/ErrorBoundary'

src/app/(app)/friends/page.tsx

@@ -3,8 +3,8 @@
 import type { LinkModel } from '@mx-space/api-client'
 import { LinkState, LinkType, RequestError } from '@mx-space/api-client'
 import { useQuery } from '@tanstack/react-query'
-import { m } from 'framer-motion'
 import Markdown from 'markdown-to-jsx'
+import { m } from 'motion/react'
 import type { FC } from 'react'
 import { memo, useCallback, useRef, useState } from 'react'
 

src/app/(app)/thinking/page.tsx

@@ -12,8 +12,8 @@ import {
   useQueryClient,
 } from '@tanstack/react-query'
 import clsx from 'clsx'
-import { stagger, useAnimate } from 'framer-motion'
 import { produce } from 'immer'
+import { stagger, useAnimate } from 'motion/react'
 import type { FC } from 'react'
 import { useEffect, useMemo, useState } from 'react'
 

src/app/(app)/timeline/page.tsx

@@ -4,7 +4,7 @@ import type { TimelineData } from '@mx-space/api-client'
 import { TimelineType } from '@mx-space/api-client'
 import { useQuery } from '@tanstack/react-query'
 import clsx from 'clsx'
-import { m } from 'framer-motion'
+import { m } from 'motion/react'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { memo, useEffect } from 'react'
 
@@ -197,7 +197,7 @@ export default function TimelinePage() {
               <m.h4
                 className={clsx(
                   'relative mb-4 ml-3 text-lg font-medium',
-                  'rounded-md before:absolute before:inset-y-[4px] before:-left-3 before:w-[2px] before:bg-accent before:content-auto',
+                  'rounded-md before:content-auto before:absolute before:inset-y-[4px] before:-left-3 before:w-[2px] before:bg-accent',
                 )}
               >
                 {year}

src/app/global-error.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { domAnimation, LazyMotion } from 'framer-motion'
+import { domAnimation, LazyMotion } from 'motion/react'
 import { useEffect } from 'react'
 
 // import { captureException } from '@sentry/nextjs'

src/components/layout/dashboard/Header.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { m } from 'framer-motion'
 import { atom, useAtom, useSetAtom } from 'jotai'
+import { m } from 'motion/react'
 import Image from 'next/image'
 import NextLink from 'next/link'
 import { usePathname, useRouter } from 'next/navigation'

src/components/layout/header/internal/Activity.tsx

@@ -2,8 +2,9 @@
 
 import { useQuery } from '@tanstack/react-query'
 import clsx from 'clsx'
-import { AnimatePresence, m } from 'framer-motion'
-import React, {
+import { AnimatePresence, m } from 'motion/react'
+import * as React from 'react'
+import {
   createContext,
   memo,
   useContext,

src/components/layout/header/internal/AnimatedLogo.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
-import { AnimatePresence, m } from 'framer-motion'
+import { AnimatePresence, m } from 'motion/react'
 import { useRouter } from 'next/navigation'
 import { useCallback } from 'react'
 

src/components/layout/header/internal/HeaderContent.tsx

@@ -7,10 +7,11 @@ import {
   m,
   useMotionTemplate,
   useMotionValue,
-} from 'framer-motion'
+} from 'motion/react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
-import React, { memo } from 'react'
+import * as React from 'react'
+import { memo } from 'react'
 
 import { RootPortal } from '~/components/ui/portal'
 import useDebounceValue from '~/hooks/common/use-debounce-value'

src/components/layout/header/internal/HeaderDrawerContent.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { m } from 'framer-motion'
+import { m } from 'motion/react'
 import Link from 'next/link'
 import { memo } from 'react'
 

src/components/layout/header/internal/HeaderMeta.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { AnimatePresence, m } from 'framer-motion'
+import { AnimatePresence, m } from 'motion/react'
 
 import { microReboundPreset } from '~/constants/spring'
 import { useAggregationSelector } from '~/providers/root/aggregation-data-provider'

src/components/layout/header/internal/UserAuth.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { AnimatePresence } from 'framer-motion'
+import { AnimatePresence } from 'motion/react'
 import Image from 'next/image'
 import { Fragment } from 'react'
 

src/components/modules/comment/Comment.tsx

@@ -1,7 +1,7 @@
 import type { CommentModel } from '@mx-space/api-client'
 import clsx from 'clsx'
-import { m } from 'framer-motion'
 import { atom, useAtomValue } from 'jotai'
+import { m } from 'motion/react'
 import type { BuiltInProviderType } from 'next-auth/providers/index'
 import type { PropsWithChildren } from 'react'
 import {

src/components/modules/comment/CommentBox/ActionBar.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import clsx from 'clsx'
-import { AnimatePresence, m } from 'framer-motion'
 import { useAtomValue } from 'jotai'
+import { AnimatePresence, m } from 'motion/react'
 
 import { useIsLogged } from '~/atoms/hooks'
 import { TiltedSendIcon } from '~/components/icons/TiltedSendIcon'

src/components/modules/note/NoteActionAside.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { m, useAnimationControls } from 'framer-motion'
+import { m, useAnimationControls } from 'motion/react'
 
 import { useIsMobile } from '~/atoms/hooks'
 import { MotionButtonBase } from '~/components/ui/button'

src/components/modules/note/NoteLeftSidebar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { m } from 'framer-motion'
+import { m } from 'motion/react'
 
 import { OnlyDesktop } from '~/components/ui/viewport'
 

src/components/modules/note/NoteTimeline.tsx

@@ -1,8 +1,8 @@
 'use client'
 
 import { keepPreviousData, useQuery } from '@tanstack/react-query'
-import type { TargetAndTransition } from 'framer-motion'
-import { AnimatePresence, m } from 'framer-motion'
+import type { TargetAndTransition } from 'motion/react'
+import { AnimatePresence, m } from 'motion/react'
 import { memo } from 'react'
 
 import { apiClient } from '~/lib/request'

src/components/modules/note/NoteTimelineItem.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import type { Target, TargetAndTransition } from 'framer-motion'
-import { m } from 'framer-motion'
+import type { Target, TargetAndTransition } from 'motion/react'
+import { m } from 'motion/react'
 import Link from 'next/link'
 import { memo } from 'react'
 import { tv } from 'tailwind-variants'

src/components/modules/peek/PeekModal.tsx

@@ -1,4 +1,4 @@
-import { m } from 'framer-motion'
+import { m } from 'motion/react'
 import Link from 'next/link'
 import type { PropsWithChildren } from 'react'
 

src/components/modules/post/PostActionAside.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { m, useAnimationControls } from 'framer-motion'
+import { m, useAnimationControls } from 'motion/react'
 
 import { useIsMobile } from '~/atoms/hooks'
 import { ThumbsupIcon } from '~/components/icons/thumbs-up'

src/components/modules/post/PostItemHoverOverlay.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import clsx from 'clsx'
-import { AnimatePresence, m } from 'framer-motion'
+import { AnimatePresence, m } from 'motion/react'
 import { useEffect, useRef, useState } from 'react'
 
 export const PostItemHoverOverlay = () => {

src/components/modules/say/SayMasonry.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import type { SayModel } from '@mx-space/api-client'
-import { m } from 'framer-motion'
 import type { MarkdownToJSX } from 'markdown-to-jsx'
 import Markdown from 'markdown-to-jsx'
+import { m } from 'motion/react'
 import { memo, useMemo } from 'react'
 import Masonry from 'react-responsive-masonry'
 

src/components/modules/shared/AsideDonateButton.tsx

@@ -1,7 +1,7 @@
 import { DialogContent, DialogPortal, Root } from '@radix-ui/react-dialog'
-import type { HTMLMotionProps } from 'framer-motion'
-import { AnimatePresence, m } from 'framer-motion'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
+import type { HTMLMotionProps } from 'motion/react'
+import { AnimatePresence, m } from 'motion/react'
 import { useState } from 'react'
 
 import { useIsMobile } from '~/atoms/hooks'
@@ -43,7 +43,7 @@ export const AsideDonateButton = () => {
               {overlayOpen && (
                 <>
                   <DialogOverlay />
-                  <DialogContent className="fixed inset-0 z-[11] flex flex-col center">
+                  <DialogContent className="center fixed inset-0 z-[11] flex flex-col">
                     <DonateContent />
 
                     <DonateButtonTop />
@@ -154,7 +154,7 @@ const DonateContent = () => {
       <m.h2 exit={{ opacity: 0 }} className="mb-6 text-lg font-medium">
         感谢您的支持，助力梦想继续前行。
       </m.h2>
-      <div className="flex flex-wrap gap-4 overflow-auto center">
+      <div className="center flex flex-wrap gap-4 overflow-auto">
         {donate?.qrcode?.map((src) => (
           <m.img
             exit={{ opacity: 0 }}

src/components/modules/shared/AutoResizeHeight.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { m } from 'framer-motion'
-import type React from 'react'
+import { m } from 'motion/react'
+import type * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 
 import { softSpringPreset } from '~/constants/spring'

src/components/modules/shared/BanCopyWrapper.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { DialogContent, DialogPortal, Root } from '@radix-ui/react-dialog'
-import { AnimatePresence, m } from 'framer-motion'
+import { AnimatePresence, m } from 'motion/react'
 import type { FC, PropsWithChildren } from 'react'
 import { createContext, useContext, useEffect, useRef, useState } from 'react'
 
@@ -55,7 +55,7 @@ export const BanCopyWrapper: FC<PropsWithChildren> = (props) => {
               <DialogOverlay />
               <DialogContent asChild>
                 <m.div
-                  className="fixed inset-0 z-[11] flex flex-col gap-4 center"
+                  className="center fixed inset-0 z-[11] flex flex-col gap-4"
                   exit={{
                     opacity: 0,
                   }}