Adds performance panel to storybook #7345
Conversation
|
mattcosta7
changed the title
|
👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Or, apply the |
github-actions
bot
added
the
integration-tests: recommended
There was a problem hiding this comment.
Pull request overview
This PR adds a performance monitoring panel to Storybook for tracking component metrics during development. The change is development-only and doesn't affect the production build of the component library.
Key Changes:
- Adds
@github-ui/storybook-addon-performance-panelpackage (v0.1.1) as a dev dependency - Integrates the addon into the Storybook configuration
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
packages/react/.storybook/main.ts |
Adds the performance panel addon to the Storybook addons array |
package.json |
Adds the addon package as a dev dependency in alphabetically sorted order |
package-lock.json |
Updates lock file with the new dependency and its peer dependencies; includes version bumps to @primer/react from 38.5.0 to 38.6.1 in example applications |
| getAbsolutePath('@storybook/addon-a11y'), | ||
| getAbsolutePath('@storybook/addon-links'), | ||
| getAbsolutePath('@storybook/addon-docs'), | ||
| '@github-ui/storybook-addon-performance-panel', |
There was a problem hiding this comment.
The addon is not using the getAbsolutePath() helper function like the other Storybook addons on lines 20-22. This is inconsistent with the established pattern in this configuration file. Consider wrapping it with getAbsolutePath() for consistency.
There was a problem hiding this comment.
getAbolute seems to fail fo rhtis - not sure why - are they needed?
There was a problem hiding this comment.
I guess the reason is that storybook looks for manager.js or preview.js or preset.js at the package root (https://github.com/storybookjs/storybook/blob/main/code/core/src/common/presets.ts#L81)
If the storybook-addon-performance-panel re-exports one of them at the package root, getAbsolutePath() would work. But I think using just '@github-ui/storybook-addon-performance-panel' should be fine.
package.json
Outdated
| "@github/markdownlint-github": "^0.8.0", | ||
| "@github/mini-throttle": "2.1.1", | ||
| "@github/prettier-config": "0.0.6", | ||
| "@github-ui/storybook-addon-performance-panel": "0.1.1", |
There was a problem hiding this comment.
There is a peer dependency version mismatch. The addon requires @storybook/icons version exactly 1.4.0 (as seen in package-lock.json line 4712), but the project currently has version 2.0.1 installed (package-lock.json line 8213-8214). This version mismatch may cause runtime errors or compatibility issues. You should either:
- Update the addon to a version that supports
@storybook/icons2.x, or - Downgrade
@storybook/iconsto 1.4.0 (though this may affect other dependencies)
Please verify that the addon works correctly with the installed version of @storybook/icons.
| "@github-ui/storybook-addon-performance-panel": "0.1.1", | |
| "@github-ui/storybook-addon-performance-panel": "^0.2.0", |
There was a problem hiding this comment.
@mattcosta7 would it be possible to make the @storybook/icons version flexible in the addon?
There was a problem hiding this comment.
yep, yep shouldn't be a problem, i'll try to push a new version
|
👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/9382 |
Closes https://github.com/github/primer/issues/6267
Adds a neat performance panel for catching metrics in storybook while developing
Screen.Recording.2025-12-15.at.7.46.56.PM.mov
Changelog
storybook only
New
Changed
Removed
Rollout strategy
Storybook only
Testing & Reviewing
Merge checklist