SPIKE: Combine cosmos/voyager, cosmos/explorer, websites, and `ni-*` components in monorepo

Version

0.5.0

Description

Combining these interrelated projects would help solve integration issues like #685, #689, cosmos/explorer#1, cosmos/explorer#2, tendermint/tendermint.com#151. There have been many other integration and component update issues over the past couple years that would be solved by this.

It will also be the biggest single step towards universal, theme-able, and reusable vue components for all Cosmos projects.

We can reuse this Voyager repository or we can make a new one, I think there are arguments both ways. Reusing the Voyager repo lets us retain our valuable SEO and hard links. We can rename this repository if we want to, and GitHub will forward all requests to the new repository name. The alternative is a brand new repository–we will definitely need a name for this. I’m open to suggestions.

Steps to Monorepo

Here are all the steps needed to accomplish this. We can attempt this one step at a time, it doesn’t all have to be in one sprint. Combinging cosmos/voyager and cosmos/explorer is a significant one, because cosmos/explorer (in general) is using an old version of cosmos/voyager components.

• combine cosmos/voyager and cosmos/explorer: e.g. mono/voyager mono/explorer mono/components/
• add @nylira/vue-* components to monorepo under ./components
• add cosmos.network to monorepo
• add tendermint.com to monorepo
• add allinbits.com to monorepo

[nylira]

@nylira/vue-field and the others components took a huge amount of integration work and still has maintenance costs today. The dream has always been to extract the rest of our Cosmos UI components to npm, but I’d had to give up on that idea because it’s too much work to maintain so many separate repos. That’s how we ended up with different versions of NiPageHeader, NiSection, forms and modals – all of which are reused in different levels across our Explorer, Voyager, and other cosmos front end projects. All those components are not up to date, and all the components have small improvements in them that are not being shared.

yarn link does work for editing a node module and viewing its changes in another repo. But it’s still not the ideal workflow.

Let’s say we improve the @nylira/vue-button, yarn linking it to the cosmos.network repo. We improved its usability. It looks great. We make a PR in the cosmos.network repo to bump the version. It’s merged. We’re not done–we still have go into all of our other repos that use @nylira/vue-button and also bump the version in their package.json. We have to make the four extra PRs (in Explorer, Voyager, tendermint.com, allinbits.com… etc) to get this accomplished. Whoever reviews these PRs needs to know about what changed in the new version of @nylira/vue-button because there no diffs other than the version bump.

In the monorepo case, once we improve @nylira/vue-button (now just called ./components/button) and get that PR merged, the button has been instantly improved in every single project that uses it. The person who reviews this PR knows exactly what happened to the button.

How often do our components change? They should change whenever we need them to. The @nylira components would change a lot faster to suit our needs if they were not in a separate repository. We have been ignoring them as a team because they seem to work okay, but they don’t have any unit tests (due to lack of time and oversight), yet they power critical parts of our app.

The Voyager product is still the primary focus of the UI team. If no one works on the websites except for Jordan and I, it’s okay. But doing this change will help the two of us tremendously in maintaining these currently separated but very similar projects.

[okwme]

https://github.com/cosmos/voyager https://github.com/cosmos/cosmos.network https://github.com/cosmos/explorer https://github.com/tendermint/tendermint-vue https://github.com/tendermint/tendermint.com

https://github.com/nylira/vue-countdown https://github.com/nylira/vue-button https://github.com/nylira/vue-page-split https://github.com/nylira/vue-user-pages https://github.com/nylira/vue-field https://github.com/nylira/vue-input https://github.com/nylira/vue-modal https://github.com/nylira/vue-modules https://github.com/nylira/vue-notifications https://github.com/nylira/vue-key-values https://github.com/nylira/vue-page-header https://github.com/nylira/vue-article-body https://github.com/nylira/vue-form-msg https://github.com/nylira/vue-input-error