@sbc-connect/nuxt-base 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @sbc-connect/nuxt-base
 
+## 0.4.0
+
+### Minor Changes
+
+- [#106](https://github.com/bcgov/connect-nuxt/pull/106) [`f5d34df`](https://github.com/bcgov/connect-nuxt/commit/f5d34df0bbb2b37cbeda8a9dd39c6bce098c564f) Thanks [@deetz99](https://github.com/deetz99)! - <br>
+  - ConnectModalError component
+  - getErrorStatus util
+  - getErrorMessage util
+
+## 0.3.0
+
+### Minor Changes
+
+- [#102](https://github.com/bcgov/connect-nuxt/pull/102) [`d714785`](https://github.com/bcgov/connect-nuxt/commit/d71478573f1fe11be34d5d588d68fb75eb5fd159) Thanks [@deetz99](https://github.com/deetz99)! - - ConnectTransitionFade component
+  - configure UContainer app config with default spacing and padding
+  - configure UAlert subtle/warning app config with correct bg styling
+
+### Patch Changes
+
+- [#104](https://github.com/bcgov/connect-nuxt/pull/104) [`5f1b383`](https://github.com/bcgov/connect-nuxt/commit/5f1b3839ed993654a7f20fe161047ba38ab86274) Thanks [@deetz99](https://github.com/deetz99)! - - change overflow-hidden to overflow-clip in main layout component, allowing position sticky to work correctly
+  - cancel and close i18n translations
+  - Type aliases for Dates
+
 ## 0.2.0
 
 ### Minor Changes

package/app/app.config.ts

@@ -19,7 +19,7 @@ export default defineAppConfig({
           color: 'warning',
           variant: 'subtle',
           class: {
-            root: 'text-highlighted bg-yellow-400/25 ring-2 ring-yellow-400',
+            root: 'py-4 px-6 relative bg-white text-highlighted ring-2 ring-brand-inverted before:content-[""] before:absolute before:inset-0 before:bg-brand-inverted/10 before:z-10',
             icon: 'text-warning',
             title: 'font-bold text-nuetral-highlighted',
             description: 'text-nuetral-highlighted'
@@ -166,6 +166,9 @@ export default defineAppConfig({
         }
       ]
     },
+    container: {
+      base: 'px-0 sm:px-0 lg:px-0 py-6 space-y-6 sm:py-10 sm:space-y-10'
+    },
     dropdownMenu: {
       slots: {
         content: 'min-w-32 max-h-[75dvh] shadow-lg rounded-sm',

package/app/components/Connect/Layout/Index.vue

@@ -12,7 +12,7 @@
     <slot name="bottomHeaders" />
     <main class="app-body px-2 sm:px-4">
       <slot name="body">
-        <div class="app-inner-container grow flex flex-col overflow-hidden">
+        <div class="app-inner-container grow flex flex-col overflow-clip">
           <slot />
         </div>
       </slot>

package/app/components/Connect/Modal/Error.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+// https://vue-i18n.intlify.dev/api/composition.html#te-key-locale
+const { t, te } = useI18n()
+
+interface ErrorModalProps {
+  error: unknown
+  i18nPrefix: string
+  buttons?: ConnectModalButton[]
+  contactInfo?: VNode
+  preferErrorMessage?: boolean
+}
+
+const {
+  error,
+  i18nPrefix,
+  buttons = [
+    { label: useNuxtApp().$i18n.t('label.close'), shouldClose: true }
+  ],
+  preferErrorMessage = false
+} = defineProps<ErrorModalProps>()
+defineEmits<{ close: [] }>()
+
+const status = getErrorStatus(error)
+const message = getErrorMessage(error)
+
+const titleKey = `${i18nPrefix}.${status}.title`
+const descKey = `${i18nPrefix}.${status}.description`
+
+const title = te(titleKey) ? t(titleKey) : t(`${i18nPrefix}.undefined.title`)
+const i18nDescription = te(descKey) ? t(descKey) : t(`${i18nPrefix}.undefined.description`)
+
+const description = (preferErrorMessage && message)
+  ? message
+  : i18nDescription
+</script>
+
+<template>
+  <UModal
+    id="connect-error-modal"
+    overlay
+    :title
+    :description
+    :dismissible="false"
+  >
+    <template #content>
+      <div class="p-10 flex flex-col gap-6">
+        <h2 class="text-2xl font-semibold text-neutral-highlighted">
+          {{ title }}
+        </h2>
+        <p>{{ description }}</p>
+        <component :is="contactInfo" v-if="contactInfo" />
+        <div class="flex flex-wrap items-center justify-center gap-4">
+          <template
+            v-for="button in buttons"
+            :key="button.label"
+          >
+            <UButton
+              v-if="button.shouldClose"
+              v-bind="button"
+              size="xl"
+              class="w-full justify-center sm:w-min sm:justify-normal"
+              @click="$emit('close')"
+            />
+            <UButton
+              v-else
+              v-bind="button"
+              size="xl"
+              class="w-full justify-center sm:w-min sm:justify-normal"
+            />
+          </template>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

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

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

package/app/composables/useConnectModal.ts

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

package/app/types/dates.ts

@@ -0,0 +1,17 @@
+/**
+ * ISO date string (YYYY-MM-DD), assumed to be in Pacific timezone.
+ * @example "2021-12-31"
+ */
+export type IsoDatePacific = string
+
+/**
+  * API date-time string (YYYY-MM-DDTHH:MM:SS[.MMMMMM]+00.00), assumed to be in UTC.
+  * @example "2022-05-09T16:26:14.839032+00:00"
+  */
+export type ApiDateTimeUtc = string
+
+/**
+  * Formatted date-time string with explicit GMT timezone (ie, UTC).
+  * @example "Tue, 19 Apr 2022 16:40:18 GMT"
+  */
+export type FormattedDateTimeGmt = string

package/app/utils/getErrorMessage.ts

@@ -0,0 +1,42 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+/**
+ * Safely extracts an error message from an unknown error object.
+ *
+ * The search order (Highest Priority to Lowest) is:
+ * 1. Current object's 'message' (must be a non-empty string).
+ * 2. Current object's 'detail' (must be a non-empty string).
+ * 3. Recursively searches the 'error.data.rootCause' object.
+ * 4. Recursively searches the 'error.data' object.
+ *
+ * This function will return the first valid, non-empty string message found.
+ *
+ * @param error - The error object (unknown).
+ * @returns The error message if found, else 'undefined'.
+*/
+export function getErrorMessage(error: unknown): string | undefined {
+  if (error && typeof error === 'object') {
+    const errorObject = error as Record<string, any>
+
+    const message = errorObject.message
+    if (message && typeof message === 'string' && message.length > 0) {
+      return message
+    }
+    const detail = errorObject.detail
+    if (detail && typeof detail === 'string' && detail.length > 0) {
+      return detail
+    }
+
+    const rootCauseMessage = getErrorMessage(errorObject?.data?.rootCause)
+    if (rootCauseMessage) {
+      return rootCauseMessage
+    }
+
+    const dataMessage = getErrorMessage(errorObject?.data)
+    if (dataMessage) {
+      return dataMessage
+    }
+  }
+
+  return undefined
+}

package/app/utils/getErrorStatus.ts

@@ -0,0 +1,37 @@
+/**
+ * Safely extracts the HTTP status code from a thrown error.
+ *
+ * This provides a reliable way to get a status code from an `unknown` error type.
+ *
+ * @param error - The error object to inspect. It can be of any type.
+ * @returns The numeric HTTP status code if found, otherwise `undefined`.
+ *
+ * @example
+ * getErrorStatus({ response: { status: 404 } }); // returns 404
+ *
+ * @example
+ * getErrorStatus({ statusCode: 403 }); // returns 403
+ *
+ * @example
+ * getErrorStatus(new Error("Network failed")); // returns undefined
+*/
+export function getErrorStatus(error: unknown): number | undefined {
+  // check if error is valid object
+  if (
+    error
+    && typeof error === 'object'
+    && ('statusCode' in error || 'response' in error)
+  ) {
+    // handle case where error.response.status
+    if ('response' in error && error.response && typeof error.response === 'object' && 'status' in error.response) {
+      return error.response.status as number
+    }
+    // handle case where no error.response.status, fallback to error.statusCode
+    if ('statusCode' in error) {
+      return error.statusCode as number
+    }
+  }
+
+  // return undefined if no status or statusCode
+  return undefined
+}

package/i18n/locales/en-CA.ts

@@ -21,6 +21,8 @@ export default {
       appVersion: 'App Version',
       bcApp: 'A BC Online Application',
       bcGovLogo: 'Government of British Columbia Logo',
+      cancel: 'Cancel',
+      close: 'Close',
       contactInformation: 'Contact Information',
       copyright: 'Copyright',
       disclaimer: 'Disclaimer',

package/modules/base-assets/runtime/assets/connect-base-tw.css

@@ -38,6 +38,7 @@
   --ui-shade-highlighted: var(--color-blue-50);
   --ui-shade-warning: #FAE9E9;
   --ui-radius: 0.1667rem;
+  --ui-container: var(--container-bcGovLg);
 }
 
 /* FUTURE: add dark themed colours (currently set to be the same) */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",