Skip to content

Commit 9c8ca81

Browse files
abernierabernier
authored
chore: rm knobs (#1973)
* chore: rm knobs * chore: rm the package
1 parent 410d657 commit 9c8ca81

28 files changed

+423
-506
lines changed

‎.storybook/main.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type { StorybookConfig } from '@storybook/react-vite'
33
const config: StorybookConfig = {
44
staticDirs: ['./public'],
55
stories: ['./stories/**/*.stories.{ts,tsx}'],
6-
addons: ['@storybook/addon-essentials', '@storybook/addon-knobs'],
6+
addons: ['@storybook/addon-essentials'],
77
framework: {
88
name: '@storybook/react-vite',
99
options: {},

‎.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: 68 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
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

@@ -20,77 +19,88 @@ const colors = new Array(points.length).fill(0).map(() => [Math.random(), Math.r
2019
number
2120
][]
2221

23-
export function BasicLine() {
22+
export function BasicLine(args) {
2423
return (
2524
<>
26-
<Line
27-
points={points}
28-
color={color('color', 'red')}
29-
lineWidth={number('lineWidth', 3)}
30-
dashed={boolean('dashed', false)}
31-
/>
25+
<Line points={points} {...args} />
3226
<OrbitControls zoomSpeed={0.5} />
3327
</>
3428
)
3529
}
3630
BasicLine.storyName = 'Basic'
31+
BasicLine.args = {
32+
color: 'red',
33+
lineWidth: 3,
34+
dashed: false,
35+
}
36+
BasicLine.argTypes = {
37+
color: { control: 'color' },
38+
}
3739

3840
BasicLine.decorators = [
39-
withKnobs,
4041
(storyFn) => (
4142
<Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
4243
{storyFn()}
4344
</Setup>
4445
),
4546
]
4647

47-
export function QuadraticBezier() {
48+
export function QuadraticBezier(args) {
4849
return (
4950
<>
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-
/>
51+
<QuadraticBezierLine {...args} />
5852
<OrbitControls zoomSpeed={0.5} />
5953
</>
6054
)
6155
}
6256
QuadraticBezier.storyName = 'QuadraticBezier'
57+
QuadraticBezier.args = {
58+
start: [0, 0, 0],
59+
end: [4, 7, 5],
60+
segments: 10,
61+
color: 'red',
62+
lineWidth: 2,
63+
dashed: true,
64+
foo: 3,
65+
}
66+
QuadraticBezier.argTypes = {
67+
segments: { control: { type: 'range', min: 1, max: 20, step: 1 } },
68+
color: { control: 'color' },
69+
}
6370

6471
QuadraticBezier.decorators = [
65-
withKnobs,
6672
(storyFn) => (
6773
<Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
6874
{storyFn()}
6975
</Setup>
7076
),
7177
]
7278

73-
export function CubicBezier() {
79+
export function CubicBezier(args) {
7480
return (
7581
<>
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-
/>
82+
<CubicBezierLine {...args} />
8683
<OrbitControls zoomSpeed={0.5} />
8784
</>
8885
)
8986
}
9087
CubicBezier.storyName = 'CubicBezier'
88+
CubicBezier.args = {
89+
start: [0, 0, 0],
90+
end: [10, 0, 10],
91+
midA: [5, 4, 0],
92+
midB: [0, 0, 5],
93+
segments: 10,
94+
color: 'red',
95+
lineWidth: 2,
96+
dashed: true,
97+
}
98+
CubicBezier.argTypes = {
99+
segments: { control: { type: 'range', min: 1, max: 20, step: 1 } },
100+
color: { control: 'color' },
101+
}
91102

92103
CubicBezier.decorators = [
93-
withKnobs,
94104
(storyFn) => (
95105
<Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
96106
{storyFn()}
@@ -106,52 +116,58 @@ const catPoints = [
106116
[0.5, 8, -1] as [number, number, number],
107117
]
108118

109-
export function CatmullRom() {
119+
export function CatmullRom(args) {
110120
return (
111121
<>
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-
/>
122+
<CatmullRomLine points={catPoints} {...args} segments={20} />
122123
<OrbitControls zoomSpeed={0.5} />
123124
</>
124125
)
125126
}
126127
CatmullRom.storyName = 'CatmullRom'
128+
CatmullRom.args = {
129+
closed: false,
130+
curveType: 'centripetal',
131+
tension: 0.5,
132+
segments: 20,
133+
color: 'red',
134+
lineWidth: 3,
135+
dashed: true,
136+
}
137+
CatmullRom.argTypes = {
138+
curveType: { control: 'select', options: ['centripetal', 'chordal', 'catmullrom'] },
139+
tension: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
140+
segments: { control: { type: 'range', min: 1, max: 20, step: 1 } },
141+
color: { control: 'color' },
142+
}
127143

128144
CatmullRom.decorators = [
129-
withKnobs,
130145
(storyFn) => (
131146
<Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
132147
{storyFn()}
133148
</Setup>
134149
),
135150
]
136151

137-
export function VertexColorsLine() {
152+
export function VertexColorsLine(args) {
138153
return (
139154
<>
140-
<Line
141-
points={points}
142-
color={color('color', 'white')}
143-
vertexColors={colors}
144-
lineWidth={number('lineWidth', 3)}
145-
dashed={boolean('dashed', false)}
146-
/>
155+
<Line points={points} vertexColors={colors} {...args} />
147156
<OrbitControls zoomSpeed={0.5} />
148157
</>
149158
)
150159
}
151160
VertexColorsLine.storyName = 'VertexColors'
161+
VertexColorsLine.args = {
162+
color: 'white',
163+
lineWidth: 3,
164+
dashed: false,
165+
}
166+
VertexColorsLine.argTypes = {
167+
color: { control: 'color' },
168+
}
152169

153170
VertexColorsLine.decorators = [
154-
withKnobs,
155171
(storyFn) => (
156172
<Setup controls={false} cameraPosition={new Vector3(0, 0, 17)}>
157173
{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)