@sbc-connect/nuxt-base 0.7.2 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @sbc-connect/nuxt-base
 
+## 0.8.0
+
+### Minor Changes
+
+- [#158](https://github.com/bcgov/connect-nuxt/pull/158) [`fe5065e`](https://github.com/bcgov/connect-nuxt/commit/fe5065e12d776349e7093e52ecee51ce22a2c271) Thanks [@vysakh-menon-aot](https://github.com/vysakh-menon-aot)! - Switch LD dependency to js-client-sdk
+
+## 0.7.3
+
+### Patch Changes
+
+- [#155](https://github.com/bcgov/connect-nuxt/pull/155) [`e4ad236`](https://github.com/bcgov/connect-nuxt/commit/e4ad2360c255173e20b7f6d384de2a9313ce747d) Thanks [@deetz99](https://github.com/deetz99)! - Custom CSS classes for x and xy default padding and left error border for container elements.
+
 ## 0.7.2
 
 ### Patch Changes

package/app/assets/css/connect-base-tw.css

@@ -90,9 +90,10 @@
   --marker-upper-alpha: upper-alpha;
 
   /* box shadow */
-  --shadow-input: inset 0 -1px 0 0px var(--ui-neutral);
-  --shadow-input-focus: inset 0 -2px 0 0px var(--ui-primary);
-  --shadow-input-error: inset 0 -2px 0 0px var(--ui-error);
+  /* bottom neutral/focused/error border for input elements */
+  --shadow-input: inset 0 -1px 0 0 var(--ui-neutral);
+  --shadow-input-focus: inset 0 -2px 0 0 var(--ui-primary);
+  --shadow-input-error: inset 0 -2px 0 0 var(--ui-error);
 
   /* GRAY */
   --color-gray-50: #f8f9fa;
@@ -274,4 +275,29 @@ body {
   .floating-label-textarea {
     @apply pointer-events-none absolute left-0 top-1 text-neutral text-xs font-medium px-2.5 transition-all duration-200 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 peer-aria-invalid:text-error;
   }
+
+  /* Standard container padding */
+  .padding-x-default {
+    @apply px-4 sm:px-7.5
+  }
+  
+  .padding-xy-default {
+    @apply py-6 px-4 sm:py-10 sm:px-7.5
+  }
+
+  /* left error border for section elements */
+  /* Psuedo element required to be visible so slot content does not cover it */
+  .shadow-section-error {
+    position: relative;
+  }
+
+  .shadow-section-error::before {
+    content: "";
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 3px;
+    background-color: var(--ui-error);
+    pointer-events: none;
+    z-index: 1;
+  }
 }

package/app/composables/useConnectLaunchDarkly.ts

@@ -1,69 +1,72 @@
-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)
+import { createClient } from '@launchdarkly/js-client-sdk'
+import type { LDClient, LDFlagSet, LDOptions, LDContext } from '@launchdarkly/js-client-sdk'
 
 /**
- * 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
-  }
+ * Composable for the LaunchDarkly service.
+ */
+export const useConnectLaunchDarkly = () => {
+  const ldClient = useState<LDClient | null>('ld-client', () => null)
+  const ldFlagSet = useState<LDFlagSet>('ld-flag-set', () => ({}))
+  const ldInitialized = useState<boolean>('ld-initialized', () => false)
+  const isInitializing = useState<boolean>('ld-is-initializing', () => false)
 
-  isInitializing.value = true
+  /**
+   * Initializes the LaunchDarkly client with an anonymous context.
+   */
+  function init(): void {
+    const rtc = useRuntimeConfig().public
 
-  const ldContext: LDContext = {
-    kind: 'user',
-    key: 'anonymous',
-    anonymous: true,
-    appSource: rtc.appName
-  }
+    // 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
+    }
 
-  const options: LDOptions = {
-    streaming: false,
-    useReport: false,
-    diagnosticOptOut: true
-  }
+    isInitializing.value = true
 
-  try {
-    ldClient.value = initialize(rtc.ldClientId, ldContext, options)
+    const ldContext: LDContext = {
+      kind: 'user',
+      key: 'anonymous',
+      anonymous: true,
+      appSource: rtc.appName
+    }
 
-    ldClient.value.on('initialized', () => {
-      ldFlagSet.value = ldClient.value?.allFlags() || {}
-      ldInitialized.value = true
-      isInitializing.value = false
-      console.info('LaunchDarkly: Anonymous initialization complete.')
-    })
+    const options: LDOptions = {
+      streaming: false,
+      useReport: false,
+      diagnosticOptOut: true
+    }
 
-    ldClient.value.on('error', (error) => {
-      console.error('LaunchDarkly: Initialization error.', error)
+    try {
+      const client = createClient(rtc.ldClientId, ldContext, options)
+
+      client.start().then((result) => {
+        if (result.status === 'complete') {
+          ldFlagSet.value = client.allFlags()
+          ldInitialized.value = true
+          isInitializing.value = false
+          console.info('LaunchDarkly: Anonymous initialization complete.')
+        } else {
+          console.error('LaunchDarkly: Initialization did not complete.', result)
+          isInitializing.value = false
+        }
+      }).catch((error) => {
+        console.error('LaunchDarkly: Initialization error.', error)
+        isInitializing.value = false
+      })
+
+      ldClient.value = client
+    } catch (error) {
+      console.error('LaunchDarkly: Failed to initialize.', 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
+  // Initialize only once on the client
   if (!ldInitialized.value && !isInitializing.value && import.meta.client) {
     init()
   }
@@ -95,12 +98,12 @@ export const useConnectLaunchDarkly = () => {
       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
-        })
+      return ldClient.value.waitForInitialization().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
@@ -131,12 +134,12 @@ export const useConnectLaunchDarkly = () => {
       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
-        })
+      return ldClient.value.waitForInitialization().then(() =>
+        ldFlagSet.value[name] ?? defaultValue
+      ).catch((error) => {
+        console.error(`LaunchDarkly: Error waiting for client while getting stored flag "${name}".`, error)
+        return defaultValue
+      })
     }
 
     // reactive mode

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sbc-connect/nuxt-base",
   "type": "module",
-  "version": "0.7.2",
+  "version": "0.8.0",
   "repository": "github:bcgov/connect-nuxt",
   "license": "BSD-3-Clause",
   "main": "./nuxt.config.ts",
@@ -13,7 +13,7 @@
     "@vueuse/nuxt": "14.2.1",
     "dompurify": "3.3.3",
     "es-toolkit": "1.45.1",
-    "launchdarkly-vue-client-sdk": "2.5.0",
+    "@launchdarkly/js-client-sdk": "4.6.5",
     "luxon": "3.7.2",
     "maska": "3.2.0",
     "zod": "4.3.6"
@@ -25,8 +25,8 @@
     "nuxt": "4.2.2",
     "typescript": "5.9.3",
     "vue-tsc": "3.2.5",
-    "@sbc-connect/eslint-config": "0.0.8",
     "@sbc-connect/playwright-config": "0.1.1",
+    "@sbc-connect/eslint-config": "0.0.8",
     "@sbc-connect/vitest-config": "0.1.1"
   },
   "scripts": {