Merge pull request #15038 from storybookjs/13311-storySort-order-whit…

…espace Core: Fix storySort `order` with whitespace in story paths
storybookjs · May 26, 2021 · 95f5bfd · 95f5bfd
2 parents 17693bd + 8c20356
commit 95f5bfd
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/addons/docs/src/blocks/Title.tsx b/addons/docs/src/blocks/Title.tsx
@@ -5,9 +5,11 @@ import { DocsContext, DocsContextProps } from './DocsContext';
 interface TitleProps {
   children?: JSX.Element | string;
 }
-export const extractTitle = ({ kind, parameters }: DocsContextProps) => {
-  const groups = kind.split('/');
 
+const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/;
+
+export const extractTitle = ({ kind }: DocsContextProps) => {
+  const groups = kind.trim().split(STORY_KIND_PATH_SEPARATOR);
   return (groups && groups[groups.length - 1]) || kind;
 };
 

diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts
@@ -147,6 +147,8 @@ export const denormalizeStoryParameters = ({
   }));
 };
 
+const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/;
+
 export const transformStoriesRawToStoriesHash = (
   input: StoriesRaw,
   { provider }: { provider: Provider }
@@ -168,7 +170,7 @@ export const transformStoriesRawToStoriesHash = (
       warnChangedDefaultHierarchySeparators();
     }
 
-    const groups = kind.split('/').map((part) => part.trim());
+    const groups = kind.trim().split(STORY_KIND_PATH_SEPARATOR);
     const root = (!setShowRoots || showRoots) && groups.length > 1 ? [groups.shift()] : [];
 
     const rootAndGroups = [...root, ...groups].reduce((list, name, index) => {

diff --git a/lib/client-api/src/storySort.test.ts b/lib/client-api/src/storySort.test.ts
@@ -6,18 +6,18 @@ describe('preview.storySort', () => {
     á: ['', { kind: 'á' }],
     A: ['', { kind: 'A' }],
     b: ['', { kind: 'b' }],
-    a_a: ['', { kind: 'a/a' }],
-    a_b: ['', { kind: 'a/b' }],
-    a_c: ['', { kind: 'a/c' }],
-    b_a_a: ['', { kind: 'b/a/a' }],
-    b_b: ['', { kind: 'b/b' }],
+    a_a: ['', { kind: 'a / a' }],
+    a_b: ['', { kind: 'a / b' }],
+    a_c: ['', { kind: 'a / c' }],
+    b_a_a: ['', { kind: 'b / a / a' }],
+    b_b: ['', { kind: 'b / b' }],
     c: ['', { kind: 'c' }],
     locale1: ['', { kind: 'Б' }],
     locale2: ['', { kind: 'Г' }],
     c__a: ['', { kind: 'c', name: 'a' }],
-    c_b__a: ['', { kind: 'c/b', name: 'a' }],
-    c_b__b: ['', { kind: 'c/b', name: 'b' }],
-    c_b__c: ['', { kind: 'c/b', name: 'c' }],
+    c_b__a: ['', { kind: 'c / b', name: 'a' }],
+    c_b__b: ['', { kind: 'c / b', name: 'b' }],
+    c_b__c: ['', { kind: 'c / b', name: 'c' }],
     c__c: ['', { kind: 'c', name: 'c' }],
   };
 

diff --git a/lib/client-api/src/storySort.ts b/lib/client-api/src/storySort.ts
@@ -1,5 +1,7 @@
 import { StorySortObjectParameter, StorySortComparator } from '@storybook/addons';
 
+const STORY_KIND_PATH_SEPARATOR = /\s*\/\s*/;
+
 export const storySort = (options: StorySortObjectParameter = {}): StorySortComparator => (
   a: any,
   b: any
@@ -16,8 +18,13 @@ export const storySort = (options: StorySortObjectParameter = {}): StorySortComp
   let order = options.order || [];
 
   // Examine each part of the story kind in turn.
-  const storyKindA = [...a[1].kind.split('/'), ...(options.includeNames ? a[1].name : [])];
-  const storyKindB = [...b[1].kind.split('/'), ...(options.includeNames ? b[1].name : [])];
+  const storyKindA = a[1].kind.trim().split(STORY_KIND_PATH_SEPARATOR);
+  const storyKindB = b[1].kind.trim().split(STORY_KIND_PATH_SEPARATOR);
+  if (options.includeNames) {
+    storyKindA.push(a[1].name);
+    storyKindB.push(b[1].name);
+  }
+
   let depth = 0;
   while (storyKindA[depth] || storyKindB[depth]) {
     // Stories with a shorter depth should go first.