OHRM5X-959: Vite migration

.eslintrc.cjs

@@ -0,0 +1,20 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  root: true,
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:vue/vue3-strongly-recommended',
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier',
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+  rules: {
+    'vue/multi-word-component-names': 'off',
+  },
+};

.github/workflows/linting.yml

@@ -15,4 +15,4 @@ jobs:
       - name: Install npm dependencies
         run: yarn install
       - name: Lint
-        run: yarn workspace oxd-components lint
+        run: yarn lint

.github/workflows/publish.yml

@@ -7,7 +7,8 @@ on:
 
 jobs:
   publish:
-    if: github.repository == 'orangehrm/oxd'
+    if: false
+    #if: github.repository == 'orangehrm/oxd'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -21,8 +22,7 @@ jobs:
         run: |
           set -x
           npm -v
-          cd scripts
-          current_version=$(node ./current-version.js)
+          current_version=$(npm pkg get version | sed 's/"//g')
           fetched_current_version=$(npm show @ohrm/oxd@$current_version version) || fetched_current_version=''
           echo "current_version=$current_version" >> $GITHUB_ENV
           echo "fetched_current_version=$fetched_current_version" >> $GITHUB_ENV
@@ -50,13 +50,23 @@ jobs:
       - name: Build
         if: ${{ env.fetched_current_version == '' }}
         run: |
-          cd scripts
-          node ./build.js
+          yarn install
+          yarn build:oxd
+          cp LICENSE dist/LICENSE
+          cp README.md dist/README.md
+          cp THIRD-PARTY-LICENSE dist/THIRD-PARTY-LICENSE
+          (cat package.json | jq '.peerDependencies += {"vue": "3.x"}' | jq 'del(.private, .scripts, .dependencies.vue, .devDependencies)') > dist/package.json
+
+      - name: Upload build files
+        uses: actions/upload-artifact@v3
+        with:
+          name: oxd-build
+          path: dist
 
       - name: Publish
         if: ${{ env.fetched_current_version == '' }}
         run: |
-          cd build
+          cd dist
           npm publish --tag dev
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/storybook.yml

@@ -15,4 +15,4 @@ jobs:
       - name: Install npm dependencies
         run: yarn install
       - name: Build Storybook
-        run: yarn workspace oxd-storybook build
+        run: yarn build:storybook

.github/workflows/type-check.yml

@@ -0,0 +1,26 @@
+name: Type Check
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+  pull_request:
+    branches:
+      - main
+      - develop
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.x'
+          registry-url: 'https://registry.npmjs.org'
+      - name: Install npm dependencies
+        run: yarn install
+      - name: Type check
+        run: yarn type-check

.github/workflows/unit-tests.yml

@@ -17,7 +17,7 @@ jobs:
         run: yarn install
 
       - name: Unit tests
-        run: yarn workspace oxd-components test:unit --coverage
+        run: yarn test:unit --coverage
 
       - name: Upload jest coverage
         uses: actions/upload-artifact@v3

.gitignore

@@ -26,3 +26,10 @@ pnpm-debug.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Coverage report
+src/coverage/*
+
+# Build
+dist/
+tsconfig.build.tsbuildinfo

.storybook/main.js

@@ -0,0 +1,25 @@
+const path = require('path');
+module.exports = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  async viteFinal(config) {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve(__dirname, '../src'),
+    };
+
+    return config;
+  },
+  staticDirs: ['../public'],
+};

storybook/.storybook/manager.js → .storybook/manager.js

@@ -1,6 +1,6 @@
+import {version} from '../package.json';
 import {addons} from '@storybook/addons';
 import {create} from '@storybook/theming';
-import {version} from '../../package.json';
 
 const orangehrmTheme = create({
   base: 'light',

.storybook/preview-head.html

@@ -0,0 +1,5 @@
+<link rel="stylesheet" href="fonts.css" />
+<link rel="stylesheet" href="icons.css" />
+<script>
+  window.global = window;
+</script>

storybook/.storybook/preview.js → .storybook/preview.js

@@ -47,4 +47,10 @@ export const parameters = {
       ...customViewports,
     },
   },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
 };

.yarnrc.yml

@@ -1,2 +1,2 @@
 nodeLinker: node-modules
-yarnPath: .yarn/releases/yarn-3.3.0.cjs
+yarnPath: .yarn/releases/yarn-3.3.1.cjs

THIRD-PARTY-LICENSE

@@ -0,0 +1,17 @@
+Third Party Licenses
+====================
+
+This project includes material from the projects listed below.
+The original copyright notice and the license under which we received
+such Third Party IP, are set forth below.
+
+- Bootstrap Icons (https://github.com/twbs/icons)
+  Copyright (c) 2019-2021 The Bootstrap Authors
+  The MIT License, https://opensource.org/licenses/MIT
+
+- Nunito Font (https://github.com/googlefonts/NunitoSans)
+  Copyright (c) Vernon Adams <[email protected]>
+                Jacques Le Bailly <[email protected]>
+                Manvel Shmavonyan <[email protected]>
+                Alexei Vanyashin <[email protected]>
+  SIL OPEN FONT LICENSE, https://opensource.org/licenses/OFL-1.1