feat(addon-docs): add Reset story button to re-render stories in docs

Author: 6810779s

code/addons/docs/src/blocks/blocks/Canvas.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/destructuring-assignment */
-import React, { useContext } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import type { FC } from 'react';
 
+import { RESET_STORY_ARGS } from 'storybook/internal/core-events';
 import type { ModuleExport, ModuleExports } from 'storybook/internal/types';
 
 import type { Layout, PreviewProps as PurePreviewProps } from '../components';
@@ -81,6 +82,12 @@ export const Canvas: FC<CanvasProps> = (props) => {
   // By default, stories will be iframed, but most frameworks support inline rendering and override that in a docs entry file
   const inline = props.story?.inline ?? story.parameters?.docs?.story?.inline ?? false;
 
+  const [resetKey, setResetKey] = useState(0);
+  const handleResetStory = useCallback(() => {
+    docsContext.channel.emit(RESET_STORY_ARGS, { storyId: story.id });
+    setResetKey((prev) => prev + 1);
+  }, [docsContext.channel, story.id]);
+
   return (
     <PurePreview
       withSource={sourceState === 'none' ? undefined : sourceProps}
@@ -90,8 +97,9 @@ export const Canvas: FC<CanvasProps> = (props) => {
       className={className}
       layout={layout}
       inline={inline}
+      onResetStory={inline ? handleResetStory : undefined}
     >
-      <Story of={of || story.moduleExport} meta={props.meta} {...props.story} />
+      <Story of={of || story.moduleExport} meta={props.meta} {...props.story} resetKey={resetKey} />
     </PurePreview>
   );
 };

code/addons/docs/src/blocks/blocks/Story.tsx

@@ -54,6 +54,8 @@ type StoryParameters = {
   __forceInitialArgs?: boolean;
   /** Internal prop if this story is the primary story */
   __primary?: boolean;
+  /** Key to trigger story remount when changed */
+  resetKey?: number;
 };
 
 export type StoryProps = StoryRefProps & StoryParameters;
@@ -100,6 +102,7 @@ export const getStoryProps = <TFramework extends Renderer>(
       forceInitialArgs: !!props.__forceInitialArgs,
       primary: !!props.__primary,
       renderStoryToElement: context.renderStoryToElement as any,
+      resetKey: props.resetKey,
     };
   }
 

code/addons/docs/src/blocks/components/Preview.tsx

@@ -5,7 +5,7 @@ import { logger } from 'storybook/internal/client-logger';
 import { Bar, Button, ToggleButton, Zoom } from 'storybook/internal/components';
 import type { ActionItem } from 'storybook/internal/components';
 
-import { CopyIcon, MarkupIcon } from '@storybook/icons';
+import { CopyIcon, MarkupIcon, UndoIcon } from '@storybook/icons';
 
 import { useId } from '@react-aria/utils';
 import { darken } from 'polished';
@@ -31,6 +31,7 @@ export type PreviewProps = PropsWithChildren<{
   withToolbar?: boolean;
   className?: string;
   additionalActions?: ActionItem[];
+  onResetStory?: () => void;
 }>;
 
 export type Layout = 'padded' | 'fullscreen' | 'centered';
@@ -150,6 +151,7 @@ export const Preview: FC<PreviewProps> = ({
   className,
   layout = 'padded',
   inline = false,
+  onResetStory,
   ...props
 }) => {
   const [expanded, setExpanded] = useState(isExpanded);
@@ -225,7 +227,7 @@ export const Preview: FC<PreviewProps> = ({
           </div>
         )}
       </PreviewContainer>
-      {(withSource || additionalActionItems.length > 0) && (
+      {(withSource || onResetStory || additionalActionItems.length > 0) && (
         <ActionBar className="sbdocs sbdocs-preview-actions" innerStyle={{ paddingInline: 0 }}>
           {hasSourceError && (
             <Button
@@ -255,6 +257,16 @@ export const Preview: FC<PreviewProps> = ({
               </Button>
             </>
           )}
+          {onResetStory && (
+            <Button
+              ariaLabel={false}
+              variant="ghost"
+              onClick={onResetStory}
+              className="docblock-reset-story"
+            >
+              <UndoIcon /> Reset story
+            </Button>
+          )}
           {additionalActionItems.map(({ title, className, onClick, disabled }, index: number) => (
             <Button
               key={index}

code/addons/docs/src/blocks/components/Story.tsx

@@ -15,6 +15,7 @@ interface CommonProps {
   story: PreparedStory;
   inline: boolean;
   primary: boolean;
+  resetKey?: number;
 }
 
 interface InlineStoryProps extends CommonProps {
@@ -40,7 +41,7 @@ const InlineStory: FunctionComponent<InlineStoryProps> = (props) => {
   const [showLoader, setShowLoader] = useState(true);
   const [error, setError] = useState<Error>();
 
-  const { story, height, autoplay, forceInitialArgs, renderStoryToElement } = props;
+  const { story, height, autoplay, forceInitialArgs, renderStoryToElement, resetKey } = props;
 
   useEffect(() => {
     if (!(story && storyRef.current)) {
@@ -64,7 +65,7 @@ const InlineStory: FunctionComponent<InlineStoryProps> = (props) => {
       //   https://github.com/facebook/react/issues/25675#issuecomment-1363957941
       Promise.resolve().then(() => cleanup());
     };
-  }, [autoplay, renderStoryToElement, story]);
+  }, [autoplay, renderStoryToElement, story, resetKey]);
 
   if (error) {
     return (