Fix Storybook WSOD with some dependency updates

[dhruvkb]

Fixes

Fixes #895

Description

This PR

• upgrades @storybook/* packages to the latest version
• updates third-party addons for Storybook
• removes deprecated dependencies addon-knobs
• removes explicit dependency on react to allow resolution

Screenshots

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main or master).
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no
  visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[brylie]

I get an error using npm 6.x:

ERROR in ./.storybook/preview.js
Module not found: Error: Can't resolve '@storybook/addon-knobs' in '/home/cc/Code/vocabulary/packages/vocabulary/.storybook'
 @ ./.storybook/preview.js 7:0-51 71:13-22
 @ ./.storybook/preview.js-generated-config-entry.js

[brylie]

Ah, I just saw your commit removing the reference to knobs. Running again with the latest.

[dhruvkb]

Just for context, I'm on Node 14 with npm 7.

[brylie]

OK, thanks. Node 14 with npm 6 here (I think 6 is still the default or at least we should decider whether to drop support for 6).

I still get the white screen with the following steps:

1. cd to project root
2. run npm install --legacy-peer-deps
3. npm run setup (since I'm testing with npm 6)
4. npm run build
5. npm run storybook

Are you running storybook in a sub-project or in the project root?

[dhruvkb]

I'm running npm install and npm run storybook inside the packages/vocabulary subproject. The idea is to start with one project to see if I'm really onto something worthwhile here.

[brylie]

For what it's worth, the project is configured to use npm 6.14.9 by default, which we can change if it will fix this issue:

https://github.com/creativecommons/vocabulary/blob/21a35d06b3a4e675526985954fc4fd7e0c02f4cc/package.json#L46-L48

[dhruvkb]

I don't suppose the npm version difference is the problem here, but if it is, moving up to npm 7 can surely be considered.

[brylie]

OK, I can confirm that the packages/vocabulary run in stand-alone mode. 🥳

[dhruvkb]

I think replicating similar dependency changes in the other two packages can get them to start too. I could do that over the coming weekend. It's a bit far off so feel free to reassign.

[brylie]

Relatedly, do you suggest a different architecture for this project, where we can keep the monorepo approach while

• having one global Storybook project and
• keeping the packages separate?

That way, we could follow normal packaging workflow while Storybook would serve as a development and documentation environment. We might then be able to deprecate lerna.

[dhruvkb]

It seems like a great idea to not have to manage three separate packages with separate documentations. But I'm unable to wrap my head around how that would work in practice, because Storybook has different setups for Vue and plain HTML. On a pessimistic note, it might either be quite complex to setup or outright not possible.

Maybe we can test to see how feasible that is before committing to the approach.

[brylie]

It seems like a great idea to not have to manage three separate packages with separate documentations.

Sure thing. I opened a separate issue to explore the idea: #905

[dhruvkb]

Thanks for testing this PR, and for the really rapid back-and-forth. It was fun!

[brylie]

Hei @dhruvkb. I really appreciate your help with this issue. I have tried today to follow the same pattern in the packages/fonts project but have encountered errors and/ or a white screen. I'll stand aside here and await your assistance to apply these changes to the other sub-packages.

For what it's worth, I believe we need to somehow simplify this project. So far, I have proposed a couple of options for discussion:

• RFC [RFC] Deprecate Storybook - simplify project to essential components and styles using VuePress #898 - deprecate Storybook and use VuePress for static style guide documentation
• RFC [RFC] rearchitect project to keep separate packages with single Storybook app #905 - rearchitect project to have a single Storybook documentation app with separate packages (fonts, vocabulary, vue-vocabulary)

[dhruvkb]

Storybook is undoubted powerful, feature-packed and most relevantly, as a team of just a few people, not-maintained-by-us. Replacing it with a home-grown solution built on top of a barebones VuePress setup seems like a lot of work with the same end-result: a place to see our components in action.

@brylie I think a more viable solution would be to

• [RFC] rearchitect project to keep separate packages with single Storybook app #905
  • Keep Storybook around and frequently update it
  • Throw away most of the addons make updates easier
• Merge Fonts and Vocabulary into one package (Fonts is meaningless when standing alone)

But before moving ahead with any of this, I suppose the first matter of concern is to path the dependencies and get all our Storybooks up again (the purpose of this PR).

Let me know what you think.

[dhruvkb]

@brylie with the above changes, the steps mentioned in the README.md for starting all three Storybooks at once are also working properly. I suppose you could test it once and merge the PR now.

[brylie]

@all-contributors please add @dhruvkb for code, mentoring

[allcontributors]

@brylie

I've put up a pull request to add @dhruvkb! 🎉