@sbc-connect/nuxt-base 0.1.3 → 0.1.5

package/app/components/Connect/Header/LogoHomeLink.vue

@@ -9,12 +9,12 @@ const localePath = useLocalePath()
     :class="[
       'flex items-center gap-4 rounded-md',
       'px-2 transition-colors duration-300',
-      'ease-in-out hover:bg-white/[0.1]',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-white',
+      'ease-in-out hover:bg-secondary/[0.1]',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-secondary',
     ]"
-    :aria-label="$t('ConnectHeader.homeLink')"
+    :aria-label="$t('connect.header.homeLink')"
   >
     <ConnectBCGovLogo />
-    <span class="text-base font-semibold text-white lg:text-lg"> {{ $t('ConnectHeader.title') }} </span>
+    <span class="text-base font-semibold text-secondary lg:text-lg"> {{ $t('connect.header.title') }} </span>
   </NuxtLink>
 </template>

package/app/components/Connect/Header/WhatsNew.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useStorage } from '@vueuse/core'
+import { ConnectSlideoverWhatsNew } from '#components'
+
+const state = useStorage<ConnectWhatsNewState>('connect-whats-new', { viewed: false, items: [] })
+const overlay = useOverlay()
+const slideover = overlay.create(ConnectSlideoverWhatsNew)
+
+function open() {
+  slideover.open({
+    items: state.value.items
+  })
+  state.value.viewed = true
+}
+</script>
+
+<template>
+  <UChip
+    :show="!state.viewed && state.items.length > 0"
+    color="error"
+    position="top-left"
+    inset
+    :ui="{
+      base: 'ring-(--ui-error)',
+    }"
+  >
+    <UButton
+      variant="ghost"
+      color="secondary"
+      class="px-2 py-1 text-sm"
+      :label="$t('connect.label.whatsNew')"
+      :aria-label="$t('connect.label.whatsNewAria', { count: state.viewed ? 0 : state.items.length })"
+      @click="open"
+    />
+  </UChip>
+</template>

package/app/components/Connect/Header/Wrapper.vue

@@ -2,11 +2,11 @@
   <header
     id="connect-header-wrapper"
     data-testid="connect-header-wrapper"
-    class="relative border-b-2 border-connect-yellow bg-connect-darkBlue dark:border-b dark:bg-connect-darkGray"
+    class="relative border-b-2 border-brandLight bg-brandDark p-2 sm:px-4"
   >
     <nav
-      class="app-inner-container px-2"
-      :aria-label="$t('ConnectHeader.navLabel')"
+      class="app-inner-container"
+      :aria-label="$t('connect.header.navLabel')"
     >
       <slot />
     </nav>

package/app/components/Connect/Header/index.vue

@@ -1,3 +1,18 @@
+<script setup lang="ts">
+const headerConfig = useAppConfig().connect.header
+</script>
+
 <template>
-  <ConnectHeaderBase />
+  <ConnectHeaderWrapper>
+    <div class="flex items-center justify-between">
+      <ConnectHeaderLogoHomeLink />
+      <ClientOnly>
+        <div class="flex gap-4">
+          <slot />
+          <ConnectHeaderWhatsNew v-if="headerConfig.whatsNew" />
+          <ConnectLocaleSelect v-if="headerConfig.localeSelect" />
+        </div>
+      </ClientOnly>
+    </div>
+  </ConnectHeaderWrapper>
 </template>

package/app/components/Connect/I18n/Helper.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const props = defineProps({
+  translationPath: { type: String, required: true }
+})
+
+const attrs = useAttrs()
+const { t } = useI18n()
+
+const textToDisplay = computed(() => {
+  const translationProps = {
+    ...attrs,
+    boldStart: '<strong>',
+    boldEnd: '</strong>',
+    italicStart: '<em>',
+    italicEnd: '</em>'
+  }
+  return t(props.translationPath, translationProps)
+})
+</script>
+
+<template>
+  <!-- eslint-disable-next-line vue/no-v-html -->
+  <span v-html="textToDisplay" />
+</template>

package/app/components/Connect/Input.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+const model = defineModel<string>({ required: true })
+
+defineProps<{
+  id: string
+  label: string
+  mask?: string
+  invalid?: boolean
+}>()
+</script>
+
+<template>
+  <UInput
+    :id
+    v-model.trim="model"
+    v-maska="mask"
+    :data-testid="id"
+    placeholder="&nbsp;"
+    class="w-full grow"
+    :ui="{
+      base: invalid ? 'ring-0 shadow-inputError focus:shadow-inputError' : '',
+    }"
+  >
+    <label
+      :for="id"
+      class="floating-label-input"
+      :class="invalid ? 'text-error' : ''"
+    >
+      {{ label }}
+    </label>
+  </UInput>
+</template>

package/app/components/Connect/LocaleSelect.vue

@@ -28,7 +28,7 @@ const items = computed((): DropdownMenuItem[] => {
     <UButton
       data-testid="locale-select-dropdown"
       icon="i-mdi-web"
-      :aria-label="$t('ConnectLocaleSelect.label')"
+      :aria-label="$t('connect.label.localeSelect')"
       size="lg"
       variant="ghost"
       color="secondary"

package/app/components/Connect/PageSection.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { ButtonProps } from '#ui/types'
+
+defineProps<{
+  heading?: {
+    label?: string
+    labelClass?: string
+    level?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+    icon?: string
+    iconClass?: string
+    ui?: string
+  }
+  uiBody?: string
+  actions?: ButtonProps[]
+}>()
+</script>
+
+<template>
+  <UCard
+    as="section"
+    class="w-full"
+    variant="outline"
+    :ui="{
+      header: heading?.ui ?? 'bg-shadeSecondary px-4 py-4 sm:px-4 rounded-t-md',
+      body: uiBody ?? 'p-0 sm:p-0',
+      footer: 'p-0 sm:p-0',
+    }"
+  >
+    <template v-if="heading?.label || $slots.header" #header>
+      <slot name="header">
+        <div class="flex items-center justify-between gap-2.5">
+          <component :is="heading?.level || 'h2'">
+            <div class="flex items-center gap-2.5">
+              <UIcon
+                v-if="heading?.icon"
+                :name="heading.icon"
+                :class="heading?.iconClass || 'size-6 shrink-0 text-primary'"
+              />
+              <span :class="heading?.labelClass || 'font-semibold text-neutralDark text-base'">
+                {{ heading?.label }}
+              </span>
+            </div>
+          </component>
+
+          <div class="flex items-center gap-2.5">
+            <UButton
+              v-for="(action, i) in actions"
+              :key="i"
+              v-bind="action"
+            />
+          </div>
+        </div>
+      </slot>
+    </template>
+    <slot />
+  </UCard>
+</template>

package/app/components/Connect/Slideover/WhatsNew.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const { $sanitize } = useNuxtApp()
+
+defineProps<{
+  items: ConnectWhatsNewItem[]
+}>()
+</script>
+
+<template>
+  <USlideover
+    :title="$t('connect.label.whatsNewSlideover')"
+    :description="$t('connect.text.whatsNewSlideoverDescription')"
+    :overlay="false"
+    :close="{
+      color: 'neutral',
+      variant: 'ghost',
+      class: 'cursor-pointer hover:bg-shadePrimary/50 focus-visible:bg-transparent focus-visible:ring-2 rounded-full',
+    }"
+    :ui="{
+      header: 'bg-brandLight',
+      title: 'text-brandDark',
+      body: 'flex-1 overflow-y-auto p-0 sm:p-0',
+      description: 'sr-only',
+    }"
+  >
+    <template #body>
+      <div class="overflow-y-auto text-neutral">
+        <div class="flex-1">
+          <ol v-if="items.length">
+            <li
+              v-for="item, i in items"
+              :key="i"
+              class="flex flex-col border-b border-gray-500 p-4 last:border-0"
+            >
+              <h3 class="text-lg font-bold">
+                {{ item.title }}
+              </h3>
+              <time class="text-sm">{{ item.date }}</time>
+              <!-- eslint-disable vue/no-v-html -->
+              <div
+                class="pt-3 vhtml"
+                v-html="$sanitize(item.description)"
+              />
+            </li>
+          </ol>
+          <div v-else class="flex justify-center py-10">
+            <span>{{ $t('connect.text.whatsNewSlideoverEmpty') }}</span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </USlideover>
+</template>
+
+<!-- must style globally for vhtml style to work  -->
+<style>
+.vhtml a {
+  color: var(--ui-mark);
+  text-decoration: underline;
+}
+</style>

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

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const ld = useConnectLaunchDarkly()
+const { $sanitize } = useNuxtApp()
+
+defineProps({
+  dismissible: { type: Boolean, default: false },
+  icon: { type: String, default: 'i-mdi-information' }
+})
+
+const close = ref(false)
+const message = ref('')
+onMounted(async () => {
+  message.value = $sanitize(await ld.getStoredFlag('banner-text', '', 'await'))
+})
+</script>
+
+<template>
+  <div class="bg-brandLight">
+    <UAlert
+      v-show="!!message && !close"
+      class="py-0"
+      :description="message"
+      :close="dismissible"
+      close-icon="i-mdi-close"
+      :ui="{
+        root: 'rounded-none bg-brandLight p-2 sm:px-4 app-inner-container',
+        wrapper: 'bg-brandLight',
+        close: 'mt-2 text-neutralDark',
+      }"
+      @update:open="close = true"
+    >
+      <!-- dismissible ? { class: 'pr-2 text-neutralDark' } : null -->
+      <template #description>
+        <div class="flex gap-2 items-center py-2">
+          <UIcon class="size-7 shrink-0 text-neutralDark self-start" :name="icon" />
+          <!-- eslint-disable vue/no-v-html tailwindcss/no-custom-classname -->
+          <p class="vhtml text-neutralDark" v-html="message" />
+        </div>
+      </template>
+    </UAlert>
+  </div>
+</template>
+
+<!-- must style globally for vhtml style to work  -->
+<style>
+.vhtml > a {
+  color: var(--ui-neutralDark);
+  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-inputError focus:shadow-inputError resize-none' : 'resize-none',
+    }"
+  >
+    <label
+      class="floating-label-textarea bg-shadePrimary w-[96%] flex-1 pt-1 -mt-1"
+      :class="invalid ? 'text-error' : ''"
+      :for="id"
+    >
+      {{ label }}
+    </label>
+  </UTextarea>
+</template>

package/app/composables/useConnectLaunchDarkly.ts

@@ -0,0 +1,177 @@
+import { initialize } from 'launchdarkly-js-client-sdk'
+import type { LDClient, LDFlagSet, LDOptions, LDContext } from 'launchdarkly-js-client-sdk'
+
+// state
+// Defined outside of composable, so they are created only once and shared
+const ldClient = shallowRef<LDClient | null>(null)
+const ldFlagSet = shallowRef<LDFlagSet>({})
+const ldInitialized = ref(false)
+const isInitializing = ref(false)
+
+/**
+ * Initializes the LaunchDarkly client with an anonymous context.
+*/
+function init(): void {
+  const rtc = useRuntimeConfig().public
+
+  // Prevent re-initialization
+  if (ldInitialized.value || isInitializing.value) {
+    return
+  }
+  // Prevent initialization if missing client ID
+  if (!rtc.ldClientId) {
+    console.error('LaunchDarkly: ldClientId is not configured.')
+    return
+  }
+
+  isInitializing.value = true
+
+  const ldContext: LDContext = {
+    kind: 'user',
+    key: 'anonymous',
+    anonymous: true,
+    appSource: rtc.appName
+  }
+
+  const options: LDOptions = {
+    streaming: false,
+    useReport: false,
+    diagnosticOptOut: true
+  }
+
+  try {
+    ldClient.value = initialize(rtc.ldClientId, ldContext, options)
+
+    ldClient.value.on('initialized', () => {
+      ldFlagSet.value = ldClient.value?.allFlags() || {}
+      ldInitialized.value = true
+      isInitializing.value = false
+      console.info('LaunchDarkly: Anonymous initialization complete.')
+    })
+
+    ldClient.value.on('error', (error) => {
+      console.error('LaunchDarkly: Initialization error.', error)
+      isInitializing.value = false
+    })
+  } catch (error) {
+    console.error('LaunchDarkly: Failed to initialize.', error)
+    isInitializing.value = false
+  }
+}
+
+/**
+ * Composable for the LaunchDarkly service.
+*/
+export const useConnectLaunchDarkly = () => {
+  // initialize only once
+  if (!ldInitialized.value && !isInitializing.value && import.meta.client) {
+    init()
+  }
+
+  /**
+   * Returns a flag's value. Can operate in two modes.
+   * @param name The name of the feature flag.
+   * @param defaultValue The value to use until the flag is loaded.
+   * @param mode - 'reactive' (default) returns a ref that updates automatically.
+   * 'await' returns a promise that resolves when the client is ready.
+   * @returns A readonly ref or a promise resolving to the flag's value.
+   */
+  function getFeatureFlag<T>(
+    name: string,
+    defaultValue: T,
+    mode: 'await'
+  ): Promise<T>
+  function getFeatureFlag<T>(
+    name: string,
+    defaultValue?: T,
+    mode?: 'reactive'
+  ): Readonly<Ref<T>>
+  function getFeatureFlag<T>(
+    name: string,
+    defaultValue: T,
+    mode: 'reactive' | 'await' = 'reactive'
+  ): Readonly<Ref<T>> | Promise<T> {
+    if (mode === 'await') {
+      if (!ldClient.value) {
+        return Promise.resolve(defaultValue)
+      }
+      return ldClient.value.waitUntilReady()
+        .then(() => ldClient.value ? ldClient.value.variation(name, defaultValue) : defaultValue)
+        .catch((error) => {
+          console.error(`LaunchDarkly: Error waiting for client while getting flag "${name}".`, error)
+          return defaultValue
+        })
+    }
+
+    // reactive mode
+    return readonly(computed(() => {
+      if (!ldClient.value || !ldInitialized.value) {
+        return defaultValue
+      }
+      return ldClient.value.variation(name, defaultValue)
+    }))
+  }
+
+  /**
+   * Returns a flag's value from the locally stored flag set. Can operate in two modes.
+   * @param name The name of the feature flag.
+   * @param defaultValue The value to use until the flag is loaded.
+   * @param mode - 'reactive' (default) returns a ref that updates automatically.
+   * 'await' returns a promise that resolves when the client is ready.
+   * @returns A readonly ref or a promise resolving to the flag's value.
+   */
+  async function getStoredFlag<T>(name: string, defaultValue: T, mode: 'await'): Promise<T>
+  function getStoredFlag<T>(name: string, defaultValue?: T, mode?: 'reactive'): Readonly<Ref<T>>
+  function getStoredFlag<T>(
+    name: string,
+    defaultValue: T,
+    mode: 'reactive' | 'await' = 'reactive'
+  ): Readonly<Ref<T>> | Promise<T> {
+    if (mode === 'await') {
+      if (!ldClient.value) {
+        return Promise.resolve(defaultValue)
+      }
+      return ldClient.value.waitUntilReady()
+        .then(() => ldFlagSet.value[name] ?? defaultValue)
+        .catch((error) => {
+          console.error(`LaunchDarkly: Error waiting for client while getting stored flag "${name}".`, error)
+          return defaultValue
+        })
+    }
+
+    // reactive mode
+    return readonly(computed(() => {
+      if (!ldInitialized.value) {
+        return defaultValue
+      }
+      return ldFlagSet.value[name] ?? defaultValue
+    }))
+  }
+
+  // TODO: or do we do this and then everytime the fn is called its required to use await?
+  // TODO: returning the computed means we dont need to add LD to middleware
+  // async function getStoredFlag(name: string): Promise<unknown> {
+  //   await ldClient.value?.waitUntilReady()
+  //   return ldFlagSet.value[name]
+  // }
+
+  /**
+   * Resets the LaunchDarkly state and closes the client connection.
+   */
+  const $reset = () => {
+    ldInitialized.value = false
+    isInitializing.value = false
+    ldClient.value?.close()
+    ldClient.value = null
+    ldFlagSet.value = {}
+  }
+
+  return {
+    getFeatureFlag,
+    getStoredFlag,
+    ldInitialized: readonly(ldInitialized),
+    ldFlagSet: readonly(ldFlagSet),
+    ldClient: readonly(ldClient),
+    $reset
+  }
+}

package/app/error.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { NuxtError } from '#app'
+
+const { t } = useI18n()
+const localePath = useLocalePath()
+
+const props = defineProps({
+  error: { type: Object as () => NuxtError, default: undefined }
+})
+
+// TODO: update with other error codes?
+const errorKey: string | number = props.error?.statusCode === 404 ? 404 : 'unknown'
+
+// cant use definePageMeta in error.vue
+useRoute().meta.hideBreadcrumbs = true
+
+useHead({
+  title: errorKey === 404 ? t('connect.page.error.404.title') : t('connect.page.error.unknown.title')
+})
+
+const errorObj = {
+  name: props.error?.name || '',
+  cause: props.error?.cause || '',
+  message: props.error?.message || '',
+  statusCode: props.error?.statusCode || '',
+  statusMessage: props.error?.statusMessage || '',
+  stack: props.error?.stack || '',
+  data: props.error?.data || ''
+}
+
+onMounted(() => {
+  console.error('Application Error: ', errorObj)
+})
+</script>
+
+<template>
+  <UApp :toaster="{ position: 'bottom-center' }">
+    <NuxtLayout name="connect-base">
+      <div class="m-auto flex flex-col items-center gap-4 h-full justify-center">
+        <h1>
+          {{ $t(`connect.page.error.${errorKey}.h1`) }}
+        </h1>
+        <p>{{ $t(`connect.page.error.${errorKey}.content`) }}</p>
+        <UButton
+          :label="$t('connect.label.goHome')"
+          icon="i-mdi-home"
+          size="xl"
+          :to="localePath('/')"
+        />
+      </div>
+    </NuxtLayout>
+  </UApp>
+</template>

package/app/interfaces/connect-breadcrumb.ts

@@ -0,0 +1,5 @@
+import type { BreadcrumbItem } from '#ui/types'
+
+export interface ConnectBreadcrumb extends BreadcrumbItem {
+  appendAccountId?: boolean
+}