Allow browsing to a kind and get the first story (#6720)

Allow browsing to a kind and get the first story

lib/api/src/modules/stories.ts

@@ -254,7 +254,16 @@ Did you create a path that uses the separator char accidentally, such as 'Vue <d
 
     const { storyId, viewMode } = store.getState();
 
-    if (!storyId || !storiesHash[storyId]) {
+    if (storyId && storyId.match(/--\*$/)) {
+      const idStart = storyId.slice(0, -1); // drop the * at the end
+      const firstKindLeaf = Object.values(storiesHash).find(
+        (s: Story | Group) => !s.children && s.id.substring(0, idStart.length) === idStart
+      );
+
+      if (viewMode && firstKindLeaf) {
+        navigate(`/${viewMode}/${firstKindLeaf.id}`);
+      }
+    } else if (!storyId || storyId === '*' || !storiesHash[storyId]) {
       // when there's no storyId or the storyId item doesn't exist
       // we pick the first leaf and navigate
       const firstLeaf = Object.values(storiesHash).find((s: Story | Group) => !s.children);

lib/api/src/modules/url.ts

@@ -72,6 +72,10 @@ const initialUrlSupport = ({ navigate, location, path }: Module) => {
   if (selectedKind && selectedStory) {
     const storyId = toId(selectedKind, selectedStory);
     setTimeout(() => navigate(`/story/${storyId}`, { replace: true }), 1);
+  } else if (selectedKind) {
+    // Create a "storyId" of the form `kind-sanitized--*`
+    const standInId = toId(selectedKind, 'star').replace(/star$/, '*');
+    setTimeout(() => navigate(`/story/${standInId}`, { replace: true }), 1);
   } else if (!queryPath || queryPath === '/') {
     setTimeout(() => navigate(`/story/*`, { replace: true }), 1);
   } else if (Object.keys(query).length > 1) {