feat(eslint): prevent anonymous default exports + storybook upgrade (#287)

* feat(eslint): prevent anonymous default exports + storybook upgrade

* fix(accordion): fix storybook default export

* refactor(storybook): upgrade to the latest version

Co-authored-by: bethbertozzi <36094225+bethbertozzi@users.noreply.github.com>

Author: masoudmanson

.eslintrc.js

@@ -65,6 +65,7 @@ module.exports = {
     ],
     "@typescript-eslint/no-use-before-define": "off",
     "consistent-return": "off",
+    "import/no-anonymous-default-export": 2,
     "import/no-extraneous-dependencies": [
       "error",
       {

package.json

@@ -20,18 +20,18 @@
     "@mui/material": "^5.6.0",
     "@rollup/plugin-typescript": "^8.3.1",
     "@rollup/plugin-url": "^6.1.0",
-    "@storybook/addon-a11y": "^6.4.22",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
-    "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-a11y": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
     "@storybook/addons": "^6.5.13",
-    "@storybook/builder-webpack4": "^6.5.9",
-    "@storybook/manager-webpack4": "^6.5.9",
-    "@storybook/react": "^6.5.9",
-    "@storybook/test-runner": "^0.9.0",
+    "@storybook/builder-webpack4": "^6.5.13",
+    "@storybook/manager-webpack4": "^6.5.13",
+    "@storybook/react": "^6.5.13",
+    "@storybook/test-runner": "^0.9.1",
     "@storybook/testing-library": "^0.0.13",
-    "@storybook/testing-react": "^1.2.4",
+    "@storybook/testing-react": "^1.3.0",
     "@storybook/theming": "^6.5.13",
     "@svgr/rollup": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
@@ -62,7 +62,7 @@
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-plugin-sonarjs": "^0.10.0",
-    "eslint-plugin-storybook": "^0.5.11",
+    "eslint-plugin-storybook": "^0.6.7",
     "husky": "^5.1.3",
     "jest": "^27.2.5",
     "lint-staged": "^10.5.4",

src/core/Accordion/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import React from "react";
 import AccordionDetails from "./components/AccordionDetails";
 import AccordionHeader from "./components/AccordionHeader";
@@ -38,7 +38,7 @@ export default {
   },
   component: Accordion,
   title: "Accordion",
-};
+} as Meta;
 
 export const Default = Template.bind({});
 

src/core/Accordion/index.test.tsx

@@ -1,4 +1,5 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import { StoryFileExports } from "@chanzuckerberg/story-utils/build/getStories";
 import { composeStory } from "@storybook/testing-react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
@@ -9,7 +10,9 @@ import Meta, { Test as TestStory } from "./index.stories";
 const Test = composeStory(TestStory, Meta);
 
 describe("<Accordion />", () => {
-  generateSnapshots(snapshotTestStoryFile);
+  generateSnapshots<StoryFileExports<typeof Meta>, typeof Meta>(
+    snapshotTestStoryFile
+  );
 
   it("renders accordion component", () => {
     render(<Test {...Test.args} />);

src/core/Alert/index.stories.tsx

@@ -1,7 +1,7 @@
 import { CheckCircleOutline } from "@mui/icons-material";
 import { Snackbar } from "@mui/material";
 import { styled } from "@mui/material/styles";
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import React from "react";
 import Button from "../Button";
 import { defaultTheme } from "../styles/common/defaultTheme";
@@ -37,7 +37,7 @@ export default {
   },
   component: Demo,
   title: "Alert - To Be Depreciated",
-};
+} as Meta;
 
 const Template: Story = (args) => <Demo {...args} />;
 

src/core/Banner/banner.test.tsx

@@ -1,4 +1,5 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import { StoryFileExports } from "@chanzuckerberg/story-utils/build/getStories";
 import { composeStory } from "@storybook/testing-react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
@@ -9,7 +10,9 @@ import Meta, { Test as TestStory } from "./index.stories";
 const Test = composeStory(TestStory, Meta);
 
 describe("<Banner />", () => {
-  generateSnapshots(snapshotTestStoryFile);
+  generateSnapshots<StoryFileExports<typeof Meta>, typeof Meta>(
+    snapshotTestStoryFile
+  );
 
   it("renders banner component", async () => {
     render(<Test {...Test.args} />);

src/core/Banner/index.stories.tsx

@@ -1,5 +1,5 @@
 import { styled } from "@mui/material/styles";
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import React from "react";
 import Link from "../Link";
 import Banner from "./index";
@@ -35,7 +35,7 @@ export default {
   },
   component: Demo,
   title: "Banner",
-};
+} as Meta<Args>;
 
 const Template: Story = (args) => <Demo {...args} />;
 

src/core/Button/index.stories.tsx

@@ -1,5 +1,5 @@
 import { action } from "@storybook/addon-actions";
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import React from "react";
 import Icon from "../Icon";
 import RawButton from "./index";
@@ -41,7 +41,7 @@ export default {
   },
   component: Button,
   title: "Button",
-};
+} as Meta;
 
 const Template: Story = (props) => <Button {...props} />;
 

src/core/Button/index.test.tsx

@@ -1,4 +1,5 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import { StoryFileExports } from "@chanzuckerberg/story-utils/build/getStories";
 import { composeStory } from "@storybook/testing-react";
 import { render, screen } from "@testing-library/react";
 import React from "react";
@@ -8,7 +9,9 @@ import Meta, { Test as TestStory } from "./index.stories";
 const Test = composeStory(TestStory, Meta);
 
 describe("<button />", () => {
-  generateSnapshots(snapshotTestStoryFile);
+  generateSnapshots<StoryFileExports<typeof Meta>, typeof Meta>(
+    snapshotTestStoryFile
+  );
 
   it("renders Button component", () => {
     render(<Test />);

src/core/ButtonDropdown/index.stories.tsx

@@ -1,5 +1,5 @@
 import { action } from "@storybook/addon-actions";
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import React from "react";
 import Icon from "../Icon";
 import ButtonDropdown from "./index";
@@ -17,7 +17,7 @@ const Demo = (props: Args): JSX.Element => {
 export default {
   component: Demo,
   title: "ButtonDropdown",
-};
+} as Meta;
 
 const Template: Story = (args) => <Demo {...args} />;
 

src/core/ButtonIcon/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import React from "react";
 import Icon from "../Icon";
 import { defaultAppTheme } from "../styles";
@@ -53,7 +53,7 @@ export default {
   },
   component: Demo,
   title: "ButtonIcon",
-};
+} as Meta;
 
 const Template: Story = (args) => <Demo {...args} />;
 

src/core/ButtonIcon/index.test.tsx

@@ -1,4 +1,5 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import { StoryFileExports } from "@chanzuckerberg/story-utils/build/getStories";
 import { composeStory } from "@storybook/testing-react";
 import { render, screen } from "@testing-library/react";
 import React from "react";
@@ -9,7 +10,9 @@ import Meta, { Test as TestStory } from "./index.stories";
 const Test = composeStory(TestStory, Meta);
 
 describe("<ButtonIcon />", () => {
-  generateSnapshots(snapshotTestStoryFile);
+  generateSnapshots<StoryFileExports<typeof Meta>, typeof Meta>(
+    snapshotTestStoryFile
+  );
 
   it("renders ButtonIcon component", () => {
     render(<Test />);

src/core/Callout/index.stories.tsx

@@ -1,6 +1,6 @@
 import { FormControlLabel, Switch } from "@mui/material";
 import { action } from "@storybook/addon-actions";
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import React from "react";
 import Button from "../Button";
 import CalloutTitle from "./components/CalloutTitle";
@@ -63,7 +63,7 @@ export default {
   },
   component: Demo,
   title: "Callout",
-};
+} as Meta;
 
 const Template: Story = (args) => <Demo {...args} />;
 

src/core/CellBasic/index.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-use-before-define */
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import * as React from "react";
 import Icon from "../Icon";
 import CellBasicRaw from "./index";
@@ -92,7 +92,7 @@ export default {
   },
   component: CellBasic,
   title: "Table/CellBasic",
-};
+} as Meta;
 
 const Template: Story = (args) => <CellBasic {...args} />;
 

src/core/CellBasic/index.test.tsx

@@ -1,4 +1,5 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import { StoryFileExports } from "@chanzuckerberg/story-utils/build/getStories";
 import { composeStory } from "@storybook/testing-react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
@@ -9,7 +10,9 @@ import Meta, { Test as TestStory } from "./index.stories";
 const Test = composeStory(TestStory, Meta);
 
 describe("<CellBasic />", () => {
-  generateSnapshots(snapshotTestStoryFile);
+  generateSnapshots<StoryFileExports<typeof Meta>, typeof Meta>(
+    snapshotTestStoryFile
+  );
 
   it("renders cell basic component", () => {
     render(<Test />);

src/core/CellComponent/index.stories.tsx

@@ -1,5 +1,5 @@
 import { FormControlLabel, RadioGroup } from "@mui/material";
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import * as React from "react";
 import InputRadio from "../InputRadio";
 import InputToggle from "../InputToggle";
@@ -50,7 +50,7 @@ export default {
   },
   component: CellComponent,
   title: "Table/CellComponent",
-};
+} as Meta;
 
 const Template: Story = (props: Args) => {
   const { horizontalAlign, verticalAlign, fitCellToComponent } = props;

src/core/CellComponent/index.test.tsx

@@ -1,4 +1,5 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import { StoryFileExports } from "@chanzuckerberg/story-utils/build/getStories";
 import { composeStory } from "@storybook/testing-react";
 import { render, screen } from "@testing-library/react";
 import React from "react";
@@ -9,7 +10,9 @@ import Meta, { Test as TestStory } from "./index.stories";
 const Test = composeStory(TestStory, Meta);
 
 describe("<CellComponent />", () => {
-  generateSnapshots(snapshotTestStoryFile);
+  generateSnapshots<StoryFileExports<typeof Meta>, typeof Meta>(
+    snapshotTestStoryFile
+  );
 
   it("renders cellComponent component", () => {
     render(<Test />);

src/core/CellHeader/index.stories.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-use-before-define */
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import * as React from "react";
 import CellHeaderRaw, { CellHeaderDirection } from "./index";
 
@@ -58,7 +58,7 @@ export default {
   },
   component: CellHeader,
   title: "Table/CellHeader",
-};
+} as Meta;
 
 const Template: Story = (args) => <CellHeader {...args} />;
 

src/core/CellHeader/index.test.tsx

@@ -1,4 +1,5 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import { StoryFileExports } from "@chanzuckerberg/story-utils/build/getStories";
 import { composeStory } from "@storybook/testing-react";
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
@@ -9,7 +10,9 @@ import Meta, { Test as TestStory } from "./index.stories";
 const Test = composeStory(TestStory, Meta);
 
 describe("<CellHeader />", () => {
-  generateSnapshots(snapshotTestStoryFile);
+  generateSnapshots<StoryFileExports<typeof Meta>, typeof Meta>(
+    snapshotTestStoryFile
+  );
 
   it("renders header cell component", () => {
     render(<Test />);

src/core/Chip/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import React from "react";
 import Button from "../Button";
 import Chip from "./index";
@@ -26,7 +26,7 @@ const Demo = (props: Args): JSX.Element => {
 export default {
   component: Demo,
   title: "Chip - To Be Depreciated",
-};
+} as Meta;
 
 const Template: Story = (args) => <Demo {...args} />;
 

src/core/ComplexFilter/index.stories.tsx

@@ -1,4 +1,4 @@
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import React from "react";
 import { noop } from "src/common/utils";
 import ComplexFilter from "./index";
@@ -55,7 +55,7 @@ export default {
   },
   component: Demo,
   title: "ComplexFilter",
-};
+} as Meta;
 
 const Template: Story = (args) => <Demo {...args} />;
 

src/core/ComplexFilter/index.test.tsx

@@ -1,4 +1,5 @@
 import { generateSnapshots } from "@chanzuckerberg/story-utils";
+import { StoryFileExports } from "@chanzuckerberg/story-utils/build/getStories";
 import { composeStory } from "@storybook/testing-react";
 import { render, screen } from "@testing-library/react";
 import React from "react";
@@ -8,7 +9,9 @@ import Meta, { Test as TestStory } from "./index.stories";
 const Test = composeStory(TestStory, Meta);
 
 describe("<ComplexFilter />", () => {
-  generateSnapshots(snapshotTestStoryFile);
+  generateSnapshots<StoryFileExports<typeof Meta>, typeof Meta>(
+    snapshotTestStoryFile
+  );
 
   it("renders ComplexFilter component", () => {
     render(<Test {...Test.args} />);

src/core/Dropdown/index.stories.tsx

@@ -1,5 +1,5 @@
 import { Dialog, Paper, styled } from "@mui/material";
-import { Args, Story } from "@storybook/react";
+import { Args, Meta, Story } from "@storybook/react";
 import React, { useState } from "react";
 import { noop } from "src/common/utils";
 import { DefaultDropdownMenuOption } from "../DropdownMenu";
@@ -93,7 +93,7 @@ export default {
   },
   component: Demo,
   title: "Dropdown",
-};
+} as Meta;
 
 const Template: Story = (args) => <Demo {...args} />;
 const LABEL = "Click Target";