4.0.0 vue3

vue/sbc-common-components/.eslintrc.js

@@ -1,19 +1,54 @@
 module.exports = {
   root: true,
   env: {
+    'vue/setup-compiler-macros': true,
     node: true
   },
-  'extends': [
-    'plugin:vue/essential',
-    '@vue/standard',
-    '@vue/typescript'
+  extends: [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
+    // 'plugin:prettier/recommended',
   ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
   parserOptions: {
+    ecmaVersion: 2020,
     parser: '@typescript-eslint/parser',
     plugins: ['@typescript-eslint']
-  }
-}
+  },
+  rules: {
+    'max-len': [
+      'warn',
+      { code: 120, ignoreRegExpLiterals: true, ignoreTrailingComments: true },
+    ],
+    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    // 'prettier/prettier': [
+    //   'warn',
+    //   {
+    //     arrowParens: 'avoid',
+    //     endOfLine: 'lf',
+    //     jsxBracketSameLine: false,
+    //     printWidth: 80,
+    //     proseWrap: 'never',
+    //     quoteProps: 'as-needed',
+    //     singleQuote: true,
+    //     semi: false,
+    //     trailingComma: 'es5',
+    //     useTabs: false,
+    //     vueIndentScriptAndStyle: false,
+    //   },
+    // ],
+  },
+  overrides: [
+    {
+      files: [
+        '**/__tests__/*.{j,t}s?(x)',
+        '**/tests/unit/**/*.spec.{j,t}s?(x)',
+      ],
+      env: {
+        jest: true,
+      },
+    },
+  ],
+};

vue/sbc-common-components/docs/README.md

@@ -10,6 +10,21 @@ _**`The library tries to address a few concerns`**_
 
 **develop reusable code** .Think in terms of reusable pieces and avoid tightly coupled components
 
-
+**NOTE** when using this package in other repos, the following code may need to be added to the vue.config.js of the repo
+The following block of code is used to fix the warning: 
+"Vue3: resolveComponent can only be used in render() or setup()".
+This warning was preventing components in Sbc-common-components to be rendered.
+
+module.exports = {
+    ...
+    configureWebpack:{
+        resolve:{
+            alias:{
+               vue: path.resolve('./node_modules/vue')
+            }
+        }
+    }
+}
+**END NOTE**
 
 

vue/sbc-common-components/docs/Vue3Upgrades/README.md

@@ -0,0 +1,250 @@
+# This document shows which components are used in which repositories prior
+# to being upgraded to Vue3
+
+# Components in SBC-Common
+•	Auth Menu*
+•	Authentication Options
+•	Authentication Options Dialog
+•	Base Address
+•	Browser Version Alert*
+•	Fee Summary
+•	Footer
+•	Header
+•	Loading Screen*
+•	Loader*
+•	Login*
+•	Mobile Device Alert*
+•	Navigation Bar
+•	Notification Panel*
+•	Pay System Alert
+•	Product Selector*
+•	Sign In*
+•	Sign Out*
+•	System Alert
+•	System Banner*
+•	System Error
+•	System Error Modal
+
+# SBC Auth Menu
+Uses Account Module and Auth Module from Store.
+Vue Version: Vue3
+Used by components:
+•	SBC-Login
+Used by repositories:
+•	BCRegistry
+•	Auth
+•	Search
+
+# Authentication Options
+Does not use Store.
+Vue Version: Vue2
+REPLACED BY ChooseAuthMethodView.vue
+Used by components:
+•	SBC-Authentication-Options-Dialogue
+Used by repositories:
+•	NONE
+
+# Authentication Options Dialog
+Does not use Store.
+Vue Version: Vue2
+REPLACED BY ChooseAuthMethodView.vue
+Used by components:
+•	NONE
+Used by repositories:
+•	NONE
+
+# Base Address
+Does not use Store.
+Vue Version: Vue2
+Used by components:
+•	CompletingParty
+Used by repositories:
+•	BCRS-Shared-Components
+•	Business-Create-UI
+•	Business-Edit-UI
+•	Business-Filings-UI
+•	Fas-UI
+•	PPR-UI
+•	Auth
+
+
+# Browser Version Alert
+Does not use Store.
+Vue Version: Vue3
+Used by components:
+•	SBC-Header
+Used by repositories:
+•	NONE
+
+# Fee Summary
+Does not use Store.
+ALREADY EXISTS IN BCRS-SHARED-COMPONENTS, but uses implementation from SBC-Common-Components
+Vue Version: Vue2
+Used by components:
+•	NONE
+Used by repositories:
+•	BCRS-Shared-Components
+
+# Footer
+Does not use Store.
+Vue Version: Vue3
+Used by components:
+•	NONE
+Used by repositories:
+•	BCRegistry
+•	Business-Create-UI
+•	Business-Edit-UI
+•	Business-Filings-UI
+•	Fas-Ui
+•	PPR-Ui
+•	Search
+•	Auth
+
+# Header
+Uses Account Module, Notification Module, and Auth Module from Store.
+Vue Version: Vue3
+Used by components:
+•	NONE
+Used by repositories:
+•	BCRegistry
+•	Business-Create-UI
+•	Business-Edit-UI
+•	Business-Filings-UI
+•	Fas-Ui
+•	PPR-Ui
+•	Search
+•	Auth
+
+# Loading Screen
+Does not use Store.
+Vue Version: Vue3
+Used by components:
+•	SignOut
+•	SignIn
+Used by repositories:
+•	Fas-UI
+•	Auth
+
+# Loader
+Does not use Store.
+Vue Version: Vue3
+Used by components:
+•	NONE
+Used by repositories:
+•	Fas-UI
+•	Auth
+
+# Login
+Does not use Store.
+Vue Version: Vue3
+Used by components:
+•	NONE
+Used by repositories:
+•	PPR-UI
+•	Search
+•	Auth
+Mobile Device Alert
+Does not use Store.
+Vue Version: Vue3
+Used by components:
+•	SBC-Header
+Used by repositories:
+•	NONE
+
+# Navigation Bar
+Uses Account Module and Auth Module from Store.
+Only reference to Nav bar in Auth-Web:
+
+Replaced with BreadCrumbs?
+Vue Version: Vue2
+Used by components:
+•	NONE
+Used by repositories:
+•	NONE
+
+# Notification Panel
+Uses Notification Module from Store.
+Vue Version: Vue3
+Used by components:
+•	SBC-Header
+Used by repositories:
+•	 NONE
+
+
+# Pay System Alert
+Uses Status Module from Store.
+Vue Version: Vue2
+Used by components:
+•	 NONE
+Used by repositories:
+•	Business-Edit-UI (Imported but never used?)
+
+# Product Selector
+Uses Product Module from Store.
+Vue Version: Vue3
+Used by components:
+•	SBC-Header
+Used by repositories:
+•	 NONE
+
+# Sign In
+Uses Account Module and Auth Module from Store.
+Vue Version: Vue3
+Used by components:
+•	NONE
+Used by repositories:
+•	 BCRegistry
+•	Fas-UI
+•	PPR-UI
+•	Search
+•	Auth
+
+# Sign Out
+Does not use Store.
+Vue Version: Vue3
+Used by components:
+•	NONE
+Used by repositories:
+•	 BCRegistry
+•	Business-Create-UI
+•	Business-Edit-UI
+•	Business-Filings-UI
+•	Fas-UI
+•	PPR-UI
+•	Search
+•	Auth
+
+# System Alert
+Does not use Store.
+Vue Version: Vue2
+Used by components:
+•	NONE
+Used by repositories:
+•	NONE
+
+# System Banner
+Does not use Store.
+Vue Version: Vue3
+Used by components:
+•	NONE
+Used by repositories:
+•	PPR-UI
+
+# System Error
+Does not use Store.
+Vue Version: Vue2
+Used by components:
+•	SBC-System-Error-Modal
+Used by repositories:
+•	Auth
+
+# System Error Modal
+Does not use Store.
+Vue Version: Vue2
+Used by components:
+•	NONE
+Used by repositories:
+•	NONE
+
+
+

vue/sbc-common-components/jest.config.js

@@ -7,20 +7,25 @@ module.exports = {
     'ts',
     'tsx'
   ],
+  testEnvironment: "jsdom",
   transform: {
-    '^.+\\.vue$': 'vue-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
     '^.+\\.tsx?$': 'ts-jest',
-    '^.+\\.(js|jsx)?$': 'babel-jest'
+    '^.+\\.(ts|js|mjs)x?$': 'babel-jest',
+    '^.+\\.vue$': '@vue/vue3-jest'
   },
-  transformIgnorePatterns: [],
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
+    "^@/(.*)$": "<rootDir>/src/$1",
+    ".+\\.(css|styl|less|sass|scss|png|jpg|svg|ttf|woff|woff2)$":"<rootDir>/tests/jest_setup_css",
+    "^vuetify/components$": "<rootDir>/node_modules/vuetify/lib/components/index.mjs",
+    "^vuetify/directives$": "<rootDir>/node_modules/vuetify/lib/directives/index.mjs",
+    "^vuetify/styles$": "<rootDir>/node_modules/vuetify/lib/styles/main.css"
   },
+  transformIgnorePatterns: ['/node_modules/(?!(vuetify)/)'],
   snapshotSerializers: [
     'jest-serializer-vue'
   ],
-  setupFiles: ['jest-localstorage-mock'],
+  setupFiles: ['jest-localstorage-mock', './tests/unit/setup.ts'],
   testMatch: [
     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
   ],
@@ -32,6 +37,11 @@ module.exports = {
   globals: {
     'ts-jest': {
       babelConfig: true
+    },
+    'vue-jest': {
+      compilerOptions: {
+        isCustomElement: (tag) => tag.startsWith('v-'),
+      },
     }
   }
 }