@sbc-connect/nuxt-base 0.0.0-test-ld-20260520212549

package/app/composables/useConnectButtonControl.ts

@@ -0,0 +1,146 @@
+const defaultOptions: ConnectButtonControlOptions = {
+  handleLoading: true,
+  clearAlertTextOnClick: true
+}
+
+export const useConnectButtonControl = (
+  stateKey: string = 'default-button-control',
+  opts: Partial<ConnectButtonControlOptions> = {}
+) => {
+  const options = {
+    ...defaultOptions,
+    ...opts
+  }
+
+  const buttonControl = useState<ConnectButtonControl>(stateKey, () => ({
+    leftGroup: { buttons: [] },
+    rightGroup: { buttons: [] }
+  }))
+
+  const forEachButton = (update: (button: ConnectButton, group: 'left' | 'right', index: number) => void) => {
+    buttonControl.value.leftGroup?.buttons?.forEach((btn, index) => update(btn, 'left', index))
+    buttonControl.value.rightGroup?.buttons?.forEach((btn, index) => update(btn, 'right', index))
+  }
+
+  const forEachGroup = (update: (group: ConnectButtonGroup) => void) => {
+    if (buttonControl.value.leftGroup) {
+      update(buttonControl.value.leftGroup)
+    }
+    if (buttonControl.value.rightGroup) {
+      update(buttonControl.value.rightGroup)
+    }
+  }
+
+  async function setAlertText(text?: string, group?: 'left' | 'right', index?: number) {
+    forEachGroup(group => group.alertText = undefined)
+    forEachButton(btn => btn.alertText = undefined)
+
+    if (text && group !== undefined) {
+      await nextTick()
+
+      const buttonGroup = group === 'left' ? buttonControl.value.leftGroup : buttonControl.value.rightGroup
+
+      if (index !== undefined) {
+        const button = buttonGroup.buttons[index]
+        if (button) {
+          button.alertText = text
+        }
+      } else {
+        buttonGroup.alertText = text
+      }
+    }
+  }
+
+  const handleClick = (
+    originalClick: ConnectButton['onClick'],
+    group: 'left' | 'right',
+    index: number
+  ) => {
+    if (!originalClick || typeof originalClick !== 'function') {
+      return undefined
+    }
+
+    return async () => {
+      try {
+        if (options.clearAlertTextOnClick) {
+          await setAlertText(undefined)
+        }
+
+        if (options.handleLoading) {
+          const clickedButton = buttonControl.value[group === 'left' ? 'leftGroup' : 'rightGroup']?.buttons[index]
+          if (!clickedButton) {
+            return
+          }
+
+          clickedButton.loading = true
+          forEachButton((button, btnGroup, btnIndex) => {
+            if (btnGroup !== group || btnIndex !== index) {
+              button.disabled = true
+            }
+          })
+        }
+
+        await (originalClick as () => Promise<void> | void)()
+      } catch (error) {
+        if (import.meta.env.DEV) {
+          console.error(`Error on button click. group: ${group} index: ${index} error: ${error}`)
+        }
+      } finally {
+        if (options.handleLoading) {
+          forEachButton((button) => {
+            button.loading = false
+            button.disabled = false
+          })
+        }
+      }
+    }
+  }
+
+  function setButtonControl(config: ConnectButtonControl) {
+    const updateGroup = (config: { buttons: ConnectButton[] }, group: 'left' | 'right') => {
+      if (!config || !config.buttons.length) {
+        return { ...config, buttons: [] }
+      }
+      return {
+        ...config,
+        buttons: config.buttons.map((button, index) => ({
+          ...button,
+          onClick: handleClick(button.onClick, group, index)
+        }))
+      }
+    }
+
+    buttonControl.value = {
+      leftGroup: updateGroup(config.leftGroup, 'left'),
+      rightGroup: updateGroup(config.rightGroup, 'right')
+    }
+  }
+
+  function handleButtonLoading(
+    loading: boolean,
+    group?: 'left' | 'right',
+    index?: number
+  ) {
+    if (!loading) {
+      forEachButton((button) => {
+        button.loading = false
+        button.disabled = false
+      })
+    } else if (group !== undefined && index !== undefined) {
+      forEachButton((button, btnGroup, btnIndex) => {
+        if (btnGroup === group && btnIndex === index) {
+          button.loading = true
+        } else {
+          button.disabled = true
+        }
+      })
+    }
+  }
+
+  return {
+    setButtonControl,
+    setAlertText,
+    handleButtonLoading,
+    buttonControl
+  }
+}

package/app/composables/useConnectLaunchDarkly.ts

@@ -0,0 +1,173 @@
+import { createClient } from '@launchdarkly/js-client-sdk'
+import type { LDClient, LDFlagSet, LDOptions, LDContext } from '@launchdarkly/js-client-sdk'
+
+/**
+ * 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)
+
+  /**
+   * 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 {
+      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
+    }
+  }
+
+  // Initialize only once on the client
+  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.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
+    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.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
+    return readonly(computed(() => {
+      if (!ldInitialized.value) {
+        return defaultValue
+      }
+      return ldFlagSet.value[name] ?? defaultValue
+    }))
+  }
+
+  /**
+   * 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/composables/useConnectModal.ts

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

package/app/composables/useConnectTombstone.ts

@@ -0,0 +1,25 @@
+export const useConnectTombstone = (
+  stateKey: string = 'default-tombstone',
+  initialState?: Partial<ConnectTombstoneState>
+) => {
+  function createInitialState(): ConnectTombstoneState {
+    const baseState: ConnectTombstoneState = {
+      loading: false,
+      title: {} as ConnectTombstoneTitle,
+      subtitles: [],
+      details: [],
+      sideDetails: [],
+      bottomButtons: []
+    }
+
+    return { ...baseState, ...initialState }
+  }
+
+  const tombstone = useState<ConnectTombstoneState>(stateKey, () => createInitialState())
+
+  function $reset() {
+    tombstone.value = createInitialState()
+  }
+
+  return { tombstone, $reset }
+}