@fluid-app/portal-widgets 0.1.17

package/dist/MySiteWidget-A_cYFgxJ.cjs

@@ -0,0 +1,279 @@
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
+const require_error_state = require("./error-state-DSzVUtEl.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let react = require("react");
+let _tanstack_react_query = require("@tanstack/react-query");
+let _fluid_app_portal_core_data_sources_context = require("@fluid-app/portal-core/data-sources/context");
+let _fluid_app_portal_core_data_sources_preview_context = require("@fluid-app/portal-core/data-sources/preview-context");
+let _fluid_app_portal_core_registries = require("@fluid-app/portal-core/registries");
+//#region src/hooks/use-mysite.preview.ts
+const PREVIEW_DATA = {
+	url: "https://mysite.example.com",
+	views: 1248,
+	leads: 43,
+	userName: "Jane"
+};
+//#endregion
+//#region src/hooks/use-mysite.ts
+function useMySite() {
+	const { baseUrl, getApiHeaders } = (0, _fluid_app_portal_core_data_sources_context.useDataSourceConfig)();
+	const { isPreview } = (0, _fluid_app_portal_core_data_sources_preview_context.useWidgetPreviewContext)();
+	return (0, _tanstack_react_query.useQuery)({
+		queryKey: [
+			"portal-widget-use",
+			"mysite",
+			isPreview ? "preview" : baseUrl
+		],
+		queryFn: async ({ signal }) => {
+			const url = baseUrl ? `${baseUrl}/me` : "/me";
+			const response = await fetch(url, {
+				headers: {
+					"content-type": "application/json",
+					...getApiHeaders?.()
+				},
+				signal
+			});
+			if (!response.ok) throw new Error(`Failed to fetch MySite data: ${response.status}`);
+			const data = await response.json();
+			return {
+				url: data.mysite_url ?? null,
+				views: data.mysite_views ?? 0,
+				leads: data.mysite_leads ?? 0,
+				userName: data.name || data.first_name || "User"
+			};
+		},
+		enabled: !isPreview,
+		...isPreview && { placeholderData: PREVIEW_DATA }
+	});
+}
+//#endregion
+//#region src/widgets/MySiteWidget.tsx
+var MySiteWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	MySiteWidget: () => MySiteWidget,
+	mySiteWidgetPropertySchema: () => mySiteWidgetPropertySchema
+});
+function MySiteWidget({ titleEnabled = true, titleText = "My Site", titleFontSize = "lg", titleColor = "foreground", background = {
+	type: "solid",
+	color: "background"
+}, textColor = "foreground", accentColor = "primary", padding = 4, borderRadius = "md", showPreview = true, showAnalytics = true, className, ...props }) {
+	const backgroundColor = background.color || "background";
+	const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
+	const { data: mySite, isLoading, isError } = useMySite();
+	const previewUrl = (0, react.useMemo)(() => {
+		if (!mySite?.url) return "";
+		try {
+			const urlObj = new URL(mySite.url);
+			urlObj.searchParams.set("preview", "true");
+			return urlObj.toString();
+		} catch {
+			return mySite.url;
+		}
+	}, [mySite?.url]);
+	const displayUrl = (0, react.useMemo)(() => mySite?.url ? mySite.url.replace(/^https?:\/\//, "") : "", [mySite?.url]);
+	if (!isLoading && !isError && !mySite?.url) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} ${className}`,
+		style: { backgroundImage },
+		...props,
+		children: [titleEnabled && titleText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `p-${padding} pb-0`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				className: `text-${titleFontSize} font-bold text-${titleColor}`,
+				children: mySite?.userName ? `${mySite.userName}'s ${titleText}` : titleText
+			})
+		}), isLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `flex min-h-[200px] items-center justify-center p-${padding}`,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" })
+		}) : isError ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_error_state.ErrorState, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: `p-${padding}`,
+			children: [showPreview && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "border-muted mb-4 overflow-hidden rounded-lg border",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "bg-[#f3f4f6] px-3 py-2 text-[#6b7280]",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "flex gap-1",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-3 w-3 rounded-full bg-[#ff5f57]" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-3 w-3 rounded-full bg-[#febc2e]" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "h-3 w-3 rounded-full bg-[#28c840]" })
+							]
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "flex-1 text-center",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+								href: mySite?.url ?? "",
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "text-sm opacity-60",
+								children: displayUrl
+							})
+						})]
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "h-[200px] overflow-hidden bg-[#ffffff] @md:h-[280px]",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("iframe", {
+						className: "pointer-events-none h-[700%] w-[700%] origin-top-left scale-[0.14] bg-[#ffffff]",
+						src: previewUrl,
+						title: "MySite Preview"
+					})
+				})]
+			}), showAnalytics && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-muted bg-background rounded-lg border p-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-xs opacity-60",
+						children: "Visitors This Month"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `text-xl font-bold text-${accentColor}`,
+						children: mySite?.views ?? 0
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "border-muted bg-background rounded-lg border p-3",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "text-xs opacity-60",
+						children: "Total Leads"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: `text-xl font-bold text-${accentColor}`,
+						children: mySite?.leads ?? 0
+					})]
+				})]
+			})]
+		})]
+	});
+}
+const mySiteWidgetPropertySchema = {
+	widgetType: "MySiteWidget",
+	displayName: "MySite Widget",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: [
+		{
+			key: "titleEnabled",
+			label: "Widget Title",
+			type: "boolean",
+			description: "Enable the title displayed above the widget",
+			defaultValue: true,
+			tab: "styling",
+			group: "Title"
+		},
+		{
+			key: "titleText",
+			label: "Title",
+			type: "text",
+			description: "Title text displayed above the widget",
+			defaultValue: "My Site",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		},
+		(0, _fluid_app_portal_core_registries.getFontSizeField)({
+			key: "titleFontSize",
+			label: "Title Font Size",
+			description: "Font size for the widget title",
+			defaultValue: "xl",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		(0, _fluid_app_portal_core_registries.getColorField)({
+			key: "titleColor",
+			label: "Title Color",
+			description: "Color for the widget title",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		{
+			type: "background",
+			key: "background",
+			label: "Background",
+			description: "Background for the widget container",
+			defaultValue: "background",
+			tab: "styling",
+			group: "Design"
+		},
+		(0, _fluid_app_portal_core_registries.getColorField)({
+			key: "textColor",
+			label: "Text Color",
+			description: "Default text color for widget content",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Design"
+		}),
+		(0, _fluid_app_portal_core_registries.getColorField)({
+			key: "accentColor",
+			label: "Accent Color",
+			description: "Color used for analytics numbers",
+			defaultValue: "primary",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "separator",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Design"
+		},
+		(0, _fluid_app_portal_core_registries.getPaddingField)({
+			key: "padding",
+			label: "Padding",
+			description: "Padding around the widget container",
+			defaultValue: 4,
+			tab: "styling",
+			group: "Design"
+		}),
+		(0, _fluid_app_portal_core_registries.getBorderRadiusField)({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the widget container",
+			defaultValue: "md",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "showPreview",
+			label: "Show Preview",
+			type: "boolean",
+			description: "Show the MySite iframe preview",
+			defaultValue: true,
+			tab: "styling",
+			group: "Display"
+		},
+		{
+			key: "showAnalytics",
+			label: "Show Analytics",
+			type: "boolean",
+			description: "Show the analytics section",
+			defaultValue: true,
+			tab: "styling",
+			group: "Display"
+		}
+	]
+};
+//#endregion
+Object.defineProperty(exports, "MySiteWidget", {
+	enumerable: true,
+	get: function() {
+		return MySiteWidget;
+	}
+});
+Object.defineProperty(exports, "MySiteWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return MySiteWidget_exports;
+	}
+});
+Object.defineProperty(exports, "mySiteWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return mySiteWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=MySiteWidget-A_cYFgxJ.cjs.map

package/dist/MySiteWidget-A_cYFgxJ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MySiteWidget-A_cYFgxJ.cjs","names":["ErrorState"],"sources":["../src/hooks/use-mysite.preview.ts","../src/hooks/use-mysite.ts","../src/widgets/MySiteWidget.tsx"],"sourcesContent":["import type { MySiteData } from \"./use-mysite.types\";\n\nexport const PREVIEW_DATA: MySiteData = {\n  url: \"https://mysite.example.com\",\n  views: 1248,\n  leads: 43,\n  userName: \"Jane\",\n};\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/portal-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-mysite.preview\";\n\nimport type { MySiteData } from \"./use-mysite.types\";\n\nexport type { MySiteData } from \"./use-mysite.types\";\n\nexport function useMySite(): UseQueryResult<MySiteData, Error> {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"portal-widget-use\",\n      \"mysite\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<MySiteData> => {\n      const url = baseUrl ? `${baseUrl}/me` : \"/me\";\n      const response = await fetch(url, {\n        headers: {\n          \"content-type\": \"application/json\",\n          ...getApiHeaders?.(),\n        },\n        signal,\n      });\n\n      if (!response.ok) {\n        throw new Error(`Failed to fetch MySite data: ${response.status}`);\n      }\n\n      const data = await response.json();\n      return {\n        url: data.mysite_url ?? null,\n        views: data.mysite_views ?? 0,\n        leads: data.mysite_leads ?? 0,\n        userName: data.name || data.first_name || \"User\",\n      };\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n","import { useMemo, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport { useMySite } from \"../hooks/use-mysite\";\nimport { ErrorState } from \"../components/error-state\";\n\ntype MySiteWidgetProps = ComponentProps<\"div\"> & {\n  // Title settings\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Design settings\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Display settings\n  showPreview?: boolean;\n  showAnalytics?: boolean;\n};\n\nexport function MySiteWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"My Site\",\n  titleFontSize = \"lg\",\n  titleColor = \"foreground\",\n\n  // Design defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Display defaults\n  showPreview = true,\n  showAnalytics = true,\n\n  className,\n  ...props\n}: MySiteWidgetProps): React.JSX.Element | null {\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n  const { data: mySite, isLoading, isError } = useMySite();\n\n  // Generate preview URL with preview=true parameter\n  const previewUrl = useMemo(() => {\n    if (!mySite?.url) return \"\";\n    try {\n      const urlObj = new URL(mySite.url);\n      urlObj.searchParams.set(\"preview\", \"true\");\n      return urlObj.toString();\n    } catch {\n      return mySite.url;\n    }\n  }, [mySite?.url]);\n\n  // Display URL without protocol\n  const displayUrl = useMemo(\n    () => (mySite?.url ? mySite.url.replace(/^https?:\\/\\//, \"\") : \"\"),\n    [mySite?.url],\n  );\n\n  // Don't render if no MySite URL exists (but still render if errored or loading)\n  if (!isLoading && !isError && !mySite?.url) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} ${className}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {/* Title */}\n      {titleEnabled && titleText && (\n        <div className={`p-${padding} pb-0`}>\n          <h2 className={`text-${titleFontSize} font-bold text-${titleColor}`}>\n            {mySite?.userName ? `${mySite.userName}'s ${titleText}` : titleText}\n          </h2>\n        </div>\n      )}\n\n      {/* Loading state */}\n      {isLoading ? (\n        <div\n          className={`flex min-h-[200px] items-center justify-center p-${padding}`}\n        >\n          <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n        </div>\n      ) : isError ? (\n        <ErrorState />\n      ) : (\n        <div className={`p-${padding}`}>\n          {/* MySite iframe preview */}\n          {showPreview && (\n            <div className=\"border-muted mb-4 overflow-hidden rounded-lg border\">\n              {/* Browser chrome */}\n              <div className=\"bg-[#f3f4f6] px-3 py-2 text-[#6b7280]\">\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"flex gap-1\">\n                    <div className=\"h-3 w-3 rounded-full bg-[#ff5f57]\" />\n                    <div className=\"h-3 w-3 rounded-full bg-[#febc2e]\" />\n                    <div className=\"h-3 w-3 rounded-full bg-[#28c840]\" />\n                  </div>\n                  <div className=\"flex-1 text-center\">\n                    <a\n                      href={mySite?.url ?? \"\"}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"text-sm opacity-60\"\n                    >\n                      {displayUrl}\n                    </a>\n                  </div>\n                </div>\n              </div>\n              {/* iframe container */}\n              <div className=\"h-[200px] overflow-hidden bg-[#ffffff] @md:h-[280px]\">\n                <iframe\n                  className=\"pointer-events-none h-[700%] w-[700%] origin-top-left scale-[0.14] bg-[#ffffff]\"\n                  src={previewUrl}\n                  title=\"MySite Preview\"\n                />\n              </div>\n            </div>\n          )}\n\n          {/* Analytics data */}\n          {showAnalytics && (\n            <div className=\"grid grid-cols-2 gap-3\">\n              <div className=\"border-muted bg-background rounded-lg border p-3\">\n                <div className=\"text-xs opacity-60\">Visitors This Month</div>\n                <div className={`text-xl font-bold text-${accentColor}`}>\n                  {mySite?.views ?? 0}\n                </div>\n              </div>\n              <div className=\"border-muted bg-background rounded-lg border p-3\">\n                <div className=\"text-xs opacity-60\">Total Leads</div>\n                <div className={`text-xl font-bold text-${accentColor}`}>\n                  {mySite?.leads ?? 0}\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const mySiteWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"MySiteWidget\",\n  displayName: \"MySite Widget\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [\n    // Styling Tab - Title Group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed above the widget\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"titleText\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Title text displayed above the widget\",\n      defaultValue: \"My Site\",\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 widget title\",\n      defaultValue: \"xl\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Styling Tab - Design Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the widget container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color for widget content\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for analytics numbers\",\n      defaultValue: \"primary\",\n      tab: \"styling\",\n      group: \"Design\",\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 container\",\n      defaultValue: 4,\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: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Styling Tab - Display Group\n    {\n      key: \"showPreview\",\n      label: \"Show Preview\",\n      type: \"boolean\",\n      description: \"Show the MySite iframe preview\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Display\",\n    },\n    {\n      key: \"showAnalytics\",\n      label: \"Show Analytics\",\n      type: \"boolean\",\n      description: \"Show the analytics section\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Display\",\n    },\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}

package/dist/MySiteWidget-DariqlfU.mjs

@@ -0,0 +1,262 @@
+import { t as __exportAll } from "./rolldown-runtime-wcPFST8Q.mjs";
+import { a as getFontSizeField, c as getPaddingField, i as getColorField, n as getBorderRadiusField } from "./fields-wPOk-SmZ.mjs";
+import { t as ErrorState } from "./error-state-DErSxZwH.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useDataSourceConfig } from "@fluid-app/portal-core/data-sources/context";
+import { useWidgetPreviewContext } from "@fluid-app/portal-core/data-sources/preview-context";
+//#region src/hooks/use-mysite.preview.ts
+const PREVIEW_DATA = {
+	url: "https://mysite.example.com",
+	views: 1248,
+	leads: 43,
+	userName: "Jane"
+};
+//#endregion
+//#region src/hooks/use-mysite.ts
+function useMySite() {
+	const { baseUrl, getApiHeaders } = useDataSourceConfig();
+	const { isPreview } = useWidgetPreviewContext();
+	return useQuery({
+		queryKey: [
+			"portal-widget-use",
+			"mysite",
+			isPreview ? "preview" : baseUrl
+		],
+		queryFn: async ({ signal }) => {
+			const url = baseUrl ? `${baseUrl}/me` : "/me";
+			const response = await fetch(url, {
+				headers: {
+					"content-type": "application/json",
+					...getApiHeaders?.()
+				},
+				signal
+			});
+			if (!response.ok) throw new Error(`Failed to fetch MySite data: ${response.status}`);
+			const data = await response.json();
+			return {
+				url: data.mysite_url ?? null,
+				views: data.mysite_views ?? 0,
+				leads: data.mysite_leads ?? 0,
+				userName: data.name || data.first_name || "User"
+			};
+		},
+		enabled: !isPreview,
+		...isPreview && { placeholderData: PREVIEW_DATA }
+	});
+}
+//#endregion
+//#region src/widgets/MySiteWidget.tsx
+var MySiteWidget_exports = /* @__PURE__ */ __exportAll({
+	MySiteWidget: () => MySiteWidget,
+	mySiteWidgetPropertySchema: () => mySiteWidgetPropertySchema
+});
+function MySiteWidget({ titleEnabled = true, titleText = "My Site", titleFontSize = "lg", titleColor = "foreground", background = {
+	type: "solid",
+	color: "background"
+}, textColor = "foreground", accentColor = "primary", padding = 4, borderRadius = "md", showPreview = true, showAnalytics = true, className, ...props }) {
+	const backgroundColor = background.color || "background";
+	const backgroundImage = (background.resource?.image_url || background.resource?.imageUrl) && background.type === "image" ? `url(${background.resource.image_url || background.resource.imageUrl})` : "none";
+	const { data: mySite, isLoading, isError } = useMySite();
+	const previewUrl = useMemo(() => {
+		if (!mySite?.url) return "";
+		try {
+			const urlObj = new URL(mySite.url);
+			urlObj.searchParams.set("preview", "true");
+			return urlObj.toString();
+		} catch {
+			return mySite.url;
+		}
+	}, [mySite?.url]);
+	const displayUrl = useMemo(() => mySite?.url ? mySite.url.replace(/^https?:\/\//, "") : "", [mySite?.url]);
+	if (!isLoading && !isError && !mySite?.url) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} ${className}`,
+		style: { backgroundImage },
+		...props,
+		children: [titleEnabled && titleText && /* @__PURE__ */ jsx("div", {
+			className: `p-${padding} pb-0`,
+			children: /* @__PURE__ */ jsx("h2", {
+				className: `text-${titleFontSize} font-bold text-${titleColor}`,
+				children: mySite?.userName ? `${mySite.userName}'s ${titleText}` : titleText
+			})
+		}), isLoading ? /* @__PURE__ */ jsx("div", {
+			className: `flex min-h-[200px] items-center justify-center p-${padding}`,
+			children: /* @__PURE__ */ jsx("div", { className: "h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent" })
+		}) : isError ? /* @__PURE__ */ jsx(ErrorState, {}) : /* @__PURE__ */ jsxs("div", {
+			className: `p-${padding}`,
+			children: [showPreview && /* @__PURE__ */ jsxs("div", {
+				className: "border-muted mb-4 overflow-hidden rounded-lg border",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "bg-[#f3f4f6] px-3 py-2 text-[#6b7280]",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex gap-1",
+							children: [
+								/* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-[#ff5f57]" }),
+								/* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-[#febc2e]" }),
+								/* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full bg-[#28c840]" })
+							]
+						}), /* @__PURE__ */ jsx("div", {
+							className: "flex-1 text-center",
+							children: /* @__PURE__ */ jsx("a", {
+								href: mySite?.url ?? "",
+								target: "_blank",
+								rel: "noopener noreferrer",
+								className: "text-sm opacity-60",
+								children: displayUrl
+							})
+						})]
+					})
+				}), /* @__PURE__ */ jsx("div", {
+					className: "h-[200px] overflow-hidden bg-[#ffffff] @md:h-[280px]",
+					children: /* @__PURE__ */ jsx("iframe", {
+						className: "pointer-events-none h-[700%] w-[700%] origin-top-left scale-[0.14] bg-[#ffffff]",
+						src: previewUrl,
+						title: "MySite Preview"
+					})
+				})]
+			}), showAnalytics && /* @__PURE__ */ jsxs("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "border-muted bg-background rounded-lg border p-3",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-xs opacity-60",
+						children: "Visitors This Month"
+					}), /* @__PURE__ */ jsx("div", {
+						className: `text-xl font-bold text-${accentColor}`,
+						children: mySite?.views ?? 0
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "border-muted bg-background rounded-lg border p-3",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "text-xs opacity-60",
+						children: "Total Leads"
+					}), /* @__PURE__ */ jsx("div", {
+						className: `text-xl font-bold text-${accentColor}`,
+						children: mySite?.leads ?? 0
+					})]
+				})]
+			})]
+		})]
+	});
+}
+const mySiteWidgetPropertySchema = {
+	widgetType: "MySiteWidget",
+	displayName: "MySite Widget",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: [
+		{
+			key: "titleEnabled",
+			label: "Widget Title",
+			type: "boolean",
+			description: "Enable the title displayed above the widget",
+			defaultValue: true,
+			tab: "styling",
+			group: "Title"
+		},
+		{
+			key: "titleText",
+			label: "Title",
+			type: "text",
+			description: "Title text displayed above the widget",
+			defaultValue: "My Site",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		},
+		getFontSizeField({
+			key: "titleFontSize",
+			label: "Title Font Size",
+			description: "Font size for the widget title",
+			defaultValue: "xl",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		getColorField({
+			key: "titleColor",
+			label: "Title Color",
+			description: "Color for the widget title",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		{
+			type: "background",
+			key: "background",
+			label: "Background",
+			description: "Background for the widget container",
+			defaultValue: "background",
+			tab: "styling",
+			group: "Design"
+		},
+		getColorField({
+			key: "textColor",
+			label: "Text Color",
+			description: "Default text color for widget content",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Design"
+		}),
+		getColorField({
+			key: "accentColor",
+			label: "Accent Color",
+			description: "Color used for analytics numbers",
+			defaultValue: "primary",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "separator",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Design"
+		},
+		getPaddingField({
+			key: "padding",
+			label: "Padding",
+			description: "Padding around the widget container",
+			defaultValue: 4,
+			tab: "styling",
+			group: "Design"
+		}),
+		getBorderRadiusField({
+			key: "borderRadius",
+			label: "Border Radius",
+			description: "Border radius for the widget container",
+			defaultValue: "md",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "showPreview",
+			label: "Show Preview",
+			type: "boolean",
+			description: "Show the MySite iframe preview",
+			defaultValue: true,
+			tab: "styling",
+			group: "Display"
+		},
+		{
+			key: "showAnalytics",
+			label: "Show Analytics",
+			type: "boolean",
+			description: "Show the analytics section",
+			defaultValue: true,
+			tab: "styling",
+			group: "Display"
+		}
+	]
+};
+//#endregion
+export { MySiteWidget_exports as n, mySiteWidgetPropertySchema as r, MySiteWidget as t };
+
+//# sourceMappingURL=MySiteWidget-DariqlfU.mjs.map

package/dist/MySiteWidget-DariqlfU.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MySiteWidget-DariqlfU.mjs","names":[],"sources":["../src/hooks/use-mysite.preview.ts","../src/hooks/use-mysite.ts","../src/widgets/MySiteWidget.tsx"],"sourcesContent":["import type { MySiteData } from \"./use-mysite.types\";\n\nexport const PREVIEW_DATA: MySiteData = {\n  url: \"https://mysite.example.com\",\n  views: 1248,\n  leads: 43,\n  userName: \"Jane\",\n};\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/portal-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/portal-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-mysite.preview\";\n\nimport type { MySiteData } from \"./use-mysite.types\";\n\nexport type { MySiteData } from \"./use-mysite.types\";\n\nexport function useMySite(): UseQueryResult<MySiteData, Error> {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"portal-widget-use\",\n      \"mysite\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<MySiteData> => {\n      const url = baseUrl ? `${baseUrl}/me` : \"/me\";\n      const response = await fetch(url, {\n        headers: {\n          \"content-type\": \"application/json\",\n          ...getApiHeaders?.(),\n        },\n        signal,\n      });\n\n      if (!response.ok) {\n        throw new Error(`Failed to fetch MySite data: ${response.status}`);\n      }\n\n      const data = await response.json();\n      return {\n        url: data.mysite_url ?? null,\n        views: data.mysite_views ?? 0,\n        leads: data.mysite_leads ?? 0,\n        userName: data.name || data.first_name || \"User\",\n      };\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n","import { useMemo, type ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/portal-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/portal-core/registries\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport { useMySite } from \"../hooks/use-mysite\";\nimport { ErrorState } from \"../components/error-state\";\n\ntype MySiteWidgetProps = ComponentProps<\"div\"> & {\n  // Title settings\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Design settings\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Display settings\n  showPreview?: boolean;\n  showAnalytics?: boolean;\n};\n\nexport function MySiteWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"My Site\",\n  titleFontSize = \"lg\",\n  titleColor = \"foreground\",\n\n  // Design defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Display defaults\n  showPreview = true,\n  showAnalytics = true,\n\n  className,\n  ...props\n}: MySiteWidgetProps): React.JSX.Element | null {\n  const backgroundColor = background.color || \"background\";\n  const backgroundImage =\n    (background.resource?.image_url || background.resource?.imageUrl) &&\n    background.type === \"image\"\n      ? `url(${background.resource.image_url || background.resource.imageUrl})`\n      : \"none\";\n  const { data: mySite, isLoading, isError } = useMySite();\n\n  // Generate preview URL with preview=true parameter\n  const previewUrl = useMemo(() => {\n    if (!mySite?.url) return \"\";\n    try {\n      const urlObj = new URL(mySite.url);\n      urlObj.searchParams.set(\"preview\", \"true\");\n      return urlObj.toString();\n    } catch {\n      return mySite.url;\n    }\n  }, [mySite?.url]);\n\n  // Display URL without protocol\n  const displayUrl = useMemo(\n    () => (mySite?.url ? mySite.url.replace(/^https?:\\/\\//, \"\") : \"\"),\n    [mySite?.url],\n  );\n\n  // Don't render if no MySite URL exists (but still render if errored or loading)\n  if (!isLoading && !isError && !mySite?.url) {\n    return null;\n  }\n\n  return (\n    <div\n      className={`@container overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} ${className}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {/* Title */}\n      {titleEnabled && titleText && (\n        <div className={`p-${padding} pb-0`}>\n          <h2 className={`text-${titleFontSize} font-bold text-${titleColor}`}>\n            {mySite?.userName ? `${mySite.userName}'s ${titleText}` : titleText}\n          </h2>\n        </div>\n      )}\n\n      {/* Loading state */}\n      {isLoading ? (\n        <div\n          className={`flex min-h-[200px] items-center justify-center p-${padding}`}\n        >\n          <div className=\"h-8 w-8 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n        </div>\n      ) : isError ? (\n        <ErrorState />\n      ) : (\n        <div className={`p-${padding}`}>\n          {/* MySite iframe preview */}\n          {showPreview && (\n            <div className=\"border-muted mb-4 overflow-hidden rounded-lg border\">\n              {/* Browser chrome */}\n              <div className=\"bg-[#f3f4f6] px-3 py-2 text-[#6b7280]\">\n                <div className=\"flex items-center gap-2\">\n                  <div className=\"flex gap-1\">\n                    <div className=\"h-3 w-3 rounded-full bg-[#ff5f57]\" />\n                    <div className=\"h-3 w-3 rounded-full bg-[#febc2e]\" />\n                    <div className=\"h-3 w-3 rounded-full bg-[#28c840]\" />\n                  </div>\n                  <div className=\"flex-1 text-center\">\n                    <a\n                      href={mySite?.url ?? \"\"}\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      className=\"text-sm opacity-60\"\n                    >\n                      {displayUrl}\n                    </a>\n                  </div>\n                </div>\n              </div>\n              {/* iframe container */}\n              <div className=\"h-[200px] overflow-hidden bg-[#ffffff] @md:h-[280px]\">\n                <iframe\n                  className=\"pointer-events-none h-[700%] w-[700%] origin-top-left scale-[0.14] bg-[#ffffff]\"\n                  src={previewUrl}\n                  title=\"MySite Preview\"\n                />\n              </div>\n            </div>\n          )}\n\n          {/* Analytics data */}\n          {showAnalytics && (\n            <div className=\"grid grid-cols-2 gap-3\">\n              <div className=\"border-muted bg-background rounded-lg border p-3\">\n                <div className=\"text-xs opacity-60\">Visitors This Month</div>\n                <div className={`text-xl font-bold text-${accentColor}`}>\n                  {mySite?.views ?? 0}\n                </div>\n              </div>\n              <div className=\"border-muted bg-background rounded-lg border p-3\">\n                <div className=\"text-xs opacity-60\">Total Leads</div>\n                <div className={`text-xl font-bold text-${accentColor}`}>\n                  {mySite?.leads ?? 0}\n                </div>\n              </div>\n            </div>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const mySiteWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"MySiteWidget\",\n  displayName: \"MySite Widget\",\n  tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n  fields: [\n    // Styling Tab - Title Group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed above the widget\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Title\",\n    },\n    {\n      key: \"titleText\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"Title text displayed above the widget\",\n      defaultValue: \"My Site\",\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 widget title\",\n      defaultValue: \"xl\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"Color for the widget title\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n\n    // Styling Tab - Design Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the widget container\",\n      defaultValue: \"background\",\n      tab: \"styling\",\n      group: \"Design\",\n    },\n    getColorField({\n      key: \"textColor\",\n      label: \"Text Color\",\n      description: \"Default text color for widget content\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for analytics numbers\",\n      defaultValue: \"primary\",\n      tab: \"styling\",\n      group: \"Design\",\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 container\",\n      defaultValue: 4,\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: \"md\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n\n    // Styling Tab - Display Group\n    {\n      key: \"showPreview\",\n      label: \"Show Preview\",\n      type: \"boolean\",\n      description: \"Show the MySite iframe preview\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Display\",\n    },\n    {\n      key: \"showAnalytics\",\n      label: \"Show Analytics\",\n      type: \"boolean\",\n      description: \"Show the analytics section\",\n      defaultValue: true,\n      tab: \"styling\",\n      group: \"Display\",\n    },\n  ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}