Fix infinite loop with special characters in kind names

lib/api/src/modules/stories.ts

@@ -1,4 +1,4 @@
-import { toId, sanitize } from '@storybook/router/dist/utils';
+import { toId, sanitize, splitPath } from '@storybook/router/utils';
 
 import { Module } from '../index';
 import merge from '../lib/merge';
@@ -27,11 +27,6 @@ export interface SubAPI {
   getParameters: (storyId: StoryId, parameterName?: ParameterName) => Story['parameters'] | any;
 }
 
-interface SeparatorOptions {
-  rootSeparator: string | RegExp;
-  groupSeparator: string | RegExp;
-}
-
 interface Group {
   id: StoryId;
   name: string;
@@ -164,17 +159,6 @@ const initStoriesApi = ({
     navigate(`/${viewMode || 'story'}/${result}`);
   };
 
-  const splitPath = (kind: string, { rootSeparator, groupSeparator }: SeparatorOptions) => {
-    const [root, remainder] = kind.split(rootSeparator, 2);
-    const groups = (remainder || kind).split(groupSeparator).filter(i => !!i);
-
-    // when there's no remainder, it means the root wasn't found/split
-    return {
-      root: remainder ? root : null,
-      groups,
-    };
-  };
-
   const toKey = (input: string) =>
     input.replace(/[^a-z0-9]+([a-z0-9])/gi, (...params) => params[1].toUpperCase());
 
@@ -192,7 +176,7 @@ const initStoriesApi = ({
         hierarchyRootSeparator: rootSeparator,
         hierarchySeparator: groupSeparator,
       } = (parameters && parameters.options) || {
-        hierarchyRootSeparator: '/',
+        hierarchyRootSeparator: '|',
         hierarchySeparator: '/',
       };
 
@@ -208,6 +192,15 @@ const initStoriesApi = ({
             const { name } = group;
             const parent = index > 0 && soFar[index - 1].id;
             const id = sanitize(parent ? `${parent}-${name}` : name);
+            if (parent === id) {
+              throw new Error(
+                `
+Invalid kind with id === parentId: '${id}'
+
+Did you create a path that uses the separator char accidentally, such as 'Vue <docs/>' where '/' is a separator char? See https://github.com/storybooks/storybook/issues/6128
+              `.trim()
+              );
+            }
 
             const result: Group = {
               ...group,

lib/client-api/src/index.js

@@ -1,5 +1,5 @@
 import ClientApi, { defaultDecorateStory } from './client_api';
-import StoryStore, { splitPath } from './story_store';
+import StoryStore from './story_store';
 import ConfigApi from './config_api';
 import subscriptionsStore from './subscriptions_store';
 import pathToId from './pathToId';
@@ -13,7 +13,6 @@ export {
   subscriptionsStore,
   defaultDecorateStory,
   pathToId,
-  splitPath,
   getQueryParams,
   getQueryParam,
 };

lib/client-api/src/story_store.js

@@ -21,17 +21,6 @@ const toKey = input =>
 
 const toChild = it => ({ ...it });
 
-export const splitPath = (path, { rootSeparator, groupSeparator }) => {
-  const [root, remainder] = path.split(rootSeparator, 2);
-  const groups = (remainder || path).split(groupSeparator).filter(i => !!i);
-
-  // when there's no remainder, it means the root wasn't found/split
-  return {
-    root: remainder ? root : null,
-    groups,
-  };
-};
-
 let count = 0;
 
 function getId() {

lib/router/src/utils.ts

@@ -6,8 +6,13 @@ interface StoryData {
   storyId?: string;
 }
 
+interface SeparatorOptions {
+  rootSeparator: string | RegExp;
+  groupSeparator: string | RegExp;
+}
+
 export const knownNonViewModesRegex = /(settings)/;
-const splitPath = /\/([^/]+)\/([^/]+)?/;
+const splitPathRegex = /\/([^/]+)\/([^/]+)?/;
 
 // Remove punctuation https://gist.github.com/davidjrice/9d2af51100e41c6c4b4a
 export const sanitize = (string: string) => {
@@ -38,7 +43,7 @@ export const storyDataFromString: (path?: string) => StoryData = memoize(1000)(
     };
 
     if (path) {
-      const [, viewMode, storyId] = path.match(splitPath) || [undefined, undefined, undefined];
+      const [, viewMode, storyId] = path.match(splitPathRegex) || [undefined, undefined, undefined];
       if (viewMode && !viewMode.match(knownNonViewModesRegex)) {
         Object.assign(result, {
           viewMode,
@@ -73,3 +78,14 @@ export const getMatch = memoize(1000)(
     return null;
   }
 );
+
+export const splitPath = (kind: string, { rootSeparator, groupSeparator }: SeparatorOptions) => {
+  const [root, remainder] = kind.split(rootSeparator, 2);
+  const groups = (remainder || kind).split(groupSeparator).filter(i => !!i);
+
+  // when there's no remainder, it means the root wasn't found/split
+  return {
+    root: remainder ? root : null,
+    groups,
+  };
+};