@fluid-app/portal-sdk 0.1.208 → 0.1.210
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{FluidProvider-Df88VSWk.cjs → FluidProvider-CZSbUoDH.cjs} +5 -5
- package/dist/{FluidProvider-Df88VSWk.cjs.map → FluidProvider-CZSbUoDH.cjs.map} +1 -1
- package/dist/{FluidProvider-0Mba_MWW.mjs → FluidProvider-DBh92Dz3.mjs} +5 -5
- package/dist/{FluidProvider-0Mba_MWW.mjs.map → FluidProvider-DBh92Dz3.mjs.map} +1 -1
- package/dist/{MessagingScreen-BE9FZr7f.cjs → MessagingScreen-C9pAZqA0.cjs} +2 -2
- package/dist/{MessagingScreen-BE9FZr7f.cjs.map → MessagingScreen-C9pAZqA0.cjs.map} +1 -1
- package/dist/{MessagingScreen-BKgNsHdQ.mjs → MessagingScreen-DhtepYkU.mjs} +2 -2
- package/dist/{MessagingScreen-BKgNsHdQ.mjs.map → MessagingScreen-DhtepYkU.mjs.map} +1 -1
- package/dist/{MessagingScreen-BrHK0nrA.cjs → MessagingScreen-FyP5WFDU.cjs} +4 -4
- package/dist/{ProfileScreen-DYHRKKVI.cjs → ProfileScreen-0ZfgjXvC.cjs} +4 -4
- package/dist/{ProfileScreen-WC3LIwDh.mjs → ProfileScreen-BEZneAry.mjs} +2 -2
- package/dist/{ProfileScreen-WC3LIwDh.mjs.map → ProfileScreen-BEZneAry.mjs.map} +1 -1
- package/dist/{ProfileScreen-DtNJ1sdF.cjs → ProfileScreen-Dyh4GP76.cjs} +2 -2
- package/dist/{ProfileScreen-DtNJ1sdF.cjs.map → ProfileScreen-Dyh4GP76.cjs.map} +1 -1
- package/dist/QuickShareWidget-BdAgexWk.cjs +583 -0
- package/dist/QuickShareWidget-BdAgexWk.cjs.map +1 -0
- package/dist/QuickShareWidget-CunkC1r8.mjs +566 -0
- package/dist/QuickShareWidget-CunkC1r8.mjs.map +1 -0
- package/dist/RecentActivityWidget-C6qm5x9b.mjs +560 -0
- package/dist/RecentActivityWidget-C6qm5x9b.mjs.map +1 -0
- package/dist/RecentActivityWidget-Cw5Qxx_x.cjs +577 -0
- package/dist/RecentActivityWidget-Cw5Qxx_x.cjs.map +1 -0
- package/dist/{ShopScreen-Bo9YZ_EO.cjs → ShopScreen-D06ln7AW.cjs} +2 -2
- package/dist/{ShopScreen-Bo9YZ_EO.cjs.map → ShopScreen-D06ln7AW.cjs.map} +1 -1
- package/dist/{ShopScreen-MZm20clN.cjs → ShopScreen-DTtw168w.cjs} +4 -4
- package/dist/{ShopScreen-BfexFHUc.mjs → ShopScreen-DeVoH7co.mjs} +2 -2
- package/dist/{ShopScreen-BfexFHUc.mjs.map → ShopScreen-DeVoH7co.mjs.map} +1 -1
- package/dist/index.cjs +12 -12
- package/dist/index.d.cts +15 -0
- package/dist/index.d.cts.map +1 -1
- package/dist/index.d.mts +15 -0
- package/dist/index.d.mts.map +1 -1
- package/dist/index.mjs +12 -12
- package/package.json +11 -11
- package/dist/QuickShareWidget-DRbErOlt.cjs +0 -268
- package/dist/QuickShareWidget-DRbErOlt.cjs.map +0 -1
- package/dist/QuickShareWidget-Dbjueevf.mjs +0 -251
- package/dist/QuickShareWidget-Dbjueevf.mjs.map +0 -1
- package/dist/RecentActivityWidget-CWr6bFgP.cjs +0 -394
- package/dist/RecentActivityWidget-CWr6bFgP.cjs.map +0 -1
- package/dist/RecentActivityWidget-D-uJcFkE.mjs +0 -377
- package/dist/RecentActivityWidget-D-uJcFkE.mjs.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"QuickShareWidget-CunkC1r8.mjs","names":["ImageIcon"],"sources":["../../widgets/src/widgets/QuickShareWidget.tsx"],"sourcesContent":["import {\n useEffect,\n useState,\n type ComponentProps,\n type CSSProperties,\n} from \"react\";\nimport type React from \"react\";\nimport type {\n BorderRadiusOptions,\n BorderWidthOptions,\n ColorOptions,\n FontSizeOptions,\n PaddingOptions,\n ShareableItem,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport {\n borderColorClasses,\n borderWidthClasses,\n getBorderColorField,\n getBorderRadiusField,\n getBorderWidthField,\n getColorField,\n getFontSizeField,\n getPaddingField,\n} from \"../core/fields\";\nimport { QRCodeSVG } from \"qrcode.react\";\nimport {\n BookOpen,\n Check,\n CircleDot,\n Copy,\n FileText,\n Image as ImageIcon,\n Mail,\n MessageCircle,\n Package,\n Share2,\n ShoppingCart,\n Ticket,\n type LucideIcon,\n} from \"lucide-react\";\n\ntype QuickShareWidgetProps = ComponentProps<\"div\"> & {\n // Resource\n shareableResource?: ShareableItem;\n\n // Title\n titleEnabled?: boolean;\n titleText?: string;\n titleFontSize?: FontSizeOptions;\n titleColor?: ColorOptions;\n\n // Styling\n textColor?: ColorOptions;\n accentColor?: ColorOptions;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n borderWidth?: BorderWidthOptions;\n borderColor?: ColorOptions;\n\n // Overlay\n overlayEnabled?: boolean;\n overlayType?: \"solid\" | \"gradient\";\n overlayIntensity?: number;\n\n // Actions\n showBuyButton?: boolean;\n\n // Polish (new, additive)\n showResourceType?: boolean;\n showShareActions?: boolean;\n showDomainPrefix?: boolean;\n};\n\ntype ResourceDescriptor = {\n label: string;\n icon: LucideIcon;\n};\n\ntype QuickShareCSSProperties = CSSProperties &\n Record<`--${string}`, string | number | undefined>;\n\nconst RESOURCE_TYPE_MAP: Record<string, ResourceDescriptor> = {\n Product: { label: \"Product\", icon: Package },\n Page: { label: \"Page\", icon: FileText },\n EnrollmentPack: { label: \"Enrollment\", icon: Ticket },\n Medium: { label: \"Media\", icon: ImageIcon },\n Library: { label: \"Library\", icon: BookOpen },\n};\n\nconst getResourceDescriptor = (\n resource: ShareableItem | undefined,\n): ResourceDescriptor | null => {\n const rawType = (resource?.type || resource?.shareableType || \"\") as string;\n if (!rawType) return null;\n return RESOURCE_TYPE_MAP[rawType] ?? { label: rawType, icon: CircleDot };\n};\n\nconst splitUrl = (url: string): { prefix: string; path: string } => {\n try {\n const parsed = new URL(url);\n return {\n prefix: `${parsed.protocol}//${parsed.host}`,\n path: `${parsed.pathname}${parsed.search}${parsed.hash}`,\n };\n } catch {\n return { prefix: \"\", path: url };\n }\n};\n\nconst CURRENCY_FIELD_KEYS = [\n \"currency\",\n \"currency_code\",\n \"currencyCode\",\n \"currencyIso\",\n \"currency_iso\",\n] as const;\n\nconst getResourceCurrency = (\n resource: ShareableItem | undefined,\n): string | null => {\n if (!resource) return null;\n for (const key of CURRENCY_FIELD_KEYS) {\n const value = resource[key];\n if (typeof value === \"string\" && /^[A-Z]{3}$/i.test(value)) {\n return value.toUpperCase();\n }\n }\n return null;\n};\n\nconst formatNumericPrice = (price: number, resource: ShareableItem): string => {\n const currency = getResourceCurrency(resource);\n if (!currency) return String(price);\n try {\n return price.toLocaleString(undefined, { style: \"currency\", currency });\n } catch {\n return String(price);\n }\n};\n\nconst getDisplayPrice = (\n resource: ShareableItem | undefined,\n): string | null => {\n if (!resource) return null;\n if (typeof resource.display_price === \"string\" && resource.display_price) {\n return resource.display_price;\n }\n if (resource.price != null) {\n return typeof resource.price === \"number\"\n ? formatNumericPrice(resource.price, resource)\n : String(resource.price);\n }\n return null;\n};\n\nconst getColorCssValue = (color: ColorOptions): string =>\n color === \"transparent\" ? \"transparent\" : `var(--color-${color})`;\n\nconst colorMix = (color: ColorOptions, amount: number): string =>\n color === \"transparent\"\n ? \"transparent\"\n : `color-mix(in oklch, ${getColorCssValue(color)} ${amount}%, transparent)`;\n\nconst insetBorder = (color: ColorOptions, amount: number): string =>\n `inset 0 0 0 1px ${colorMix(color, amount)}`;\n\nexport function QuickShareWidget({\n shareableResource,\n\n titleEnabled = true,\n titleText = \"\",\n titleFontSize = \"2xl\",\n titleColor = \"background\",\n\n textColor = \"background\",\n accentColor = \"primary\",\n padding = 6,\n borderRadius = \"xl\",\n borderWidth = \"none\",\n borderColor = \"muted\",\n\n overlayEnabled = true,\n overlayType = \"gradient\",\n overlayIntensity = 70,\n\n showBuyButton = false,\n\n showResourceType = true,\n showShareActions = true,\n showDomainPrefix = true,\n\n className,\n style,\n ...props\n}: QuickShareWidgetProps): React.JSX.Element {\n const [copyState, setCopyState] = useState<\"idle\" | \"copied\">(\"idle\");\n // Hero image fallback: if the resource image 404s or fails to decode, flip\n // to the EmptyHero treatment instead of rendering a broken image.\n const [imageFailed, setImageFailed] = useState(false);\n\n useEffect(() => {\n if (copyState !== \"copied\") return;\n const id = window.setTimeout(() => setCopyState(\"idle\"), 1600);\n return () => window.clearTimeout(id);\n }, [copyState]);\n\n const backgroundImageUrl =\n shareableResource?.image_url || shareableResource?.imageUrl || \"\";\n\n // Reset the failed-image state when the resource (and thus the image URL)\n // changes — otherwise switching to a new resource keeps showing EmptyHero\n // because the React state outlives the previous load failure.\n useEffect(() => {\n setImageFailed(false);\n }, [backgroundImageUrl]);\n\n const showHeroImage = Boolean(backgroundImageUrl) && !imageFailed;\n const shareLink = shareableResource?.share_link || \"\";\n const hasShareLink = !!shareLink;\n\n const displayTitle =\n titleText || shareableResource?.title || \"Select content to share\";\n const resourceDescriptor = getResourceDescriptor(shareableResource);\n const displayPrice = getDisplayPrice(shareableResource);\n\n const isProduct =\n shareableResource?.type === \"Product\" ||\n shareableResource?.shareableType === \"Product\";\n const shouldShowBuyButton = showBuyButton && isProduct;\n\n const parsedOverlayIntensity = Number(\n String(overlayIntensity).replace(\"%\", \"\"),\n );\n const overlayOpacity =\n (Number.isFinite(parsedOverlayIntensity)\n ? Math.min(100, Math.max(0, parsedOverlayIntensity))\n : 70) / 100;\n\n const editorialGradient: CSSProperties | undefined =\n overlayEnabled && showHeroImage\n ? {\n background: `linear-gradient(to top, color-mix(in oklch, var(--color-foreground) ${Math.round(overlayOpacity * 100)}%, transparent), color-mix(in oklch, var(--color-foreground) ${Math.round(overlayOpacity * 55)}%, transparent) 45%, transparent 85%)`,\n }\n : undefined;\n\n const handleCopy = async () => {\n if (!hasShareLink) return;\n try {\n await navigator.clipboard.writeText(shareLink);\n setCopyState(\"copied\");\n } catch (error) {\n console.error(\"Failed to copy to clipboard:\", error);\n }\n };\n\n const handleNativeShare = async () => {\n if (!hasShareLink) return;\n if (typeof navigator.share === \"function\") {\n try {\n await navigator.share({\n title: displayTitle,\n url: shareLink,\n });\n } catch {\n // Ignore abort\n }\n } else {\n await handleCopy();\n }\n };\n\n const { prefix, path } = hasShareLink\n ? splitUrl(shareLink)\n : { prefix: \"\", path: \"\" };\n\n return (\n <div\n className={`relative isolate overflow-hidden rounded-${borderRadius} ${borderWidthClasses[borderWidth]} ${borderWidth !== \"none\" ? borderColorClasses[borderColor] : \"\"} bg-muted text-${textColor} ${className ?? \"\"}`}\n style={{\n // Themed dual-shadow (crisp + soft ambient), derived from the\n // foreground token so the lift reads in both light and dark.\n boxShadow: `0 1px 2px color-mix(in oklch, var(--color-foreground) 4%, transparent), 0 20px 40px -20px color-mix(in oklch, var(--color-foreground) 25%, transparent)`,\n ...style,\n }}\n {...props}\n >\n {/* Hero image or empty-state surface */}\n {showHeroImage ? (\n <div className=\"absolute inset-0\">\n <img\n src={backgroundImageUrl}\n alt=\"\"\n loading=\"lazy\"\n onError={() => setImageFailed(true)}\n className=\"h-full w-full object-cover\"\n />\n {overlayEnabled && (\n <>\n {/* Layer 1 — main bottom-to-top legibility gradient */}\n <div\n className=\"pointer-events-none absolute inset-0\"\n style={editorialGradient}\n />\n {/* Layer 2 — diagonal bottom-left anchor (image reads top-right, content reads bottom-left) */}\n <div\n className=\"pointer-events-none absolute inset-0\"\n style={{\n background: `linear-gradient(to top right, color-mix(in oklch, var(--color-foreground) ${Math.round(overlayOpacity * 65)}%, transparent), color-mix(in oklch, var(--color-foreground) ${Math.round(overlayOpacity * 25)}%, transparent) 35%, transparent 65%)`,\n }}\n />\n {/* Layer 3 — radial pool anchoring the bottom-left share panel */}\n <div\n className=\"pointer-events-none absolute inset-0\"\n style={{\n background: `radial-gradient(ellipse 70% 55% at 15% 100%, color-mix(in oklch, var(--color-foreground) ${Math.round(overlayOpacity * 45)}%, transparent), transparent 70%)`,\n }}\n />\n {overlayType === \"solid\" && (\n <div\n className=\"bg-foreground pointer-events-none absolute inset-0\"\n style={{ opacity: overlayOpacity * 0.35 }}\n />\n )}\n </>\n )}\n </div>\n ) : (\n <EmptyHero accentColor={accentColor} textColor={textColor} />\n )}\n\n {/* Content */}\n <div className={`relative flex min-h-[440px] flex-col p-${padding}`}>\n {/* Top row: resource type eyebrow + optional price chip */}\n {(showResourceType && resourceDescriptor) || displayPrice ? (\n <div className=\"flex items-start justify-between gap-3\">\n {showResourceType && resourceDescriptor ? (\n (() => {\n const { icon: ResourceIcon, label } = resourceDescriptor;\n return (\n <span\n className={`inline-flex items-center gap-1.5 rounded-${borderRadius} bg-${textColor}/15 px-2.5 py-1 text-[10px] font-bold tracking-[0.18em] uppercase text-${textColor} backdrop-blur-sm`}\n style={{\n boxShadow: insetBorder(textColor, 15),\n }}\n >\n <ResourceIcon className=\"size-3\" />\n {label}\n </span>\n );\n })()\n ) : (\n <span />\n )}\n {displayPrice && (\n <span\n className={`inline-flex items-center rounded-${borderRadius} bg-${accentColor} px-2.5 py-1 text-[11px] font-bold tabular-nums text-${accentColor}-foreground`}\n style={{\n boxShadow: `0 4px 14px -4px color-mix(in oklch, var(--color-foreground) 30%, transparent)`,\n }}\n >\n {displayPrice}\n </span>\n )}\n </div>\n ) : null}\n\n {/* Middle: spacer that keeps share panel bottom-anchored.\n Optional title renders inside it without changing layout rhythm. */}\n <div className=\"mt-4 flex flex-1 flex-col justify-end\">\n {titleEnabled && displayTitle && (\n <h2\n className={`text-${titleFontSize} font-header leading-[1.12] font-bold tracking-[-0.015em] text-${titleColor}`}\n style={{\n // Themed via foreground so the legibility shadow flips with\n // the title color when the theme switches to dark mode.\n textShadow: showHeroImage\n ? `0 2px 12px color-mix(in oklch, var(--color-foreground) 40%, transparent)`\n : undefined,\n }}\n >\n {displayTitle}\n </h2>\n )}\n </div>\n\n {/* Bottom: share panel */}\n <div className=\"mt-6 flex flex-col gap-3\">\n <div className=\"flex items-stretch gap-3\">\n {/* QR card */}\n <div\n className={`group relative shrink-0 rounded-${borderRadius} bg-white p-2.5 transition-transform duration-300 hover:scale-[1.02]`}\n style={{\n // QR card stays white for scanner contrast; lift shadow is\n // themed via foreground so it reads in dark mode too.\n boxShadow: `0 4px 16px -4px color-mix(in oklch, var(--color-foreground) 25%, transparent), inset 0 0 0 1px rgba(255,255,255,0.4)`,\n }}\n aria-label=\"QR code for share link\"\n >\n <QRCodeSVG\n value={shareLink || \"https://example.com\"}\n size={96}\n level=\"H\"\n bgColor=\"#ffffff\"\n fgColor=\"#0f172a\"\n />\n </div>\n\n {/* URL chip + share actions rail */}\n <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n <span\n className={`text-[10px] font-bold tracking-[0.16em] uppercase text-${textColor}/70`}\n >\n Share link\n </span>\n <button\n type=\"button\"\n onClick={handleCopy}\n disabled={!hasShareLink}\n aria-label={\n copyState === \"copied\" ? \"Copied to clipboard\" : \"Copy link\"\n }\n className={`group flex items-center justify-between gap-2 rounded-${borderRadius} bg-${textColor}/10 px-3 py-2 text-left text-[12px] backdrop-blur-sm transition-all duration-300 hover:bg-${textColor}/15 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--quick-share-focus-ring)] disabled:opacity-50 ${copyState === \"copied\" ? `bg-${accentColor}/20` : \"\"}`}\n style={\n {\n \"--quick-share-focus-ring\": colorMix(accentColor, 40),\n boxShadow: insetBorder(textColor, 15),\n } as QuickShareCSSProperties\n }\n >\n <span\n className={`min-w-0 flex-1 truncate font-medium tabular-nums text-${textColor}`}\n >\n {hasShareLink ? (\n <>\n {showDomainPrefix && prefix && (\n <span className={`opacity-60`}>{prefix}</span>\n )}\n <span className=\"font-semibold\">{path}</span>\n </>\n ) : (\n <span className={`opacity-60`}>No link yet</span>\n )}\n </span>\n <span\n className={`flex size-7 shrink-0 items-center justify-center rounded-full transition-all duration-300 ${copyState === \"copied\" ? `bg-${accentColor} text-${accentColor}-foreground scale-110` : `bg-${textColor}/15 text-${textColor}`}`}\n >\n {copyState === \"copied\" ? (\n <Check className=\"size-3.5\" />\n ) : (\n <Copy className=\"size-3.5\" />\n )}\n </span>\n </button>\n <span className=\"sr-only\" aria-live=\"polite\" role=\"status\">\n {copyState === \"copied\" ? \"Copied to clipboard\" : \"\"}\n </span>\n\n {showShareActions && (\n <ShareActionRow\n shareLink={shareLink}\n displayTitle={displayTitle}\n accentColor={accentColor}\n textColor={textColor}\n borderRadius={borderRadius}\n onNative={handleNativeShare}\n />\n )}\n </div>\n </div>\n\n {shouldShowBuyButton &&\n (hasShareLink ? (\n <a\n href={shareLink}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n className={`flex w-full items-center justify-center gap-2 rounded-${borderRadius} bg-${accentColor} px-4 py-3 text-[13px] font-bold text-${accentColor}-foreground transition-transform hover:scale-[1.01]`}\n style={{\n boxShadow: `0 8px 22px -8px color-mix(in oklch, var(--color-foreground) 35%, transparent)`,\n }}\n >\n <ShoppingCart className=\"size-4\" />\n <span>Buy now</span>\n </a>\n ) : (\n <button\n type=\"button\"\n disabled\n className={`flex w-full cursor-not-allowed items-center justify-center gap-2 rounded-${borderRadius} bg-${accentColor} px-4 py-3 text-[13px] font-bold text-${accentColor}-foreground opacity-50`}\n style={{\n boxShadow: `0 8px 22px -8px color-mix(in oklch, var(--color-foreground) 35%, transparent)`,\n }}\n >\n <ShoppingCart className=\"size-4\" />\n <span>Buy now</span>\n </button>\n ))}\n </div>\n </div>\n </div>\n );\n}\n\ntype ShareActionRowProps = {\n shareLink: string;\n displayTitle: string;\n accentColor: ColorOptions;\n textColor: ColorOptions;\n borderRadius: BorderRadiusOptions;\n onNative: () => void;\n};\n\nfunction ShareActionRow({\n shareLink,\n displayTitle,\n accentColor,\n textColor,\n borderRadius,\n onNative,\n}: ShareActionRowProps) {\n const disabled = !shareLink;\n const [canNativeShare, setCanNativeShare] = useState(false);\n const [canSendSms, setCanSendSms] = useState(false);\n\n useEffect(() => {\n setCanNativeShare(\n typeof navigator !== \"undefined\" && typeof navigator.share === \"function\",\n );\n setCanSendSms(\n typeof navigator !== \"undefined\" &&\n (/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) ||\n (/Macintosh/i.test(navigator.userAgent) &&\n navigator.maxTouchPoints > 1)),\n );\n }, []);\n\n const emailHref = shareLink\n ? `mailto:?subject=${encodeURIComponent(displayTitle)}&body=${encodeURIComponent(shareLink)}`\n : undefined;\n const smsHref = shareLink\n ? `sms:?body=${encodeURIComponent(`${displayTitle} — ${shareLink}`)}`\n : undefined;\n\n return (\n <div className=\"flex items-center gap-1.5\">\n <ShareActionButton\n icon={Mail}\n label=\"Email\"\n href={emailHref}\n disabled={disabled}\n accentColor={accentColor}\n textColor={textColor}\n borderRadius={borderRadius}\n />\n {canSendSms && (\n <ShareActionButton\n icon={MessageCircle}\n label=\"Text\"\n href={smsHref}\n disabled={disabled}\n accentColor={accentColor}\n textColor={textColor}\n borderRadius={borderRadius}\n />\n )}\n {canNativeShare && (\n <ShareActionButton\n icon={Share2}\n label=\"Share\"\n onClick={onNative}\n disabled={disabled}\n accentColor={accentColor}\n textColor={textColor}\n borderRadius={borderRadius}\n />\n )}\n </div>\n );\n}\n\ntype ShareActionButtonProps = {\n icon: LucideIcon;\n label: string;\n href?: string | undefined;\n onClick?: () => void;\n disabled: boolean;\n accentColor: ColorOptions;\n textColor: ColorOptions;\n borderRadius: BorderRadiusOptions;\n};\n\nfunction ShareActionButton({\n icon: Icon,\n label,\n href,\n onClick,\n disabled,\n accentColor,\n textColor,\n borderRadius,\n}: ShareActionButtonProps) {\n const className = `group inline-flex items-center gap-1.5 rounded-${borderRadius} bg-${textColor}/10 px-2.5 py-1.5 text-[11px] font-semibold text-${textColor} backdrop-blur-sm transition-all duration-200 hover:-translate-y-0.5 hover:bg-${accentColor} hover:text-${accentColor}-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--quick-share-focus-ring)] disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:translate-y-0`;\n const style: QuickShareCSSProperties = {\n \"--quick-share-focus-ring\": colorMix(accentColor, 40),\n boxShadow: insetBorder(textColor, 15),\n };\n\n const content = (\n <>\n <Icon className=\"size-3\" />\n <span>{label}</span>\n </>\n );\n\n if (href && !disabled) {\n return (\n <a href={href} className={className} style={style} aria-label={label}>\n {content}\n </a>\n );\n }\n\n return (\n <button\n type=\"button\"\n onClick={onClick}\n disabled={disabled}\n className={className}\n style={style}\n aria-label={label}\n >\n {content}\n </button>\n );\n}\n\nfunction EmptyHero({\n accentColor,\n textColor,\n}: {\n accentColor: ColorOptions;\n textColor: ColorOptions;\n}) {\n return (\n <div className={`bg-muted absolute inset-0`}>\n <div\n className=\"absolute inset-0\"\n style={{\n background: `radial-gradient(circle at 30% 20%, ${colorMix(accentColor, 15)}, transparent 60%), radial-gradient(circle at 80% 90%, ${colorMix(accentColor, 10)}, transparent 55%)`,\n }}\n />\n <div className=\"absolute inset-0 flex flex-col items-center justify-center gap-3\">\n <div\n className={`flex size-14 items-center justify-center rounded-2xl bg-${textColor}/5`}\n style={{ boxShadow: insetBorder(textColor, 10) }}\n >\n <ImageIcon className={`size-6 text-${textColor}/40`} />\n </div>\n <span\n className={`text-[10px] font-bold tracking-[0.2em] uppercase text-${textColor}/45`}\n >\n Nothing selected\n </span>\n </div>\n </div>\n );\n}\n\nexport const quickShareWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"QuickShareWidget\",\n displayName: \"Quick Share Widget\",\n tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n fields: [\n // Content\n {\n key: \"shareableResource\",\n label: \"Shareable Content\",\n type: \"resource\",\n description: \"Select the content to generate a share link for\",\n allowedTypes: [\"Product\", \"Page\", \"EnrollmentPack\", \"Medium\", \"Library\"],\n tab: \"styling\",\n group: \"Content\",\n },\n\n // Title\n {\n key: \"titleEnabled\",\n label: \"Show Title\",\n type: \"boolean\",\n description: \"Display a title on the hero\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Title\",\n },\n {\n key: \"titleText\",\n label: \"Title\",\n type: \"text\",\n description:\n \"Custom title text (defaults to the resource title if empty)\",\n defaultValue: \"\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n },\n getFontSizeField({\n key: \"titleFontSize\",\n label: \"Title Font Size\",\n description: \"Font size for the title\",\n defaultValue: \"2xl\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n getColorField({\n key: \"titleColor\",\n label: \"Title Color\",\n description: \"Color for the title\",\n defaultValue: \"background\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n\n // Share panel polish (new)\n {\n key: \"showResourceType\",\n label: \"Show Resource Type Pill\",\n type: \"boolean\",\n description:\n \"Display a small type eyebrow chip (Product · Page · Media…)\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Share Panel\",\n },\n {\n key: \"showShareActions\",\n label: \"Show Share Actions\",\n type: \"boolean\",\n description:\n \"Show Email, Text, and native Share buttons under the link chip\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Share Panel\",\n },\n {\n key: \"showDomainPrefix\",\n label: \"Show Domain Prefix\",\n type: \"boolean\",\n description:\n \"Include the domain in the link chip (dimmed) with the path emphasized\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Share Panel\",\n },\n {\n key: \"showBuyButton\",\n label: \"Show Buy Button\",\n type: \"boolean\",\n description: \"Display the Buy button (only shown for Product resources)\",\n defaultValue: false,\n tab: \"styling\",\n group: \"Share Panel\",\n },\n\n // Design\n getColorField({\n key: \"textColor\",\n label: \"Text Color\",\n description: \"Default text color for widget content (over the hero)\",\n defaultValue: \"background\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getColorField({\n key: \"accentColor\",\n label: \"Accent Color\",\n description:\n \"Drives the price chip, primary button, and copy-success flash\",\n defaultValue: \"primary\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"overlayEnabled\",\n label: \"Enable Overlay\",\n type: \"boolean\",\n description: \"Add editorial gradient stack for legibility over the hero\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Design\",\n },\n {\n key: \"overlayType\",\n label: \"Overlay Type\",\n type: \"buttonGroup\",\n description:\n \"Gradient only (recommended) or gradient + solid wash (heavier)\",\n defaultValue: \"gradient\",\n options: [\n { label: \"Gradient\", value: \"gradient\" },\n { label: \"Solid\", value: \"solid\" },\n ],\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"overlayEnabled\",\n },\n {\n key: \"overlayIntensity\",\n label: \"Overlay Intensity\",\n type: \"slider\",\n description: \"Opacity of the overlay (0-100)\",\n min: 0,\n max: 100,\n step: 5,\n defaultValue: 70,\n unit: \"%\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"overlayEnabled\",\n },\n {\n key: \"separator\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Design\",\n },\n getPaddingField({\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding around the widget content\",\n defaultValue: 6,\n tab: \"styling\",\n group: \"Design\",\n }),\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Border radius for the widget container\",\n defaultValue: \"xl\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getBorderWidthField({\n key: \"borderWidth\",\n label: \"Border Width\",\n description: \"Border width for the widget container\",\n defaultValue: \"none\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getBorderColorField({\n key: \"borderColor\",\n label: \"Border Color\",\n description: \"Border color for the widget container\",\n defaultValue: \"muted\",\n tab: \"styling\",\n group: \"Design\",\n }),\n ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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AC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aACE;GACF,cAAc;GACd,SAAS,CACP;IAAE,OAAO;IAAY,OAAO;IAAY,EACxC;IAAE,OAAO;IAAS,OAAO;IAAS,CACnC;GACD,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,MAAM;GACN,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD,gBAAgB;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF,qBAAqB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF,oBAAoB;GAClB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF,oBAAoB;GAClB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}
|
|
@@ -0,0 +1,560 @@
|
|
|
1
|
+
import { r as __exportAll } from "./es-DmEK0Umf.mjs";
|
|
2
|
+
import { n as useDataSourceRegistryConfig } from "./registry-context-CrKm3pxA.mjs";
|
|
3
|
+
import { i as useWidgetsApi, n as useWidgetPreviewContext, t as ErrorState } from "./error-state-DSJb-3r5.mjs";
|
|
4
|
+
import { i as getBorderColorField, l as getColorField, m as getPaddingField, n as borderWidthClasses, o as getBorderRadiusField, s as getBorderWidthField, t as borderColorClasses, u as getFontSizeField } from "./registries-DT36l-bR.mjs";
|
|
5
|
+
import { useEffect, useMemo, useState } from "react";
|
|
6
|
+
import { useQuery } from "@tanstack/react-query";
|
|
7
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { AudioWaveform, Bell, Calendar, CheckSquare, Eye, MessageCircle, Play, ShoppingCart, Star, Trophy, User, UserPlus } from "lucide-react";
|
|
9
|
+
//#region ../widgets/src/hooks/use-activities.preview.ts
|
|
10
|
+
const now = /* @__PURE__ */ new Date();
|
|
11
|
+
function minutesAgo(minutes) {
|
|
12
|
+
return (/* @__PURE__ */ new Date(now.getTime() - minutes * 6e4)).toISOString();
|
|
13
|
+
}
|
|
14
|
+
const PREVIEW_DATA = [
|
|
15
|
+
{
|
|
16
|
+
id: 1,
|
|
17
|
+
userName: "Sarah Johnson",
|
|
18
|
+
avatarUrl: null,
|
|
19
|
+
activityType: "Order Placed",
|
|
20
|
+
targetName: "Wellness Starter Kit",
|
|
21
|
+
timestamp: minutesAgo(12),
|
|
22
|
+
slug: "order_placed"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
id: 2,
|
|
26
|
+
userName: "Mike Chen",
|
|
27
|
+
avatarUrl: null,
|
|
28
|
+
activityType: "New Lead",
|
|
29
|
+
targetName: "Signed up from Instagram link",
|
|
30
|
+
timestamp: minutesAgo(45),
|
|
31
|
+
slug: "new_lead"
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
id: 3,
|
|
35
|
+
userName: "Visitor from Austin, TX",
|
|
36
|
+
avatarUrl: null,
|
|
37
|
+
activityType: "Page Views",
|
|
38
|
+
targetName: "Viewed product catalog (3 pages)",
|
|
39
|
+
timestamp: minutesAgo(90),
|
|
40
|
+
slug: "page_views"
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
id: 4,
|
|
44
|
+
userName: "Lisa Park",
|
|
45
|
+
avatarUrl: null,
|
|
46
|
+
activityType: "Video Complete",
|
|
47
|
+
targetName: "Watched: Getting Started Guide",
|
|
48
|
+
timestamp: minutesAgo(180),
|
|
49
|
+
slug: "video_complete"
|
|
50
|
+
}
|
|
51
|
+
];
|
|
52
|
+
//#endregion
|
|
53
|
+
//#region ../widgets/src/hooks/use-activities.ts
|
|
54
|
+
function useActivities() {
|
|
55
|
+
const widgetsApi = useWidgetsApi();
|
|
56
|
+
const { isPreview } = useWidgetPreviewContext();
|
|
57
|
+
const { baseUrl } = useDataSourceRegistryConfig();
|
|
58
|
+
return useQuery({
|
|
59
|
+
queryKey: [
|
|
60
|
+
"portal-widget-use",
|
|
61
|
+
"activities",
|
|
62
|
+
isPreview ? "preview" : baseUrl
|
|
63
|
+
],
|
|
64
|
+
queryFn: ({ signal }) => widgetsApi.fetchActivities(signal),
|
|
65
|
+
enabled: !isPreview,
|
|
66
|
+
...isPreview && { placeholderData: PREVIEW_DATA }
|
|
67
|
+
});
|
|
68
|
+
}
|
|
69
|
+
//#endregion
|
|
70
|
+
//#region ../widgets/src/widgets/RecentActivityWidget.tsx
|
|
71
|
+
var RecentActivityWidget_exports = /* @__PURE__ */ __exportAll({
|
|
72
|
+
RecentActivityWidget: () => RecentActivityWidget,
|
|
73
|
+
recentActivityWidgetPropertySchema: () => recentActivityWidgetPropertySchema
|
|
74
|
+
});
|
|
75
|
+
const RELATIVE_TIME_REFRESH_MS = 6e4;
|
|
76
|
+
const DEFAULT_MAX_ITEMS_TO_SHOW = 6;
|
|
77
|
+
const MAX_ITEMS_TO_SHOW_LIMIT = 20;
|
|
78
|
+
const ACTIVITY_ICON_MAP = {
|
|
79
|
+
order_placed: ShoppingCart,
|
|
80
|
+
abandoned_cart: ShoppingCart,
|
|
81
|
+
cart_items_added: ShoppingCart,
|
|
82
|
+
new_cart_items_added: ShoppingCart,
|
|
83
|
+
direct_message: MessageCircle,
|
|
84
|
+
comment_reply: MessageCircle,
|
|
85
|
+
message_received: MessageCircle,
|
|
86
|
+
message_sent: MessageCircle,
|
|
87
|
+
video: Play,
|
|
88
|
+
video_complete: Play,
|
|
89
|
+
video_contact: Play,
|
|
90
|
+
video_complete_contact: Play,
|
|
91
|
+
new_lead: UserPlus,
|
|
92
|
+
page_views_contact: UserPlus,
|
|
93
|
+
smart_link_clicked: UserPlus,
|
|
94
|
+
page_views: Eye,
|
|
95
|
+
upcoming_event: Calendar,
|
|
96
|
+
review_left: Star,
|
|
97
|
+
tasks: CheckSquare,
|
|
98
|
+
announcements: Bell,
|
|
99
|
+
fantasy_point: Trophy
|
|
100
|
+
};
|
|
101
|
+
const getActivityIcon = (slug) => ACTIVITY_ICON_MAP[slug] ?? User;
|
|
102
|
+
const formatAbsoluteTime = (timestamp) => new Date(timestamp).toLocaleTimeString("en-US", {
|
|
103
|
+
hour: "numeric",
|
|
104
|
+
minute: "2-digit",
|
|
105
|
+
hour12: true
|
|
106
|
+
});
|
|
107
|
+
const formatRelativeTime = (timestamp, now) => {
|
|
108
|
+
const then = new Date(timestamp).getTime();
|
|
109
|
+
const diffSec = Math.max(0, Math.round((now - then) / 1e3));
|
|
110
|
+
if (diffSec < 60) return "now";
|
|
111
|
+
const diffMin = Math.floor(diffSec / 60);
|
|
112
|
+
if (diffMin < 60) return `${diffMin}m`;
|
|
113
|
+
const diffHr = Math.floor(diffMin / 60);
|
|
114
|
+
if (diffHr < 24) return `${diffHr}h`;
|
|
115
|
+
const diffDay = Math.floor(diffHr / 24);
|
|
116
|
+
if (diffDay < 7) return `${diffDay}d`;
|
|
117
|
+
return new Date(timestamp).toLocaleDateString("en-US", {
|
|
118
|
+
month: "short",
|
|
119
|
+
day: "numeric"
|
|
120
|
+
});
|
|
121
|
+
};
|
|
122
|
+
const toLocalDateKey = (date) => {
|
|
123
|
+
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
|
|
124
|
+
};
|
|
125
|
+
const formatDateHeader = (timestamp, nowMs) => {
|
|
126
|
+
const date = new Date(timestamp);
|
|
127
|
+
if (!Number.isFinite(date.getTime())) return timestamp;
|
|
128
|
+
const now = new Date(nowMs);
|
|
129
|
+
const yesterday = new Date(now);
|
|
130
|
+
yesterday.setDate(now.getDate() - 1);
|
|
131
|
+
const todayKey = toLocalDateKey(now);
|
|
132
|
+
const yesterdayKey = toLocalDateKey(yesterday);
|
|
133
|
+
const dateKey = toLocalDateKey(date);
|
|
134
|
+
if (dateKey === todayKey) return "Today";
|
|
135
|
+
if (dateKey === yesterdayKey) return "Yesterday";
|
|
136
|
+
return date.toLocaleDateString("en-US", {
|
|
137
|
+
month: "long",
|
|
138
|
+
day: "numeric"
|
|
139
|
+
});
|
|
140
|
+
};
|
|
141
|
+
const getDateKey = (timestamp) => {
|
|
142
|
+
const date = new Date(timestamp);
|
|
143
|
+
if (!Number.isFinite(date.getTime())) return timestamp;
|
|
144
|
+
return toLocalDateKey(date);
|
|
145
|
+
};
|
|
146
|
+
const getColorCssValue = (color) => color === "transparent" ? "transparent" : `var(--color-${color})`;
|
|
147
|
+
const normalizeMaxItemsToShow = (value) => {
|
|
148
|
+
if (!Number.isFinite(value)) return DEFAULT_MAX_ITEMS_TO_SHOW;
|
|
149
|
+
return Math.min(MAX_ITEMS_TO_SHOW_LIMIT, Math.max(1, Math.floor(value)));
|
|
150
|
+
};
|
|
151
|
+
const shouldRenderEyebrow = (showEyebrow, titleText) => showEyebrow && titleText.trim().toLowerCase() !== "recent activity";
|
|
152
|
+
const isUnknownUser = (name) => {
|
|
153
|
+
if (!name) return true;
|
|
154
|
+
const lower = name.trim().toLowerCase();
|
|
155
|
+
if (!lower) return true;
|
|
156
|
+
return lower === "unknown" || lower.includes("unknown visitor") || lower === "anonymous" || lower === "guest";
|
|
157
|
+
};
|
|
158
|
+
const getInitials = (name) => {
|
|
159
|
+
if (!name) return "";
|
|
160
|
+
return name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("");
|
|
161
|
+
};
|
|
162
|
+
function Avatar({ activity, textColor, accentColor, surfaceColor, showTypeBadge }) {
|
|
163
|
+
const TypeIcon = getActivityIcon(activity.slug);
|
|
164
|
+
const unknown = isUnknownUser(activity.userName);
|
|
165
|
+
const initials = unknown ? "" : getInitials(activity.userName);
|
|
166
|
+
const [failedAvatarUrl, setFailedAvatarUrl] = useState(null);
|
|
167
|
+
const avatarUrl = activity.avatarUrl;
|
|
168
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
169
|
+
className: "relative shrink-0",
|
|
170
|
+
children: [Boolean(avatarUrl) && failedAvatarUrl !== avatarUrl ? /* @__PURE__ */ jsx("img", {
|
|
171
|
+
src: avatarUrl ?? void 0,
|
|
172
|
+
alt: unknown ? "" : activity.userName,
|
|
173
|
+
width: 36,
|
|
174
|
+
height: 36,
|
|
175
|
+
loading: "lazy",
|
|
176
|
+
onError: () => setFailedAvatarUrl(avatarUrl),
|
|
177
|
+
className: "size-9 rounded-full object-cover",
|
|
178
|
+
style: { boxShadow: `inset 0 0 0 1px color-mix(in oklch, var(--color-${textColor}) 10%, transparent)` }
|
|
179
|
+
}) : initials ? /* @__PURE__ */ jsx("div", {
|
|
180
|
+
className: `flex size-9 items-center justify-center rounded-full text-[11px] font-bold tracking-[0.04em] text-${textColor}/80`,
|
|
181
|
+
style: {
|
|
182
|
+
background: `color-mix(in oklch, var(--color-${accentColor}) 12%, transparent)`,
|
|
183
|
+
boxShadow: `inset 0 0 0 1px color-mix(in oklch, var(--color-${textColor}) 10%, transparent)`
|
|
184
|
+
},
|
|
185
|
+
"aria-label": activity.userName,
|
|
186
|
+
children: initials
|
|
187
|
+
}) : /* @__PURE__ */ jsx("div", {
|
|
188
|
+
className: `flex size-9 items-center justify-center rounded-full`,
|
|
189
|
+
style: {
|
|
190
|
+
background: `color-mix(in oklch, var(--color-${textColor}) 5%, transparent)`,
|
|
191
|
+
boxShadow: `inset 0 0 0 1px color-mix(in oklch, var(--color-${textColor}) 10%, transparent)`
|
|
192
|
+
},
|
|
193
|
+
"aria-label": "Unknown visitor",
|
|
194
|
+
children: /* @__PURE__ */ jsx(User, { className: `size-3.5 text-${textColor}/55` })
|
|
195
|
+
}), showTypeBadge && /* @__PURE__ */ jsx("span", {
|
|
196
|
+
className: `bg-${accentColor} text-${accentColor}-foreground absolute -right-0.5 -bottom-0.5 flex size-4 items-center justify-center rounded-full`,
|
|
197
|
+
style: { boxShadow: `0 0 0 2px ${getColorCssValue(surfaceColor)}` },
|
|
198
|
+
"aria-hidden": "true",
|
|
199
|
+
children: /* @__PURE__ */ jsx(TypeIcon, { style: {
|
|
200
|
+
width: 8,
|
|
201
|
+
height: 8
|
|
202
|
+
} })
|
|
203
|
+
})]
|
|
204
|
+
});
|
|
205
|
+
}
|
|
206
|
+
function ActivityRow({ activity, accentColor, textColor, surfaceColor, showRelativeTime, nowMs }) {
|
|
207
|
+
const timeText = showRelativeTime ? formatRelativeTime(activity.timestamp, nowMs) : formatAbsoluteTime(activity.timestamp);
|
|
208
|
+
const absoluteTooltip = new Date(activity.timestamp).toLocaleString("en-US", {
|
|
209
|
+
weekday: "short",
|
|
210
|
+
month: "short",
|
|
211
|
+
day: "numeric",
|
|
212
|
+
hour: "numeric",
|
|
213
|
+
minute: "2-digit"
|
|
214
|
+
});
|
|
215
|
+
return /* @__PURE__ */ jsxs("li", {
|
|
216
|
+
role: "article",
|
|
217
|
+
className: "relative flex items-start gap-3 rounded-md px-2 py-2",
|
|
218
|
+
children: [/* @__PURE__ */ jsx(Avatar, {
|
|
219
|
+
activity,
|
|
220
|
+
textColor,
|
|
221
|
+
accentColor,
|
|
222
|
+
surfaceColor,
|
|
223
|
+
showTypeBadge: true
|
|
224
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
225
|
+
className: "flex min-w-0 flex-1 flex-col",
|
|
226
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
227
|
+
className: "flex items-baseline gap-2",
|
|
228
|
+
children: [/* @__PURE__ */ jsx("p", {
|
|
229
|
+
className: `min-w-0 flex-1 truncate text-[13px] leading-tight font-semibold text-${textColor}`,
|
|
230
|
+
children: activity.activityType
|
|
231
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
232
|
+
title: absoluteTooltip,
|
|
233
|
+
className: `shrink-0 font-mono text-[10px] font-medium tabular-nums text-${textColor}/45`,
|
|
234
|
+
children: timeText
|
|
235
|
+
})]
|
|
236
|
+
}), /* @__PURE__ */ jsxs("p", {
|
|
237
|
+
className: `mt-0.5 truncate text-[12px] leading-snug text-${textColor}/65`,
|
|
238
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
239
|
+
className: `font-semibold text-${textColor}/85`,
|
|
240
|
+
children: activity.userName
|
|
241
|
+
}), activity.targetName && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
|
|
242
|
+
className: `mx-1 text-${textColor}/35`,
|
|
243
|
+
children: "·"
|
|
244
|
+
}), /* @__PURE__ */ jsx("span", { children: activity.targetName })] })]
|
|
245
|
+
})]
|
|
246
|
+
})]
|
|
247
|
+
});
|
|
248
|
+
}
|
|
249
|
+
function RecentActivityWidget({ titleEnabled = true, titleText = "Activity", titleFontSize = "xl", titleColor = "foreground", background = {
|
|
250
|
+
type: "solid",
|
|
251
|
+
color: "background"
|
|
252
|
+
}, textColor = "foreground", accentColor = "primary", padding = 4, borderRadius = "md", borderWidth = "thin", borderColor = "muted", maxItemsToShow = 6, showTimeline = true, showRelativeTime = true, showCountChip = true, showEyebrow = true, className, ...props }) {
|
|
253
|
+
const backgroundColor = background.color || "background";
|
|
254
|
+
const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
|
|
255
|
+
const { data: activities = [], isLoading, isError } = useActivities();
|
|
256
|
+
const [nowMs, setNowMs] = useState(() => Date.now());
|
|
257
|
+
const maxVisibleItems = normalizeMaxItemsToShow(maxItemsToShow);
|
|
258
|
+
useEffect(() => {
|
|
259
|
+
const timer = window.setInterval(() => {
|
|
260
|
+
setNowMs(Date.now());
|
|
261
|
+
}, RELATIVE_TIME_REFRESH_MS);
|
|
262
|
+
return () => window.clearInterval(timer);
|
|
263
|
+
}, []);
|
|
264
|
+
const activitiesToShow = useMemo(() => {
|
|
265
|
+
if (activities.length === 0) return [];
|
|
266
|
+
const groups = /* @__PURE__ */ new Map();
|
|
267
|
+
for (const activity of activities.slice(0, maxVisibleItems)) {
|
|
268
|
+
const key = getDateKey(activity.timestamp);
|
|
269
|
+
const existing = groups.get(key);
|
|
270
|
+
if (existing) existing.push(activity);
|
|
271
|
+
else groups.set(key, [activity]);
|
|
272
|
+
}
|
|
273
|
+
return Array.from(groups.entries()).map(([key, items]) => ({
|
|
274
|
+
date: formatDateHeader(items[0]?.timestamp ?? key, nowMs),
|
|
275
|
+
items
|
|
276
|
+
}));
|
|
277
|
+
}, [
|
|
278
|
+
activities,
|
|
279
|
+
maxVisibleItems,
|
|
280
|
+
nowMs
|
|
281
|
+
]);
|
|
282
|
+
const totalCount = Math.min(activities.length, maxVisibleItems);
|
|
283
|
+
return /* @__PURE__ */ jsx("div", {
|
|
284
|
+
className: `@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} ${borderWidthClasses[borderWidth]} ${borderWidth !== "none" ? borderColorClasses[borderColor] : ""} ${className ?? ""}`,
|
|
285
|
+
style: {
|
|
286
|
+
backgroundImage,
|
|
287
|
+
boxShadow: `0 1px 2px color-mix(in oklch, var(--color-foreground) 4%, transparent), 0 14px 32px -20px color-mix(in oklch, var(--color-foreground) 14%, transparent)`
|
|
288
|
+
},
|
|
289
|
+
...props,
|
|
290
|
+
children: /* @__PURE__ */ jsxs("div", {
|
|
291
|
+
className: `p-${padding} flex flex-col`,
|
|
292
|
+
children: [titleEnabled && titleText && /* @__PURE__ */ jsxs("div", {
|
|
293
|
+
className: "mb-4 flex items-end justify-between gap-3",
|
|
294
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
295
|
+
className: "flex min-w-0 flex-col",
|
|
296
|
+
children: [shouldRenderEyebrow(showEyebrow, titleText) && /* @__PURE__ */ jsx("span", {
|
|
297
|
+
className: `text-[10px] font-bold tracking-[0.2em] uppercase text-${textColor}/55`,
|
|
298
|
+
children: "Recent"
|
|
299
|
+
}), /* @__PURE__ */ jsx("h2", {
|
|
300
|
+
className: `mt-0.5 text-${titleFontSize} leading-tight font-bold tracking-[-0.015em] text-${titleColor}`,
|
|
301
|
+
children: titleText
|
|
302
|
+
})]
|
|
303
|
+
}), !isLoading && !isError && showCountChip && totalCount > 0 && /* @__PURE__ */ jsxs("span", {
|
|
304
|
+
className: `inline-flex shrink-0 items-center gap-1.5 rounded-full bg-${accentColor}/10 px-2 py-1 text-[10px] font-bold tracking-[0.06em] text-${accentColor}`,
|
|
305
|
+
children: [
|
|
306
|
+
/* @__PURE__ */ jsx("span", {
|
|
307
|
+
"aria-hidden": "true",
|
|
308
|
+
className: `size-1.5 rounded-full bg-${accentColor}`
|
|
309
|
+
}),
|
|
310
|
+
totalCount,
|
|
311
|
+
" ",
|
|
312
|
+
totalCount === 1 ? "update" : "updates"
|
|
313
|
+
]
|
|
314
|
+
})]
|
|
315
|
+
}), isLoading ? /* @__PURE__ */ jsx(ActivitySkeleton, {
|
|
316
|
+
textColor,
|
|
317
|
+
showTimeline,
|
|
318
|
+
rowCount: maxVisibleItems
|
|
319
|
+
}) : isError ? /* @__PURE__ */ jsx(ErrorState, {}) : activities.length === 0 ? /* @__PURE__ */ jsx(EmptyState, {
|
|
320
|
+
textColor,
|
|
321
|
+
accentColor
|
|
322
|
+
}) : /* @__PURE__ */ jsx("div", {
|
|
323
|
+
role: "feed",
|
|
324
|
+
className: "flex flex-col gap-3",
|
|
325
|
+
children: activitiesToShow.map((group, groupIdx) => /* @__PURE__ */ jsxs("section", {
|
|
326
|
+
className: "flex flex-col gap-1",
|
|
327
|
+
children: [/* @__PURE__ */ jsxs("header", {
|
|
328
|
+
className: "flex items-center gap-2 px-2",
|
|
329
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
330
|
+
className: `text-[10px] font-bold tracking-[0.18em] uppercase text-${textColor}/55`,
|
|
331
|
+
children: group.date
|
|
332
|
+
}), /* @__PURE__ */ jsx("span", {
|
|
333
|
+
"aria-hidden": "true",
|
|
334
|
+
className: "h-px flex-1",
|
|
335
|
+
style: { background: `color-mix(in oklch, var(--color-${textColor}) 8%, transparent)` }
|
|
336
|
+
})]
|
|
337
|
+
}), /* @__PURE__ */ jsxs("ul", {
|
|
338
|
+
className: "relative flex flex-col",
|
|
339
|
+
children: [showTimeline && group.items.length > 1 && /* @__PURE__ */ jsx("span", {
|
|
340
|
+
"aria-hidden": "true",
|
|
341
|
+
className: "pointer-events-none absolute top-[26px] bottom-[26px] left-[26px] w-px",
|
|
342
|
+
style: { background: `color-mix(in oklch, var(--color-${textColor}) 10%, transparent)` }
|
|
343
|
+
}), group.items.map((activity) => /* @__PURE__ */ jsx(ActivityRow, {
|
|
344
|
+
activity,
|
|
345
|
+
accentColor,
|
|
346
|
+
textColor,
|
|
347
|
+
surfaceColor: backgroundColor,
|
|
348
|
+
showRelativeTime,
|
|
349
|
+
nowMs
|
|
350
|
+
}, activity.id))]
|
|
351
|
+
})]
|
|
352
|
+
}, `${group.date}-${groupIdx}`))
|
|
353
|
+
})]
|
|
354
|
+
})
|
|
355
|
+
});
|
|
356
|
+
}
|
|
357
|
+
function EmptyState({ textColor, accentColor }) {
|
|
358
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
359
|
+
className: "flex flex-col items-center justify-center gap-3 px-4 py-10",
|
|
360
|
+
children: [/* @__PURE__ */ jsx("div", {
|
|
361
|
+
className: "relative flex size-12 items-center justify-center rounded-full",
|
|
362
|
+
style: {
|
|
363
|
+
background: `color-mix(in oklch, var(--color-${accentColor}) 10%, transparent)`,
|
|
364
|
+
boxShadow: `inset 0 0 0 1px color-mix(in oklch, var(--color-${textColor}) 8%, transparent)`
|
|
365
|
+
},
|
|
366
|
+
children: /* @__PURE__ */ jsx(AudioWaveform, { className: `size-5 text-${accentColor}/80` })
|
|
367
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
368
|
+
className: "flex flex-col items-center gap-1",
|
|
369
|
+
children: [/* @__PURE__ */ jsx("p", {
|
|
370
|
+
className: `text-[13px] font-semibold text-${textColor}/80`,
|
|
371
|
+
children: "No activity yet"
|
|
372
|
+
}), /* @__PURE__ */ jsx("p", {
|
|
373
|
+
className: `max-w-[24ch] text-center text-[11px] leading-snug text-${textColor}/55`,
|
|
374
|
+
children: "Orders, messages, views and leads will show up here as they happen."
|
|
375
|
+
})]
|
|
376
|
+
})]
|
|
377
|
+
});
|
|
378
|
+
}
|
|
379
|
+
function ActivitySkeleton({ textColor, showTimeline, rowCount }) {
|
|
380
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
381
|
+
className: "relative flex flex-col",
|
|
382
|
+
"aria-busy": "true",
|
|
383
|
+
children: [showTimeline && /* @__PURE__ */ jsx("span", {
|
|
384
|
+
"aria-hidden": "true",
|
|
385
|
+
className: "pointer-events-none absolute top-[26px] bottom-[26px] left-[26px] w-px",
|
|
386
|
+
style: { background: `color-mix(in oklch, var(--color-${textColor}) 10%, transparent)` }
|
|
387
|
+
}), Array.from({ length: rowCount }, (_, i) => i).map((i) => /* @__PURE__ */ jsxs("div", {
|
|
388
|
+
className: "relative flex items-start gap-3 rounded-md px-2 py-2",
|
|
389
|
+
children: [/* @__PURE__ */ jsx("div", { className: `size-9 shrink-0 animate-pulse rounded-full bg-${textColor}/10` }), /* @__PURE__ */ jsxs("div", {
|
|
390
|
+
className: "flex min-w-0 flex-1 flex-col gap-1.5",
|
|
391
|
+
children: [/* @__PURE__ */ jsx("div", { className: `h-2 w-2/3 animate-pulse rounded-full bg-${textColor}/10` }), /* @__PURE__ */ jsx("div", { className: `h-2 w-1/2 animate-pulse rounded-full bg-${textColor}/10` })]
|
|
392
|
+
})]
|
|
393
|
+
}, i))]
|
|
394
|
+
});
|
|
395
|
+
}
|
|
396
|
+
const recentActivityWidgetPropertySchema = {
|
|
397
|
+
widgetType: "RecentActivityWidget",
|
|
398
|
+
displayName: "Recent Activity Widget",
|
|
399
|
+
tabsConfig: [{
|
|
400
|
+
id: "styling",
|
|
401
|
+
label: "Styling"
|
|
402
|
+
}],
|
|
403
|
+
fields: [
|
|
404
|
+
{
|
|
405
|
+
key: "titleEnabled",
|
|
406
|
+
label: "Widget Title",
|
|
407
|
+
type: "boolean",
|
|
408
|
+
description: "Display the title and eyebrow above the feed",
|
|
409
|
+
defaultValue: true,
|
|
410
|
+
tab: "styling",
|
|
411
|
+
group: "Title"
|
|
412
|
+
},
|
|
413
|
+
{
|
|
414
|
+
key: "titleText",
|
|
415
|
+
label: "Title",
|
|
416
|
+
type: "text",
|
|
417
|
+
description: "Title text displayed above the activity feed",
|
|
418
|
+
defaultValue: "Activity",
|
|
419
|
+
tab: "styling",
|
|
420
|
+
group: "Title",
|
|
421
|
+
requiresKeyToBeTrue: "titleEnabled"
|
|
422
|
+
},
|
|
423
|
+
getFontSizeField({
|
|
424
|
+
key: "titleFontSize",
|
|
425
|
+
label: "Title Font Size",
|
|
426
|
+
description: "Font size for the widget title",
|
|
427
|
+
defaultValue: "xl",
|
|
428
|
+
tab: "styling",
|
|
429
|
+
group: "Title",
|
|
430
|
+
requiresKeyToBeTrue: "titleEnabled"
|
|
431
|
+
}),
|
|
432
|
+
getColorField({
|
|
433
|
+
key: "titleColor",
|
|
434
|
+
label: "Title Color",
|
|
435
|
+
description: "Color for the widget title",
|
|
436
|
+
defaultValue: "foreground",
|
|
437
|
+
tab: "styling",
|
|
438
|
+
group: "Title",
|
|
439
|
+
requiresKeyToBeTrue: "titleEnabled"
|
|
440
|
+
}),
|
|
441
|
+
{
|
|
442
|
+
key: "showEyebrow",
|
|
443
|
+
label: "Show 'RECENT' Eyebrow",
|
|
444
|
+
type: "boolean",
|
|
445
|
+
description: "Small uppercase label above the title",
|
|
446
|
+
defaultValue: true,
|
|
447
|
+
tab: "styling",
|
|
448
|
+
group: "Title",
|
|
449
|
+
requiresKeyToBeTrue: "titleEnabled"
|
|
450
|
+
},
|
|
451
|
+
{
|
|
452
|
+
key: "showCountChip",
|
|
453
|
+
label: "Show Updates Count Chip",
|
|
454
|
+
type: "boolean",
|
|
455
|
+
description: "Accent pill next to the title showing how many updates",
|
|
456
|
+
defaultValue: true,
|
|
457
|
+
tab: "styling",
|
|
458
|
+
group: "Title",
|
|
459
|
+
requiresKeyToBeTrue: "titleEnabled"
|
|
460
|
+
},
|
|
461
|
+
{
|
|
462
|
+
key: "maxItemsToShow",
|
|
463
|
+
label: "Max Items",
|
|
464
|
+
type: "number",
|
|
465
|
+
description: "Maximum number of activity items to display",
|
|
466
|
+
defaultValue: DEFAULT_MAX_ITEMS_TO_SHOW,
|
|
467
|
+
min: 1,
|
|
468
|
+
max: MAX_ITEMS_TO_SHOW_LIMIT,
|
|
469
|
+
step: 1,
|
|
470
|
+
tab: "styling",
|
|
471
|
+
group: "Feed"
|
|
472
|
+
},
|
|
473
|
+
{
|
|
474
|
+
key: "showTimeline",
|
|
475
|
+
label: "Timeline Spine",
|
|
476
|
+
type: "boolean",
|
|
477
|
+
description: "Draw a vertical line connecting activity avatars",
|
|
478
|
+
defaultValue: true,
|
|
479
|
+
tab: "styling",
|
|
480
|
+
group: "Feed"
|
|
481
|
+
},
|
|
482
|
+
{
|
|
483
|
+
key: "showRelativeTime",
|
|
484
|
+
label: "Relative Timestamps",
|
|
485
|
+
type: "boolean",
|
|
486
|
+
description: "Show 'now / 2m / 1h / 3d' instead of absolute times",
|
|
487
|
+
defaultValue: true,
|
|
488
|
+
tab: "styling",
|
|
489
|
+
group: "Feed"
|
|
490
|
+
},
|
|
491
|
+
{
|
|
492
|
+
type: "background",
|
|
493
|
+
key: "background",
|
|
494
|
+
label: "Background",
|
|
495
|
+
description: "Background for the widget container",
|
|
496
|
+
defaultValue: "background",
|
|
497
|
+
tab: "styling",
|
|
498
|
+
group: "Design"
|
|
499
|
+
},
|
|
500
|
+
getColorField({
|
|
501
|
+
key: "textColor",
|
|
502
|
+
label: "Text Color",
|
|
503
|
+
description: "Default text color for activity content",
|
|
504
|
+
defaultValue: "foreground",
|
|
505
|
+
tab: "styling",
|
|
506
|
+
group: "Design"
|
|
507
|
+
}),
|
|
508
|
+
getColorField({
|
|
509
|
+
key: "accentColor",
|
|
510
|
+
label: "Accent Color",
|
|
511
|
+
description: "Drives the count chip, type badge, initials avatar, and empty-state icon",
|
|
512
|
+
defaultValue: "primary",
|
|
513
|
+
tab: "styling",
|
|
514
|
+
group: "Design"
|
|
515
|
+
}),
|
|
516
|
+
{
|
|
517
|
+
key: "separator",
|
|
518
|
+
type: "separator",
|
|
519
|
+
label: "Separator",
|
|
520
|
+
tab: "styling",
|
|
521
|
+
group: "Design"
|
|
522
|
+
},
|
|
523
|
+
getPaddingField({
|
|
524
|
+
key: "padding",
|
|
525
|
+
label: "Padding",
|
|
526
|
+
description: "Padding around the widget container",
|
|
527
|
+
defaultValue: 4,
|
|
528
|
+
tab: "styling",
|
|
529
|
+
group: "Design"
|
|
530
|
+
}),
|
|
531
|
+
getBorderRadiusField({
|
|
532
|
+
key: "borderRadius",
|
|
533
|
+
label: "Border Radius",
|
|
534
|
+
description: "Border radius for the widget container",
|
|
535
|
+
defaultValue: "md",
|
|
536
|
+
tab: "styling",
|
|
537
|
+
group: "Design"
|
|
538
|
+
}),
|
|
539
|
+
getBorderWidthField({
|
|
540
|
+
key: "borderWidth",
|
|
541
|
+
label: "Border Width",
|
|
542
|
+
description: "Border width for the widget container",
|
|
543
|
+
defaultValue: "thin",
|
|
544
|
+
tab: "styling",
|
|
545
|
+
group: "Design"
|
|
546
|
+
}),
|
|
547
|
+
getBorderColorField({
|
|
548
|
+
key: "borderColor",
|
|
549
|
+
label: "Border Color",
|
|
550
|
+
description: "Border color for the widget container",
|
|
551
|
+
defaultValue: "muted",
|
|
552
|
+
tab: "styling",
|
|
553
|
+
group: "Design"
|
|
554
|
+
})
|
|
555
|
+
]
|
|
556
|
+
};
|
|
557
|
+
//#endregion
|
|
558
|
+
export { RecentActivityWidget_exports as n, recentActivityWidgetPropertySchema as r, RecentActivityWidget as t };
|
|
559
|
+
|
|
560
|
+
//# sourceMappingURL=RecentActivityWidget-C6qm5x9b.mjs.map
|