Skip to content

UI library: update storybook and all other dependencies as far as possible#19353

Merged
nolledgeable merged 9 commits intofeature/ui-library-3from
DUPP-733-update-storybook-and-all-other-dependencies-as-far-as-possible
Dec 12, 2022
Merged

UI library: update storybook and all other dependencies as far as possible#19353
nolledgeable merged 9 commits intofeature/ui-library-3from
DUPP-733-update-storybook-and-all-other-dependencies-as-far-as-possible

Conversation

@igorschoester
Copy link
Copy Markdown
Contributor

@igorschoester igorschoester commented Dec 7, 2022 •
edited
Loading

Context

  • An effort to keep our UI library dependencies up-to-date.

Summary

This PR can be summarized in the following changelog entry:

  • Upgrades Storybook from v6.4.19 to v6.5.14.
  • Upgrades HeadlessUI from 1.7.1 to 1.7.4. Influences our Free JS.
  • Upgrades TailwindCSS from 3.2.0 to 3.2.4. Influences our tailwind and postcss preset packages (and thus Free).
  • Upgrades general tooling dependencies: babel, postcss, puppeteer, classnames. Influences our postcss preset package (and thus Free) and Free JS.

Relevant technical choices:

  • Followed their migration guide. See commit messages for specifics.
  • One console error has popped up that seems irrelevant to us. It was fixed but in Storybook but then got reintroduced. They have a fix, not sure in which version that will land: Console error about server-side rendering on a Docs page storybookjs/storybook#18656
  • Regarding other dependencies, I updated them also in other packages to keep it consistent throughout. I think that is worth the testing scope increase, but you could disagree.
  • Things I skipped:
    • React, via WP Element. Due to it being tightly coupled to our whole JS builds.
    • Jest, due to our preset and pretty much same as above, but for tests.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

This is a tooling upgrade. So no functional changes are expected. It is expected that if it builds, it works. So see below as regression smoke tests.

  • Test that the storybook still works like before.
  • Test that Free builds and works like before: specifically the Settings UI, Integrations, Workouts and First time configuration need to be checked. Anything with our UI library and/or Tailwind.
  • Check the editors to be on the safe side.

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 (Block/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:

Impact check

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

  • Anything with our UI library, Tailwind or PostCSS via our JS or preset packages could be influenced.

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.

Quality assurance

  • I have tested this code to the best of my abilities
  • 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.

Innovation

  • No innovation project is applicable for this PR.
  • This PR falls under an innovation project. I have attached the innovation label and noted the work hours.

Fixes https://yoast.atlassian.net/browse/DUPP-733

@igorschoester
Upgrade storybook
be055bd 
From version 6.4.19 to 6.5.14
Migration guide: https://github.com/storybookjs/storybook/blob/v6.5.14/MIGRATION.md#from-version-64x-to-650
* Upgrade packages by running: npx storybook upgrade
* Fix markdown problems by:
   - removing storybook-addon-html in favor of mdx2-csf
   - overriding mdx2-csf dependency (mdx-js/react) by installing it directly at version 2.1.5
   - enabling the feature in the storybook config
   - changing code block shell to sh
@igorschoester
Disable storybook telemetry
2aa8217
@igorschoester
Fix deprecation fo showName
aef4a38
@igorschoester
Fix deprecation of hierarchy separators
3931755 
Migration docs: https://github.com/storybookjs/storybook/blob/v6.5.14/MIGRATION.md#removed-rendercurrentstory-event
* This is part of an older migration to not use dots or pipes in the story titles
* Fixed it by using ) instead
@igorschoester
Fix deprecation of defaultValue
2caec8d 
Migration docs: https://github.com/storybookjs/storybook/blob/v6.5.14/MIGRATION.md#no-longer-inferring-default-values-of-args
* Part of older migration version to not use defaultValue in argTypes directly
* Use table with summary as in between
@igorschoester igorschoester added the changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog label Dec 7, 2022
@igorschoester igorschoester added this to the ui-library milestone Dec 7, 2022
nolledgeable
nolledgeable approved these changes Dec 12, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@nolledgeable nolledgeable left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CR & ACC ✅

@nolledgeable nolledgeable merged commit 66d0f24 into feature/ui-library-3 Dec 12, 2022
@nolledgeable nolledgeable deleted the DUPP-733-update-storybook-and-all-other-dependencies-as-far-as-possible branch December 12, 2022 11:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@nolledgeable nolledgeable nolledgeable approved these changes

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog

Projects

None yet

Milestone

ui-library

Development

Successfully merging this pull request may close these issues.

2 participants

@igorschoester @nolledgeable
⚡