Merge pull request #6877 from Sage/redo-storybook-v8

chore(storybook): restore v8 upgrade

.storybook/main.ts

@@ -1,5 +1,8 @@
-const path = require("path");
-const glob = require("glob");
+import path from "path";
+import glob from "glob";
+import remarkGfm from "remark-gfm";
+import { StorybookConfig } from "@storybook/react-webpack5";
+
 const projectRoot = path.resolve(__dirname, "../");
 const ignoreTests = process.env.IGNORE_TESTS === "true";
 const isChromatic = !ignoreTests;
@@ -9,7 +12,9 @@ const getStories = () =>
  ignore: `${projectRoot}/src/**/*-test.stories.@(js|jsx|ts|tsx)`,
  }),
  });
-module.exports = {
+
+const config: StorybookConfig = {
+ framework: "@storybook/react-webpack5",
  stories: [
  "./welcome-page/welcome.stories.js",
  "../docs/*.mdx",
@@ -23,37 +28,37 @@ module.exports = {
  "@storybook/addon-a11y",
  "@storybook/addon-actions",
  "@storybook/addon-controls",
- "@storybook/addon-docs",
- "@storybook/addon-links",
- "@storybook/addon-mdx-gfm",
+ {
+ name: "@storybook/addon-docs",
+ options: {
+ mdxPluginOptions: {
+ mdxCompileOptions: {
+ remarkPlugins: [remarkGfm],
+ },
+ },
+ },
+ },
  "@storybook/addon-toolbars",
  "@storybook/addon-viewport",
+ "@storybook/addon-webpack5-compiler-swc",
  ],
  staticDirs: ["../.assets", "../logo"],
- webpackFinal: async (config, { configType }) => {
- config.resolve = {
- alias: {
- helpers: path.resolve(__dirname, "__helpers__/"),
- },
- extensions: [".js", ".tsx", ".ts"],
- };
-
- // Finds the rule for woff2 files and modifies the file-loader to preserve the original filenames to allow us to preload them
- const fontRuleIndex = config.module.rules.findIndex((rule) =>
- rule.test.toString().includes("woff2")
- );
- if (fontRuleIndex !== -1) {
- config.module.rules[fontRuleIndex] = {
- test: /\.(woff(2)?|eot|ttf|otf|svg|png)$/,
- type: "asset/resource",
- generator: {
- filename: "static/media/[name][ext]",
+ webpackFinal: async (config) => ({
+ ...config,
+ module: {
+ ...config?.module,
+ rules: [
+ ...(config?.module?.rules ?? []),
+ {
+ test: /\.(woff(2)?|eot|ttf|otf|svg|png)$/,
+ type: "asset/resource",
+ generator: {
+ filename: "static/media/[name][ext]",
+ },
  },
- };
- }
-
- return config;
- },
+ ],
+ },
+ }),
  ...(isChromatic && {
  previewHead: (head) => `
  ${head}
@@ -64,11 +69,10 @@ module.exports = {
  <meta name="robots" content="noindex">
  `,
  }),
- framework: {
- name: "@storybook/react-webpack5",
- options: {},
- },
- docs: {
- autodocs: true,
+ typescript: {
+ check: false,
+ reactDocgen: "react-docgen-typescript",
  },
 };
+
+export default config;

.storybook/manager-head.html

@@ -1,93 +1,7 @@
-<style>
- .sidebar-header [class*="ButtonLink"]:focus {
- box-shadow: none !important;
- background: white !important;
- border: 3px solid #007E45 !important;
- color: rgba(0,0,0,0.9) !important;
- font-weight: 500 !important;
- text-decoration: underline !important;
- }
-
- #storybook-preview-wrapper [class*="ButtonLink"]:focus {
- box-shadow: none !important;
- background: white !important;
- border: 3px solid #007E45 !important;
- color: rgba(0,0,0,0.9) !important;
- font-weight: 500 !important;
- text-decoration: underline !important;
- }
-
- #storybook-explorer-searchfield:focus {
- box-shadow: 0px 0px 0px 3px #ffb500;
- }
-
- .os-host .os-viewport button:focus {
- box-shadow: 0px 0px 0px 3px #ffb500;
- outline: none;
- }
-
- .os-host .os-viewport button[title="Shortcuts"]:focus {
- color: white;
- }
-
- .os-host .os-viewport button[data-action="collapse-root"] {
- color: rgba(0, 0, 0, 0.9);
- }
-
- .sidebar-item.sidebar-item {
- padding-bottom: 6px;
- padding-top: 6px;
- }
-
- .sidebar-item.sidebar-item + [class*="ButtonLink"]:focus {
- background: white;
- color: rgba(0,0,0,0.9);
- border: 2px solid #007E45;
- font-size: 12px;
- font-weight: 500;
- height: auto;
- padding: 4px 8px 4px 8px;
- text-decoration: underline;
- }
-
- .sidebar-item.sidebar-item:focus {
- background: white !important;
- outline: 3px solid #ffb500;
- }
-
- .sidebar-item.sidebar-item svg {
- color: rgba(0,0,0,0.9);
- }
-
- .sidebar-item.sidebar-item[data-selected="true"] {
- color: rgba(0,0,0,0.9) !important;
- font-weight: 500;
- }
-
- .sidebar-item.sidebar-item[data-selected="true"] svg {
- color: rgba(0,0,0,0.9);
- }
-
- .sidebar-item.sidebar-item[data-selected="false"]:hover,
- .sidebar-item.sidebar-item[data-nodetype="group"]:hover,
- .sidebar-item.sidebar-item[data-nodetype="component"]:hover {
- background: #007E45 !important;
- color: white;
- }
-
- .search-result-item .search-result-item--label mark {
- color: #0060a7;
- }
-
- .search-result-item svg {
- color: rgba(0,0,0,0.9);
- }
-</style>
-
 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 <link rel="manifest" href="/site.webmanifest">
 <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
 <meta name="msapplication-TileColor" content="#da532c">
-<meta name="theme-color" content="#ffffff">
+<meta name="theme-color" content="#ffffff">

.storybook/manager.ts

@@ -1,12 +1,10 @@
 import { addons } from "@storybook/manager-api";
-import sageTheme from "./sageTheme";
+import sageTheme from "./sage-docs-theme";
 import { API_PreparedIndexEntry, API_StatusObject } from "@storybook/types";
 
 addons.setConfig({
  theme: sageTheme,
  panelPosition: "bottom",
- showNav: true,
- showPanel: true,
  sidebar: {
  filters: {
  patterns: (

.storybook/preview-head.html

@@ -1,42 +1,8 @@
-<link
- rel="preload"
- href="/static/media/carbon-icons-webfont.woff2"
- as="font"
- type="font/woff2"
- crossorigin="anonymous"
-/>
+<link rel="preload" href="/static/media/carbon-icons-webfont.woff2" as="font" type="font/woff2"
+ crossorigin="anonymous" />
 
-<link
- rel="preload"
- href="/static/media/sageui-regular.woff2"
- as="font"
- type="font/woff2"
- crossorigin="anonymous"
-/>
+<link rel="preload" href="/static/media/sageui-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
 
-<link
- rel="preload"
- href="/static/media/sageui-medium.woff2"
- as="font"
- type="font/woff2"
- crossorigin="anonymous"
-/>
+<link rel="preload" href="/static/media/sageui-medium.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
 
-<link
- rel="preload"
- href="/static/media/sageui-bold.woff2"
- as="font"
- type="font/woff2"
- crossorigin="anonymous"
-/>
-
-<style>
- .sbdocs.sbdocs-wrapper {
- background: transparent !important;
- }
-
- #docs-root .sbdocs.sbdocs-wrapper .sbdocs-ul a {
- color: #007e45;
- font-weight: 700;
- }
-</style>
+<link rel="preload" href="/static/media/sageui-bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" />

.storybook/preview.ts

@@ -1,11 +1,12 @@
 import withGlobalStyles from "./with-global-styles";
-import { withLocaleSelector } from "./locale-selector";
 import { withThemeProvider, globalThemeProvider } from "./withThemeProvider";
-import { withPortalProvider } from "./with-portal-provider";
-import sageStorybookTheme from "./sageStorybookTheme";
+import withLocaleSelector from "./with-locale-selector";
+import withPortalProvider from "./with-portal-provider";
+import sageStorybookTheme from "./sage-storybook-theme";
 
 import "../src/style/fonts.css";
-import "./style/story-root.css";
+import isChromatic from "./isChromatic";
+import { Preview } from "@storybook/react";
 
 const customViewports = {
  extraSmall: {
@@ -45,7 +46,7 @@ const customViewports = {
  },
 };
 
-export const parameters = {
+const parameters = {
  docs: { canvas: { layout: "padded" }, theme: sageStorybookTheme },
  a11y: {
  // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
@@ -64,11 +65,10 @@ export const parameters = {
  },
  chromatic: { disableSnapshot: false },
  viewport: { viewports: customViewports },
- actions: { argTypesRegex: "^on[A-Z].*" },
  viewMode: process.env.STORYBOOK_VIEW_MODE,
 };
 
-export const globalTypes = {
+const globalTypes = {
  locale: {
  name: "Locale",
  description: "Internationalization locale",
@@ -116,9 +116,28 @@ export const globalTypes = {
  ...globalThemeProvider,
 };
 
-export const decorators = [
+const decorators = [
  withGlobalStyles,
  withThemeProvider,
  withLocaleSelector,
  withPortalProvider,
 ];
+
+const loaders =
+ isChromatic() && document.fonts
+ ? [
+ // Wait for fonts to be ready before rendering the story
+ async () => ({
+ fonts: await document.fonts.ready,
+ }),
+ ]
+ : [];
+
+const preview: Preview = {
+ parameters,
+ decorators,
+ globalTypes,
+ loaders,
+};
+
+export default preview;