chore: update website configuration and example pages

dohooo · Feb 9, 2025 · 459c013 · 459c013
1 parent e6b17fc
commit 459c013
Show file tree

Hide file tree

Showing 21 changed files with 151 additions and 130 deletions.
diff --git a/example/website/next-env.d.ts b/example/website/next-env.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/example/website/pages/Examples/basic-layouts/left-align.mdx b/example/website/pages/Examples/basic-layouts/left-align.mdx
@@ -45,10 +45,10 @@ import Demo from '@/components/Demo'
 <Demo kind="basic-layouts" name="left-align" />
 
 ```tsx copy
+import { renderItem } from "@/utils/render-item";
 import * as React from "react";
 import { View } from "react-native";
 import Carousel from "react-native-reanimated-carousel";
-import { renderItem } from "@/utils/render-item";
 
 const defaultDataWith6Colors = [
 	"#B0604D",

diff --git a/example/website/pages/Examples/basic-layouts/normal.mdx b/example/website/pages/Examples/basic-layouts/normal.mdx
@@ -45,11 +45,11 @@ import Demo from '@/components/Demo'
 <Demo kind="basic-layouts" name="normal" />
 
 ```tsx copy
+import { renderItem } from "@/utils/render-item";
 import * as React from "react";
 import { View } from "react-native";
-import Carousel from "react-native-reanimated-carousel";
-import { renderItem } from "@/utils/render-item";
 import { useSharedValue } from "react-native-reanimated";
+import Carousel from "react-native-reanimated-carousel";
 
 const defaultDataWith6Colors = [
 	"#B0604D",

diff --git a/example/website/pages/Examples/basic-layouts/parallax.mdx b/example/website/pages/Examples/basic-layouts/parallax.mdx
@@ -45,11 +45,12 @@ import Demo from '@/components/Demo'
 <Demo kind="basic-layouts" name="parallax" />
 
 ```tsx copy
+import { window } from "@/constants/sizes";
+import { renderItem } from "@/utils/render-item";
 import * as React from "react";
 import { View } from "react-native";
-import Carousel from "react-native-reanimated-carousel";
-import { renderItem } from "@/utils/render-item";
 import { useSharedValue } from "react-native-reanimated";
+import Carousel from "react-native-reanimated-carousel";
 
 const defaultDataWith6Colors = [
 	"#B0604D",
@@ -75,9 +76,9 @@ function Index() {
 				loop={true}
 				pagingEnabled={true}
 				snapEnabled={true}
-				width={430}
+				width={window.width}
 				style={{
-					width: 430,
+					width: window.width,
 				}}
 				mode="parallax"
 				modeConfig={{

diff --git a/example/website/pages/Examples/basic-layouts/stack.mdx b/example/website/pages/Examples/basic-layouts/stack.mdx
@@ -45,11 +45,11 @@ import Demo from '@/components/Demo'
 <Demo kind="basic-layouts" name="stack" />
 
 ```tsx copy
+import { renderItem } from "@/utils/render-item";
 import * as React from "react";
 import { View } from "react-native";
 import type { ICarouselInstance } from "react-native-reanimated-carousel";
 import Carousel from "react-native-reanimated-carousel";
-import { renderItem } from "@/utils/render-item";
 
 const defaultDataWith6Colors = [
 	"#B0604D",

diff --git a/example/website/pages/Examples/custom-animations/anim-tab-bar.mdx b/example/website/pages/Examples/custom-animations/anim-tab-bar.mdx
@@ -45,8 +45,10 @@ import Demo from '@/components/Demo'
 <Demo kind="custom-animations" name="anim-tab-bar" />
 
 ```tsx copy
+import { ElementsText, window } from "@/constants/sizes";
+import { useToggleButton } from "@/hooks/useToggleButton";
 import * as React from "react";
-import { View, Pressable } from "react-native";
+import { Pressable, View } from "react-native";
 import Animated, {
 	Extrapolation,
 	interpolate,
@@ -57,8 +59,6 @@ import Animated, {
 } from "react-native-reanimated";
 import type { ICarouselInstance } from "react-native-reanimated-carousel";
 import Carousel from "react-native-reanimated-carousel";
-import { ElementsText, window } from "@/constants/sizes";
-import { useToggleButton } from "@/hooks/useToggleButton";
 
 const PAGE_WIDTH = 60;
 const PAGE_HEIGHT = 40;

diff --git a/example/website/pages/Examples/custom-animations/blur-parallax.mdx b/example/website/pages/Examples/custom-animations/blur-parallax.mdx
@@ -59,10 +59,10 @@ import { BlurView as _BlurView } from "expo-blur";
 import { parallaxLayout } from "./parallax";
 
 import SButton from "@/components/SButton";
-import { ElementsText, window } from "@/constants/sizes";
-import { fruitItems } from "@/utils/items";
 import { SlideItem } from "@/components/SlideItem";
+import { ElementsText, window } from "@/constants/sizes";
 import { CaptureWrapper } from "@/store/CaptureProvider";
+import { fruitItems } from "@/utils/items";
 
 const BlurView = Animated.createAnimatedComponent(_BlurView);
 

diff --git a/example/website/pages/Examples/custom-animations/blur-rotate.mdx b/example/website/pages/Examples/custom-animations/blur-rotate.mdx
@@ -60,11 +60,11 @@ import { parallaxLayout } from "./parallax";
 
 import { SBItem } from "@/components/SBItem";
 import SButton from "@/components/SButton";
-import { ElementsText, HEADER_HEIGHT, window } from "@/constants/sizes";
-import { fruitItems } from "@/utils/items";
-import { PURPLE_IMAGES } from "@/constants/purple-images";
 import { SlideItem } from "@/components/SlideItem";
+import { PURPLE_IMAGES } from "@/constants/purple-images";
+import { ElementsText, HEADER_HEIGHT, window } from "@/constants/sizes";
 import { CaptureWrapper } from "@/store/CaptureProvider";
+import { fruitItems } from "@/utils/items";
 
 const BlurView = Animated.createAnimatedComponent(_BlurView);
 

diff --git a/example/website/pages/Examples/custom-animations/circular.mdx b/example/website/pages/Examples/custom-animations/circular.mdx
@@ -51,9 +51,9 @@ import { TouchableWithoutFeedback } from "react-native-gesture-handler";
 import { interpolate } from "react-native-reanimated";
 import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
+import { SlideItem } from "@/components/SlideItem";
 import { window } from "@/constants/sizes";
 import { getImages } from "@/utils/get-images";
-import { SlideItem } from "@/components/SlideItem";
 
 const PAGE_WIDTH = window.width;
 

diff --git a/example/website/pages/Examples/custom-animations/cube-3d.mdx b/example/website/pages/Examples/custom-animations/cube-3d.mdx
@@ -112,12 +112,7 @@ function CubeItem() {
 				Extrapolation.CLAMP,
 			);
 
-			const rotateY = `${interpolate(
-				value,
-				[-1, 0, 1],
-				[-90, 0, 90],
-				Extrapolation.CLAMP,
-			)}deg`;
+			const rotateY = `${interpolate(value, [-1, 0, 1], [-90, 0, 90], Extrapolation.CLAMP)}deg`;
 
 			const transform = {
 				transform: [{ scale }, { translateX }, { perspective }, { rotateY }],

diff --git a/example/website/pages/Examples/custom-animations/curve.mdx b/example/website/pages/Examples/custom-animations/curve.mdx
@@ -114,12 +114,7 @@ function Index() {
 							},
 							{ perspective: 150 },
 							{
-								rotateY: `${interpolate(
-									value,
-									[-1, 0, 1],
-									[30, 0, -30],
-									Extrapolation.CLAMP,
-								)}deg`,
+								rotateY: `${interpolate(value, [-1, 0, 1], [30, 0, -30], Extrapolation.CLAMP)}deg`,
 							},
 						],
 					};

diff --git a/example/website/pages/Examples/custom-animations/flow.mdx b/example/website/pages/Examples/custom-animations/flow.mdx
@@ -46,14 +46,14 @@ import Demo from '@/components/Demo'
 
 ```tsx copy
 import * as React from "react";
-import { Text, View, Image } from "react-native";
+import { Image, Text, View } from "react-native";
 import { interpolate } from "react-native-reanimated";
 import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
 import { faker } from "@faker-js/faker";
 
-import { window } from "@/constants/sizes";
 import { SlideItem } from "@/components/SlideItem";
+import { window } from "@/constants/sizes";
 
 function Index() {
 	const headerHeight = 100;

diff --git a/example/website/pages/Examples/custom-animations/fold.mdx b/example/website/pages/Examples/custom-animations/fold.mdx
@@ -52,8 +52,8 @@ import type Animated from "react-native-reanimated";
 import { Extrapolation, interpolate } from "react-native-reanimated";
 import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import { window } from "@/constants/sizes";
 import { SlideItem } from "@/components/SlideItem";
+import { window } from "@/constants/sizes";
 import { getImages } from "@/utils/get-images";
 
 const PAGE_WIDTH = window.width;
@@ -82,9 +82,12 @@ function Index() {
 				itemOffsetInput.map((item) => {
 					if (item < 0) {
 						return (-itemSize + sideItemWidth) * Math.abs(item);
-					} else if (item > 0) {
+					}
+
+					if (item > 0) {
 						return (itemSize - sideItemWidth) * (Math.abs(item) - 1);
 					}
+
 					return 0;
 				}) as number[],
 			);

diff --git a/example/website/pages/Examples/custom-animations/multiple.mdx b/example/website/pages/Examples/custom-animations/multiple.mdx
@@ -50,8 +50,8 @@ import { View } from "react-native";
 import Carousel from "react-native-reanimated-carousel";
 
 import { SBItem } from "@/components/SBItem";
-import { window } from "@/constants/sizes";
 import { PURPLE_IMAGES } from "@/constants/purple-images";
+import { window } from "@/constants/sizes";
 
 const PAGE_WIDTH = window.width;
 

diff --git a/example/website/pages/Examples/custom-animations/press-swipe.mdx b/example/website/pages/Examples/custom-animations/press-swipe.mdx
@@ -55,9 +55,9 @@ import Animated, {
 } from "react-native-reanimated";
 import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
-import { window } from "@/constants/sizes";
 import { SlideItem } from "@/components/SlideItem";
 import { PURPLE_IMAGES } from "@/constants/purple-images";
+import { window } from "@/constants/sizes";
 
 const PAGE_WIDTH = window.width;
 

diff --git a/example/website/pages/Examples/custom-animations/quick-swipe.mdx b/example/website/pages/Examples/custom-animations/quick-swipe.mdx
@@ -50,8 +50,11 @@ import type { ICarouselInstance } from "react-native-reanimated-carousel";
 import Carousel from "react-native-reanimated-carousel";
 
 import { SBItem } from "@/components/SBItem";
+import { IS_WEB } from "@/constants/platform";
 import { window } from "@/constants/sizes";
+import * as Haptics from "expo-haptics";
 import { Image, ImageSourcePropType, View, ViewStyle } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
 	Easing,
 	Extrapolation,
@@ -62,10 +65,7 @@ import Animated, {
 	useSharedValue,
 	withTiming,
 } from "react-native-reanimated";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import * as Haptics from "expo-haptics";
 import { getImages } from "./images";
-import { IS_WEB } from "@/constants/platform";
 
 const data = getImages().slice(0, 68);
 

diff --git a/example/website/pages/Examples/custom-animations/tinder.mdx b/example/website/pages/Examples/custom-animations/tinder.mdx
@@ -56,8 +56,8 @@ import Animated, {
 import Carousel, { TAnimationStyle } from "react-native-reanimated-carousel";
 
 import { window } from "@/constants/sizes";
-import { getImages } from "@/utils/get-images";
 import { CaptureWrapper } from "@/store/CaptureProvider";
+import { getImages } from "@/utils/get-images";
 
 const data = getImages();