refactor: [M3-8184] - Improve local Storybook performance (#10762)

## Description 📝
Performance optimizations for running Storybook locally

The main culprit is using `react-docgen-typescript`; it's parsing every file for docgen info. The package is also [no longer being maintained](styleguidist/react-docgen-typescript#494) (the last release was in [end of 2021](https://github.com/styleguidist/react-docgen-typescript/releases)).
   - There's a faster docgen library that Storybook 8 uses, `react-docgen`, however we're missing a lot of typing by using that since it's using a shallower analysis.
   - The solution I ended up at was to keep `react-docgen-typescript`, but tighten the scope on what files are parsed for the docgen (Components and Features only). And to also disable `allowSyntheticDefaultImports` and `esModuleInterop` per the [Storybook MUI docs
](https://storybook.js.org/recipes/@mui/material#4-use-material-ui-prop-types-for-better-controls-and-docs)

The time from first paint to Intro loaded on my Intel i7 2019 MBP went from `over 1 minute` to `30s` 🎉 

## How to test 🧪
### Reproduction steps
(How to reproduce the issue, if applicable)
- On the develop branch, run Storybook locally and time the time it takes from first paint to Intro loaded

### Verification steps
(How to verify changes)
- Pull down this branch, run Storybook locally and the time from first paint to Intro loaded should be shorter than develop
- The should be no regressions in the typing and loading of stories compared to https://design.linode.com/

Author: hana-akamai

packages/manager/.changeset/pr-10762-tech-stories-1723134446106.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Improve local Storybook performance ([#10762](https://github.com/linode/manager/pull/10762))

packages/manager/.storybook/main.ts

@@ -1,5 +1,8 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 import { mergeConfig } from 'vite';
+import { getReactDocgenTSFileGlobs } from './utils';
+
+const typeScriptFileGlobs = getReactDocgenTSFileGlobs();
 
 const config: StorybookConfig = {
   stories: [
@@ -22,6 +25,11 @@ const config: StorybookConfig = {
   },
   typescript: {
     reactDocgenTypescriptOptions: {
+      // Speeds up Storybook build time
+      compilerOptions: {
+        allowSyntheticDefaultImports: false,
+        esModuleInterop: false,
+      },
       // makes union prop types like variant and size appear as select controls
       shouldExtractLiteralValuesFromEnum: true,
       // makes string and boolean types that can be undefined appear as inputs and switches
@@ -31,8 +39,11 @@ const config: StorybookConfig = {
         prop.parent
           ? !/node_modules\/(?!@mui)/.test(prop.parent.fileName)
           : true,
+      // Only compile files that have stories for faster local development performance
+      include: /(development|test)/i.test(process.env.NODE_ENV ?? '')
+        ? typeScriptFileGlobs
+        : undefined,
     },
-
     reactDocgen: 'react-docgen-typescript',
   },
   docs: {

packages/manager/.storybook/utils.test.ts

@@ -0,0 +1,27 @@
+import { getReactDocgenTSFileGlobs } from './utils';
+
+describe('getReactDocgenTSFileGlobs', () => {
+  const typeScriptFileGlobs = getReactDocgenTSFileGlobs();
+  it('should return component and feature globs for storybook files', () => {
+    expect(
+      typeScriptFileGlobs.some(
+        (file) => file === 'src/components/Button/**/*.{ts,tsx}'
+      )
+    ).toBe(true);
+    expect(
+      typeScriptFileGlobs.some(
+        (file) => file === 'src/components/Paper.{ts,tsx}'
+      )
+    ).toBe(true);
+    expect(
+      typeScriptFileGlobs.some(
+        (file) => file === 'src/features/TopMenu/**/*.{ts,tsx}'
+      )
+    ).toBe(true);
+    expect(
+      typeScriptFileGlobs.some(
+        (file) => file === 'src/features/Longview/**/*.{ts,tsx}'
+      )
+    ).toBe(false);
+  });
+});

packages/manager/.storybook/utils.ts

@@ -0,0 +1,28 @@
+import globby from 'globby';
+
+const PATTERN = 'src/**/*.stories.tsx';
+
+/**
+ * Find all storybook files, then return the glob containing the parent component/feature.
+ * To be used in main.ts to tell react-docgen-typescript which files to compile.
+ * https://github.com/linode/manager/pull/10762
+ *
+ * Example: src/components/Button/Button.stories.tsx -> src/components/Button/**\/*.{ts,tsx}
+ */
+export const getReactDocgenTSFileGlobs = () => {
+  const filesWithStories = globby.sync(PATTERN);
+  const files: string[] = [];
+
+  filesWithStories.forEach((file) => {
+    const execArr = /(src\/(components|features)\/[a-zA-Z]*(.|\/))/.exec(file);
+    if (execArr) {
+      const isDirectory = execArr[3] === '/';
+      const fileBlob = `${execArr[0]}${isDirectory ? '**/*.' : ''}{ts,tsx}`;
+      if (!files.includes(fileBlob)) {
+        files.push(fileBlob);
+      }
+    }
+  });
+
+  return files;
+};