4.x - Update Storybook from 6 to 7

[bspeare]

Update Storybook from 6 to 7

Proposed Solution

• Upgrade from 6 to 7 Storybook https://storybook.js.org/docs/vue/migration-guide
• Look at the log messages and clean up anything not used
• Figure out how we want the docs to render for each component, currently I have set up a separate "docs" page for each component where we can outline "how to use" where we could provide CSS and HTML source blocks. View the card component CardDocs.mdx file as an example.
• Figure out how to render HTML as the old HTML tab is not working I think
• https://github.com/storybookjs/storybook/issues/13917 might be an issue we are having
• Possibly figure out how to how to provide a component-standalone.css file that contains, fonts, base.css, and component.css - see https://codepen.io/bspeare/pen/poGOjzm as an example.
• "Not implemented" docs have extra stuff that can be removed/hidden

[bspeare]

Started this in #911 during prof dev time.

[joewhitsitt]

Ha. Going to assign and start to pull down and familiarize myself with what is done and where this needs to go. Going to need to do some reading to catch up. @bspeare suggested a huddle to discuss this more in-depth so ping me whenever. I understand there are more priority items going on.

[joewhitsitt]

Look at the log messages and clean up anything not used
Does this meaning terminal logs, console logs, both, something different?

Finding myself not being of much help on the actual bullet points.

It seems from the storybook docs, <Source> is probably the best solution for including base styles if we want to try to keep the work of documentation minimal. Wished there was a way to collapse them. Should maybe consider trying to anchor link from the top and move them to the bottom.

I spotted the https://storybook.js.org/docs/api/doc-block-useof type and thought maybe we could use it to create a standalone story doc.

Should we update to yarn 3 as part of this?

yarn -v
1.22.19

Also, according to vscode, there are issues with our typescript which could be solved if we updated. [email protected]

vuejs/tsconfig#6

otherwise that workaround for tsconfig.app.json, tsconfig.vite-config.json and tsconfig.vitest.json seems to work.

[joewhitsitt]

Let there be HTML!

[joewhitsitt]

Spotted this as a possible path forward for the standalone combined unless we want to stay away from those kinds of stories.

https://github.com/massgov/mayflower/blob/develop/packages/core/stories/components/Template/Template.stories.mdx
https://mayflower.digital.mass.gov/core/index.html?path=/docs/components-template--template-basic

[joewhitsitt]

And maybe I didn't understand @pyrello earlier, but regarding

Should we update to yarn 3 as part of this?

and having to deal with different versions per project, I saw here you can control yarn per project using node 18+ corepack

https://yarnpkg.com/getting-started/install, https://yarnpkg.com/migration/guide

jwhitsit@ITS-02342 uids % yarn -v
3.7.0
jwhitsit@ITS-02342 uids % cd ~/Desktop 
jwhitsit@ITS-02342 Desktop % yarn -v
1.22.21

Going to leave that local for now and see if anything broke while I keep poking around.

[bspeare]

Try yarn workspace uids_base build on uiowa?

[joewhitsitt]

Try yarn workspace uids_base build on uiowa?

For the record, I never run this (always ddev blt frontend) so I had to rebuild node-sass or whatever first.

jwhitsit@ITS-02342 uiowa % nvm use
Found '/Users/jwhitsit/acquia/uiowa/.nvmrc' with version <16>
Now using node v16.16.0 (npm v8.11.0)
jwhitsit@ITS-02342 uiowa % yarn -v
1.22.15
jwhitsit@ITS-02342 uiowa % yarn workspace uids_base build
yarn workspace v1.22.15
yarn run v1.22.15
$ gulp --production
[15:55:18] Using gulpfile ~/acquia/uiowa/docroot/themes/custom/uids_base/gulpfile.js
[15:55:18] Starting 'default'...
[15:55:18] Starting 'clean'...
[15:55:18] Finished 'clean' after 108 ms
[15:55:18] Starting 'copyUids3'...
[15:55:18] Starting 'copyUids'...
[15:55:18] Starting 'fontCopy'...
[15:55:18] Finished 'fontCopy' after 352 ms
[15:55:18] Finished 'copyUids' after 641 ms
[15:55:18] Finished 'copyUids3' after 692 ms
[15:55:18] Starting 'css'...
Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
[15:55:23] Finished 'css' after 4.59 s
[15:55:23] Finished 'default' after 5.4 s
✨  Done in 7.13s.
✨  Done in 7.54s.

[joewhitsitt]

Until storybookjs/storybook#13917 has a better solution? We can "hide" the broke code stuff by decorating each story with:

  parameters: {
    docs: {
      source: {
        code: null,
      },

resulting in

[joewhitsitt]

remove card example until we decide about CSS. - https://iowaweb.slack.com/archives/C014UM4F85V/p1702315949150359?thread_ts=1702058289.928859&cid=C014UM4F85V

Done. 53483aa