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

Add Storybook plugin #2531

Open
wants to merge 26 commits into
base: main
Choose a base branch
from
Open

Add Storybook plugin #2531

wants to merge 26 commits into from

Conversation

Mrtenz
Copy link
Member

@Mrtenz Mrtenz commented Jul 2, 2024

This adds a plugin for Storybook which can be used to render Snaps JSX components. See the README of the snaps-storybook package for more details.

@Mrtenz Mrtenz force-pushed the mrtenz/storybook branch from f3108c9 to 12b305b Compare July 2, 2024 14:32
Copy link

socket-security bot commented Jul 2, 2024

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Alert Package NoteSourceCI
New author npm/[email protected] 🚫
Shell access npm/@aw-web-design/[email protected] 🚫
Shell access npm/[email protected] 🚫
Shell access npm/[email protected] 🚫
Network access npm/[email protected] 🚫
Network access npm/@ndelangen/[email protected] 🚫
Network access npm/@ndelangen/[email protected] 🚫
Network access npm/@ndelangen/[email protected] 🚫
Network access npm/@ndelangen/[email protected] 🚫
Network access npm/@ndelangen/[email protected] 🚫
Network access npm/@ndelangen/[email protected] 🚫
New author npm/[email protected] 🚫
New author npm/[email protected] 🚫
New author npm/[email protected] 🚫
New author npm/[email protected] 🚫
Network access npm/[email protected] 🚫
Network access npm/[email protected] 🚫
Network access npm/[email protected] 🚫
Network access npm/[email protected] 🚫
Network access npm/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
New author npm/@radix-ui/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Shell access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Shell access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫
Network access npm/@storybook/[email protected] 🚫

View full report↗︎

Next steps

What is new author?

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Scrutinize new collaborator additions to packages because they now have the ability to publish code into your dependency tree. Packages should avoid frequent or unnecessary additions or changes to publishing rights.

What is 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.

What is network access?

This module accesses the network.

Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked

@Mrtenz Mrtenz temporarily deployed to github-pages July 2, 2024 15:03 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 2, 2024 15:44 — with GitHub Actions Inactive
@Mrtenz Mrtenz force-pushed the mrtenz/storybook branch from 2c94e70 to 190bb37 Compare July 3, 2024 12:47
@Mrtenz Mrtenz temporarily deployed to github-pages July 3, 2024 12:47 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 3, 2024 14:09 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 4, 2024 07:40 — with GitHub Actions Inactive
@Mrtenz Mrtenz force-pushed the mrtenz/storybook branch from d281375 to 1eb1322 Compare July 4, 2024 09:54
@Mrtenz Mrtenz temporarily deployed to github-pages July 4, 2024 09:54 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 4, 2024 13:22 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 4, 2024 15:53 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 4, 2024 17:18 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 4, 2024 17:46 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 4, 2024 21:48 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 4, 2024 21:49 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 4, 2024 22:02 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 6, 2024 10:29 — with GitHub Actions Inactive
Copy link

socket-security bot commented Jul 6, 2024

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package New capabilities Transitives Size Publisher
npm/@aw-web-design/[email protected] shell Transitive: filesystem +3 105 kB the-code-monkey
npm/@babel/[email protected] None 0 52.4 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 66.3 kB nicolo-ribaudo
npm/@babel/[email protected] None +4 827 kB nicolo-ribaudo
npm/@babel/[email protected] None +10 924 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 127 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 150 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 78.3 kB nicolo-ribaudo
npm/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.7 None 0 73.9 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 136 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 91.5 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 71.3 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 69.6 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 71.1 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 70 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 72.8 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 71.5 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 89.7 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 74.7 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 72.4 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 155 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 71.7 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 77.2 kB nicolo-ribaudo
npm/@babel/[email protected] None +4 461 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 88.6 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 148 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 70.5 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 75 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 72.2 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 71.2 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 74.1 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 83.9 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 170 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 72.3 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 74.4 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 70.5 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 74.6 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 70.9 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 88.3 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 125 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 134 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 93 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 71.2 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 76.1 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 77.8 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 71.4 kB nicolo-ribaudo
npm/@babel/[email protected] None +2 274 kB nicolo-ribaudo
npm/@babel/[email protected] None +3 336 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 73.4 kB nicolo-ribaudo
npm/@babel/[email protected] None +2 165 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 71.6 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 87.2 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 70.6 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 209 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 70.2 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 73 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 146 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 70.6 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 81.8 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 76.4 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 201 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 79.8 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 71.4 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 70.3 kB nicolo-ribaudo
npm/@babel/[email protected] None 0 71.1 kB nicolo-ribaudo
npm/@babel/[email protected] environment, filesystem Transitive: unsafe +13 922 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 87.6 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 103 kB nicolo-ribaudo
npm/@babel/[email protected] environment, filesystem, unsafe +15 260 kB nicolo-ribaudo
npm/@babel/[email protected] None +1 274 kB nicolo-ribaudo
npm/@colors/[email protected] environment 0 39.5 kB dabh
npm/@discoveryjs/[email protected] None 0 81.1 kB lahmatiy
npm/@fal-works/[email protected] None 0 19.5 kB fal-works
npm/@jridgewell/[email protected] None 0 53.2 kB jridgewell
npm/@mdx-js/[email protected] None +1 24.4 kB wooorm
npm/@metamask/[email protected] None 0 227 kB metamaskbot
npm/@metamask/[email protected] None +4 59.1 kB whymarrh
npm/@metamask/[email protected] None 0 0 B
npm/@ndelangen/[email protected] network Transitive: filesystem +12 676 kB ndelangen
npm/@radix-ui/[email protected] None 0 4.96 kB vladmoroz
npm/@radix-ui/[email protected] None 0 7.78 kB vladmoroz
npm/@radix-ui/[email protected] None 0 28.2 kB vladmoroz
npm/@radix-ui/[email protected] None +11 339 kB vladmoroz
npm/@radix-ui/[email protected] None 0 25.4 kB vladmoroz
npm/@rollup/[email protected] None +1 69.3 kB shellscape
npm/@sindresorhus/[email protected] None 0 10.5 kB sindresorhus
npm/@storybook/[email protected] None 0 19.2 kB shilman
npm/@storybook/[email protected] Transitive: environment, eval, filesystem, network, shell, unsafe +93 20.2 MB shilman
npm/@storybook/[email protected] None +1 45.4 kB shilman
npm/@storybook/[email protected] None 0 9.95 kB shilman
npm/@storybook/[email protected] filesystem Transitive: environment, eval, network, shell, unsafe +85 235 MB shilman
npm/@storybook/[email protected] environment, filesystem Transitive: eval, network, shell, unsafe +74 9.99 MB shilman
npm/@storybook/[email protected] Transitive: environment, eval, filesystem, network, shell, unsafe +126 36.8 MB shilman
npm/@storybook/[email protected] environment, network Transitive: eval +12 2.07 MB shilman
npm/@storybook/[email protected] None 0 39 kB shilman
npm/@storybook/[email protected] environment +5 822 kB shilman
npm/@storybook/[email protected] Transitive: environment, eval, filesystem +11 1.76 MB shilman
npm/@types/[email protected] None +2 22.3 kB types
npm/@types/[email protected] None 0 866 kB types
npm/@types/[email protected] None 0 5.81 kB types
npm/@types/[email protected] None 0 7.34 kB types
npm/@types/[email protected] None +1 444 kB types
npm/@types/[email protected] None 0 23.3 kB types
npm/@types/[email protected] None 0 6.28 kB types
npm/@yarnpkg/[email protected] filesystem +1 788 kB arcanis
npm/[email protected] None 0 538 kB marijn
npm/[email protected] None 0 30.6 kB kashey
npm/[email protected] None +2 116 kB ljharb
npm/[email protected] None 0 81.5 kB nicolo-ribaudo
npm/[email protected] None 0 175 kB peterolson
npm/[email protected] None +1 884 kB devongovett
npm/[email protected] environment, filesystem +3 111 kB paulmillr
npm/[email protected] None 0 731 kB zloirock
npm/[email protected] None 0 429 kB explodingcabbage
npm/[email protected] environment, filesystem 0 79.1 kB motdotla
npm/[email protected] None +3 47.4 kB mafintosh
npm/[email protected] None 0 90.9 kB guybedford
npm/[email protected] filesystem 0 96.7 kB mrmlnc
npm/[email protected] None 0 63.2 kB niksy
npm/[email protected] None 0 804 kB isaacs
npm/[email protected] None 0 452 kB antfu
npm/[email protected] None 0 286 kB isaacs
npm/[email protected] None +4 698 kB pi0
npm/[email protected] None +2 1.14 MB niksy
npm/[email protected] None +2 203 kB terkelg
npm/[email protected] None 0 248 kB ljharb
npm/[email protected] None +7 233 kB kashey
npm/[email protected] filesystem +1 919 kB eventualbuddha
npm/[email protected] None +1 35.6 kB ljharb
npm/[email protected] None 0 1.26 kB shilman
npm/[email protected] None 0 14.8 kB alexreardon
npm/[email protected] None 0 73.1 kB ethan_arrowood
npm/[email protected] None +1 101 kB ljharb
npm/[email protected] None 0 513 kB davidmyersdev
npm/[email protected] environment, eval, filesystem, network, shell, unsafe +1 5.86 MB vitebot
npm/[email protected] environment, eval, filesystem, network, shell, unsafe +21 48 MB vitebot
npm/[email protected] environment, network 0 147 kB lpinca

🚮 Removed packages: npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.22.15, npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@babel/[email protected], npm/@discoveryjs/[email protected], npm/@jridgewell/[email protected], npm/@jridgewell/[email protected], npm/@jridgewell/[email protected], npm/@jridgewell/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎

@Mrtenz Mrtenz temporarily deployed to github-pages July 6, 2024 10:35 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 6, 2024 10:46 — with GitHub Actions Inactive
@Mrtenz Mrtenz temporarily deployed to github-pages July 6, 2024 10:52 — with GitHub Actions Inactive
@Mrtenz Mrtenz force-pushed the mrtenz/storybook branch from be1fac4 to aba6054 Compare July 6, 2024 11:40
@Mrtenz Mrtenz temporarily deployed to github-pages July 6, 2024 11:40 — with GitHub Actions Inactive
@Mrtenz Mrtenz changed the title Add Storybook plugin and stories for SDK components Add Storybook plugin Jul 6, 2024
@Mrtenz Mrtenz temporarily deployed to github-pages July 6, 2024 12:01 — with GitHub Actions Inactive
@Mrtenz
Copy link
Member Author

Mrtenz commented Jul 6, 2024

@metamaskbot update-pr

@Mrtenz Mrtenz temporarily deployed to github-pages July 9, 2024 10:45 — with GitHub Actions Inactive
@Mrtenz Mrtenz force-pushed the mrtenz/storybook branch from 3ea51ef to 128400f Compare July 9, 2024 10:45
@Mrtenz Mrtenz temporarily deployed to github-pages July 9, 2024 10:45 — with GitHub Actions Inactive
Copy link

codecov bot commented Jul 9, 2024

Codecov Report

Attention: Patch coverage is 17.29490% with 373 lines in your changes missing coverage. Please review.

Project coverage is 90.50%. Comparing base (b7caba9) to head (b019dde).
Report is 1 commits behind head on main.

Files Patch % Lines
...ges/snaps-storybook/src/components/custom/utils.ts 0.00% 34 Missing ⚠️
...book/src/components/snaps/file-input/FileInput.tsx 0.00% 27 Missing ⚠️
packages/snaps-storybook/src/preset.ts 0.00% 20 Missing ⚠️
packages/snaps-storybook/src/theme/utils.ts 25.00% 18 Missing ⚠️
...ckages/snaps-storybook/src/components/Renderer.tsx 0.00% 17 Missing ⚠️
...orybook/src/components/snaps/copyable/Copyable.tsx 0.00% 15 Missing ⚠️
...c/components/snaps/address/components/Jazzicon.tsx 0.00% 13 Missing ⚠️
.../src/components/snaps/copyable/components/Copy.tsx 0.00% 13 Missing ⚠️
...s/snaps-storybook/src/components/snaps/row/Row.tsx 0.00% 13 Missing ⚠️
...s/snaps-storybook/src/components/ErrorBoundary.tsx 0.00% 12 Missing ⚠️
... and 74 more
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2531      +/-   ##
==========================================
- Coverage   93.95%   90.50%   -3.46%     
==========================================
  Files         456      540      +84     
  Lines        9568    10018     +450     
  Branches     1465     1558      +93     
==========================================
+ Hits         8990     9067      +77     
- Misses        578      951     +373     

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

Copy link
Contributor

@GuillaumeRx GuillaumeRx left a comment

Choose a reason for hiding this comment

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

Awesome work ! 💯

@Mrtenz Mrtenz marked this pull request as ready for review July 9, 2024 13:18
@Mrtenz Mrtenz requested a review from a team as a code owner July 9, 2024 13:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants