fix: dynamic stories routes for gatsby ssr

core/core/src/document-utils.ts

@@ -84,10 +84,11 @@ export const getStoryPath = (
   const docRoute = removeTrailingSlash(doc?.route || basePath);
   const story = store?.stories[storyId];
   const { dynamicId, name } = story || {};
-  const id = dynamicId || storyId;
-  const route = `${docRoute}${id ? ensureStartingSlash(id) : ''}${
-    activeTab ? ensureStartingSlash(activeTab) : ''
-  }${dynamicId ? `?story=${name}` : ''}`;
+  const route = `${docRoute}${
+    !dynamicId && storyId ? ensureStartingSlash(storyId) : ''
+  }${activeTab ? ensureStartingSlash(activeTab) : ''}${
+    dynamicId ? `?story=${name}` : ''
+  }`;
   return encodeURI(`${siteRoot}${route}`);
 };
 

core/core/src/document.ts

@@ -168,14 +168,24 @@ export type Story = {
   dynamicId?: string;
 } & StoryProps;
 
+export type DynamicExamples = {
+  name: string;
+  source?: string;
+  renderFn: () => JSX.Element;
+}[];
 /**
  * es named export function, excapsulates a contained example code.
  */
-export type Example<P = {}> = {
-  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
-} & Omit<Story, 'controls'> & {
-    controls?: Story['controls'] | string | string[] | boolean | number;
-  };
+export type Example<P = {}> =
+  | ({
+      (props: PropsWithChildren<P>, context?: any): ReactElement<
+        any,
+        any
+      > | null;
+    } & Omit<Story, 'controls'> & {
+        controls?: Story['controls'] | string | string[] | boolean | number;
+      })
+  | DynamicExamples;
 
 /**
  * dynamic story creator function type.

core/core/test/paths.test.ts

@@ -128,6 +128,6 @@ describe('paths', () => {
         storeSiteRoot2,
         'test',
       ),
-    ).toEqual('/root/docs/api-introducetion--story-mame/test?story=Dynamic');
+    ).toEqual('/root/docs/test?story=Dynamic');
   });
 });

examples/stories/src/stories_native/dynamic-stories.stories.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/display-name */
 /** @jsx jsx */
 import { jsx, Button } from 'theme-ui';
+import { Example } from '@component-controls/core';
 import { theme } from '@component-controls/components';
 
 export default {
@@ -10,7 +11,7 @@ export default {
     "ESM story file to demostrate creating 'dynamic' stories at run-time. Creates a story iterating through each theme color",
 };
 
-export const buttonColors = () => {
+export const buttonColors = (): Example => {
   return Object.keys(theme.colors)
     .filter(color => typeof theme.colors[color] === 'string')
     .map(color => {

ui/app/src/AppContext/AppContext.tsx

@@ -34,14 +34,22 @@ export const AppContext: FC<AppContextProps> = ({
     typeof window !== 'undefined'
       ? queryString.parse(window.location.search)
       : undefined;
-  const dynStoryId =
-    query &&
-    docId &&
-    storyId &&
-    !store.stories[storyId] &&
-    typeof query.story === 'string'
-      ? docStoryToId(docId, query.story)
-      : storyId;
+  let dynStoryId: string | undefined;
+  if (query && docId && storyId && !store.stories[storyId]) {
+    if (typeof query.story === 'string') {
+      dynStoryId = docStoryToId(docId, query.story);
+    } else {
+      //if dynamic stories - the storyId could be wrong
+      if (store.docs[docId] && store.docs[docId].stories) {
+        const stories = store.docs[docId].stories as string[];
+        if (stories.length) {
+          dynStoryId = stories[0];
+        }
+      }
+    }
+  } else {
+    dynStoryId = storyId;
+  }
   return (
     <BlockContextProvider
       storyId={dynStoryId}

ui/app/tests/__snapshots__/stories.test.js.snap

@@ -1825,7 +1825,7 @@ exports[`Application/Sidebar Overview 1`] = `
               class="css-j6yaho"
             >
               <button
-                class="active css-161l3jj"
+                class="css-161l3jj"
               >
                 <div
                   class="css-1i09fc1"

ui/components/src/Navmenu/Navmenu.tsx

@@ -224,6 +224,12 @@ export const Navmenu: FC<NavMenuProps> = ({
       }),
     );
   }, [items, expandAll, activeItem, search]);
+  //workaround gatsby ssr not updating classnames on active item
+  const [isClient, setClient] = useState(false);
+
+  useEffect(() => {
+    setClient(true);
+  }, []);
 
   const onMenuChange = (item: MenuItem, expanded: boolean) => {
     const { expandedItems, filteredItems } = state;
@@ -289,7 +295,7 @@ export const Navmenu: FC<NavMenuProps> = ({
               onSelect(item);
             }
           }}
-          className={isActiveParent ? 'active' : undefined}
+          className={isActiveItem ? 'active' : undefined}
         >
           <Flex variant="navmenu.itemcontainer">
             <Box variant="navmenu.iteminner">
@@ -344,8 +350,9 @@ export const Navmenu: FC<NavMenuProps> = ({
     );
   };
   const { filteredItems } = state;
+
   return (
-    <Box as="nav">
+    <Box as="nav" key={isClient ? 'client' : 'ssr'}>
       {filteredItems && filteredItems.map(item => renderItem(item, 1))}
     </Box>
   );

ui/components/tests/__snapshots__/stories.test.js.snap

@@ -1360,7 +1360,7 @@ exports[`Components/Navmenu Items 1`] = `
           class="css-j6yaho"
         >
           <button
-            class="active css-161l3jj"
+            class="css-161l3jj"
           >
             <div
               class="css-1i09fc1"
@@ -1902,7 +1902,7 @@ exports[`Components/Navmenu Overview 1`] = `
           class="css-j6yaho"
         >
           <button
-            class="active css-161l3jj"
+            class="css-161l3jj"
           >
             <div
               class="css-1i09fc1"
@@ -2083,7 +2083,7 @@ exports[`Components/Navmenu Search 1`] = `
           class="css-j6yaho"
         >
           <button
-            class="active css-161l3jj"
+            class="css-161l3jj"
           >
             <div
               class="css-1i09fc1"