normalize paths when attempting to create autoTitle

examples/angular-cli/.storybook/main.js

@@ -16,6 +16,9 @@ module.exports = {
   core: {
     builder: 'webpack4',
   },
+  features: {
+    previewCsfV3: true,
+  },
   angularOptions: {
     enableIvy: true,
   },

examples/angular-cli/src/stories/preview/csf3/story-with-autotitle.stories.ts

@@ -0,0 +1,9 @@
+import { AppComponent } from '../../../app/app.component';
+
+export default {
+  component: AppComponent,
+};
+
+export const Default = {
+  render: (props) => ({ props }),
+};

lib/core-client/package.json

@@ -54,6 +54,7 @@
     "lodash": "^4.17.20",
     "qs": "^6.10.0",
     "regenerator-runtime": "^0.13.7",
+    "slash": "^3.0.0",
     "ts-dedent": "^2.0.0",
     "unfetch": "^4.2.0",
     "util-deprecate": "^1.0.2"

lib/core-client/src/preview/autoTitle.test.ts

@@ -47,6 +47,12 @@ describe('autoTitle', () => {
         auto('/path/to_my/file', { glob: '', specifier: { directory: '/path' } })
       ).toMatchInlineSnapshot(`To My/File`);
     });
+
+    it('match with windows path', () => {
+      expect(
+        auto('/path/to_my/file', { glob: '', specifier: { directory: '\\path' } })
+      ).toMatchInlineSnapshot(`To My/File`);
+    });
   });
 
   describe('trailing slash', () => {
@@ -85,5 +91,11 @@ describe('autoTitle', () => {
         auto('/path/to_my/file', { glob: '', specifier: { directory: '/path/' } })
       ).toMatchInlineSnapshot(`To My/File`);
     });
+
+    it('match with windows path', () => {
+      expect(
+        auto('/path/to_my/file', { glob: '', specifier: { directory: '\\path\\' } })
+      ).toMatchInlineSnapshot(`To My/File`);
+    });
   });
 });

lib/core-client/src/preview/autoTitle.ts

@@ -1,7 +1,8 @@
+import type { NormalizedStoriesEntry } from '@storybook/core-common';
 import global from 'global';
-import path from 'path';
 import startCase from 'lodash/startCase';
-import type { NormalizedStoriesEntry } from '@storybook/core-common';
+import path from 'path';
+import slash from 'slash';
 
 const { FEATURES = {}, STORIES = [] } = global;
 
@@ -32,9 +33,15 @@ const startCaseTitle = (title: string) => {
 
 export const autoTitleFromEntry = (fileName: string, entry: NormalizedStoriesEntry) => {
   const { directory, titlePrefix = '' } = entry.specifier || {};
-  if (fileName.startsWith(directory)) {
-    const suffix = fileName.replace(directory, '');
-    return startCaseTitle(stripExtension(path.join(titlePrefix, suffix)));
+  // On Windows, backslashes are used in paths, which can cause problems here
+  // slash makes sure we always handle paths with unix-style forward slash
+  const normalizedDirectory = directory && slash(directory);
+  const normalizedFileName = slash(fileName);
+
+  if (normalizedFileName.startsWith(normalizedDirectory)) {
+    const suffix = normalizedFileName.replace(normalizedDirectory, '');
+    const titleAndSuffix = slash(path.join(titlePrefix, suffix));
+    return startCaseTitle(stripExtension(titleAndSuffix));
   }
   return undefined;
 };

yarn.lock

@@ -6897,6 +6897,7 @@ __metadata:
     lodash: ^4.17.20
     qs: ^6.10.0
     regenerator-runtime: ^0.13.7
+    slash: ^3.0.0
     ts-dedent: ^2.0.0
     unfetch: ^4.2.0
     util-deprecate: ^1.0.2