mirror
/
front-end-interview-handbook
mirror of https://github.com/yangshun/front-end-interview-handbook.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[web] ui: upgrade framer motion to motion (#1422)

This commit is contained in:
Nitesh Seram 2025-04-24 10:13:42 +05:30 committed by GitHub
parent e410dcc00b
commit 3b4f287793
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
25 changed files with 78 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web/package.json
View File

@ -97,7 +97,6 @@
"cors": "^2.8.5",
"date-fns": "^4.1.0",
"esbuild": "^0.17.8",
"framer-motion": "^9.0.4",
"fuse.js": "^7.1.0",
"gray-matter": "^4.0.3",
"jose": "^5.2.0",
@ -110,6 +109,7 @@
"mitt": "^3.0.0",
"monaco-editor": "^0.40.0",
"monaco-themes": "^0.4.3",
"motion": "^12.8.0",
"negotiator": "^1.0.0",
"next": "14.2.15",
"next-contentlayer": "^0.3.4",

2
apps/web/src/app/[locale]/(interviews)/(marketing)/InterviewsMarketingHomePageBottomContainer.tsx
View File

@ -1,7 +1,7 @@
'use client';
import type { InterviewsStudyList } from 'contentlayer/generated';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import dynamic from 'next/dynamic';
import { useRef } from 'react';

2
apps/web/src/app/[locale]/projects/(marketing)/ProjectsMarketingHomePage.tsx
View File

@ -1,6 +1,6 @@
'use client';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import dynamic from 'next/dynamic';
import { useRef } from 'react';

2
apps/web/src/components/auth/AuthTestimonialSlider.tsx
View File

@ -1,6 +1,6 @@
import clsx from 'clsx';
import { AnimatePresence, motion } from 'framer-motion';
import { shuffle } from 'lodash-es';
import { AnimatePresence, motion } from 'motion/react';
import { useEffect, useRef, useState } from 'react';
import { InterviewsMarketingTestimonialsDict } from '~/components/interviews/marketing/testimonials/InterviewsMarketingTestimonials';

2
apps/web/src/components/common/TypingString.tsx
View File

@ -1,4 +1,4 @@
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import { useEffect, useRef } from 'react';
import useTypingString from '~/hooks/useTypingString';

5
apps/web/src/components/interviews/common/InterviewsTestimonialsSlider.tsx
View File

@ -1,7 +1,8 @@
'use client';
import clsx from 'clsx';
import { AnimatePresence, motion, wrap } from 'framer-motion';
import type { PanInfo } from 'motion/react';
import { AnimatePresence, motion, wrap } from 'motion/react';
import { useEffect, useRef, useState } from 'react';
import type { InterviewsMarketingTestimonial } from '~/components/interviews/marketing/testimonials/InterviewsMarketingTestimonialCard';
@ -280,7 +281,7 @@ export default function InterviewsTestimonialsSlider({ data }: Props) {
x: { damping: 30, stiffness: 300, type: 'spring' },
}}
variants={carouselMotionVariants}
onDragEnd={(_, { offset, velocity }) => {
onDragEnd={(_: MouseEvent, { offset, velocity }: PanInfo) => {
const swipe = swipePower(offset.x, velocity.x);
// Stop auto-advancing if user interacts by swiping.

2
apps/web/src/components/interviews/marketing/InterviewsMarketingContinuousUpdates.tsx
View File

@ -1,5 +1,5 @@
import clsx from 'clsx';
import { motion, useInView, useMotionValue } from 'framer-motion';
import { motion, useInView, useMotionValue } from 'motion/react';
import { useId, useRef, useState } from 'react';
import LogoMark from '~/components/global/logos/LogoMark';

2
apps/web/src/components/interviews/marketing/InterviewsMarketingHero.tsx
View File

@ -1,7 +1,7 @@
'use client';
import clsx from 'clsx';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import { useRef } from 'react';
import { RiArrowRightLine } from 'react-icons/ri';

2
apps/web/src/components/interviews/marketing/InterviewsMarketingSolutionsByExInterviewersSection.tsx
View File

@ -1,5 +1,5 @@
import clsx from 'clsx';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import type { ReactNode } from 'react';
import { useEffect, useRef, useState } from 'react';
import { RiAmazonFill, RiMetaFill } from 'react-icons/ri';

2
apps/web/src/components/interviews/marketing/InterviewsMarketingTestCodeSection.tsx
View File

@ -1,5 +1,5 @@
import clsx from 'clsx';
import { motion, useAnimation, useInView } from 'framer-motion';
import { motion, useAnimation, useInView } from 'motion/react';
import type { RefObject } from 'react';
import { useEffect, useRef, useState } from 'react';
import { RiCheckboxCircleLine, RiCursorLine, RiPlayLine } from 'react-icons/ri';

2
apps/web/src/components/interviews/marketing/embed/InterviewsMarketingEmbedSection.tsx
View File

@ -7,7 +7,7 @@ import {
useInView,
useScroll,
useTransform,
} from 'framer-motion';
} from 'motion/react';
import dynamic from 'next/dynamic';
import { useRef, useState } from 'react';
import { useMediaQuery } from 'usehooks-ts';

2
apps/web/src/components/marketing/affiliates/MarketingAffiliateHero.tsx
View File

@ -1,5 +1,5 @@
import clsx from 'clsx';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import { useRef } from 'react';
import { RiArrowRightLine } from 'react-icons/ri';

2
apps/web/src/components/marketing/affiliates/MarketingAffiliateHowDoesItWork.tsx
View File

@ -1,5 +1,5 @@
import clsx from 'clsx';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import { useRef } from 'react';
import { FormattedMessage } from '~/components/intl';

2
apps/web/src/components/marketing/affiliates/MarketingAffiliateWhyJoinUs.tsx
View File

@ -1,5 +1,5 @@
import clsx from 'clsx';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import { useRef } from 'react';
import { FormattedMessage } from '~/components/intl';

2
apps/web/src/components/marketing/contact/MarketingCommunitySection.tsx
View File

@ -1,7 +1,7 @@
'use client';
import clsx from 'clsx';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { RiArrowRightSLine } from 'react-icons/ri';

5
apps/web/src/components/projects/challenges/brief/ProjectsChallengeBriefImageCarousel.tsx
View File

@ -1,5 +1,6 @@
import clsx from 'clsx';
import { AnimatePresence, motion, wrap } from 'framer-motion';
import type { PanInfo } from 'motion/react';
import { AnimatePresence, motion, wrap } from 'motion/react';
import React, { useState } from 'react';
import { RiArrowLeftSLine, RiArrowRightSLine } from 'react-icons/ri';
@ -116,7 +117,7 @@ export default function ProjectsChallengeBriefImageCarousel({ images }: Props) {
x: { damping: 30, stiffness: 300, type: 'spring' },
}}
variants={variants}
onDragEnd={(_, { offset, velocity }) => {
onDragEnd={(_: MouseEvent, { offset, velocity }: PanInfo) => {
const swipe = swipePower(offset.x, velocity.x);
if (swipe < -swipeConfidenceThreshold) {

2
apps/web/src/components/projects/challenges/header/ProjectsChallengeHeaderLayout.tsx
View File

@ -1,6 +1,6 @@
'use client';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import { useRef } from 'react';
import ProjectsChallengeHeader from './ProjectsChallengeHeader';

2
apps/web/src/components/projects/notifications/ProjectsNotificationContent.tsx
View File

@ -1,6 +1,6 @@
import clsx from 'clsx';
import { useInView } from 'framer-motion';
import { debounce } from 'lodash-es';
import { useInView } from 'motion/react';
import { useEffect, useRef, useState } from 'react';
import { RiNotification3Line } from 'react-icons/ri';

2
apps/web/src/components/projects/submissions/ProjectsChallengeSubmissionLockedPage.tsx
View File

@ -1,7 +1,7 @@
'use client';
import clsx from 'clsx';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import { useRef } from 'react';
import type { ProjectsChallengeItem } from '~/components/projects/challenges/types';

2
apps/web/src/components/projects/submissions/ProjectsChallengeSubmissionPage.tsx
View File

@ -1,7 +1,7 @@
'use client';
import clsx from 'clsx';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import { useEffect, useMemo, useRef } from 'react';
import { RiShareCircleLine } from 'react-icons/ri';

2
apps/web/src/components/projects/submissions/hero/ProjectsChallengeSubmissionHero.tsx
View File

@ -1,5 +1,5 @@
import clsx from 'clsx';
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import { useRef } from 'react';
import { RiArrowLeftLine, RiMessage2Fill, RiPencilLine } from 'react-icons/ri';
import { useMediaQuery } from 'usehooks-ts';

2
apps/web/src/components/sponsors/ads/useSponsorsAdImpressionLogging.ts
View File

@ -1,4 +1,4 @@
import { useInView } from 'framer-motion';
import { useInView } from 'motion/react';
import { usePathname } from 'next/navigation';
import { useEffect, useRef } from 'react';

2
apps/web/src/components/ui/AnimatedBeam/AnimatedBeam.tsx
View File

@ -1,7 +1,7 @@
'use client';
import clsx from 'clsx';
import { motion } from 'framer-motion';
import { motion } from 'motion/react';
import type { RefObject } from 'react';
import { useEffect, useId, useState } from 'react';

2
apps/web/src/components/ui/Marquee/Marquee.tsx
View File

@ -1,5 +1,5 @@
import clsx from 'clsx';
import { useInView, useReducedMotion } from 'framer-motion';
import { useInView, useReducedMotion } from 'motion/react';
import { useEffect, useRef, useState } from 'react';
type Direction = 'leftToRight' | 'rightToLeft';

62
pnpm-lock.yaml
View File

@ -436,9 +436,6 @@ importers:
esbuild:
specifier: ^0.17.8
version: 0.17.19
framer-motion:
specifier: ^9.0.4
version: 9.1.7(react-dom@18.2.0)(react@18.2.0)
fuse.js:
specifier: ^7.1.0
version: 7.1.0
@ -475,6 +472,9 @@ importers:
monaco-themes:
specifier: ^0.4.3
version: 0.4.4
motion:
specifier: ^12.8.0
version: 12.8.0(react-dom@18.2.0)(react@18.2.0)
negotiator:
specifier: ^1.0.0
version: 1.0.0
@ -11335,7 +11335,7 @@ packages:
eslint-import-resolver-webpack:
optional: true
dependencies:
'@typescript-eslint/parser': 5.62.0(eslint@8.34.0)(typescript@5.3.3)
'@typescript-eslint/parser': 5.62.0(eslint@8.34.0)(typescript@5.7.2)
debug: 3.2.7
eslint: 8.34.0
eslint-import-resolver-node: 0.3.9
@ -11376,7 +11376,7 @@ packages:
'@typescript-eslint/parser':
optional: true
dependencies:
'@typescript-eslint/parser': 5.62.0(eslint@8.34.0)(typescript@5.3.3)
'@typescript-eslint/parser': 5.62.0(eslint@8.34.0)(typescript@5.7.2)
array-includes: 3.1.7
array.prototype.findlastindex: 1.2.3
array.prototype.flat: 1.3.2
@ -12076,17 +12076,25 @@ packages:
resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
dev: true
/framer-motion@9.1.7(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-nKxBkIO4IPkMEqcBbbATxsVjwPYShKl051yhBv9628iAH6JLeHD0siBHxkL62oQzMC1+GNX73XtPjgP753ufuw==}
/framer-motion@12.8.0(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-EarL75miCDcKLEAQLJ+6Zfwdj+KQsVlbHGGlygZ/TigKBj7NLPkyDKk4WLFUScjAs2xNpfMRLBM6VsCJq9Roxg==}
peerDependencies:
react: ^18.0.0
react-dom: ^18.0.0
'@emotion/is-prop-valid': '*'
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/is-prop-valid':
optional: true
react:
optional: true
react-dom:
optional: true
dependencies:
motion-dom: 12.8.0
motion-utils: 12.7.5
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
tslib: 2.6.2
optionalDependencies:
'@emotion/is-prop-valid': 0.8.8
tslib: 2.8.1
dev: false
/fs-extra@8.1.0:
@ -15237,6 +15245,36 @@ packages:
fast-plist: 0.1.3
dev: false
/motion-dom@12.8.0:
resolution: {integrity: sha512-YsfUE1F8Ycv9th1V0YJ6LOx9U2EMe/8P3RXK1o6NZhRbdFiWvzBLvxqp2X6Fn3rbJbwWkSEfnpe14ZU9Oz1d1Q==}
dependencies:
motion-utils: 12.7.5
dev: false
/motion-utils@12.7.5:
resolution: {integrity: sha512-JIgrmEq7Vw1x0AUrjvkRp7oMMQkGqSUMT50O/Ag6RRCQWG3gRRTkOI+BirBAJT6m+GIPoiyxkJ1u98GgF/a6TQ==}
dev: false
/motion@12.8.0(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-j03/FAIjwlFSTcr3VIrLFhRTdDyfyyyvJz5s0Ctli3vuv/72+YKEOV2OIC/9QbjDqWU3ChngWlLnFezakCQ3Vg==}
peerDependencies:
'@emotion/is-prop-valid': '*'
react: ^18.0.0 || ^19.0.0
react-dom: ^18.0.0 || ^19.0.0
peerDependenciesMeta:
'@emotion/is-prop-valid':
optional: true
react:
optional: true
react-dom:
optional: true
dependencies:
framer-motion: 12.8.0(react-dom@18.2.0)(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
tslib: 2.8.1
dev: false
/mri@1.2.0:
resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
engines: {node: '>=4'}