Upgrade Storybook from 8.6.14 to 10.0.8

[e-gineer]

Summary

• Upgraded Storybook from 8.6.14 → 9.1.16 → 10.0.8
• Fixed framer-motion 12 compatibility issues
• Replaced incompatible third-party addons with Storybook 9/10 alternatives
• Fixed story rendering by adding dashboardsMetadata to storybook context
• Added .claude/wip/ to .gitignore to prevent planning files from being tracked

Changes

Storybook 8.6.14 → 9.1.16

• Updated all @storybook/* packages to 9.1.16
• Replaced storybook-dark-mode addon (incompatible) with @storybook/addon-themes
• Replaced storybook-addon-react-router-v6 with storybook-addon-remix-react-router@5.0.0
• Updated story imports from @storybook/react to @storybook/react-webpack5
• Added missing peer dependencies

Storybook 9.1.16 → 10.0.8

• Updated all @storybook/* packages to 10.0.8
• All stories render correctly (text, charts, tables, icons)
• Theme toggle (light/dark) working
• React Router addon functioning
• Visual tests addon accessible

Bug Fixes

• Fixed DashboardSearchPathProvider error by adding dashboardsMetadata to storybook context in src/utils/storybook.tsx
• This fixes the TypeError: Cannot read properties of undefined that was preventing stories from rendering

Repository Cleanup

• Added .claude/wip/ to .gitignore to exclude planning files from version control

Testing

• ✅ All stories render without errors
• ✅ Theme toggle works correctly
• ✅ React Router addon functional
• ✅ Visual tests addon accessible
• ✅ No console errors

Notes

• Peer dependency warning for storybook-addon-remix-react-router@5.0.0 expecting Storybook ^9.0.0 is cosmetic - addon works perfectly with 10.0.8
• Official Storybook 10 support for the addon is tracked in Issue #94

🤖 Generated with Claude Code

Co-Authored-By: Claude noreply@anthropic.com

[MichaelBurgess]

@e-gineer I see this output when starting Storybook. Other than that, LGTM.

mike @ ~/Code/github.com/turbot/powerpipe/ui/dashboard (feat/storybook-10-clean) > yarn storybook
storybook v10.0.8

You are currently using Storybook 10.0.8 but you have packages which are incompatible with it:

- storybook-addon-remix-react-router@5.0.0 which depends on ^9.0.0
 Repo: https://github.com/JesusTheHun/storybook-addon-remix-react-router#readme

Please consider updating your packages or contacting the maintainers for compatibility details.

For more on Storybook 9 compatibility, see the linked GitHub issue:
https://github.com/storybookjs/storybook/issues/30944
Attention: We've detected that you're using actions.argTypesRegex together with the visual test addon:

/Users/mike/Code/github.com/turbot/powerpipe/ui/dashboard/.storybook/preview.jsx
  77 |
  78 | export const parameters = {
> 79 |   actions: { argTypesRegex: "^on[A-Z].*" },
     |              ^^^^^^^^^^^^^
  80 |   darkMode: {
  81 |     // Override the default dark theme
  82 |     dark: {

We recommend removing the argTypesRegex and assigning explicit action with the fn function from storybook/test instead:
https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function

The build used by the addon for snapshot testing doesn't take the regex into account, which can cause hard to debug problems when a snapshot depends on the presence of action props.

[e-gineer]

Fixed the argTypesRegex deprecation warning by removing it from .storybook/preview.jsx.

Since none of our stories currently use action props (onClick, onChange, etc.), we can safely remove this configuration. Storybook now starts with only the expected peer dependency warning for storybook-addon-remix-react-router (which works perfectly despite the warning).

Verified that Storybook builds successfully with "No issues found" ✅

[e-gineer]

@MichaelBurgess After the fix, you should now see:

✅ argTypesRegex warning - Removed (fixed)
⚠️ Peer dependency warning - Expected and documented in PR description

The addon works perfectly with Storybook 10 despite the peer dependency warning. Build completes with "No issues found".