Docs: Filter mount stories from `Stories` block, error when referenced in MDX #28434

kasperpeulen · 2024-07-03T12:41:57Z

Closes #28420

What I did

Filter mount stories inside of Stories and give a proper error message when used in MDX

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Filtered mount stories within /code/lib/blocks/src/blocks/Stories.tsx
Added error handling for mount stories referenced in MDX in /code/core/src/preview-errors.ts
Updated Babel preset in /code/frameworks/nextjs/src/babel/preset.ts for specific browser targets and bugfixes
Added CommonJS export in /code/lib/cli/core/components/index.cjs
Deleted obsolete Storybook stories in /code/core/template/stories/

…e when used in MDX

greptile-apps

PR Summary

code/core/src/preview-api/modules/preview-web/Preview.tsx: Replaced mountDestructured with direct check for r.story.usesMount.
code/core/src/preview-api/modules/preview-web/render/StoryRender.ts: Simplified logic by directly checking story.usesMount.
code/core/src/preview-api/modules/store/csf/portable-stories.ts: Removed mountDestructured import, modified isMountDestructured logic.
code/core/src/preview-errors.ts: Added PlayFunctionWithMountNotAvailableError class under BLOCKS category.
code/lib/blocks/src/blocks/Stories.tsx: Filtered out stories using 'mount' in docs to prevent rendering issues.

_{9 file(s) reviewed, 1 comment(s)}
_{Edit PR Review Bot Settings}

code/core/src/preview-errors.ts

nx-cloud · 2024-07-03T12:46:41Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 6b92b98. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

nx run-many -t build --parallel=3

Sent with 💌 from NxCloud.

greptile-apps

PR Summary

(updates since last review)

code/core/src/preview-api/modules/store/csf/prepareStory.ts: Replaced generic error with NoRenderFunctionError for missing render function.
code/core/src/preview-errors.ts: Introduced NoRenderFunctionError for better error handling when no render function is available.

_{2 file(s) reviewed, 1 comment(s)}
_{Edit PR Review Bot Settings}

code/core/src/preview-errors.ts

greptile-apps

PR Summary

(updates since last review)

Removed PlayFunctionWithMountNotAvailableError class in code/core/src/preview-errors.ts
Updated error message in NoRenderFunctionError class in code/core/src/preview-errors.ts
Simplified error handling by consolidating rendering function errors
Corrected typo in NoRenderFunctionError class message

_{1 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

# Conflicts: # code/core/src/preview-api/modules/preview-web/render/StoryRender.ts # code/core/src/preview-errors.ts

greptile-apps

PR Summary

(updates since last review)

Modified PreviewWithSelection.tsx to streamline story rendering by passing renderToCanvas directly and adding showStoryDuringRender callback.
Updated StoryRender.test.ts with beforeEach hook, introduced mountSpy function, and enhanced error handling tests.
Enhanced StoryRender.ts with NoStoryMountedError, improved runPhase method, and refined mount function for better error scenarios.
Added NoStoryMountedError in preview-errors.ts for clearer error messages in MDX scenarios.

_{4 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

PR Summary

(updates since last review)

Added usesMount property to story objects in /code/core/src/preview-api/modules/store/StoryStore.test.ts
Ensured usesMount is set to false in various test scenarios in StoryStore.test.ts
Added usesMount field to prepared story object in /code/core/src/preview-api/modules/store/csf/prepareStory.test.ts
Verified usesMount is carried through from story annotations in prepareStory.test.ts

_{2 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

shilman

Minor change on PR cleanliness -- not sure whether to address this here or in #28431

shilman · 2024-07-03T15:25:33Z

code/lib/blocks/src/components/Story.tsx

+    return (
+      <ErrorMessage>
+        This story mounts inside of play. Set{' '}
+        <a href="https://storybook.js.org/docs/api/doc-blocks/doc-block-story#autoplay">autoplay</a>{' '}


Make sure to track the docs update as a followup issue

As an alternative, we might just not filter these stores in Stories and instead use this message? Would that solve the discoverability issue?

The user could just set tags: ['-autoplay'] on the story to avoid the error, no?

I could live with that, although the error is quite a bit ugly atm, cc @shilman

shilman · 2024-07-03T15:26:01Z

code/lib/blocks/src/blocks/Stories.tsx

-    stories = stories.filter((story) => story.tags?.includes('autodocs'));
+    // Don't show stories where mount is used in docs.
+    // As the play function is not running in docs, and when mount is used, the mounting is happening in play itself.
+    stories = stories.filter((story) => story.tags?.includes('autodocs') && !story.usesMount);


Probably also want to document this somewhere, either in this PR or in a tracked followup

tracked here: #28442

shilman · 2024-07-03T15:27:09Z

code/core/src/preview-api/modules/preview-web/render/StoryRender.ts

+          }
+
+          if (!mounted) {
+            throw new NoStoryMountedError();


Duplicate with #28431 .. were these PRs up split properly?

sorry changed the base branch now

greptile-apps

LGTM

_{No file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

# Conflicts: # code/core/src/preview-api/modules/preview-web/Preview.tsx

greptile-apps

LGTM

_{30 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

…iltering

greptile-apps

LGTM

_{9 file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

greptile-apps

LGTM

_{No file(s) reviewed, no comment(s)}
_{Edit PR Review Bot Settings}

Filter mount stories inside of Stories and give a proper error messag…

fe3a93f

…e when used in MDX

kasperpeulen added bug ci:normal labels Jul 3, 2024

greptile-apps bot reviewed Jul 3, 2024

View reviewed changes

code/core/src/preview-errors.ts Outdated Show resolved Hide resolved

Solve TODO

665dd0c

greptile-apps bot reviewed Jul 3, 2024

View reviewed changes

code/core/src/preview-errors.ts Outdated Show resolved Hide resolved

Address feedback

f94a994

kasperpeulen requested review from shilman and tmeasday July 3, 2024 13:57

greptile-apps bot reviewed Jul 3, 2024

View reviewed changes

kasperpeulen requested a review from yannbf July 3, 2024 14:00

kasperpeulen added 2 commits July 3, 2024 16:20

Merge branch 'refs/heads/kasper/phases' into kasper/docs-filtering

604c0fe

# Conflicts: # code/core/src/preview-api/modules/preview-web/render/StoryRender.ts # code/core/src/preview-errors.ts

Adjust tests

c6b3b09

greptile-apps bot reviewed Jul 3, 2024

View reviewed changes

Adjust tests

bdc6bec

greptile-apps bot reviewed Jul 3, 2024

View reviewed changes

kasperpeulen changed the base branch from next to kasper/phases July 3, 2024 15:15

kasperpeulen changed the base branch from kasper/phases to next July 3, 2024 15:16

shilman changed the title ~~Docs: Filter mount stories inside of Stories and give a proper error message when used in MDX~~ Docs: Filter mount stories in Stories, give error message when used in MDX Jul 3, 2024

shilman requested changes Jul 3, 2024

View reviewed changes

shilman changed the title ~~Docs: Filter mount stories in Stories, give error message when used in MDX~~ Docs: Handle mount stories - filter from Stories block, error when referenced in MDX Jul 3, 2024

shilman changed the title ~~Docs: Handle mount stories - filter from Stories block, error when referenced in MDX~~ Docs: Filter mount stories from Stories block, error when referenced in MDX Jul 3, 2024

Merge branch 'refs/heads/kasper/phases' into kasper/docs-filtering

81ccc90

kasperpeulen changed the base branch from next to kasper/phases July 3, 2024 16:46

greptile-apps bot reviewed Jul 3, 2024

View reviewed changes

Merge branch 'refs/heads/kasper/phases' into kasper/docs-filtering

af6e6f8

# Conflicts: # code/core/src/preview-api/modules/preview-web/Preview.tsx

greptile-apps bot reviewed Jul 3, 2024

View reviewed changes

shilman approved these changes Jul 3, 2024

View reviewed changes

Base automatically changed from kasper/phases to next July 3, 2024 18:58

Merge branch 'refs/heads/kasper/next-babel-preset' into kasper/docs-f…

00aec5e

…iltering

kasperpeulen changed the base branch from next to kasper/next-babel-preset July 3, 2024 20:03

Merge branch 'refs/heads/kasper/next-babel-preset' into kasper/docs-f…

6f15554

…iltering

greptile-apps bot reviewed Jul 3, 2024

View reviewed changes

Base automatically changed from kasper/next-babel-preset to next July 3, 2024 21:42

Merge branch 'next' into kasper/docs-filtering

6b92b98

kasperpeulen merged commit fc64e22 into next Jul 3, 2024
54 checks passed

kasperpeulen deleted the kasper/docs-filtering branch July 3, 2024 22:24

github-actions bot mentioned this pull request Jul 3, 2024

Release: Prerelease beta 8.2.0-beta.0 #28319

Merged

58 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Docs: Filter mount stories from `Stories` block, error when referenced in MDX #28434

Docs: Filter mount stories from `Stories` block, error when referenced in MDX #28434

kasperpeulen commented Jul 3, 2024 •

edited by greptile-apps bot

Loading

greptile-apps bot left a comment

nx-cloud bot commented Jul 3, 2024 •

edited

Loading

greptile-apps bot left a comment

greptile-apps bot left a comment

greptile-apps bot left a comment

greptile-apps bot left a comment

shilman left a comment

shilman Jul 3, 2024

kasperpeulen Jul 3, 2024

tmeasday Jul 4, 2024

kasperpeulen Jul 4, 2024

shilman Jul 3, 2024

kasperpeulen Jul 3, 2024

shilman Jul 3, 2024

kasperpeulen Jul 3, 2024

greptile-apps bot left a comment

greptile-apps bot left a comment

greptile-apps bot left a comment

greptile-apps bot left a comment

Docs: Filter mount stories from Stories block, error when referenced in MDX #28434

Docs: Filter mount stories from Stories block, error when referenced in MDX #28434

Conversation

kasperpeulen commented Jul 3, 2024 • edited by greptile-apps bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

nx-cloud bot commented Jul 3, 2024 • edited Loading

☁️ Nx Cloud Report

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

greptile-apps bot left a comment

Choose a reason for hiding this comment

PR Summary

shilman left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

greptile-apps bot left a comment

Choose a reason for hiding this comment

Docs: Filter mount stories from `Stories` block, error when referenced in MDX #28434

Docs: Filter mount stories from `Stories` block, error when referenced in MDX #28434

kasperpeulen commented Jul 3, 2024 •

edited by greptile-apps bot

Loading

nx-cloud bot commented Jul 3, 2024 •

edited

Loading