UI: Fix edge case where only one legacy separator is defined (#9425)

UI: Fix edge case where only one legacy separator is defined
storybookjs · Jan 14, 2020 · 31365c1 · 31365c1
2 parents 0e3ff1d + 57590d9
commit 31365c1
Showing 1 changed file with 33 additions and 30 deletions.
diff --git a/lib/api/src/modules/stories.ts b/lib/api/src/modules/stories.ts
@@ -129,23 +129,24 @@ const initStoriesApi = ({
     return undefined;
   };
 
-  const jumpToStory = (direction: Direction) => {
-    const { storiesHash, viewMode, storyId } = store.getState();
-
-    if (DOCS_MODE) {
-      jumpToComponent(direction);
-      return;
-    }
+  const jumpToComponent = (direction: Direction) => {
+    const state = store.getState();
+    const { storiesHash, viewMode, storyId } = state;
 
     // cannot navigate when there's no current selection
     if (!storyId || !storiesHash[storyId]) {
       return;
     }
 
-    const lookupList = Object.keys(storiesHash).filter(
-      k => !(storiesHash[k].children || Array.isArray(storiesHash[k]))
-    );
-    const index = lookupList.indexOf(storyId);
+    const lookupList = Object.entries(storiesHash).reduce((acc, i) => {
+      const value = i[1];
+      if (value.isComponent) {
+        acc.push([...i[1].children]);
+      }
+      return acc;
+    }, []);
+
+    const index = lookupList.findIndex(i => i.includes(storyId));
 
     // cannot navigate beyond fist or last
     if (index === lookupList.length - 1 && direction > 0) {
@@ -155,31 +156,28 @@ const initStoriesApi = ({
       return;
     }
 
-    const result = lookupList[index + direction];
+    const result = lookupList[index + direction][0];
 
-    if (viewMode && result) {
-      navigate(`/${viewMode}/${result}`);
-    }
+    navigate(`/${viewMode || 'story'}/${result}`);
   };
 
-  const jumpToComponent = (direction: Direction) => {
-    const state = store.getState();
-    const { storiesHash, viewMode, storyId } = state;
+  const jumpToStory = (direction: Direction) => {
+    const { storiesHash, viewMode, storyId } = store.getState();
+
+    if (DOCS_MODE) {
+      jumpToComponent(direction);
+      return;
+    }
 
     // cannot navigate when there's no current selection
     if (!storyId || !storiesHash[storyId]) {
       return;
     }
 
-    const lookupList = Object.entries(storiesHash).reduce((acc, i) => {
-      const value = i[1];
-      if (value.isComponent) {
-        acc.push([...i[1].children]);
-      }
-      return acc;
-    }, []);
-
-    const index = lookupList.findIndex(i => i.includes(storyId));
+    const lookupList = Object.keys(storiesHash).filter(
+      k => !(storiesHash[k].children || Array.isArray(storiesHash[k]))
+    );
+    const index = lookupList.indexOf(storyId);
 
     // cannot navigate beyond fist or last
     if (index === lookupList.length - 1 && direction > 0) {
@@ -189,9 +187,11 @@ const initStoriesApi = ({
       return;
     }
 
-    const result = lookupList[index + direction][0];
+    const result = lookupList[index + direction];
 
-    navigate(`/${viewMode || 'story'}/${result}`);
+    if (viewMode && result) {
+      navigate(`/${viewMode}/${result}`);
+    }
   };
 
   const toKey = (input: string) =>
@@ -238,7 +238,10 @@ const initStoriesApi = ({
       if (typeof rootSeparator !== 'undefined' || typeof groupSeparator !== 'undefined') {
         warnRemovingHierarchySeparators();
         if (usingShowRoots) warnUsingHierarchySeparatorsAndShowRoots();
-        ({ root, groups } = parseKind(kind, { rootSeparator, groupSeparator }));
+        ({ root, groups } = parseKind(kind, {
+          rootSeparator: rootSeparator || '|',
+          groupSeparator: groupSeparator || /\/|\./,
+        }));
 
         // 2. If the user hasn't passed separators, but is using | or . in kinds, use the old behaviour but warn
       } else if (anyKindMatchesOldHierarchySeparators && !usingShowRoots) {