Skip to content

Commit 461900e

Browse files
abernierabernier
committed
chore: rm knobs
1 parent 8e5a82a commit 461900e

25 files changed

+381
-273
lines changed

‎.storybook/stories/Example.stories.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as THREE from 'three'
22
import * as React from 'react'
3-
import { withKnobs } from '@storybook/addon-knobs'
43
import { Vector3 } from 'three'
54

65
import { Setup } from '../Setup'
@@ -11,7 +10,6 @@ export default {
1110
title: 'Misc/Example',
1211
component: Example,
1312
decorators: [
14-
withKnobs,
1513
(storyFn) => (
1614
<Setup cameraPosition={new Vector3(1, 2, 4)} cameraFov={60}>
1715
{storyFn()}

‎.storybook/stories/Facemesh.stories.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as THREE from 'three'
22
import * as React from 'react'
3-
import { withKnobs, number } from '@storybook/addon-knobs'
43
import { Vector3 } from 'three'
54

65
import { Setup } from '../Setup'
@@ -11,7 +10,6 @@ export default {
1110
title: 'Shapes/Facemesh',
1211
component: Facemesh,
1312
decorators: [
14-
withKnobs,
1513
(storyFn) => (
1614
<Setup cameraPosition={new Vector3(0, 0, 5)} cameraFov={60}>
1715
{storyFn()}

‎.storybook/stories/Float.stories.tsx

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,29 @@
11
import React, { forwardRef, Suspense, useRef } from 'react'
22
import * as THREE from 'three'
3-
import { withKnobs, number, array } from '@storybook/addon-knobs'
43
import { useFrame } from '@react-three/fiber'
54

65
import { Setup } from '../Setup'
76

87
import { Float } from '../../src'
8+
import { float } from 'three/examples/jsm/nodes/Nodes.js'
99

1010
export default {
1111
title: 'Staging/Float',
1212
component: Float,
13-
decorators: [withKnobs, (storyFn) => <Setup cameraPosition={new THREE.Vector3(0, 0, 10)}> {storyFn()}</Setup>],
13+
decorators: [(storyFn) => <Setup cameraPosition={new THREE.Vector3(0, 0, 10)}> {storyFn()}</Setup>],
1414
}
1515

16-
function FloatScene() {
16+
function FloatScene({ floatingRangeMin, floatingRangeMax, ...args }) {
1717
const cube = useRef()
1818

1919
return (
2020
<>
2121
<Suspense fallback={null}>
2222
<Float
2323
position={[0, 1.1, 0]}
24-
floatingRange={[number('Min Floating Range', undefined), number('Max Floating Range', 1)]}
24+
floatingRange={[floatingRangeMin, floatingRangeMax]}
2525
rotation={[Math.PI / 3.5, 0, 0]}
26-
rotationIntensity={number('Rotation Intensity', 4)}
27-
floatIntensity={number('Float Intensity', 2)}
28-
speed={number('Speed', 5)}
26+
{...args}
2927
>
3028
<mesh ref={cube}>
3129
<boxGeometry args={[2, 2, 2]} />
@@ -43,5 +41,15 @@ function FloatScene() {
4341
)
4442
}
4543

46-
export const FloatSt = () => <FloatScene />
44+
export const FloatSt = (args) => <FloatScene {...args} />
4745
FloatSt.storyName = 'Default'
46+
FloatSt.args = {
47+
floatingRangeMin: undefined,
48+
floatingRangeMax: 1,
49+
rotationIntensity: 4,
50+
floatIntensity: 2,
51+
speed: 5,
52+
}
53+
FloatSt.argTypes = {
54+
floatingRangeMin: { control: 'number' },
55+
}

‎.storybook/stories/Line.stories.tsx

Lines changed: 69 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import * as React from 'react'
22
import { Vector3 } from 'three'
33
import { GeometryUtils } from 'three-stdlib'
4-
import { withKnobs, number, color, boolean, select } from '@storybook/addon-knobs'
54

65
import { Setup } from '../Setup'
76

87
import { Line, OrbitControls, QuadraticBezierLine, CubicBezierLine, CatmullRomLine } from '../../src'
8+
import { color } from '@storybook/addon-knobs'
99

1010
export default {
1111
title: 'Shapes/Line',
@@ -20,77 +20,88 @@ const colors = new Array(points.length).fill(0).map(() => [Math.random(), Math.r
2020
number
2121
][]
2222

23-
export function BasicLine() {
23+
export function BasicLine(args) {
2424
return (
2525
<>
26-
<Line
27-
points={points}
28-
color={color('color', 'red')}
29-
lineWidth={number('lineWidth', 3)}
30-
dashed={boolean('dashed', false)}
31-
/>
26+
<Line points={points} {...args} />
3227
<OrbitControls zoomSpeed={0.5} />
3328
</>
3429
)
3530
}
3631
BasicLine.storyName = 'Basic'
32+
BasicLine.args = {
33+
color: 'red',
34+
lineWidth: 3,
35+
dashed: false,
36+
}
37+
BasicLine.argTypes = {
38+
color: { control: 'color' },
39+
}
3740

3841
BasicLine.decorators = [
39-
withKnobs,
4042
(storyFn) => (
4143
<Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
4244
{storyFn()}
4345
</Setup>
4446
),
4547
]
4648

47-
export function QuadraticBezier() {
49+
export function QuadraticBezier(args) {
4850
return (
4951
<>
50-
<QuadraticBezierLine
51-
start={[number('startX', 0), number('startY', 0), number('startZ', 0)]}
52-
end={[number('endX', 4), number('endY', 7), number('endZ', 5)]}
53-
segments={number('segments', 10)}
54-
color={color('color', 'red')}
55-
lineWidth={number('lineWidth', 2)}
56-
dashed={boolean('dashed', true)}
57-
/>
52+
<QuadraticBezierLine {...args} />
5853
<OrbitControls zoomSpeed={0.5} />
5954
</>
6055
)
6156
}
6257
QuadraticBezier.storyName = 'QuadraticBezier'
58+
QuadraticBezier.args = {
59+
start: [0, 0, 0],
60+
end: [4, 7, 5],
61+
segments: 10,
62+
color: 'red',
63+
lineWidth: 2,
64+
dashed: true,
65+
foo: 3,
66+
}
67+
QuadraticBezier.argTypes = {
68+
segments: { control: { type: 'range', min: 1, max: 20, step: 1 } },
69+
color: { control: 'color' },
70+
}
6371

6472
QuadraticBezier.decorators = [
65-
withKnobs,
6673
(storyFn) => (
6774
<Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
6875
{storyFn()}
6976
</Setup>
7077
),
7178
]
7279

73-
export function CubicBezier() {
80+
export function CubicBezier(args) {
7481
return (
7582
<>
76-
<CubicBezierLine
77-
start={[number('startX', 0), number('startY', 0), number('startZ', 0)]}
78-
end={[number('endX', 10), number('endY', 0), number('endZ', 10)]}
79-
midA={[number('midAX', 5), number('midAY', 4), number('midAZ', 0)]}
80-
midB={[number('midBX', 0), number('midBY', 0), number('midBZ', 5)]}
81-
segments={number('segments', 10)}
82-
color={color('color', 'red')}
83-
lineWidth={number('lineWidth', 2)}
84-
dashed={boolean('dashed', true)}
85-
/>
83+
<CubicBezierLine {...args} />
8684
<OrbitControls zoomSpeed={0.5} />
8785
</>
8886
)
8987
}
9088
CubicBezier.storyName = 'CubicBezier'
89+
CubicBezier.args = {
90+
start: [0, 0, 0],
91+
end: [10, 0, 10],
92+
midA: [5, 4, 0],
93+
midB: [0, 0, 5],
94+
segments: 10,
95+
color: 'red',
96+
lineWidth: 2,
97+
dashed: true,
98+
}
99+
CubicBezier.argTypes = {
100+
segments: { control: { type: 'range', min: 1, max: 20, step: 1 } },
101+
color: { control: 'color' },
102+
}
91103

92104
CubicBezier.decorators = [
93-
withKnobs,
94105
(storyFn) => (
95106
<Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
96107
{storyFn()}
@@ -106,52 +117,58 @@ const catPoints = [
106117
[0.5, 8, -1] as [number, number, number],
107118
]
108119

109-
export function CatmullRom() {
120+
export function CatmullRom(args) {
110121
return (
111122
<>
112-
<CatmullRomLine
113-
points={catPoints}
114-
closed={boolean('closed', false)}
115-
curveType={select('curveType', ['centripetal', 'chordal', 'catmullrom'], 'centripetal')}
116-
tension={number('tension', 0.5, { range: true, min: 0, max: 1, step: 0.01 })}
117-
segments={number('segments', 20)}
118-
color={color('color', 'red')}
119-
lineWidth={number('lineWidth', 3)}
120-
dashed={boolean('dashed', true)}
121-
/>
123+
<CatmullRomLine points={catPoints} {...args} segments={20} />
122124
<OrbitControls zoomSpeed={0.5} />
123125
</>
124126
)
125127
}
126128
CatmullRom.storyName = 'CatmullRom'
129+
CatmullRom.args = {
130+
closed: false,
131+
curveType: 'centripetal',
132+
tension: 0.5,
133+
segments: 20,
134+
color: 'red',
135+
lineWidth: 3,
136+
dashed: true,
137+
}
138+
CatmullRom.argTypes = {
139+
curveType: { control: 'select', options: ['centripetal', 'chordal', 'catmullrom'] },
140+
tension: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
141+
segments: { control: { type: 'range', min: 1, max: 20, step: 1 } },
142+
color: { control: 'color' },
143+
}
127144

128145
CatmullRom.decorators = [
129-
withKnobs,
130146
(storyFn) => (
131147
<Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
132148
{storyFn()}
133149
</Setup>
134150
),
135151
]
136152

137-
export function VertexColorsLine() {
153+
export function VertexColorsLine(args) {
138154
return (
139155
<>
140-
<Line
141-
points={points}
142-
color={color('color', 'white')}
143-
vertexColors={colors}
144-
lineWidth={number('lineWidth', 3)}
145-
dashed={boolean('dashed', false)}
146-
/>
156+
<Line points={points} vertexColors={colors} {...args} />
147157
<OrbitControls zoomSpeed={0.5} />
148158
</>
149159
)
150160
}
151161
VertexColorsLine.storyName = 'VertexColors'
162+
VertexColorsLine.args = {
163+
color: 'white',
164+
lineWidth: 3,
165+
dashed: false,
166+
}
167+
VertexColorsLine.argTypes = {
168+
color: { control: 'color' },
169+
}
152170

153171
VertexColorsLine.decorators = [
154-
withKnobs,
155172
(storyFn) => (
156173
<Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
157174
{storyFn()}

‎.storybook/stories/MeshDistortMaterial.stories.tsx

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,37 @@
11
import * as React from 'react'
22
import { useFrame } from '@react-three/fiber'
33

4-
import { withKnobs, number } from '@storybook/addon-knobs'
5-
64
import { Setup } from '../Setup'
75
import { MeshDistortMaterial, Icosahedron } from '../../src'
86

97
export default {
108
title: 'Shaders/MeshDistortMaterial',
119
component: MeshDistortMaterial,
12-
decorators: [withKnobs, (storyFn) => <Setup> {storyFn()}</Setup>],
10+
decorators: [(storyFn) => <Setup> {storyFn()}</Setup>],
1311
}
1412

15-
function MeshDistortMaterialScene() {
13+
function MeshDistortMaterialScene(args) {
1614
return (
1715
<Icosahedron args={[1, 4]}>
18-
<MeshDistortMaterial
19-
color="#f25042"
20-
speed={number('Speed', 1, { range: true, max: 10, step: 0.1 })}
21-
distort={number('Distort', 0.6, { range: true, min: 0, max: 1, step: 0.1 })}
22-
radius={number('Radius', 1, { range: true, min: 0, max: 1, step: 0.1 })}
23-
/>
16+
<MeshDistortMaterial {...args} />
2417
</Icosahedron>
2518
)
2619
}
2720

28-
export const MeshDistortMaterialSt = () => <MeshDistortMaterialScene />
21+
export const MeshDistortMaterialSt = (args) => <MeshDistortMaterialScene {...args} />
2922
MeshDistortMaterialSt.storyName = 'Default'
23+
MeshDistortMaterialSt.args = {
24+
color: '#f25042',
25+
speed: 1,
26+
distort: 0.6,
27+
radius: 1,
28+
}
29+
MeshDistortMaterialSt.argTypes = {
30+
color: { control: 'color' },
31+
speed: { control: { type: 'range', min: 0, max: 10, step: 0.1 } },
32+
distort: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
33+
radius: { control: { type: 'range', min: 0, max: 1, step: 0.1 } },
34+
}
3035

3136
function MeshDistortMaterialRefScene() {
3237
const material = React.useRef<JSX.IntrinsicElements['distortMaterialImpl']>(null!)

0 commit comments

Comments
 (0)