Storybook 7 migration

[bspeare]

Resolves https://github.com/uiowa/uids/issues/900

Don't have NVM? https://github.com/nvm-sh/nvm?tab=readme-ov-file#git-install

nvm install 18 nvm use yarn -v should output 3.7.0 otherwise you may need to run corepack enable while on node 18. yarn install yarn storybook

• Should only have one warning on startup: WARN You (or an addon) are using the 'config' preset field. This has been replaced by 'previewAnnotations' and will be removed in 8.0
• Introduction docs load
• Each story should have no code available
• Each not implemented story should just be the story without the controls and other doc-isms.
• HTML tab should show on each implemented component.
• See passing test build in GH Actions
• BONUS: See uiowa favicon

[joewhitsitt]

i'll come back to this tomorrow.

[joewhitsitt]

Heads up, I am fine if we decide to pull out the yarn 3 stuff for now. I was just happy to get it to work. Realized along the way how different it is.

[bspeare]

I am noticing that our HTML now contains the slot comments. Can we remove these comments for figure out a comment syntax that is not rendered with the component?

[bspeare]

Now that we have a dedicated docs page, can we hide the story page for each component that is not implemented?

[joewhitsitt]

Good questions. However, I am now running into this locally. Not sure what changed...

Failed to fetch dynamically imported module: http://localhost:6006/.storybook/preview.js

Update: had to hard cache reload. but did a bunch of things before that so idk.

[joewhitsitt]

Now that we have a dedicated docs page, can we hide the story page for each component that is not implemented?

figure out a comment syntax that is not rendered with the component?

Sounds cool. Looking into to both of these, but haven't had much luck.

[joewhitsitt]

Can hide the whole expandable sidebar item using:

in .storybook/manager.js

  sidebar: {
    filters: {
      patterns: (item) => {
        return !item.tags.includes('disabled');
      }
    }
  }

and in each story:

export default {
  title: 'Not implemented/Background',
  // https://github.com/storybookjs/storybook/issues/14442#issuecomment-1089165153
  tags: ['disabled'],

But this is not what we want. If anything it seems like we want to prevent docs and just show the story.

[bspeare]

@joewhitsitt could you post a quick screenshot of what that would look like?

[joewhitsitt]

The routes still exist but it is not in the sidebar.

http://localhost:6006/?path=/story/not-implemented-background--background http://localhost:6006/?path=/docs/not-implemented-background--docs

[joewhitsitt]

We could create other doc pages like Introduction but probably can't leverage the current story Stub logic to construct the docs.

[joewhitsitt]

Created https://github.com/uiowa/uids/issues/912 and https://github.com/uiowa/uids/issues/913 to capture Ben's nice-to-haves

[pyrello]

Pulling to review