Dashboard-frontend: add Storybook

[igorschoester]

Context

Summary

This PR can be summarized in the following changelog entry:

• [@yoast/dashboard-frontend 0.1.0 enhancement] Sets up Storybook with stories for the Organic Sessions widget.
• [@yoast/dashboard-frontend 0.1.0 enhancement] Exposes internal fetchJson and useFetch tools for creating your own widgets.
• [@yoast/dashboard-frontend 0.1.0 enhancement] Adds override fetchJson option to the Remote Data Provider.

Relevant technical choices:

• Installed the Storybook from scratch to prevent incurring tech debt from older version. But still used some config from existing places. I tried to skip parts that are not needed, but something might've slipped through.
  • I had copied and then removed the
• Had a fight with WP/element and React. Ended up needing to specify the React version in the dev dependencies (as well as leaving it in the peer deps). Or React 19 would be installed and that would not work with the createInterpolateElement from WP/element.
• Decided to expose the fetchJson in the RemoteDataProvider for an easy override, but ended up not using it and just creating objects instead 😅 -- as that is easier to repeat in each story.
• I had and removed the override the DocsPage template override. We might need it in the future to remove the __forceInitialArgs we have in an older version (UI library). But not needed now.
• Changed imports in the tests to point to the package src, my IDE likes it as short as possible I suppose
• I tried making the stories more interactive, which was a hassle due to the data being whatever the remote returns and thus are not the props directly. I managed to do it (using decorator with useArgs), but talking with Vraja we decided to let it go. Instead making a specific story if we want to showcase a specific set.
• Screen reader bugfix landed in Fix eccessive width for the Organic session widget #22234

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

• Fire up the storybook and take a look! (but do the normal yarn install first)

yarn workspace @yoast/dashboard-frontend storybook

• Worth noting that there is a Tooltip story that does not appear on the docs page. If you go to the individual page, you can check the interactions 😄 -- it should open the tooltip (not totally happy with having to test for the class, but 🤷 )

Quick regression/smoke test

• Build the whole plugin
• Have the feature flag enable and Site Kit set up
• Go to the dashboard
• Verify the widgets are still like before

Relevant test scenarios

• Changes should be tested with the browser console open
• Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
• Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
• Changes should be tested on different browsers
• Changes should be tested on multisite

Test instructions for QA when the code is in the RC

• QA should use the same steps as above.

QA can test this PR by following these steps:

• Not really testable as this is tooling (until we decide to publish the storybook like we do with the UI library?)

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

UI changes

• This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

• This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

• I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

• I have tested this code to the best of my abilities.
• During testing, I had activated all plugins that Yoast SEO provides integrations for.
• I have added unit tests to verify the code works as intended.
• If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
• I have written this PR in accordance with my team's definition of done.
• I have checked that the base branch is correctly set.

Innovation

• No innovation project is applicable for this PR.
• This PR falls under an innovation project. I have attached the innovation label.
• I have added my hours to the WBSO document.

Fixes https://github.com/Yoast/reserved-tasks/issues/503

[coveralls]

Pull Request Test Coverage Report for Build 281d7bdd8288875811777be8c9b74704a063664d

Details

• 0 of 0 changed or added relevant lines in 0 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 57.727%

---

Totals
Change from base Build c1d0c0a2c66bb2375d09561dcf6365fdada240e4:	0.0%
Covered Lines:	13548
Relevant Lines:	23151

---

💛 - Coveralls

[github-actions]

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

[vraja-pro]

It seems to stem from version mismatches of @storybook/manager and @storybook/theming across different packages in the monorepo:

@storybook/manager-api is used with version ^7.6.17 in ui-library and keyphrase-suggestions.
@storybook/theming is used with versions ^8.6.12 and ^8.3.6.
The dashboard-frontend package uses @storybook/theming version ^8.6.12, which might not be compatible with the current code.
if you rollback the versions:

yarn add @storybook/manager-pi@^7.6.17 @storybook/theming@^7.6.17 --dev

Eslint will not show an error and you can remove that ignore rule.

Or you can update all the storybook packages in the monorepo to 8.6.12 (it's not enough to update only @storybook/theming.

[igorschoester]

Interesting. They are not hoisted though, due to the different versions. So if ESLint would pick up the nearest node_modules correctly, this would not be a problem?

Either way, I prefer to ignore the false ESLint rule instead of letting that dictate our Storybook version here or elsewhere.
It is not a matter of these two packages, they go with the rest. So that is a full upgrade or downgrade of Storybook. Quite the task for a ESLint false positive.

[github-actions]

A merge conflict has been detected for the proposed code changes in this PR. Please resolve the conflict by either rebasing the PR or merging in changes from the base branch.

[igorschoester]

Caution

Rebased on the latest trunk (and removed the outdated trunk merge)

[vraja-pro]

CR & AC ✅