Upgrade all dependencies (#7329)

Upgrade all dependencies

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,
@@ -59,4 +60,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
       ? {