feat: upgrade storybook

Author: Lee Zhen Jie

.eslintrc.json

@@ -12,7 +12,8 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
     "plugin:jest/recommended",
-    "plugin:prettier/recommended"
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
   ],
   "rules": {
     "@typescript-eslint/no-var-requires": "off",

.storybook/main.js

@@ -1,15 +1,14 @@
 module.exports = {
-  core: {
-    builder: 'webpack5',
-  },
-  stories: [
-    '../src/stories/Introduction.stories.mdx',
-    '../src/**/*.stories.mdx',
-    '../src/**/*.stories.@(js|jsx|ts|tsx)',
-    './*.stories.mdx',
-  ],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  stories: ['../src/stories/Introduction.stories.mdx', '../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)', './*.stories.mdx'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-mdx-gfm'],
   features: {
-    storyStoreV7: true,
+    storyStoreV7: true
+  },
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
   },
-};
+  docs: {
+    autodocs: true
+  }
+};

package.json

@@ -9,23 +9,23 @@
     "node": ">=14"
   },
   "scripts": {
-    "build": "npm run build:icon && npm run build:next:icon && npm run build:lib && npm run build:es && npm run build:ts",
+    "build": "yarn build:icon && yarn build:next:icon && yarn build:lib && yarn build:es && yarn build:ts",
     "build:lib": "rm -rf lib && babel src -d lib --extensions .ts,.tsx --ignore .storybook/**/*,src/**/*.test.tsx,src/**/*.test.ts,src/**/*.spec.tsx,src/**/*.spec.ts,src/**/*.stories.tsx",
     "build:es": "rm -rf es && cross-env BABEL_ENV=es babel src -d es --extensions .ts,.tsx --ignore .storybook/**/*,src/**/*.test.tsx,src/**/*.test.ts,src/**/*.spec.tsx,src/**/*.spec.ts,src/**/*.stories.tsx",
     "build:ts": "tsc --project tsconfig.declaration.json -d --declarationDir lib && tsc --project tsconfig.declaration.json -d --declarationDir es",
-    "build:icon": "rm -rf src/General/Icon/components && babel-node --extensions .ts,.tsx src/Utils/Icon/generateIcons.ts && npm run format:icon",
+    "build:icon": "rm -rf src/General/Icon/components && babel-node --extensions .ts,.tsx src/Utils/Icon/generateIcons.ts && yarn format:icon",
     "build:next:icon": "npx @svgr/cli --typescript --out-dir src/@next/Icon/components -- src/@next/Icon/icons",
     "format:icon": "prettier --write src/General/Icon/components/*.tsx",
     "imports": "babel-node --extensions .ts scripts/count-imports/index.ts",
-    "lint": "npm run lint:css && npm run lint:ts",
+    "lint": "yarn lint:css && yarn lint:ts",
     "lint:css": "stylelint '**/*Style.ts'",
     "lint:ts": "eslint '**/*.{ts,tsx}'",
     "test:update": "jest --env jsdom -u",
     "test": "jest --env jsdom",
     "coverage:src": "jest --coverage --collectCoverageFrom 'src/**/*.tsx' --coveragePathIgnorePatterns 'src/General/Icon/components/' --collectCoverageFrom='!src/**/*.stories.tsx' --collectCoverageFrom='!src/**/*StoryStyle.tsx' --collectCoverageFrom='!src/**/*StoriesHelpers.tsx' --collectCoverageFrom='!src/stories/story-components/**'",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "rm -rf .out && npm run storybook:build:assets && npm run build:icon && npm run build:next:icon && build-storybook -o .out -s dist/public",
-    "storybook:build:test": "rm -rf storybook-static && npm run storybook:build:assets && npm run build:icon && npm run build:next:icon && build-storybook -o storybook-static -s dist/public",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "rm -rf .out && yarn storybook:build:assets && yarn build:icon && yarn build:next:icon && sb build -o .out -s dist/public",
+    "storybook:build:test": "rm -rf storybook-static && yarn storybook:build:assets && yarn build:icon && yarn build:next:icon && storybook build -o storybook-static -s dist/public",
     "storybook:build:assets": "webpack",
     "prepare": "husky install",
     "check-definition-files": "node checkDefinitionFiles.js"
@@ -59,12 +59,12 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@playwright/test": "^1.29.0",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/react": "^6.5.15",
+    "@storybook/addon-actions": "^7.0.26",
+    "@storybook/addon-essentials": "^7.0.26",
+    "@storybook/addon-links": "^7.0.26",
+    "@storybook/addon-mdx-gfm": "^7.0.26",
+    "@storybook/react": "^7.0.26",
+    "@storybook/react-webpack5": "^7.0.26",
     "@svgr/cli": "^6.5.1",
     "@testing-library/dom": "^8.11.3",
     "@testing-library/jest-dom": "^5.16.2",
@@ -100,6 +100,7 @@
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.27.1",
     "eslint-plugin-react-hooks": "^4.3.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^1.3.4",
     "generate-changelog": "^1.7.1",
@@ -117,6 +118,7 @@
     "react-is": "^17.0.2",
     "react-test-renderer": "^17.0.2",
     "start-server-and-test": "^1.15.2",
+    "storybook": "^7.0.26",
     "styled-components": "^5.1.1",
     "stylelint": "^10.0.1",
     "stylelint-config-recommended": "^2.2.0",

src/@next/Bar/Bar.stories.tsx

@@ -217,12 +217,12 @@ const customActionGroupTemplate: Story<BarProps> = args => {
   );
 };
 
-export const customActionGroup = customActionGroupTemplate.bind({});
-customActionGroup.parameters = {
+export const CustomActionGroup = customActionGroupTemplate.bind({});
+CustomActionGroup.parameters = {
   docs: {
     source: {
       code: `
-      const customActionGroup = (
+      const CustomActionGroup = (
         <>
           <PopoverMenu
             title="Select"
@@ -238,7 +238,7 @@ customActionGroup.parameters = {
           {...args}
           heading={'Page Title 2'}
           subheading={'Additional Content'}
-          customActionGroup={customActionGroup}
+          customActionGroup={CustomActionGroup}
         />
       );
     `,

src/@next/Divider/Divider.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import React from 'react';
 
 import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
@@ -12,7 +12,7 @@ export default {
   decorators: [Story => <BaseContainer>{Story()}</BaseContainer>],
 } as Meta;
 
-const Template: Story<void> = () => (
+const Template = () => (
   <div>
     some text
     <Divider />

src/@next/Modal/Modal.stories.tsx

@@ -75,7 +75,7 @@ Interactive.args = {
   showCloseButton: true,
 };
 
-const WithLargeContentTemplate: Story<void> = () => {
+const WithLargeContentTemplate = () => {
   const [iOpen, setOpen] = useState(false);
 
   useEffect(() => {
@@ -117,7 +117,7 @@ const WithLargeContentTemplate: Story<void> = () => {
 export const WithLargeContent = WithLargeContentTemplate.bind({});
 WithLargeContent.args = {};
 
-const WithOverlflowContentTemplate: Story<void> = () => {
+const WithOverlflowContentTemplate = () => {
   const [iOpen, setOpen] = useState(false);
 
   useEffect(() => {
@@ -376,7 +376,7 @@ WithLockedScrollableBackdrop.args = {
   showCloseButton: true,
 };
 
-const WithSpinnerTemplate: Story<void> = () => {
+const WithSpinnerTemplate = () => {
   const [iOpen, setOpen] = useState(false);
 
   useEffect(() => {
@@ -406,7 +406,7 @@ const WithSpinnerTemplate: Story<void> = () => {
 export const WithSpinner = WithSpinnerTemplate.bind({});
 WithSpinner.args = {};
 
-const WithCustomActionsTemplate: Story<void> = () => {
+const WithCustomActionsTemplate = () => {
   const [showModal, setShowModal] = useState(false);
   const triggerAlert = () => {
     setShowModal(true);
@@ -442,7 +442,7 @@ const WithCustomActionsTemplate: Story<void> = () => {
 export const WithCustomActions = WithCustomActionsTemplate.bind({});
 WithCustomActions.args = {};
 
-const WithNumberInputAndTooltipTemplate: Story<void> = () => {
+const WithNumberInputAndTooltipTemplate = () => {
   const [showModal, setShowModal] = useState(false);
   const triggerAlert = () => {
     setShowModal(true);

src/@next/Modal/ModalWithProvider.stories.tsx

@@ -1,14 +1,14 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta } from '@storybook/react';
 import React from 'react';
 
-import { Button } from '../Button';
-import { useModal } from './useModal';
-import { ModalWithProvider } from './ModalWithProvider';
 import {
   withGlintsPortalContainer,
   withModalProvider,
 } from '../../helpers/storybook/Decorators';
+import { Button } from '../Button';
 import { space16 } from '../utilities/spacing';
+import { ModalWithProvider } from './ModalWithProvider';
+import { useModal } from './useModal';
 
 (ModalWithProvider as React.FunctionComponent<void>).displayName =
   'ModalWithProvider';
@@ -18,7 +18,7 @@ export default {
   component: ModalWithProvider,
 } as Meta;
 
-const Template: Story<void> = () => {
+const Template = () => {
   const { open: showModal } = useModal();
 
   const primaryAction = {
@@ -106,7 +106,7 @@ Interactive.parameters = {
   },
 };
 
-const WithLockedScrollableBackdropTemplate: Story<void> = () => {
+const WithLockedScrollableBackdropTemplate = () => {
   const { open: showModal } = useModal();
 
   const primaryAction = {

src/General/Divider/Divider.stories.tsx

@@ -14,7 +14,7 @@ const Template: Story<Props> = args => <Divider {...args} />;
 
 export const Interactive = Template.bind({});
 
-export const dividerWithGreyTheme = Template.bind({});
-dividerWithGreyTheme.args = {
+export const DividerWithGreyTheme = Template.bind({});
+DividerWithGreyTheme.args = {
   theme: 'grey',
 };

src/Input/Textarea/Textarea.stories.tsx

@@ -17,8 +17,8 @@ Interactive.args = {
   label: 'Description',
 };
 
-export const removeFloatingLabelIsTrue = Template.bind({});
-removeFloatingLabelIsTrue.args = {
+export const RemoveFloatingLabelIsTrue = Template.bind({});
+RemoveFloatingLabelIsTrue.args = {
   label: 'Remove Floating Label Is True',
   removeFloatingLabel: true,
 };