@freighttech/ui 0.13.18

package/src/backend/TruncatedCell.tsx

@@ -0,0 +1,133 @@
+"use client"
+
+import * as React from 'react'
+import { SimpleTooltip } from '../primitives/tooltip'
+import { cn } from '@open-mercato/shared/lib/utils'
+
+export type TruncatedCellProps = {
+  children: React.ReactNode
+  /** Maximum width for the cell content. Can be a Tailwind class (e.g., 'max-w-[200px]') or CSS value */
+  maxWidth?: string
+  /** Custom class name for the wrapper */
+  className?: string
+  /** Tooltip content - if not provided, will try to extract text from children */
+  tooltipContent?: React.ReactNode
+  /** Disable truncation and tooltip */
+  disabled?: boolean
+}
+
+/**
+ * Extracts text content from React nodes for tooltip display
+ */
+function extractTextContent(node: React.ReactNode): string {
+  if (node == null) return ''
+  if (typeof node === 'string') return node
+  if (typeof node === 'number') return String(node)
+  if (typeof node === 'boolean') return ''
+  if (Array.isArray(node)) {
+    return node.map(extractTextContent).join('')
+  }
+  if (React.isValidElement(node)) {
+    // Handle React elements - extract text from props.children
+    const props = node.props as Record<string, unknown>
+    if (props) {
+      // First try children
+      if (props.children != null) {
+        const childText = extractTextContent(props.children as React.ReactNode)
+        if (childText) return childText
+      }
+      // Try common text props
+      if (typeof props.value === 'string') return props.value
+      if (typeof props.label === 'string') return props.label
+      if (typeof props.title === 'string') return props.title
+    }
+  }
+  // Try to convert to string as last resort
+  if (node && typeof node === 'object' && 'toString' in node) {
+    const str = String(node)
+    if (str !== '[object Object]') return str
+  }
+  return ''
+}
+
+/**
+ * A cell wrapper that truncates content and shows a tooltip on hover
+ * only when the content is wider than the available space.
+ *
+ * @example
+ * <TruncatedCell maxWidth="max-w-[200px]">
+ *   <span>This is a very long text that will be truncated</span>
+ * </TruncatedCell>
+ */
+export function TruncatedCell({
+  children,
+  maxWidth = 'max-w-[150px]',
+  className,
+  tooltipContent,
+  disabled = false,
+}: TruncatedCellProps) {
+  const contentRef = React.useRef<HTMLDivElement>(null)
+  const [isTruncated, setIsTruncated] = React.useState(false)
+
+  // Get tooltip content - prefer explicit tooltipContent, fall back to extracting from children
+  const resolvedTooltipContent = tooltipContent ?? extractTextContent(children)
+
+  // Check if content is truncated after render and on resize
+  React.useEffect(() => {
+    const checkTruncation = () => {
+      const el = contentRef.current
+      if (el) {
+        setIsTruncated(el.scrollWidth > el.clientWidth)
+      }
+    }
+
+    // Check on mount
+    checkTruncation()
+
+    // Use ResizeObserver to detect size changes
+    const el = contentRef.current
+    if (el) {
+      const observer = new ResizeObserver(checkTruncation)
+      observer.observe(el)
+      return () => observer.disconnect()
+    }
+  }, [children, maxWidth])
+
+  if (disabled) {
+    return <>{children}</>
+  }
+
+  // Determine if maxWidth is a Tailwind class or a CSS value
+  const isTailwindClass = maxWidth.startsWith('max-w-')
+  const styleMaxWidth = isTailwindClass ? undefined : maxWidth
+  const classMaxWidth = isTailwindClass ? maxWidth : ''
+
+  const content = (
+    <div
+      ref={contentRef}
+      className={cn(
+        'overflow-hidden text-ellipsis whitespace-nowrap',
+        classMaxWidth,
+        className
+      )}
+      style={styleMaxWidth ? { maxWidth: styleMaxWidth } : undefined}
+    >
+      {children}
+    </div>
+  )
+
+  // Only show tooltip when content is actually truncated
+  if (!resolvedTooltipContent || !isTruncated) {
+    return content
+  }
+
+  return (
+    <SimpleTooltip
+      content={resolvedTooltipContent}
+      side="top"
+      delayDuration={300}
+    >
+      {content}
+    </SimpleTooltip>
+  )
+}

package/src/backend/UserMenu.tsx

@@ -0,0 +1,153 @@
+"use client"
+import * as React from 'react'
+import Link from 'next/link'
+import { User, LogOut, Key } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Button } from '../primitives/button'
+import { IconButton } from '../primitives/icon-button'
+
+export { ProfileDropdown } from './ProfileDropdown'
+export type { ProfileDropdownProps } from './ProfileDropdown'
+
+export function UserMenu({ email }: { email?: string }) {
+  const t = useT()
+  const [open, setOpen] = React.useState(false)
+  const buttonRef = React.useRef<HTMLButtonElement>(null)
+  const menuRef = React.useRef<HTMLDivElement>(null)
+  const profileButtonRef = React.useRef<HTMLAnchorElement>(null)
+  const logoutButtonRef = React.useRef<HTMLButtonElement>(null)
+
+  // Toggle menu open/close
+  const toggle = () => setOpen((v) => !v)
+
+  // Open on hover, close when mouse leaves the menu area
+  const onMouseEnter = () => setOpen(true)
+  const onMouseLeave = () => setOpen(false)
+
+  // Close menu when clicking outside
+  React.useEffect(() => {
+    if (!open) return
+    function handleClick(event: MouseEvent) {
+      if (
+        menuRef.current &&
+        !menuRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [open])
+
+  // Keyboard navigation
+  React.useEffect(() => {
+    if (!open) return
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setOpen(false)
+        buttonRef.current?.focus()
+      } else if (event.key === 'ArrowDown' || event.key === 'Tab') {
+        event.preventDefault()
+        profileButtonRef.current?.focus() ?? logoutButtonRef.current?.focus()
+      } else if (event.key === 'ArrowUp') {
+        event.preventDefault()
+        logoutButtonRef.current?.focus() ?? profileButtonRef.current?.focus()
+      }
+    }
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [open])
+
+  // Focus the first menu item when menu opens
+  React.useEffect(() => {
+    if (open) {
+      setTimeout(() => {
+        profileButtonRef.current?.focus() ?? logoutButtonRef.current?.focus()
+      }, 0)
+    }
+  }, [open])
+
+  return (
+    <div className="relative" onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <IconButton
+        ref={buttonRef}
+        variant="ghost"
+        size="sm"
+        onClick={() => setOpen(true)}
+        aria-expanded={open}
+        aria-haspopup="menu"
+        aria-controls="user-menu-dropdown"
+        id="user-menu-button"
+        title={email || t('ui.userMenu.userFallback', 'User')}
+      >
+        <User className="size-4" />
+      </IconButton>
+      {open && (
+        <div
+          ref={menuRef}
+          id="user-menu-dropdown"
+          className="absolute right-0 top-full mt-0 w-56 rounded-md border bg-background p-1 shadow z-50"
+          role="menu"
+          aria-labelledby="user-menu-button"
+          tabIndex={-1}
+        >
+          {email && (
+            <div className="px-2 py-2 text-xs text-muted-foreground border-b mb-1">
+              <div className="font-medium">{t('ui.userMenu.loggedInAs', 'Logged in as:')}</div>
+              <div className="truncate">{email}</div>
+            </div>
+          )}
+          <Link
+            ref={profileButtonRef}
+            href="/backend/profile/change-password"
+            className="w-full text-left text-sm px-2 py-1 rounded hover:bg-accent inline-flex items-center gap-2 outline-none focus:outline-none focus-visible:outline-none ring-0 focus:ring-0 focus-visible:ring-0"
+            role="menuitem"
+            tabIndex={0}
+            onClick={() => setOpen(false)}
+            onKeyDown={(e) => {
+              if (e.key === 'Escape') {
+                setOpen(false)
+                buttonRef.current?.focus()
+              } else if (e.key === 'ArrowDown' || e.key === 'Tab') {
+                e.preventDefault()
+                logoutButtonRef.current?.focus()
+              } else if (e.key === 'ArrowUp') {
+                e.preventDefault()
+                logoutButtonRef.current?.focus()
+              }
+            }}
+          >
+            <Key className="size-4" />
+            <span>{t('ui.userMenu.changePassword', 'Change password')}</span>
+          </Link>
+          <div className="my-1 border-t" aria-hidden="true" />
+          <form action="/api/auth/logout" method="POST">
+            <Button
+              ref={logoutButtonRef}
+              variant="ghost"
+              size="sm"
+              className="w-full justify-start"
+              type="submit"
+              role="menuitem"
+              tabIndex={0}
+              onKeyDown={(e) => {
+                if (e.key === 'Escape') {
+                  setOpen(false)
+                  buttonRef.current?.focus()
+                } else if (e.key === 'ArrowUp') {
+                  e.preventDefault()
+                  profileButtonRef.current?.focus()
+                }
+              }}
+            >
+              <LogOut className="size-4" />
+              <span>{t('ui.userMenu.logout', 'Logout')}</span>
+            </Button>
+          </form>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/backend/ValueIcons.tsx

@@ -0,0 +1,48 @@
+"use client"
+import * as React from 'react'
+import { Check, X, AlertTriangle, Minus, Circle } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+
+export function BooleanIcon({ value, trueLabel, falseLabel, className }: {
+  value?: boolean | null
+  trueLabel?: string
+  falseLabel?: string
+  className?: string
+}) {
+  const v = !!value
+  return (
+    <span className={`inline-flex items-center gap-1 ${className ?? ''}`}>
+      {v ? (
+        <Check className="size-4 text-emerald-600" />
+      ) : (
+        <X className="size-4 text-muted-foreground" />
+      )}
+      {v && trueLabel ? <span className="text-xs">{trueLabel}</span> : null}
+      {!v && falseLabel ? <span className="text-xs">{falseLabel}</span> : null}
+    </span>
+  )
+}
+
+export type EnumBadgeMap = Record<string, { label: string; className?: string; icon?: React.ReactNode }>
+
+export function EnumBadge({ value, map, fallback }: { value?: string | null; map: EnumBadgeMap; fallback?: string }) {
+  if (!value) return <span className="text-muted-foreground text-xs">{fallback ?? '—'}</span>
+  const cfg = map[value] || { label: String(value) }
+  return (
+    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs border ${cfg.className ?? ''}`}>
+      {cfg.icon}
+      <span>{cfg.label}</span>
+    </span>
+  )
+}
+
+// Presets for common enums (optional helper)
+export function useSeverityPreset(): EnumBadgeMap {
+  const t = useT()
+  return {
+    low: { label: t('ui.badges.severity.low', 'Low'), className: 'border-amber-200 text-amber-700 bg-amber-50', icon: <Circle className="size-3" /> },
+    medium: { label: t('ui.badges.severity.medium', 'Medium'), className: 'border-yellow-200 text-yellow-800 bg-yellow-50', icon: <Minus className="size-3" /> },
+    high: { label: t('ui.badges.severity.high', 'High'), className: 'border-red-200 text-red-700 bg-red-50', icon: <AlertTriangle className="size-3" /> },
+  }
+}
+

package/src/backend/WebhookSetupGuide.tsx

@@ -0,0 +1,127 @@
+"use client"
+
+import * as React from 'react'
+import type { IntegrationCredentialWebhookHelp } from '@open-mercato/shared/modules/integrations/types'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { Badge } from '../primitives/badge'
+import { Button } from '../primitives/button'
+import { ChevronDown, ChevronRight, Globe, Webhook } from 'lucide-react'
+
+export type WebhookSetupGuideProps = {
+  guide: IntegrationCredentialWebhookHelp
+  buttonLabel?: string
+  className?: string
+}
+
+export function WebhookSetupGuide({
+  guide,
+  buttonLabel,
+  className,
+}: WebhookSetupGuideProps) {
+  const t = useT()
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [appOrigin, setAppOrigin] = React.useState('http://localhost:3000')
+  const resolvedButtonLabel = buttonLabel ?? t('ui.webhookGuide.showDetails', 'Show details')
+
+  React.useEffect(() => {
+    if (typeof window !== 'undefined' && window.location?.origin) {
+      setAppOrigin(window.location.origin)
+    }
+  }, [])
+
+  const endpointUrl = `${appOrigin}${guide.endpointPath}`
+
+  return (
+    <div className={cn('space-y-3', className)}>
+      <Button
+        type="button"
+        variant="link"
+        size="sm"
+        className="h-auto px-0 text-xs font-medium"
+        onClick={() => setIsOpen((current) => !current)}
+      >
+        {isOpen ? <ChevronDown className="mr-1 h-3.5 w-3.5" /> : <ChevronRight className="mr-1 h-3.5 w-3.5" />}
+        {isOpen ? t('ui.webhookGuide.hideDetails', 'Hide details') : resolvedButtonLabel}
+      </Button>
+
+      {isOpen ? (
+        <div className="space-y-4 rounded-lg border bg-muted/20 p-4">
+          <div className="space-y-1">
+            <div className="flex items-center gap-2">
+              <Webhook className="h-4 w-4 text-muted-foreground" />
+              <p className="text-sm font-semibold">{guide.title}</p>
+            </div>
+            <p className="text-sm text-muted-foreground">{guide.summary}</p>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+              {t('ui.webhookGuide.dashboardPath', 'Dashboard path')}
+            </p>
+            <div className="rounded-md border bg-background/70 px-3 py-2 text-sm">
+              {guide.dashboardPathLabel}
+            </div>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+              {t('ui.webhookGuide.steps', 'Setup steps')}
+            </p>
+            <ol className="list-decimal space-y-2 pl-5 text-sm text-muted-foreground">
+              {guide.steps.map((step) => (
+                <li key={step}>{step}</li>
+              ))}
+            </ol>
+          </div>
+
+          <div className="space-y-2">
+            <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+              {t('ui.webhookGuide.endpointUrl', 'Webhook endpoint URL')}
+            </p>
+            <div className="rounded-md border bg-background/70 px-3 py-2 font-mono text-xs break-all">
+              {endpointUrl}
+            </div>
+          </div>
+
+          {guide.events && guide.events.length > 0 ? (
+            <div className="space-y-2">
+              <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                {t('ui.webhookGuide.recommendedEvents', 'Recommended events')}
+              </p>
+              <div className="flex flex-wrap gap-2">
+                {guide.events.map((eventName) => (
+                  <Badge key={eventName} variant="outline" className="font-mono text-[11px]">
+                    {eventName}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          {guide.localDevelopment ? (
+            <div className="space-y-3">
+              <p className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
+                {t('ui.webhookGuide.localDevelopment', 'Local development')}
+              </p>
+              {guide.localDevelopment.note ? (
+                <p className="text-sm text-muted-foreground">{guide.localDevelopment.note}</p>
+              ) : null}
+              <div className="rounded-md border bg-background/70 px-3 py-2 font-mono text-xs">
+                {guide.localDevelopment.tunnelCommand}
+              </div>
+              <div className="rounded-md border bg-background/70 px-3 py-2 font-mono text-xs break-all">
+                {guide.localDevelopment.publicUrlExample}
+              </div>
+            </div>
+          ) : null}
+
+          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+            <Globe className="h-3.5 w-3.5" />
+            <span>{t('ui.webhookGuide.publicUrlNote', 'Use your public application URL in Stripe, not a localhost address.')}</span>
+          </div>
+        </div>
+      ) : null}
+    </div>
+  )
+}