Merge branch 'next' into task/i-have-removed-storysource-loader

addons/a11y/src/components/A11YPanel.tsx

@@ -34,15 +34,15 @@ const Icon = styled(Icons)(
       : {}
 );
 
-const Passes = styled.span(({ theme }) => ({
+const Passes = styled.span<{}>(({ theme }) => ({
   color: theme.color.positive,
 }));
 
-const Violations = styled.span(({ theme }) => ({
+const Violations = styled.span<{}>(({ theme }) => ({
   color: theme.color.negative,
 }));
 
-const Incomplete = styled.span(({ theme }) => ({
+const Incomplete = styled.span<{}>(({ theme }) => ({
   color: theme.color.warning,
 }));
 

addons/a11y/src/components/Report/Elements.tsx

@@ -11,7 +11,7 @@ const Item = styled.li({
   fontWeight: 600,
 });
 
-const ItemTitle = styled.span(({ theme }) => ({
+const ItemTitle = styled.span<{}>(({ theme }) => ({
   borderBottom: `1px solid ${theme.appBorderColor}`,
   width: '100%',
   display: 'flex',

addons/a11y/src/components/Report/HighlightToggle.tsx

@@ -31,7 +31,7 @@ enum CheckBoxStates {
   INDETERMINATE,
 }
 
-const Checkbox = styled.input(({ disabled }) => ({
+const Checkbox = styled.input<{ disabled: boolean }>(({ disabled }) => ({
   cursor: disabled ? 'not-allowed' : 'pointer',
 }));
 

addons/a11y/src/components/Report/Item.tsx

@@ -10,7 +10,7 @@ import { Tags } from './Tags';
 import { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';
 
-const Wrapper = styled.div(({ theme }) => ({
+const Wrapper = styled.div<{}>(({ theme }) => ({
   display: 'flex',
   width: '100%',
   borderBottom: `1px solid ${theme.appBorderColor}`,
@@ -30,7 +30,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
   display: 'inline-flex',
 }));
 
-const HeaderBar = styled.div(({ theme }) => ({
+const HeaderBar = styled.div<{}>(({ theme }) => ({
   padding: theme.layoutMargin,
   paddingLeft: theme.layoutMargin - 3,
   background: 'none',

addons/a11y/src/components/Report/Tags.tsx

@@ -9,7 +9,7 @@ const Wrapper = styled.div({
   margin: '12px 0',
 });
 
-const Item = styled.div(({ theme }) => ({
+const Item = styled.div<{}>(({ theme }) => ({
   margin: '0 6px',
   padding: '5px',
   border: `1px solid ${theme.appBorderColor}`,

addons/a11y/src/components/Report/__snapshots__/HighlightToggle.test.js.snap

@@ -321,7 +321,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
         }
       }
     >
-      <ConnectFunction>
+      <Connect(HighlightToggle)>
         <HighlightToggle
           addElement={[Function]}
           elementsToHighlight={Array []}
@@ -346,7 +346,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
             />
           </Styled(input)>
         </HighlightToggle>
-      </ConnectFunction>
+      </Connect(HighlightToggle)>
     </ThemeProvider>
   </ThemedHighlightToggle>
 </Provider>

addons/a11y/src/components/Tabs.tsx

@@ -15,7 +15,7 @@ const Container = styled.div({
   minHeight: '100%',
 });
 
-const HighlightToggleLabel = styled.label(({ theme }) => ({
+const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
   cursor: 'pointer',
   userSelect: 'none',
   marginBottom: '3px',
@@ -77,7 +77,7 @@ const Item = styled.button(
 
 const TabsWrapper = styled.div({});
 
-const List = styled.div(({ theme }) => ({
+const List = styled.div<{}>(({ theme }) => ({
   boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
   background: 'rgba(0, 0, 0, .05)',
   display: 'flex',

addons/actions/src/components/ActionLogger/style.tsx

@@ -10,7 +10,7 @@ export const Action = styled.div({
   alignItems: 'flex-start',
 });
 
-export const Counter = styled.div(({ theme }) => ({
+export const Counter = styled.div<{}>(({ theme }) => ({
   backgroundColor: opacify(0.5, theme.appBorderColor),
   color: theme.color.inverseText,
   fontSize: theme.typography.size.s1,

addons/events/src/components/Event.tsx

@@ -17,7 +17,7 @@ interface StyledTextareaProps {
 
 const StyledTextarea = styled(({ shown, failed, ...rest }: StyledTextareaProps) => (
   <Textarea {...rest} />
-))(
+))<{ shown: boolean; failed: boolean }>(
   {
     flex: '1 0 0',
     boxSizing: 'border-box',

addons/info/src/__snapshots__/index.test.js.snap

@@ -310,7 +310,7 @@ exports[`addon Info should render <Info /> for memoized component 1`] = `
       <div>
         It's a 
          story:
-        <TestComponent
+        <Memo(TestComponent)
           array={
             Array [
               1,
@@ -368,7 +368,7 @@ exports[`addon Info should render <Info /> for memoized component 1`] = `
               </li>
             </ul>
           </div>
-        </TestComponent>
+        </Memo(TestComponent)>
       </div>
     </div>
     <button

addons/knobs/src/components/Panel.tsx

@@ -225,8 +225,6 @@ export default class KnobPanel extends PureComponent<KnobPanelProps> {
         render: ({ active }) => (
           <TabWrapper key={knobKeyGroupId} active={active}>
             <PropForm
-              // false positive
-              // eslint-disable-next-line no-use-before-define
               knobs={knobsArray.filter(
                 knob => (knob.groupId || DEFAULT_GROUP_ID) === knobKeyGroupId
               )}

addons/knobs/src/components/types/Color.tsx

@@ -32,7 +32,7 @@ interface ColorButtonProps {
 
 const { Button } = Form;
 
-const Swatch = styled.div(({ theme }) => ({
+const Swatch = styled.div<{}>(({ theme }) => ({
   position: 'absolute',
   top: '50%',
   transform: 'translateY(-50%)',

addons/notes/src/Panel.tsx

@@ -19,7 +19,7 @@ import { formatter } from './formatter';
 
 import { PARAM_KEY, Parameters } from './shared';
 
-const Panel = styled.div(({ theme }) => ({
+const Panel = styled.div<{}>(({ theme }) => ({
   padding: '3rem 40px',
   boxSizing: 'border-box',
   width: '100%',

addons/ondevice-knobs/src/PropField.js

@@ -31,6 +31,18 @@ PropField.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.any,
+    hideLabel: PropTypes.bool,
+    type: PropTypes.oneOf([
+      'text',
+      'number',
+      'color',
+      'boolean',
+      'object',
+      'select',
+      'array',
+      'date',
+      'button',
+    ]),
   }).isRequired,
   onChange: PropTypes.func.isRequired,
   onPress: PropTypes.func.isRequired,

addons/ondevice-knobs/src/types/Array.js

@@ -37,6 +37,7 @@ ArrayType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.array,
+    separator: PropTypes.string,
   }),
   onChange: PropTypes.func,
 };

addons/ondevice-knobs/src/types/Number.js

@@ -62,6 +62,10 @@ NumberType.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
     value: PropTypes.number,
+    step: PropTypes.number,
+    min: PropTypes.number,
+    max: PropTypes.number,
+    range: PropTypes.bool,
   }),
   onChange: PropTypes.func,
 };

addons/storyshots/storyshots-puppeteer/package.json

@@ -32,7 +32,7 @@
     "puppeteer": "^1.12.2"
   },
   "peerDependencies": {
-    "@storybook/addon-storyshots": "5.2.0-alpha.36",
+    "@storybook/addon-storyshots": "5.2.0-alpha.37",
     "puppeteer": "^1.12.2"
   },
   "publishConfig": {

addons/viewport/src/Tool.tsx

@@ -118,7 +118,7 @@ const ActiveViewportSize = styled.div(() => ({
   display: 'inline-flex',
 }));
 
-const ActiveViewportLabel = styled.div(({ theme }) => ({
+const ActiveViewportLabel = styled.div<{}>(({ theme }) => ({
   display: 'inline-block',
   textDecoration: 'none',
   padding: '10px',
@@ -137,7 +137,7 @@ const IconButtonWithLabel = styled(IconButton)(() => ({
   alignItems: 'center',
 }));
 
-const IconButtonLabel = styled.div(({ theme }) => ({
+const IconButtonLabel = styled.div<{}>(({ theme }) => ({
   fontSize: theme.typography.size.s2 - 1,
   marginLeft: '10px',
 }));

docs/package.json

@@ -15,8 +15,8 @@
     "serve": "gatsby serve"
   },
   "dependencies": {
-    "@storybook/components": "5.2.0-alpha.36",
-    "@storybook/theming": "5.2.0-alpha.36",
+    "@storybook/components": "5.2.0-alpha.37",
+    "@storybook/theming": "5.2.0-alpha.37",
     "babel-loader": "^6.4.1",
     "babel-plugin-styled-components": "^1.10.6",
     "bootstrap": "^4.3.1",

docs/src/templates/_docstemplate.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 import React from 'react';
 import PropTypes from 'prop-types';
 import capitalize from 'lodash/capitalize';

examples/angular-cli/src/stories/customControlValueAccessor/custom-cva.component.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-use-before-define */
 import { Component, forwardRef } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 

examples/official-storybook/package.json

@@ -58,6 +58,7 @@
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "storybook-chromatic": "^1.3.3",
+    "terser-webpack-plugin": "^1.2.4",
     "ts-loader": "^6.0.0",
     "uuid": "^3.3.2",
     "webpack": "^4.33.0"

examples/official-storybook/webpack.config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const TerserWebpackPlugin = require('terser-webpack-plugin');
 
 module.exports = async ({ config }) => ({
   ...config,
@@ -54,4 +55,21 @@ module.exports = async ({ config }) => ({
     ...config.resolve,
     extensions: [...(config.resolve.extensions || []), '.ts', '.tsx'],
   },
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+    },
+    runtimeChunk: true,
+    minimizer: [
+      new TerserWebpackPlugin({
+        cache: false,
+        parallel: false,
+        sourceMap: false,
+        terserOptions: {
+          mangle: false,
+          keep_fnames: true,
+        },
+      }),
+    ],
+  },
 });

examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap

@@ -361,15 +361,13 @@ exports[`Storyshots Welcome Welcome 1`] = `
     <h1>
       Welcome to Storybook for Svelte
     </h1>
-    
-			  
+     
     <p>
       
 			    This is a UI component dev environment for your svelte app.
 			  
     </p>
-    
-			  
+     
     <p>
       
 			    We've added some basic stories inside the 
@@ -388,17 +386,13 @@ exports[`Storyshots Welcome Welcome 1`] = `
 			    You can have as many stories as you want.
 			  
     </p>
-    
-
-			  
+     
     <h1
       class="logo svelte-5n9a95"
     >
       Svelte
     </h1>
-    
-
-			  
+     
     <p>
       
 			    Just like that, you can add your own components as stories.
@@ -422,8 +416,7 @@ exports[`Storyshots Welcome Welcome 1`] = `
       .)
 			  
     </p>
-    
-			  
+     
     <p>
       
 			    Usually we create stories with smaller UI components in the app.
@@ -442,16 +435,14 @@ exports[`Storyshots Welcome Welcome 1`] = `
 			    section in our documentation.
 			  
     </p>
-    
-			  
+     
     <p
       class="note svelte-5n9a95"
     >
       <b>
         NOTE:
       </b>
-      
-			    
+       
       <br />
       
 			    Have a look at the

lib/api/src/index.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/no-multi-comp */
 import React, { ReactElement, Component, useContext, useEffect } from 'react';
 import memoize from 'memoizerific';
 // @ts-ignore shallow-equal is not in DefinitelyTyped

lib/cli/lib/initiate.js

@@ -195,7 +195,7 @@ const installStorybook = (projectType, options) => {
 
         // Add a new line for the clear visibility.
         logger.log();
-        // eslint-disable-next-line no-use-before-define
+
         return projectTypeInquirer(options);
     }
   };

lib/components/src/ActionBar/ActionBar.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 
 import { styled } from '@storybook/theming';
 
-const Container = styled.div(({ theme }) => ({
+const Container = styled.div<{}>(({ theme }) => ({
   position: 'absolute',
   bottom: 0,
   right: 0,
@@ -12,7 +12,7 @@ const Container = styled.div(({ theme }) => ({
   zIndex: 1,
 }));
 
-export const ActionButton = styled.button(({ theme }) => ({
+export const ActionButton = styled.button<{}>(({ theme }) => ({
   border: '0 none',
   padding: '4px 10px',
   cursor: 'pointer',

lib/components/src/ScrollArea/ScrollArea.tsx

@@ -13,7 +13,9 @@ export interface ScrollProps {
   [key: string]: any;
 }
 
-const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => <SimpleBar {...rest} />)(
+const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => <SimpleBar {...rest} />)<
+  ScrollProps
+>(
   ({ vertical }) =>
     !vertical
       ? {

lib/components/src/blocks/ColorPalette.tsx

@@ -4,11 +4,11 @@ import { transparentize } from 'polished';
 
 import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
 
-const ItemTitle = styled.div(({ theme }) => ({
+const ItemTitle = styled.div<{}>(({ theme }) => ({
   fontWeight: theme.typography.weight.bold,
 }));
 
-const ItemSubtitle = styled.div(({ theme }) => ({
+const ItemSubtitle = styled.div<{}>(({ theme }) => ({
   color:
     theme.base === 'light'
       ? transparentize(0.2, theme.color.defaultText)
@@ -21,7 +21,7 @@ const ItemDescription = styled.div({
   marginTop: 5,
 });
 
-const SwatchLabel = styled.div(({ theme }) => ({
+const SwatchLabel = styled.div<{}>(({ theme }) => ({
   flex: 1,
   textAlign: 'center',
   fontFamily: theme.typography.fonts.mono,
@@ -49,7 +49,7 @@ const Swatch = styled.div({
   flex: 1,
 });
 
-const SwatchColors = styled.div(({ theme }) => ({
+const SwatchColors = styled.div<{}>(({ theme }) => ({
   ...getBlockBackgroundStyle(theme),
   display: 'flex',
   flexDirection: 'row',
@@ -85,7 +85,7 @@ const ListSwatches = styled.div({
   flex: 1,
 });
 
-const ListHeading = styled.div(({ theme }) => ({
+const ListHeading = styled.div<{}>(({ theme }) => ({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',

lib/components/src/blocks/DocsPage.tsx

@@ -12,7 +12,7 @@ export interface DocsPageProps {
   subtitle?: string;
 }
 
-const Title = styled.h1(({ theme }) => ({
+const Title = styled.h1<{}>(({ theme }) => ({
   // overrides h1 in DocumentFormatting
   '&&': {
     fontSize: theme.typography.size.m3,
@@ -25,7 +25,7 @@ const Title = styled.h1(({ theme }) => ({
   },
 }));
 
-const Subtitle = styled.h2(({ theme }) => ({
+const Subtitle = styled.h2<{}>(({ theme }) => ({
   // overrides h2 in DocumentFormatting
   '&&': {
     fontWeight: theme.typography.weight.regular,
@@ -52,7 +52,7 @@ export const DocsContent = styled(DocumentFormatting)({
   width: '100%',
 });
 
-export const DocsWrapper = styled.div(({ theme }) => ({
+export const DocsWrapper = styled.div<{}>(({ theme }) => ({
   background: theme.background.content,
   display: 'flex',
   justifyContent: 'center',

lib/components/src/blocks/EmptyBlock.tsx

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';
 import { transparentize } from 'polished';
 
-const Wrapper = styled.div(({ theme }) => ({
+const Wrapper = styled.div<{}>(({ theme }) => ({
   backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
   borderRadius: theme.appBorderRadius,
   border: `1px dashed ${theme.appBorderColor}`,

lib/components/src/blocks/IconGallery.tsx

@@ -8,7 +8,7 @@ const ItemLabel = styled.div({
   lineHeight: 1.2,
 });
 
-const ItemSpecimen = styled.div(({ theme }) => ({
+const ItemSpecimen = styled.div<{}>(({ theme }) => ({
   ...getBlockBackgroundStyle(theme),
   overflow: 'hidden',
   height: 40,

lib/components/src/blocks/Preview.tsx

@@ -26,7 +26,7 @@ const ChildrenContainer = styled.div<PreviewProps>(({ isColumn, columns }) => ({
   },
 }));
 
-const StyledSource = styled(Source)(({ theme }) => ({
+const StyledSource = styled(Source)<{}>(({ theme }) => ({
   margin: 0,
   borderTopLeftRadius: 0,
   borderTopRightRadius: 0,

lib/components/src/blocks/PropsTable/PropRow.tsx

@@ -27,13 +27,13 @@ interface PropRowProps {
 
 const Name = styled.span({ fontWeight: 'bold' });
 
-const Required = styled.span(({ theme }) => ({
+const Required = styled.span<{}>(({ theme }) => ({
   color: theme.color.negative,
   fontFamily: theme.typography.fonts.mono,
   cursor: 'help',
 }));
 
-const StyledPropDef = styled.div(({ theme }) => ({
+const StyledPropDef = styled.div<{}>(({ theme }) => ({
   color:
     theme.base === 'light'
       ? transparentize(0.4, theme.color.defaultText)

lib/components/src/blocks/PropsTable/PropsTable.tsx

@@ -5,7 +5,7 @@ import { PropRow } from './PropRow';
 import { PropDef } from './PropDef';
 import { EmptyBlock } from '../EmptyBlock';
 
-export const Table = styled.table(({ theme }) => ({
+export const Table = styled.table<{}>(({ theme }) => ({
   '&&': {
     // Resets for cascading/system styles
     borderCollapse: 'collapse',

lib/components/src/blocks/Source.tsx

@@ -4,7 +4,7 @@ import { EmptyBlock } from './EmptyBlock';
 
 import { SyntaxHighlighter } from '../syntaxhighlighter/syntaxhighlighter';
 
-const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
+const StyledSyntaxHighlighter = styled(SyntaxHighlighter)<{}>(({ theme }) => ({
   // DocBlocks-specific styling and overrides
   margin: '25px 0 40px',
   boxShadow:

lib/components/src/blocks/Typeset.tsx

@@ -4,7 +4,7 @@ import { transparentize } from 'polished';
 
 import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
 
-const Label = styled.div(({ theme }) => ({
+const Label = styled.div<{}>(({ theme }) => ({
   marginRight: 30,
   fontSize: `${theme.typography.size.s1}px`,
   color:
@@ -27,7 +27,7 @@ const TypeSpecimen = styled.div({
   '&:not(:last-child)': { marginBottom: '1rem' },
 });
 
-const Wrapper = styled.div(({ theme }) => ({
+const Wrapper = styled.div<{}>(({ theme }) => ({
   ...getBlockBackgroundStyle(theme),
   margin: '25px 0 40px',
   padding: '30px 20px',

lib/components/src/form/field/field.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import { styled } from '@storybook/theming';
 
-const Wrapper = styled.label(({ theme }) => ({
+const Wrapper = styled.label<{}>(({ theme }) => ({
   display: 'flex',
   borderBottom: `1px solid ${theme.appBorderColor}`,
   margin: '0 15px',
@@ -12,7 +12,7 @@ const Wrapper = styled.label(({ theme }) => ({
   },
 }));
 
-const Label = styled.span(({ theme }) => ({
+const Label = styled.span<{}>(({ theme }) => ({
   minWidth: 100,
   fontWeight: theme.typography.weight.bold,
   marginRight: 15,

lib/components/src/tooltip/TooltipLinkList.tsx

@@ -3,7 +3,7 @@ import { styled } from '@storybook/theming';
 
 import ListItem, { LinkWrapperType } from './ListItem';
 
-const List = styled.div(
+const List = styled.div<{}>(
   {
     minWidth: 180,
     overflow: 'hidden',

lib/core/src/server/build-dev.js

@@ -255,9 +255,7 @@ export async function buildDevStandalone(options) {
         type: 'confirm',
         default: true,
         name: 'shouldChangePort',
-        message: `Port ${
-          options.port
-        } is not available. Would you like to run Storybook on port ${port} instead?`,
+        message: `Port ${options.port} is not available. Would you like to run Storybook on port ${port} instead?`,
       });
 
       if (!shouldChangePort) {

lib/ui/src/__tests__/index.js

@@ -1,14 +1,12 @@
 import renderStorybookUI from '..';
 
 describe('Main API', () => {
-  describe('default export', () => {
-    it('should fail if provider is not extended from the base Provider', () => {
-      const run = () => {
-        const fakeProvider = {};
-        renderStorybookUI(null, fakeProvider);
-      };
+  it('should fail if provider is not extended from the base Provider', () => {
+    const run = () => {
+      const fakeProvider = {};
+      renderStorybookUI(null, fakeProvider);
+    };
 
-      expect(run).toThrow(/base Provider/);
-    });
+    expect(run).toThrow(/base Provider/);
   });
 });

lib/ui/src/components/layout/container.js

@@ -549,9 +549,10 @@ Layout.propTypes = {
     showNav: PropTypes.bool.isRequired,
     showPanel: PropTypes.bool.isRequired,
     panelPosition: PropTypes.string.isRequired,
+    isToolshown: PropTypes.string.isRequired,
   }).isRequired,
   viewMode: PropTypes.oneOf(['story', 'info', 'docs']),
-  theme: PropTypes.shape({}).isRequired,
+  theme: PropTypes.shape({ layoutMargin: PropTypes.number }).isRequired,
 };
 Layout.defaultProps = {
   viewMode: undefined,

lib/ui/src/components/layout/mobile.js

@@ -204,6 +204,7 @@ Mobile.propTypes = {
   viewMode: PropTypes.oneOf(['story', 'info', 'docs']),
   options: PropTypes.shape({
     initialActive: PropTypes.number,
+    isToolshown: PropTypes.bool,
   }).isRequired,
 };
 Mobile.defaultProps = {

lib/ui/src/components/panel/panel.js

@@ -80,7 +80,10 @@ const AddonPanel = React.memo(({ panels, actions, selectedPanel, panelPosition }
 AddonPanel.displayName = 'AddonPanel';
 AddonPanel.propTypes = {
   selectedPanel: PropTypes.string,
-  actions: PropTypes.shape({}).isRequired,
+  actions: PropTypes.shape({
+    togglePosition: PropTypes.func,
+    toggleVisibility: PropTypes.func,
+  }).isRequired,
   panels: PropTypes.shape({}).isRequired,
   panelPosition: PropTypes.oneOf(['bottom', 'right']),
 };

lib/ui/src/components/sidebar/treeview/treeview.js

@@ -391,12 +391,26 @@ class TreeState extends PureComponent {
 TreeState.propTypes = {
   prefix: PropTypes.string.isRequired,
   dataset: PropTypes.shape({}).isRequired,
-  // We do use this prop, eslint is confused
-  // eslint-disable-next-line react/no-unused-prop-types
   selectedId: PropTypes.string,
+  Filter: PropTypes.element,
+  List: PropTypes.element,
+  Title: PropTypes.element,
+  Link: PropTypes.element,
+  Leaf: PropTypes.element,
+  Head: PropTypes.element,
+  Section: PropTypes.element,
+  Message: PropTypes.element,
 };
 TreeState.defaultProps = {
   selectedId: null,
+  Filter: undefined,
+  List: undefined,
+  Title: undefined,
+  Link: undefined,
+  Leaf: undefined,
+  Head: undefined,
+  Section: undefined,
+  Message: undefined,
 };
 
 export { TreeState, Tree };

lib/ui/src/index.js

@@ -15,8 +15,15 @@ ThemeProvider.displayName = 'ThemeProvider';
 HelmetProvider.displayName = 'HelmetProvider';
 
 const Container = process.env.XSTORYBOOK_EXAMPLE_APP ? React.StrictMode : React.Fragment;
-// eslint-disable-next-line no-undef
-const docsMode = !!DOCS_MODE; // webpack-injected
+
+const getDocsMode = () => {
+  try {
+    // eslint-disable-next-line no-undef
+    return !!DOCS_MODE; // webpack injected
+  } catch (e) {
+    return false;
+  }
+};
 
 const Root = ({ provider }) => (
   <Container key="container">
@@ -28,7 +35,7 @@ const Root = ({ provider }) => (
               key="manager"
               provider={provider}
               {...locationData}
-              docsMode={docsMode}
+              docsMode={getDocsMode()}
             >
               {({ state }) => (
                 <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
@@ -56,4 +63,4 @@ function renderStorybookUI(domNode, provider) {
 }
 
 export { Provider };
-export default renderStorybookUI;
+export { renderStorybookUI as default };

lib/ui/src/keyboard/keyCodes.ts

@@ -1,5 +1,4 @@
 /* eslint-disable no-shadow */
-/* eslint-disable no-use-before-define */
 /* eslint-disable no-bitwise */
 /* eslint-disable no-underscore-dangle */
 import { OperatingSystem } from './platform';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/root",
-  "version": "5.2.0-alpha.36",
+  "version": "5.2.0-alpha.37",
   "private": true,
   "description": "Storybook is an open source tool for developing UI components in isolation for React, Vue and Angular. It makes building stunning UIs organized and efficient.",
   "keywords": [

scripts/bootstrap.js

@@ -23,7 +23,6 @@ try {
   // give the filesystem some time
   cooldown = 1000;
 } finally {
-  // eslint-disable-next-line no-use-before-define
   setTimeout(run, cooldown);
 }
 
@@ -83,7 +82,6 @@ function run() {
     command: () => {
       // run all pre tasks
       pre
-        // eslint-disable-next-line no-use-before-define
         .map(key => tasks[key])
         .forEach(task => {
           if (task.check()) {