Vue 3 + Vite migration

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,17 +1,17 @@
 ---
 name: Bug report
 about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
+title: ""
+labels: ""
+assignees: ""
 ---
 
 **Is your feature request related to a problem? Please describe.**

.github/pull_request_template.md

@@ -6,7 +6,9 @@
 - [ ] `npm run build` passes
 - [ ] `npm run storybook` still works
 - [ ] `npm run lint` has no unexpected errors
+- [ ] `npm run format` was run on changed files
 - [ ] All existing unit tests were run and still pass
+- [ ] End-to-end tests were run and still pass in Chrome, Firefox, and Edge without unexpected console errors (`npm run test:e2e`)
 
 ### Please specify the type of change this PR introduces (Bug fix, feature addition, content update, chore, etc.):
 

.github/workflows/build-and-test.yaml

@@ -7,34 +7,36 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [22.x]
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: npm install, and build
-      run: |
-        npm ci
-        npm run build
-      env:
-        CI: true
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install, and build
+        run: |
+          npm ci
+          npm run build
+        env:
+          CI: true
   test:
     runs-on: ubuntu-latest
     needs: [build]
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [22.x]
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node-version }}
-    - name: npm install, and build
-      run: |
-        npm ci
-        npm run test
-      env:
-        CI: true
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Install dependencies
+        run: npm ci
+      - name: Unit tests
+        run: npm run test:unit
+      - name: E2E tests
+        run: npm run test:e2e:headless
+      - name: LINTing
+        run: npm run lint

.github/workflows/npm-audit-workflow.yaml

@@ -2,7 +2,7 @@ name: npm audit workflow
 on:
   push:
     # branches:
-      # - main
+    #   - main
   workflow_dispatch:
   schedule:
     - cron: "0 0 1 * *"
@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@main
         with:
-          node-version: "12"
+          node-version: "22"
       - name: install dependencies
         run: npm ci
       - uses: oke-py/npm-audit-action@v1.8.2

.github/workflows/storybook.yaml

@@ -1,5 +1,5 @@
-name: 'Storybook: Build and Deploy'
-on: 
+name: "Storybook: Build and Deploy"
+on:
   push:
     branches: [main]
     paths: ["stories/**", "src/components/**"] # Trigger the action only when files change in the folders defined here
@@ -9,7 +9,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [22.x]
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v2.3.1

.gitignore

@@ -4,6 +4,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 lerna-debug.log*
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
@@ -19,6 +20,9 @@ pids
 lib-cov
 
 # Coverage directory used by tools like istanbul
+.DS_Store
+dist
+dist-ssr
 coverage
 *.lcov
 
@@ -46,6 +50,7 @@ typings/
 
 # TypeScript cache
 *.tsbuildinfo
+*.local
 
 # Optional npm cache directory
 .npm
@@ -58,6 +63,8 @@ typings/
 .rts2_cache_cjs/
 .rts2_cache_es/
 .rts2_cache_umd/
+/cypress/videos/
+/cypress/screenshots/
 
 # Optional REPL history
 .node_repl_history
@@ -105,3 +112,15 @@ dist
 
 # Storybook build path
 docs-build/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*storybook.log

.husky/pre-commit

@@ -0,0 +1,3 @@
+lint-staged
+#uncomment the next line to test the pre-commit function without actually committing
+#exit 1

.lintstagedrc

@@ -0,0 +1,4 @@
+{
+  "*.{js,ts,jsx,tsx,vue,cjs}": ["eslint ."],
+  "*": ["prettier . --check --ignore-unknown"]
+}

.prettierrc.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": true,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "printWidth": 100,
+  "trailingComma": "es5",
+  "singleAttributePerLine": true
+}

.storybook/main.js

@@ -1,12 +1,18 @@
-module.exports = {
-  "stories": [
-    "../stories/storybook.js",
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "storybook-addon-mock/register",
-  ]
-}
+/** @type { import('@storybook/vue3-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+
+  addons: ["@storybook/addon-essentials", "storybook-addon-mock"],
+
+  framework: {
+    name: "@storybook/vue3-vite",
+    options: {},
+  },
+
+  core: {
+    disableTelemetry: true, // 👈 Disables telemetry
+  },
+
+  docs: {},
+};
+export default config;

.storybook/preview.js

@@ -1,10 +1,15 @@
+import "@/styles/styles.css";
+import "@bcgov/bootstrap-v5-theme/css/bootstrap-theme.min.css";
 
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
     },
   },
-}
+};
+
+export default preview;

.vscode/extensions.json

@@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "vue.volar",
+    "dbaeumer.vscode-eslint",
+    "ms-vscode-remote.remote-wsl"
+  ],
+  "unwantedRecommendations": []
+}

CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the
+- Focusing on what is best not just for us as individuals, but for the
   overall community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or
+- The use of sexualized language or imagery, and sexual attention or
   advances of any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email
   address, without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban.
 ### 4. Permanent Ban
 
 **Community Impact**: Demonstrating a pattern of violation of community
-standards, including sustained inappropriate behavior,  harassment of an
+standards, including sustained inappropriate behavior, harassment of an
 individual, or aggression toward or disparagement of classes of individuals.
 
 **Consequence**: A permanent ban from any sort of public interaction within

COMPLIANCE.yaml

@@ -5,7 +5,7 @@ description: |
 spec:
   - name: PIA
     status: PIA_STATUS_HERE
-    last-updated: '2021-02-26T21:05:21.110Z'
+    last-updated: "2021-02-26T21:05:21.110Z"
   - name: STRA
     status: STRA_STATUS_HERE
-    last-updated: '2021-02-26T21:05:21.110Z'
+    last-updated: "2021-02-26T21:05:21.110Z"

CONTRIBUTING.md

@@ -1,7 +1,8 @@
 ## How to contribute
-Government employees, public and members of the private sector are encouraged to contribute to the repository by **forking and submitting a pull request**. 
 
-(If you are new to GitHub, you might start with a [basic tutorial](https://help.github.com/articles/set-up-git) and  check out a more detailed guide to [pull requests](https://help.github.com/articles/using-pull-requests/).)
+Government employees, public and members of the private sector are encouraged to contribute to the repository by **forking and submitting a pull request**.
+
+(If you are new to GitHub, you might start with a [basic tutorial](https://help.github.com/articles/set-up-git) and check out a more detailed guide to [pull requests](https://help.github.com/articles/using-pull-requests/).)
 
 Pull requests will be evaluated by the repository guardians on a schedule and if deemed beneficial will be committed to the master.