[Storybook] upgrade Storybook to v8

[mgadewoll]

Summary

closes #7646

This PR upgrades Storybook and related dependencies to v^8.x

🔗 Migration documentation

Upgrade testing and findings (main impacting changes)

1. Storybook v8 changes to be compiler agnostic. Currently available when migrating are SWC and Babel. (link)

   ✅ Storybook builds fine with SWC as well as Babel compilers
   ✅ very few updates required to make them work
   ✅ it's easy to use either or compiler

   1.1. required changes

   • remove actions: { argTypesRegex: '^on[A-Z].*' } preview setting from preview.tsx (link)
   • add waitFor for usage of userEvent.keyboard in test file 🤷‍♀️
   • Babel specific: exclude op_mob >= 1 in the .browserslistrc

2. Storybook v8 furthermore changes from react-docgen-typescript to react-docgen as default to analyze React component props and auto-generate controls. (link)

   ❗ The main change is around the docgen package.

2.1. react-docgen

example output: EuiButton

🚫 missing props (due to complex/custom types not being resolved)
🚫 completely missing jsdoc strings due to not resolved types
🚫 inferred types based on default prop value is unknown
🚫 inferred (and overwriting) types (based on storybook args)

examples:

// won't allow resolving the included types
type Props = ExclusiveUnion<EuiButtonPropsForAnchor, EuiButtonPropsForButton>;

// doesn't work
type PropsForAnchor<T, P = {}> = T & {
  href?: string;
  onClick?: MouseEventHandler<HTMLAnchorElement>;
} & AnchorHTMLAttributes<HTMLAnchorElement> &
  P;

type EuiButtonPropsForAnchor = PropsForAnchor<
  EuiButtonProps,
  {
    buttonRef?: Ref<HTMLAnchorElement>;
  }
>;

// works if we update types to simplify (extra effort)
// simplifying the AnchorProps
type AnchorProps = {
  href?: string;
  onClick?: MouseEventHandler<HTMLAnchorElement>;
} & AnchorHTMLAttributes<HTMLAnchorElement>;

// removing the wrapping with PropsForAnchor and using simplified AnchorProps instead
type EuiButtonPropsForAnchor = EuiButtonProps &
  AnchorProps & {
    buttonRef?: Ref<HTMLAnchorElement>;
  };

// story config
{
 args: {
  // this will result in the prop type being shown as 'boolean' instead of prop type definition of 
  // `MouseEventHandler<HTMLButtonElement> | MouseEventHandler<HTMLAnchorElement>`
    onClick: false,
 }
}

2.2. react-docgen-typescript

example output: EuiButton

👍 resolved complex/custom types (same as before, not 100% depending on type complexity)
👍 jsdoc strings available (same as before, not 100% but the majority)
👍 better preset control types (due to resolved types)
👍 args do not overwrite prop types

Comparing SWC and Babel performance

Both setups were run locally (M3 Macbook pro with 36 GB memory).

• both SWC and Babel compilers work running our scripts for dev and build

  • SWC and Babel with react-docgen are about the same when running build
  • SWC with react-docgen-typescript is about 12% faster than Babel when running build

• SWC

  • build: react-docgen is around 8% faster than with react-docgen-typescript
  • dev: react-docgen is around 17% faster than with react-docgen-typescript

• Babel

  • build: react-docgen is around 20% faster than with react-docgen-typescript
  • dev: react-docgen is around 18% faster than with react-docgen-typescript

QA

• ensure Storybook builds and that overall all stories load and their control tables are working as before on production

[mgadewoll]

🗒️ Based on first alignments we likely want to first upgrade and ensure parity with the current v7 state.

This would mean using react-docgen-typescript over react-docgen. In terms of SWC vs Babel it looks that we would be ok to use SWC as it works and is slightly faster than Babel.

After that, we could look at additional iterations to update/improve e.g. how types are resolved and storybook controls are auto-generated based on docgen.

[tkajtoch]

It seems like your branch needs rebasing with latest main :) I tested your PR locally and checked https://eui.elastic.co/pr_7659/storybook to ensure it still builds properly in CI.

[tkajtoch]

This is looking solid! 🚢

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7659/
• Storybook: https://eui.elastic.co/pr_7659/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 2a8f82a

History

• 💚 Build #1738 succeeded da8a53b
• 💚 Build #1717 succeeded c45615e
• 💚 Build #1695 succeeded 7623768
• 💚 Build #1694 succeeded b2f5b1b