docs: add example with r3f

.eslintrc.json

@@ -75,6 +75,12 @@
         "import/no-unassigned-import": "off"
       }
     },
+    {
+      "files": "stories/r3f.tsx",
+      "rules": {
+        "react/no-unknown-property": "off"
+      }
+    },
     {
       "files": "*.config.mjs",
       "rules": {

.storybook/main.js

@@ -4,7 +4,7 @@ const process = require("node:process");
 const toPath = path_ => path.join(process.cwd(), path_);
 
 module.exports = {
-	stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+	stories: ["../stories/**/*.stories.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
 	addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-docs"],
 	framework: "@storybook/react",
 	typescript: { reactDocgen: true },

package.json

@@ -96,6 +96,7 @@
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@jest/globals": "^29.2.2",
     "@mdx-js/react": "^1.6.22",
+    "@react-three/fiber": "^8.9.1",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-essentials": "^6.5.14",
     "@storybook/addon-interactions": "^6.5.14",
@@ -138,6 +139,7 @@
     "jest": "^29.2.2",
     "jest-config": "^29.2.2",
     "jest-environment-jsdom": "^29.2.2",
+    "jotai": "^1.12.0",
     "lint-staged": "^13.0.3",
     "next": "^13.1.0",
     "prettier": "^2.7.1",
@@ -146,6 +148,7 @@
     "rollup": "^3.2.5",
     "rollup-plugin-swc3": "^0.7.0",
     "swc-plugin-coverage-instrument": "^0.0.14",
+    "three": "^0.148.0",
     "tslib": "^2.4.1",
     "type-fest": "^3.1.0",
     "typescript": "^4.8.4"

src/examples.stories.tsx → stories/examples.stories.tsx

@@ -1,12 +1,17 @@
 import { css, Global } from "@emotion/react";
 import styled from "@emotion/styled";
+import { Canvas } from "@react-three/fiber";
 import { useEffect, useState } from "@storybook/addons";
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { ComponentMeta, ComponentStory } from "@storybook/react";
 import type { DetailedHTMLProps, HTMLAttributes } from "react";
 import { forwardRef, useRef } from "react";
 
-import { CLASS_NAMES, CSS_VARS } from "./constants";
-import StickyRoll from "./stickyroll";
+import type { UseStickyrollOptions } from "../src";
+import { CLASS_NAMES, CSS_VARS } from "../src";
+import StickyRoll from "../src/stickyroll";
+import useStickyroll from "../src/use-stickyroll";
+
+import { progressRef, Scene } from "./r3f";
 
 const Flex = styled("div")({
 	position: "relative",
@@ -422,3 +427,45 @@ export const Apple = AppleBase.bind({});
 Apple.args = {
 	factor: 3,
 };
+
+const R3fWrapper = styled("div")({
+	minHeight: "var(--100vh, 100vh)",
+	height: `var(${CSS_VARS.height}, var(--100vh, 100vh))`,
+});
+
+const R3fInner = styled("div")({
+	position: "sticky",
+	inset: 0,
+	height: `var(--100vh, 100vh)`,
+});
+
+function R3FBase(args: UseStickyrollOptions) {
+	const ref = useRef<HTMLDivElement>(null);
+	useStickyroll(ref, {
+		...args,
+		onProgress(progress) {
+			progressRef.current = progress;
+		},
+		pages: 1,
+	});
+
+	return (
+		<>
+			<Global styles={css({ ".sb-show-main.sb-main-padded": { padding: 0 } })} />
+			<div style={{ height: "100vh" }} />
+			<R3fWrapper ref={ref}>
+				<R3fInner>
+					<Canvas orthographic camera={{ far: 1000, near: -1000 }}>
+						<Scene />
+					</Canvas>
+				</R3fInner>
+			</R3fWrapper>
+			<div style={{ height: "100vh" }} />
+		</>
+	);
+}
+export const R3F = R3FBase.bind({});
+
+R3F.args = {
+	factor: 3,
+};

stories/r3f.tsx

@@ -0,0 +1,51 @@
+import { useFrame } from "@react-three/fiber";
+import { useRef } from "react";
+import * as THREE from "three";
+import type { Group } from "three";
+
+THREE.ColorManagement.legacyMode = false;
+
+export const progressRef = { current: 0 };
+export const geometry = new THREE.ShapeGeometry(
+	new THREE.Shape()
+		.moveTo(-0.5, -1.5)
+		.lineTo(0.5, -1.5)
+		.lineTo(0.5, 0.5)
+		.lineTo(0.5, 1.5)
+		.lineTo(-0.5, 0.5)
+		.lineTo(-0.5, -1.5)
+);
+export const material = new THREE.MeshStandardMaterial({
+	color: "#673AB7",
+	side: THREE.DoubleSide,
+	wireframe: false,
+});
+
+export function Scene() {
+	const ref = useRef<Group>(null);
+
+	useFrame(() => {
+		ref.current.rotation.x = Math.PI * 2 * progressRef.current + Math.PI * 0.804;
+		ref.current.rotation.y = Math.PI * 2 * progressRef.current + Math.PI * 0.75;
+	});
+
+	return (
+		<>
+			<color attach="background" args={["#feda21"]} />
+			<ambientLight />
+			<directionalLight position={[-100, 300, 400]} />
+			<group ref={ref} scale={100} position={[0, -100, 0]}>
+				<mesh position={[2, 0, 0.5]} material={material} geometry={geometry}></mesh>
+				<mesh position={[2.5, 0, 0]} rotation={[0, Math.PI / 2, 0]} material={material}>
+					<planeGeometry args={[1, 5]} />
+				</mesh>
+				<mesh position={[0, -2, 0]} material={material}>
+					<boxGeometry args={[5, 1, 1]} />
+				</mesh>
+				<mesh position={[-2, -2, -2]} material={material}>
+					<boxGeometry args={[1, 1, 5]} />
+				</mesh>
+			</group>
+		</>
+	);
+}

src/stickyroll.stories.tsx → stories/stickyroll.stories.tsx

@@ -1,8 +1,8 @@
 import type { ComponentStory, ComponentMeta } from "@storybook/react";
 import { useRef } from "react";
 
-import { CSS_VARS } from "./constants";
-import Stickyroll from "./stickyroll";
+import { CSS_VARS } from "../src";
+import Stickyroll from "../src/stickyroll";
 
 export default {
 	title: "Stickyroll",

src/use-stickyroll.stories.tsx → stories/use-stickyroll.stories.tsx

@@ -2,9 +2,9 @@ import type { ComponentStory, ComponentMeta } from "@storybook/react";
 import type { ReactNode } from "react";
 import { useRef } from "react";
 
-import { CLASS_NAMES, CSS_VARS, STYLE } from "./constants";
-import type { UseStickyrollOptions } from "./types";
-import useStickyroll from "./use-stickyroll";
+import { CLASS_NAMES, CSS_VARS, STYLE } from "../src";
+import type { UseStickyrollOptions } from "../src";
+import useStickyroll from "../src/use-stickyroll";
 
 function Stickyroll({ children, ...args }: UseStickyrollOptions & { children?: ReactNode }) {
 	const ref = useRef<HTMLDivElement>(null);