@sbc-connect/nuxt-base 0.1.3 → 0.1.5

package/app/interfaces/connect-whatsnew.ts

@@ -0,0 +1,14 @@
+export interface ConnectWhatsNewItem {
+  app: string
+  date: string
+  description: string
+  id: number
+  priority: boolean
+  read: boolean
+  title: string
+}
+
+export interface ConnectWhatsNewState {
+  viewed: boolean
+  items: ConnectWhatsNewItem[]
+}

package/app/layouts/{default.vue → ConnectBase.vue}

@@ -1,6 +1,8 @@
 <template>
   <div class="app-container">
     <ConnectHeader />
+    <ConnectSystemBanner />
+    <ConnectBreadcrumb />
     <div class="app-inner-container app-body">
       <div class="flex flex-col lg:flex-row lg:gap-6 grow">
         <div class="grow max-w-full overflow-hidden">
@@ -8,5 +10,6 @@
         </div>
       </div>
     </div>
+    <ConnectFooter />
   </div>
 </template>

package/app/plugins/launchdarkly.client.ts

@@ -0,0 +1,9 @@
+// import { LDPlugin } from 'launchdarkly-vue-client-sdk'
+
+// export default defineNuxtPlugin({
+//   name: 'connect-launchdarkly-plugin',
+//   parallel: true,
+//   setup(nuxtApp) {
+//     nuxtApp.vueApp.use(LDPlugin, { deferInitialization: true })
+//   }
+// })

package/app/plugins/maska.client.ts

@@ -0,0 +1,10 @@
+// https://beholdr.github.io/maska/v3/#/vue
+import { vMaska } from 'maska/vue'
+
+export default defineNuxtPlugin({
+  name: 'core-maska-plugin',
+  parallel: true,
+  setup(nuxtApp) {
+    nuxtApp.vueApp.directive('maska', vMaska)
+  }
+})

package/app/plugins/sanitize.client.ts

@@ -0,0 +1,13 @@
+import DOMPurify from 'dompurify'
+
+export default defineNuxtPlugin({
+  name: 'connect-sanitize-plugin',
+  parallel: true,
+  setup() {
+    return {
+      provide: {
+        sanitize: DOMPurify.sanitize
+      }
+    }
+  }
+})

package/app/plugins/whats-new.client.ts

@@ -0,0 +1,45 @@
+import { useStorage } from '@vueuse/core'
+import isEqual from 'lodash-es/isEqual'
+
+export default defineNuxtPlugin({
+  name: 'connect-whats-new-plugin',
+  parallel: true,
+  setup(nuxtApp) {
+    // exit early if whats new === false
+    const whatsNew = useAppConfig().connect.header.whatsNew
+    if (!whatsNew) {
+      return
+    }
+    const rtc = useRuntimeConfig().public
+    const url = rtc.statusApiUrl + rtc.statusApiVersion
+
+    // load whats new only once when app mounts
+    nuxtApp.hook('app:mounted', async () => {
+    // set default localStorage state
+      const state = useStorage<ConnectWhatsNewState>(
+        'connect-whats-new', // storage key
+        { viewed: false, items: [] }, // default value
+        localStorage, // could change this to sessionStorage
+        { mergeDefaults: true } // merge anything already in localStorage with default value
+      )
+
+      try {
+        // fetch items
+        const res = await $fetch<ConnectWhatsNewItem[]>(`${url}/whatsnew`, {
+          parseResponse: JSON.parse, // required to parse JSON correctly
+          headers: {
+            'App-Name': rtc.appName
+          }
+        })
+
+        // only update value if new items exist
+        if (!isEqual(state.value.items, res) && res.length > 0) {
+          state.value.items = res
+          state.value.viewed = false
+        }
+      } catch {
+      // silently handle errors
+      }
+    })
+  }
+})

package/app/spa-loading-template.html

@@ -0,0 +1,61 @@
+<head>
+  <title>Loading...</title>
+  <style>
+    .loading-container {
+      position: fixed;
+      inset: 0;
+      z-index: 9999;
+      background-color: rgba(241, 243, 245, 0.8);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .loader {
+      display: block;
+      width: 75px;
+      height: 75px;
+      animation: rotate 1.5s linear infinite;
+      transform-origin: 50% 50%;
+    }
+
+    .loader .path {
+      stroke: #1669bb;
+      stroke-linecap: round;
+      animation: dash 1.25s ease-in-out infinite;
+    }
+
+    @keyframes rotate {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+
+    @keyframes dash {
+      0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+      }
+      50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+      }
+      100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+      }
+    }
+  </style>
+</head>
+<div class="loading-container">
+  <svg class="loader" viewBox="0 0 50 50">
+    <circle
+      class="path"
+      cx="25"
+      cy="25"
+      r="20"
+      fill="none"
+      stroke-width="5"
+    />
+  </svg>
+</div>

package/app/types/base-app-config.d.ts

@@ -0,0 +1,15 @@
+declare module '@nuxt/schema' {
+  interface AppConfigInput {
+    connect?: {
+      header?: {
+        localeSelect?: boolean
+        whatsNew?: boolean
+      }
+      footer?: {
+        versions?: string[]
+      }
+    }
+  }
+}
+
+export {}

package/app/types/base-page-meta.d.ts

@@ -0,0 +1,8 @@
+declare module '#app' {
+  interface PageMeta {
+    breadcrumbs?: ConnectBreadcrumb[]
+    hideBreadcrumbs?: boolean
+  }
+}
+
+export {}

package/app/utils/appendUrlParam.ts

@@ -0,0 +1,4 @@
+export function appendUrlParam(url: string, key: string, value: string | number) {
+  const separator = url.includes('?') ? '&' : '?'
+  return `${url}${separator}${key}=${value}`
+}

package/app/utils/parseSpecialCharacters.ts

@@ -0,0 +1,25 @@
+/**
+ * Parses a string to decode HTML entities and remove HTML tags.
+ *
+ * @param text The string to parse.
+ * @param fallback The fallback text to return if the input is null or undefined.
+ * @returns The sanitized string.
+ */
+export function parseSpecialCharacters(text: string | undefined | null, fallback = 'N/A'): string {
+  // Return fallback text if the input is null or undefined.
+  if (text === null || text === undefined) {
+    return fallback
+  }
+
+  const inputText = String(text)
+
+  try {
+    const parser = new DOMParser()
+    const doc = parser.parseFromString(inputText, 'text/html')
+
+    return doc.body.textContent || fallback
+  } catch (error) {
+    console.error(`Error parsing special characters in: ${inputText}`, error)
+    return fallback
+  }
+}

package/app/utils/setBreadcrumbs.ts

@@ -0,0 +1,5 @@
+export function setBreadcrumbs(breadcrumbs: ConnectBreadcrumb[]) {
+  const route = useRoute()
+  // @ts-expect-error - Type instantiation is excessively deep and possibly infinite.
+  route.meta.breadcrumbs = breadcrumbs
+}

package/i18n/locales/en-CA.ts

@@ -1,95 +1,64 @@
-/* eslint-disable max-len */
 export default {
-  btn: {
-    appVersion: 'App Version',
-    bcRegHome: 'BC Registries Home',
-    createAccount: 'Create Account',
-    editProfile: 'Edit Profile',
-    logout: 'Log out',
-    login: 'Log in',
-    accountInfo: 'Account Info',
-    teamMembers: 'Team Members',
-    transactions: 'Transactions',
-    notifications: {
-      main: 'Notifications',
-      aria: 'Notifications, {count} New'
+  /* Ordering should be alphabetical unless otherwise specified */
+  connect: {
+    breadcrumb: {
+      /* Only include breadcrumb values that extended apps may overwrite */
+      arialabel: 'Breadcrumb',
+      default: 'Service BC Connect'
     },
-    accountOptionsMenu: 'Account Options Menu',
-    whatsNew: "What's New",
-    mainMenu: 'Main menu',
-    goHome: 'Go Home'
-  },
-  label: {
-    accountSettings: 'Account Settings',
-    bcRegOLServices: 'BC Registries and Online Services',
-    switchAccount: 'Switch Account',
-    selectLoginMethod: 'Select log in method',
-    bcsc: 'BC Services Card',
-    bceid: 'BCeID',
-    idir: 'IDIR',
-    whatsNewSlideover: "What's New at BC Registries"
-  },
-  notifications: {
-    none: 'No Notifications',
-    teamMemberApproval: '{count} team member requires approval to access this account. | {count} team members require approval to access this account.'
-  },
-  ConnectFooter: {
-    navLabel: 'Useful Links', // <nav> aria-label
-    home: 'Home',
-    releaseNotes: 'Release Notes',
-    fees: 'Fees',
-    disclaimer: 'Disclaimer',
-    privacy: 'Privacy',
-    ally: 'Accessibility',
-    copyright: 'Copyright',
-    bcApp: 'A BC Online Application'
-  },
-  ConnectHeader: {
-    title: 'Service BC Connect',
-    logoBtnLabel: 'Home', // <img> link aria-label
-    navLabel: 'Main Navigation', // <nav> aria-label
-    homeLink: 'Home'
-  },
-  ConnectBCGovLogo: {
-    alt: 'Government of British Columbia Logo' // <img> alt
-  },
-  ConnectLocaleSelect: {
-    // aria-label
-    label: 'Select a Language, current language: English'
-  },
-  ConnectBreadcrumb: {
-    default: 'Service BC Connect',
-    backBtn: 'Go Back',
-    arialabel: 'Breadcrumb'
-  },
-  ConnectPage: {
-    error: {
-      404: {
-        title: 'Page Not Found - Service BC Connect',
-        h1: '404 Page Not Found',
-        content: 'This page could not be found or does not exist.'
-      },
-      unknown: {
-        title: 'Unknown Error - Service BC Connect',
-        h1: 'Unknown Error',
-        content: 'An unknown error occured, please refresh the page or try again later.'
+    footer: {
+      /* Only include footer values that extended apps may overwrite */
+      navLabel: 'Useful Links' // <nav> aria-label
+    },
+    header: {
+      /* Only include header values that extended apps may overwrite */
+      homeLink: 'Home', // aria-label
+      navLabel: 'Main Navigation', // <nav> aria-label
+      title: 'Service BC Connect'
+    },
+    label: {
+      accessibility: 'Accessibility',
+      appVersion: 'App Version',
+      bcApp: 'A BC Online Application',
+      bcGovLogo: 'Government of British Columbia Logo',
+      copyright: 'Copyright',
+      disclaimer: 'Disclaimer',
+      fees: 'Fees',
+      goBack: 'Go Back',
+      goHome: 'Go Home',
+      home: 'Home',
+      localeSelect: 'Select a Language, current language: English',
+      privacy: 'Privacy',
+      releaseNotes: 'Release Notes',
+      whatsNew: "What's New",
+      whatsNewAria: "What's New, {count} unread",
+      whatsNewSlideover: "What's New at BC Registries"
+    },
+    page: {
+      error: {
+        404: {
+          title: 'Page Not Found - Service BC Connect',
+          h1: '404 Page Not Found',
+          content: 'This page could not be found or does not exist.'
+        },
+        unknown: {
+          title: 'Unknown Error - Service BC Connect',
+          h1: 'Unknown Error',
+          content: 'An unknown error occured, please refresh the page or try again later.'
+        }
       }
-    }
-  },
-  ConnectModalSessionExpiring: {
-    title: 'Session Expiring Soon',
-    content: 'Your session is about to expire due to inactivity. You will be logged out in {boldStart}0{boldEnd} seconds. Press any key to continue your session. | Your session is about to expire due to inactivity. You will be logged out in {boldStart}1{boldEnd} second. Press any key to continue your session. | Your session is about to expire due to inactivity. You will be logged out in {boldStart}{count}{boldEnd} seconds. Press any key to continue your session.',
-    sessionExpired: 'Session Expired',
-    continueBtn: {
-      main: 'Continue Session',
-      aria: 'Your session is about to expire, press any key to continue your session.'
+    },
+    text: {
+      whatsNewSlideoverDescription: ' ',
+      whatsNewSlideoverEmpty: 'No new items.'
     }
   },
   test: {
-    i18nBold: {
+    i18n: {
       strong: 'This should have {boldStart} bold {boldEnd} text',
       strongWithProps: 'This should have {boldStart} bold {boldEnd} text and allow a {prop}',
-      italic: 'Italic test {italicStart} goes here {italicEnd}.'
+      italic: 'Italic test {italicStart} goes here {italicEnd}.',
+      computed: 'This text will be updated. Updated {boldStart}{count}{boldEnd} times.'
     }
   }
 }

package/i18n/locales/fr-CA.ts

@@ -1,7 +1,39 @@
 /* eslint-disable max-len */
 export default {
+  /* Ordering should be alphabetical unless otherwise specified */
+  connect: {
+    breadcrumb: {
+      /* Only include breadcrumb values that extended apps may overwrite */
+      arialabel: "Fil d'Ariane",
+      default: 'Service Connect CB'
+    },
+    footer: {
+      /* Only include footer values that extended apps may overwrite */
+      navLabel: 'Liens utiles' // <nav> aria-label
+    },
+    header: {
+      /* Only include header values that extended apps may overwrite */
+      homeLink: 'Accueil', // aria-label
+      navLabel: 'Navigation principale', // <nav> aria-label
+      title: 'Service Connect CB'
+    },
+    label: {
+      accessibility: 'Accessibilité',
+      appVersion: "Version de l'Application",
+      bcApp: 'Une application en ligne CB',
+      bcGovLogo: 'Logo du gouvernement de la Colombie-Britannique',
+      copyright: "Droits d'auteur",
+      disclaimer: 'Clause de non-responsabilité',
+      fees: 'Frais',
+      goBack: 'Retour',
+      home: 'Accueil',
+      localeSelect: 'Sélectionnez une langue, langue courante: Français',
+      privacy: 'Confidentialité',
+      releaseNotes: 'Notes de Version'
+    },
+    text: {}
+  },
   btn: {
-    appVersion: "Version de l'Application",
     bcRegHome: 'Accueil des Registres de la CB',
     createAccount: 'Créer un Compte',
     editProfile: 'Editer le Profil',
@@ -33,35 +65,6 @@ export default {
     none: 'Aucune Notification',
     teamMemberApproval: "{count} membre de l'équipe doit être approuvé pour accéder à ce compte. | {count} membres de l'équipe doivent être approuvés pour accéder à ce compte."
   },
-  ConnectFooter: {
-    navLabel: 'Liens utiles', // <nav> aria-label
-    home: 'Accueil',
-    releaseNotes: 'Notes de Version',
-    fees: 'Frais',
-    disclaimer: 'Clause de non-responsabilité',
-    privacy: 'Confidentialité',
-    ally: 'Accessibilité',
-    copyright: "Droits d'auteur",
-    bcApp: 'Une application en ligne CB'
-  },
-  ConnectHeader: {
-    title: 'Service Connect CB',
-    logoBtnLabel: 'Accueil', // <img> link aria-label
-    navLabel: 'Navigation principale', // <nav> aria-label
-    homeLink: 'Home'
-  },
-  ConnectBCGovLogo: {
-    alt: 'Logo du gouvernement de la Colombie-Britannique' // <img> alt
-  },
-  ConnectLocaleSelect: {
-    // aria-label
-    label: 'Sélectionnez une langue, langue courante: Français'
-  },
-  ConnectBreadcrumb: {
-    default: 'Service Connect CB',
-    backBtn: 'Retour',
-    arialabel: "Fil d'Ariane"
-  },
   ConnectPage: {
     error: {
       404: {

package/modules/assets/index.ts

@@ -18,7 +18,7 @@ export default defineNuxtModule<ModuleOptions>({
 
     _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-tw.css'))
     _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-layout.css'))
-    _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-main.css'))
+    // _nuxt.options.css.push(resolver.resolve('./runtime/assets/core-main.css'))
     await installModule('@nuxt/ui')
   }
 })

package/modules/assets/runtime/assets/core-tw.css

@@ -1,15 +1,63 @@
-@reference "tailwindcss";
-@reference "@nuxt/ui";
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@source "../../../../app/";
 
 /* Customize Nuxt UI default tokens */
+/* Follows https://sites.google.com/bcdevexchange.org/designsystem/foundation-styles/colours */
 :root {
-  --ui-error: var(--color-connect-error);
+  --ui-error: var(--color-red-600);
+  --ui-primary: var(--color-blue-500);
+  --ui-secondary: white;
+  --ui-success: var(--color-green-600);
+  --ui-warning: #F8661A;
+  /* Custom themes */
+  --ui-brandDark: var(--color-midnightBlue-900);
+  --ui-brandLight: var(--color-yellow-400);
+  --ui-lineDark: #6F7780;
+  --ui-lineLight: var(--color-gray-300);
+  --ui-lineSpecial: #899EB2;
+  --ui-mark: #1A5A96;
+  --ui-markHover: #0000EE;
   --ui-neutral: var(--color-gray-700);
+  --ui-neutralDark: var(--color-gray-900);
+  --ui-neutralLight: #757575;
+  --ui-shadeCaution: #FFF7E3;
+  --ui-shadeLight: white;
+  --ui-shadeNew: #E8F5E9;
+  --ui-shadePrimary: var(--color-gray-100);
+  --ui-shadeSecondary: #E2E8EE;
+  --ui-shadeSpecial: var(--color-blue-50);
+  --ui-shadeWarning: #FAE9E9;
+  --ui-radius: 0.1667rem;
+}
+
+/* FUTURE: add dark themed colours (currently set to be the same) */
+.dark {
+  --ui-error: var(--color-red-600);
   --ui-primary: var(--color-blue-500);
   --ui-secondary: white;
   --ui-success: var(--color-green-600);
   --ui-warning: #F8661A;
-  --ui-radius: 0.25rem;
+  /* Custom themes */
+  --ui-brandDark: var(--color-midnightBlue-900);
+  --ui-brandLight: var(--color-yellow-400);
+  --ui-lineDark: #6F7780;
+  --ui-lineLight: var(--color-gray-300);
+  --ui-lineSpecial: #899EB2;
+  --ui-mark: #1A5A96;
+  --ui-markHover: #0000EE;
+  --ui-neutral: var(--color-gray-700);
+  --ui-neutralDark: var(--color-gray-900);
+  --ui-neutralLight: #757575;
+  --ui-shadeCaution: #FFF7E3;
+  --ui-shadeLight: white;
+  --ui-shadeNew: #E8F5E9;
+  --ui-shadePrimary: var(--color-gray-100);
+  --ui-shadeSecondary: #E2E8EE;
+  --ui-shadeSpecial: var(--color-blue-50);
+  --ui-shadeWarning: #FAE9E9;
+  --ui-radius: 0.1667rem;
 }
 
 @theme static {
@@ -19,35 +67,16 @@
   /* widths */
   --container-bcGovMd: 1020px;
   --container-bcGovLg: 1360px;
-  --container-bcGovInput: 600px;
+  --container-input: 600px;
 
   /* list style types */
   --marker-alpha: lower-alpha;
   --marker-upper-alpha: upper-alpha;
 
   /* box shadow */
-  --shadow-bcGovInput: inset 0 -2px 0 0px #1669bb;
-
-  /* COLOURS */
-  /* these colours are as defined in styleguide: */
-  /* https://preview.uxpin.com/73eb31e6346bc2863a066f02218a3af289325619#/pages/138840439/simulate/sitemap?mode=i */
-  /* for more details see previous link */
-  --color-connect-darkBlue: var(--color-midnightBlue-900);
-  --color-connect-lightBlue: var(--color-blue-50);
-  --color-connect-darkGray: var(--color-gray-900);
-  --color-connect-midGray: var(--color-gray-700);
-  --color-connect-lightGray: #757575;
-  --color-connect-yellow: var(--color-yellow-400);
-  /* Are below used? */
-  /* --color-bcGovColor-markBlue: #1a5a96; */
-  /* --color-bcGovColor-markBlueHover: #0000EE; */
-  --color-connect-nonClickable: var(--color-blue-350);
-  --color-connect-gray1: var(--color-gray-100);
-  --color-connect-gray2: #E2E8EE;
-  /* LINES */
-  --color-connect-hairlinesOnWhite: var(--color-gray-300);
-  --color-connect-specialityDottedLines: #899EB2;
-  --color-connect-formFieldLines: #6F7780;
+  --shadow-input: inset 0 -1px 0 0px var(--ui-neutral);
+  --shadow-inputFocus: inset 0 -2px 0 0px var(--ui-primary);
+  --shadow-inputError: inset 0 -2px 0 0px var(--ui-error);
 
   /* GRAY */
   --color-gray-50: #f8f9fa;
@@ -186,7 +215,7 @@ body {
   h2,
   h3,
   h4 {
-    @apply text-gray-900;
+    @apply text-neutralDark;
   }
 
   h1,
@@ -213,20 +242,20 @@ body {
   }
 
   p {
-    @apply font-normal text-connect-midGray;
+    @apply font-normal text-neutral;
   }
 
   td,
   th {
-    @apply text-gray-900 text-sm;
+    @apply text-neutralDark text-sm;
   }
 
   /* floating labels */
   .floating-label-input {
-    @apply pointer-events-none absolute left-0 top-1 text-gray-900 text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-focus:translate-none peer-focus:text-blue-500;
+    @apply pointer-events-none absolute left-0 top-3 text-neutralDark transition-all motion-reduce:transition-none duration-200 text-xs font-medium px-2.5 peer-focus:top-3 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 -translate-y-1/2 peer-focus:text-primary;
   }
   
   .floating-label-textarea {
-    @apply pointer-events-none absolute left-0 top-1 text-gray-900 text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-blue-500;
+    @apply pointer-events-none absolute left-0 top-1 text-neutralDark text-xs font-medium px-2.5 transition-all duration-200 peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-primary;
   }
 }