Autofocus story wip

Author: abernier

.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/preview.ts

@@ -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/preview.tsx

@@ -0,0 +1,50 @@
+import * as THREE from 'three'
+import type { Meta, StoryObj } from '@storybook/react'
+import { Setup } from '../../.storybook/Setup'
+
+import { EffectComposer } from '../EffectComposer'
+
+import { Autofocus } from '../effects/Autofocus'
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+const meta: Meta<typeof Autofocus> = {
+  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 },
+  //   },
+  // },
+}
+
+export default meta
+type Story = StoryObj<typeof Autofocus>
+
+// 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,
+  },
+}

src/effects/Autofocus.stories.tsx

@@ -1,12 +1,12 @@
-import { Meta } from '@storybook/blocks';
-import Code from './assets/code-brackets.svg';
-import Colors from './assets/colors.svg';
-import Comments from './assets/comments.svg';
-import Direction from './assets/direction.svg';
-import Flow from './assets/flow.svg';
-import Plugin from './assets/plugin.svg';
-import Repo from './assets/repo.svg';
-import StackAlt from './assets/stackalt.svg';
+import { Meta } from '@storybook/blocks'
+import Code from './assets/code-brackets.svg'
+import Colors from './assets/colors.svg'
+import Comments from './assets/comments.svg'
+import Direction from './assets/direction.svg'
+import Flow from './assets/flow.svg'
+import Plugin from './assets/plugin.svg'
+import Repo from './assets/repo.svg'
+import StackAlt from './assets/stackalt.svg'
 
 <Meta title="Example/Introduction" />
 
@@ -116,7 +116,9 @@ import StackAlt from './assets/stackalt.svg';
   `}
 </style>
 
-# Welcome to Storybook
+# Welcome to `@react-three/postprocessing`
+
+TODO
 
 Storybook helps you build UI components in isolation from your app's business logic, data, and context.
 That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
@@ -128,33 +130,21 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 <div className="subheading">Configure</div>
 
 <div className="link-list">
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/addons/addon-types"
-    target="_blank"
-  >
+  <a className="link-item" href="https://storybook.js.org/docs/react/addons/addon-types" target="_blank">
     <img src={Plugin} alt="plugin" />
     <span>
       <strong>Presets for popular tools</strong>
       Easy setup for TypeScript, SCSS and more.
     </span>
   </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/webpack"
-    target="_blank"
-  >
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/webpack" target="_blank">
     <img src={StackAlt} alt="Build" />
     <span>
       <strong>Build configuration</strong>
       How to customize webpack and Babel
     </span>
   </a>
-  <a
-    className="link-item"
-    href="https://storybook.js.org/docs/react/configure/styling-and-css"
-    target="_blank"
-  >
+  <a className="link-item" href="https://storybook.js.org/docs/react/configure/styling-and-css" target="_blank">
     <img src={Colors} alt="colors" />
     <span>
       <strong>Styling</strong>
@@ -208,6 +198,5 @@ We recommend building UIs with a [**component-driven**](https://componentdriven.
 </div>
 
 <div className="tip-wrapper">
-  <span className="tip">Tip</span>Edit the Markdown in{' '}
-  <code>stories/Introduction.stories.mdx</code>
+  <span className="tip">Tip</span>Edit the Markdown in <code>stories/Introduction.stories.mdx</code>
 </div>