Story path ('kind') can have spaces around separators

storybookjs · May 25, 2021 · 0a4b5be · 0a4b5be
1 parent 21503b6
commit 0a4b5be
Show file tree

Hide file tree

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

diff --git a/lib/api/src/lib/stories.ts b/lib/api/src/lib/stories.ts
@@ -168,7 +168,7 @@ export const transformStoriesRawToStoriesHash = (
       warnChangedDefaultHierarchySeparators();
     }
 
-    const groups = kind.split('/').map((part) => part.trim());
+    const groups = kind.split(/\s*\/\s*/);
     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
@@ -16,8 +16,8 @@ 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.split(/\s*\/\s*/), ...(options.includeNames ? a[1].name : [])];
+  const storyKindB = [...b[1].kind.split(/\s*\/\s*/), ...(options.includeNames ? b[1].name : [])];
   let depth = 0;
   while (storyKindA[depth] || storyKindB[depth]) {
     // Stories with a shorter depth should go first.