@sbc-connect/nuxt-base 0.1.4 → 0.1.6

package/app/components/Connect/Spinner.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+const props = defineProps({
+  fullscreen: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: Number,
+    default: 75
+  }
+})
+
+const spinnerStyle = computed(() => ({
+  '--spinner-size': `${props.size}px`,
+  '--spinner-margin': `${props.size / -2}px`
+}))
+</script>
+
+<template>
+  <!-- eslint-disable tailwindcss/no-custom-classname -->
+  <Teleport v-if="fullscreen" to="body">
+    <div class="fixed inset-0 z-[999] h-screen w-screen bg-gray-100 opacity-50" />
+    <svg
+      class="spinner fixed"
+      viewBox="0 0 50 50"
+      :style="spinnerStyle"
+    >
+      <circle
+        class="path"
+        cx="25"
+        cy="25"
+        r="20"
+        fill="none"
+        stroke-width="5"
+      />
+    </svg>
+  </Teleport>
+  <svg
+    v-else
+    class="spinner absolute"
+    viewBox="0 0 50 50"
+    :style="spinnerStyle"
+  >
+    <circle
+      class="path"
+      cx="25"
+      cy="25"
+      r="20"
+      fill="none"
+      stroke-width="5"
+    />
+  </svg>
+</template>
+
+<style scoped>
+  .spinner {
+    animation: rotate 1.5s linear infinite;
+    z-index: 10000;
+    top: 50%;
+    left: 50%;
+    margin-top: var(--spinner-margin, -37.5px);
+    margin-left: var(--spinner-margin, -37.5px);
+    width: var(--spinner-size, 75px);
+    height: var(--spinner-size, 75px);
+    transform-origin: 50% 50%;
+  }
+
+  .spinner .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>

package/app/components/Connect/SystemBanner.vue

@@ -15,7 +15,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="bg-brandLight px-2">
+  <div class="bg-brand-inverted">
     <UAlert
       v-show="!!message && !close"
       class="py-0"
@@ -23,18 +23,18 @@ onMounted(async () => {
       :close="dismissible"
       close-icon="i-mdi-close"
       :ui="{
-        root: 'rounded-none bg-brandLight p-0 app-inner-container',
-        wrapper: 'bg-brandLight',
-        close: 'mt-2 text-neutralDark',
+        root: 'rounded-none bg-brand-inverted p-2 sm:px-4 app-inner-container',
+        wrapper: 'bg-brand-inverted',
+        close: 'mt-2 text-neutral-highlighted',
       }"
       @update:open="close = true"
     >
-      <!-- dismissible ? { class: 'pr-2 text-neutralDark' } : null -->
+      <!-- dismissible ? { class: 'pr-2 text-neutral-highlighted' } : null -->
       <template #description>
         <div class="flex gap-2 items-center py-2">
-          <UIcon class="size-7 shrink-0 text-neutralDark self-start" :name="icon" />
+          <UIcon class="size-7 shrink-0 text-neutral-highlighted self-start" :name="icon" />
           <!-- eslint-disable vue/no-v-html tailwindcss/no-custom-classname -->
-          <p class="vhtml text-neutralDark" v-html="message" />
+          <p class="vhtml text-neutral-highlighted" v-html="message" />
         </div>
       </template>
     </UAlert>
@@ -44,7 +44,7 @@ onMounted(async () => {
 <!-- must style globally for vhtml style to work  -->
 <style>
 .vhtml > a {
-  color: var(--ui-neutralDark);
+  color: var(--ui-neutral-highlighted);
   text-decoration: underline;
 }
 </style>

package/app/components/Connect/Textarea.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+const model = defineModel<string>({ required: true })
+
+defineProps<{
+  id: string
+  label: string
+  invalid?: boolean
+}>()
+</script>
+
+<template>
+  <UTextarea
+    :id
+    v-model.trim="model"
+    :data-testid="id"
+    placeholder="&nbsp;"
+    class="w-full grow"
+    :ui="{
+      base: invalid ? 'ring-0 shadow-input-error focus:shadow-input-error resize-none' : 'resize-none',
+    }"
+  >
+    <label
+      class="floating-label-textarea bg-shade w-[96%] flex-1 pt-1 -mt-1"
+      :class="invalid ? 'text-error' : ''"
+      :for="id"
+    >
+      {{ label }}
+    </label>
+  </UTextarea>
+</template>

package/app/components/Connect/Transition/Collapse.vue

@@ -0,0 +1,39 @@
+<template>
+  <Transition name="collapse">
+    <slot />
+  </Transition>
+</template>
+
+<style>
+.collapse-enter-active,
+.collapse-leave-active {
+  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+.collapse-enter-from,
+.collapse-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+.collapse-enter-to,
+.collapse-leave-from {
+  max-height: 1000px;
+  opacity: 1;
+}
+
+@media (prefers-reduced-motion) {
+  .collapse-enter-active,
+  .collapse-leave-active {
+    transition: max-height 0s ease-out, opacity 0s ease-out;
+  }
+  .collapse-enter-from,
+  .collapse-leave-to {
+    max-height: 0;
+    opacity: 0;
+  }
+  .collapse-enter-to,
+  .collapse-leave-from {
+    max-height: 1000px;
+    opacity: 1;
+  }
+}
+</style>

package/app/composables/useConnectModal.ts

@@ -0,0 +1,11 @@
+import { ConnectModal } from '#components'
+
+export const useConnectModal = () => {
+  const overlay = useOverlay()
+
+  const baseModal = overlay.create(ConnectModal)
+
+  return {
+    baseModal
+  }
+}

package/app/interfaces/connect-address.ts

@@ -0,0 +1,12 @@
+export interface ConnectAddress {
+  street: string
+  streetAdditional: string
+  city: string
+  region: string
+  postalCode: string
+  country: string
+  locationDescription: string
+  streetName?: string
+  streetNumber?: string
+  unitNumber?: string
+}

package/app/interfaces/connect-modal.ts

@@ -0,0 +1,5 @@
+import type { ButtonProps } from '@nuxt/ui'
+
+export interface ConnectModalButton extends ButtonProps {
+  shouldClose?: boolean
+}

package/app/layouts/ConnectBase.vue

@@ -1,15 +1,5 @@
 <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">
-          <slot />
-        </div>
-      </div>
-    </div>
-    <ConnectFooter />
-  </div>
+  <ConnectLayout>
+    <slot />
+  </ConnectLayout>
 </template>

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/whats-new.client.ts

@@ -1,5 +1,5 @@
 import { useStorage } from '@vueuse/core'
-import isEqual from 'lodash-es/isEqual'
+import { isEqual } from 'es-toolkit'
 
 export default defineNuxtPlugin({
   name: 'connect-whats-new-plugin',

package/app/spa-loading-template.html

@@ -1,39 +1,61 @@
-<div class="loader"></div>
-<style>
-.loader {
-  display: block;
-  position: fixed;
-  z-index: 1031;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 50px;
-  height: 50px;
-  box-sizing: border-box;
-  border: solid 5px transparent;
-  border-top-color: #1669bb;
-  border-left-color: #1669bb;
-  border-bottom-color: #efefef;
-  border-right-color: #efefef;
-  border-radius: 50%;
-  -webkit-animation: loader 400ms linear infinite;
-  animation: loader 400ms linear infinite;
-}
+<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;
+    }
 
-@-webkit-keyframes loader {
-  0% {
-    -webkit-transform: translate(-50%, -50%) rotate(0deg);
-  }
-  100% {
-    -webkit-transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-@keyframes loader {
-  0% {
-    transform: translate(-50%, -50%) rotate(0deg);
-  }
-  100% {
-    transform: translate(-50%, -50%) rotate(360deg);
-  }
-}
-</style>
+    .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/logFetchError.ts

@@ -0,0 +1,36 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function logFetchError(error: unknown, message: string) {
+  let status = 'Unknown Status'
+  let statusText = 'Unknown Status Text'
+  let hasMessage = false
+
+  if (error && typeof error === 'object' && 'response' in error && typeof (error as any).response === 'object') {
+    const response = (error as any).response
+
+    if ('status' in response && typeof response.status === 'number') {
+      status = response.status
+    }
+
+    if ('statusText' in response && typeof response.statusText === 'string') {
+      statusText = response.statusText
+    }
+
+    if (
+      'data' in error
+      && (error as any).data
+      && typeof (error as any).data === 'object'
+      && 'message' in (error as any).data
+    ) {
+      statusText = statusText || (error as any).data.message
+      hasMessage = (error as any).data.message !== undefined
+    }
+
+    console.error(
+      `${message}: ${status} - ${statusText} ${
+        hasMessage ? `--- ${JSON.stringify((error as any).data)}` : ''
+      }`
+    )
+  } else {
+    console.error(message)
+  }
+}

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

@@ -54,10 +54,11 @@ export default {
     }
   },
   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/modules/base-assets/index.ts

@@ -0,0 +1,30 @@
+import { defineNuxtModule, createResolver, installModule } from 'nuxt/kit'
+
+export default defineNuxtModule({
+  meta: {
+    name: 'base-assets',
+    configKey: 'baseAssets'
+  },
+  defaults: {},
+  async setup(_options, _nuxt) {
+    console.info('Setting up **base** assets module')
+    const resolver = createResolver(import.meta.url)
+
+    _nuxt.hook('nitro:config', async (nitroConfig) => {
+      nitroConfig.publicAssets ||= []
+      nitroConfig.publicAssets.push({
+        dir: resolver.resolve('./runtime/public'),
+        maxAge: 60 * 60 * 24 * 365
+      })
+    })
+
+    _nuxt.options.css.push(resolver.resolve('./runtime/assets/connect-base-tw.css'))
+    _nuxt.options.css.push(resolver.resolve('./runtime/assets/connect-base-layout.css'))
+    await installModule('@nuxt/ui')
+
+    _nuxt.options.alias = {
+      ..._nuxt.options.alias,
+      '#connect-theme': resolver.resolve('./runtime/assets/connect-base-tw.css')
+    }
+  }
+})