Autofocus story

.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 { OrbitControls } from '../src'
+
+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: '100vh' }}>
+    <Canvas shadows camera={{ position: cameraPosition, fov: cameraFov }} {...restProps}>
+      {children}
+      {lights && (
+        <>
+          <ambientLight intensity={0.8} />
+          <pointLight intensity={1} position={[0, 6, 0]} />
+        </>
+      )}
+      {/* {controls && <OrbitControls makeDefault />} */}
+    </Canvas>
+  </div>
+)

.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/react-webpack5'
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['./stories/**/*.mdx', './stories/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-webpack5',

.storybook/preview.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import type { Preview } from '@storybook/react'
+
+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,51 @@
+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, -5]}>
+        <boxGeometry args={[1, 1, 1]} />
+        <meshStandardMaterial color="#9d4b4b" />
+      </mesh>
+
+      <gridHelper />
+
+      <EffectComposer>
+        <Autofocus {...args} focusRange={0.001} bokehScale={18} />
+      </EffectComposer>
+    </>
+  ),
+  args: {
+    mouse: true,
+    debug: 0.04,
+    bokehScale: 8,
+  },
+}

.storybook/stories/Introduction.mdx

@@ -0,0 +1,114 @@
+import { Meta } from '@storybook/blocks'
+import Repo from './assets/repo.svg'
+
+<Meta title="General/Introduction" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 700;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span,
+    .link-item p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Welcome to `@react-three/postprocessing`
+
+<img src={Repo} alt="repo" />

package.json

@@ -53,10 +53,13 @@
     "three-stdlib": "^2.21.10"
   },
   "devDependencies": {
+    "@babel/core": "^7.21.8",
+    "@babel/plugin-transform-runtime": "^7.21.4",
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
     "@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",

rollup.config.js

@@ -1,23 +1,41 @@
 import path from 'path'
+import babel from '@rollup/plugin-babel'
 import resolve from '@rollup/plugin-node-resolve'
 import filesize from 'rollup-plugin-filesize'
-import typescript from '@rollup/plugin-typescript'
 
 const root = process.platform === 'win32' ? path.resolve('/') : '/'
 const external = (id) => !id.startsWith('.') && !id.startsWith(root)
 const extensions = ['.js', '.jsx', '.ts', '.tsx']
 
+const getBabelOptions = () => ({
+  babelrc: false,
+  extensions,
+  exclude: '**/node_modules/**',
+  babelHelpers: 'runtime',
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: '> 1%, not dead, not ie 11, not op_mini all',
+      },
+    ],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
+  ],
+  plugins: [['@babel/transform-runtime', { regenerator: false, useESModules: true }]],
+})
+
 export default [
   {
     input: `./src/index.tsx`,
     output: { file: `dist/index.js`, format: 'esm' },
     external,
-    plugins: [typescript(), resolve({ extensions }), filesize()],
+    plugins: [babel(getBabelOptions()), resolve({ extensions }), filesize()],
   },
   {
     input: `./src/index.tsx`,
     output: { file: `dist/index.cjs`, format: 'cjs' },
     external,
-    plugins: [typescript(), resolve({ extensions }), filesize()],
+    plugins: [babel(getBabelOptions()), resolve({ extensions }), filesize()],
   },
 ]

src/Autofocus.tsx

@@ -14,7 +14,7 @@ import { CopyPass, DepthPickingPass, DepthOfFieldEffect } from 'postprocessing'
 import { DepthOfField, EffectComposerContext } from './index'
 import { easing } from 'maath'
 
-export type AutofocusProps = typeof DepthOfField & {
+export type AutofocusProps = React.ComponentProps<typeof DepthOfField> & {
   target?: [number, number, number]
   mouse?: boolean
   debug?: number
@@ -72,7 +72,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)