feat(vue3): various upgrades for vue 3

Upgrades dependencies, migrates to storybook + vite, removes default export.

BREAKING CHANGE: Users will have to use es6-style named imports instead.

Also merges in changes from upstream master since beta branch diverged.

closes #44, closes #52

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Sarah Umi Leventhal <35374315+Umi8Umi@users.noreply.github.com>
Co-authored-by: Sarah Leventhal <sarah.leventhal@mastercard.com>
Co-authored-by: Ronald Jerez <ronald.jerez@mastercard.com>
Co-authored-by: Reuk Bundara <bundarareuk@gmail.com>

.eslintignore

@@ -0,0 +1,9 @@
+/dist/
+/coverage
+.vscode
+.yalc
+yalc.lock
+*.timestamp-*
+
+# Storybook Build
+storybook-static/

.eslintrc.cjs

@@ -0,0 +1,46 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  globals: {
+    vi: true
+  },
+  parserOptions: {
+    ecmaVersion: 'latest',
+    parser: require.resolve('@typescript-eslint/parser'),
+    sourceType: 'module'
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:vue/vue3-recommended',
+    'plugin:storybook/recommended',
+    'plugin:prettier/recommended'
+  ],
+  plugins: ['vue'],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/component-tags-order': [
+      'error',
+      {
+        order: ['script', 'template', 'style']
+      }
+    ],
+    'vue/multi-word-component-names': 'off'
+  },
+  overrides: [
+    {
+      files: ['vitest.setup.ts', '**/__tests__/*.{j,t}s', '**/tests/**/*.{spec,test}.{j,t}s'],
+      env: {
+        jest: true
+      },
+      plugins: ['vitest'],
+      extends: ['plugin:vitest/recommended'],
+      rules: {
+        'vitest/no-commented-out-tests': 'off'
+      }
+    }
+  ]
+}

.github/workflows/coverage.yml

@@ -1,23 +1,26 @@
 name: Coverage
 
 on:
-  - push
-  - pull_request
+  pull_request:
+  push:
+    branches:
+      - master
+      - beta
 
 jobs:
   coverage:
     name: Coverage
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 16
       - name: Install
         run: npm ci
       - name: Test
         run: npm test
       - name: Coveralls
-        uses: coverallsapp/github-action@master
+        uses: coverallsapp/github-action@v2
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/gh-pages-beta.yml

@@ -0,0 +1,27 @@
+name: Publish beta demo page
+
+on:
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+-beta.[0-9]+'
+
+jobs:
+  docs:
+    name: Generate Docs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 16
+      - name: Install
+        run: npm ci
+      - name: Build Docs
+        run: npm run build:docs
+      - name: Deploy Github Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./storybook-static
+          destination_dir: beta
+

.github/workflows/gh-pages-latest.yml

@@ -0,0 +1,27 @@
+name: Publish latest demo page
+
+on:
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+
+jobs:
+  docs:
+    name: Generate Docs
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 16
+      - name: Install
+        run: npm ci
+      - name: Build Docs
+        run: npm run build:docs
+      - name: Deploy Github Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./build
+          destination_dir: latest
+

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
       - name: Install
         run: npm ci
       - name: Test

.gitignore

@@ -1,8 +1,10 @@
 .DS_Store
 node_modules
 /dist
-/build
 /coverage
+.yalc
+yalc.lock
+*.timestamp-*
 
 # local env files
 .env.local
@@ -21,3 +23,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+# Storybook Build
+storybook-static/

.nvmrc

@@ -0,0 +1 @@
+16.16.0

.prettierignore

@@ -0,0 +1,18 @@
+## directories
+/dist/
+backstop_data
+test/unit/coverage/
+
+## file extensions
+*.*
+!.storybook/
+!*.cjs
+!*.cts
+!*.js
+!*.json
+!*.jsonc
+!*.mjs
+!*.mts
+!*.vue
+!*.ts
+!*.yml

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 120,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}

.storybook/main.ts

@@ -0,0 +1,35 @@
+import { type StorybookConfig } from '@storybook/vue3-vite'
+import { mergeConfig } from 'vite'
+import { execSync } from 'child_process'
+
+const STORYBOOK_VERSION_NUM = execSync('git describe --tags --abbrev=0').toString().trim()
+const STORYBOOK_COMMIT_HASH = execSync('git rev-parse --short HEAD').toString().trim()
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  core: {
+    builder: '@storybook/builder-vite',
+    disableTelemetry: true
+  },
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  },
+  env: (config) => ({
+    ...config,
+    STORYBOOK_VERSION_NUM,
+    STORYBOOK_COMMIT_HASH
+  }),
+  async viteFinal(config, { configType }) {
+    // return the customized config
+    return mergeConfig(config, {
+      // customize the Vite config here
+    })
+  }
+}
+
+export default config

.storybook/manager.ts

@@ -0,0 +1,11 @@
+import { addons } from '@storybook/manager-api'
+
+addons.setConfig({
+  sidebar: {
+    filters: {
+      patterns: (item: any) => {
+        return !item.tags.includes('hidden')
+      }
+    }
+  }
+})

.storybook/preview.ts

@@ -0,0 +1,43 @@
+import { type Preview, setup } from '@storybook/vue3'
+import { type App } from 'vue'
+import { plugin as InputFacade } from '@/plugin.js'
+import Checkbox from '@/stories/components/Checkbox.vue'
+import Display from '@/stories/components/Display.vue'
+import Field from '@/stories/components/Field.vue'
+
+import './styles.scss'
+
+const versionNum = import.meta.env.STORYBOOK_VERSION_NUM
+const commitHash = import.meta.env.STORYBOOK_COMMIT_HASH
+
+setup((app: App) => {
+  app.use(InputFacade)
+  app.component('Checkbox', Checkbox)
+  app.component('Display', Display)
+  app.component('Field', Field)
+})
+
+const preview: Preview = {
+  globalTypes: {
+    version: {
+      name: 'Version',
+      description: 'Vue Input Facade version',
+      defaultValue: versionNum,
+      toolbar: {
+        icon: 'info',
+        items: [
+          {
+            value: versionNum,
+            title: `${versionNum}`
+          },
+          {
+            value: commitHash,
+            title: `Commit Hash: ${commitHash}`
+          }
+        ]
+      }
+    }
+  }
+}
+
+export default preview