From b8c7b7b1d8bf3f5873509f8519473f6de427003f Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 22 May 2023 17:15:11 +0200
Subject: [PATCH] Take backslash paths into account

---
 .../helpers/mainConfigFile.test.ts            | 24 +++++++++++++++++++
 .../src/automigrate/helpers/mainConfigFile.ts | 24 +++++++++++++------
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/code/lib/cli/src/automigrate/helpers/mainConfigFile.test.ts b/code/lib/cli/src/automigrate/helpers/mainConfigFile.test.ts
index 40770c7cde9d..f31ca41f0a0f 100644
--- a/code/lib/cli/src/automigrate/helpers/mainConfigFile.test.ts
+++ b/code/lib/cli/src/automigrate/helpers/mainConfigFile.test.ts
@@ -45,6 +45,19 @@ describe('getBuilderPackageName', () => {
     expect(packageName).toBe(builderPackage);
   });
 
+  it('should return builder package name when core.builder.name contains windows backslash paths', () => {
+    const builderPackage = '@storybook/builder-webpack5';
+    const packageNameOrPath = 'c:\\path\\to\\@storybook\\builder-webpack5';
+    const mainConfig = {
+      core: {
+        builder: { name: packageNameOrPath },
+      },
+    };
+
+    const packageName = getBuilderPackageName(mainConfig as any);
+    expect(packageName).toBe(builderPackage);
+  });
+
   it(`should return package name or path when core.builder doesn't contain the name of a valid builder package`, () => {
     const packageNameOrPath = '@my-org/storybook-builder';
     const mainConfig = {
@@ -95,6 +108,17 @@ describe('getFrameworkPackageName', () => {
     expect(packageName).toBe(frameworkPackage);
   });
 
+  it('should return builder package name when framework.name contains windows backslash paths', () => {
+    const builderPackage = '@storybook/react-vite';
+    const packageNameOrPath = 'c:\\path\\to\\@storybook\\react-vite';
+    const mainConfig = {
+      framework: { name: packageNameOrPath },
+    };
+
+    const packageName = getFrameworkPackageName(mainConfig as any);
+    expect(packageName).toBe(builderPackage);
+  });
+
   it(`should return package name or path when framework does not contain the name of a valid framework package`, () => {
     const packageNameOrPath = '@my-org/storybook-framework';
     const mainConfig = {
diff --git a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts
index ebf10cef9799..b5240a6b4f5c 100644
--- a/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts
+++ b/code/lib/cli/src/automigrate/helpers/mainConfigFile.ts
@@ -11,6 +11,7 @@ import { readConfig, writeConfig as writeConfigFile } from '@storybook/csf-tools
 import chalk from 'chalk';
 import semver from 'semver';
 import dedent from 'ts-dedent';
+import path from 'path';
 import type { JsPackageManager } from '../../js-package-manager';
 
 const logger = console;
@@ -24,10 +25,15 @@ export const getFrameworkPackageName = (mainConfig?: StorybookConfig) => {
   const packageNameOrPath =
     typeof mainConfig?.framework === 'string' ? mainConfig.framework : mainConfig?.framework?.name;
 
-  return packageNameOrPath
-    ? Object.keys(frameworkPackages).find((pkg) => packageNameOrPath.endsWith(pkg)) ??
-        packageNameOrPath
-    : null;
+  if (!packageNameOrPath) {
+    return null;
+  }
+
+  const normalizedPath = path.normalize(packageNameOrPath).replace(new RegExp(/\\/, 'g'), '/');
+
+  return (
+    Object.keys(frameworkPackages).find((pkg) => normalizedPath.endsWith(pkg)) || packageNameOrPath
+  );
 };
 
 /**
@@ -41,9 +47,13 @@ export const getBuilderPackageName = (mainConfig?: StorybookConfig) => {
       ? mainConfig.core.builder
       : mainConfig?.core?.builder?.name;
 
-  return packageNameOrPath
-    ? builderPackages.find((pkg) => packageNameOrPath.endsWith(pkg)) ?? packageNameOrPath
-    : null;
+  if (!packageNameOrPath) {
+    return null;
+  }
+
+  const normalizedPath = path.normalize(packageNameOrPath).replace(new RegExp(/\\/, 'g'), '/');
+
+  return builderPackages.find((pkg) => normalizedPath.endsWith(pkg)) || packageNameOrPath;
 };
 
 /**