NXT-4206: Updated storybook to version 10

[daniel-stoian-lgp]

Checklist

• I have read and understand the contribution guide
• A CHANGELOG entry is included
• At least one test case is included for this feature or bug fix
• Documentation was added or is not needed
• This is an API breaking change

Issue Resolved / Feature Added

Latest storybook is 10.x

Resolution

Updated storybook to version 10
Update configuration to work with ESM
Changed custom addon configuration to work in ESM
In the release notes for storybook 10 it denotes as the only breaking change that Storybook is now ESM only:
https://github.com/storybookjs/storybook/releases/tag/v10.0.0

Additional Considerations

Migration guide made by storybook team: https://storybook.js.org/docs/releases/migration-guide

fileURLToPath has been imported from url and dirname has been imported from path. This imports will be used to create similar files in ESM as we had in commonJS thus minimizing the changes made to this repo. fileURLToPath will be used to create the __filename we use as a parameter for dirname (const __filename = fileURLToPath(import.meta.url)).
We use dirname to create the variable __dirname which used to be a global variable and pass it to the webpack function as a parameter (const __dirname = dirname(__filename)).
This is the node documentation for this functions:
https://nodejs.org/api/url.html#urlfileurltopathurl-options
https://nodejs.org/api/path.html#pathdirnamepath

When it comes to our custom addons, it is recommended to switch from exportEntries to managerEntries (https://storybook.js.org/docs/addons/addon-migration-guide). For this reason we added a new property in our export object called managerEntries such: managerEntries: [resolve(__dirname, '../custom-addon/manager.js')].

We also needed to change syntax from JSX to React.createComponent because, since the change to ESM, storybook does not permit use of JSX in addons. This components are used in the same way as before, just the return statement was changed from return () => <Component {...props} /> to return React.createElement(Component, {...props}).

Links

NXT-4206

Comments

Enact-DCO-1.0-Signed-off-by: Daniel Stoian (daniel.stoian@lgepartner.com)

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.06%. Comparing base (4c8861f) to head (895714d).
⚠️ Report is 1 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop     #850   +/-   ##
========================================
  Coverage    85.06%   85.06%           
========================================
  Files          118      118           
  Lines         4493     4493           
  Branches      1226     1226           
========================================
  Hits          3822     3822           
  Misses         518      518           
  Partials       153      153           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[hong6316]

Please list the breaking changes between Storybook v9 -> v10 in Resolution.