Fresh Angular + Storybook alpha.38 installation throws warnings

[kroeder]

To Reproduce
Steps to reproduce the behavior:

1. Create a fresh angular project (8.2)
2. sb init alpha.38
3. Start storybook

Expected behavior
Should work without warnings

Throws warnings to console

1) Warning: Failed prop type: Invalid prop `options.isToolshown` of type `boolean` supplied to `Layout`, expected `string`.
2) The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".
3) Warning: Failed prop type: Invalid prop `Filter` of type `object` supplied to `TreeState`, expected a single ReactElement.
4) Warning: Failed prop type: Invalid prop `List` of type `object` supplied to `TreeState`, expected a single ReactElement.
5) Warning: Failed prop type: Invalid prop `Title` of type `object` supplied to `TreeState`, expected a single ReactElement.
6) Warning: Failed prop type: Invalid prop `Link` of type `function` supplied to `TreeState`, expected a single ReactElement.
7) Warning: Failed prop type: Invalid prop `Leaf` of type `function` supplied to `TreeState`, expected a single ReactElement.
8) Warning: Failed prop type: Invalid prop `Head` of type `function` supplied to `TreeState`, expected a single ReactElement.
9) Warning: Failed prop type: Invalid prop `Section` of type `object` supplied to `TreeState`, expected a single ReactElement
10) Warning: Failed prop type: Invalid prop `Message` of type `function` supplied to `TreeState`, expected a single ReactElement.

System:

• Browser: [chrome]
• Framework: [angular]
• Version: [5.2.0-alpha.38]

[adamdoyle]

I'm seeing this with a polymer storybook as well. (and probably other app types?)

[adamdoyle]

This commit ("FIX linting") appears to be what introduced the errors. If I remove line 552, then the options.isToolshown error goes away. The other errors also seem to have related changes in the same commit.

@ndelangen

[adamdoyle]

Looks like removing the following lines gets rid of the errors:

• Invalid prop options.isToolshown: lib/ui/src/components/layout/container.js:552
• Invalid prop Filter: lib/ui/src/components/sidebar/treeview/treeview.js:395
• Invalid prop List: lib/ui/src/components/sidebar/treeview/treeview.js:396
• Invalid prop Title: lib/ui/src/components/sidebar/treeview/treeview.js:397
• Invalid prop Link: lib/ui/src/components/sidebar/treeview/treeview.js:398
• Invalid prop Leaf: lib/ui/src/components/sidebar/treeview/treeview.js:399
• Invalid prop Head: lib/ui/src/components/sidebar/treeview/treeview.js:400
• Invalid prop Section: lib/ui/src/components/sidebar/treeview/treeview.js:401
• Invalid prop Message: lib/ui/src/components/sidebar/treeview/treeview.js:402

[adamdoyle]

I don't have any React experience, so this should probably be looked at by someone who does, but this appears to resolve the type issues:

From reading prop-types issue #200, I'm guessing that all but the first one should be defined as PropTypes.elementType instead of PropTypes.element. That seems to eliminate all but the first error.

The pseudo class ":first-child" error already existed and has an issue here: #6998

Looks like the first one (isToolshown) should be PropTypes.bool.isRequired instead of PropTypes.string.isRequired.

[adamdoyle]

In the meantime, one can patch-package a local install with this patch for @storybook/[email protected]:

@storybook+ui+5.2.0-alpha.40.patch:

diff --git a/node_modules/@storybook/ui/dist/components/layout/container.js b/node_modules/@storybook/ui/dist/components/layout/container.js
index 35b1cfb..720d450 100644
--- a/node_modules/@storybook/ui/dist/components/layout/container.js
+++ b/node_modules/@storybook/ui/dist/components/layout/container.js
@@ -698,7 +698,7 @@ Layout.propTypes = {
     showNav: _propTypes["default"].bool.isRequired,
     showPanel: _propTypes["default"].bool.isRequired,
     panelPosition: _propTypes["default"].string.isRequired,
-    isToolshown: _propTypes["default"].string.isRequired
+    isToolshown: _propTypes["default"].bool.isRequired
   }).isRequired,
   viewMode: _propTypes["default"].oneOf(['story', 'info', 'docs', 'settings']),
   theme: _propTypes["default"].shape({
diff --git a/node_modules/@storybook/ui/dist/components/sidebar/treeview/treeview.js b/node_modules/@storybook/ui/dist/components/sidebar/treeview/treeview.js
index 9db2012..15d3ffc 100644
--- a/node_modules/@storybook/ui/dist/components/sidebar/treeview/treeview.js
+++ b/node_modules/@storybook/ui/dist/components/sidebar/treeview/treeview.js
@@ -586,14 +586,14 @@ TreeState.propTypes = {
   prefix: _propTypes["default"].string.isRequired,
   dataset: _propTypes["default"].shape({}).isRequired,
   selectedId: _propTypes["default"].string,
-  Filter: _propTypes["default"].element,
-  List: _propTypes["default"].element,
-  Title: _propTypes["default"].element,
-  Link: _propTypes["default"].element,
-  Leaf: _propTypes["default"].element,
-  Head: _propTypes["default"].element,
-  Section: _propTypes["default"].element,
-  Message: _propTypes["default"].element
+  Filter: _propTypes["default"].elementType,
+  List: _propTypes["default"].elementType,
+  Title: _propTypes["default"].elementType,
+  Link: _propTypes["default"].elementType,
+  Leaf: _propTypes["default"].elementType,
+  Head: _propTypes["default"].elementType,
+  Section: _propTypes["default"].elementType,
+  Message: _propTypes["default"].elementType
 };
 TreeState.defaultProps = {
   selectedId: null,

[shilman]

Yo-ho-ho!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.2.0-alpha.43 containing PR #7408 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[MrBugatti]

Hello, I'm on latest version and still having same issues.

[lonyele]

@MrBugatti which error are you seeing?
This should be fixed by #7405

1) Warning: Failed prop type: Invalid prop `options.isToolshown` of type `boolean` supplied to `Layout`, expected `string`.

and this should be fixed by #7408

3) Warning: Failed prop type: Invalid prop `Filter` of type `object` supplied to `TreeState`, expected a single ReactElement.
4) Warning: Failed prop type: Invalid prop `List` of type `object` supplied to `TreeState`, expected a single ReactElement.
5) Warning: Failed prop type: Invalid prop `Title` of type `object` supplied to `TreeState`, expected a single ReactElement.
6) Warning: Failed prop type: Invalid prop `Link` of type `function` supplied to `TreeState`, expected a single ReactElement.
7) Warning: Failed prop type: Invalid prop `Leaf` of type `function` supplied to `TreeState`, expected a single ReactElement.
8) Warning: Failed prop type: Invalid prop `Head` of type `function` supplied to `TreeState`, expected a single ReactElement.
9) Warning: Failed prop type: Invalid prop `Section` of type `object` supplied to `TreeState`, expected a single ReactElement
10) Warning: Failed prop type: Invalid prop `Message` of type `function` supplied to `TreeState`, expected a single ReactElement.

and this one has been around for awhile #6998

2) The pseudo class ":first-child" is potentially unsafe when doing server-side rendering. Try changing it to ":first-of-type".