@sbc-connect/nuxt-base 0.1.2 → 0.1.4

package/.env.example

@@ -1 +1,11 @@
-NUXT_BASE_URL="http://localhost:3000/"
+# Web Urls
+NUXT_PUBLIC_BASE_URL="http://localhost:3000/"
+NUXT_PUBLIC_REGISTRY_HOME_URL="https://dev.bcregistry.gov.bc.ca/"
+
+# API Urls
+# Status API
+NUXT_PUBLIC_STATUS_API_URL="https://status-api-dev.apps.gold.devops.gov.bc.ca"
+NUXT_PUBLIC_STATUS_API_VERSION="/api/v1"
+
+# LaunchDarkly
+NUXT_PUBLIC_LD_CLIENT_ID=""

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # @sbc-connect/nuxt-base
 
+## 0.1.4
+
+### Patch Changes
+
+- [#18](https://github.com/bcgov/connect-nuxt/pull/18) [`90f240f`](https://github.com/bcgov/connect-nuxt/commit/90f240fd789a5286ded5df710bddd6dc953bcba5) Thanks [@deetz99](https://github.com/deetz99)! - **Feat: Whats New**
+
+  - fetch whats new inside a plugin
+  - whats new header button
+  - whats new slideover component
+  - whats new plugin tests
+  - fix eslint to ignore playwright reports
+  - whats new items tracked in local storage to display button chip or not
+
+  issue: bcgov/entity#29334
+
+- [#15](https://github.com/bcgov/connect-nuxt/pull/15) [`0fb8c54`](https://github.com/bcgov/connect-nuxt/commit/0fb8c54e059d78b246b80a03f049d075b7bbcf72) Thanks [@deetz99](https://github.com/deetz99)! - - add spa-loading-template
+
+  - add error.vue
+  - add html attrs to app.vue
+  - add launch darkly composable & start tests
+  - add Banner component
+  - add iconify dep and icons to client bundle
+  - add test:unit:watch command to run vitest in watch mode
+  - update vitest config to search nested folders
+  - update --ui-radius var so rounded-md is 0.25rem
+  - remove core main css file causing duplicate fonts
+  - add html sanitizer plugin
+
+  issue: bcgov/entity#29334
+
+- [#16](https://github.com/bcgov/connect-nuxt/pull/16) [`9b8c225`](https://github.com/bcgov/connect-nuxt/commit/9b8c225a011e3c89c9b490e93a554f55a4e29b78) Thanks [@kialj876](https://github.com/kialj876)! - - add base header components (logo, localeSelect, wrapper)
+
+  - add footer component
+  - appendUrlParam util
+
+  issue: bcgov/entity#29334
+
+## 0.1.3
+
+### Patch Changes
+
+- [#9](https://github.com/bcgov/connect-nuxt/pull/9) [`e841fde`](https://github.com/bcgov/connect-nuxt/commit/e841fde27630d63efb2c152cd78d92b1193d1d5e) Thanks [@kialj876](https://github.com/kialj876)! - Add Nuxt back as a dev dependency
+
+- [#8](https://github.com/bcgov/connect-nuxt/pull/8) [`c85ebfc`](https://github.com/bcgov/connect-nuxt/commit/c85ebfc879e19cce307b109c9d38044f71f482d2) Thanks [@kialj876](https://github.com/kialj876)! - Added in i18n, added base header components, added in styles for nuxt ui
+
 ## 0.1.2
 
 ### Patch Changes

package/LICENSE

@@ -0,0 +1,28 @@
+BSD 3-Clause License
+
+Copyright (c) 2025, bcgov
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+1. Redistributions of source code must retain the above copyright notice, this
+   list of conditions and the following disclaimer.
+
+2. Redistributions in binary form must reproduce the above copyright notice,
+   this list of conditions and the following disclaimer in the documentation
+   and/or other materials provided with the distribution.
+
+3. Neither the name of the copyright holder nor the names of its
+   contributors may be used to endorse or promote products derived from
+   this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,73 +1,62 @@
-# Nuxt Layer Starter
+[![License](https://img.shields.io/badge/License-BSD%203%20Clause-blue.svg)](LICENSE) [![pkg.pr.new](https://pkg.pr.new/badge/OWNER/REPO)](https://pkg.pr.new/~/bcgov/connect-nuxt)
 
-Create Nuxt extendable layer with this GitHub template.
+# @sbc-connect/nuxt-base
+The foundational Nuxt layer for all Connect applications.
 
-## Setup
+This package contains the core UI components, styling, and utilities for the Connect ecosystem. Extend this layer in your Nuxt project to get a consistent, on-brand starting point with zero configuration.
 
-Make sure to install the dependencies:
+## Features
 
-```bash
-pnpm install
-```
-
-## Working on your layer
-
-Your layer is at the root of this repository, it is exactly like a regular Nuxt project, except you can publish it on NPM.
-
-The `.playground` directory should help you on trying your layer during development.
+### BC Government Branding
+- Official color theme and design tokens
+- BCSans font family with pre-configured @font-face rules
+- BC Government logos and favicon assets
 
-Running `pnpm dev` will prepare and boot `.playground` directory, which imports your layer itself.
+### Core Development Assets
+- A library of reusable base components
+- Essential composables for common application logic
+- Standard utility functions
+- Pre-configured for Internationalization (i18n)
 
-## Distributing your layer
-
-Your Nuxt layer is shaped exactly the same as any other Nuxt project, except you can publish it on NPM.
-
-To do so, you only have to check if `files` in `package.json` are valid, then run:
-
-```bash
-npm publish --access public
-```
+For detailed usage and documentation, please see the [Base Layer Docs](../../../docs/packages/layers/base/intro.md)
 
-Once done, your users will only have to run:
+## Usage
 
+### Install
 ```bash
-npm install --save your-layer
+pnpm install @sbc-connect/nuxt-base
 ```
 
-Then add the dependency to their `extends` in `nuxt.config`:
+### Configure
+Then add the dependency to `extends` in `nuxt.config`:
 
 ```ts
 defineNuxtConfig({
-  extends: 'your-layer'
+  extends: '@sbc-connect/nuxt-base'
 })
 ```
 
-## Development Server
+### Environment Variables
+This project requires certain environment variables to be set to run correctly.
 
-Start the development server on http://localhost:3000
+Create a file named .env in the root of the project.
 
-```bash
-pnpm dev
-```
-
-## Production
+Copy the contents of the .env.example file into your new .env file.
 
-Build the application for production:
+#### Local Development
+For local development, the following variables are required. The default values are suitable for running the application on your local machine:
 
-```bash
-pnpm build
 ```
-
-Or statically generate it with:
-
-```bash
-pnpm generate
+# .env
+NUXT_BASE_URL="http://localhost:3000/"
 ```
 
-Locally preview production build:
+#### Production Environments
+> [!IMPORTANT]
+> The values for staging and production environments are managed securely and should not be stored in this file.
 
-```bash
-pnpm preview
-```
+To obtain the correct values for a production build or deployment, please contact the Connect Platform Team.
+
+## Contributing
 
-Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+We welcome contributions to this package! Please see the main [Contribution Guidelines](../../../CONTRIBUTING.md) for information on our branching strategy, commit conventions, and pull request process.

package/app/app.config.ts

@@ -1,14 +1,69 @@
 export default defineAppConfig({
-  myLayer: {
-    name: 'Hello from Nuxt layer NEW AGAIN x 24!!'
+  connect: {
+    header: {
+      localeSelect: true,
+      whatsNew: true
+    },
+    footer: {
+      versions: []
+    }
+  },
+  ui: {
+    breadcrumb: {
+      slots: {
+        separatorIcon: 'text-secondary'
+      },
+      variants: {
+        active: {
+          true: {
+            link: 'text-secondary font-medium'
+          },
+          false: {
+            link: 'text-secondary underline font-medium'
+          }
+        }
+      },
+      compoundVariants: [
+        {
+          disabled: false,
+          active: false,
+          to: true,
+          class: {
+            link: 'hover:text-secondary hover:underline transition-colors'
+          }
+        }
+      ]
+    },
+    button: {
+      slots: {
+        base: 'cursor-pointer'
+      }
+    },
+    dropdownMenu: {
+      slots: {
+        content: 'bg-secondary ring-0',
+        group: 'p-0'
+      }
+    },
+    tooltip: {
+      slots: {
+        content: 'bg-neutral ring-neutral text-secondary p-4',
+        arrow: 'fill-neutral'
+      }
+    }
   }
 })
 
 declare module '@nuxt/schema' {
   interface AppConfigInput {
-    myLayer?: {
-      /** Project name */
-      name?: string
+    connect?: {
+      header?: {
+        localeSelect?: boolean
+        whatsNew?: boolean
+      }
+      footer?: {
+        versions?: string[]
+      }
     }
   }
 }

package/app/app.vue

@@ -1,5 +1,18 @@
+<script setup lang="ts">
+const { localeProperties } = useI18n()
+
+useHead({
+  htmlAttrs: {
+    lang: () => localeProperties.value.code,
+    dir: () => localeProperties.value.dir
+  }
+})
+</script>
+
 <template>
-  <nuxt-layout>
-    <nuxt-page />
-  </nuxt-layout>
+  <UApp :toaster="{ position: 'bottom-center' }">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
 </template>

package/app/components/Connect/BCGovLogo.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// must explicitly import or will fail when publishing layer // TODO: find better way to handle image aliases
+// @ts-expect-error - Cannot find module 'BCGovLogoLgFr' or its corresponding type declarations.ts(2307)
+import frLargeLogo from 'BCGovLogoLgFr'
+// @ts-expect-error - Cannot find module 'BCGovLogoSmFr' or its corresponding type declarations.ts(2307)
+import frSmallLogo from 'BCGovLogoSmFr'
+// @ts-expect-error - Cannot find module 'BCGovLogoLgEn' or its corresponding type declarations.ts(2307)
+import enLargeLogo from 'BCGovLogoLgEn'
+// @ts-expect-error - Cannot find module 'BCGovLogoSmEn' or its corresponding type declarations.ts(2307)
+import enSmallLogo from 'BCGovLogoSmEn'
+</script>
+
+<template>
+  <!-- use french logo for french locale, any other locale uses english logo -->
+  <div v-if="$i18n.locale === 'fr-CA'" class="shrink-0">
+    <!-- Using scale because it will increase the size of the image without affecting the container size -->
+    <!-- there is a lot of padding on the images, if only the height gets increased,  -->
+    <!-- the padding makes the header too tall -->
+    <img
+      class="hidden h-[60px] scale-125 sm:block"
+      :src="frLargeLogo"
+      :alt="$t('connect.label.bcGovLogo')"
+    >
+    <img
+      class="block h-[64px] scale-125 sm:hidden"
+      :src="frSmallLogo"
+      :alt="$t('connect.label.bcGovLogo')"
+    >
+  </div>
+  <div v-else class="shrink-0">
+    <img
+      class="hidden h-[60px] scale-125 sm:block"
+      :src="enLargeLogo"
+      :alt="$t('connect.label.bcGovLogo')"
+    >
+    <img
+      class="block h-[64px] scale-150 sm:hidden"
+      :src="enSmallLogo"
+      :alt="$t('connect.label.bcGovLogo')"
+    >
+  </div>
+</template>

package/app/components/Connect/Breadcrumb.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const props = defineProps({ accountId: { type: String, required: false } })
+
+const { t } = useI18n()
+
+const breadcrumbs = computed<ConnectBreadcrumb[]>(() => {
+  const metaCrumbs = useRoute().meta.breadcrumbs as ConnectBreadcrumb[] | undefined
+
+  if (metaCrumbs) {
+    return metaCrumbs.map((bc) => {
+      if (bc.appendAccountId && props.accountId) {
+        return {
+          ...bc,
+          to: appendUrlParam(bc.to as string, 'accountid', props.accountId)
+        }
+      }
+      return bc
+    })
+  } else {
+    return [{ label: t('connect.breadcrumb.default') }]
+  }
+})
+
+function resolveBackHref() {
+  const bcLength = breadcrumbs.value.length
+
+  if (bcLength > 1) {
+    // return the second to last breadcrumb link
+    return breadcrumbs.value[bcLength - 2]?.to ?? breadcrumbs.value[bcLength - 2]?.href
+  } else {
+    return ''
+  }
+}
+</script>
+
+<template>
+  <div
+    v-if="$route.meta.hideBreadcrumbs !== true"
+    class="bg-blue-350"
+  >
+    <div class="app-inner-container flex items-center px-4 py-2 gap-3">
+      <UButton
+        class="size-[28px] rounded-full px-1 bg-secondary hover:bg-secondary/75"
+        :disabled="breadcrumbs.length < 2"
+        color="secondary"
+        icon="i-mdi-arrow-left"
+        :aria-label="$t('connect.label.goBack')"
+        :to="resolveBackHref()"
+        :ui="{
+          leadingIcon: 'text-blue-500',
+        }"
+      />
+      <div class="w-[1px] bg-shadePrimary h-[24px]" />
+      <UBreadcrumb
+        :items="breadcrumbs"
+        :aria-label="$t('connect.breadcrumb.arialabel')"
+        separator-icon="i-mdi-chevron-right"
+      />
+    </div>
+  </div>
+</template>

package/app/components/Connect/Footer.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+const rtc = useRuntimeConfig().public
+const uiVersion = rtc.version
+const feesUrl = `${rtc.registryHomeUrl}product-fees`
+const dependencyVersions: string[] = useAppConfig().connect?.footer?.versions || []
+const localePath = useLocalePath()
+const links = [
+  {
+    label: 'connect.label.home',
+    to: localePath('/')
+  },
+  {
+    label: 'connect.label.releaseNotes',
+    to: 'https://www.release-notes.bcregistry.gov.bc.ca',
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.fees',
+    to: feesUrl,
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.disclaimer',
+    to: 'https://www2.gov.bc.ca/gov/content/home/disclaimer',
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.privacy',
+    to: 'https://www2.gov.bc.ca/gov/content/home/privacy',
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.accessibility',
+    to: 'https://www2.gov.bc.ca/gov/content/home/accessibility',
+    target: '_blank'
+  },
+  {
+    label: 'connect.label.copyright',
+    to: 'https://www2.gov.bc.ca/gov/content/home/copyright',
+    target: '_blank'
+  }
+]
+
+const appVersions = computed<string[]>(() => {
+  const items = [...dependencyVersions]
+  if (uiVersion) {
+    items.unshift(uiVersion)
+  }
+  return items
+})
+</script>
+
+<template>
+  <footer
+    id="connect-main-footer"
+    data-testid="connect-main-footer"
+    class="border-t-2 border-brandLight bg-brandDark"
+  >
+    <div class="app-inner-container flex items-center justify-between p-2">
+      <nav :aria-label="$t('connect.footer.navLabel')" class="flex grow">
+        <ul class="list-none flex-col gap-1 p-0 sm:-ml-2 sm:flex-row sm:flex-wrap">
+          <li
+            v-for="link in links"
+            :key="link.to"
+            :class="[
+              'flex-col gap-2 border-r-0 pr-2 last:mr-0',
+              'last:border-r-0 sm:mr-2 sm:inline-block sm:flex-none',
+              'sm:border-r sm:first:ml-2 border-lineLight',
+            ]"
+          >
+            <NuxtLink
+              :to="link.to === '/' ? `/${$i18n.locale}` : link.to"
+              :target="link.target"
+              :class="[
+                'rounded p-1 text-sm text-secondary',
+                'hover:underline focus:outline-none',
+                'focus-visible:ring-2 focus-visible:ring-secondary',
+              ]"
+            >
+              {{ $t(link.label) }}
+            </NuxtLink>
+          </li>
+        </ul>
+      </nav>
+      <div class="-mb-1 flex items-center">
+        <span class="italic text-brandLight">{{ $t('connect.label.bcApp') }}</span>
+        <UTooltip arrow :delay-duration="200">
+          <UButton
+            :aria-label="$t('connect.label.appVersion')"
+            color="secondary"
+            icon="i-mdi-info-outline"
+            variant="ghost"
+          />
+
+          <template #content>
+            <div class="flex flex-col">
+              <span v-for="(item, i) in appVersions" :key="i">{{ item }}</span>
+            </div>
+          </template>
+        </UTooltip>
+      </div>
+    </div>
+  </footer>
+</template>

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

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const localePath = useLocalePath()
+</script>
+
+<template>
+  <NuxtLink
+    id="header-logo-home-link"
+    :to="localePath('/')"
+    :class="[
+      'flex items-center gap-4 rounded-md',
+      'px-2 transition-colors duration-300',
+      'ease-in-out hover:bg-secondary/[0.1]',
+      'focus:outline-none focus-visible:ring-2 focus-visible:ring-secondary',
+    ]"
+    :aria-label="$t('connect.header.homeLink')"
+  >
+    <ConnectBCGovLogo />
+    <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

@@ -0,0 +1,14 @@
+<template>
+  <header
+    id="connect-header-wrapper"
+    data-testid="connect-header-wrapper"
+    class="relative border-b-2 border-brandLight bg-brandDark"
+  >
+    <nav
+      class="app-inner-container px-2"
+      :aria-label="$t('connect.header.navLabel')"
+    >
+      <slot />
+    </nav>
+  </header>
+</template>

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

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const headerConfig = useAppConfig().connect.header
+</script>
+
+<template>
+  <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

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { LocaleObject } from '@nuxtjs/i18n'
+
+const { locale, locales, setLocale } = useI18n()
+
+const items = computed((): DropdownMenuItem[] => {
+  const options = locales.value.map((loc: LocaleObject) => {
+    const isCurrentLocal = loc.code === locale.value
+    return {
+      label: loc.name || 'N/A',
+      icon: isCurrentLocal ? 'i-mdi-check' : '',
+      onSelect: () => setLocale(loc.code),
+      class: isCurrentLocal ? 'bg-gray-100' : 'pl-8',
+      color: isCurrentLocal ? 'primary' : 'neutral'
+    }
+  })
+  return [options]
+})
+</script>
+
+<template>
+  <UDropdownMenu
+    v-if="items[0] && items[0].length > 1"
+    :items
+    color="secondary"
+  >
+    <UButton
+      data-testid="locale-select-dropdown"
+      icon="i-mdi-web"
+      :aria-label="$t('connect.label.localeSelect')"
+      size="lg"
+      variant="ghost"
+      color="secondary"
+    />
+  </UDropdownMenu>
+</template>