fix(storybook): handle hyphenated framework names in pnpm dependency installation (#31760)

## Current Behavior

When installing Storybook dependencies with pnpm, the regex for
extracting base framework names from compound framework packages (e.g.,
@storybook/web-components-vite) was not properly handling hyphens in
framework names. This
caused it to extract incorrect base framework names like @storybook/web
instead of @storybook/web-components, leading to attempts to install
non-existent packages.

 ## Expected Behavior

The regex should properly extract base framework names that include
hyphens, correctly identifying @storybook/web-components as the base
framework for packages like @storybook/web-components-vite. This ensures
that only valid
  Storybook packages are installed during dependency resolution.

  ## Related Issue(s)

  Fixes #31292

Author: Coly010

packages/storybook/src/generators/configuration/lib/ensure-dependencies.ts

@@ -71,9 +71,16 @@ export function ensureDependencies(
     if (isPnpm) {
       // If it's pnpm, it needs the framework without the builder
       // as a dependency too (eg. @storybook/react)
-      const matchResult = options.uiFramework?.match(/^@storybook\/(\w+)/);
-      const uiFrameworkWithoutBuilder = matchResult ? matchResult[0] : null;
-      if (uiFrameworkWithoutBuilder) {
+      const matchResult = options.uiFramework?.match(
+        /^@storybook\/([\w-]+?)(?:-(?:vite|webpack5|webpack))?$/
+      );
+      const uiFrameworkWithoutBuilder = matchResult
+        ? `@storybook/${matchResult[1]}`
+        : null;
+      if (
+        uiFrameworkWithoutBuilder &&
+        uiFrameworkWithoutBuilder !== options.uiFramework
+      ) {
         devDependencies[uiFrameworkWithoutBuilder] = storybookVersionToInstall;
       }
     }