feat: upgrade storybook

.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/Combobox/Combobox.stories.tsx

@@ -1,10 +1,10 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React from 'react';
 
 import { withGlintsPortalContainer } from '../../helpers/storybook/Decorators';
-import { Option, OptionList, TextInput } from './components';
 import { Combobox, ComboboxProps } from './Combobox';
 import { ComboboxMultiSelect } from './comboboxStoryHelper/ComboboxMultuSelect';
+import { Option, OptionList, TextInput } from './components';
 
 (Combobox as React.FunctionComponent<ComboboxProps>).displayName = 'Combobox';
 
@@ -32,7 +32,7 @@ const countries = [
 
 const slicedCountries = countries.slice(0, 5);
 
-const MultiSelectTemplate: Story<ComboboxProps> = args => (
+const MultiSelectTemplate: StoryFn<ComboboxProps> = args => (
   <ComboboxMultiSelect {...args} countries={slicedCountries} />
 );
 
@@ -152,7 +152,7 @@ MultiSelect.parameters = {
   },
 };
 
-const MultiSelectScrollableTemplate: Story<ComboboxProps> = args => (
+const MultiSelectScrollableTemplate: StoryFn<ComboboxProps> = args => (
   <ComboboxMultiSelect {...args} countries={countries} />
 );
 

src/@next/Combobox/comboboxStoryHelper/ComboboxMultuSelect.tsx

@@ -87,7 +87,7 @@ export const ComboboxMultiSelect = ({
   }, [isSearchEmpty, options]);
 
   return (
-    <div style={{ maxWidth: '500px' }}>
+    <div style={{ maxWidth: 500 }}>
       <Combobox.Label>Label</Combobox.Label>
       <Combobox
         {...args}

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/@next/Select/components/Activator/ActivatorSelect.tsx

@@ -7,9 +7,10 @@ import { Blue, Neutral } from '../../../utilities/colors';
 import {
   StyledSelect,
   StyledSelectTypography,
-  StyledTag,
   TagsContainer,
 } from './ActivatorStyle';
+import { Tag } from '../../../Tag';
+import { space8 } from '../../../utilities/spacing/Spacing';
 
 export interface ActivatorSelectProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -76,13 +77,14 @@ export const ActivatorSelect = ({
     if (hasSelectedValues) {
       return (
         <TagsContainer>
-          <StyledTag
+          <Tag
+            style={{ width: 28, marginRight: space8 }}
             key={`option-${selectedValues[0]}`}
             onRemove={onRemoveTag({ option: selectedValues[0] })}
             textColor={Blue.S99}
           >
             {selectedLabels[0]}
-          </StyledTag>
+          </Tag>
           {selectedValues.length > 1 && (
             <Typography
               variant="caption"

src/@next/Select/components/Activator/ActivatorStyle.ts

@@ -1,14 +1,12 @@
 import styled from 'styled-components';
 
-import * as Breakpoints from '../../../utilities/breakpoints/Breakpoints';
+import { TextInput } from '../../../TextInput';
+import { Typography } from '../../../Typography';
 import { borderRadius4 } from '../../../utilities/borderRadius';
+import * as Breakpoints from '../../../utilities/breakpoints/Breakpoints';
 import { Neutral, Red } from '../../../utilities/colors';
 import { NotoSans } from '../../../utilities/fonts';
-import { space8 } from '../../../utilities/spacing';
 import { ActivatorSelectProps } from './ActivatorSelect';
-import { TextInput } from '../../../TextInput';
-import { Tag } from '../../../Tag';
-import { Typography } from '../../../Typography';
 
 export const StyledSelect = styled.button<ActivatorSelectProps>`
   display: flex;
@@ -59,10 +57,10 @@ export const TagsContainer = styled.div`
   align-items: center;
 `;
 
-export const StyledTag = styled(Tag)`
-  height: 28px;
-  margin-right: ${space8};
-`;
+// export const StyledTag = styled(Tag)`
+//   height: 28px;
+//   margin-right: ${space8};
+// `;
 
 export const StyledTextInput = styled(TextInput)`
   width: ${props => props.width};

src/@next/Tag/Tag.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/react';
+import { Meta, StoryFn } from '@storybook/react';
 import React, { useCallback, useState } from 'react';
 
 import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
@@ -54,11 +54,11 @@ export default {
   },
 } as Meta;
 
-const DefaultTemplate: Story<TagProps> = args => {
+const DefaultTemplate: StoryFn<TagProps> = args => {
   return <Tag {...args}>Basic Tag</Tag>;
 };
 
-const RemoveableTemplate: Story<TagProps> = () => {
+const RemoveableTemplate: StoryFn<TagProps> = () => {
   const [selectedTags, setSelectedTags] = useState([
     'Years of Experience: 0 to 3 Years, 3 to 5 Years',
     'Expected Salary: $1.000.000 to $3.000.000',
@@ -87,15 +87,15 @@ const RemoveableTemplate: Story<TagProps> = () => {
   return <>{tagMarkup}</>;
 };
 
-const ClickableTemplate: Story<TagProps> = args => {
+const ClickableTemplate: StoryFn<TagProps> = args => {
   return (
     <Tag textColor={args.textColor} onClick={() => window.alert('Clicked')}>
       Clickable Tag
     </Tag>
   );
 };
 
-const ClickableDisabledTemplate: Story<TagProps> = args => {
+const ClickableDisabledTemplate: StoryFn<TagProps> = args => {
   return (
     <Tag
       textColor={args.textColor}

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,
 };

src/stories/Introduction.stories.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/addon-docs';
-const { version } = require('../../package.json');
+import { version } from '../../package.json';
 import { AriesStatus } from './story-components/AriesStatus';
 
 <Meta title="Introduction" />