bem / bem/yandex-ui

Storybook examples don't work

Open
#3 1 comment 8 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.