@woodsportal/hubspot-kit 1.0.3 → 1.0.5

package/src/dev-module-config/ui/module-config-toolbar-theme.ts

@@ -0,0 +1,35 @@
+export type ModuleConfigToolbarTheme = 'light' | 'dark'
+
+const STORAGE_KEY = 'woodsportal:module-config-toolbar-theme'
+
+export function detectPortalTheme(): ModuleConfigToolbarTheme {
+  if (typeof document === 'undefined') return 'light'
+  return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+}
+
+export function loadModuleConfigToolbarTheme(): ModuleConfigToolbarTheme {
+  if (typeof window === 'undefined') return 'light'
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    if (stored === 'dark' || stored === 'light') return stored
+  } catch {
+    // ignore
+  }
+  return detectPortalTheme()
+}
+
+export function saveModuleConfigToolbarTheme(theme: ModuleConfigToolbarTheme): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, theme)
+  } catch {
+    // ignore
+  }
+}
+
+export function toggleModuleConfigToolbarTheme(
+  theme: ModuleConfigToolbarTheme,
+): ModuleConfigToolbarTheme {
+  const next: ModuleConfigToolbarTheme = theme === 'dark' ? 'light' : 'dark'
+  saveModuleConfigToolbarTheme(next)
+  return next
+}

package/src/dev-module-config/ui/navigation/ModuleConfigNavContext.tsx

@@ -0,0 +1,188 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react'
+
+export type BreadcrumbSegment = {
+  id: string
+  label: string
+  onClick?: () => void
+}
+
+type ModuleConfigNavContextValue = {
+  segments: Array<BreadcrumbSegment>
+  drillDownPanel: ReactNode | null
+  pushSegment: (segment: Omit<BreadcrumbSegment, 'onClick'> & { onPop?: () => void }) => void
+  popTo: (id: string) => void
+  resetNav: () => void
+  registerPopHandler: (id: string, handler: () => void) => void
+  /** @deprecated use registerDrillDownPanel */
+  setDrillDownPanel: (panel: ReactNode | null) => void
+  registerDrillDownPanel: (id: string, panel: ReactNode | null) => void
+}
+
+const ROOT_SEGMENT: BreadcrumbSegment = { id: 'contents', label: 'Contents' }
+
+const ModuleConfigNavContext = createContext<ModuleConfigNavContextValue | null>(null)
+
+export function ModuleConfigNavProvider({ children }: { children: ReactNode }) {
+  const [stack, setStack] = useState<Array<BreadcrumbSegment>>([ROOT_SEGMENT])
+  const [popHandlers, setPopHandlers] = useState<Record<string, () => void>>({})
+  const [drillDownPanels, setDrillDownPanels] = useState<Record<string, ReactNode>>({})
+  const [drillDownOrder, setDrillDownOrder] = useState<string[]>([])
+
+  const registerDrillDownPanel = useCallback((id: string, panel: ReactNode | null) => {
+    if (panel === null) {
+      setDrillDownPanels((prev) => {
+        if (!(id in prev)) return prev
+        const next = { ...prev }
+        delete next[id]
+        return next
+      })
+      setDrillDownOrder((order) => order.filter((entry) => entry !== id))
+      return
+    }
+
+    setDrillDownPanels((prev) => ({ ...prev, [id]: panel }))
+    setDrillDownOrder((order) => (order.includes(id) ? order : [...order, id]))
+  }, [])
+
+  const clearAllDrillDownPanels = useCallback(() => {
+    setDrillDownPanels({})
+    setDrillDownOrder([])
+  }, [])
+
+  const drillDownPanel = useMemo(() => {
+    const topId = drillDownOrder[drillDownOrder.length - 1]
+    return topId ? (drillDownPanels[topId] ?? null) : null
+  }, [drillDownOrder, drillDownPanels])
+
+  const setDrillDownPanel = useCallback(
+    (panel: ReactNode | null) => {
+      if (panel === null) {
+        clearAllDrillDownPanels()
+        return
+      }
+      registerDrillDownPanel('__legacy__', panel)
+    },
+    [clearAllDrillDownPanels, registerDrillDownPanel],
+  )
+
+  const registerPopHandler = useCallback((id: string, handler: () => void) => {
+    setPopHandlers((prev) => ({ ...prev, [id]: handler }))
+  }, [])
+
+  const popTo = useCallback(
+    (id: string) => {
+      if (id === 'module' || id === 'contents') {
+        for (const segment of stack.slice(1)) {
+          popHandlers[segment.id]?.()
+        }
+        setStack([ROOT_SEGMENT])
+        clearAllDrillDownPanels()
+        return
+      }
+
+      setStack((prev) => {
+        const index = prev.findIndex((segment) => segment.id === id)
+        if (index < 0) return prev
+
+        const removed = prev.slice(index + 1)
+        for (const segment of removed) {
+          popHandlers[segment.id]?.()
+        }
+
+        return prev.slice(0, index + 1)
+      })
+    },
+    [clearAllDrillDownPanels, popHandlers, stack],
+  )
+
+  const pushSegment = useCallback(
+    (segment: Omit<BreadcrumbSegment, 'onClick'> & { onPop?: () => void }) => {
+      if (segment.onPop) {
+        setPopHandlers((prev) => ({ ...prev, [segment.id]: segment.onPop! }))
+      }
+      setStack((prev) => {
+        const existing = prev.findIndex((item) => item.id === segment.id)
+        if (existing >= 0) {
+          return [...prev.slice(0, existing + 1), { id: segment.id, label: segment.label }]
+        }
+        return [...prev, { id: segment.id, label: segment.label }]
+      })
+    },
+    [],
+  )
+
+  const resetNav = useCallback(() => {
+    setStack([ROOT_SEGMENT])
+    clearAllDrillDownPanels()
+  }, [clearAllDrillDownPanels])
+
+  const segments = useMemo(() => {
+    const moduleTitle: BreadcrumbSegment = {
+      id: 'module',
+      label: 'woodsportal-module',
+      onClick: stack.length > 1 ? () => popTo('module') : undefined,
+    }
+
+    if (stack.length <= 1) {
+      return [ROOT_SEGMENT, moduleTitle]
+    }
+
+    const middle = stack.slice(1).map((segment) => ({
+      ...segment,
+      onClick: () => popTo(segment.id),
+    }))
+
+    if (middle.length > 2) {
+      const collapsed: Array<BreadcrumbSegment> = [
+        middle[0]!,
+        { id: 'ellipsis', label: '…' },
+        middle[middle.length - 1]!,
+      ]
+      return [ROOT_SEGMENT, moduleTitle, ...collapsed]
+    }
+
+    return [ROOT_SEGMENT, moduleTitle, ...middle]
+  }, [popTo, stack])
+
+  const value = useMemo(
+    () => ({
+      segments,
+      drillDownPanel,
+      pushSegment,
+      popTo,
+      resetNav,
+      registerPopHandler,
+      setDrillDownPanel,
+      registerDrillDownPanel,
+    }),
+    [
+      segments,
+      drillDownPanel,
+      pushSegment,
+      popTo,
+      resetNav,
+      registerPopHandler,
+      setDrillDownPanel,
+      registerDrillDownPanel,
+    ],
+  )
+
+  return (
+    <ModuleConfigNavContext.Provider value={value}>{children}</ModuleConfigNavContext.Provider>
+  )
+}
+
+export function useModuleConfigNav() {
+  const ctx = useContext(ModuleConfigNavContext)
+  if (!ctx) {
+    throw new Error('useModuleConfigNav must be used within ModuleConfigNavProvider')
+  }
+  return ctx
+}

package/src/dev-module-config/ui/use-dev-module-config-live-revision.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+import { MODULE_CONFIG_CHANGED } from '../schema/types'
+
+/**
+ * DEV-only: bump when module config is applied so the portal can re-read hubSpotData exports.
+ */
+export function useDevModuleConfigLiveRevision(): number {
+  const [revision, setRevision] = useState(0)
+
+  useEffect(() => {
+    if (!import.meta.env.DEV) return
+
+    const onApplied = () => {
+      setRevision((value) => value + 1)
+    }
+
+    window.addEventListener(MODULE_CONFIG_CHANGED, onApplied)
+    return () => window.removeEventListener(MODULE_CONFIG_CHANGED, onApplied)
+  }, [])
+
+  return revision
+}

package/src/dev-module-config/ui/use-hubspot-live-exports.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import { getDevHubSpotLiveExports, type DevHubSpotLiveExports } from '@/data/dev-hubspot-sync'
+import { refreshHubSpotUserDetails } from '@/data/hubSpotData'
+import { useDevModuleConfigLiveRevision } from './use-dev-module-config-live-revision'
+
+/**
+ * DEV-only: re-read hubSpotData exports after module config Apply.
+ * Production callers receive revision 0 and should keep using module-level imports.
+ */
+export function useHubSpotLiveExports(): {
+  revision: number
+  live: DevHubSpotLiveExports | null
+} {
+  const revision = useDevModuleConfigLiveRevision()
+
+  return useMemo(() => {
+    if (!import.meta.env.DEV) {
+      return { revision: 0, live: null }
+    }
+
+    refreshHubSpotUserDetails()
+    return {
+      revision,
+      live: getDevHubSpotLiveExports(),
+    }
+  }, [revision])
+}

package/src/dev-module-config/ui/use-module-config.ts

@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useState } from 'react'
+import {
+  getModuleConfigState,
+  getModuleFieldValues,
+  initModuleConfigRuntime,
+  updateModuleFieldValues,
+} from '../runtime/module-config-runtime'
+import { validateModuleConfig, type ValidationError } from '../schema/validate-module-config'
+import { loadWorkspaceMeta } from '../storage/workspace-store'
+import { MODULE_CONFIG_CHANGED } from '../schema/types'
+import type { ModuleConfigState } from '../runtime/module-config-runtime'
+import type { ModuleFieldValues } from '../schema/types'
+
+export function useModuleConfig() {
+  const [state, setState] = useState<ModuleConfigState | null>(() => getModuleConfigState())
+  const [draftValues, setDraftValues] = useState<ModuleFieldValues>(() => getModuleFieldValues())
+  const [appliedValues, setAppliedValues] = useState<ModuleFieldValues>(() => getModuleFieldValues())
+  const [validationErrors, setValidationErrors] = useState<Array<ValidationError>>([])
+  const [persistenceSource, setPersistenceSource] = useState<'local' | 'example' | 'empty'>('empty')
+  const [isApplying, setIsApplying] = useState(false)
+
+  const isDirty =
+    JSON.stringify(draftValues) !== JSON.stringify(appliedValues)
+
+  useEffect(() => {
+    void loadWorkspaceMeta().then((source) => setPersistenceSource(source ?? 'empty'))
+  }, [appliedValues])
+
+  useEffect(() => {
+    const onChange = (event: Event) => {
+      const detail = (event as CustomEvent<ModuleConfigState>).detail
+      setState(detail)
+      setDraftValues(detail.moduleValues)
+      setAppliedValues(detail.moduleValues)
+      setValidationErrors([])
+    }
+    window.addEventListener(MODULE_CONFIG_CHANGED, onChange)
+    return () => window.removeEventListener(MODULE_CONFIG_CHANGED, onChange)
+  }, [])
+
+  const setFieldValue = useCallback((path: string, value: unknown) => {
+    setDraftValues((current) => {
+      const next = structuredClone(current)
+      const parts = path.split('.')
+      let cursor: Record<string, unknown> = next
+      for (let i = 0; i < parts.length - 1; i++) {
+        const key = parts[i]!
+        if (cursor[key] === undefined || cursor[key] === null) cursor[key] = {}
+        cursor = cursor[key] as Record<string, unknown>
+      }
+      cursor[parts[parts.length - 1]!] = value
+      return next
+    })
+    setValidationErrors((errors) => errors.filter((error) => !error.path.startsWith(path)))
+  }, [])
+
+  const applyChanges = useCallback(async (): Promise<boolean> => {
+    const currentState = getModuleConfigState()
+    if (!currentState) return false
+
+    const errors = validateModuleConfig(currentState.schema, draftValues)
+    if (errors.length > 0) {
+      setValidationErrors(errors)
+      return false
+    }
+
+    setIsApplying(true)
+    try {
+      const updated = await updateModuleFieldValues(draftValues)
+      setState(updated)
+      setDraftValues(updated.moduleValues)
+      setAppliedValues(updated.moduleValues)
+      setValidationErrors([])
+      const source = await loadWorkspaceMeta()
+      setPersistenceSource(source ?? 'local')
+      return true
+    } catch (error) {
+      console.error('[module-config] Apply failed', error)
+      setValidationErrors([
+        {
+          path: '_apply',
+          label: 'Apply',
+          message:
+            error instanceof Error
+              ? error.message
+              : 'Failed to save config. Restart yarn local if the dev server was started before the module-config plugin was added.',
+        },
+      ])
+      return false
+    } finally {
+      setIsApplying(false)
+    }
+  }, [draftValues])
+
+  const discardDraft = useCallback(() => {
+    setDraftValues(appliedValues)
+    setValidationErrors([])
+  }, [appliedValues])
+
+  const confirmDiscardIfDirty = useCallback((): boolean => {
+    if (!isDirty) return true
+    return window.confirm('You have unsaved changes. Discard them?')
+  }, [isDirty])
+
+  return {
+    state,
+    moduleValues: draftValues,
+    appliedValues,
+    isDirty,
+    isApplying,
+    validationErrors,
+    persistenceSource,
+    setFieldValue,
+    applyChanges,
+    discardDraft,
+    confirmDiscardIfDirty,
+  }
+}
+
+export async function ensureModuleConfigReady() {
+  if (!getModuleConfigState()) {
+    await initModuleConfigRuntime()
+  }
+}

package/src/routing/build-api-routes.ts

@@ -0,0 +1,37 @@
+import { formatCustomObjectLabel, formatPath } from './route-format'
+
+export const makeLink = (menuItem: Record<string, unknown>) => {
+  let link = menuItem?.hubspotObjectTypeId as string | undefined
+
+  if (menuItem?.companyAsMediator) {
+    link = `${link}-c`
+  }
+
+  if (menuItem?.specPipeLine && menuItem?.pipeLineId) {
+    link = `${link}-${menuItem?.pipeLineId}`
+  }
+
+  if (!link) {
+    return `/${formatPath((menuItem.tabName || menuItem.label) as string)}`
+  }
+
+  return `/${link}`
+}
+
+export function buildApiRoutes(sidebarMenuOptions: Array<Record<string, unknown>>) {
+  return sidebarMenuOptions.map((menuItem) => ({
+    hubspotObjectTypeId: `${menuItem.hubspotObjectTypeId ?? ''}`,
+    path: makeLink(menuItem),
+    title: formatCustomObjectLabel((menuItem.tabName || menuItem.label) as string),
+    icon: menuItem.icon,
+    isRequiredAuth: true,
+    isHeader: true,
+    companyAsMediator: menuItem.companyAsMediator,
+    pipeLineId: menuItem.pipeLineId,
+    specPipeLine: menuItem.specPipeLine,
+    objectDescription: menuItem.objectDescription,
+    objectUserProperties: menuItem.objectUserProperties,
+    homeCardsView: menuItem.homeCardsView,
+    objectUserPropertiesView: menuItem.objectUserPropertiesView,
+  }))
+}

package/src/routing/route-format.ts

@@ -0,0 +1,19 @@
+/** Route path / label helpers — runtime-safe, no consumer path aliases. */
+
+export const formatPath = (key: unknown) => {
+  if (!key || typeof key !== 'string') return ''
+
+  return key
+    .replace(/\s+/g, '-')
+    .replace(/#/g, '%23')
+    .replace(/\b\w/g, (l: string) => l.toLowerCase())
+}
+
+export function formatCustomObjectLabel(key = '') {
+  if (!key || typeof key !== 'string') return ''
+
+  return key
+    .replace(/-/g, ' ')
+    .replace(/%23/g, '#')
+    .replace(/\b[a-z]/g, (l: string) => l.toUpperCase())
+}

package/templates/module-hybrid-cdn/index.html

@@ -1 +1,12 @@
-<!doctype html><html><head><meta charset="UTF-8"/><title>WoodsCLI dev</title></head><body><div id="app"></div><script type="module" src="/src/main.tsx"></script></body></html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WoodsCLI dev</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/module-hybrid-cdn/package.json

@@ -9,7 +9,7 @@
     "deploy:prod": "wp deploy --tier prod"
   },
   "devDependencies": {
-    "@woodsportal/hubspot-kit": "^1.0.3",
+    "@woodsportal/hubspot-kit": "^1.0.5",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/router-plugin": "^1.121.2",
     "@vitejs/plugin-react": "^4.3.4",

package/templates/module-hybrid-cdn/src/assets/css/main.dev.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+
+@source '../../.wphs/**/*.{js,jsx,ts,tsx}';

package/templates/module-hybrid-cdn/src/defaultData.ts

@@ -0,0 +1,7 @@
+/** Local dev fixtures for module-config runtime (greenfield wp init). */
+export const defaultData = {
+  dataSourceSet: [],
+  hubId: 'dev',
+  userData: {},
+  objectList: [] as unknown[],
+}

package/templates/module-hybrid-cdn/src/hubspot/types.ts

@@ -0,0 +1,17 @@
+/** Runtime contract for window.hubSpotData (greenfield stub). */
+export type HubSpotPortalData = {
+  dataSourceSet?: unknown
+  hubId?: string | number
+  apiBaseUrlOption?: string
+  userData?: unknown
+  objectList?: unknown[]
+  isInEditor?: boolean
+}
+
+declare global {
+  interface Window {
+    hubSpotData?: HubSpotPortalData
+  }
+}
+
+export {}

package/templates/module-hybrid-cdn/src/main.tsx

@@ -1,2 +1,4 @@
-import { mountDevPortal } from '@woodsportal/hubspot-kit/dev/bootstrap'
-void mountDevPortal()
+import './assets/css/main.dev.css'
+import { mountGreenfieldDev } from '@woodsportal/hubspot-kit/dev/bootstrap-greenfield'
+
+void mountGreenfieldDev()

package/templates/module-monolith/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WoodsCLI dev</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/module-monolith/package.json

@@ -9,7 +9,7 @@
     "deploy:prod": "wp deploy --tier prod"
   },
   "devDependencies": {
-    "@woodsportal/hubspot-kit": "^1.0.3",
+    "@woodsportal/hubspot-kit": "^1.0.5",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/router-plugin": "^1.121.2",
     "@vitejs/plugin-react": "^4.3.4",

package/templates/module-monolith/src/assets/css/main.dev.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+
+@source '../../.wphs/**/*.{js,jsx,ts,tsx}';

package/templates/module-monolith/src/defaultData.ts

@@ -0,0 +1,7 @@
+/** Local dev fixtures for module-config runtime (greenfield wp init). */
+export const defaultData = {
+  dataSourceSet: [],
+  hubId: 'dev',
+  userData: {},
+  objectList: [] as unknown[],
+}

package/templates/module-monolith/src/hubspot/types.ts

@@ -0,0 +1,17 @@
+/** Runtime contract for window.hubSpotData (greenfield stub). */
+export type HubSpotPortalData = {
+  dataSourceSet?: unknown
+  hubId?: string | number
+  apiBaseUrlOption?: string
+  userData?: unknown
+  objectList?: unknown[]
+  isInEditor?: boolean
+}
+
+declare global {
+  interface Window {
+    hubSpotData?: HubSpotPortalData
+  }
+}
+
+export {}

package/templates/module-monolith/src/main.tsx

@@ -0,0 +1,4 @@
+import './assets/css/main.dev.css'
+import { mountGreenfieldDev } from '@woodsportal/hubspot-kit/dev/bootstrap-greenfield'
+
+void mountGreenfieldDev()

package/templates/theme-starter/package.json

@@ -9,7 +9,7 @@
     "deploy:prod": "wp deploy --tier prod"
   },
   "devDependencies": {
-    "@woodsportal/hubspot-kit": "^1.0.3",
+    "@woodsportal/hubspot-kit": "^1.0.5",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/router-plugin": "^1.121.2",
     "@vitejs/plugin-react": "^4.3.4",

package/vite/vite.config.dev.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vite'
 import viteReact from '@vitejs/plugin-react'
 import { TanStackRouterVite } from '@tanstack/router-plugin/vite'
+import { existsSync } from 'node:fs'
 import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import tailwindcss from '@tailwindcss/vite'
@@ -14,10 +15,14 @@ import { createDevReactPluginOptions } from '../scripts/vite/react-dev-plugin-op
 import { ensureDevKitShims } from '../scripts/vite/ensure-dev-kit-shims.js'
 import isPrefix from '../scripts/tailwind/prefix.env.js'
 import { findProjectRoot, getKitRoot } from '../scripts/project-root.mjs'
+import { readWoodsportalConfig } from '../scripts/read-woodsportal-config.mjs'
 
 const kitRoot = getKitRoot()
 const projectRoot = findProjectRoot()
 const { moduleConfigRoot, bootstrapShim } = ensureDevKitShims(projectRoot, kitRoot)
+const { config } = readWoodsportalConfig(projectRoot)
+const routesDir = resolve(projectRoot, 'src/routes')
+const hasTanStackRoutes = existsSync(routesDir)
 
 export default defineConfig(({ mode, command }) => {
   return {
@@ -27,7 +32,7 @@ export default defineConfig(({ mode, command }) => {
       ...(command === 'serve' && mode === 'dev'
         ? [sdkLogBridge(), moduleConfigStore(projectRoot)]
         : []),
-      TanStackRouterVite({ autoCodeSplitting: false }),
+      ...(hasTanStackRoutes ? [TanStackRouterVite({ autoCodeSplitting: false })] : []),
       viteReact(createDevReactPluginOptions()),
       tailwindcss(),
       ...(isPrefix(mode) ? [tailwindPrefixPlugin(), TailwindContentPlugin()] : []),
@@ -37,6 +42,7 @@ export default defineConfig(({ mode, command }) => {
       alias: {
         '@/dev/module-config': moduleConfigRoot,
         '@woodsportal/hubspot-kit/dev/bootstrap': bootstrapShim,
+        '@wphs/adapter': resolve(projectRoot, config?.dev?.adapter ?? './wphs.adapter.ts'),
         '@': resolve(projectRoot, './src'),
       },
     },