@woodsportal/hubspot-kit 1.0.4 → 1.0.5

package/src/dev-module-config/ui/FieldRenderer.tsx

@@ -0,0 +1,353 @@
+import { useState, type ReactNode } from 'react'
+import { normalizeFieldChoices } from '../schema/normalize-choices'
+import { isFieldVisible } from '../schema/visibility'
+import { getNestedValue } from '../runtime/module-config-runtime'
+import { HsFieldLabel } from './hubspot/HsFieldLabel'
+import { HsOccurrenceGroupEditor } from './hubspot/HsOccurrenceGroupEditor'
+import { HsToggleRow } from './hubspot/HsToggleRow'
+import { hsTypography } from './hubspot/module-config-typography'
+import { mcMotion } from './module-config-motion'
+import { ModuleConfigCollapsible } from './ModuleConfigCollapsible'
+import { HsImageField } from './hubspot/HsImageField'
+import { HsColorField } from './hubspot/HsColorField'
+import {
+  HsLinkField,
+  HsNumberField,
+  HsRichTextField,
+  HsTextField,
+} from './hubspot/HsFieldWidgets'
+import type { VisibilityContext } from '../schema/visibility'
+import type { HubSpotFieldDefinition, ModuleFieldValues } from '../schema/types'
+import { isModuleConfigSectionDefaultCollapsed } from '../schema/types'
+
+type FieldRendererProps = {
+  field: HubSpotFieldDefinition
+  moduleValues: ModuleFieldValues
+  pathPrefix?: string
+  /** Parent repeater scope for nested drill-down panels (e.g. menu_options.objects.0) */
+  editorScope?: string
+  onChange: (path: string, value: unknown) => void
+  compact?: boolean
+  visibilityContext?: VisibilityContext
+  validationErrors?: Array<{ path: string; message: string }>
+}
+
+function fieldPath(prefix: string | undefined, name: string) {
+  return prefix ? `${prefix}.${name}` : name
+}
+
+function readRaw(moduleValues: ModuleFieldValues, path: string): unknown {
+  return getNestedValue(moduleValues, path)
+}
+
+function ColorField({
+  field,
+  value,
+  onChange,
+  path,
+}: {
+  field: HubSpotFieldDefinition
+  value: { color?: string; opacity?: number | string }
+  onChange: (path: string, value: unknown) => void
+  path: string
+}) {
+  return (
+    <HsColorField
+      label={field.label}
+      required={field.required}
+      helpText={field.help_text}
+      value={value}
+      onChange={(next) => onChange(path, next)}
+    />
+  )
+}
+
+function BooleanField({
+  field,
+  value,
+  onChange,
+  path,
+}: {
+  field: HubSpotFieldDefinition
+  value: boolean
+  onChange: (path: string, value: unknown) => void
+  path: string
+}) {
+  const useToggle = field.display === 'toggle' || field.display === undefined || field.display === ''
+
+  if (useToggle) {
+    return (
+      <HsToggleRow
+        label={field.label}
+        required={field.required}
+        helpText={field.help_text}
+        checked={Boolean(value)}
+        onChange={(checked) => onChange(path, checked)}
+      />
+    )
+  }
+
+  return (
+    <label className={`mb-4 flex items-center justify-between gap-3 ${mcMotion.transition}`}>
+      <HsFieldLabel label={field.label} required={field.required} helpText={field.help_text} />
+      <input
+        type="checkbox"
+        checked={Boolean(value)}
+        onChange={(e) => onChange(path, e.target.checked)}
+        className={`h-4 w-4 mc-checkbox ${mcMotion.transition}`}
+      />
+    </label>
+  )
+}
+
+function ChoiceField({
+  field,
+  value,
+  onChange,
+  path,
+}: {
+  field: HubSpotFieldDefinition
+  value: string
+  onChange: (path: string, value: unknown) => void
+  path: string
+}) {
+  const choices = normalizeFieldChoices(field)
+
+  return (
+    <div className="mb-4">
+      <HsFieldLabel label={field.label} required={field.required} helpText={field.help_text} />
+      <select
+        className={`w-full rounded px-3 py-2 focus:outline-none ${hsTypography.input} mc-select ${mcMotion.fieldControl}`}
+        value={value}
+        onChange={(e) => onChange(path, e.target.value)}
+      >
+        {choices.map((choice) => (
+          <option key={choice.value} value={choice.value}>
+            {choice.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}
+
+function groupInitialOpen(field: HubSpotFieldDefinition): boolean {
+  if (isModuleConfigSectionDefaultCollapsed(field.name)) {
+    return false
+  }
+  return field.expanded ?? true
+}
+
+function GroupField({
+  field,
+  moduleValues,
+  pathPrefix,
+  onChange,
+  compact,
+  visibilityContext,
+  validationErrors,
+}: FieldRendererProps) {
+  const [open, setOpen] = useState(() => groupInitialOpen(field))
+  const path = fieldPath(pathPrefix, field.name)
+
+  return (
+    <ModuleConfigCollapsible
+      open={open}
+      onToggle={() => setOpen((v) => !v)}
+      label={field.label}
+      headerClassName={hsTypography.groupHeader}
+    >
+      {(field.children ?? []).map((child) => (
+        <FieldRenderer
+          key={child.id ?? child.name}
+          field={child}
+          moduleValues={moduleValues}
+          pathPrefix={path}
+          onChange={onChange}
+          compact={compact}
+          visibilityContext={visibilityContext}
+          validationErrors={validationErrors}
+        />
+      ))}
+    </ModuleConfigCollapsible>
+  )
+}
+
+function isOccurrenceGroup(field: HubSpotFieldDefinition): boolean {
+  return Boolean(field.occurrence && field.children?.length)
+}
+
+function FieldError({ path, validationErrors }: { path: string; validationErrors?: FieldRendererProps['validationErrors'] }) {
+  const error = validationErrors?.find((item) => item.path === path)
+  if (!error) return null
+  return <p className={`mb-2 ${hsTypography.error}`}>{error.message}</p>
+}
+
+export function FieldRenderer({
+  field,
+  moduleValues,
+  pathPrefix,
+  editorScope,
+  onChange,
+  compact,
+  visibilityContext,
+  validationErrors,
+}: FieldRendererProps) {
+  const visibilityCtx = visibilityContext ?? { moduleValues }
+  if (!isFieldVisible(field, visibilityCtx)) return null
+
+  const path = fieldPath(pathPrefix, field.name)
+  const raw = readRaw(moduleValues, path)
+
+  if (field.type === 'group' && !isOccurrenceGroup(field)) {
+    return (
+      <GroupField
+        field={field}
+        moduleValues={moduleValues}
+        pathPrefix={pathPrefix}
+        onChange={onChange}
+        compact={compact}
+        visibilityContext={visibilityContext}
+        validationErrors={validationErrors}
+      />
+    )
+  }
+
+  if (isOccurrenceGroup(field)) {
+    const items = Array.isArray(raw) ? (raw as Array<ModuleFieldValues>) : []
+    const rootModule = visibilityContext?.moduleValues ?? moduleValues
+    const labelField =
+      field.name === 'properties'
+        ? 'properties_value'
+        : field.name === 'dashboard_cards'
+          ? 'card_title'
+          : 'list_object_name'
+
+    return (
+      <>
+        <FieldError path={path} validationErrors={validationErrors} />
+        <HsOccurrenceGroupEditor
+          field={field}
+          items={items}
+          moduleValues={rootModule}
+          path={path}
+          editorScope={editorScope}
+          onChange={onChange}
+          labelField={labelField}
+          sectionLabel={field.label?.trim() || field.label}
+          visibilityContext={visibilityContext}
+        />
+      </>
+    )
+  }
+
+  const wrap = (node: ReactNode) => (
+    <div className="mc-field-enter">
+      <FieldError path={path} validationErrors={validationErrors} />
+      {node}
+    </div>
+  )
+
+  if (field.type === 'boolean') {
+    return wrap(<BooleanField field={field} value={Boolean(raw)} onChange={onChange} path={path} />)
+  }
+
+  if (field.type === 'color') {
+    return wrap(
+      <ColorField
+        field={field}
+        value={(raw as { color?: string; opacity?: number }) ?? { color: '', opacity: 100 }}
+        onChange={onChange}
+        path={path}
+      />,
+    )
+  }
+
+  if (field.type === 'image') {
+    return wrap(
+      <HsImageField
+        label={field.label}
+        required={field.required}
+        helpText={field.help_text}
+        value={(raw as Record<string, unknown>) ?? { src: '', alt: '' }}
+        onChange={(value) => onChange(path, value)}
+      />,
+    )
+  }
+
+  if (field.type === 'link' || field.type === 'url') {
+    const linkValue =
+      raw && typeof raw === 'object' && !Array.isArray(raw)
+        ? (raw as {
+            url?: { href?: string; type?: string }
+            open_in_new_tab?: boolean
+            no_follow?: boolean
+          })
+        : {
+            url: { href: typeof raw === 'string' ? raw : '', type: 'EXTERNAL' },
+            open_in_new_tab: false,
+            no_follow: false,
+          }
+    return wrap(
+      <HsLinkField
+        label={field.label}
+        required={field.required}
+        helpText={field.help_text}
+        value={linkValue}
+        onChange={(value) => onChange(path, value)}
+      />,
+    )
+  }
+
+  if (field.type === 'choice') {
+    return wrap(<ChoiceField field={field} value={String(raw ?? '')} onChange={onChange} path={path} />)
+  }
+
+  if (field.type === 'richtext') {
+    return wrap(
+      <HsRichTextField
+        label={field.label}
+        required={field.required}
+        helpText={field.help_text}
+        value={String(raw ?? '')}
+        onChange={(value) => onChange(path, value)}
+      />,
+    )
+  }
+
+  if (field.type === 'number') {
+    return wrap(
+      <HsNumberField
+        label={field.label}
+        required={field.required}
+        helpText={field.help_text}
+        value={Number(raw ?? 0)}
+        onChange={(value) => onChange(path, value)}
+      />,
+    )
+  }
+
+  if (field.type === 'text') {
+    const isSvg = field.name.includes('svg') || field.label.toLowerCase().includes('svg')
+    return wrap(
+      <HsTextField
+        label={field.label}
+        required={field.required}
+        helpText={field.help_text}
+        value={String(raw ?? '')}
+        onChange={(value) => onChange(path, value)}
+        multiline={isSvg}
+        monospace={isSvg}
+        darkEditor={isSvg}
+      />,
+    )
+  }
+
+  if (compact) return null
+
+  return (
+    <div className={`mb-2 ${hsTypography.helper}`}>
+      Unsupported field: {field.label} ({field.type})
+    </div>
+  )
+}

package/src/dev-module-config/ui/ModuleConfigAnimatedPresence.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { getModuleConfigMotionMs, mcMotion, type ModuleConfigEnterFrom } from './module-config-motion'
+
+type ModuleConfigAnimatedPresenceProps = {
+  show: boolean
+  children: ReactNode
+  className?: string
+  variant?: 'slide' | 'fade'
+  enterFrom?: ModuleConfigEnterFrom
+}
+
+export function ModuleConfigAnimatedPresence({
+  show,
+  children,
+  className = '',
+  variant = 'fade',
+  enterFrom = 'bottom',
+}: ModuleConfigAnimatedPresenceProps) {
+  const [mounted, setMounted] = useState(show)
+  const [visible, setVisible] = useState(show)
+  const contentRef = useRef<ReactNode>(children)
+
+  if (show || mounted) {
+    contentRef.current = children
+  }
+
+  useEffect(() => {
+    const motionMs = getModuleConfigMotionMs()
+
+    if (show) {
+      setMounted(true)
+      if (motionMs === 0) {
+        setVisible(true)
+        return
+      }
+      const frame = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setVisible(true))
+      })
+      return () => cancelAnimationFrame(frame)
+    }
+
+    setVisible(false)
+    const timer = window.setTimeout(() => setMounted(false), motionMs)
+    return () => clearTimeout(timer)
+  }, [show])
+
+  if (!mounted) return null
+
+  if (variant === 'slide') {
+    const slideFrom = enterFrom === 'left' ? 'left' : 'right'
+
+    return (
+      <div
+        className={`mc-slide-panel ${className}`.trim()}
+        data-visible={visible ? 'true' : 'false'}
+        data-enter-from={slideFrom}
+      >
+        {contentRef.current}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={`${mcMotion.transition} ${className} ${
+        visible ? 'translate-y-0 opacity-100' : 'pointer-events-none translate-y-2 opacity-0'
+      }`.trim()}
+    >
+      {contentRef.current}
+    </div>
+  )
+}

package/src/dev-module-config/ui/ModuleConfigCollapsible.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+import { mcMotion } from './module-config-motion'
+import { mcSurface } from './module-config-surfaces'
+
+type ModuleConfigCollapsibleProps = {
+  open: boolean
+  label: ReactNode
+  onToggle: () => void
+  children: ReactNode
+  headerClassName?: string
+}
+
+export function ModuleConfigCollapsible({
+  open,
+  label,
+  onToggle,
+  children,
+  headerClassName = '',
+}: ModuleConfigCollapsibleProps) {
+  return (
+    <div className={`mb-3 ${mcSurface.panel}`}>
+      <button
+        type="button"
+        className={`flex w-full items-center justify-between px-3 py-2.5 text-left ${headerClassName}`}
+        onClick={onToggle}
+        aria-expanded={open}
+      >
+        {label}
+        <span
+          className={`inline-block ${mcSurface.textFaint} ${mcMotion.transform} ${open ? 'rotate-0' : '-rotate-90'}`}
+          aria-hidden
+        >
+          ▾
+        </span>
+      </button>
+      <div className={`mc-collapsible-grid ${open ? 'mc-collapsible-open' : ''}`}>
+        <div className="mc-collapsible-inner">
+          <div className="mc-collapsible-body px-3 py-2">{children}</div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/dev-module-config/ui/ModuleConfigDockSideIcon.tsx

@@ -0,0 +1,27 @@
+type DockSide = 'left' | 'right'
+
+type ModuleConfigDockSideIconProps = {
+  /** Target side when clicked (where the panel will dock). */
+  side: DockSide
+  className?: string
+}
+
+/** Rounded frame with a filled sidebar on left or right — matches dev toolbar dock control. */
+export function ModuleConfigDockSideIcon({ side, className = 'h-4 w-4' }: ModuleConfigDockSideIconProps) {
+  const barX = side === 'left' ? 4.5 : 11.5
+
+  return (
+    <svg viewBox="0 0 20 20" className={className} fill="none" aria-hidden>
+      <rect
+        x="3"
+        y="4"
+        width="14"
+        height="12"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="1.5"
+      />
+      <rect x={barX} y="6" width="4" height="8" rx="0.75" fill="currentColor" />
+    </svg>
+  )
+}

package/src/dev-module-config/ui/ModuleConfigOverlay.tsx

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import './module-config-theme.css'
+import { ModuleConfigShell } from './ModuleConfigShell'
+import { ModuleConfigUiProvider } from './ModuleConfigUiContext'
+import {
+  loadModuleConfigOverlaySide,
+  toggleModuleConfigOverlaySide,
+  type ModuleConfigOverlaySide,
+} from './module-config-overlay-side'
+
+const OVERLAY_TRANSITION_MS = 280
+
+function getTransitionMs(): number {
+  if (typeof window === 'undefined') return OVERLAY_TRANSITION_MS
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : OVERLAY_TRANSITION_MS
+}
+
+export function ModuleConfigOverlay() {
+  const [open, setOpen] = useState(false)
+  const [mounted, setMounted] = useState(false)
+  const [entered, setEntered] = useState(false)
+  const [side, setSide] = useState<ModuleConfigOverlaySide>(() => loadModuleConfigOverlaySide())
+  const [sideTransitioning, setSideTransitioning] = useState(false)
+  const sideSwitchTimerRef = useRef<number | null>(null)
+
+  const clearSideSwitchTimer = useCallback(() => {
+    if (sideSwitchTimerRef.current != null) {
+      window.clearTimeout(sideSwitchTimerRef.current)
+      sideSwitchTimerRef.current = null
+    }
+  }, [])
+
+  const requestClose = useCallback(() => {
+    setOpen(false)
+  }, [])
+
+  useEffect(() => () => clearSideSwitchTimer(), [clearSideSwitchTimer])
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if ((event.ctrlKey || event.metaKey) && event.shiftKey && event.key.toLowerCase() === 'z') {
+        event.preventDefault()
+        setOpen((value) => !value)
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [])
+
+  useEffect(() => {
+    const transitionMs = getTransitionMs()
+
+    if (open) {
+      setMounted(true)
+      if (transitionMs === 0) {
+        setEntered(true)
+        return
+      }
+      const enterFrame = requestAnimationFrame(() => {
+        requestAnimationFrame(() => setEntered(true))
+      })
+      return () => cancelAnimationFrame(enterFrame)
+    }
+
+    setEntered(false)
+    setSideTransitioning(false)
+    clearSideSwitchTimer()
+    const timer = window.setTimeout(() => setMounted(false), transitionMs)
+    return () => clearTimeout(timer)
+  }, [clearSideSwitchTimer, open])
+
+  const onToggleSide = useCallback(() => {
+    if (sideTransitioning || !entered) return
+
+    const transitionMs = getTransitionMs()
+    if (transitionMs === 0) {
+      setSide((current) => toggleModuleConfigOverlaySide(current))
+      return
+    }
+
+    setSideTransitioning(true)
+    setEntered(false)
+    clearSideSwitchTimer()
+
+    sideSwitchTimerRef.current = window.setTimeout(() => {
+      sideSwitchTimerRef.current = null
+      setSide((current) => toggleModuleConfigOverlaySide(current))
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          setEntered(true)
+          setSideTransitioning(false)
+        })
+      })
+    }, transitionMs)
+  }, [clearSideSwitchTimer, entered, sideTransitioning])
+
+  if (!mounted) return null
+
+  const colorPickerPlacement = side === 'right' ? 'left' : 'right'
+  const enteredClass = entered ? 'mc-overlay-entered' : ''
+  const inertClass = entered && !sideTransitioning ? '' : 'mc-overlay-inert'
+
+  return createPortal(
+    <ModuleConfigUiProvider colorPickerPlacement={colorPickerPlacement} layout="overlay">
+      <div aria-hidden className={`mc-overlay-backdrop ${enteredClass}`} />
+      <aside
+        role="dialog"
+        aria-modal="true"
+        aria-label="Module config"
+        data-side={side}
+        className={`mc-toolbar-root mc-overlay-drawer ${enteredClass} ${inertClass}`}
+      >
+        <div className="min-h-0 flex-1">
+          <ModuleConfigShell
+            compact
+            overlaySide={side}
+            overlaySideTransitioning={sideTransitioning}
+            onToggleOverlaySide={onToggleSide}
+            onRequestClose={requestClose}
+            showToolbar
+          />
+        </div>
+      </aside>
+    </ModuleConfigUiProvider>,
+    document.body,
+  )
+}
+
+export function registerModuleConfigShortcutHint() {
+  if (import.meta.env.DEV) {
+    console.info('[WoodsPortal] Module config overlay: Ctrl+Shift+Z (dock left/right in panel header)')
+  }
+}