feat(core): storybook upgrade from v5 to v6.

affects: @medly-components/core, @medly-components/layout Updated core, layout meta title in storybook. Added addon-essentials to storybook addon. ISSUES CLOSED: medly#151
phoenixTW · Oct 8, 2020 · 4b0c9ae · 4b0c9ae
1 parent b601301
commit 4b0c9ae
Show file tree

Hide file tree

Showing 34 changed files with 2,005 additions and 1,780 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -12,7 +12,7 @@ module.exports = {
         '../docs/Introduction.stories.mdx',
         '../docs/Typography/Typography.stories.mdx',
         '../docs/Colors/Colors.stories.mdx',
-        '../packages/**/*.stories.(tsx|mdx)'
+        '../packages/**/*.stories.@(tsx|mdx)'
     ],
     addons: [
         '@storybook/addon-docs',
@@ -21,7 +21,8 @@ module.exports = {
         'storybook-addon-jsx',
         'storybook-addon-designs',
         '@storybook/addon-viewport',
-        '@storybook/addon-actions'
+        '@storybook/addon-actions',
+        '@storybook/addon-essentials'
     ],
     webpack: async config => {
         config.module.rules.push({
@@ -30,27 +31,6 @@ module.exports = {
             loader: 'babel-loader',
             exclude: [/node_modules/, /\.test.tsx?$/, /__snapshots__/, /__tests__/, /dist/]
         });
-        config.module.rules.push({
-            test: /\.(ts|tsx)$/,
-            include: [packages, docs],
-            exclude: [/node_modules/, /\.test.tsx?$/, /__snapshots__/, /__tests__/, /dist/, /icons\/src\/assets/, /icons\/src\/icons/],
-            loader: 'react-docgen-typescript-loader',
-            options: {
-                tsconfigPath,
-                shouldExtractLiteralValuesFromEnum: true,
-                propFilter(prop) {
-                    if (prop.parent) {
-                        return (
-                            !prop.parent.fileName.includes('node_modules') &&
-                            !prop.parent.fileName.includes('HTMLProps') &&
-                            !prop.parent.fileName.includes('WithThemeProp')
-                        );
-                    }
-
-                    return true;
-                }
-            }
-        });
         config.module.rules.push({
             test: /\.tsx$/,
             include: [packages],

diff --git a/package.json b/package.json
@@ -72,15 +72,16 @@
         "@rollup/plugin-commonjs": "^11.0.2",
         "@rollup/plugin-node-resolve": "^7.1.1",
         "@rollup/plugin-typescript": "^4.1.1",
-        "@storybook/addon-actions": "5.3.18",
-        "@storybook/addon-docs": "5.3.18",
-        "@storybook/addon-jest": "5.3.18",
-        "@storybook/addon-knobs": "5.3.18",
-        "@storybook/addon-links": "5.3.18",
-        "@storybook/addon-viewport": "^5.3.19",
-        "@storybook/addons": "5.3.18",
-        "@storybook/react": "5.3.18",
-        "@storybook/storybook-deployer": "^2.8.5",
+        "@storybook/addon-actions": "6.0.26",
+        "@storybook/addon-docs": "6.0.26",
+        "@storybook/addon-jest": "6.0.26",
+        "@storybook/addon-knobs": "6.0.26",
+        "@storybook/addon-links": "6.0.26",
+        "@storybook/addon-viewport": "^6.0.26",
+        "@storybook/addons": "6.0.26",
+        "@storybook/addon-essentials": "6.0.26",
+        "@storybook/react": "6.0.26",
+        "@storybook/storybook-deployer": "^2.8.7",
         "@svgr/rollup": "^5.4.0",
         "@svgr/webpack": "^5.3.0",
         "@testing-library/dom": "^7.5.6",
@@ -90,7 +91,7 @@
         "@types/jest": "^25.2.2",
         "@types/react-dom": "^16.9.5",
         "@types/react": "^16.9.25",
-        "@types/storybook__addon-info": "5.2.1",
+        "@types/storybook__addon-info": "5.2.2",
         "@types/styled-components": "^5.1.0",
         "@typescript-eslint/eslint-plugin": "^2.26.0",
         "@typescript-eslint/parser": "^2.26.0",
@@ -120,8 +121,8 @@
         "rimraf": "^3.0.1",
         "rollup-plugin-terser": "^5.3.0",
         "rollup": "^2.10.0",
-        "storybook-addon-designs": "^5.2.1",
-        "storybook-addon-jsx": "7.1.14",
+        "storybook-addon-designs": "^5.4.2",
+        "storybook-addon-jsx": "7.3.4",
         "styled-components": "^5.1.0",
         "stylelint-config-prettier": "^8.0.1",
         "stylelint-config-recommended": "^3.0.0",

diff --git a/packages/core/src/components/Accordion/Accordion.stories.mdx b/packages/core/src/components/Accordion/Accordion.stories.mdx
@@ -4,7 +4,7 @@ import { defaultTheme } from '@medly-components/theme';
 import { Accordion } from './Accordion';
 import Text from '../Text';
 
-<Meta title="Core" component={Accordion} parameters={{ jest: ['Accordion.test.tsx'] }} />
+<Meta title="Core/Accordion" component={Accordion} parameters={{ jest: ['Accordion.test.tsx'] }} />
 
 # Accordion
 

diff --git a/packages/core/src/components/Avatar/Avatar.stories.mdx b/packages/core/src/components/Avatar/Avatar.stories.mdx
@@ -5,7 +5,7 @@ import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import { sizes, Div, ThemeInterface } from './Avatar.stories';
 import { withKnobs, color, boolean, select } from '@storybook/addon-knobs';
 
-<Meta title="Core" component={Avatar} parameters={{ jest: ['Avatar.test.tsx'] }} />
+<Meta title="Core/Avatar" component={Avatar} parameters={{ jest: ['Avatar.test.tsx'] }} />
 
 # Avatar
 

diff --git a/packages/core/src/components/BreadCrumbs/BreadCrumbs.stories.mdx b/packages/core/src/components/BreadCrumbs/BreadCrumbs.stories.mdx
@@ -2,7 +2,7 @@ import { BreadCrumbs } from './BreadCrumbs.tsx';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './BreadCrumbs.stories';
 
-<Meta title="Core" component={BreadCrumbs} />
+<Meta title="Core/BreadCrumbs" component={BreadCrumbs} />
 
 # BreadCrumbs
 

diff --git a/packages/core/src/components/Button/Button.stories.mdx b/packages/core/src/components/Button/Button.stories.mdx
@@ -7,7 +7,7 @@ import { withKnobs, color, select, boolean } from '@storybook/addon-knobs';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import { sizes, edges, variants, colors, ThemeInterface } from './Button.stories';
 
-<Meta title="Core" component={Button} parameters={{ jest: ['Button.test.tsx'] }} />
+<Meta title="Core/Button" component={Button} parameters={{ jest: ['Button.test.tsx'] }} />
 
 # Button
 

diff --git a/packages/core/src/components/Card/Card.stories.mdx b/packages/core/src/components/Card/Card.stories.mdx
@@ -6,7 +6,7 @@ import { withKnobs, text, color, select, boolean } from '@storybook/addon-knobs'
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import { variants, display, itemsPosition, flowDirection, ThemeInterface } from './Card.stories';
 
-<Meta title="Core" component={Card} parameters={{ jest: ['Card.test.tsx'] }} />
+<Meta title="Core/Card" component={Card} parameters={{ jest: ['Card.test.tsx'] }} />
 
 # Card
 

diff --git a/packages/core/src/components/Checkbox/Checkbox.stories.mdx b/packages/core/src/components/Checkbox/Checkbox.stories.mdx
@@ -5,7 +5,7 @@ import { useState } from 'react';
 import { boolean, select, text } from '@storybook/addon-knobs';
 
 <Meta
-    title="Core"
+    title="Core/Checkbox"
     component={Checkbox}
     parameters={{
         jest: ['Checkbox.test.tsx'],

diff --git a/packages/core/src/components/CheckboxGroup/CheckboxGroup.stories.mdx b/packages/core/src/components/CheckboxGroup/CheckboxGroup.stories.mdx
@@ -5,7 +5,7 @@ import { boolean, number, select, text } from '@storybook/addon-knobs';
 import { useState } from 'react';
 
 <Meta
-    title="Core"
+    title="Core/CheckboxGroup"
     component={CheckboxGroup}
     parameters={{
         jest: ['CheckboxGroup.test.tsx'],

diff --git a/packages/core/src/components/Chip/Chip.stories.mdx b/packages/core/src/components/Chip/Chip.stories.mdx
@@ -2,7 +2,7 @@ import { Chip } from './Chip';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './Chip.stories';
 
-<Meta title="Core" component={Chip} />
+<Meta title="Core/Chip" component={Chip} />
 
 # Chip
 

diff --git a/packages/core/src/components/CssBaseline/CssBaseline.stories.mdx b/packages/core/src/components/CssBaseline/CssBaseline.stories.mdx
@@ -2,7 +2,7 @@ import { CssBaseline } from './CssBaseline.styled';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './CssBaseline.stories';
 
-<Meta title="Core" component={CssBaseline} />
+<Meta title="Core/CssBaseline" component={CssBaseline} />
 
 # CssBaseline
 

diff --git a/packages/core/src/components/DatePicker/DatePicker.stories.mdx b/packages/core/src/components/DatePicker/DatePicker.stories.mdx
@@ -7,7 +7,7 @@ import { variants, sizes, displayFormats, ThemeInterface, FormWithDatePicker } f
 import { placements } from '../Popover/Popover.stories.tsx';
 
 <Meta
-    title="Core"
+    title="Core/DatePicker"
     component={DatePicker}
     parameters={{
         jest: ['DatePicker.test.tsx'],

diff --git a/packages/core/src/components/DateRangePicker/DateRangePicker.stories.mdx b/packages/core/src/components/DateRangePicker/DateRangePicker.stories.mdx
@@ -3,7 +3,7 @@ import { defaultTheme } from '@medly-components/theme';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './DateRangePicker.stories';
 
-<Meta title="Core" component={DateRangePicker} />
+<Meta title="Core/DateRangePicker" component={DateRangePicker} />
 
 # DateRangePicker
 

diff --git a/packages/core/src/components/FileInput/FileInput.stories.mdx b/packages/core/src/components/FileInput/FileInput.stories.mdx
@@ -3,7 +3,7 @@ import { defaultTheme } from '@medly-components/theme';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './FileInput.stories';
 
-<Meta title="Core" component={FileInput} />
+<Meta title="Core/FileInput" component={FileInput} />
 
 # FileInput
 

diff --git a/packages/core/src/components/Input/Input.stories.mdx b/packages/core/src/components/Input/Input.stories.mdx
@@ -2,7 +2,7 @@ import { Input } from './Input';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './Input.stories';
 
-<Meta title="Core" component={Input} />
+<Meta title="Core/Input" component={Input} />
 
 # Input
 

diff --git a/packages/core/src/components/Label/Label.stories.mdx b/packages/core/src/components/Label/Label.stories.mdx
@@ -2,7 +2,7 @@ import { Label } from './Label';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './Label.stories';
 
-<Meta title="Core" component={Label} />
+<Meta title="Core/Label" component={Label} />
 
 # Label
 

diff --git a/packages/core/src/components/Link/Link.stories.mdx b/packages/core/src/components/Link/Link.stories.mdx
@@ -2,7 +2,7 @@ import { Link } from './Link';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './Link.stories';
 
-<Meta title="Core" component={Link} />
+<Meta title="Core/Link" component={Link} />
 
 # Link
 

diff --git a/packages/core/src/components/List/List.stories.mdx b/packages/core/src/components/List/List.stories.mdx
@@ -3,7 +3,7 @@ import { defaultTheme } from '@medly-components/theme';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './List.stories';
 
-<Meta title="Core" component={List} />
+<Meta title="Core/List" component={List} />
 
 # List
 

diff --git a/packages/core/src/components/Modal/Modal.stories.mdx b/packages/core/src/components/Modal/Modal.stories.mdx
@@ -2,7 +2,7 @@ import { Modal } from './Modal';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './Modal.stories';
 
-<Meta title="Core" component={Modal} parameters={{ jest: ['Modal.test.tsx'] }} />
+<Meta title="Core/Modal" component={Modal} parameters={{ jest: ['Modal.test.tsx'] }} />
 
 # Modal
 

diff --git a/packages/core/src/components/MultiSelect/MultiSelect.stories.mdx b/packages/core/src/components/MultiSelect/MultiSelect.stories.mdx
@@ -4,7 +4,7 @@ import { boolean, select, text } from '@storybook/addon-knobs';
 import { useState } from 'react';
 import { variants, sizes, options, ThemeInterface } from './MultiSelect.stories';
 
-<Meta title="Core" component={MultiSelect} />
+<Meta title="Core/MultiSelect" component={MultiSelect} />
 
 # MultiSelect
 

diff --git a/packages/core/src/components/Pagination/Pagination.stories.mdx b/packages/core/src/components/Pagination/Pagination.stories.mdx
@@ -5,7 +5,7 @@ import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import { ThemeInterface } from './Pagination.stories';
 import { useState } from 'react';
 
-<Meta title="Core" component={Pagination} />
+<Meta title="Core/Pagination" component={Pagination} />
 
 # Pagination
 

diff --git a/packages/core/src/components/Popover/Popover.stories.mdx b/packages/core/src/components/Popover/Popover.stories.mdx
@@ -3,7 +3,7 @@ import { Popover } from './Popover.tsx';
 import { withKnobs, boolean, select, color } from '@storybook/addon-knobs';
 import { DummyDiv, DummyWrapper, DummyPopover, interactionTypes, placements } from './Popover.stories.tsx';
 
-<Meta title="Core" component={Popover} />
+<Meta title="Core/Popover" component={Popover} />
 
 # Popover
 

diff --git a/packages/core/src/components/Radio/Radio.stories.mdx b/packages/core/src/components/Radio/Radio.stories.mdx
@@ -4,7 +4,7 @@ import { sizes, labelPositions, ThemeInterface } from './Radio.stories';
 import { boolean, select } from '@storybook/addon-knobs';
 
 <Meta
-    title="Core"
+    title="Core/Radio"
     component={Radio}
     parameters={{
         jest: ['Radio.test.tsx'],

diff --git a/packages/core/src/components/RadioGroup/RadioGroup.stories.mdx b/packages/core/src/components/RadioGroup/RadioGroup.stories.mdx
@@ -5,7 +5,7 @@ import { FormWithRadioGroup, sizes } from './RadioGroup.stories';
 import { useState } from 'react';
 
 <Meta
-    title="Core"
+    title="Core/RadioGroup"
     component={RadioGroup}
     parameters={{
         jest: ['RadioGroup.test.tsx'],

diff --git a/packages/core/src/components/SearchBox/SearchBox.stories.mdx b/packages/core/src/components/SearchBox/SearchBox.stories.mdx
@@ -6,7 +6,7 @@ import { select } from '@storybook/addon-knobs';
 import { SearchBox } from './SearchBox';
 import { action } from '@storybook/addon-actions';
 
-<Meta title="Core" component={SearchBox} />
+<Meta title="Core/SearchBox" component={SearchBox} />
 
 # SearchBox
 

diff --git a/packages/core/src/components/SingleSelect/SingleSelect.stories.mdx b/packages/core/src/components/SingleSelect/SingleSelect.stories.mdx
@@ -6,7 +6,7 @@ import { boolean, select, text } from '@storybook/addon-knobs';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import { variants, options, sizes, ThemeInterface, OptionProps } from './SingleSelect.stories.tsx';
 
-<Meta title="Core" component={SingleSelect} parameters={{ jest: ['SingleSelect.test.tsx'] }} />
+<Meta title="Core/SingleSelect" component={SingleSelect} parameters={{ jest: ['SingleSelect.test.tsx'] }} />
 
 # SingleSelect
 

diff --git a/packages/core/src/components/Stepper/Stepper.stories.mdx b/packages/core/src/components/Stepper/Stepper.stories.mdx
@@ -2,7 +2,7 @@ import { Stepper } from './Stepper';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './Stepper.stories';
 
-<Meta title="Core" component={Stepper} />
+<Meta title="Core/Stepper" component={Stepper} />
 
 # Stepper
 

diff --git a/packages/core/src/components/Text/Text.stories.mdx b/packages/core/src/components/Text/Text.stories.mdx
@@ -2,7 +2,7 @@ import { Text } from './Text';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import { Basic, VerticalAlign } from './Text.stories';
 
-<Meta title="Core" component={Text} />
+<Meta title="Core/Text" component={Text} />
 
 # Text
 

diff --git a/packages/core/src/components/TextField/TextField.stories.mdx b/packages/core/src/components/TextField/TextField.stories.mdx
@@ -6,7 +6,7 @@ import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import { ThemeInterface, variants, sizes, Custom } from './TextField.stories.tsx';
 import { useState, useCallback } from 'react';
 
-<Meta title="Core" component={TextField} parameters={{ jest: ['TextField.test.tsx'] }} />
+<Meta title="Core/TextField" component={TextField} parameters={{ jest: ['TextField.test.tsx'] }} />
 
 # TextField
 

diff --git a/packages/core/src/components/Toast/Toast.stories.mdx b/packages/core/src/components/Toast/Toast.stories.mdx
@@ -6,7 +6,7 @@ import { PersonAddIcon } from '@medly-components/icons';
 import { action } from '@storybook/addon-actions';
 
 <Meta
-    title="Core"
+    title="Core/Toast"
     component={Toast}
     parameters={{
         jest: ['Toast.test.tsx'],

diff --git a/packages/core/src/components/ToastContainer/ToastContainer.stories.mdx b/packages/core/src/components/ToastContainer/ToastContainer.stories.mdx
@@ -7,7 +7,7 @@ import { addToast } from './ToastStore.ts';
 import { PersonAddIcon } from '@medly-components/icons';
 
 <Meta
-    title="Core"
+    title="Core/ToastContainer"
     component={ToastContainer}
     parameters={{
         jest: ['ToastContainer.test.tsx'],

diff --git a/packages/core/src/components/Toggle/Toggle.stories.mdx b/packages/core/src/components/Toggle/Toggle.stories.mdx
@@ -2,7 +2,7 @@ import { Toggle } from './Toggle';
 import { Preview, Story, Meta, Props } from '@storybook/addon-docs/blocks';
 import * as stories from './Toggle.stories';
 
-<Meta title="Core" component={Toggle} />
+<Meta title="Core/Toggle" component={Toggle} />
 
 # Toggle
 

diff --git a/packages/layout/src/components/SideNav/SideNav.stories.mdx b/packages/layout/src/components/SideNav/SideNav.stories.mdx
@@ -7,7 +7,7 @@ import SideNavContext from './SideNav.context';
 import MedlySidenavHeader from './MedlySidenavHeader';
 import * as stories from './SideNav.stories';
 
-<Meta title="Layout" component={SideNav} parameters={{ jest: ['SideNav.test.tsx', 'NavList.test.tsx', 'NavItem.test.tsx'] }} />
+<Meta title="Layout/SideNav" component={SideNav} parameters={{ jest: ['SideNav.test.tsx', 'NavList.test.tsx', 'NavItem.test.tsx'] }} />
 
 # SideNav
 
@@ -25,12 +25,10 @@ import React, { useCallback } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 
 export const SideNav: React.FC = React.memo(() => {
-    // If you are using react-router for managing your routes
     const { pathname } = useLocation(),
         history = useHistory(),
         handlePathChange = useCallback((page: string) => history.push(page), [history]);
 
-    // You can design your own header instead of MedlySidenavHeader
     return (
         <MedlySideNav onChange={handlePathChange} active={pathname} defaultActive="/home">
             <MedlySidenavHeader />