Core: Fix api.selectStory in the case of component permalinks

examples/official-storybook/stories/demo/welcome.stories.js

@@ -7,7 +7,9 @@ export default {
   component: Welcome,
 };
 
-export const ToStorybook = () => <Welcome showApp={linkTo('Button')} />;
+// export const ToStorybook = () => <Welcome showApp={linkTo('other-demo-buttonmdx--with-text')} />;
+// export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/ButtonMdx')} />;
+export const ToStorybook = () => <Welcome showApp={linkTo('Other/Demo/Button')} />;
 ToStorybook.story = {
   name: 'to Storybook',
 };

lib/api/src/modules/stories.ts

@@ -364,7 +364,19 @@ Did you create a path that uses the separator char accidentally, such as 'Vue <d
       const kind = storyId.split('--', 2)[0];
       selectStory(toId(kind, story));
     } else {
-      selectStory(toId(kindOrId, story));
+      const id = toId(kindOrId, story);
+      if (storiesHash[id]) {
+        selectStory(id);
+      } else {
+        // Support legacy API with component permalinks, where kind is `x/y` but permalink is 'z'
+        const k = storiesHash[sanitize(kindOrId)];
+        if (k && k.children) {
+          const foundId = k.children.find(childId => storiesHash[childId].name === story);
+          if (foundId) {
+            selectStory(foundId);
+          }
+        }
+      }
     }
   };
 

lib/api/src/tests/stories.test.js

@@ -49,6 +49,13 @@ describe('stories API', () => {
       path: 'b-d--2',
       id: 'b-d--2',
     },
+    'custom-id--1': {
+      kind: 'b/e',
+      name: '1',
+      parameters,
+      path: 'custom-id--1',
+      id: 'custom-id--1',
+    },
   };
   describe('setStories', () => {
     it('stores basic kinds and stories w/ correct keys', () => {
@@ -74,6 +81,8 @@ describe('stories API', () => {
         'b-d',
         'b-d--1',
         'b-d--2',
+        'b-e',
+        'custom-id--1',
       ]);
       expect(storedStoriesHash.a).toMatchObject({
         id: 'a',
@@ -100,7 +109,7 @@ describe('stories API', () => {
 
       expect(storedStoriesHash.b).toMatchObject({
         id: 'b',
-        children: ['b-c', 'b-d'],
+        children: ['b-c', 'b-d', 'b-e'],
         isRoot: false,
         isComponent: false,
       });
@@ -144,6 +153,14 @@ describe('stories API', () => {
         name: '2',
         parameters,
       });
+
+      expect(storedStoriesHash['custom-id--1']).toMatchObject({
+        id: 'custom-id--1',
+        parent: 'b-e',
+        kind: 'b/e',
+        name: '1',
+        parameters,
+      });
     });
 
     it('sets roots when showRoots = true', () => {
@@ -496,7 +513,7 @@ describe('stories API', () => {
       const {
         api: { setStories, jumpToStory },
         state,
-      } = initStories({ store, navigate, storyId: 'b-d--2', viewMode: 'story' });
+      } = initStories({ store, navigate, storyId: 'custom-id--1', viewMode: 'story' });
       store.setState(state);
       setStories(storiesHash);
 
@@ -570,7 +587,7 @@ describe('stories API', () => {
       const {
         api: { setStories, jumpToComponent },
         state,
-      } = initStories({ store, navigate, storyId: 'b-d--2', viewMode: 'story' });
+      } = initStories({ store, navigate, storyId: 'custom-id--1', viewMode: 'story' });
       store.setState(state);
       setStories(storiesHash);
 
@@ -651,5 +668,52 @@ describe('stories API', () => {
       selectStory('a');
       expect(navigate).toHaveBeenCalledWith('/story/a--1');
     });
+
+    describe('compnonent permalinks', () => {
+      it('allows navigating to kind/storyname (legacy api)', () => {
+        const navigate = jest.fn();
+        const store = createMockStore();
+
+        const {
+          api: { selectStory, setStories },
+          state,
+        } = initStories({ store, navigate });
+        store.setState(state);
+        setStories(storiesHash);
+
+        selectStory('b/e', '1');
+        expect(navigate).toHaveBeenCalledWith('/story/custom-id--1');
+      });
+
+      it('allows navigating to component permalink/storyname (legacy api)', () => {
+        const navigate = jest.fn();
+        const store = createMockStore();
+
+        const {
+          api: { selectStory, setStories },
+          state,
+        } = initStories({ store, navigate });
+        store.setState(state);
+        setStories(storiesHash);
+
+        selectStory('custom-id', '1');
+        expect(navigate).toHaveBeenCalledWith('/story/custom-id--1');
+      });
+
+      it('allows navigating to first story in kind on call by kind', () => {
+        const navigate = jest.fn();
+        const store = createMockStore();
+
+        const {
+          api: { selectStory, setStories },
+          state,
+        } = initStories({ store, navigate });
+        store.setState(state);
+        setStories(storiesHash);
+
+        selectStory('b/e');
+        expect(navigate).toHaveBeenCalledWith('/story/custom-id--1');
+      });
+    });
   });
 });