storybook 7

.eslintrc.json

@@ -10,7 +10,8 @@
     "plugin:prettier/recommended",
     "plugin:react-hooks/recommended",
     "plugin:import/errors",
-    "plugin:import/warnings"
+    "plugin:import/warnings",
+    "plugin:storybook/recommended"
   ],
   "plugins": ["@typescript-eslint", "react", "prettier", "react-hooks", "import"],
   "parser": "@typescript-eslint/parser",

.github/workflows/release.yml

@@ -17,10 +17,28 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           cache: 'yarn'
-      - id: main
-        run: |
+      - run: |
           yarn install --frozen-lockfile
           yarn release
+          yarn build-storybook
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./storybook-static
+
+  # See: https://github.com/actions/deploy-pages
+  deploy-job:
+    needs: release-job
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -16,4 +16,5 @@ yarn-error.log
 .size-snapshot.json
 pnpm-debug.log
 .parcel-cache
-pnpm-lock.yaml
+pnpm-lock.yaml
+storybook-static

.storybook/Setup.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { Vector3 } from 'three'
+import { Canvas, Props as CanvasProps } from '@react-three/fiber'
+
+import { CameraControls } from '@react-three/drei'
+
+type Props = React.PropsWithChildren<
+  CanvasProps & {
+    cameraFov?: number
+    cameraPosition?: Vector3
+    controls?: boolean
+    lights?: boolean
+  }
+>
+
+export const Setup = ({
+  children,
+  cameraFov = 75,
+  cameraPosition = new Vector3(-5, 5, 5),
+  controls = true,
+  lights = true,
+  ...restProps
+}: Props) => (
+  <div style={{ height: '100%' }}>
+    <Canvas shadows camera={{ position: cameraPosition, fov: cameraFov }} {...restProps}>
+      {children}
+      {lights && (
+        <>
+          <ambientLight intensity={0.8} />
+          <pointLight intensity={1} position={[0, 6, 0]} />
+        </>
+      )}
+      {controls && <CameraControls makeDefault />}
+    </Canvas>
+  </div>
+)

.storybook/index.css

@@ -0,0 +1,9 @@
+html,
+body,
+#storybook-root {
+  height: 100%;
+}
+
+.sbdocs canvas {
+  min-height: 20rem;
+}

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+
+const config: StorybookConfig = {
+  stories: ['./stories/**/*.mdx', './stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  async viteFinal(config, options) {
+    // Add your configuration here
+    return config
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+export default config

.storybook/preview.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import type { Preview } from '@storybook/react'
+
+import './index.css'
+
+const preview: Preview = {
+  parameters: {
+    // actions: { argTypesRegex: '^on[A-Z].*' },
+    // controls: {
+    //   matchers: {
+    //     color: /(background|color)$/i,
+    //     date: /Date$/,
+    //   },
+    // },
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story) => (
+      <React.Suspense fallback={null}>
+        <Story />
+      </React.Suspense>
+    ),
+  ],
+}
+
+export default preview

.storybook/stories/Autofocus.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import * as THREE from 'three'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Setup } from '../Setup'
+
+import { EffectComposer } from '../../src'
+
+import { Autofocus } from '../../src'
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta = {
+  title: 'Effect/Autofocus',
+  component: Autofocus,
+  decorators: [(Story) => <Setup cameraPosition={new THREE.Vector3(1, 1, 2)}>{Story()}</Setup>],
+  tags: ['autodocs'],
+  // argTypes: {
+  //   debug: {
+  //     control: { type: 'range', min: 0, max: 1, step: 0.01 },
+  //   },
+  // },
+} satisfies Meta<typeof Autofocus>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  render: (args) => (
+    <>
+      <mesh castShadow>
+        <sphereGeometry args={[0.5, 64, 64]} />
+        <meshStandardMaterial color="#9d4b4b" />
+      </mesh>
+      <mesh castShadow position={[1, 0, -3]}>
+        <boxGeometry args={[1, 1, 1]} />
+        <meshStandardMaterial color="#9d4b4b" />
+      </mesh>
+
+      <gridHelper />
+
+      <EffectComposer>
+        <Autofocus {...args} />
+      </EffectComposer>
+    </>
+  ),
+  args: {
+    mouse: true,
+    debug: 0.04,
+    bokehScale: 8,
+    focusRange: 0.001,
+  },
+}

package.json

@@ -42,7 +42,9 @@
     "test": "echo no tests yet",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
     "typegen": "tsc --emitDeclarationOnly || true",
-    "release": "semantic-release"
+    "release": "semantic-release",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "dependencies": {
     "maath": "^0.5.3",
@@ -51,10 +53,19 @@
     "three-stdlib": "^2.21.10"
   },
   "devDependencies": {
+    "@react-three/drei": "^9.68.2",
     "@react-three/fiber": "^8.13.0",
+    "@rollup/plugin-babel": "^6.0.3",
     "@rollup/plugin-commonjs": "^24.1.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-typescript": "^11.1.0",
+    "@storybook/addon-essentials": "^7.0.10",
+    "@storybook/addon-interactions": "^7.0.10",
+    "@storybook/addon-links": "^7.0.10",
+    "@storybook/blocks": "^7.0.10",
+    "@storybook/react": "^7.0.10",
+    "@storybook/react-vite": "^7.0.11",
+    "@storybook/testing-library": "^0.0.14-next.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.1",
     "@types/three": "^0.150.2",
@@ -67,17 +78,21 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.2",
     "prettier": "^2.8.8",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.0",
     "rollup": "^3.21.0",
     "rollup-plugin-filesize": "^10.0.0",
     "semantic-release": "^21.0.2",
+    "storybook": "^7.0.10",
     "three": "^0.151.3",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "vite": "^4.3.5"
   },
   "peerDependencies": {
     "@react-three/fiber": ">=8.0",

src/effects/Autofocus.tsx

@@ -10,16 +10,22 @@ import React, {
   RefObject,
   useMemo,
 } from 'react'
-import { useThree, useFrame, createPortal } from '@react-three/fiber'
+import { useThree, useFrame, createPortal, Vector3 } from '@react-three/fiber'
 import { CopyPass, DepthPickingPass, DepthOfFieldEffect } from 'postprocessing'
-import { DepthOfField, EffectComposerContext } from '..'
 import { easing } from 'maath'
 
-export type AutofocusProps = typeof DepthOfField & {
-  target?: [number, number, number]
+import { DepthOfField } from './DepthOfField'
+import { EffectComposerContext } from '../EffectComposer'
+
+export type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {
+  target?: Vector3
+  /** should the target follow the pointer */
   mouse?: boolean
+  /** size of the debug green point  */
   debug?: number
+  /** manual update */
   manual?: boolean
+  /** approximate time to reach the target */
   smoothTime?: number
 }
 
@@ -31,7 +37,7 @@ export type AutofocusApi = {
 
 export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
   (
-    { target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0, ...props },
+    { target = undefined, mouse: followMouse = false, debug = undefined, manual = false, smoothTime = 0.25, ...props },
     fref
   ) => {
     const dofRef = useRef<DepthOfFieldEffect>(null)
@@ -80,7 +86,7 @@ export const Autofocus = forwardRef<AutofocusApi, AutofocusProps>(
       async (delta: number, updateTarget = true) => {
         // Update hitpoint
         if (target) {
-          hitpoint.set(...target)
+          hitpoint.set(...(target as [number, number, number]))
         } else {
           const { x, y } = followMouse ? pointer : { x: 0, y: 0 }
           const hit = await getHit(x, y)