OHRM5X-959: Vite migration

[Super-Chama]

Checklist

• Storybook stories are added/updated for the changed areas
• Code is linted properly
• Developer testing is done for the affected areas
• Package version updated

[Super-Chama]

OXD V2 Highlights

Migrate from vue-cli to create-vue

Due to vue-cli being put on maintenance by the vue framework team we have decided to switch to the suggested create-vue scaffolding tool. Most notable change here is moving away from the underlying js bundler (Webpack 5 to Vite.js)

Migrate from Storybook 6.X to 7.X

Storybook 7X is now powered with vite and currently in public beta.

Migrate from Jest to Vitest as unit test runner

Vitest with vue test utils are the latest recommended unit test tools

Type Check

Workflow added for type checking.

ESM Build

// pending

New folder structure

1.X Folder structure

├── components
│   ├── package.json
│   └── src
│       ├── core
│       │   └── components
│       │      └── Alert
│       │         ├── alert.scss
│       │         ├── Alert.vue
│       │         ├── __tests__
│       │         │   ├── alert.spec.ts
│       │         ├── types.ts
│       │         └── _variables.scss
│       ├── assets
│       ├── composables
│       ├── directives
│       ├── mixins
│       ├── services
│       ├── styles
│       └── utils
├── storybook
│   ├── package.json
│   ├── public
│   └── stories
│       └── core
│           └── components
│               └── Alert
│                   ├── AlertContainer.vue
│                   └── Alert.stories.js
├── package.json
├── scripts
└── yarn.lock

2.X Proposed structure

├── src
│   ├── components
│   │   ├── Alert
│   │      ├── alert.scss
│   │      ├── Alert.vue
│   │      ├── stories
|   |      |   ├── AlertContainer.vue
│   │      │   └── Alert.stories.ts
│   │      └── __tests__
│   │      |   └── alert.spec.ts
│   │      ├── types.ts
│   │      └── _variables.scss
|   ├── composables
│   ├── assets
│   ├── directives
│   ├── mixins
│   ├── services
│   ├── styles
│   └── utils
├── package.json
└── yarn.lock

[Super-Chama]

Currently static assets are bundled together in js/css. this behaviour is not ideal due to large file size of resultant builds. Waiting for vitejs/vite#9734

[RajithaKumara]

Shall we check how to handle license in the build