Skip to content

Commit f7774aa

Browse files
abernierabernier
authored
fix: storybook 7 (#202)
* sb init * Autofocus story * chore: deploy storybook on gh pages * chore: cleaning unecessary files * chore: @storybook/react-vite * feat: CameraControls for Setup * fix: removing circular deps * good looking story * fix: talentlessguy review
1 parent 5d69491 commit f7774aa

File tree

13 files changed

+5515
-126
lines changed

13 files changed

+5515
-126
lines changed

‎.eslintrc.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
"plugin:prettier/recommended",
1111
"plugin:react-hooks/recommended",
1212
"plugin:import/errors",
13-
"plugin:import/warnings"
13+
"plugin:import/warnings",
14+
"plugin:storybook/recommended"
1415
],
1516
"plugins": ["@typescript-eslint", "react", "prettier", "react-hooks", "import"],
1617
"parser": "@typescript-eslint/parser",

‎.github/workflows/release.yml

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,28 @@ jobs:
1717
- uses: actions/setup-node@v3
1818
with:
1919
cache: 'yarn'
20-
- id: main
21-
run: |
20+
- run: |
2221
yarn install --frozen-lockfile
2322
yarn release
23+
yarn build-storybook
2424
env:
2525
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
2626
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
27+
- uses: actions/upload-pages-artifact@v1
28+
with:
29+
path: ./storybook-static
30+
31+
# See: https://github.com/actions/deploy-pages
32+
deploy-job:
33+
needs: release-job
34+
permissions:
35+
pages: write
36+
id-token: write
37+
environment:
38+
name: github-pages
39+
url: ${{ steps.deployment.outputs.page_url }}
40+
runs-on: ubuntu-latest
41+
steps:
42+
- name: Deploy to GitHub Pages
43+
id: deployment
44+
uses: actions/deploy-pages@v1

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ yarn-error.log
1616
.size-snapshot.json
1717
pnpm-debug.log
1818
.parcel-cache
19-
pnpm-lock.yaml
19+
pnpm-lock.yaml
20+
storybook-static

‎.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 { CameraControls } from '@react-three/drei'
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 && <CameraControls 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: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import type { StorybookConfig } from '@storybook/react-vite'
2+
3+
const config: StorybookConfig = {
4+
stories: ['./stories/**/*.mdx', './stories/**/*.stories.@(js|jsx|ts|tsx)'],
5+
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
6+
framework: {
7+
name: '@storybook/react-vite',
8+
options: {},
9+
},
10+
async viteFinal(config, options) {
11+
// Add your configuration here
12+
return config
13+
},
14+
staticDirs: ['./public'],
15+
docs: {
16+
autodocs: 'tag',
17+
},
18+
}
19+
export default config

‎.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/public/suzi.gltf

Lines changed: 112 additions & 0 deletions
Large diffs are not rendered by default.

‎.storybook/stories/Autofocus.stories.tsx

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import React, { memo } from 'react'
2+
import * as THREE from 'three'
3+
import type { Meta, StoryObj } from '@storybook/react'
4+
import { useGLTF, Center, Resize, AccumulativeShadows, RandomizedLight, Environment, Stats } from '@react-three/drei'
5+
6+
import { Setup } from '../Setup'
7+
import { EffectComposer, Autofocus } from '../../src'
8+
9+
// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
10+
const meta = {
11+
title: 'Effect/Autofocus',
12+
component: Autofocus,
13+
decorators: [
14+
(Story) => (
15+
<Setup cameraPosition={new THREE.Vector3(-17, 1.5, 13)} cameraFov={20} lights={false}>
16+
{Story()}
17+
</Setup>
18+
),
19+
],
20+
tags: ['autodocs'],
21+
// argTypes: {
22+
// debug: {
23+
// control: { type: 'range', min: 0, max: 1, step: 0.01 },
24+
// },
25+
// },
26+
} satisfies Meta<typeof Autofocus>
27+
28+
export default meta
29+
type Story = StoryObj<typeof meta>
30+
31+
// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
32+
export const Primary: Story = {
33+
render: (args) => (
34+
<>
35+
<color attach="background" args={['#303035']} />
36+
37+
<group position-y={-0.5} position-x={-1}>
38+
<Center top>
39+
<Resize scale={3.5}>
40+
<Suzi rotation={[-0.63, 0, 0]}>
41+
<meshStandardMaterial color="#9d4b4b" />
42+
</Suzi>
43+
</Resize>
44+
</Center>
45+
<Center top position={[-2, 0, 2]}>
46+
<mesh castShadow>
47+
<sphereGeometry args={[0.5, 64, 64]} />
48+
<meshStandardMaterial color="#9d4b4b" />
49+
</mesh>
50+
</Center>
51+
<Center top position={[2.5, 0, 1]}>
52+
<mesh castShadow rotation={[0, Math.PI / 4, 0]}>
53+
<boxGeometry args={[0.7, 0.7, 0.7]} />
54+
<meshStandardMaterial color="#9d4b4b" />
55+
</mesh>
56+
</Center>
57+
58+
<Shadows />
59+
<Environment preset="city" />
60+
<Stats />
61+
</group>
62+
63+
<EffectComposer>
64+
<Autofocus {...args} />
65+
</EffectComposer>
66+
</>
67+
),
68+
args: {
69+
mouse: true,
70+
debug: 0.04,
71+
bokehScale: 8,
72+
focusRange: 0.001,
73+
},
74+
}
75+
76+
const Suzi = ({ children, ...props }) => {
77+
console.log(import.meta.url)
78+
const { nodes } = useGLTF('/suzi.gltf') as any
79+
return (
80+
<>
81+
<mesh castShadow receiveShadow geometry={nodes.Suzanne.geometry} {...props}>
82+
{children}
83+
</mesh>
84+
</>
85+
)
86+
}
87+
88+
const Shadows = memo(() => (
89+
<AccumulativeShadows temporal frames={100} color="#9d4b4b" colorBlend={0.5} alphaTest={0.9} scale={20}>
90+
<RandomizedLight amount={8} radius={4} position={[5, 5, -10]} />
91+
</AccumulativeShadows>
92+
))

‎.storybook/stories/assets/repo.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)