fix: storybook theme package not working

[garrettbear]

Description

This PR removes the storybook-dark-mode package and utilizes the native Storybook Theme API for managing the light and dark modes across both the documentation and component preview pages.

The motivation behind this change is to fix the bug introduced after upgrading Storybook to ^7.6.20 and storybook-dark-mode to ^4.0.2, which resulted in the following error:

Error: Storybook preview hooks can only be called inside decorators and story functions.

Additionally, we have updated the DocsContainer to ensure it handles the theme correctly without throwing errors. The bug prevented Storybook Docs pages from rendering properly.

Key changes:

1. Removed the storybook-dark-mode package.
2. Implemented the native Storybook Theme API to manage light/dark modes.
3. Added a button to toggle between light, dark and side by side modes in the component preview area.
4. Ensured the theme context is properly checked and applied, particularly in the Docs rendering.

Additional Context:

• We will be implementing the shared UI Component library soon and we can revisit whether having the additional add-on (storybook-dark-mode) is valuable enough to add an additional dependency. We can add it to our roadmap for discussion when we are working on the storybook portion of our roadmap.

Possible Asked Questions

• Did you consider that the app theme is not changing?
  Yes. It is set to the users system, so if the user uses dark mode then the application will run in dark. Made attempts for a fix
• Did you consider a fix with the existing package?
  Yes. The best solution was to revert to the old package version, but that stops us from progressing forward. It's nice to remove dependencies and use built-in options.

Related issues

Fixes:

• chore: Bump storybook, @storybook/* to ^7.6.20, storybook-dark-mode from ^3.0.3 to ^4.0.2 #26703 (Introduced the error after upgrading to Storybook 7.6.20)

Manual testing steps

1. Run yarn storybook.
2. Visit the component docs page running locally.
3. Verify that no errors related to theme switching appear in the console.
4. Ensure the docs page renders properly in both light and dark themes.
5. Test theme switching using the button added in the component preview.

Screenshots/Recordings

Before

Screen.Recording.2024-09-11.at.6.37.07.PM.mov

After

This now allows us to have more than one theme for our components and we can also view both modes at the same time!

Screen.Recording.2024-09-11.at.6.39.07.PM.mov

Here is where I know some people might be upset, but currently the entire application theme is set to users system and no longer tied to the theme switch

Screen.Recording.2024-09-11.at.6.39.07.PM.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability.
• I’ve included tests if applicable.
• I’ve documented my code using JSDoc format if applicable.
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pulled and built the branch, run the app, tested code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and/or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[socket-security]

Removed dependencies detected. Learn more about Socket for GitHub ↗︎

🚮 Removed packages: npm/@storybook/[email protected], npm/[email protected]

View full report↗︎

[metamaskbot]

Builds ready [6824447]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1883 ± 109 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	229	2387	1632	619	297
		domContentLoaded	1529	2369	1864	225	108
		load	1537	2378	1883	227	109
		domInteractive	16	75	38	16	7

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[metamaskbot]

Builds ready [c2f54b5]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1594 ± 37 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	212	2020	1469	429	206
		domContentLoaded	1498	1847	1581	72	35
		load	1506	1882	1594	78	37
		domInteractive	18	42	28	7	3

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 70.04%. Comparing base (b01f0c9) to head (c2f54b5).

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #27086   +/-   ##
========================================
  Coverage    70.04%   70.04%           
========================================
  Files         1435     1435           
  Lines        49920    49920           
  Branches     13980    13980           
========================================
  Hits         34963    34963           
  Misses       14957    14957           

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

[georgewrmarshall]

Really nice work 💯 LGTM!

• Checked storybook docs MDX only pages in light dark theme ✅
• Checked storybook stories in light,dark,light/dark ✅
• Checked console for no errors ✅

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[metamaskbot]

Builds ready [28dbecd]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5
  • common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
  • content-script: 0
  • offscreen: 0
  • ui: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1637 ± 82 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	221	2275	1446	528	253
		domContentLoaded	1433	2103	1619	157	75
		load	1442	2207	1637	172	82
		domInteractive	14	65	35	17	8

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 0 Bytes (0.00%)
• common: 0 Bytes (0.00%)