@sbc-connect/nuxt-base 0.1.3 → 0.1.4

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"
   >
     <nav
       class="app-inner-container px-2"
-      :aria-label="$t('ConnectHeader.navLabel')"
+      :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/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/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-gray-100/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-markBlue);
+  text-decoration: underline;
+}
+</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 px-2">
+    <UAlert
+      v-show="!!message && !close"
+      class="py-0"
+      :description="message"
+      :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',
+      }"
+      @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/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
+}

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/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,39 @@
+<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;
+}
+
+@-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>

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}`
+}