Resolving NPM Vulnerabilities

Hello again! 👋 😁

I am currently working on an upgrade from Storybook v5.3 to the newest v6.1.x. It seems that the v5 packages incurred some vulnerabilities all at once and upgrading eliminated most of them. However, there are a couple remaining from your package, specifically.

I notice that you are referencing storybook v5 modules in your package.json. I don’t see an upgrade tag or a “next” branch so I am going to assume nothing like that exists. Do you have plans to do some “spring cleaning” and get a branch up that’s storybook v6-specific? I think it would help eliminate the remaining vulnerabilities for which NPM is blaming your library (at the very least, it should help future development go more smoothly). Maybe time for design-token v1? 😋

Here are the two vulnerabilities (which require manual review) after upgrading sb packages to v6.1.21 and design token to 0.8.1:

┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Prototype Pollution                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ minimist                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=0.2.1 <1.0.0 || >=1.2.3                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ storybook-design-token [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ storybook-design-token > gonzales-pe > minimist              │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/1179                            │
└───────────────┴──────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Moderate      │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ prismjs                                                      │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=1.23.0                                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ storybook-design-token [dev]                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ storybook-design-token > @storybook/components >             │
│               │ react-syntax-highlighter > refractor > prismjs               │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/1638                            │
└───────────────┴──────────────────────────────────────────────────────────────┘

[Sqrrl]

Hey, decent timing. I’m almost done with the v1 rewrite and will push it soonish.

[Sqrrl]

Thanks for the feedback.

• colors can’t be changed in design token stories (probably the intention), but do persist when going back to component stories. i could see how persisting values could be useful (e.g. when switching between different stories for the same component), however, it might be nice to have some control over that persistence. otherwise, it might be difficult to remember which values you changed (and where). perhaps solvable by some sort of reset button?

A global reset button sounds nice.

• (disclaimer: i’m on a mac) token sub tabs are difficult to scroll. also, just hovering over a tab triggers the scrollbar, which is a bit distracting. it’s a tough problem to solve given the restraints of storybook addons, but important to solve nonetheless (imho).

Not really happy with it either. Really not sure how to solve this. The old way of showing all tokens on one screen had its problems, too.

• as mentioned above, i’m loving the design token section/stories. however, it seems that it’s only for mdx? or does the same component work for CSF stories too?

I haven’t tested it myself. But you should be able to use it with CSF as well. See: https://storybook.js.org/docs/react/writing-docs/docs-page#remixing-docspage-using-doc-blocks

• i’ve asked this before, but might as well ask again as you dev: will there be support for custom presenters? 😋

Definitely. Still trying to figure out the best way to configure and import external components as presenters.