chore(deps): update storybook to v6 (#1638)

* chore(deps-dev): bump @storybook/react from 5.3.18 to 6.0.26

Bumps [@storybook/react](https://github.com/storybookjs/storybook/tree/HEAD/app/react) from 5.3.18 to 6.0.26.
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v6.0.26/app/react)

Signed-off-by: dependabot-preview[bot] <[email protected]>

* chore: migrate storybook to v6

* chore: add node types to tsconfig

* chore: get rid of tsconfig.build paths

* chore: fix menu expander

* chore: fix storybook links

* chore: update snapshots

Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>

.storybook/addons/menu-expander/index.js

@@ -1,52 +1,75 @@
 import { waitForElements } from '../helpers'
 
 const disableClickHandlers = item => {
-  item.style = 'pointer-events: none; padding-left: 10px'
-
-  // forbid event click handlers
   item.addEventListener('click', e => {
     e.stopPropagation()
     e.preventDefault()
   })
 }
 
 const removeCaret = item => {
-  item.children[0].querySelector('span').remove()
+  item.querySelector('.sidebar-expander').remove()
+  item.querySelector('.sidebar-svg-icon').remove()
 }
 
 const applyChildrenStyling = child => {
   child.style = 'margin-bottom: 15px; margin-left: -15px'
 }
 
 const applyCategoryStyling = item => {
-  item.style = 'text-transform: uppercase;'
+  item.style = `
+    text-transform: uppercase;
+    color: rgba(51,51,51,0.5);
+    letter-spacing: 0.35em;
+    line-height: 24px;
+    padding-left: 20px;
+    pointer-events:none;
+    font-weight: 900;
+    font-size: 11px;
+  `
+}
+
+const withSavingInitialPath = (cb, api) => {
+  const { path } = api.getUrlState()
+  const { hash } = window.location
+  const intitialPath = `${path}${hash ?? ''}`
+  cb()
+  api.navigate(intitialPath)
 }
 
-const autoExpandMenu = menuItems => {
-  const componentChildren = []
+const expandAll = menuItems => {
   menuItems.forEach(item => {
+    item.click()
+
     removeCaret(item)
 
     if (item.nextSibling && item.nextSibling.nodeName == 'DIV') {
-      componentChildren.push(item.nextSibling)
+      applyChildrenStyling(item.nextSibling)
     }
 
     applyCategoryStyling(item)
-    disableClickHandlers(item) // for future reference if we decide to get back to previous structure
-    item.remove()
+    disableClickHandlers(item)
   })
-
-  componentChildren.forEach(child => applyChildrenStyling(child))
 }
 
 export const scheduleWork = api => async () => {
   try {
-    // wait for Sidebar menu to be rendered
-    await waitForElements('section > a')
-    await api.expandAll()
+    const sidebarLinksSelector = 'section > a'
+    const menuItems = await waitForElements(sidebarLinksSelector)
+
+    /*
+    TODO: replace with api.expandAll when https://github.com/storybookjs/storybook/pull/12980 is merged.
+
+    In v5 there is an api.expandAll() method. It emits STORIES_EXPAND_ALL event.
+    The Treeview component is listening for this event and expands on event emit.
+    Code: https://github.com/atanasster/storybook/blob/1112cd1e76c6fc73425342f2c5c8bfc621a4fe33/lib/ui/src/components/sidebar/treeview/treeview.js#L313
+
+    In v6 there is still such a method. However, it's not listened by the new useExpanded hook.
+    Code: https://github.com/storybookjs/storybook/blob/d7dd6588cab918914409d443a4c09f156ea5c4e8/lib/ui/src/components/sidebar/useExpanded.ts#L43
 
-    const menuItems = await waitForElements('section > a')
-    autoExpandMenu(menuItems)
+    That's why we need to click every item on by one and return to the initial one at the end.
+    */
+    withSavingInitialPath(() => expandAll(menuItems), api)
   } catch (e) {
     console.warn('Can not find Picasso menu section items. Error: ', e)
   }

.storybook/addons/menu-expander/register.js

@@ -1,10 +1,10 @@
-import { STORY_RENDERED } from '@storybook/core-events'
+import { SET_STORIES, SELECT_STORY } from '@storybook/core-events'
 import addons from '@storybook/addons'
 
 import { scheduleWork } from './index'
 
 const ADDON_ID = 'menu-expand'
 
 addons.register(ADDON_ID, api => {
-  api.on(STORY_RENDERED, scheduleWork(api))
+  api.once(SET_STORIES, scheduleWork(api))
 })

.storybook/components/CodeExample/CodeExample.tsx

@@ -31,6 +31,7 @@ interface Props {
   permanentLink: string
   src: string
   showEditCode?: boolean
+  module?: string
 }
 
 const imports: Record<string, object> = {

.storybook/components/PicassoBook/Book.js

@@ -30,7 +30,7 @@ in '.storybook/config.js'.
     }
 
     return {
-      createPage: (title, info) => {
+      createPage: (title, info = undefined) => {
         const page = new Page({ title, info, section: name })
         this.collection.push(page)
         return page

.storybook/components/PicassoBook/Chapter.tsx

@@ -63,7 +63,7 @@ class Chapter extends Base {
     return section
   }
 
-  addTextSection = (text: string, options: Record<string, string>) => {
+  addTextSection = (text: string, options: Record<string, string> = {}) => {
     if (TEST_ENV === 'visual') {
       return this
     }
@@ -166,7 +166,7 @@ class Chapter extends Base {
     const sectionLinkId = normalize(sectionId)
     const permanentLink = generateUrl({
       host: getHost(),
-      kind: this.page.getPicassoSection(this.page.section),
+      kind: this.page.section,
       type: this.page.title,
       section: sectionId
     })

.storybook/components/PicassoBook/Page.js

@@ -33,14 +33,14 @@ class Page extends Base {
     return this
   }
 
-  createChapter = (title, info, options = {}) => {
+  createChapter = (title = undefined, info = undefined, options = {}) => {
     const chapter = new Chapter({ title, info, page: this, ...options })
     this.collection.push(chapter)
 
     return chapter
   }
 
-  createTabChapter = (title, info, options = {}) => {
+  createTabChapter = (title, info = undefined, options = {}) => {
     const chapter = new TabChapter({ title, info, page: this, ...options })
     this.collection.push(chapter)
 
@@ -64,14 +64,9 @@ class Page extends Base {
     }
   }
 
-  getPicassoSection(section) {
-    return section + '|Folder'
-  }
-
   generateHumanStories() {
     const page = this.toStoryBook()
-    const section = this.getPicassoSection(page.section)
-    const stories = storiesOf(section, module)
+    const stories = storiesOf(page.section, module)
     stories.addWithChapters(page.title, page)
   }
 

.storybook/components/PicassoBook/components/PropsTable/PropTypeTableCell.tsx

@@ -24,11 +24,7 @@ const PropTypeTableCell: FunctionComponent<Props> = props => {
   if (type.description) {
     return (
       <Table.Cell className={className}>
-        <Tooltip
-          content={<Markdown>{type.description}</Markdown>}
-          classes={{ tooltip: classes.tooltip }}
-          interactive
-        >
+        <Tooltip content={<Markdown>{type.description}</Markdown>} interactive>
           <div>
             <span className={classes.tooltipTarget}>{type.name}</span>
             <sup>?</sup>

.storybook/components/PicassoBook/components/PropsTable/styles.ts

@@ -64,11 +64,6 @@ export default ({ palette }: Theme) =>
       marginRight: '0.2em',
       marginBottom: '0.2em'
     },
-    tooltip: {
-      fontWeight: 600,
-      fontSize: '0.9em',
-      maxWidth: 'none'
-    },
     markdown: {
       '& code': {
         backgroundColor: 'rgb(236, 236, 236, 0.5)',

.storybook/main.js

@@ -0,0 +1,112 @@
+const webpack = require('webpack')
+const path = require('path')
+const { IgnoreNotFoundPlugin } = require('./plugins')
+
+// example1: /packages/picasso/src/Button/Button.tsx
+// example2: /packages/picasso-lab/src/Slider/Slider.tsx
+const PACKAGES_COMPONENT_DECLARATION_FILE_REGEXP = /packages\/.*\/src\/(.*)\/\1.tsx$/
+
+const { env } = process
+const isDevelopment = env.NODE_ENV !== 'production' && env.NODE_ENV !== 'test'
+
+const tsConfigFile = path.join(__dirname, './tsconfig.json')
+const threadLoaders = [{ loader: 'cache-loader' }, { loader: 'thread-loader' }]
+
+module.exports = {
+  addons: [
+    'storybook-readme/register',
+    '@storybook/addon-viewport/register',
+    './addons/menu-expander/register',
+    './addons/anchor-link-handler/register',
+    './addons/document-title/register'
+  ],
+  typescript: {
+    check: isDevelopment,
+    checkOptions: {
+      tsconfig: tsConfigFile,
+      checkSyntacticErrors: true
+    },
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      tsconfigPath: tsConfigFile,
+      propFilter: prop => {
+        if (prop.description.length === 0) return false
+
+        if (prop.parent) {
+          return !prop.parent.fileName.includes('node_modules')
+        }
+
+        return true
+      }
+    }
+  },
+  webpackFinal: config => {
+    config.entry = [
+      'core-js/stable',
+      'regenerator-runtime/runtime',
+      ...config.entry
+    ]
+
+    config.module.rules.push({
+      test: /\.(ts|tsx)$/,
+      oneOf: [
+        {
+          test: PACKAGES_COMPONENT_DECLARATION_FILE_REGEXP,
+          use: threadLoaders
+        },
+        { use: threadLoaders }
+      ]
+    })
+
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '~': path.resolve(__dirname, '..'),
+      '@toptal/picasso': path.resolve(__dirname, '../packages/picasso/src'),
+      '@toptal/picasso-shared': path.resolve(
+        __dirname,
+        '../packages/shared/src'
+      ),
+      '@toptal/picasso/utils': path.resolve(
+        __dirname,
+        '../packages/picasso/src/utils'
+      ),
+      '@toptal/picasso/Icon': path.resolve(
+        __dirname,
+        '../packages/picasso/src/Icon'
+      ),
+      '@toptal/picasso-lab': path.resolve(
+        __dirname,
+        '../packages/picasso-lab/src'
+      ),
+      '@toptal/picasso-forms': path.resolve(
+        __dirname,
+        '../packages/picasso-forms/src'
+      ),
+      '@toptal/picasso-charts': path.resolve(
+        __dirname,
+        '../packages/picasso-charts/src'
+      ),
+      '@topkit/analytics-charts': path.resolve(
+        __dirname,
+        '../packages/topkit-analytics-charts/src'
+      )
+    }
+
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        TEST_ENV: JSON.stringify(env.TEST_ENV)
+      }),
+      // https://github.com/TypeStrong/ts-loader/issues/653
+      new IgnoreNotFoundPlugin(['OverridableComponent', 'StandardProps'])
+    )
+
+    config.node = {
+      fs: 'empty',
+      module: 'empty'
+    }
+
+    config.optimization.minimizer = []
+
+    return config
+  }
+}

.storybook/manager.js

@@ -1,5 +1,14 @@
-import 'storybook-readme/register'
-import '@storybook/addon-viewport/register'
-require('./addons/menu-expander/register')
-require('./addons/anchor-link-handler/register')
-require('./addons/document-title/register')
+import { create } from '@storybook/theming'
+import { addons } from '@storybook/addons'
+
+const theme = create({
+  base: 'light',
+  brandTitle: 'Picasso',
+  brandImage:
+    'https://user-images.githubusercontent.com/437214/54037817-b4da1800-41c7-11e9-81f5-59ed43e38500.png'
+})
+
+addons.setConfig({
+  showPanel: false,
+  theme
+})

.storybook/preview-head.html

@@ -124,10 +124,6 @@
     }
 
     root.style = 'padding: 0 !important'
-    // we have left here 10px margin for visual tests
-    // to make prettier screenshots and to avoid hiding
-    // box shadows from the captured screenshots for some components
-    document.body.style = 'padding: 0; margin: 10px !important;'
   }
 
   function onLoad() {

.storybook/preview.js

@@ -1,37 +1,20 @@
 import React from 'react'
-import {
-  configure,
-  setAddon,
-  addDecorator,
-  addParameters
-} from '@storybook/react'
+import { configure, setAddon, addDecorator } from '@storybook/react'
 import chaptersAddon from 'react-storybook-addon-chapters'
-import { create } from '@storybook/theming'
 
 import Picasso from '@toptal/picasso-shared'
 import PicassoBook from './components/PicassoBook'
 
+export const parameters = { layout: 'padded' }
+
 const loadFonts = TEST_ENV !== 'visual'
 const withPicasso = story => (
   <Picasso loadFonts={loadFonts} fixViewport={false} loadFavicon={false}>
     {story()}
   </Picasso>
 )
 
-addParameters({
-  options: {
-    theme: create({
-      base: 'light',
-      brandTitle: 'Picasso',
-      brandImage:
-        'https://user-images.githubusercontent.com/437214/54037817-b4da1800-41c7-11e9-81f5-59ed43e38500.png'
-    }),
-    showPanel: false
-  }
-})
-
 const DECORATORS = [withPicasso]
-
 const ADDONS = [chaptersAddon]
 
 DECORATORS.forEach(decorator => addDecorator(decorator))

.storybook/stories/Contributing.tsx

@@ -15,7 +15,7 @@ import CREATING_EXAMPLES from '../../docs/contribution/creating-examples.md'
 // @ts-ignore
 import VISUAL_SNAPSHOTS from '../../docs/contribution/visual-testing.md'
 
-storiesOf('Contribution|Folder', module)
+storiesOf('Contribution', module)
   .add('GitHub workflow', doc(GITHUB_WORKFLOW))
   .add('CSS naming', doc(CSS_NAMING))
   .add('JSS onboarding', doc(JSS_ONBOARDING))