Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support Storybook 7.0.0 #48

Merged
merged 6 commits into from
Apr 1, 2023
Merged

Support Storybook 7.0.0 #48

merged 6 commits into from
Apr 1, 2023

Conversation

literalpie
Copy link
Collaborator

@literalpie literalpie commented Mar 11, 2023

Fixes #47

I figured it was worth a shot to see if this can be done easily, and I think I did it. I've just tested it using the examples in this repo.

Hopefully this will make it easier for some slow-moving orgs to move to SB7.

I also updated most of the dependencies

@@ -1,8 +1,9 @@
/* eslint no-underscore-dangle: 0 */

import { navigator } from 'global';
// navigator exists in Jest but not the browser. global exists in the browser but not Jest
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This really confused me. If anyone knows the reason for this, please enlighten me!

@socket-security
Copy link

socket-security bot commented Mar 11, 2023

New dependency changes detected. Learn more about Socket for GitHub ↗︎


🚨 Potential security issues found in this pull request. To accept the risk, merge this PR and you will not be notified again.

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore [email protected] bar@* or ignore all packages with @SocketSecurity ignore-all

📜 Install scripts

Install scripts are run when the package is installed. The majority of malware in npm is hidden in install scripts.

Packages should not be running non-essential scripts during install and there are often solutions to problems people solve with install scripts that can be run at publish time instead.

Package Script field Source
[email protected] (upgraded) postinstall package.json
😵‍💫 Bin script confusion

This package has multiple bin scripts with the same name. This can cause non-deterministic behavior when installing or could be a sign of a supply chain attack

Consider removing one of the conflicting packages. Packages should only export bin scripts with their name

Package Bin script Source
[email protected] (upgraded) jest package.json
[email protected] (upgraded) jest package.json via [email protected]
⚠️ Shell access

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Packages should avoid accessing the shell which can reduce portability, and make it easier for malicious shell access to be introduced.

Package Module Location Source
@auto-it/[email protected] (upgraded) child_process dist/tests/auto-make-changelog.test.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/tests/auto.test.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/tests/get-current-branch.test.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/tests/get-remote.test.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/tests/release.test.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/auto.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/release.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/utils/tests/load-plugin.test.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/utils/tests/verify-auth.test.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/utils/exec-promise.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/utils/get-current-branch.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/utils/load-plugins.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/utils/verify-auth.js package.json via [email protected]
@auto-it/[email protected] (upgraded) child_process dist/index.js package.json via [email protected]
[email protected] (upgraded) child_process lib/index.js package.json via [email protected]
[email protected] (upgraded) child_process index.js package.json via @storybook/[email protected]
[email protected] (added) child_process index.js package.json via @storybook/[email protected], [email protected], [email protected], [email protected]
[email protected] (added) child_process index.js package.json via [email protected]
[email protected] (added) child_process index.js package.json via [email protected], [email protected]
[email protected] (added) child_process dist/gitlog.cjs.development.js package.json via [email protected]
[email protected] (added) child_process dist/gitlog.cjs.production.min.js package.json via [email protected]
[email protected] (added) child_process dist/gitlog.esm.js package.json via [email protected]
[email protected] (upgraded) child_process build/crawlers/node.js package.json via [email protected]
[email protected] (upgraded) child_process build/lib/isWatchmanInstalled.js package.json via [email protected]
[email protected] (upgraded) child_process build/workers/ChildProcessWorker.js package.json via [email protected]
[email protected] (upgraded) child_process lib/jsdom/living/xhr/XMLHttpRequest-impl.js package.json via [email protected]
[email protected] (added) child_process lib/resolvers.js package.json via [email protected]
[email protected] (added) child_process index.js package.json via [email protected]
[email protected] (added) child_process dist/child/spawn-child.js package.json via [email protected], [email protected]
[email protected] (upgraded) child_process lib/tsserver.js package.json via @storybook/[email protected], [email protected], [email protected]
[email protected] (upgraded) child_process lib/tsserver.js package.json via @storybook/[email protected], [email protected], [email protected]
[email protected] (upgraded) child_process lib/typingsInstaller.js package.json via @storybook/[email protected], [email protected], [email protected]
[email protected] (added) child_process check-npm-version.js package.json via @babel/[email protected], @babel/[email protected], @babel/[email protected], @babel/[email protected], @babel/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected], [email protected]
[email protected] (added) child_process index.js package.json via @babel/[email protected], @babel/[email protected], @babel/[email protected], @babel/[email protected], @babel/[email protected], @storybook/[email protected], @storybook/[email protected], [email protected], [email protected]
[email protected] (upgraded) child_process bin/webpack.js package.json via @storybook/[email protected]
⚠️ Uses eval

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Avoid packages that use eval, since this could potentially execute any code.

Package Eval Type Location Source
@sinclair/[email protected] (added) Function compiler/compiler.js package.json via [email protected], [email protected]
@sinclair/[email protected] (added) Function errors/errors.js package.json via [email protected], [email protected]
@sinclair/[email protected] (added) Function value/cast.js package.json via [email protected], [email protected]
@sinclair/[email protected] (added) Function value/check.js package.json via [email protected], [email protected]
@sinclair/[email protected] (added) Function value/create.js package.json via [email protected], [email protected]
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.pure.umd.js package.json
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.pure.umd.js package.json
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.pure.umd.js package.json
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.pure.umd.min.js package.json
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.pure.umd.min.js package.json
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.pure.umd.min.js package.json
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.umd.js package.json
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.umd.js package.json
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.umd.js package.json
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.umd.min.js package.json
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.umd.min.js package.json
@testing-library/[email protected] (upgraded) Function dist/@testing-library/react.umd.min.js package.json
[email protected] (upgraded) Function internals/async-iterator-prototype.js package.json
[email protected] (added) Function dist/cjs/handlebars/compiler/javascript-compiler.js package.json via @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/cjs/handlebars/compiler/javascript-compiler.js package.json via @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.js package.json via @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.js package.json via @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.min.js package.json via @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (added) Function dist/handlebars.amd.min.js package.json via @storybook/[email protected], @storybook/[email protected], [email protected]
[email protected] (upgraded) Function test/index.js package.json via @storybook/[email protected], @testing-library/[email protected], @testing-library/[email protected], @testing-library/[email protected], @testing-library/[email protected], [email protected]
[email protected] (upgraded) Function test/index.js package.json via @storybook/[email protected], @testing-library/[email protected], @testing-library/[email protected], @testing-library/[email protected], @testing-library/[email protected], [email protected]
[email protected] (upgraded) Function build/utils.js package.json via [email protected]
[email protected] (added) Function dist/js-yaml.js package.json via [email protected]
[email protected] (added) Function dist/js-yaml.js package.json via [email protected]
[email protected] (added) Function lib/js-yaml/type/js/function.js package.json via [email protected]
[email protected] (added) Function lib/js-yaml/type/js/function.js package.json via [email protected]
[email protected] (upgraded) Function lib/jsdom/living/helpers/create-event-accessor.js package.json via [email protected]
[email protected] (upgraded) Function lib/jsdom/vm-shim.js package.json via [email protected]
[email protected] (added) Function _root.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @testing-library/[email protected], [email protected], [email protected]
[email protected] (added) Function template.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @testing-library/[email protected], [email protected], [email protected]
[email protected] (added) Function test/bigint.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @testing-library/[email protected], @testing-library/[email protected], @testing-library/[email protected], @testing-library/[email protected], [email protected], [email protected]
[email protected] (added) Function test/bigint.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @testing-library/[email protected], @testing-library/[email protected], @testing-library/[email protected], @testing-library/[email protected], [email protected], [email protected]
[email protected] (added) Function test/bigint.js package.json via @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @storybook/[email protected], @testing-library/[email protected], @testing-library/[email protected], @testing-library/[email protected], @testing-library/[email protected], [email protected], [email protected]
[email protected] (upgraded) Function cli.js package.json via [email protected]
[email protected] (added) Function tools/node.js package.json via @storybook/[email protected], @storybook/[email protected], [email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval dist/main.js package.json via @babel/[email protected]
@nicolo-ribaudo/[email protected] (upgraded) eval [dist/main.js](https://socket.dev/npm/package/@nicolo-ribaudo/chokidar-2

Copy link
Contributor

@JReinhold JReinhold left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this @literalpie, and sorry for the radio silence! 😔

The code changes looks good. I haven't tried it out, but I trust you if you say it works.

Do you know if it makes sense to include #45 too, or is that irrelevant for 7.0?

Could you change the Storybook dependencies from "7.0.0-rc.1" to just "7.0.0", then I'll merge and release this! 🚀

@literalpie
Copy link
Collaborator Author

literalpie commented Mar 31, 2023

Updating to SB 7.0

Something changed between RC.6 and RC.7 that broke the Array tests :-(
Cannot read properties of undefined (reading 'addEventListener')

I can keep digging, but I'm pretty stumped so I don't know what else to try besides disabling the tests. (the failure seems to be unrelated from anything the test is trying to test)

I found the issue in a third party library and a workaround!

is PR #45 still relevant

In 6.5, that PR seems to be a valid fix for an issue that I've been noticing. Unfortunately, in SB 7.0, the change from that PR causes things to break. I'll see if I can look into a different fix, but that should probably be a separate PR.

More testing

I did test this in a large, private storybook with many knobs and I didn't see any issues.

@literalpie
Copy link
Collaborator Author

I tested #45 again and it is working! I'm pretty sure I put the change in the wrong place last time I tested it 🤦🏼

Copy link
Contributor

@JReinhold JReinhold left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎉

@JReinhold JReinhold changed the title Storybook 7 support Support Storybook 7.0.0 Apr 1, 2023
@JReinhold JReinhold added major Increment the major version when merged dependencies Update one or more dependencies version labels Apr 1, 2023
@JReinhold JReinhold merged commit 895bb98 into storybookjs:main Apr 1, 2023
Comment on lines +76 to +80
"@storybook/addons": "7.0.0",
"@storybook/api": "7.0.0",
"@storybook/components": "7.0.0",
"@storybook/core-events": "7.0.0",
"@storybook/theming": "7.0.0",
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hard pinning these to "7.0.0" breaks peer dependencies for any project that upgrades to any patch releases like the current 7.0.7. Shouldn't these be caret pinned instead to "^7.0.0"?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I opened this PR. Thanks for the heads up! I missed this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Update one or more dependencies version major Increment the major version when merged
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants