WRQ-22937: Updated storybook to version 8

[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

Storybook needed to be updated to the latest version

Resolution

Updated list of storybook dependencies and their version to v8.x based on the migration guide https://github.com/storybookjs/storybook/blob/next/MIGRATION.md
Changed configuration based on the storybook v7 and v8 requirements

main.js:

• core.builder information replaced by framework.name.
• Addon '@enact/storybook-utils/addons/docs' replaced by '@storybook/addon-docs' because storybook addon for docs does not support customization anymore https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-addon-docs-manual-configuration
• story filenames different than xxx.stories.js need an indexer https://github.com/storybookjs/storybook/pull/20700/files#diff-ea5ebe92abd71b6467c58252b92c04b8d49cc140e8a94f9cf5bb7a76bf2256a4 experimental_indexers information was added in main.js

preview.js:

• docs.inlineStories has been renamed docs.story.inline; docs.iframeHeight has been renamed docs.story.iframeHeight
• accent, highlight and default skin styles need to be declared as globalTypes in order to be updated from the to0lbar

custom-addon/Toolbar.js:
TooltipLinkList left property was renamed to icon, (https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removals-in-storybookcomponents) but the new property generates a narrow span. I had to move the content inside custom-addon/ColorPicker component
WithTooltip component has renamed properties (https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#props-from-withtooltipcomponent-from-storybookcomponents)

custom-addon/ToolbarTab.js - Icon component is deprecated and we do not need a replacement

package.json storybook dev and build commands adapted to v8 naming.

new root container id used by storybook is called "storybook-root". This change breaks enact's logic to apply spotlight related styling in SpotlightRootDecorator https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#change-of-root-html-ids ThemeDecorator already has a rootId prop and can be set from the sampler app to storybook-root, but it was not passed to SpotlightRootDecorator. A PR in enact repo is needed also and is attached to the user story

• manager.js: The state and API for the UI layout has changed https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#ui-layout-state-has-changed-shape

Additional Considerations

Note: although docs is disabled, I left the docs configuration intact in preview.js. It does not affect current configuration and will be needed when we activate docs

Links

WRQ-22937

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.13%. Comparing base (489cadf) to head (8e8e219).

Additional details and impacted files

@@                Coverage Diff                @@
##           feature/enact_v5     #791   +/-   ##
=================================================
  Coverage             85.13%   85.13%           
=================================================
  Files                   120      120           
  Lines                  4507     4507           
  Branches               1237     1237           
=================================================
  Hits                   3837     3837           
  Misses                  523      523           
  Partials                147      147           

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

[adrian-cocoara-lgp]

LGTM
We have the same issue I mentioned on enactjs/sandstone#1588 about native HTML scrollbar on globals list.

[MikyungKim]

Could you please rebase your branch with the latest feature/enact_v5?

[MikyungKim]

LGTM