Storybook 7 (#972)

* feat: storybook 7 and configuration updates

Closes D2IQ-92603

* docs: updated stories from csf2 to csf3

.storybook/docs/stories/Typography.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta, Unstyled } from "@storybook/addon-docs";
 import { Typeset } from "@storybook/addon-docs";
 import {
   fontFamilySansSerif,
@@ -42,7 +42,9 @@ import {
     sampleText="The quick brown fox jumps over the lazy dog"
   />
   <h2>Heading Text</h2>
-  <HeadingText1>Heading Text 1</HeadingText1>
-  <HeadingText2>Heading Text 2</HeadingText2>
-  <HeadingText3>Heading Text 3</HeadingText3>
+  <Unstyled>
+    <HeadingText1>Heading Text 1</HeadingText1>
+    <HeadingText2>Heading Text 2</HeadingText2>
+    <HeadingText3>Heading Text 3</HeadingText3>
+  </Unstyled>
 </div>

.storybook/docs/stories/Welcome.stories.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/addon-docs";
+import { Meta, Unstyled } from "@storybook/addon-docs";
 
 import { WelcomeBanner, WelcomeCards, WelcomeFooter } from "../index.ts";
 
@@ -11,6 +11,8 @@ import { WelcomeBanner, WelcomeCards, WelcomeFooter } from "../index.ts";
   }}
 />
 
-<WelcomeBanner />
-<WelcomeCards />
-<WelcomeFooter />
+<Unstyled>
+  <WelcomeBanner />
+  <WelcomeCards />
+  <WelcomeFooter />
+</Unstyled>

.storybook/main.js

@@ -1,17 +1,16 @@
 const customWebpack = require("./webpack.config");
-
 module.exports = {
-  core: {
-    builder: "webpack5"
-  },
   stories: [
     "./docs/stories/Welcome.stories.mdx",
     "./docs/stories/Colors.stories.mdx",
     "./docs/stories/Typography.stories.mdx",
     "../packages/**/*.stories.@(tsx|mdx)"
   ],
   webpackFinal: config => {
-    return { ...config, ...customWebpack };
+    return {
+      ...config,
+      ...customWebpack
+    };
   },
   addons: [
     {
@@ -24,5 +23,13 @@ module.exports = {
   ],
   features: {
     previewMdx2: true
+  },
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {}
+  },
+  staticDirs: ["../public/assets/images"],
+  docs: {
+    autodocs: true
   }
 };

.storybook/manager-head.html

@@ -0,0 +1 @@
+<link rel="icon" type="image/svg+xml" href="favicon.svg" />

.storybook/manager.js

@@ -1,10 +1,7 @@
 import { addons } from "@storybook/addons";
 import Theme from "./theme";
-import favicon from "./docs/assets/favicon.ico";
 
 const link = document.createElement("link");
-link.setAttribute("rel", "shortcut icon");
-link.setAttribute("href", favicon);
 document.head.appendChild(link);
 
 addons.setConfig({

.storybook/theme.js

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming";
+import { create } from "@storybook/theming/create";
 import logo from "./static/logo.png";
 
 export default create({

.storybook/webpack.config.js

@@ -8,9 +8,6 @@ module.exports = ({ config }) => {
   config.resolve.extensions = config.resolve.extensions.concat(
     webpackBase.getExtensions()
   );
-  config.resolve.alias["core-js"] = path.dirname(require.resolve("core-js"));
-  config.module.rules[0].use[0].options.sourceType = "unambiguous";
-
   // Storybook has loaders configured that conflict with what you define in our custom Webpack configuration,
   // so if you do not override those then your custom rules will not work.
   // Remove the rule that loads SVGs as assets for storybook