Storybook examples don't work
- Dominant language
- TypeScript
- Stars
- 356
- Forks
- 44
- PR merge metrics
- No merged PRs in 30d
Description
Examples in Storybook (https://yastatic.net/s3/frontend/lego/storybook/index.html?path=/docsx/controls-tumbler-desktop--playground) don't work.
```
vendors~main.c6938e236c1ef83c73e2.bundle.js:6 Warning: Failed prop type: t: prop type `active` is invalid; it must be a function, usually from the `prop-types` package, but received `undefined`.
in t
in Unknown
in Unknown
in Unknown
in Unknown (created by Context.Consumer)
in ManagerConsumer
in Unknown (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Panel)
in Panel (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in Main (created by Layout)
in Layout (created by Context.Consumer)
in WithTheme(Layout)
in Unknown
in Unknown
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown (created by SizeMeRenderer(Component))
in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
in SizeMeRenderer(Component) (created by SizeMe(Component))
in SizeMe(Component) (created by Manager)
in ThemeProvider (created by Manager)
in Manager (created by Context.Consumer)
in F (created by QueryLocation)
in QueryLocation (created by Root)
in t (created by Root)
in HelmetProvider (created by Root)
in Root
r @ vendors~main.c6938e236c1ef83c73e2.bundle.js:6
s @ vendors~main.c6938e236c1ef83c73e2.bundle.js:6
Oe @ vendors~main.c6938e236c1ef83c73e2.bundle.js:66
Te @ vendors~main.c6938e236c1ef83c73e2.bundle.js:66
render @ vendors~main.c6938e236c1ef83c73e2.bundle.js:127
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
gf @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
zm @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
Wh @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
Vh @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
qh @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
M_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
k_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
P_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
w_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
t_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
enqueueSetState @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
A.setState @ vendors~main.c6938e236c1ef83c73e2.bundle.js:66
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
f @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
l @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
a @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
R @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
process @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
c @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
setTimeout (async)
u @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
add @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
A @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
makeDetectable @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
forEach @ vendors~main.c6938e236c1ef83c73e2.bundle.js:39
listenTo @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
value @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
value @ vendors~main.c6938e236c1ef83c73e2.bundle.js:110
Hg @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
jh @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
h @ vendors~main.c6938e236c1ef83c73e2.bundle.js:82
c @ vendors~main.c6938e236c1ef83c73e2.bundle.js:82
_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:82
zh @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
t.unstable_runWithPriority @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
L_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
M_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
k_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
P_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
w_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
t_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
Y_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
W_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
nb.render @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
U_ @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
sb @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
render @ vendors~main.c6938e236c1ef83c73e2.bundle.js:95
t.default @ vendors~main.c6938e236c1ef83c73e2.bundle.js:39
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:58
Promise.then (async)
(anonymous) @ vendors~main.c6938e236c1ef83c73e2.bundle.js:58
l @ runtime~main.3e80324d580cf3681712.bundle.js:1
(anonymous) @ main.d3c0470a998994624bff.bundle.js:1
l @ runtime~main.3e80324d580cf3681712.bundle.js:1
t @ runtime~main.3e80324d580cf3681712.bundle.js:1
r @ runtime~main.3e80324d580cf3681712.bundle.js:1
(anonymous) @ main.d3c0470a998994624bff.bundle.js:1
Show 32 more frames
vendors~main.c6938e236c1ef83c73e2.bundle.js:66 Warning: Each child in a list should have a unique "key" prop.
Check the top-level render call using . See https://fb.me/react-warning-keys for more information.
in t
in Unknown
in Unknown
in Unknown
in Unknown (created by Context.Consumer)
in ManagerConsumer
in Unknown (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Panel)
in Panel (created by Layout)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in div (created by Context.Consumer)
in Styled(div) (created by Main)
in Main (created by Layout)
in Layout (created by Context.Consumer)
in WithTheme(Layout)
in Unknown
in Unknown
in div (created by Context.Consumer)
in Styled(div)
in Unknown
in Unknown (created by SizeMeRenderer(Component))
in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
in SizeMeRenderer(Component) (created by SizeMe(Component))
in SizeMe(Component) (created by Manager)
in ThemeProvider (created by Manager)
in Manager (created by Context.Consumer)
in F (created by QueryLocation)
in QueryLocation (created by Root)
in t (created by Root)
in HelmetProvider (created by Root)
in Root
```
Contributor guide
Research direction
Start by opening the linked Storybook page for the Tumbler desktop playground and reproducing the failure in the browser console. Use the reported invalid `active` prop-type warning and missing React list keys as the initial investigation clues. Done means the Storybook examples work and the reported warnings no longer appear.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, storybook, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100