UI - investigate component library/architecture

[Kaineatthelab]

Description (This ticket was repurposed -- it was initially to move the existing Add Comment Detail component into some component library for reuse. This has now expanded as described below.)

The purpose of this ticket is to investigate current (Vue) component library architectures / Vue composition API that we should use for components used within and between different UI projects (eg, IA correction components). Suitable solutions should be documented in a RFC for other developers to review.

This ticket is time-boxed as 1 day for now; follow-on tickets can be created for additional work (eg, implementation of repo or whatever).

Considerations

• Should data be stored in component (OO approach) or parent (VueX / app data store)?
  • It depends, and IMO it doesn't matter either way.
  • Ideally, the component library will support VueX (and I think Lerna does).
• What should we name this library? (something cool)
  • I've named the repo bcrs-shared-components but it can be easily changed if we invent something cooler.
• Separate from sbc-common-components for now?
  • Yes. The distinction is that sbc-common-components is for components that will probably be in every app, while bcrs-shared-components is for more business-focused components (like BaseAddress, or a list of directors) that won't be in every app but do get reused.
• Separation of components (so entire library doesn't need to be republished on small changes).
  • Yes! We definitely want -- and Lerna supports -- individual versioning of components. This allows components to be individually updated without forcing the consuming project to import all other changes to the library. This should make smaller rollouts easier.
• Do something to have common design for components. Can/should styles come from parent? Can apps use common style files?
  • I did not look into this specifically.
• Unit tests.
  • Yes, I believe this is supported by Lerna (individual components), as well as Storybook (individual unit tests + user stories).
• Github Actions (including testing) on commits/PRs,
  • I have found pages talking about auto-publishing and TravisCI integrations, but for now I simply "publish" the docs folder in the master branch to GitHub Pages.
• Semantic versioning.
  • Yes. See Lerna for details.
• Auto versioning on commits/PRs?
  • I did not look into this specifically, but I think I saw something, somewhere about it. See refs below.
• Clean up any existing (embedded) components that are moved into this library,
  • Future work.
  • As a first step, I'd like to duplicate the BaseAddress component in bcrs-shared-components and learn how to import it.

Still To Do

• [x] answer the questions above (that I have answers for)
• [x] document what I've done so far
  • See above and comments below.
• [x] document what still needs to be done, ie:
  • Update prototype to latest config
  • Lerna config + usage
  • Storybook config + pages
  • Create howto docs (install, configure, develop, publish, import)
  • Figure out how components can use VueX
  • Figure out how components can use services, etc
• [x] create RFC (PR in entity repo) and solicit feedback

[severinbeauvais]

Considerations:

• shared functionality
• shared styles
• independent versioning of components
• simplicity
• maintainability
• cost

Options:

• duplicated code (don't actually do this)
• component inheritance / slots / mixins / plugins (within Vue)
• monorepo
  • with meta
  • with git subtrees (may be a different way to include library code instead of npm)
  • with npm (eg, same as sbc-common-components)
  • with Lerna and npm
  • with Lerna and GPR
• git submodules
• bit.dev
• GitHub Package Registry (GPR)

monorepo: aka multi-package repo - different packages in different directorirs, each published individually

Lerna can be used to separate components within the library into packages within the repo.

References visited: https://vue-composition-api-rfc.netlify.app https://markus.oberlehner.net/blog/vue-application-structure-and-css-architecture/ https://www.reddit.com/r/vuejs/comments/8cjmdj/sharing_components_between_projects/ https://www.reddit.com/r/javascript/comments/89y2sp/best_way_to_share_code_between_projects/ https://vuejsdevelopers.com/2020/02/17/vue-composition-api-when-to-use/ https://codeburst.io/how-to-share-reusable-vue-components-between-a-c36bc775418d https://vue-loader.vuejs.org/guide/css-modules.html#using-with-pre-processors https://stackoverflow.com/questions/54761154/sharing-assets-and-components-between-vue-projects https://stackoverflow.com/questions/27379818/git-possible-to-use-same-submodule-working-copy-by-multiple-projects https://stackoverflow.com/questions/19424469/referring-to-the-same-submodule-twice https://tarektouati.github.io/vue-use-web/ https://blog.bitsrc.io/how-to-easily-share-vue-components-between-applications-1d30a1ad4e4d https://www.npmjs.com/package/meta https://www.atlassian.com/git/tutorials/monorepos https://medium.com/js-dojo/sharing-reusable-vue-js-components-with-lerna-storybook-and-npm-7dc33b38b011 https://vueschool.io/articles/vuejs-tutorials/reusing-logic-in-vue-components/ https://codeburst.io/creating-reusable-components-with-vue-js-button-component-503167facfde https://medium.com/@DaveAbiola/vue-js-reusable-components-cfced2af9c00 https://hackernoon.com/5-practical-ways-to-share-code-from-npm-to-lerna-and-bit-732f2a4db512 https://blog.bitsrc.io/monorepo-architecture-simplified-with-bit-and-npm-b1354be62870 https://github.com/git/git/blob/master/contrib/subtree/git-subtree.txt https://vuejs.org/v2/guide/components-slots.html https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html https://dev.to/pixari/multiple-vuejs-apps-in-a-lerna-monorepo-sharing-a-storybook-component-library-1f7k https://vue-styleguidist.github.io/ https://about.gitlab.com/

[severinbeauvais]

"bit" looks like a good way to collaborate on isolated components across projects and repos, but...

• it is not free if using bit.dev cloud for hosting (https://docs.bit.dev/docs/quick-start)
• using Free license has many limitations (https://bit.dev/pricing)
• using own server is possible and may be free and unlimited (https://docs.bit.dev/docs/bit-server)
• search and npm/yarn install doesn't work if using local server (https://docs.bit.dev/docs/bit-server)
• Vue support is in public beta at the moment (https://docs.bit.dev/docs/vue-guidelines)
• it may not play well with Webpack and Vuetify at the moment

See also https://github.com/teambit/bit.

[severinbeauvais]

I have created a prototype (monorepo with Lerna) here: https://github.com/bcgov/bcrs-shared-components

Link to our Storybook page: https://bcgov.github.io/bcrs-shared-components/

Refs:

• https://github.com/storybookjs/storybook
• https://storybook.js.org/docs/vue/
• https://www.learnstorybook.com/
• https://christopherkade.com/posts/storybook << Automatically deploying your Storybook to Github Pages
• https://github.com/storybookjs/storybook-deployer << can deploy to GH Pages using CI
• https://www.npmjs.com/package/@storybook/cli
• https://www.npmjs.com/package/@storybook/vue << a UI development environment for your Vue components, to visualize different states of your UI components and develop them interactively
• https://www.npmjs.com/package/vue-storybook << a Webpack loader + helper script that allows you to embellish your pre-existing Vue single file components (SFC) with a custom block that's automatically translated into a Storybook-flavored story - use in future maybe
• https://github.com/storybookjs/vue-cli-plugin-storybook (will create a config folder for storybook, a sample component and a sample story)
• https://github.com/white-rabbit-japan/vue-vuetify-storybook
• https://github.com/pixari/component-library-monorepo << monorepo solution for multiple VueJs Apps and a shared component library
• https://github.com/lerna/lerna << a tool for managing JavaScript projects with multiple packages
• https://medium.com/js-dojo/sharing-reusable-vue-js-components-with-lerna-storybook-and-npm-7dc33b38b011 << sharing reusable Vue.js components with Lerna, Storybook, and npm or GitHub Package Registries

[severinbeauvais]

It was agreed at standup today to spend another 1/2 day max to document what I've so far and create an RFC to solicit feedback.

[severinbeauvais]

RFC: https://github.com/bcgov/entity/pull/4755

[severinbeauvais]

Conclusion

The RFC was broadly approved.

There is some follow-on work needed before we can fully use this library (see "Still To Do" in description above). I may pick away at this in my spare time and/or it can be figured out while working on some Create/Edit/Filings UI components that should be in this library.