@sbc-connect/nuxt-base 0.1.2 → 0.1.4

package/modules/assets/runtime/assets/core-layout.css

@@ -1,13 +1,13 @@
 @reference "tailwindcss";
 
 .app-container {
-  @apply min-h-dvh flex flex-col bg-(--color-bcGovGray-100) text-(--color-bcGovGray-700); /*  bg-gray-100 text-gray-700 */
+  @apply min-h-dvh flex flex-col bg-(--color-gray-100) text-(--color-gray-700); /*  bg-gray-100 text-gray-700 */
 }
 
 .app-inner-container {
-  @apply max-w-(--container-bcGovLg) w-full mx-auto px-4;
+  @apply max-w-(--container-bcGovLg) w-full mx-auto;
 }
 
 .app-body {
-  @apply grow relative flex flex-col;
+  @apply grow relative flex flex-col px-4;
 }

package/modules/assets/runtime/assets/core-tw.css

@@ -1,12 +1,63 @@
-@reference "tailwindcss";
-@reference "@nuxt/ui";
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+@source "../../../../app/";
 
 /* Customize Nuxt UI default tokens */
+/* Follows https://sites.google.com/bcdevexchange.org/designsystem/foundation-styles/colours */
 :root {
+  --ui-error: var(--color-red-600);
   --ui-primary: var(--color-blue-500);
-  --ui-radius: 0.25rem;
+  --ui-secondary: white;
+  --ui-success: var(--color-green-600);
+  --ui-warning: #F8661A;
+  /* Custom themes */
+  --ui-brandDark: var(--color-midnightBlue-900);
+  --ui-brandLight: var(--color-yellow-400);
+  --ui-lineDark: #6F7780;
+  --ui-lineLight: var(--color-gray-300);
+  --ui-lineSpecial: #899EB2;
+  --ui-markBlue: #1A5A96;
+  --ui-markBlueHover: #0000EE;
+  --ui-neutral: var(--color-gray-700);
+  --ui-neutralDark: var(--color-gray-900);
+  --ui-neutralLight: #757575;
+  --ui-shadeCaution: #FFF7E3;
+  --ui-shadeLight: white;
+  --ui-shadeNew: #E8F5E9;
+  --ui-shadePrimary: var(--color-gray-100);
+  --ui-shadeSecondary: #E2E8EE;
+  --ui-shadeSpecial: var(--color-blue-50);
+  --ui-shadeWarning: #FAE9E9;
+  --ui-radius: 0.1667rem;
+}
+
+/* FUTURE: add dark themed colours (currently set to be the same) */
+.dark {
   --ui-error: var(--color-red-600);
-  --ui-text-inverted: #FFFFFF;
+  --ui-primary: var(--color-blue-500);
+  --ui-secondary: white;
+  --ui-success: var(--color-green-600);
+  --ui-warning: #F8661A;
+  /* Custom themes */
+  --ui-brandDark: var(--color-midnightBlue-900);
+  --ui-brandLight: var(--color-yellow-400);
+  --ui-lineDark: #6F7780;
+  --ui-lineLight: var(--color-gray-300);
+  --ui-lineSpecial: #899EB2;
+  --ui-markBlue: #1A5A96;
+  --ui-markBlueHover: #0000EE;
+  --ui-neutral: var(--color-gray-700);
+  --ui-neutralDark: var(--color-gray-900);
+  --ui-neutralLight: #757575;
+  --ui-shadeCaution: #FFF7E3;
+  --ui-shadeLight: white;
+  --ui-shadeNew: #E8F5E9;
+  --ui-shadePrimary: var(--color-gray-100);
+  --ui-shadeSecondary: #E2E8EE;
+  --ui-shadeSpecial: var(--color-blue-50);
+  --ui-shadeWarning: #FAE9E9;
+  --ui-radius: 0.1667rem;
 }
 
 @theme static {
@@ -25,50 +76,18 @@
   /* box shadow */
   --shadow-bcGovInput: inset 0 -2px 0 0px #1669bb;
 
-  /* COLOURS */
-  /* these colours are as defined in styleguide: */
-  /* https://preview.uxpin.com/73eb31e6346bc2863a066f02218a3af289325619#/pages/138840439/simulate/sitemap?mode=i */
-  /* for more details see previous link */
-  /* last updated on (2023-10-16) */
-  /* PRIMARY COLOURS */
-  --color-bcGovColor-footer: #003366;
-  --color-bcGovColor-header: #003366;
-  --color-bcGovColor-navDivider: #FCBA19;
-  /* LINK COLOURS */
-  --color-bcGovColor-activeBlue: #1669BB;
-  --color-bcGovColor-markBlue: #1a5a96;
-  --color-bcGovColor-markBlueHover: #0000EE;
-  /* TEXT/NON-CLICKABLE COLOURS */
-  --color-bcGovColor-darkGray: #212529;
-  --color-bcGovColor-midGray: #495057;
-  --color-bcGovColor-lightGray: #757575;
-  --color-bcGovColor-nonClickable: #38598A;
-  /* BACKGROUND COLOURS */
-  --color-bcGovColor-white: #FFFFFF;
-  --color-bcGovColor-gray1: #F1F3F5;
-  --color-bcGovColor-gray2: #E2E8EE;
-  --color-bcGovColor-lightBlue: #E4EDF7;
-  /* LINES */
-  --color-bcGovColor-hairlinesOnWhite: #DEE2E6;
-  --color-bcGovColor-specialityDottedLines: #899EB2;
-  --color-bcGovColor-formFieldLines: #6F7780;
-  /* OUTCOMES */
-  --color-outcomes-approved: #2E8540;
-  --color-outcomes-error: #D3272C;
-  --color-outcomes-caution: #F8661A;
-
   /* GRAY */
-  --color-bcGovGray-50: #f8f9fa;
-  --color-bcGovGray-100: #f1f3f5;
-  --color-bcGovGray-200: #e9ecef;
-  --color-bcGovGray-300: #dee2e6;
-  --color-bcGovGray-400: #ced4da;
-  --color-bcGovGray-500: #adb5bd;
-  --color-bcGovGray-600: #868e96;
-  --color-bcGovGray-700: #495057;
-  --color-bcGovGray-800: #343a40;
-  --color-bcGovGray-900: #212529;
-  --color-bcGovGray-950: #232529;
+  --color-gray-50: #f8f9fa;
+  --color-gray-100: #f1f3f5;
+  --color-gray-200: #e9ecef;
+  --color-gray-300: #dee2e6;
+  --color-gray-400: #ced4da;
+  --color-gray-500: #adb5bd;
+  --color-gray-600: #868e96;
+  --color-gray-700: #495057;
+  --color-gray-800: #343a40;
+  --color-gray-900: #212529;
+  --color-gray-950: #232529;
   
   /* BLUE */
   --color-blue-50: #e4edf7;
@@ -194,7 +213,7 @@ body {
   h2,
   h3,
   h4 {
-    @apply text-bcGovGray-900;
+    @apply text-neutralDark;
   }
 
   h1,
@@ -221,20 +240,20 @@ body {
   }
 
   p {
-    @apply font-normal text-bcGovColor-midGray;
+    @apply font-normal text-neutral;
   }
 
   td,
   th {
-    @apply text-gray-900 text-sm;
+    @apply text-neutralDark text-sm;
   }
 
   /* floating labels */
   .floating-label-input {
-    @apply pointer-events-none absolute left-0 top-1 text-bcGovGray-900 text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-focus:translate-none peer-focus:text-blue-500;
+    @apply pointer-events-none absolute left-0 top-1 text-neutralDark text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-1/2 peer-placeholder-shown:-translate-y-1/2 peer-focus:translate-none peer-focus:text-primary;
   }
   
   .floating-label-textarea {
-    @apply pointer-events-none absolute left-0 top-1 text-bcGovGray-900 text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-blue-500;
+    @apply pointer-events-none absolute left-0 top-1 text-neutralDark text-xs font-medium px-2.5 transition-all peer-focus:top-1 peer-focus:text-xs peer-placeholder-shown:text-sm peer-placeholder-shown:top-2.5 peer-focus:translate-none peer-focus:text-primary;
   }
 }

package/nuxt.config.ts

@@ -16,5 +16,93 @@ export default defineNuxtConfig({
     '#base': resolve('./')
   },
 
-  compatibilityDate: '2025-07-10'
+  compatibilityDate: '2025-07-10',
+
+  imports: {
+    dirs: ['interfaces']
+  },
+
+  modules: [
+    '@nuxtjs/i18n',
+    '@vueuse/nuxt'
+  ],
+
+  // For more details on i18n in layers: https://i18n.nuxtjs.org/docs/guide/layers
+  // For more details on config: https://i18n.nuxtjs.org/docs/api/options
+  i18n: {
+    defaultLocale: 'en-CA',
+    detectBrowserLanguage: false,
+    langDir: 'locales',
+    locales: [
+      {
+        name: 'English',
+        code: 'en-CA',
+        language: 'en-CA',
+        dir: 'ltr',
+        file: 'en-CA.ts'
+      },
+      {
+        name: 'Français',
+        code: 'fr-CA',
+        language: 'fr-CA',
+        dir: 'ltr',
+        file: 'fr-CA.ts'
+      }
+    ],
+    strategy: 'prefix'
+  },
+
+  ui: {
+    colorMode: false,
+    theme: {
+      colors: [
+        'primary',
+        'secondary',
+        'success',
+        'info',
+        'warning',
+        'error',
+        'brandDark',
+        'brandLight',
+        'lineDark',
+        'lineLight',
+        'lineSpecial',
+        'neutral',
+        'neutralDark',
+        'neutralLight',
+        'shadeCaution',
+        'shadeLight',
+        'shadeNew',
+        'shadePrimary',
+        'shadeSecondary',
+        'shadeSpecial',
+        'shadeWarning'
+      ]
+    }
+  },
+
+  icon: {
+    clientBundle: {
+      icons: [
+        'mdi:arrow-left',
+        'mdi:info-outline',
+        'mdi:information',
+        'mdi:web',
+        'mdi:check'
+      ]
+    }
+  },
+
+  runtimeConfig: {
+    public: {
+      // Should in alphabetical order
+      appName: process.env.npm_package_name || '',
+      version: `Connect Base Layer v${process.env.npm_package_version || ''}`,
+      baseUrl: '',
+      registryHomeUrl: '',
+      ldClientId: '',
+      statusApiUrl: '',
+      statusApiVersion: ''
+    }
+  }
 })

package/package.json

@@ -1,24 +1,31 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "repository": "github:bcgov/connect-nuxt",
+  "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
   "dependencies": {
-    "@nuxt/ui": "^3.2.0"
+    "@iconify-json/mdi": "^1.2.3",
+    "@nuxt/ui": "^3.3.0",
+    "@nuxtjs/i18n": "^10.0.2",
+    "dompurify": "^3.2.6",
+    "launchdarkly-vue-client-sdk": "^2.4.1",
+    "@vueuse/nuxt": "^13.5.0",
+    "@vueuse/core": "^13.5.0",
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
-    "@nuxtjs/i18n": "^9.5.5",
-    "@vitest/coverage-v8": "^3.2.3",
+    "@vitest/coverage-v8": "^3.2.4",
     "dotenv": "^17.2.0",
     "nuxt": "4.0.0",
     "typescript": "^5.8.3",
-    "vue": "latest",
-    "vue-tsc": "^3.0.2",
-    "@sbc-connect/playwright-config": "0.0.3",
-    "@sbc-connect/vitest-config": "0.0.3",
-    "@sbc-connect/eslint-config": "0.0.3"
+    "vue-tsc": "^3.0.3",
+    "@types/lodash-es": "^4.17.12",
+    "@sbc-connect/eslint-config": "0.0.5",
+    "@sbc-connect/playwright-config": "0.0.4",
+    "@sbc-connect/vitest-config": "0.0.5"
   },
   "scripts": {
     "preinstall": "npx only-allow pnpm",
@@ -30,8 +37,10 @@
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "test": "pnpm run test:unit; pnpm run test:e2e",
-    "test:unit": "vitest run",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:unit:watch": "vitest",
     "test:e2e": "npx playwright test",
+    "test:e2e:ui": "npx playwright test --ui",
     "typecheck": "npx nuxt typecheck"
   }
 }

package/eslint.config.ts

@@ -1,3 +0,0 @@
-import eslintConfig from '@sbc-connect/eslint-config'
-
-export default eslintConfig