17124 + 16550 - Vue3 upgrade: Upgrade a component + Storybook

[ketaki-deodhar]

Issue #: /bcgov/entity#17124 and /bcgov/entity#16550

Description of changes:

• Upgraded Vue3, Vuetify3 and related libraries (ESLint, Vite, Vuetify, vuelidate etc.)

  • Add vuetify.ts file
  • Updated preview.ts file to use vuetify (new way of using Vuetify)

• Upgraded DetailComment component to work with Vue3 and Vuetify3 (refer Vue3 and Vuetify3 guide)

  • Modified component to work with Vuetify3 e.g. <v-textarea> attributes are a bit different in Vuetify3. Each component will be distinct case
  • Replaced vue-property-decorator with vue-facing-decorator (devDependencies section) and updated Vue version in package.json file for individual component

• Upgraded Storybook

  • Upgraded Storybook to 7.5.3 and related packages to work with Vue3
  • Modified *.stories.ts file for a component to make it work with new version of Storybook and Vue3

• Still working on document/notes explaining how to start working on upgrading other components. Will add some references and links in the doc

After upgrade -

https://github.com/bcgov/bcrs-shared-components/assets/116035339/78c8bd06-af03-4a2d-9382-26689d184128

DEV link for comparison - https://bcgov.github.io/bcrs-shared-components/

Notes:

• Developers will see some errors while running storybook. Need to look at those when specific component is being worked on.
• npm run lint lists all lint errors

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the business-filings-ui license (Apache 2.0).

[severinbeauvais]

Amazing work, Ketaki! Just a few questions above.

[ketaki-deodhar]

Amazing work, Ketaki! Just a few questions above.

I will look at all the amazing suggestions and questions today