Skip to content

Commit a1d5249

Browse files
abernierabernier
committed
Autofocus story
1 parent 9c47ad6 commit a1d5249

30 files changed

+298
-720
lines changed

‎.eslintrc.json‎

Lines changed: 14 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,7 @@
1313
"plugin:import/warnings",
1414
"plugin:storybook/recommended"
1515
],
16-
"plugins": [
17-
"@typescript-eslint",
18-
"react",
19-
"prettier",
20-
"react-hooks",
21-
"import"
22-
],
16+
"plugins": ["@typescript-eslint", "react", "prettier", "react-hooks", "import"],
2317
"parser": "@typescript-eslint/parser",
2418
"parserOptions": {
2519
"ecmaVersion": 2018,
@@ -28,40 +22,20 @@
2822
"jsx": true
2923
},
3024
"rules": {
31-
"curly": [
32-
"warn",
33-
"multi-line",
34-
"consistent"
35-
],
25+
"curly": ["warn", "multi-line", "consistent"],
3626
"no-console": "off",
3727
"no-empty-pattern": "warn",
3828
"no-duplicate-imports": "error",
39-
"import/no-unresolved": [
40-
"error",
41-
{
42-
"commonjs": true,
43-
"amd": true
44-
}
45-
],
29+
"import/no-unresolved": ["error", { "commonjs": true, "amd": true }],
4630
"import/export": "error",
31+
// https://github.com/typescript-eslint/typescript-eslint/blob/master/docs/getting-started/linting/FAQ.md#eslint-plugin-import
32+
// We recommend you do not use the following import/* rules, as TypeScript provides the same checks as part of standard type checking:
4733
"import/named": "off",
4834
"import/namespace": "off",
4935
"import/default": "off",
5036
"@typescript-eslint/explicit-module-boundary-types": "off",
51-
"no-unused-vars": [
52-
"warn",
53-
{
54-
"argsIgnorePattern": "^_",
55-
"varsIgnorePattern": "^_"
56-
}
57-
],
58-
"@typescript-eslint/no-unused-vars": [
59-
"warn",
60-
{
61-
"argsIgnorePattern": "^_",
62-
"varsIgnorePattern": "^_"
63-
}
64-
],
37+
"no-unused-vars": ["warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
38+
"@typescript-eslint/no-unused-vars": ["warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
6539
"@typescript-eslint/no-use-before-define": "off",
6640
"@typescript-eslint/no-empty-function": "off",
6741
"@typescript-eslint/no-empty-interface": "off",
@@ -72,55 +46,24 @@
7246
"react": {
7347
"version": "detect"
7448
},
75-
"import/extensions": [
76-
".js",
77-
".jsx",
78-
".ts",
79-
".tsx"
80-
],
49+
"import/extensions": [".js", ".jsx", ".ts", ".tsx"],
8150
"import/parsers": {
82-
"@typescript-eslint/parser": [
83-
".js",
84-
".jsx",
85-
".ts",
86-
".tsx"
87-
]
51+
"@typescript-eslint/parser": [".js", ".jsx", ".ts", ".tsx"]
8852
},
8953
"import/resolver": {
9054
"node": {
91-
"extensions": [
92-
".js",
93-
".jsx",
94-
".ts",
95-
".tsx",
96-
".json"
97-
],
98-
"paths": [
99-
"src"
100-
]
55+
"extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
56+
"paths": ["src"]
10157
},
10258
"alias": {
103-
"extensions": [
104-
".js",
105-
".jsx",
106-
".ts",
107-
".tsx",
108-
".json"
109-
],
110-
"map": [
111-
[
112-
"@react-three/postprocessing",
113-
"./src/index.tsx"
114-
]
115-
]
59+
"extensions": [".js", ".jsx", ".ts", ".tsx", ".json"],
60+
"map": [["@react-three/postprocessing", "./src/index.tsx"]]
11661
}
11762
}
11863
},
11964
"overrides": [
12065
{
121-
"files": [
122-
"src"
123-
],
66+
"files": ["src"],
12467
"parserOptions": {
12568
"project": "./tsconfig.json"
12669
}

‎.storybook/Setup.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import * as React from 'react'
2+
import { Vector3 } from 'three'
3+
import { Canvas, Props as CanvasProps } from '@react-three/fiber'
4+
5+
// import { OrbitControls } from '../src'
6+
7+
type Props = React.PropsWithChildren<
8+
CanvasProps & {
9+
cameraFov?: number
10+
cameraPosition?: Vector3
11+
controls?: boolean
12+
lights?: boolean
13+
}
14+
>
15+
16+
export const Setup = ({
17+
children,
18+
cameraFov = 75,
19+
cameraPosition = new Vector3(-5, 5, 5),
20+
controls = true,
21+
lights = true,
22+
...restProps
23+
}: Props) => (
24+
<div style={{ height: '100%' }}>
25+
<Canvas shadows camera={{ position: cameraPosition, fov: cameraFov }} {...restProps}>
26+
{children}
27+
{lights && (
28+
<>
29+
<ambientLight intensity={0.8} />
30+
<pointLight intensity={1} position={[0, 6, 0]} />
31+
</>
32+
)}
33+
{/* {controls && <OrbitControls makeDefault />} */}
34+
</Canvas>
35+
</div>
36+
)

‎.storybook/index.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
html,
2+
body,
3+
#storybook-root {
4+
height: 100%;
5+
}
6+
7+
.sbdocs canvas {
8+
min-height: 20rem;
9+
}

‎.storybook/main.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { StorybookConfig } from '@storybook/react-webpack5'
22
const config: StorybookConfig = {
3-
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
3+
stories: ['./stories/**/*.mdx', './stories/**/*.stories.@(js|jsx|ts|tsx)'],
44
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
55
framework: {
66
name: '@storybook/react-webpack5',

‎.storybook/preview.ts‎

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎.storybook/preview.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react'
2+
import type { Preview } from '@storybook/react'
3+
4+
import './index.css'
5+
6+
const preview: Preview = {
7+
parameters: {
8+
// actions: { argTypesRegex: '^on[A-Z].*' },
9+
// controls: {
10+
// matchers: {
11+
// color: /(background|color)$/i,
12+
// date: /Date$/,
13+
// },
14+
// },
15+
layout: 'fullscreen',
16+
},
17+
decorators: [
18+
(Story) => (
19+
<React.Suspense fallback={null}>
20+
<Story />
21+
</React.Suspense>
22+
),
23+
],
24+
}
25+
26+
export default preview

‎.storybook/stories/Autofocus.stories.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from 'react'
2+
import * as THREE from 'three'
3+
import type { Meta, StoryObj } from '@storybook/react'
4+
import { Setup } from '../Setup'
5+
6+
import { EffectComposer } from '../../src'
7+
8+
import { Autofocus } from '../../src'
9+
10+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
11+
const meta = {
12+
title: 'Effect/Autofocus',
13+
component: Autofocus,
14+
decorators: [(Story) => <Setup cameraPosition={new THREE.Vector3(1, 1, 2)}>{Story()}</Setup>],
15+
tags: ['autodocs'],
16+
// argTypes: {
17+
// debug: {
18+
// control: { type: 'range', min: 0, max: 1, step: 0.01 },
19+
// },
20+
// },
21+
} satisfies Meta<typeof Autofocus>
22+
23+
export default meta
24+
type Story = StoryObj<typeof meta>
25+
26+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
27+
export const Primary: Story = {
28+
render: (args) => (
29+
<>
30+
<mesh castShadow>
31+
<sphereGeometry args={[0.5, 64, 64]} />
32+
<meshStandardMaterial color="#9d4b4b" />
33+
</mesh>
34+
<mesh castShadow position={[1, 0, -5]}>
35+
<boxGeometry args={[1, 1, 1]} />
36+
<meshStandardMaterial color="#9d4b4b" />
37+
</mesh>
38+
39+
<gridHelper />
40+
41+
<EffectComposer>
42+
<Autofocus {...args} focusRange={0.001} bokehScale={18} />
43+
</EffectComposer>
44+
</>
45+
),
46+
args: {
47+
mouse: true,
48+
debug: 0.04,
49+
bokehScale: 8,
50+
},
51+
}

‎.storybook/stories/Introduction.mdx‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
import { Meta } from '@storybook/blocks'
2+
import Repo from './assets/repo.svg'
3+
4+
<Meta title="General/Introduction" />
5+
6+
<style>
7+
{`
8+
.subheading {
9+
--mediumdark: '#999999';
10+
font-weight: 700;
11+
font-size: 13px;
12+
color: #999;
13+
letter-spacing: 6px;
14+
line-height: 24px;
15+
text-transform: uppercase;
16+
margin-bottom: 12px;
17+
margin-top: 40px;
18+
}
19+
20+
.link-list {
21+
display: grid;
22+
grid-template-columns: 1fr;
23+
grid-template-rows: 1fr 1fr;
24+
row-gap: 10px;
25+
}
26+
27+
@media (min-width: 620px) {
28+
.link-list {
29+
row-gap: 20px;
30+
column-gap: 20px;
31+
grid-template-columns: 1fr 1fr;
32+
}
33+
}
34+
35+
@media all and (-ms-high-contrast:none) {
36+
.link-list {
37+
display: -ms-grid;
38+
-ms-grid-columns: 1fr 1fr;
39+
-ms-grid-rows: 1fr 1fr;
40+
}
41+
}
42+
43+
.link-item {
44+
display: block;
45+
padding: 20px;
46+
border: 1px solid #00000010;
47+
border-radius: 5px;
48+
transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
49+
color: #333333;
50+
display: flex;
51+
align-items: flex-start;
52+
}
53+
54+
.link-item:hover {
55+
border-color: #1EA7FD50;
56+
transform: translate3d(0, -3px, 0);
57+
box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
58+
}
59+
60+
.link-item:active {
61+
border-color: #1EA7FD;
62+
transform: translate3d(0, 0, 0);
63+
}
64+
65+
.link-item strong {
66+
font-weight: 700;
67+
display: block;
68+
margin-bottom: 2px;
69+
}
70+
71+
.link-item img {
72+
height: 40px;
73+
width: 40px;
74+
margin-right: 15px;
75+
flex: none;
76+
}
77+
78+
.link-item span,
79+
.link-item p {
80+
margin: 0;
81+
font-size: 14px;
82+
line-height: 20px;
83+
}
84+
85+
.tip {
86+
display: inline-block;
87+
border-radius: 1em;
88+
font-size: 11px;
89+
line-height: 12px;
90+
font-weight: 700;
91+
background: #E7FDD8;
92+
color: #66BF3C;
93+
padding: 4px 12px;
94+
margin-right: 10px;
95+
vertical-align: top;
96+
}
97+
98+
.tip-wrapper {
99+
font-size: 13px;
100+
line-height: 20px;
101+
margin-top: 40px;
102+
margin-bottom: 40px;
103+
}
104+
105+
.tip-wrapper code {
106+
font-size: 12px;
107+
display: inline-block;
108+
}
109+
`}
110+
</style>
111+
112+
# Welcome to `@react-three/postprocessing`
113+
114+
<img src={Repo} alt="repo" />

‎src/stories/assets/repo.svg‎ renamed to ‎.storybook/stories/assets/repo.svg‎

File renamed without changes.

0 commit comments

Comments
 (0)