@wishbone-media/spark 0.13.1 → 0.14.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wishbone-media/spark",
-  "version": "0.13.1",
+  "version": "0.14.1",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/containers/SparkDefaultContainer.vue

@@ -220,7 +220,11 @@ const toggleAppSelector = () => {
     slotProps.footerSlot = props.appSelectorSlots.footerSlot
   }
 
-  sparkOverlayService.showRight(SparkAppSelector, slotProps)
+  sparkOverlayService.showRight(SparkAppSelector, slotProps, {
+    select: (brand) => {
+      sparkOverlayService.closeRight()
+    },
+  })
 }
 
 const toggleBrandSelector = () => {
@@ -230,6 +234,7 @@ const toggleBrandSelector = () => {
     {
       select: (brand) => {
         sparkBrandFilterStore.toggleBrand(brand)
+        sparkOverlayService.closeLeft()
       },
     },
   )

package/src/plugins/app-bootstrap.js

@@ -0,0 +1,91 @@
+// Global registry for bootstrap reset callbacks
+const resetCallbacks = []
+
+/**
+ * Register a reset callback to be called on logout
+ * This is used internally by createBootstrapService
+ * @private
+ */
+function registerResetCallback(callback) {
+  resetCallbacks.push(callback)
+}
+
+/**
+ * Reset all registered bootstrap services
+ * Called automatically by the auth store on logout
+ * @internal
+ */
+export function resetAllBootstrapServices() {
+  resetCallbacks.forEach(callback => callback())
+}
+
+/**
+ * Creates a bootstrap service for initializing app-level data after authentication
+ *
+ * This factory function provides a standardized pattern for loading user-dependent data
+ * in authenticated SPAs. It ensures initialization runs only once per session and provides
+ * automatic cleanup on logout (no manual reset needed).
+ *
+ * @param {Function} initFn - Async function that performs the initialization logic
+ *                            (e.g., loading stores, fetching user data)
+ * @returns {Object} Object containing bootstrapApp function
+ *
+ * @example
+ * // In consumer app: src/bootstrap.js
+ * import { createBootstrapService } from '@wishbone-media/spark'
+ * import { useGlobalStore } from '@/stores/global.js'
+ * import { useBrandFilterStore } from '@/stores/brand-filter.js'
+ *
+ * export const { bootstrapApp } = createBootstrapService(async () => {
+ *   const globalStore = useGlobalStore()
+ *   const brandStore = useBrandFilterStore()
+ *
+ *   // Load stores in parallel for better performance
+ *   await Promise.all([
+ *     globalStore.loadGlobalData(),
+ *     brandStore.loadBrands(),
+ *   ])
+ * })
+ */
+export function createBootstrapService(initFn) {
+  let initialized = false
+
+  /**
+   * Reset the bootstrap state
+   * Called automatically by Spark's auth store on logout
+   * @private
+   */
+  const resetBootstrap = () => {
+    initialized = false
+  }
+
+  // Register this service's reset callback
+  registerResetCallback(resetBootstrap)
+
+  /**
+   * Initialize application-level data after authentication
+   * Called automatically by the router guard when navigating to authenticated routes
+   *
+   * @returns {Promise<void>}
+   */
+  const bootstrapApp = async () => {
+    // Only run once per session
+    if (initialized) {
+      return
+    }
+
+    try {
+      // Execute the consumer-provided initialization logic
+      await initFn()
+      initialized = true
+    } catch (error) {
+      console.error('Error during app bootstrap:', error)
+      // Don't set initialized = true on error, allow retry on next navigation
+      throw error
+    }
+  }
+
+  return {
+    bootstrapApp,
+  }
+}

package/src/plugins/axios.js

@@ -81,6 +81,9 @@ export function createAxiosInstance(config = {}) {
   return instance
 }
 
+// Module-level axios instance reference for consumer apps
+let axiosInstance = null
+
 /**
  * Setup axios for a Vue app with global availability
  * @param {App} app - Vue app instance
@@ -88,7 +91,7 @@ export function createAxiosInstance(config = {}) {
  * @returns {AxiosInstance} Configured axios instance
  */
 export function setupAxios(app, config = {}) {
-  const axiosInstance = createAxiosInstance(config)
+  axiosInstance = createAxiosInstance(config)
 
   // Make axios available via injection (Composition API)
   app.provide('axios', axiosInstance)
@@ -98,3 +101,41 @@ export function setupAxios(app, config = {}) {
 
   return axiosInstance
 }
+
+/**
+ * Get the configured axios instance
+ * This allows consumer apps to access the axios instance in non-component contexts
+ * (like Pinia stores) without needing to pass it as a parameter.
+ *
+ * @returns {AxiosInstance} The axios instance
+ * @throws {Error} If axios has not been initialized via setupAxios()
+ *
+ * @example
+ * // In consumer app: src/plugins/axios.js
+ * import { setupAxios, getAxiosInstance as getSparkAxiosInstance } from '@wishbone-media/spark'
+ *
+ * export function setupAppAxios(app) {
+ *   return setupAxios(app, {
+ *     baseURL: import.meta.env.VITE_APP_API_URL,
+ *   })
+ * }
+ *
+ * // Re-export for convenience
+ * export const getAxiosInstance = getSparkAxiosInstance
+ *
+ * // In stores: src/stores/global.js
+ * import { getAxiosInstance } from '@/plugins/axios'
+ *
+ * export const useGlobalStore = defineStore('global', () => {
+ *   const loadData = async () => {
+ *     const axios = getAxiosInstance()
+ *     const { data } = await axios.get('/data')
+ *   }
+ * })
+ */
+export function getAxiosInstance() {
+  if (!axiosInstance) {
+    throw new Error('Axios instance not initialized. Call setupAxios() first.')
+  }
+  return axiosInstance
+}

package/src/plugins/index.js

@@ -1,3 +1,4 @@
 export { Icons, addIcons, setupFontAwesome } from './fontawesome.js'
-export { createAuthRoutes, setupAuthGuards, create403Route, create404Route } from './router.js'
-export { createAxiosInstance, setupAxios } from './axios.js'
+export { createAuthRoutes, setupAuthGuards, create403Route, create404Route, setupBootstrapGuard } from './router.js'
+export { createAxiosInstance, setupAxios, getAxiosInstance } from './axios.js'
+export { createBootstrapService } from './app-bootstrap.js'

package/src/plugins/router.js

@@ -178,3 +178,37 @@ export function create404Route(options = {}) {
     meta: { auth: false },
   }
 }
+
+/**
+ * Setup bootstrap guard to initialize app data after authentication
+ * This guard waits for authentication to be ready, then calls the provided bootstrap function
+ * to load user-dependent data before rendering authenticated routes.
+ *
+ * IMPORTANT: This MUST be called AFTER setupAuthGuards() to ensure auth is ready first
+ *
+ * @param {Router} router - Vue router instance
+ * @param {Function} bootstrapFn - Async function that initializes app data
+ *
+ * @example
+ * import { setupAuthGuards, setupBootstrapGuard } from '@wishbone-media/spark'
+ * import { bootstrapApp } from '@/services/app-bootstrap'
+ *
+ * // Setup auth guards first
+ * setupAuthGuards(router)
+ *
+ * // Then setup bootstrap guard
+ * setupBootstrapGuard(router, bootstrapApp)
+ */
+export function setupBootstrapGuard(router, bootstrapFn) {
+  router.beforeResolve(async (to) => {
+    // Only bootstrap for authenticated routes
+    if (to.meta.auth !== false) {
+      const authStore = useSparkAuthStore()
+
+      // Wait for auth to be ready and bootstrap if authenticated
+      if (authStore.state.ready && authStore.check) {
+        await bootstrapFn()
+      }
+    }
+  })
+}

package/src/stores/auth.js

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { reactive, computed } from 'vue'
 import axios from 'axios'
 import { getCookie, setCookie, deleteCookie } from '../utils/cookies.js'
+import { resetAllBootstrapServices } from '../plugins/app-bootstrap.js'
 
 const TOKEN_NAME = 'bolt-next-token'
 
@@ -117,6 +118,9 @@ export const useSparkAuthStore = defineStore('auth', () => {
     } finally {
       clearTokenCookie()
       state.user = null
+
+      // Reset all bootstrap services to allow re-initialization on next login
+      resetAllBootstrapServices()
     }
   }