feat: Implement the default page transition

components/common/AppWrapper.tsx

@@ -5,11 +5,12 @@ import Footer from 'components/common/StandardFooter';
 import LogoYearn from 'components/icons/LogoYearn';
 import Header from '@yearn-finance/web-lib/layouts/Header.next';
 
-import type {AppProps} from 'next/app';
-import type {ReactElement} from 'react';
+import type {AppLayoutProps, AppProps} from 'next/app';
+import type {ReactElement, ReactNode} from 'react';
 
-function	WithLayout(props: AppProps): ReactElement {
+function	WithLayout(props: AppLayoutProps): ReactElement {
 	const	{Component, pageProps, router} = props;
+	const	getLayout = Component.getLayout || ((page: ReactNode): ReactNode => page);
 
 	return (
 		<div id={'app'} className={'mx-auto mb-0 flex max-w-6xl font-aeonik'}>
@@ -24,10 +25,10 @@ function	WithLayout(props: AppProps): ReactElement {
 						{path: '/bar', label: 'Bar'}
 					]}
 					logo={<LogoYearn className={'h-8 w-8'} />}/>
-				<Component
+				{getLayout(<Component
 					key={router.route}
 					router={props.router}
-					{...pageProps} />
+					{...pageProps} />, router)}
 				<Footer />
 			</div>
 		</div>

components/common/Wrapper.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import {AnimatePresence, motion} from 'framer-motion';
+
+import type {NextRouter} from 'next/router';
+import type {ReactElement} from 'react';
+
+const transition = {duration: 0.3, ease: 'easeInOut'};
+
+const variants = {
+	initial: {y: -80, opacity: 0, transition},
+	enter: {y: 0, opacity: 1, transition},
+	exit: {y: -80, opacity: 0, transition}
+};
+
+export default function Wrapper({children, router}: {children: ReactElement, router: NextRouter}): ReactElement {
+	return (
+		<AnimatePresence mode={'wait'}>
+			<motion.div
+				key={router.asPath}
+				initial={'initial'}
+				animate={'enter'}
+				exit={'exit'}
+				className={'my-0 h-full md:mb-0 md:mt-16'}
+				variants={variants}>
+				{children}
+			</motion.div>
+		</AnimatePresence>
+	);
+}

next.d.ts

@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable unused-imports/no-unused-vars */
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import type {NextComponentType,
+	NextLayoutComponentType,
+	NextPageContext} from 'next';
+import type {AppProps} from 'next/app';
+
+declare module 'next' {
+    type NextLayoutComponentType<P = { [key: string]: never }> = NextComponentType<
+        NextPageContext,
+        unknown,
+        P
+    > & { getLayout?: (page: ReactNode) => ReactNode };
+}
+
+declare module 'next/app' {
+    type AppLayoutProps<P = { [key: string]: never }> = AppProps & {
+        Component: NextLayoutComponentType;
+    };
+}

pages/bar.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Wrapper from 'components/common/Wrapper';
+import {Banner} from '@yearn-finance/web-lib/components/Banner';
+
+import type {NextRouter} from 'next/router';
+import type {ReactElement} from 'react';
+
+function	Bar(): ReactElement {
+	return (
+		<section aria-label={'some default section'}>
+			<div className={'mb-4'}>
+				<Banner title={'Bar'}>
+					<div className={'space-y-4'}>
+						<p className={'text-primary-500'}>{'Duis dignissim id nisi id consequat. Maecenas accumsan ac magna sit amet tincidunt. Aliquam lacinia dolor sit amet eros efficitur, at tincidunt neque pharetra. Maecenas aliquet gravida tellus vitae sollicitudin. Phasellus ac massa accumsan, dapibus tortor vitae, dignissim eros. Sed sit amet ex vel sem euismod ornare et sed libero. Vestibulum suscipit nisl ac convallis consectetur. Nulla sollicitudin felis orci, et tristique sapien maximus ut. Vivamus consectetur augue nisi, luctus vulputate sem sodales a. Donec quis blandit libero. Quisque dolor nisi, congue in consequat ut, euismod eu dolor.'}</p>
+						<p className={'text-primary-500'}>{'Praesent facilisis lectus sit amet ante vulputate vulputate. Mauris pulvinar sollicitudin justo, sit amet semper lectus efficitur eu. Vestibulum congue, metus dapibus elementum ultrices, massa arcu interdum augue, nec ultrices augue nisl id mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed nec risus vitae nisi cursus euismod. Aenean et tristique turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet efficitur quam sed viverra. Aliquam cursus turpis sit amet est blandit, et rhoncus urna finibus.'}</p>
+					</div>
+				</Banner>
+			</div>
+		</section>
+	);
+}
+
+Bar.getLayout = function getLayout(page: ReactElement, router: NextRouter): ReactElement {
+	console.log('###wrapper', page, router);
+	return <Wrapper router={router}>{page}</Wrapper>;
+};
+
+export default Bar;

pages/foo.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Wrapper from 'components/common/Wrapper';
+import {Banner} from '@yearn-finance/web-lib/components/Banner';
+
+import type {NextRouter} from 'next/router';
+import type {ReactElement} from 'react';
+
+function	Foo(): ReactElement {
+	return (
+		<section aria-label={'some default section'}>
+			<div className={'mb-4'}>
+				<Banner title={'Foo'}>
+					<div className={'space-y-4'}>
+						<p className={'text-primary-500'}>{'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et fringilla turpis. Aliquam tortor lectus, facilisis in vehicula vel, tempus at massa. Mauris finibus tristique augue, ut mattis neque lobortis bibendum. Sed at lacinia nulla. Aliquam aliquet purus sed leo venenatis, at tincidunt erat viverra. Suspendisse posuere, augue nec aliquam pharetra, augue lectus iaculis augue, at fringilla lectus lectus ut augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean accumsan magna vitae metus consectetur commodo. Sed commodo viverra efficitur. Maecenas non hendrerit magna. Ut porta sollicitudin dignissim. Morbi aliquam blandit nisi. Aliquam erat volutpat.'}</p>
+						<p className={'text-primary-500'}>{'Maecenas tristique libero eu volutpat vulputate. Integer id varius lorem, vel facilisis ex. Etiam aliquet, justo vel iaculis ullamcorper, quam libero interdum elit, ac scelerisque velit turpis vel enim. Nam id sapien malesuada, vulputate mi eu, condimentum turpis. Donec tempus erat erat, in cursus ex ultricies luctus. Integer urna nisl, semper rutrum erat eleifend, consectetur dignissim augue. Etiam ornare non nibh in elementum. Curabitur venenatis dui eleifend auctor ultrices.'}</p>
+					</div>
+				</Banner>
+			</div>
+		</section>
+	);
+}
+
+Foo.getLayout = function getLayout(page: ReactElement, router: NextRouter): ReactElement {
+	console.log('###wrapper', page, router);
+	return <Wrapper router={router}>{page}</Wrapper>;
+};
+
+export default Foo;

pages/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
+import Wrapper from 'components/common/Wrapper';
 import {Banner} from '@yearn-finance/web-lib/components/Banner';
 import {Card} from '@yearn-finance/web-lib/components/Card';
 import {DescriptionList} from '@yearn-finance/web-lib/components/DescriptionList';
 
+import type {NextRouter} from 'next/router';
 import type {ReactElement} from 'react';
 
 function	Content(): ReactElement {
@@ -52,4 +54,8 @@ function	Index(): ReactElement {
 	);
 }
 
+Index.getLayout = function getLayout(page: ReactElement, router: NextRouter): ReactElement {
+	return <Wrapper router={router}>{page}</Wrapper>;
+};
+
 export default Index;