Merge branch 'next' into fix/14619-react-router-upgrade

storybookjs · Oct 25, 2021 · c325477 · c325477
2 parents 680e717 + 4932321
commit c325477
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 13 deletions.
diff --git a/addons/interactions/src/Panel.tsx b/addons/interactions/src/Panel.tsx
@@ -53,7 +53,8 @@ export const Panel: React.FC<PanelProps> = (props) => {
   });
 
   const { storyId } = useStorybookState();
-  const [fileName] = useParameter('fileName', '').split('/').slice(-1);
+  const storyFilePath = useParameter('fileName', '');
+  const [fileName] = storyFilePath.toString().split('/').slice(-1);
   const scrollToTarget = () => scrollTarget?.scrollIntoView({ behavior: 'smooth', block: 'end' });
 
   const isDebugging = log.some((item) => pendingStates.includes(item.state));

diff --git a/docs/configure/typescript.md b/docs/configure/typescript.md
@@ -2,7 +2,7 @@
 title: 'TypeScript'
 ---
 
-Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed.
+Storybook has built-in Typescript support, so your Typescript project should work with zero configuration needed [unless you use the `paths` option in your TSConfig.](./webpack#typescript-module-resolution)
 
 ### Default configuration
 
@@ -30,14 +30,12 @@ The following code snippets shows the fields for you to use with TypeScript:
 
 <!-- prettier-ignore-end -->
 
-| Field                            | Framework | Description                                                                                 | Type                                                                                                   |
-| :------------------------------- | :-------- | :------------------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------- |
-| **check**                        | All       | Optionally run fork-ts-checker-webpack-plugin                                               | boolean                                                                                                |
+| Field                            | Framework | Description                                                                                 | Type                                                                                                              |
+| :------------------------------- | :-------- | :------------------------------------------------------------------------------------------ | :---------------------------------------------------------------------------------------------------------------- |
+| **check**                        | All       | Optionally run fork-ts-checker-webpack-plugin                                               | boolean                                                                                                           |
 | **checkOptions**                 | All       | Options to pass to fork-ts-checker-webpack-plugin if it's enabled                           | <a href="https://github.com/TypeStrong/fork-ts-checker-webpack-plugin/blob/v4.1.6/README.md#options">See Docs</a> |
-| **reactDocgen**                  | React     | Which react docgen processor to run: `"react-docgen-typescript"`, `"react-docgen"`, `false` | string or false                                                                                        |
-| **reactDocgenTypescriptOptions** | React     | Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled.    | [See docs](https://github.com/hipstersmoothie/react-docgen-typescript-plugin)                          |
-
-
+| **reactDocgen**                  | React     | Which react docgen processor to run: `"react-docgen-typescript"`, `"react-docgen"`, `false` | string or false                                                                                                   |
+| **reactDocgenTypescriptOptions** | React     | Options to pass to react-docgen-typescript-plugin if react-docgen-typescript is enabled.    | [See docs](https://github.com/hipstersmoothie/react-docgen-typescript-plugin)                                     |
 
 ### Overriding the configuration to infer additional props
 
@@ -61,4 +59,4 @@ Next time you restart your Storybook the extra props will also be in the UI.
 
 <div class="aside">
 If you run into an issue where the extra props aren't included, check how your component is being exported. If it's using a default export, change it to a named export and the extra props will be included as well.
-</div>
+</div>
diff --git a/lib/instrumenter/src/instrumenter.test.ts b/lib/instrumenter/src/instrumenter.test.ts
@@ -317,6 +317,7 @@ describe('Instrumenter', () => {
   });
 
   it('clears state when switching stories', () => {
+    addons.getChannel().emit(SET_CURRENT_STORY); // initialization
     instrumenter.state = {
       'kind--story': {
         isDebugging: false,

diff --git a/lib/instrumenter/src/instrumenter.ts b/lib/instrumenter/src/instrumenter.ts
@@ -102,6 +102,8 @@ const getRetainedState = (state: State, isDebugging = false) => {
 export class Instrumenter {
   channel: Channel;
 
+  initialized = false;
+
   // State is tracked per story to deal with multiple stories on the same canvas (i.e. docs mode)
   state: Record<StoryId, State>;
 
@@ -144,8 +146,11 @@ export class Instrumenter {
       }
     });
 
-    // Trash non-retained state and clear the log when switching stories.
-    this.channel.on(SET_CURRENT_STORY, this.cleanup.bind(this));
+    // Trash non-retained state and clear the log when switching stories, but not on initial boot.
+    this.channel.on(SET_CURRENT_STORY, () => {
+      if (this.initialized) this.cleanup();
+      else this.initialized = true;
+    });
 
     const start = ({ storyId, playUntil }: { storyId: string; playUntil?: Call['id'] }) => {
       if (!this.getState(storyId).isDebugging) {

diff --git a/lib/preview-web/src/PreviewWeb.tsx b/lib/preview-web/src/PreviewWeb.tsx
@@ -393,7 +393,7 @@ export class PreviewWeb<TFramework extends AnyFramework> {
       const fullDocsContext = {
         ...docsContext,
         // Put all the storyContext fields onto the docs context for back-compat
-        ...(!FEATURES.breakingChangesV7 && this.storyStore.getStoryContext(story)),
+        ...(!FEATURES?.breakingChangesV7 && this.storyStore.getStoryContext(story)),
       };
 
       (await import('./renderDocs')).renderDocs(story, fullDocsContext, element, () =>