forked from pmndrs/drei
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Example.stories.tsx
62 lines (54 loc) · 1.44 KB
/
Example.stories.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import * as THREE from 'three'
import * as React from 'react'
import { withKnobs } from '@storybook/addon-knobs'
import { Vector3 } from 'three'
import { Setup } from '../Setup'
import { Example, ExampleApi, Sparkles } from '../../src'
export default {
title: 'Misc/Example',
component: Example,
decorators: [
withKnobs,
(storyFn) => (
<Setup cameraPosition={new Vector3(1, 2, 4)} cameraFov={60}>
{storyFn()}
</Setup>
),
],
}
export const ExampleSt = ({ fontUrl, color, bevelSize, debug }) => {
const apiRef = React.useRef<ExampleApi>(null)
return (
<>
<color attach="background" args={['#303030']} />
<axesHelper />
<Example
font={fontUrl}
color={color}
bevelSize={bevelSize}
debug={debug}
ref={apiRef}
onClick={(e) => {
if ((e as any as PointerEvent).metaKey) {
apiRef.current?.decr()
} else {
apiRef.current?.incr()
}
}}
/>
</>
)
}
ExampleSt.args = {
fontUrl: '/fonts/Inter_Bold.json',
bevelSize: undefined,
color: '#cbcbcb',
debug: false,
}
ExampleSt.argTypes = {
fontUrl: { control: 'select', options: ['/fonts/Inter_Bold.json', '/fonts/helvetiker_regular.typeface.json'] },
bevelSize: { control: { type: 'range', min: 0, max: 0.1, step: 0.01 } },
color: { control: { type: 'color' } },
debug: { control: { type: 'boolean' } },
}
ExampleSt.storyName = 'Default'