feat: vue starter app

starter-apps/README.md

@@ -1 +1,54 @@
-# TODO
+# Vue3 Starter App with GCDS Components Vue Package
+This is a starter app that you can use to bootstrap your project using Vue3 and GCDS Components
+
+## Project Structure
+A brief overview of the project structure:
+
+```graphql
+vue-template/                     # Project root (Javascript)
+├── e2e/                          # End-to-end tests
+├── public/                       # Static assets
+├── src/                          # Source files
+│   ├── assets/                   # Project assets
+│   ├── components/               # Vue components
+│   │   ├── __tests__/            # Unit tests
+│   │   ├── forms/                # Form components
+│   │   ├── AppLink.vue           # GCDS implementation of a router link component
+│   │   ├── Container.vue         # Example of usage of the GCDS container component
+│   │   ├── DateModified.vue      # Example of usage of the GCDS date modified component
+│   │   ├── Header.vue            # Example of usage of the GCDS header component
+│   │   ├── Footer.vue            # Example of usage of the GCDS footer component
+│   │   ├── HeaderBreadcrumbs.vue # Example of usage of the GCDS breadcrumbs component
+│   │   ├── Heading.vue           # Example of usage of the GCDS heading component
+│   │   ├── NavLink.vue           # Example of usage of the GCDS nav link component
+│   │   └── Text.vue              # Example of usage of the GCDS text component
+│   ├── config                    # Configuration files
+│   │   └── constants.js          # Constants fie
+│   ├── i18n                      # Configuration files
+│   │   ├── en.js                 # English translations
+│   │   └── fr.js                 # French translations
+│   │   └── index.js              # Constants fie
+│   ├── router                    # Router config folder
+│   │   └── index.js              # Router configuration
+│   ├── stores                    # Pinia store folder
+│   │   └── formStore.js          # Example store file for forms
+│   ├── utils                     # Utility functions
+│   │   ├── nav.js                # Navigation utility functions
+│   │   └── refresh.js            # Utility function to refresh states
+│   ├── views                     # Views folder
+│   │   ├── About/                # View files for the about page
+│   │   ├── HomeView.vue          # Example view file
+│   │   ├── NotFound.vue          # Page not found view file
+│   │   └── ReportABug.vue        # Example view file using GCDS components
+│   ├── App.vue                   # Root component
+│   └──main.js                   # Entry point
+├── .gitignore                    # Git ignore rules
+├── index.html                    # HTML template
+├── package.json                  # Project metadata and dependencies
+├── README.md                     # Project documentation
+├── .eslintrc.js                  # ESLint configuration
+├── .prettierrc.js                # Prettier configuration
+├── playwright.config.js          # Playwright configuration
+├── vitest.config.js              # Vite test configuration
+└── vite.config.js                # Vite configuration
+```

starter-apps/vue/vue-template/.eslintrc.cjs

@@ -0,0 +1,33 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  overrides: [
+    {
+      files: [
+        'e2e/**/*.{test,spec}.{js,ts,jsx,tsx}'
+      ],
+      'extends': [
+        'plugin:playwright/recommended'
+      ]
+    }
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+    // Slots used in GCDS Components (web components) are valid usage
+    // source: https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots
+    'vue/no-deprecated-slot-attribute': 'off',
+    'vue/multi-word-component-names': ['error', {
+      // TODO: Remove About1 from the list if it is no longer needed
+      'ignores': ['Header', 'Footer', 'Container', 'Heading', 'Text', 'Button', 'Input', 'About1']
+    }]
+  }
+}

starter-apps/vue/vue-template/.gitignore

@@ -0,0 +1,33 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+test-results/
+playwright-report/

starter-apps/vue/vue-template/.prettierrc.json

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

starter-apps/vue/vue-template/.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "ms-playwright.playwright",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode"
+  ]
+}

starter-apps/vue/vue-template/README.md

@@ -0,0 +1,56 @@
+# vue-starter-app
+
+This template should help get you started developing with Vue 3 in Vite using GCDS Components from [@cdssnc/gcds-components-vue](https://www.npmjs.com/package/@cdssnc/gcds-components-vue). 
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
+
+### Run Unit Tests with [Vitest](https://vitest.dev/)
+
+```sh
+npm run test:unit
+```
+
+### Run End-to-End Tests with [Playwright](https://playwright.dev)
+
+```sh
+# Install browsers for the first run
+npx playwright install
+
+# When testing on CI, must build the project first
+npm run build
+
+# Runs the end-to-end tests
+npm run test:e2e
+# Runs the tests only on Chromium
+npm run test:e2e -- --project=chromium
+# Runs the tests of a specific file
+npm run test:e2e -- tests/example.spec.ts
+# Runs the tests in debug mode
+npm run test:e2e -- --debug
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
+```

starter-apps/vue/vue-template/e2e/aboutPageBreadcrumbs.spec.js

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test'
+import { en } from '@/i18n/en.js'
+import { fr } from '@/i18n/fr.js'
+
+test('shows aboutTopic page breadcrumbs', async ({ page }) => {
+  await page.goto('/en/about/topic')
+
+  await expect(
+    page.locator('gcds-breadcrumbs').locator('router-link gcds-breadcrumbs-item')
+  ).toHaveText([en.home, en.about])
+
+  await page.click('text=Français')
+
+  await expect(
+    page.locator('gcds-breadcrumbs').locator('router-link gcds-breadcrumbs-item')
+  ).toHaveText([fr.home, fr.about])
+})

starter-apps/vue/vue-template/e2e/app.spec.js

@@ -0,0 +1,24 @@
+import { expect, test } from '@playwright/test'
+import { en } from '../src/i18n/en.js'
+import { fr } from '../src/i18n/fr.js'
+
+// See here how to get started:
+// https://playwright.dev/docs/intro
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/')
+  await expect(page.locator('gcds-heading')).toHaveText(en.homePage.heading)
+
+  await expect(page.locator('gcds-text').first()).toHaveText(en.homePage.paragraph)
+})
+
+test('switches to french', async ({ page }) => {
+  await page.goto('/')
+  await page.click('text=Français')
+  await expect(page.locator('gcds-heading')).toHaveText(fr.homePage.heading)
+})
+
+test('switches to english', async ({ page }) => {
+  await page.goto('/fr')
+  await page.click('text=English')
+  await expect(page.locator('gcds-heading')).toHaveText(en.homePage.heading)
+})

starter-apps/vue/vue-template/e2e/reportABug/reportABug.spec.js

@@ -0,0 +1,15 @@
+import { expect, test } from '@playwright/test'
+import { en } from '@/i18n/en.js'
+import { fr } from '@/i18n/fr.js'
+
+test('visit bug report page', async ({ page }) => {
+  await page.goto('/en/report-a-bug')
+  await expect(page.locator('gcds-heading').first()).toHaveText(en.reportABugPage.heading)
+  await expect(page.locator('gcds-text').first()).toHaveText(en.reportABugPage.intro)
+})
+
+test('switches to french', async ({ page }) => {
+  await page.goto('/en/report-a-bug')
+  await page.click('text=Français')
+  await expect(page.locator('gcds-heading').first()).toHaveText(fr.reportABugPage.heading)
+})

starter-apps/vue/vue-template/e2e/reportABug/reportABugErrors.spec.js

@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test'
+
+test('report bug form missing fields', async ({ page }) => {
+  await page.goto('/en/report-a-bug')
+  await page.click('text=Submit')
+  await expect(page.locator('gcds-error-message').first()).toHaveText(
+    'Enter information to continue.'
+  )
+})

starter-apps/vue/vue-template/e2e/reportABug/reportABugSubmission.spec.js

@@ -0,0 +1,19 @@
+import { expect, test } from '@playwright/test'
+import { en } from '@/i18n/en.js'
+
+test('report bug form', async ({ page }) => {
+  await page.goto('/en/report-a-bug')
+  await page.getByLabel('GC Design System Components Package and Version').fill('1.0.0')
+  await page.getByLabel('Title').fill('title')
+  await page.getByLabel('Current Behavior').fill('current behavior')
+  await page.getByLabel('Expected Behavior').fill('expected behavior')
+  await page.getByLabel('Steps to Reproduce').fill('steps to reproduce')
+  await page.getByLabel('Code Reproduction URL').fill('code reproduction url')
+  await page.getByLabel('System Info').fill('system info')
+  await page.getByLabel('Additional Information').fill('additional information')
+  await page.click('text=Submit')
+  await expect(page.locator('gcds-heading').locator('nth=0')).toHaveText(en.reportABugPage.heading)
+  await expect(page.locator('gcds-heading').locator('nth=1')).toHaveText(
+    en.reportABugPage.form.confirmation
+  )
+})

starter-apps/vue/vue-template/index.html

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link href="/favicon.ico" rel="icon">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+
+    <!-- GCDS required assets -->
+    <link href="https://fonts.googleapis.com" rel="preconnect" />
+    <link crossorigin href="https://fonts.gstatic.com" rel="preconnect" />
+
+    <!-- GC Design System Utility -->
+    <link href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-utility@latest/dist/gcds-utility.min.css" rel="stylesheet">
+
+    <!-- TODO: Change the title -->
+    <title>GC Design System Starter Template</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="/src/main.js" type="module"></script>
+  </body>
+</html>

starter-apps/vue/vue-template/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "exclude": ["node_modules", "dist"]
+}