Request: Add Storybook

[KyleTryon]

Is there an existing issue that is already proposing this?

• [X] I have searched the existing issues.

Is your feature request related to a problem? Please describe it.

Storybook resolves two potential issues for this project

1. Preview components during development
2. Live-host storybook to share components with non-developer contributors, such as ui/ux designers.

Describe the solution you'd like.

Implement StoryBook

BLOCKER At this time, the latest version of StoryBook introduces 21 high-severity vulnerabilities. The vulnerabilities do not appear to be automatically solvable.

NPM Audit Log

npm audit report

glob-parent  <5.1.2
Severity: high
glob-parent before 5.1.2 vulnerable to Regular Expression Denial of Service in enclosure regex - https://github.com/advisories/GHSA-ww39-953v-wcq6
fix available via `npm audit fix --force`
Will install @storybook/[email protected], which is a breaking change
node_modules/cpy/node_modules/glob-parent
node_modules/watchpack-chokidar2/node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/watchpack-chokidar2/node_modules/chokidar
    watchpack-chokidar2  *
    Depends on vulnerable versions of chokidar
    node_modules/watchpack-chokidar2
      watchpack  1.7.2 - 1.7.5
      Depends on vulnerable versions of watchpack-chokidar2
      node_modules/@storybook/builder-webpack4/node_modules/watchpack
      node_modules/@storybook/core-common/node_modules/watchpack
      node_modules/@storybook/core-server/node_modules/webpack/node_modules/watchpack
      node_modules/@storybook/manager-webpack4/node_modules/watchpack
        webpack  4.44.0 - 4.46.0
        Depends on vulnerable versions of watchpack
        node_modules/@storybook/builder-webpack4/node_modules/webpack
        node_modules/@storybook/core-common/node_modules/webpack
        node_modules/@storybook/core-server/node_modules/webpack
        node_modules/@storybook/manager-webpack4/node_modules/webpack
  fast-glob  <=2.2.7
  Depends on vulnerable versions of glob-parent
  node_modules/cpy/node_modules/fast-glob
    globby  8.0.0 - 9.2.0
    Depends on vulnerable versions of fast-glob
    node_modules/cpy/node_modules/globby
      cpy  7.0.0 - 8.1.2
      Depends on vulnerable versions of globby
      node_modules/cpy
        @storybook/core-server  <=7.0.0-alpha.6
        Depends on vulnerable versions of @storybook/csf-tools
        Depends on vulnerable versions of cpy
        node_modules/@storybook/core-server
          @storybook/core  >=6.2.0-alpha.0
          Depends on vulnerable versions of @storybook/core-server
          node_modules/@storybook/core
            @storybook/react  6.2.0-alpha.0 - 6.5.11-alpha.2
            Depends on vulnerable versions of @storybook/core
            node_modules/@storybook/react

trim  <0.0.3
Severity: high
Regular Expression Denial of Service in trim - https://github.com/advisories/GHSA-w5p7-h5w8-2hfq
fix available via `npm audit fix --force`
Will install @storybook/[email protected], which is a breaking change
node_modules/trim
  remark-parse  <=8.0.3
  Depends on vulnerable versions of trim
  node_modules/remark-parse
    @mdx-js/mdx  <=1.6.22
    Depends on vulnerable versions of remark-mdx
    Depends on vulnerable versions of remark-parse
    node_modules/@mdx-js/mdx
      @storybook/mdx1-csf  *
      Depends on vulnerable versions of @mdx-js/mdx
      node_modules/@storybook/mdx1-csf
        @storybook/addon-docs  >=6.5.0-alpha.1
        Depends on vulnerable versions of @storybook/mdx1-csf
        node_modules/@storybook/addon-docs
          @storybook/addon-essentials  >=6.5.0-alpha.1
          Depends on vulnerable versions of @storybook/addon-docs
          node_modules/@storybook/addon-essentials
        @storybook/csf-tools  6.5.0-alpha.1 - 6.5.11-alpha.2
        Depends on vulnerable versions of @storybook/mdx1-csf
        node_modules/@storybook/csf-tools
    remark-mdx  <=1.6.22
    Depends on vulnerable versions of remark-parse
    node_modules/remark-mdx

trim-newlines  <3.0.1
Severity: high
Uncontrolled Resource Consumption in trim-newlines - https://github.com/advisories/GHSA-7p7h-4mm5-852v
fix available via `npm audit fix`
node_modules/trim-newlines
  meow  3.4.0 - 5.0.0
  Depends on vulnerable versions of trim-newlines
  node_modules/meow

21 high severity vulnerabilities

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Teachability, documentation, adoption, migration strategy.

npm run storybook

What is the motivation / use case for changing the behavior?

--

[AlthalusAvan]

Hey! Super interested in this project and hoping to get involved at some point once my calendar clears a bit. Just something I wanted to add here in case you weren't already aware.

The storybook vulnerability list is something I've come up against in the past, but for those projects we always decided it was worth the risk. This is because the Storybook vulns only affect the Dev dependencies (you can verify this by running npm audit --omit=dev.

Given that these vulns are dev-only, and as such don't make it into the actual prod build, you may come to the same conclusion. Just wanted to make sure you were aware of this, as it has impacted our decisions in the past.