fix: dynamic stories with fixed route

core/core/src/document-utils.ts

@@ -89,15 +89,19 @@ export const docStoryToId = (docId: string, storyId: string) =>
 /**
  * maps an exported story to an array of stories. Used for dynamically created stories.
  */
-export const mapDynamicStories = (story: Story, doc: Document): Story[] => {
+export const mapDynamicStories = (
+  story: Story,
+  doc: Document,
+  building: boolean,
+): Story[] => {
   if (story.dynamic && typeof story.renderFn === 'function') {
     const stories = story.renderFn(doc);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { id, name, ...storyProps } = story;
     return Array.isArray(stories)
       ? stories.map(s => ({
           ...storyProps,
-          dynamicId: docStoryToId(doc.title, id || name),
+          dynamicId: building ? undefined : docStoryToId(doc.title, id || name),
           ...s,
         }))
       : [story];

core/store/src/serialization/load-store.ts

@@ -22,7 +22,7 @@ import { transformControls } from './transform-controls';
 
 export { LoadingStore };
 
-export const loadStore = (store: LoadingStore): Store => {
+export const loadStore = (store: LoadingStore, building?: boolean): Store => {
   const globalStore: Store = getDefaultStore();
   try {
     const {
@@ -72,7 +72,11 @@ export const loadStore = (store: LoadingStore): Store => {
           globalStore.docs[doc.title] = doc;
           Object.keys(storeStories).forEach((storyName: string) => {
             const exportedStory: Story = storeStories[storyName];
-            let stories: Story[] = mapDynamicStories(exportedStory, doc);
+            let stories: Story[] = mapDynamicStories(
+              exportedStory,
+              doc,
+              building,
+            );
             stories.forEach(story => {
               story.id = story.id || story.name;
               Object.assign(story, deepMerge(docStoryProps, story));

core/store/src/state/recoil/controls.tsx

@@ -70,8 +70,6 @@ export interface ControlsStateProviderProps {
   controls?: ComponentControls;
 }
 export const ControlsStateProvider: FC<ControlsStateProviderProps> = ({
-  controls,
-  onChange,
   children,
 }) => {
   return <RecoilRoot>{children}</RecoilRoot>;

core/store/src/state/recoil/story.ts

@@ -7,7 +7,7 @@ import {
   getComponentName,
   Component,
 } from '@component-controls/core';
-import { storeState, useStore, useActiveTab, useConfig } from './store';
+import { storeState, useStore, useActiveTab } from './store';
 
 export const storyIdState = atom<string | undefined>({
   key: 'story_id',

examples/stories/src/tutorial/write-documentation/esmodules-stories.mdx

@@ -79,7 +79,7 @@ myStory.story = {
 
 ### Dynamic stories
 
-You can create multiple stories dynamically (at run time) from a function To do this, all you need is to add `dynamic = true` flag to the exported story:
+You can create multiple stories dynamically from a function To do this, all you need is to add `dynamic = true` flag to the exported story:
 
 ```
 import React from 'react';
@@ -109,7 +109,7 @@ buttonColors.dynamic = true;
 ```
 [live example](/api/introduction-dynamic-stories--button-colors/?story=Background)
 
-**Important**: The dynamic stories are created at run-time (when the site loads in the browser), while the pages static routes are assembled during the static site building process. This makes it so all the newly created dynamic stories will reside under the URL of the dynamic parent story, with a `story` parameter: 
+**Important**: dynamic stories are created at run-time (when the site loads in the browser), while in the case of [gatsby](/tutorial/getting-started/gatsby), the static page routes are created under a `nodejs` process. This makes it so all the newly created dynamic stories for `gatsby` will reside under the URL of the dynamic parent story, with a `story` parameter: 
 
 `https://xxx/api/components-button--button-colors/?story=Background`
 

integrations/gatsby-theme-stories/src/gatsby-node.ts

@@ -40,7 +40,7 @@ export const createPagesStatefully = async (
   };
   const onBundle: CompilerCallbackFn = ({ store: loadingStore }) => {
     if (loadingStore) {
-      const store: Store = loadStore(loadingStore);
+      const store: Store = loadStore(loadingStore, true);
       const createGatsbyPage: CreatePagesArgs['actions']['createPage'] = props => {
         gatsbyStore.getState().pages.forEach((page: Page) => {
           if (page.path === props.path && page.component === props.component) {

integrations/nextjs-plugin/src/store.ts

@@ -2,4 +2,4 @@ import { Store } from '@component-controls/core';
 import { loadStore } from '@component-controls/store';
 
 const bundle = require('./component-controls');
-export const store: Store = loadStore(bundle);
+export const store: Store = loadStore(bundle, true);