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