@fluid-app/rep-widgets 0.1.16 → 0.1.17

package/dist/TextWidget-Cn7-yZGk.cjs

@@ -0,0 +1,146 @@
+const require_chunk = require("./chunk-CZWwpsFl.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _fluid_app_rep_core_registries = require("@fluid-app/rep-core/registries");
+//#region src/widgets/TextWidget.tsx
+var TextWidget_exports = /* @__PURE__ */ require_chunk.__exportAll({
+	TextWidget: () => TextWidget,
+	textWidgetPropertySchema: () => textWidgetPropertySchema
+});
+function TextWidget({ titleEnabled = true, title = "Text Widget", titleFontSize = "xl", titleColor = "foreground", description = "This is a text widget", descriptionFontSize = "md", descriptionColor = "foreground", background = {
+	type: "solid",
+	color: "background"
+}, padding = 4, borderRadius = "md", 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";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: `bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${className ?? ""}`,
+		style: { backgroundImage },
+		...props,
+		children: [titleEnabled && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+			className: `text-${titleFontSize} text-${titleColor} font-bold`,
+			children: title
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+			className: `text-${descriptionFontSize} text-${descriptionColor}`,
+			children: description
+		})]
+	});
+}
+const textWidgetPropertySchema = {
+	widgetType: "TextWidget",
+	displayName: "Text Widget",
+	tabsConfig: [{
+		id: "content",
+		label: "Content"
+	}],
+	dataSourceTargetProps: ["title", "description"],
+	fields: [
+		{
+			key: "titleEnabled",
+			label: "Widget Title",
+			type: "boolean",
+			description: "Enable the title displayed above the text",
+			defaultValue: true,
+			tab: "content",
+			group: "Title"
+		},
+		{
+			key: "title",
+			label: "Title",
+			type: "text",
+			description: "The title",
+			defaultValue: "Heads up!",
+			tab: "content",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		},
+		(0, _fluid_app_rep_core_registries.getFontSizeField)({
+			key: "titleFontSize",
+			label: "Title Font Size",
+			description: "Font size for the title",
+			defaultValue: "xl",
+			tab: "content",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		(0, _fluid_app_rep_core_registries.getColorField)({
+			key: "titleColor",
+			label: "Title Color",
+			description: "The color of the title",
+			defaultValue: "foreground",
+			tab: "content",
+			group: "Title",
+			requiresKeyToBeTrue: "titleEnabled"
+		}),
+		{
+			key: "description",
+			label: "Description",
+			type: "textarea",
+			description: "The text message",
+			rows: 3,
+			defaultValue: "You can add components and dependencies to your app using the cli.",
+			tab: "content",
+			group: "Description"
+		},
+		(0, _fluid_app_rep_core_registries.getFontSizeField)({
+			key: "descriptionFontSize",
+			label: "Description Font Size",
+			description: "Font size for the text",
+			defaultValue: "md",
+			tab: "content",
+			group: "Description"
+		}),
+		(0, _fluid_app_rep_core_registries.getColorField)({
+			key: "descriptionColor",
+			label: "Description Color",
+			description: "The color of the text",
+			defaultValue: "foreground",
+			tab: "content",
+			group: "Description"
+		}),
+		{
+			type: "background",
+			key: "background",
+			label: "Background",
+			description: "Background for the text container",
+			defaultValue: "background",
+			tab: "content",
+			group: "Style"
+		},
+		(0, _fluid_app_rep_core_registries.getPaddingField)({
+			key: "padding",
+			label: "Padding",
+			description: "The padding of the text container",
+			defaultValue: 4,
+			tab: "content",
+			group: "Style"
+		}),
+		(0, _fluid_app_rep_core_registries.getBorderRadiusField)({
+			key: "borderRadius",
+			description: "The border radius of the text container",
+			label: "Border Radius",
+			tab: "content",
+			group: "Style"
+		})
+	]
+};
+//#endregion
+Object.defineProperty(exports, "TextWidget", {
+	enumerable: true,
+	get: function() {
+		return TextWidget;
+	}
+});
+Object.defineProperty(exports, "TextWidget_exports", {
+	enumerable: true,
+	get: function() {
+		return TextWidget_exports;
+	}
+});
+Object.defineProperty(exports, "textWidgetPropertySchema", {
+	enumerable: true,
+	get: function() {
+		return textWidgetPropertySchema;
+	}
+});
+
+//# sourceMappingURL=TextWidget-Cn7-yZGk.cjs.map

package/dist/TextWidget-Cn7-yZGk.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextWidget-Cn7-yZGk.cjs","names":[],"sources":["../src/widgets/TextWidget.tsx"],"sourcesContent":["import type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport type { ComponentProps } from \"react\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\n\ntype TextWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  title?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Description\n  description?: string;\n  descriptionFontSize?: FontSizeOptions;\n  descriptionColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n};\n\nexport function TextWidget({\n  titleEnabled = true,\n  title = \"Text Widget\",\n  titleFontSize = \"xl\",\n  titleColor = \"foreground\",\n  description = \"This is a text widget\",\n  descriptionFontSize = \"md\",\n  descriptionColor = \"foreground\",\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  padding = 4,\n  borderRadius = \"md\",\n  className,\n  ...props\n}: TextWidgetProps) {\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  return (\n    <div\n      className={`bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {titleEnabled && (\n        <h2 className={`text-${titleFontSize} text-${titleColor} font-bold`}>\n          {title}\n        </h2>\n      )}\n      <p className={`text-${descriptionFontSize} text-${descriptionColor}`}>\n        {description}\n      </p>\n    </div>\n  );\n}\n\nexport const textWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"TextWidget\",\n  displayName: \"Text Widget\",\n  tabsConfig: [{ id: \"content\", label: \"Content\" }],\n  dataSourceTargetProps: [\"title\", \"description\"],\n  fields: [\n    // Content Tab - Title Group\n    {\n      key: \"titleEnabled\",\n      label: \"Widget Title\",\n      type: \"boolean\",\n      description: \"Enable the title displayed above the text\",\n      defaultValue: true,\n      tab: \"content\",\n      group: \"Title\",\n    },\n    {\n      key: \"title\",\n      label: \"Title\",\n      type: \"text\",\n      description: \"The title\",\n      defaultValue: \"Heads up!\",\n      tab: \"content\",\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: \"xl\",\n      tab: \"content\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    getColorField({\n      key: \"titleColor\",\n      label: \"Title Color\",\n      description: \"The color of the title\",\n      defaultValue: \"foreground\",\n      tab: \"content\",\n      group: \"Title\",\n      requiresKeyToBeTrue: \"titleEnabled\",\n    }),\n    // Content Tab - Description Group\n    {\n      key: \"description\",\n      label: \"Description\",\n      type: \"textarea\",\n      description: \"The text message\",\n      rows: 3,\n      defaultValue:\n        \"You can add components and dependencies to your app using the cli.\",\n      tab: \"content\",\n      group: \"Description\",\n    },\n    getFontSizeField({\n      key: \"descriptionFontSize\",\n      label: \"Description Font Size\",\n      description: \"Font size for the text\",\n      defaultValue: \"md\",\n      tab: \"content\",\n      group: \"Description\",\n    }),\n    getColorField({\n      key: \"descriptionColor\",\n      label: \"Description Color\",\n      description: \"The color of the text\",\n      defaultValue: \"foreground\",\n      tab: \"content\",\n      group: \"Description\",\n    }),\n    // Content Tab - Style Group\n    {\n      type: \"background\",\n      key: \"background\",\n      label: \"Background\",\n      description: \"Background for the text container\",\n      defaultValue: \"background\",\n      tab: \"content\",\n      group: \"Style\",\n    },\n    getPaddingField({\n      key: \"padding\",\n      label: \"Padding\",\n      description: \"The padding of the text container\",\n      defaultValue: 4,\n      tab: \"content\",\n      group: \"Style\",\n    }),\n    getBorderRadiusField({\n      key: \"borderRadius\",\n      description: \"The border radius of the text container\",\n      label: \"Border Radius\",\n      tab: \"content\",\n      group: \"Style\",\n    }),\n  ],\n};\n"],"mappings":";;;;;;;;AAkCA,SAAgB,WAAW,EACzB,eAAe,MACf,QAAQ,eACR,gBAAgB,MAChB,aAAa,cACb,cAAc,yBACd,sBAAsB,MACtB,mBAAmB,cACnB,aAAa;CACX,MAAM;CACN,OAAO;CACR,EACD,UAAU,GACV,eAAe,MACf,WACA,GAAG,SACe;CAClB,MAAM,kBAAkB,WAAW,SAAS;CAC5C,MAAM,mBACH,WAAW,UAAU,aAAa,WAAW,UAAU,aACxD,WAAW,SAAS,UAChB,OAAO,WAAW,SAAS,aAAa,WAAW,SAAS,SAAS,KACrE;AACN,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAW,MAAM,gBAAgB,KAAK,QAAQ,WAAW,aAAa,GAAG,aAAa;EACtF,OAAO,EAAE,iBAAiB;EAC1B,GAAI;YAHN,CAKG,gBACC,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAI,WAAW,QAAQ,cAAc,QAAQ,WAAW;aACrD;GACE,CAAA,EAEP,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAAG,WAAW,QAAQ,oBAAoB,QAAQ;aAC/C;GACC,CAAA,CACA;;;AAIV,MAAa,2BAAiD;CAC5D,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,uBAAuB,CAAC,SAAS,cAAc;CAC/C,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;uDACgB;GACf,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;oDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAEF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,MAAM;GACN,cACE;GACF,KAAK;GACL,OAAO;GACR;uDACgB;GACf,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;oDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EAEF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;sDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;2DACmB;GACnB,KAAK;GACL,aAAa;GACb,OAAO;GACP,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}

package/dist/ToDoWidget--KBpHqbA.mjs

@@ -0,0 +1,274 @@
+import { t as __exportAll } from "./rolldown-runtime-wcPFST8Q.mjs";
+import { a as getFontSizeField, c as getPaddingField, i as getColorField, n as getBorderRadiusField } from "./fields-C29fgJje.mjs";
+import { t as ErrorState } from "./error-state-DErSxZwH.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useQuery } from "@tanstack/react-query";
+import { useDataSourceConfig } from "@fluid-app/rep-core/data-sources/context";
+import { useWidgetPreviewContext } from "@fluid-app/rep-core/data-sources/preview-context";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faListCheck, faPlus } from "@fortawesome/pro-regular-svg-icons";
+//#region src/hooks/use-todos.preview.ts
+const now = /* @__PURE__ */ new Date();
+function daysFromNow(days) {
+	const d = new Date(now);
+	d.setDate(d.getDate() + days);
+	return d.toISOString();
+}
+const PREVIEW_DATA = [
+	{
+		id: 1,
+		body: "Send follow-up email to new leads",
+		dueAt: daysFromNow(1),
+		completedAt: null,
+		createdAt: daysFromNow(-2),
+		contactName: "Sarah Johnson"
+	},
+	{
+		id: 2,
+		body: "Prepare slides for team training",
+		dueAt: daysFromNow(3),
+		completedAt: null,
+		createdAt: daysFromNow(-1),
+		contactName: null
+	},
+	{
+		id: 3,
+		body: "Review monthly sales report",
+		dueAt: daysFromNow(-1),
+		completedAt: null,
+		createdAt: daysFromNow(-5),
+		contactName: "Mike Chen"
+	}
+];
+//#endregion
+//#region src/hooks/use-todos.ts
+function useTodos() {
+	const { baseUrl, getApiHeaders } = useDataSourceConfig();
+	const { isPreview } = useWidgetPreviewContext();
+	return useQuery({
+		queryKey: [
+			"rep-widget-use",
+			"todos",
+			isPreview ? "preview" : baseUrl
+		],
+		queryFn: async ({ signal }) => {
+			const url = baseUrl ? `${baseUrl}/tasks` : "/tasks";
+			const response = await fetch(url, {
+				headers: {
+					"content-type": "application/json",
+					...getApiHeaders?.()
+				},
+				signal
+			});
+			if (!response.ok) throw new Error(`Failed to fetch todos: ${response.status}`);
+			return transformTodos(await response.json());
+		},
+		enabled: !isPreview,
+		...isPreview && { placeholderData: PREVIEW_DATA }
+	});
+}
+function transformTodos(rawData) {
+	return rawData.map((todo) => ({
+		id: todo.id,
+		body: todo.body,
+		dueAt: todo.due_at,
+		completedAt: todo.completed_at,
+		createdAt: todo.created_at,
+		contactName: todo.contact ? `${todo.contact.first_name} ${todo.contact.last_name}` : null
+	}));
+}
+//#endregion
+//#region src/widgets/ToDoWidget.tsx
+var ToDoWidget_exports = /* @__PURE__ */ __exportAll({
+	ToDoWidget: () => ToDoWidget,
+	toDoWidgetPropertySchema: () => toDoWidgetPropertySchema
+});
+function ToDoWidget({ titleEnabled = true, titleText = "To-Do", titleFontSize = "lg", titleColor = "foreground", background = {
+	type: "solid",
+	color: "background"
+}, textColor = "foreground", accentColor = "primary", padding = 4, borderRadius = "md", maxItems = 5, 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: todos = [], isLoading, isError } = useTodos();
+	const activeTodos = (todos.length > 0 ? todos : []).filter((todo) => !todo.completedAt);
+	const todosToShow = activeTodos.slice(0, maxItems);
+	const remainingCount = activeTodos.length - todosToShow.length;
+	const isEmpty = activeTodos.length === 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: `overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} p-${padding} ${className ?? ""}`,
+		style: { backgroundImage },
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "mb-3 flex items-center justify-between",
+			children: [/* @__PURE__ */ jsx("div", {
+				className: "flex items-center gap-3",
+				children: titleEnabled && titleText && /* @__PURE__ */ jsx("h2", {
+					className: `text-${titleFontSize} font-bold text-${titleColor}`,
+					children: titleText
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2",
+				children: [!isEmpty && !isLoading && /* @__PURE__ */ jsx("span", {
+					className: `text-2xl font-bold text-${accentColor}`,
+					children: activeTodos.length
+				}), /* @__PURE__ */ jsx("div", {
+					className: `flex h-10 w-10 shrink-0 items-center justify-center`,
+					children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+						icon: faListCheck,
+						className: `h-5 w-5 text-${accentColor}-foreground`
+					})
+				})]
+			})]
+		}), isLoading ? /* @__PURE__ */ jsx("div", {
+			className: "flex min-h-[120px] items-center justify-center",
+			children: /* @__PURE__ */ jsx("div", { className: "h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent" })
+		}) : isError ? /* @__PURE__ */ jsx(ErrorState, {}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col items-center justify-center py-8",
+			children: /* @__PURE__ */ jsx("p", {
+				className: `text-center text-${textColor}/60`,
+				children: "You've got nothing else To-Do!"
+			})
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			className: "flex flex-col",
+			children: todosToShow.map((todo, index) => /* @__PURE__ */ jsxs("div", {
+				className: `flex items-center gap-3 py-2.5 ${index !== todosToShow.length - 1 ? `border-b border-${textColor}/10` : ""}`,
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					className: `h-5 w-5 rounded-full border-2 border-${textColor}/30 bg-transparent`,
+					checked: !!todo.completedAt,
+					readOnly: true
+				}), /* @__PURE__ */ jsx("span", {
+					className: "line-clamp-1 flex-1 text-sm",
+					children: todo.body
+				})]
+			}, todo.id))
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-2 flex items-center justify-between",
+			children: [remainingCount > 0 && /* @__PURE__ */ jsxs("span", {
+				className: `text-sm text-${textColor}/50 underline`,
+				children: [
+					remainingCount,
+					" more task",
+					remainingCount > 1 ? "s" : ""
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "ml-auto",
+				children: /* @__PURE__ */ jsx(FontAwesomeIcon, {
+					icon: faPlus,
+					className: `h-5 w-5 text-${textColor}/50`
+				})
+			})]
+		})] })]
+	});
+}
+const toDoWidgetPropertySchema = {
+	widgetType: "ToDoWidget",
+	displayName: "To-Do Widget",
+	tabsConfig: [{
+		id: "styling",
+		label: "Styling"
+	}],
+	fields: [
+		{
+			key: "titleEnabled",
+			label: "Widget Title",
+			type: "boolean",
+			description: "Enable the title displayed above the todo list",
+			defaultValue: true,
+			tab: "styling",
+			group: "Title"
+		},
+		{
+			key: "titleText",
+			label: "Title",
+			type: "text",
+			description: "Title text displayed above the todo list",
+			defaultValue: "To-Do",
+			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 todo items",
+			defaultValue: "foreground",
+			tab: "styling",
+			group: "Design"
+		}),
+		getColorField({
+			key: "accentColor",
+			label: "Accent Color",
+			description: "Color used for count badge and icon",
+			defaultValue: "primary",
+			tab: "styling",
+			group: "Design"
+		}),
+		{
+			key: "separator",
+			type: "separator",
+			label: "Separator",
+			tab: "styling",
+			group: "Design"
+		},
+		{
+			key: "maxItems",
+			label: "Max Items",
+			type: "number",
+			description: "Maximum number of todo items to display",
+			min: 1,
+			max: 20,
+			step: 1,
+			defaultValue: 5,
+			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"
+		})
+	]
+};
+//#endregion
+export { ToDoWidget_exports as n, toDoWidgetPropertySchema as r, ToDoWidget as t };
+
+//# sourceMappingURL=ToDoWidget--KBpHqbA.mjs.map

package/dist/ToDoWidget--KBpHqbA.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToDoWidget--KBpHqbA.mjs","names":[],"sources":["../src/hooks/use-todos.preview.ts","../src/hooks/use-todos.ts","../src/widgets/ToDoWidget.tsx"],"sourcesContent":["import type { Todo } from \"./use-todos.types\";\n\nconst now = new Date();\n\nfunction daysFromNow(days: number): string {\n  const d = new Date(now);\n  d.setDate(d.getDate() + days);\n  return d.toISOString();\n}\n\nexport const PREVIEW_DATA: Todo[] = [\n  {\n    id: 1,\n    body: \"Send follow-up email to new leads\",\n    dueAt: daysFromNow(1),\n    completedAt: null,\n    createdAt: daysFromNow(-2),\n    contactName: \"Sarah Johnson\",\n  },\n  {\n    id: 2,\n    body: \"Prepare slides for team training\",\n    dueAt: daysFromNow(3),\n    completedAt: null,\n    createdAt: daysFromNow(-1),\n    contactName: null,\n  },\n  {\n    id: 3,\n    body: \"Review monthly sales report\",\n    dueAt: daysFromNow(-1),\n    completedAt: null,\n    createdAt: daysFromNow(-5),\n    contactName: \"Mike Chen\",\n  },\n];\n","import { useQuery } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/rep-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/rep-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-todos.preview\";\nimport type { ApiTodo, Todo } from \"./use-todos.types\";\n\nexport type { TodoContact, ApiTodo, Todo } from \"./use-todos.types\";\n\nexport function useTodos() {\n  const { baseUrl, getApiHeaders } = useDataSourceConfig();\n  const { isPreview } = useWidgetPreviewContext();\n\n  return useQuery({\n    queryKey: [\n      \"rep-widget-use\",\n      \"todos\",\n      isPreview ? \"preview\" : baseUrl,\n    ] as const,\n    queryFn: async ({ signal }): Promise<Todo[]> => {\n      const url = baseUrl ? `${baseUrl}/tasks` : \"/tasks\";\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 todos: ${response.status}`);\n      }\n\n      const data: ApiTodo[] = await response.json();\n      return transformTodos(data);\n    },\n    enabled: !isPreview,\n    ...(isPreview && { placeholderData: PREVIEW_DATA }),\n  });\n}\n\nfunction transformTodos(rawData: ApiTodo[]): Todo[] {\n  return rawData.map((todo) => ({\n    id: todo.id,\n    body: todo.body,\n    dueAt: todo.due_at,\n    completedAt: todo.completed_at,\n    createdAt: todo.created_at,\n    contactName: todo.contact\n      ? `${todo.contact.first_name} ${todo.contact.last_name}`\n      : null,\n  }));\n}\n","import type { ComponentProps } from \"react\";\nimport type {\n  BackgroundValue,\n  BorderRadiusOptions,\n  ColorOptions,\n  FontSizeOptions,\n  PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n  getBorderRadiusField,\n  getColorField,\n  getFontSizeField,\n  getPaddingField,\n} from \"../core/fields\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faListCheck, faPlus } from \"@fortawesome/pro-regular-svg-icons\";\nimport { useTodos } from \"../hooks/use-todos\";\nimport { ErrorState } from \"../components/error-state\";\n\ntype ToDoWidgetProps = ComponentProps<\"div\"> & {\n  // Title\n  titleEnabled?: boolean;\n  titleText?: string;\n  titleFontSize?: FontSizeOptions;\n  titleColor?: ColorOptions;\n\n  // Styling\n  background?: BackgroundValue;\n  textColor?: ColorOptions;\n  accentColor?: ColorOptions;\n  padding?: PaddingOptions;\n  borderRadius?: BorderRadiusOptions;\n\n  // Content\n  maxItems?: number;\n};\n\nexport function ToDoWidget({\n  // Title defaults\n  titleEnabled = true,\n  titleText = \"To-Do\",\n  titleFontSize = \"lg\",\n  titleColor = \"foreground\",\n\n  // Styling defaults\n  background = {\n    type: \"solid\",\n    color: \"background\",\n  },\n  textColor = \"foreground\",\n  accentColor = \"primary\",\n  padding = 4,\n  borderRadius = \"md\",\n\n  // Content defaults\n  maxItems = 5,\n\n  className,\n  ...props\n}: ToDoWidgetProps) {\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: todos = [], isLoading, isError } = useTodos();\n\n  // Use API data if available, otherwise fall back to demo data\n  const displayTodos = todos.length > 0 ? todos : [];\n\n  // Filter out completed tasks\n  const activeTodos = displayTodos.filter((todo) => !todo.completedAt);\n  const todosToShow = activeTodos.slice(0, maxItems);\n  const remainingCount = activeTodos.length - todosToShow.length;\n  const isEmpty = activeTodos.length === 0;\n\n  return (\n    <div\n      className={`overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} p-${padding} ${className ?? \"\"}`}\n      style={{ backgroundImage }}\n      {...props}\n    >\n      {/* Header */}\n      <div className=\"mb-3 flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          {titleEnabled && titleText && (\n            <h2\n              className={`text-${titleFontSize} font-bold text-${titleColor}`}\n            >\n              {titleText}\n            </h2>\n          )}\n        </div>\n        <div className=\"flex items-center gap-2\">\n          {!isEmpty && !isLoading && (\n            <span className={`text-2xl font-bold text-${accentColor}`}>\n              {activeTodos.length}\n            </span>\n          )}\n          <div\n            className={`flex h-10 w-10 shrink-0 items-center justify-center`}\n          >\n            <FontAwesomeIcon\n              icon={faListCheck}\n              className={`h-5 w-5 text-${accentColor}-foreground`}\n            />\n          </div>\n        </div>\n      </div>\n\n      {/* Loading state */}\n      {isLoading ? (\n        <div className=\"flex min-h-[120px] items-center justify-center\">\n          <div className=\"h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n        </div>\n      ) : isError ? (\n        /* Error state */\n        <ErrorState />\n      ) : isEmpty ? (\n        /* Empty state */\n        <div className=\"flex flex-col items-center justify-center py-8\">\n          <p className={`text-center text-${textColor}/60`}>\n            You&apos;ve got nothing else To-Do!\n          </p>\n        </div>\n      ) : (\n        /* Todo List */\n        <>\n          <div className=\"flex flex-col\">\n            {todosToShow.map((todo, index) => (\n              <div\n                key={todo.id}\n                className={`flex items-center gap-3 py-2.5 ${\n                  index !== todosToShow.length - 1\n                    ? `border-b border-${textColor}/10`\n                    : \"\"\n                }`}\n              >\n                <input\n                  type=\"checkbox\"\n                  className={`h-5 w-5 rounded-full border-2 border-${textColor}/30 bg-transparent`}\n                  checked={!!todo.completedAt}\n                  readOnly\n                />\n                <span className=\"line-clamp-1 flex-1 text-sm\">{todo.body}</span>\n              </div>\n            ))}\n          </div>\n\n          {/* Footer */}\n          <div className=\"mt-2 flex items-center justify-between\">\n            {remainingCount > 0 && (\n              <span className={`text-sm text-${textColor}/50 underline`}>\n                {remainingCount} more task{remainingCount > 1 ? \"s\" : \"\"}\n              </span>\n            )}\n            <div className=\"ml-auto\">\n              <FontAwesomeIcon\n                icon={faPlus}\n                className={`h-5 w-5 text-${textColor}/50`}\n              />\n            </div>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const toDoWidgetPropertySchema: WidgetPropertySchema = {\n  widgetType: \"ToDoWidget\",\n  displayName: \"To-Do 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 todo list\",\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 todo list\",\n      defaultValue: \"To-Do\",\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 todo items\",\n      defaultValue: \"foreground\",\n      tab: \"styling\",\n      group: \"Design\",\n    }),\n    getColorField({\n      key: \"accentColor\",\n      label: \"Accent Color\",\n      description: \"Color used for count badge and icon\",\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    {\n      key: \"maxItems\",\n      label: \"Max Items\",\n      type: \"number\",\n      description: \"Maximum number of todo items to display\",\n      min: 1,\n      max: 20,\n      step: 1,\n      defaultValue: 5,\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} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}