@fluid-app/rep-widgets 0.1.18 → 0.1.20
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/AlertWidget-CiMRJYmn.mjs.map +1 -1
- package/dist/AlertWidget-DU_HP0EW.cjs.map +1 -1
- package/dist/CalendarWidget-DshBk5tG.mjs.map +1 -1
- package/dist/CalendarWidget-s7KgQ5JD.cjs.map +1 -1
- package/dist/CarouselWidget-0RP-Rd1D.mjs.map +1 -1
- package/dist/CarouselWidget-DLADgLPJ.cjs.map +1 -1
- package/dist/CatchUpWidget-CUnCumIf.mjs.map +1 -1
- package/dist/CatchUpWidget-DiqdwPvE.cjs.map +1 -1
- package/dist/ChartWidget-DhAVW8w4.cjs.map +1 -1
- package/dist/ChartWidget-DrF1e1sy.mjs.map +1 -1
- package/dist/ContainerWidget-8FdPHgLz.cjs +2 -0
- package/dist/{ContainerWidget-Cp0_vPZB.cjs → ContainerWidget-BTKOl5XX.cjs} +3 -13
- package/dist/ContainerWidget-BTKOl5XX.cjs.map +1 -0
- package/dist/ContainerWidget-Xd231yys.mjs.map +1 -1
- package/dist/{EmbedWidget-BQyYm50g.cjs → EmbedWidget-Cfv65pBr.cjs} +1 -1
- package/dist/EmbedWidget-Cfv65pBr.cjs.map +1 -0
- package/dist/EmbedWidget-DQ2rCA4j.mjs.map +1 -1
- package/dist/{ImageWidget-DTwM7xCz.cjs → ImageWidget-BXkjWEEn.cjs} +1 -1
- package/dist/ImageWidget-BXkjWEEn.cjs.map +1 -0
- package/dist/ImageWidget-DBBul7ca.mjs.map +1 -1
- package/dist/LayoutWidget-B1itwSsn.mjs.map +1 -1
- package/dist/{LayoutWidget-CWE_9JB5.cjs → LayoutWidget-BVv--tp3.cjs} +5 -15
- package/dist/LayoutWidget-BVv--tp3.cjs.map +1 -0
- package/dist/LayoutWidget-BsOPpmVb.cjs +2 -0
- package/dist/{ListWidget-CxaLm0D5.cjs → ListWidget-ByLHcRHL.cjs} +1 -1
- package/dist/ListWidget-ByLHcRHL.cjs.map +1 -0
- package/dist/ListWidget-EXPlzfUE.mjs.map +1 -1
- package/dist/MediaRenderer-CcJvyOJ1.cjs.map +1 -1
- package/dist/MediaRenderer-Uq90PZcY.mjs.map +1 -1
- package/dist/MySiteWidget-BTyb5AJM.mjs.map +1 -1
- package/dist/{MySiteWidget-iRPl6b2F.cjs → MySiteWidget-DrUI7OTT.cjs} +1 -1
- package/dist/MySiteWidget-DrUI7OTT.cjs.map +1 -0
- package/dist/{NestedWidget-DavPMVii.cjs → NestedWidget-CbuuxK7U.cjs} +1 -1
- package/dist/NestedWidget-CbuuxK7U.cjs.map +1 -0
- package/dist/NestedWidget-CwyVsZ-f.mjs.map +1 -1
- package/dist/QuickShareWidget-BUbuTQFQ.mjs.map +1 -1
- package/dist/{QuickShareWidget-BIOkquPG.cjs → QuickShareWidget-DjhPbMsy.cjs} +1 -1
- package/dist/QuickShareWidget-DjhPbMsy.cjs.map +1 -0
- package/dist/{RecentActivityWidget-u1zCrwGF.cjs → RecentActivityWidget-BPs8xmPD.cjs} +1 -1
- package/dist/RecentActivityWidget-BPs8xmPD.cjs.map +1 -0
- package/dist/RecentActivityWidget-CxEgRz3c.mjs.map +1 -1
- package/dist/RegistryContext-CscXrsRa.mjs.map +1 -1
- package/dist/{RegistryContext-6KXd4t6d.cjs → RegistryContext-xjea4xVV.cjs} +3 -2
- package/dist/RegistryContext-xjea4xVV.cjs.map +1 -0
- package/dist/{ScreenRenderer-BCd4Rsba.cjs → ScreenRenderer-B-nGFObe.cjs} +2 -2
- package/dist/ScreenRenderer-B-nGFObe.cjs.map +1 -0
- package/dist/ScreenRenderer-CVJMpQ9A.mjs.map +1 -1
- package/dist/{ScreenRendererContext-D62_Fazh.cjs → ScreenRendererContext-B660JoZO.cjs} +3 -2
- package/dist/ScreenRendererContext-B660JoZO.cjs.map +1 -0
- package/dist/ScreenRendererContext-DaldtZnX.mjs.map +1 -1
- package/dist/SpacerWidget-Bs18KYH9.mjs.map +1 -1
- package/dist/{SpacerWidget-D-Foe9wG.cjs → SpacerWidget-DGccATXA.cjs} +1 -1
- package/dist/SpacerWidget-DGccATXA.cjs.map +1 -0
- package/dist/TableWidget-Cc4kQaOE.mjs.map +1 -1
- package/dist/{TableWidget-BeG92tkU.cjs → TableWidget-GSCLhWDu.cjs} +1 -1
- package/dist/TableWidget-GSCLhWDu.cjs.map +1 -0
- package/dist/TextWidget-CQxOWNZK.mjs.map +1 -1
- package/dist/TextWidget-Cn7-yZGk.cjs.map +1 -1
- package/dist/ToDoWidget--KBpHqbA.mjs.map +1 -1
- package/dist/{ToDoWidget-CK87BavM.cjs → ToDoWidget-B4Lrb4FT.cjs} +1 -1
- package/dist/ToDoWidget-B4Lrb4FT.cjs.map +1 -0
- package/dist/{VideoWidget-DxuqyD5L.cjs → VideoWidget-CiydQ4xO.cjs} +1 -1
- package/dist/VideoWidget-CiydQ4xO.cjs.map +1 -0
- package/dist/VideoWidget-uKkRf5pm.mjs.map +1 -1
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +2 -2
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +2 -2
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs.map +1 -1
- package/dist/contexts/index.cjs +2 -2
- package/dist/contexts/index.d.cts +40 -42
- package/dist/contexts/index.d.cts.map +1 -1
- package/dist/contexts/index.d.mts +40 -42
- package/dist/contexts/index.d.mts.map +1 -1
- package/dist/core/index.cjs +1 -1
- package/dist/core/index.d.cts +30 -31
- package/dist/core/index.d.cts.map +1 -1
- package/dist/core/index.d.mts +30 -31
- package/dist/core/index.d.mts.map +1 -1
- package/dist/error-state-DErSxZwH.mjs.map +1 -1
- package/dist/error-state-DSzVUtEl.cjs.map +1 -1
- package/dist/scroll-arrows-BZIlsE_x.cjs.map +1 -1
- package/dist/scroll-arrows-BevCYRNT.mjs.map +1 -1
- package/dist/ui/index.d.cts +2 -2
- package/dist/ui/index.d.cts.map +1 -1
- package/dist/ui/index.d.mts +2 -2
- package/dist/ui/index.d.mts.map +1 -1
- package/dist/widgets/index.cjs +26 -26
- package/dist/widgets/index.cjs.map +1 -1
- package/dist/widgets/index.d.cts +53 -256
- package/dist/widgets/index.d.cts.map +1 -1
- package/dist/widgets/index.d.mts +53 -256
- package/dist/widgets/index.d.mts.map +1 -1
- package/dist/widgets/index.mjs.map +1 -1
- package/package.json +6 -6
- package/{styles → src/styles}/globals.css +4 -2
- package/src/styles/index.ts +1 -0
- package/dist/ContainerWidget-Cp0_vPZB.cjs.map +0 -1
- package/dist/EmbedWidget-BQyYm50g.cjs.map +0 -1
- package/dist/ImageWidget-DTwM7xCz.cjs.map +0 -1
- package/dist/LayoutWidget-CWE_9JB5.cjs.map +0 -1
- package/dist/ListWidget-CxaLm0D5.cjs.map +0 -1
- package/dist/MySiteWidget-iRPl6b2F.cjs.map +0 -1
- package/dist/NestedWidget-DavPMVii.cjs.map +0 -1
- package/dist/QuickShareWidget-BIOkquPG.cjs.map +0 -1
- package/dist/RecentActivityWidget-u1zCrwGF.cjs.map +0 -1
- package/dist/RegistryContext-6KXd4t6d.cjs.map +0 -1
- package/dist/ScreenRenderer-BCd4Rsba.cjs.map +0 -1
- package/dist/ScreenRendererContext-D62_Fazh.cjs.map +0 -1
- package/dist/SpacerWidget-D-Foe9wG.cjs.map +0 -1
- package/dist/TableWidget-BeG92tkU.cjs.map +0 -1
- package/dist/ToDoWidget-CK87BavM.cjs.map +0 -1
- package/dist/VideoWidget-DxuqyD5L.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertWidget-CiMRJYmn.mjs","names":[],"sources":["../src/widgets/AlertWidget.tsx"],"sourcesContent":["import { TextWidget, textWidgetPropertySchema } from \"./TextWidget\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * AlertWidget - Wrapper for TextWidget (for backwards compatibility)\n */\nexport function AlertWidget(props: ComponentProps<typeof TextWidget
|
|
1
|
+
{"version":3,"file":"AlertWidget-CiMRJYmn.mjs","names":[],"sources":["../src/widgets/AlertWidget.tsx"],"sourcesContent":["import { TextWidget, textWidgetPropertySchema } from \"./TextWidget\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport type { ComponentProps } from \"react\";\nimport type React from \"react\";\n\n/**\n * AlertWidget - Wrapper for TextWidget (for backwards compatibility)\n */\nexport function AlertWidget(\n props: ComponentProps<typeof TextWidget>,\n): React.JSX.Element {\n return <TextWidget {...props} />;\n}\n\nexport const alertWidgetPropertySchema: WidgetPropertySchema = {\n ...textWidgetPropertySchema,\n widgetType: \"AlertWidget\",\n};\n"],"mappings":";;;;;;;;;;;AAQA,SAAgB,YACd,OACmB;AACnB,QAAO,oBAAC,YAAD,EAAY,GAAI,OAAS,CAAA;;AAGlC,MAAa,4BAAkD;CAC7D,GAAG;CACH,YAAY;CACb"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertWidget-DU_HP0EW.cjs","names":["TextWidget","textWidgetPropertySchema"],"sources":["../src/widgets/AlertWidget.tsx"],"sourcesContent":["import { TextWidget, textWidgetPropertySchema } from \"./TextWidget\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport type { ComponentProps } from \"react\";\n\n/**\n * AlertWidget - Wrapper for TextWidget (for backwards compatibility)\n */\nexport function AlertWidget(props: ComponentProps<typeof TextWidget
|
|
1
|
+
{"version":3,"file":"AlertWidget-DU_HP0EW.cjs","names":["TextWidget","textWidgetPropertySchema"],"sources":["../src/widgets/AlertWidget.tsx"],"sourcesContent":["import { TextWidget, textWidgetPropertySchema } from \"./TextWidget\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport type { ComponentProps } from \"react\";\nimport type React from \"react\";\n\n/**\n * AlertWidget - Wrapper for TextWidget (for backwards compatibility)\n */\nexport function AlertWidget(\n props: ComponentProps<typeof TextWidget>,\n): React.JSX.Element {\n return <TextWidget {...props} />;\n}\n\nexport const alertWidgetPropertySchema: WidgetPropertySchema = {\n ...textWidgetPropertySchema,\n widgetType: \"AlertWidget\",\n};\n"],"mappings":";;;;;;;;;;;AAQA,SAAgB,YACd,OACmB;AACnB,QAAO,iBAAA,GAAA,kBAAA,KAACA,mBAAAA,YAAD,EAAY,GAAI,OAAS,CAAA;;AAGlC,MAAa,4BAAkD;CAC7D,GAAGC,mBAAAA;CACH,YAAY;CACb"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarWidget-DshBk5tG.mjs","names":[],"sources":["../src/hooks/use-calendar-events.preview.ts","../src/hooks/use-calendar-events.ts","../src/widgets/CalendarWidget.tsx"],"sourcesContent":["import type { CalendarEvent } from \"./use-calendar-events.types\";\n\nconst today = new Date();\nconst inTwoDays = new Date(today);\ninTwoDays.setDate(inTwoDays.getDate() + 2);\n\nfunction toISO(date: Date, hours: number, minutes = 0): string {\n const d = new Date(date);\n d.setHours(hours, minutes, 0, 0);\n return d.toISOString();\n}\n\nfunction toDateString(date: Date): string {\n return date.toISOString().split(\"T\")[0]!;\n}\n\nexport const PREVIEW_DATA: CalendarEvent[] = [\n {\n id: 1,\n title: \"Team Strategy Call\",\n start: toISO(today, 9, 0),\n end: toISO(today, 10, 0),\n status: \"active\",\n color: \"#4f46e5\",\n },\n {\n id: 2,\n title: \"Product Launch Webinar\",\n start: toISO(today, 14, 0),\n end: toISO(today, 15, 30),\n status: \"active\",\n color: \"#0891b2\",\n venue: \"Zoom\",\n },\n {\n id: 3,\n title: \"Annual Leadership Summit\",\n start: `${toDateString(inTwoDays)}T00:00:00.000Z`,\n end: `${toDateString(inTwoDays)}T23:59:59.000Z`,\n status: \"active\",\n color: \"#059669\",\n isAllDay: true,\n venue: \"Convention Center\",\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-calendar-events.preview\";\n\nimport type { CalendarEvent } from \"./use-calendar-events.types\";\n\nexport type { CalendarEvent } from \"./use-calendar-events.types\";\n\nexport function useCalendarEvents() {\n const { baseUrl, getApiHeaders } = useDataSourceConfig();\n const { isPreview } = useWidgetPreviewContext();\n\n return useQuery({\n queryKey: [\n \"rep-widget-use\",\n \"calendar-events\",\n isPreview ? \"preview\" : baseUrl,\n ] as const,\n queryFn: async ({ signal }): Promise<CalendarEvent[]> => {\n const url = baseUrl\n ? `${baseUrl}/events.json?event_timeline=upcoming`\n : \"/events.json?event_timeline=upcoming\";\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 calendar events: ${response.status}`);\n }\n\n return response.json();\n },\n enabled: !isPreview,\n ...(isPreview && { placeholderData: PREVIEW_DATA }),\n });\n}\n","import { useState, useMemo, 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 {\n useCalendarEvents,\n type CalendarEvent,\n} from \"../hooks/use-calendar-events\";\nimport { ErrorState } from \"../components/error-state\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faChevronLeft,\n faChevronRight,\n faChevronsDown,\n faChevronsUp,\n} from \"@fortawesome/pro-regular-svg-icons\";\n\n// Utility to get days in a month\nconst getDaysInMonth = (year: number, month: number) => {\n return new Date(year, month + 1, 0).getDate();\n};\n\n// Utility to get the first day of month (0 = Sunday, 1 = Monday, etc.)\nconst getFirstDayOfMonth = (year: number, month: number) => {\n return new Date(year, month, 1).getDay();\n};\n\n// Generate calendar grid for a month\nconst generateMonthGrid = (year: number, month: number) => {\n const daysInMonth = getDaysInMonth(year, month);\n const firstDay = getFirstDayOfMonth(year, month);\n const today = new Date();\n\n const days: Array<{\n date: Date | null;\n isToday: boolean;\n isCurrentMonth: boolean;\n }> = [];\n\n // Add empty slots for days before the 1st\n for (let i = 0; i < firstDay; i++) {\n days.push({ date: null, isToday: false, isCurrentMonth: false });\n }\n\n // Add days of the month\n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n const isToday =\n date.getDate() === today.getDate() &&\n date.getMonth() === today.getMonth() &&\n date.getFullYear() === today.getFullYear();\n days.push({ date, isToday, isCurrentMonth: true });\n }\n\n return days;\n};\n\n// Generate week grid for current week\nconst generateWeekGrid = () => {\n const today = new Date();\n const currentDay = today.getDay();\n const days: Array<{\n date: Date;\n isToday: boolean;\n }> = [];\n\n for (let i = 0; i < 7; i++) {\n const date = new Date(today);\n date.setDate(today.getDate() - currentDay + i);\n days.push({\n date,\n isToday: date.toDateString() === today.toDateString(),\n });\n }\n\n return days;\n};\n\n// Get events for a specific date\nconst getEventsForDate = (date: Date, events: CalendarEvent[]) => {\n const dayStart = new Date(date);\n dayStart.setHours(0, 0, 0, 0);\n const dayEnd = new Date(date);\n dayEnd.setHours(23, 59, 59, 999);\n\n return events.filter((event) => {\n const eventStart = new Date(event.start);\n const eventEnd = new Date(event.end);\n return eventStart <= dayEnd && eventEnd >= dayStart;\n });\n};\n\n// Check if a date has events\nconst hasEventsOnDate = (date: Date | null, events: CalendarEvent[]) => {\n if (!date) return false;\n return getEventsForDate(date, events).length > 0;\n};\n\n// Event item component\nconst EventItem = ({\n title,\n start,\n end,\n color,\n isAllDay,\n accentColor,\n}: CalendarEvent & { accentColor?: string }) => {\n const startTime = new Date(start).toLocaleTimeString(\"en-US\", {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n const endTime = new Date(end).toLocaleTimeString(\"en-US\", {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n\n return (\n <div className=\"flex gap-x-2\">\n <div\n className=\"w-0.5 shrink-0 rounded-full\"\n style={{ backgroundColor: color || accentColor }}\n />\n <div className=\"min-w-0 flex-1\">\n <div className=\"truncate text-sm font-medium\">{title}</div>\n <div className=\"text-xs opacity-60\">\n {isAllDay ? \"All day\" : `${startTime} - ${endTime}`}\n </div>\n </div>\n </div>\n );\n};\n\nconst dayNames = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\ntype DayButtonProps = {\n date: Date;\n isToday: boolean;\n isSelected: boolean;\n hasEvents: boolean;\n accentColor: string;\n onClick: () => void;\n extraClassName?: string;\n};\n\nfunction DayButton({\n date,\n isToday,\n isSelected,\n hasEvents,\n accentColor,\n onClick,\n extraClassName = \"\",\n}: DayButtonProps) {\n return (\n <button\n onClick={onClick}\n className={`relative flex aspect-square items-center justify-center rounded-full text-sm transition-colors ${\n isSelected\n ? `bg-${accentColor} text-${accentColor}-foreground`\n : isToday\n ? `bg-${accentColor}/30 text-${accentColor}-foreground hover:bg-${accentColor}/50`\n : `hover:bg-${accentColor}/50 hover:text-${accentColor}-foreground`\n } ${extraClassName}`}\n >\n {date.getDate()}\n {hasEvents && (\n <div\n className={`absolute bottom-1 h-1 w-1 rounded-full bg-${accentColor}`}\n />\n )}\n </button>\n );\n}\n\ntype CalendarWidgetProps = 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\nexport function CalendarWidget({\n // Title defaults\n titleEnabled = true,\n titleText = \"Calendar\",\n titleFontSize = \"xl\",\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 className,\n ...props\n}: CalendarWidgetProps) {\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 today = new Date();\n const [currentMonth, setCurrentMonth] = useState(today.getMonth());\n const [currentYear, setCurrentYear] = useState(today.getFullYear());\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [selectedDate, setSelectedDate] = useState<Date | null>(today);\n\n const { data: events = [], isLoading, isError } = useCalendarEvents();\n\n // Generate calendar grids\n const monthGrid = useMemo(\n () => generateMonthGrid(currentYear, currentMonth),\n [currentYear, currentMonth],\n );\n const weekGrid = useMemo(() => generateWeekGrid(), []);\n\n // Get events for selected date\n const selectedDateEvents = useMemo(() => {\n if (!selectedDate) return [];\n return getEventsForDate(selectedDate, events);\n }, [selectedDate, events]);\n\n // Navigation handlers\n const goToPrevMonth = () => {\n if (currentMonth === 0) {\n setCurrentMonth(11);\n setCurrentYear(currentYear - 1);\n } else {\n setCurrentMonth(currentMonth - 1);\n }\n };\n\n const goToNextMonth = () => {\n if (currentMonth === 11) {\n setCurrentMonth(0);\n setCurrentYear(currentYear + 1);\n } else {\n setCurrentMonth(currentMonth + 1);\n }\n };\n\n const monthYearLabel = new Date(currentYear, currentMonth).toLocaleString(\n \"en-US\",\n {\n month: \"long\",\n year: \"numeric\",\n },\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 {titleText}\n </h2>\n </div>\n )}\n\n {/* Loading state */}\n {isLoading ? (\n <div\n className={`flex min-h-[300px] 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 /* Error state */\n <ErrorState />\n ) : (\n <div className={`p-${padding}`}>\n {/* Desktop: Side by side layout */}\n <div className=\"@md:flex @md:gap-6\">\n {/* Calendar Section */}\n <div className=\"@md:flex-none\">\n {/* Month/Year Header with Navigation */}\n <div className=\"mb-4 flex items-center justify-between\">\n <button\n onClick={goToPrevMonth}\n className=\"hover:bg-foreground/10 rounded-full p-1\"\n aria-label=\"Previous month\"\n >\n <FontAwesomeIcon icon={faChevronLeft} />\n </button>\n\n <span className=\"text-base font-semibold\">\n {monthYearLabel}\n </span>\n\n <button\n onClick={goToNextMonth}\n className=\"hover:bg-foreground/10 rounded-full p-1\"\n aria-label=\"Next month\"\n >\n <FontAwesomeIcon icon={faChevronRight} />\n </button>\n </div>\n\n {/* Day Headers */}\n <div className=\"mb-2 grid grid-cols-7 gap-1 text-center\">\n {dayNames.map((day, idx) => (\n <div\n key={idx}\n className=\"text-xs font-medium uppercase opacity-60\"\n >\n {day}\n </div>\n ))}\n </div>\n\n {/* Calendar Grid - Week view on mobile when collapsed */}\n {isCollapsed && (\n <div className=\"grid grid-cols-7 gap-1 @md:hidden\">\n {weekGrid.map(({ date, isToday }, idx) => (\n <DayButton\n key={idx}\n date={date}\n isToday={isToday}\n isSelected={\n selectedDate?.toDateString() === date.toDateString()\n }\n hasEvents={hasEventsOnDate(date, events)}\n accentColor={accentColor}\n onClick={() => setSelectedDate(date)}\n />\n ))}\n </div>\n )}\n\n {/* Month view (always on desktop, when not collapsed on mobile) */}\n <div\n className={`grid grid-cols-7 gap-1 ${isCollapsed ? \"hidden @md:grid\" : \"grid\"}`}\n >\n {monthGrid.map((day, idx) => {\n if (!day.date) {\n return <div key={idx} className=\"aspect-square\" />;\n }\n\n return (\n <DayButton\n key={idx}\n date={day.date}\n isToday={day.isToday}\n isSelected={\n selectedDate?.toDateString() === day.date.toDateString()\n }\n hasEvents={hasEventsOnDate(day.date, events)}\n accentColor={accentColor}\n onClick={() => setSelectedDate(day.date)}\n extraClassName=\"p-2 @md:m-3\"\n />\n );\n })}\n </div>\n\n {/* Mobile collapse toggle */}\n <button\n onClick={() => setIsCollapsed(!isCollapsed)}\n className={`ml-2 flex w-full items-center justify-center gap-3 rounded-full p-1 text-${textColor}/50 @md:hidden`}\n aria-label={\n isCollapsed ? \"Expand calendar\" : \"Collapse calendar\"\n }\n >\n <div className={`h-1 w-1/2 bg-${textColor}/50`} />\n {isCollapsed ? (\n <FontAwesomeIcon icon={faChevronsDown} />\n ) : (\n <FontAwesomeIcon icon={faChevronsUp} />\n )}\n <div className={`h-1 w-1/2 bg-${textColor}/50`} />\n </button>\n </div>\n\n {/* Events Panel */}\n <div className=\"border-muted mt-4 pt-4 @md:mt-0 @md:w-56 @md:border-l @md:pt-0 @md:pl-6\">\n <div className=\"mb-2 text-sm font-medium opacity-60\">\n {selectedDate\n ? selectedDate.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n month: \"short\",\n day: \"numeric\",\n })\n : \"Select a date\"}\n </div>\n\n {selectedDateEvents.length > 0 ? (\n <div className=\"flex flex-col gap-3\">\n {selectedDateEvents.map((event, idx) => (\n <EventItem\n key={`${event.id}-${idx}`}\n {...event}\n accentColor={`var(--${accentColor})`}\n />\n ))}\n </div>\n ) : (\n <div className=\"text-sm opacity-50\">No events</div>\n )}\n </div>\n </div>\n </div>\n )}\n </div>\n );\n}\n\nexport const calendarWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"CalendarWidget\",\n displayName: \"Calendar 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 calendar\",\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 calendar\",\n defaultValue: \"Calendar\",\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 calendar 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 calendar 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 today highlight and event indicators\",\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 calendar 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 calendar container\",\n defaultValue: \"md\",\n tab: \"styling\",\n group: \"Design\",\n }),\n ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CalendarWidget-DshBk5tG.mjs","names":[],"sources":["../src/hooks/use-calendar-events.preview.ts","../src/hooks/use-calendar-events.ts","../src/widgets/CalendarWidget.tsx"],"sourcesContent":["import type { CalendarEvent } from \"./use-calendar-events.types\";\n\nconst today = new Date();\nconst inTwoDays = new Date(today);\ninTwoDays.setDate(inTwoDays.getDate() + 2);\n\nfunction toISO(date: Date, hours: number, minutes = 0): string {\n const d = new Date(date);\n d.setHours(hours, minutes, 0, 0);\n return d.toISOString();\n}\n\nfunction toDateString(date: Date): string {\n return date.toISOString().split(\"T\")[0]!;\n}\n\nexport const PREVIEW_DATA: CalendarEvent[] = [\n {\n id: 1,\n title: \"Team Strategy Call\",\n start: toISO(today, 9, 0),\n end: toISO(today, 10, 0),\n status: \"active\",\n color: \"#4f46e5\",\n },\n {\n id: 2,\n title: \"Product Launch Webinar\",\n start: toISO(today, 14, 0),\n end: toISO(today, 15, 30),\n status: \"active\",\n color: \"#0891b2\",\n venue: \"Zoom\",\n },\n {\n id: 3,\n title: \"Annual Leadership Summit\",\n start: `${toDateString(inTwoDays)}T00:00:00.000Z`,\n end: `${toDateString(inTwoDays)}T23:59:59.000Z`,\n status: \"active\",\n color: \"#059669\",\n isAllDay: true,\n venue: \"Convention Center\",\n },\n];\n","import { useQuery, type UseQueryResult } 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-calendar-events.preview\";\n\nimport type { CalendarEvent } from \"./use-calendar-events.types\";\n\nexport type { CalendarEvent } from \"./use-calendar-events.types\";\n\nexport function useCalendarEvents(): UseQueryResult<CalendarEvent[], Error> {\n const { baseUrl, getApiHeaders } = useDataSourceConfig();\n const { isPreview } = useWidgetPreviewContext();\n\n return useQuery({\n queryKey: [\n \"rep-widget-use\",\n \"calendar-events\",\n isPreview ? \"preview\" : baseUrl,\n ] as const,\n queryFn: async ({ signal }): Promise<CalendarEvent[]> => {\n const url = baseUrl\n ? `${baseUrl}/events.json?event_timeline=upcoming`\n : \"/events.json?event_timeline=upcoming\";\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 calendar events: ${response.status}`);\n }\n\n return response.json();\n },\n enabled: !isPreview,\n ...(isPreview && { placeholderData: PREVIEW_DATA }),\n });\n}\n","import { useState, 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/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 {\n useCalendarEvents,\n type CalendarEvent,\n} from \"../hooks/use-calendar-events\";\nimport { ErrorState } from \"../components/error-state\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faChevronLeft,\n faChevronRight,\n faChevronsDown,\n faChevronsUp,\n} from \"@fortawesome/pro-regular-svg-icons\";\n\n// Utility to get days in a month\nconst getDaysInMonth = (year: number, month: number) => {\n return new Date(year, month + 1, 0).getDate();\n};\n\n// Utility to get the first day of month (0 = Sunday, 1 = Monday, etc.)\nconst getFirstDayOfMonth = (year: number, month: number) => {\n return new Date(year, month, 1).getDay();\n};\n\n// Generate calendar grid for a month\nconst generateMonthGrid = (year: number, month: number) => {\n const daysInMonth = getDaysInMonth(year, month);\n const firstDay = getFirstDayOfMonth(year, month);\n const today = new Date();\n\n const days: Array<{\n date: Date | null;\n isToday: boolean;\n isCurrentMonth: boolean;\n }> = [];\n\n // Add empty slots for days before the 1st\n for (let i = 0; i < firstDay; i++) {\n days.push({ date: null, isToday: false, isCurrentMonth: false });\n }\n\n // Add days of the month\n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n const isToday =\n date.getDate() === today.getDate() &&\n date.getMonth() === today.getMonth() &&\n date.getFullYear() === today.getFullYear();\n days.push({ date, isToday, isCurrentMonth: true });\n }\n\n return days;\n};\n\n// Generate week grid for current week\nconst generateWeekGrid = () => {\n const today = new Date();\n const currentDay = today.getDay();\n const days: Array<{\n date: Date;\n isToday: boolean;\n }> = [];\n\n for (let i = 0; i < 7; i++) {\n const date = new Date(today);\n date.setDate(today.getDate() - currentDay + i);\n days.push({\n date,\n isToday: date.toDateString() === today.toDateString(),\n });\n }\n\n return days;\n};\n\n// Get events for a specific date\nconst getEventsForDate = (date: Date, events: CalendarEvent[]) => {\n const dayStart = new Date(date);\n dayStart.setHours(0, 0, 0, 0);\n const dayEnd = new Date(date);\n dayEnd.setHours(23, 59, 59, 999);\n\n return events.filter((event) => {\n const eventStart = new Date(event.start);\n const eventEnd = new Date(event.end);\n return eventStart <= dayEnd && eventEnd >= dayStart;\n });\n};\n\n// Check if a date has events\nconst hasEventsOnDate = (date: Date | null, events: CalendarEvent[]) => {\n if (!date) return false;\n return getEventsForDate(date, events).length > 0;\n};\n\n// Event item component\nconst EventItem = ({\n title,\n start,\n end,\n color,\n isAllDay,\n accentColor,\n}: CalendarEvent & { accentColor?: string }) => {\n const startTime = new Date(start).toLocaleTimeString(\"en-US\", {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n const endTime = new Date(end).toLocaleTimeString(\"en-US\", {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n\n return (\n <div className=\"flex gap-x-2\">\n <div\n className=\"w-0.5 shrink-0 rounded-full\"\n style={{ backgroundColor: color || accentColor }}\n />\n <div className=\"min-w-0 flex-1\">\n <div className=\"truncate text-sm font-medium\">{title}</div>\n <div className=\"text-xs opacity-60\">\n {isAllDay ? \"All day\" : `${startTime} - ${endTime}`}\n </div>\n </div>\n </div>\n );\n};\n\nconst dayNames = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\ntype DayButtonProps = {\n date: Date;\n isToday: boolean;\n isSelected: boolean;\n hasEvents: boolean;\n accentColor: string;\n onClick: () => void;\n extraClassName?: string;\n};\n\nfunction DayButton({\n date,\n isToday,\n isSelected,\n hasEvents,\n accentColor,\n onClick,\n extraClassName = \"\",\n}: DayButtonProps) {\n return (\n <button\n onClick={onClick}\n className={`relative flex aspect-square items-center justify-center rounded-full text-sm transition-colors ${\n isSelected\n ? `bg-${accentColor} text-${accentColor}-foreground`\n : isToday\n ? `bg-${accentColor}/30 text-${accentColor}-foreground hover:bg-${accentColor}/50`\n : `hover:bg-${accentColor}/50 hover:text-${accentColor}-foreground`\n } ${extraClassName}`}\n >\n {date.getDate()}\n {hasEvents && (\n <div\n className={`absolute bottom-1 h-1 w-1 rounded-full bg-${accentColor}`}\n />\n )}\n </button>\n );\n}\n\ntype CalendarWidgetProps = 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\nexport function CalendarWidget({\n // Title defaults\n titleEnabled = true,\n titleText = \"Calendar\",\n titleFontSize = \"xl\",\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 className,\n ...props\n}: CalendarWidgetProps): React.JSX.Element {\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 today = new Date();\n const [currentMonth, setCurrentMonth] = useState(today.getMonth());\n const [currentYear, setCurrentYear] = useState(today.getFullYear());\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [selectedDate, setSelectedDate] = useState<Date | null>(today);\n\n const { data: events = [], isLoading, isError } = useCalendarEvents();\n\n // Generate calendar grids\n const monthGrid = useMemo(\n () => generateMonthGrid(currentYear, currentMonth),\n [currentYear, currentMonth],\n );\n const weekGrid = useMemo(() => generateWeekGrid(), []);\n\n // Get events for selected date\n const selectedDateEvents = useMemo(() => {\n if (!selectedDate) return [];\n return getEventsForDate(selectedDate, events);\n }, [selectedDate, events]);\n\n // Navigation handlers\n const goToPrevMonth = () => {\n if (currentMonth === 0) {\n setCurrentMonth(11);\n setCurrentYear(currentYear - 1);\n } else {\n setCurrentMonth(currentMonth - 1);\n }\n };\n\n const goToNextMonth = () => {\n if (currentMonth === 11) {\n setCurrentMonth(0);\n setCurrentYear(currentYear + 1);\n } else {\n setCurrentMonth(currentMonth + 1);\n }\n };\n\n const monthYearLabel = new Date(currentYear, currentMonth).toLocaleString(\n \"en-US\",\n {\n month: \"long\",\n year: \"numeric\",\n },\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 {titleText}\n </h2>\n </div>\n )}\n\n {/* Loading state */}\n {isLoading ? (\n <div\n className={`flex min-h-[300px] 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 /* Error state */\n <ErrorState />\n ) : (\n <div className={`p-${padding}`}>\n {/* Desktop: Side by side layout */}\n <div className=\"@md:flex @md:gap-6\">\n {/* Calendar Section */}\n <div className=\"@md:flex-none\">\n {/* Month/Year Header with Navigation */}\n <div className=\"mb-4 flex items-center justify-between\">\n <button\n onClick={goToPrevMonth}\n className=\"hover:bg-foreground/10 rounded-full p-1\"\n aria-label=\"Previous month\"\n >\n <FontAwesomeIcon icon={faChevronLeft} />\n </button>\n\n <span className=\"text-base font-semibold\">\n {monthYearLabel}\n </span>\n\n <button\n onClick={goToNextMonth}\n className=\"hover:bg-foreground/10 rounded-full p-1\"\n aria-label=\"Next month\"\n >\n <FontAwesomeIcon icon={faChevronRight} />\n </button>\n </div>\n\n {/* Day Headers */}\n <div className=\"mb-2 grid grid-cols-7 gap-1 text-center\">\n {dayNames.map((day, idx) => (\n <div\n key={idx}\n className=\"text-xs font-medium uppercase opacity-60\"\n >\n {day}\n </div>\n ))}\n </div>\n\n {/* Calendar Grid - Week view on mobile when collapsed */}\n {isCollapsed && (\n <div className=\"grid grid-cols-7 gap-1 @md:hidden\">\n {weekGrid.map(({ date, isToday }, idx) => (\n <DayButton\n key={idx}\n date={date}\n isToday={isToday}\n isSelected={\n selectedDate?.toDateString() === date.toDateString()\n }\n hasEvents={hasEventsOnDate(date, events)}\n accentColor={accentColor}\n onClick={() => setSelectedDate(date)}\n />\n ))}\n </div>\n )}\n\n {/* Month view (always on desktop, when not collapsed on mobile) */}\n <div\n className={`grid grid-cols-7 gap-1 ${isCollapsed ? \"hidden @md:grid\" : \"grid\"}`}\n >\n {monthGrid.map((day, idx) => {\n if (!day.date) {\n return <div key={idx} className=\"aspect-square\" />;\n }\n\n return (\n <DayButton\n key={idx}\n date={day.date}\n isToday={day.isToday}\n isSelected={\n selectedDate?.toDateString() === day.date.toDateString()\n }\n hasEvents={hasEventsOnDate(day.date, events)}\n accentColor={accentColor}\n onClick={() => setSelectedDate(day.date)}\n extraClassName=\"p-2 @md:m-3\"\n />\n );\n })}\n </div>\n\n {/* Mobile collapse toggle */}\n <button\n onClick={() => setIsCollapsed(!isCollapsed)}\n className={`ml-2 flex w-full items-center justify-center gap-3 rounded-full p-1 text-${textColor}/50 @md:hidden`}\n aria-label={\n isCollapsed ? \"Expand calendar\" : \"Collapse calendar\"\n }\n >\n <div className={`h-1 w-1/2 bg-${textColor}/50`} />\n {isCollapsed ? (\n <FontAwesomeIcon icon={faChevronsDown} />\n ) : (\n <FontAwesomeIcon icon={faChevronsUp} />\n )}\n <div className={`h-1 w-1/2 bg-${textColor}/50`} />\n </button>\n </div>\n\n {/* Events Panel */}\n <div className=\"border-muted mt-4 pt-4 @md:mt-0 @md:w-56 @md:border-l @md:pt-0 @md:pl-6\">\n <div className=\"mb-2 text-sm font-medium opacity-60\">\n {selectedDate\n ? selectedDate.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n month: \"short\",\n day: \"numeric\",\n })\n : \"Select a date\"}\n </div>\n\n {selectedDateEvents.length > 0 ? (\n <div className=\"flex flex-col gap-3\">\n {selectedDateEvents.map((event, idx) => (\n <EventItem\n key={`${event.id}-${idx}`}\n {...event}\n accentColor={`var(--${accentColor})`}\n />\n ))}\n </div>\n ) : (\n <div className=\"text-sm opacity-50\">No events</div>\n )}\n </div>\n </div>\n </div>\n )}\n </div>\n );\n}\n\nexport const calendarWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"CalendarWidget\",\n displayName: \"Calendar 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 calendar\",\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 calendar\",\n defaultValue: \"Calendar\",\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 calendar 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 calendar 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 today highlight and event indicators\",\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 calendar 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 calendar container\",\n defaultValue: \"md\",\n tab: \"styling\",\n group: \"Design\",\n }),\n ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarWidget-s7KgQ5JD.cjs","names":["ErrorState","FontAwesomeIcon","faChevronLeft","faChevronRight","faChevronsDown","faChevronsUp"],"sources":["../src/hooks/use-calendar-events.preview.ts","../src/hooks/use-calendar-events.ts","../src/widgets/CalendarWidget.tsx"],"sourcesContent":["import type { CalendarEvent } from \"./use-calendar-events.types\";\n\nconst today = new Date();\nconst inTwoDays = new Date(today);\ninTwoDays.setDate(inTwoDays.getDate() + 2);\n\nfunction toISO(date: Date, hours: number, minutes = 0): string {\n const d = new Date(date);\n d.setHours(hours, minutes, 0, 0);\n return d.toISOString();\n}\n\nfunction toDateString(date: Date): string {\n return date.toISOString().split(\"T\")[0]!;\n}\n\nexport const PREVIEW_DATA: CalendarEvent[] = [\n {\n id: 1,\n title: \"Team Strategy Call\",\n start: toISO(today, 9, 0),\n end: toISO(today, 10, 0),\n status: \"active\",\n color: \"#4f46e5\",\n },\n {\n id: 2,\n title: \"Product Launch Webinar\",\n start: toISO(today, 14, 0),\n end: toISO(today, 15, 30),\n status: \"active\",\n color: \"#0891b2\",\n venue: \"Zoom\",\n },\n {\n id: 3,\n title: \"Annual Leadership Summit\",\n start: `${toDateString(inTwoDays)}T00:00:00.000Z`,\n end: `${toDateString(inTwoDays)}T23:59:59.000Z`,\n status: \"active\",\n color: \"#059669\",\n isAllDay: true,\n venue: \"Convention Center\",\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-calendar-events.preview\";\n\nimport type { CalendarEvent } from \"./use-calendar-events.types\";\n\nexport type { CalendarEvent } from \"./use-calendar-events.types\";\n\nexport function useCalendarEvents() {\n const { baseUrl, getApiHeaders } = useDataSourceConfig();\n const { isPreview } = useWidgetPreviewContext();\n\n return useQuery({\n queryKey: [\n \"rep-widget-use\",\n \"calendar-events\",\n isPreview ? \"preview\" : baseUrl,\n ] as const,\n queryFn: async ({ signal }): Promise<CalendarEvent[]> => {\n const url = baseUrl\n ? `${baseUrl}/events.json?event_timeline=upcoming`\n : \"/events.json?event_timeline=upcoming\";\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 calendar events: ${response.status}`);\n }\n\n return response.json();\n },\n enabled: !isPreview,\n ...(isPreview && { placeholderData: PREVIEW_DATA }),\n });\n}\n","import { useState, useMemo, 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 {\n useCalendarEvents,\n type CalendarEvent,\n} from \"../hooks/use-calendar-events\";\nimport { ErrorState } from \"../components/error-state\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faChevronLeft,\n faChevronRight,\n faChevronsDown,\n faChevronsUp,\n} from \"@fortawesome/pro-regular-svg-icons\";\n\n// Utility to get days in a month\nconst getDaysInMonth = (year: number, month: number) => {\n return new Date(year, month + 1, 0).getDate();\n};\n\n// Utility to get the first day of month (0 = Sunday, 1 = Monday, etc.)\nconst getFirstDayOfMonth = (year: number, month: number) => {\n return new Date(year, month, 1).getDay();\n};\n\n// Generate calendar grid for a month\nconst generateMonthGrid = (year: number, month: number) => {\n const daysInMonth = getDaysInMonth(year, month);\n const firstDay = getFirstDayOfMonth(year, month);\n const today = new Date();\n\n const days: Array<{\n date: Date | null;\n isToday: boolean;\n isCurrentMonth: boolean;\n }> = [];\n\n // Add empty slots for days before the 1st\n for (let i = 0; i < firstDay; i++) {\n days.push({ date: null, isToday: false, isCurrentMonth: false });\n }\n\n // Add days of the month\n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n const isToday =\n date.getDate() === today.getDate() &&\n date.getMonth() === today.getMonth() &&\n date.getFullYear() === today.getFullYear();\n days.push({ date, isToday, isCurrentMonth: true });\n }\n\n return days;\n};\n\n// Generate week grid for current week\nconst generateWeekGrid = () => {\n const today = new Date();\n const currentDay = today.getDay();\n const days: Array<{\n date: Date;\n isToday: boolean;\n }> = [];\n\n for (let i = 0; i < 7; i++) {\n const date = new Date(today);\n date.setDate(today.getDate() - currentDay + i);\n days.push({\n date,\n isToday: date.toDateString() === today.toDateString(),\n });\n }\n\n return days;\n};\n\n// Get events for a specific date\nconst getEventsForDate = (date: Date, events: CalendarEvent[]) => {\n const dayStart = new Date(date);\n dayStart.setHours(0, 0, 0, 0);\n const dayEnd = new Date(date);\n dayEnd.setHours(23, 59, 59, 999);\n\n return events.filter((event) => {\n const eventStart = new Date(event.start);\n const eventEnd = new Date(event.end);\n return eventStart <= dayEnd && eventEnd >= dayStart;\n });\n};\n\n// Check if a date has events\nconst hasEventsOnDate = (date: Date | null, events: CalendarEvent[]) => {\n if (!date) return false;\n return getEventsForDate(date, events).length > 0;\n};\n\n// Event item component\nconst EventItem = ({\n title,\n start,\n end,\n color,\n isAllDay,\n accentColor,\n}: CalendarEvent & { accentColor?: string }) => {\n const startTime = new Date(start).toLocaleTimeString(\"en-US\", {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n const endTime = new Date(end).toLocaleTimeString(\"en-US\", {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n\n return (\n <div className=\"flex gap-x-2\">\n <div\n className=\"w-0.5 shrink-0 rounded-full\"\n style={{ backgroundColor: color || accentColor }}\n />\n <div className=\"min-w-0 flex-1\">\n <div className=\"truncate text-sm font-medium\">{title}</div>\n <div className=\"text-xs opacity-60\">\n {isAllDay ? \"All day\" : `${startTime} - ${endTime}`}\n </div>\n </div>\n </div>\n );\n};\n\nconst dayNames = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\ntype DayButtonProps = {\n date: Date;\n isToday: boolean;\n isSelected: boolean;\n hasEvents: boolean;\n accentColor: string;\n onClick: () => void;\n extraClassName?: string;\n};\n\nfunction DayButton({\n date,\n isToday,\n isSelected,\n hasEvents,\n accentColor,\n onClick,\n extraClassName = \"\",\n}: DayButtonProps) {\n return (\n <button\n onClick={onClick}\n className={`relative flex aspect-square items-center justify-center rounded-full text-sm transition-colors ${\n isSelected\n ? `bg-${accentColor} text-${accentColor}-foreground`\n : isToday\n ? `bg-${accentColor}/30 text-${accentColor}-foreground hover:bg-${accentColor}/50`\n : `hover:bg-${accentColor}/50 hover:text-${accentColor}-foreground`\n } ${extraClassName}`}\n >\n {date.getDate()}\n {hasEvents && (\n <div\n className={`absolute bottom-1 h-1 w-1 rounded-full bg-${accentColor}`}\n />\n )}\n </button>\n );\n}\n\ntype CalendarWidgetProps = 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\nexport function CalendarWidget({\n // Title defaults\n titleEnabled = true,\n titleText = \"Calendar\",\n titleFontSize = \"xl\",\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 className,\n ...props\n}: CalendarWidgetProps) {\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 today = new Date();\n const [currentMonth, setCurrentMonth] = useState(today.getMonth());\n const [currentYear, setCurrentYear] = useState(today.getFullYear());\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [selectedDate, setSelectedDate] = useState<Date | null>(today);\n\n const { data: events = [], isLoading, isError } = useCalendarEvents();\n\n // Generate calendar grids\n const monthGrid = useMemo(\n () => generateMonthGrid(currentYear, currentMonth),\n [currentYear, currentMonth],\n );\n const weekGrid = useMemo(() => generateWeekGrid(), []);\n\n // Get events for selected date\n const selectedDateEvents = useMemo(() => {\n if (!selectedDate) return [];\n return getEventsForDate(selectedDate, events);\n }, [selectedDate, events]);\n\n // Navigation handlers\n const goToPrevMonth = () => {\n if (currentMonth === 0) {\n setCurrentMonth(11);\n setCurrentYear(currentYear - 1);\n } else {\n setCurrentMonth(currentMonth - 1);\n }\n };\n\n const goToNextMonth = () => {\n if (currentMonth === 11) {\n setCurrentMonth(0);\n setCurrentYear(currentYear + 1);\n } else {\n setCurrentMonth(currentMonth + 1);\n }\n };\n\n const monthYearLabel = new Date(currentYear, currentMonth).toLocaleString(\n \"en-US\",\n {\n month: \"long\",\n year: \"numeric\",\n },\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 {titleText}\n </h2>\n </div>\n )}\n\n {/* Loading state */}\n {isLoading ? (\n <div\n className={`flex min-h-[300px] 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 /* Error state */\n <ErrorState />\n ) : (\n <div className={`p-${padding}`}>\n {/* Desktop: Side by side layout */}\n <div className=\"@md:flex @md:gap-6\">\n {/* Calendar Section */}\n <div className=\"@md:flex-none\">\n {/* Month/Year Header with Navigation */}\n <div className=\"mb-4 flex items-center justify-between\">\n <button\n onClick={goToPrevMonth}\n className=\"hover:bg-foreground/10 rounded-full p-1\"\n aria-label=\"Previous month\"\n >\n <FontAwesomeIcon icon={faChevronLeft} />\n </button>\n\n <span className=\"text-base font-semibold\">\n {monthYearLabel}\n </span>\n\n <button\n onClick={goToNextMonth}\n className=\"hover:bg-foreground/10 rounded-full p-1\"\n aria-label=\"Next month\"\n >\n <FontAwesomeIcon icon={faChevronRight} />\n </button>\n </div>\n\n {/* Day Headers */}\n <div className=\"mb-2 grid grid-cols-7 gap-1 text-center\">\n {dayNames.map((day, idx) => (\n <div\n key={idx}\n className=\"text-xs font-medium uppercase opacity-60\"\n >\n {day}\n </div>\n ))}\n </div>\n\n {/* Calendar Grid - Week view on mobile when collapsed */}\n {isCollapsed && (\n <div className=\"grid grid-cols-7 gap-1 @md:hidden\">\n {weekGrid.map(({ date, isToday }, idx) => (\n <DayButton\n key={idx}\n date={date}\n isToday={isToday}\n isSelected={\n selectedDate?.toDateString() === date.toDateString()\n }\n hasEvents={hasEventsOnDate(date, events)}\n accentColor={accentColor}\n onClick={() => setSelectedDate(date)}\n />\n ))}\n </div>\n )}\n\n {/* Month view (always on desktop, when not collapsed on mobile) */}\n <div\n className={`grid grid-cols-7 gap-1 ${isCollapsed ? \"hidden @md:grid\" : \"grid\"}`}\n >\n {monthGrid.map((day, idx) => {\n if (!day.date) {\n return <div key={idx} className=\"aspect-square\" />;\n }\n\n return (\n <DayButton\n key={idx}\n date={day.date}\n isToday={day.isToday}\n isSelected={\n selectedDate?.toDateString() === day.date.toDateString()\n }\n hasEvents={hasEventsOnDate(day.date, events)}\n accentColor={accentColor}\n onClick={() => setSelectedDate(day.date)}\n extraClassName=\"p-2 @md:m-3\"\n />\n );\n })}\n </div>\n\n {/* Mobile collapse toggle */}\n <button\n onClick={() => setIsCollapsed(!isCollapsed)}\n className={`ml-2 flex w-full items-center justify-center gap-3 rounded-full p-1 text-${textColor}/50 @md:hidden`}\n aria-label={\n isCollapsed ? \"Expand calendar\" : \"Collapse calendar\"\n }\n >\n <div className={`h-1 w-1/2 bg-${textColor}/50`} />\n {isCollapsed ? (\n <FontAwesomeIcon icon={faChevronsDown} />\n ) : (\n <FontAwesomeIcon icon={faChevronsUp} />\n )}\n <div className={`h-1 w-1/2 bg-${textColor}/50`} />\n </button>\n </div>\n\n {/* Events Panel */}\n <div className=\"border-muted mt-4 pt-4 @md:mt-0 @md:w-56 @md:border-l @md:pt-0 @md:pl-6\">\n <div className=\"mb-2 text-sm font-medium opacity-60\">\n {selectedDate\n ? selectedDate.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n month: \"short\",\n day: \"numeric\",\n })\n : \"Select a date\"}\n </div>\n\n {selectedDateEvents.length > 0 ? (\n <div className=\"flex flex-col gap-3\">\n {selectedDateEvents.map((event, idx) => (\n <EventItem\n key={`${event.id}-${idx}`}\n {...event}\n accentColor={`var(--${accentColor})`}\n />\n ))}\n </div>\n ) : (\n <div className=\"text-sm opacity-50\">No events</div>\n )}\n </div>\n </div>\n </div>\n )}\n </div>\n );\n}\n\nexport const calendarWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"CalendarWidget\",\n displayName: \"Calendar 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 calendar\",\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 calendar\",\n defaultValue: \"Calendar\",\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 calendar 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 calendar 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 today highlight and event indicators\",\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 calendar 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 calendar container\",\n defaultValue: \"md\",\n tab: \"styling\",\n group: \"Design\",\n }),\n ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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I;EAAW,OAAO;EAAW,CAAC;CACjD,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;EAGF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;oDACa;GACZ,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;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;sDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;2DACmB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}
|
|
1
|
+
{"version":3,"file":"CalendarWidget-s7KgQ5JD.cjs","names":["ErrorState","FontAwesomeIcon","faChevronLeft","faChevronRight","faChevronsDown","faChevronsUp"],"sources":["../src/hooks/use-calendar-events.preview.ts","../src/hooks/use-calendar-events.ts","../src/widgets/CalendarWidget.tsx"],"sourcesContent":["import type { CalendarEvent } from \"./use-calendar-events.types\";\n\nconst today = new Date();\nconst inTwoDays = new Date(today);\ninTwoDays.setDate(inTwoDays.getDate() + 2);\n\nfunction toISO(date: Date, hours: number, minutes = 0): string {\n const d = new Date(date);\n d.setHours(hours, minutes, 0, 0);\n return d.toISOString();\n}\n\nfunction toDateString(date: Date): string {\n return date.toISOString().split(\"T\")[0]!;\n}\n\nexport const PREVIEW_DATA: CalendarEvent[] = [\n {\n id: 1,\n title: \"Team Strategy Call\",\n start: toISO(today, 9, 0),\n end: toISO(today, 10, 0),\n status: \"active\",\n color: \"#4f46e5\",\n },\n {\n id: 2,\n title: \"Product Launch Webinar\",\n start: toISO(today, 14, 0),\n end: toISO(today, 15, 30),\n status: \"active\",\n color: \"#0891b2\",\n venue: \"Zoom\",\n },\n {\n id: 3,\n title: \"Annual Leadership Summit\",\n start: `${toDateString(inTwoDays)}T00:00:00.000Z`,\n end: `${toDateString(inTwoDays)}T23:59:59.000Z`,\n status: \"active\",\n color: \"#059669\",\n isAllDay: true,\n venue: \"Convention Center\",\n },\n];\n","import { useQuery, type UseQueryResult } 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-calendar-events.preview\";\n\nimport type { CalendarEvent } from \"./use-calendar-events.types\";\n\nexport type { CalendarEvent } from \"./use-calendar-events.types\";\n\nexport function useCalendarEvents(): UseQueryResult<CalendarEvent[], Error> {\n const { baseUrl, getApiHeaders } = useDataSourceConfig();\n const { isPreview } = useWidgetPreviewContext();\n\n return useQuery({\n queryKey: [\n \"rep-widget-use\",\n \"calendar-events\",\n isPreview ? \"preview\" : baseUrl,\n ] as const,\n queryFn: async ({ signal }): Promise<CalendarEvent[]> => {\n const url = baseUrl\n ? `${baseUrl}/events.json?event_timeline=upcoming`\n : \"/events.json?event_timeline=upcoming\";\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 calendar events: ${response.status}`);\n }\n\n return response.json();\n },\n enabled: !isPreview,\n ...(isPreview && { placeholderData: PREVIEW_DATA }),\n });\n}\n","import { useState, 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/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 {\n useCalendarEvents,\n type CalendarEvent,\n} from \"../hooks/use-calendar-events\";\nimport { ErrorState } from \"../components/error-state\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport {\n faChevronLeft,\n faChevronRight,\n faChevronsDown,\n faChevronsUp,\n} from \"@fortawesome/pro-regular-svg-icons\";\n\n// Utility to get days in a month\nconst getDaysInMonth = (year: number, month: number) => {\n return new Date(year, month + 1, 0).getDate();\n};\n\n// Utility to get the first day of month (0 = Sunday, 1 = Monday, etc.)\nconst getFirstDayOfMonth = (year: number, month: number) => {\n return new Date(year, month, 1).getDay();\n};\n\n// Generate calendar grid for a month\nconst generateMonthGrid = (year: number, month: number) => {\n const daysInMonth = getDaysInMonth(year, month);\n const firstDay = getFirstDayOfMonth(year, month);\n const today = new Date();\n\n const days: Array<{\n date: Date | null;\n isToday: boolean;\n isCurrentMonth: boolean;\n }> = [];\n\n // Add empty slots for days before the 1st\n for (let i = 0; i < firstDay; i++) {\n days.push({ date: null, isToday: false, isCurrentMonth: false });\n }\n\n // Add days of the month\n for (let day = 1; day <= daysInMonth; day++) {\n const date = new Date(year, month, day);\n const isToday =\n date.getDate() === today.getDate() &&\n date.getMonth() === today.getMonth() &&\n date.getFullYear() === today.getFullYear();\n days.push({ date, isToday, isCurrentMonth: true });\n }\n\n return days;\n};\n\n// Generate week grid for current week\nconst generateWeekGrid = () => {\n const today = new Date();\n const currentDay = today.getDay();\n const days: Array<{\n date: Date;\n isToday: boolean;\n }> = [];\n\n for (let i = 0; i < 7; i++) {\n const date = new Date(today);\n date.setDate(today.getDate() - currentDay + i);\n days.push({\n date,\n isToday: date.toDateString() === today.toDateString(),\n });\n }\n\n return days;\n};\n\n// Get events for a specific date\nconst getEventsForDate = (date: Date, events: CalendarEvent[]) => {\n const dayStart = new Date(date);\n dayStart.setHours(0, 0, 0, 0);\n const dayEnd = new Date(date);\n dayEnd.setHours(23, 59, 59, 999);\n\n return events.filter((event) => {\n const eventStart = new Date(event.start);\n const eventEnd = new Date(event.end);\n return eventStart <= dayEnd && eventEnd >= dayStart;\n });\n};\n\n// Check if a date has events\nconst hasEventsOnDate = (date: Date | null, events: CalendarEvent[]) => {\n if (!date) return false;\n return getEventsForDate(date, events).length > 0;\n};\n\n// Event item component\nconst EventItem = ({\n title,\n start,\n end,\n color,\n isAllDay,\n accentColor,\n}: CalendarEvent & { accentColor?: string }) => {\n const startTime = new Date(start).toLocaleTimeString(\"en-US\", {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n const endTime = new Date(end).toLocaleTimeString(\"en-US\", {\n hour: \"numeric\",\n minute: \"2-digit\",\n });\n\n return (\n <div className=\"flex gap-x-2\">\n <div\n className=\"w-0.5 shrink-0 rounded-full\"\n style={{ backgroundColor: color || accentColor }}\n />\n <div className=\"min-w-0 flex-1\">\n <div className=\"truncate text-sm font-medium\">{title}</div>\n <div className=\"text-xs opacity-60\">\n {isAllDay ? \"All day\" : `${startTime} - ${endTime}`}\n </div>\n </div>\n </div>\n );\n};\n\nconst dayNames = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\n\ntype DayButtonProps = {\n date: Date;\n isToday: boolean;\n isSelected: boolean;\n hasEvents: boolean;\n accentColor: string;\n onClick: () => void;\n extraClassName?: string;\n};\n\nfunction DayButton({\n date,\n isToday,\n isSelected,\n hasEvents,\n accentColor,\n onClick,\n extraClassName = \"\",\n}: DayButtonProps) {\n return (\n <button\n onClick={onClick}\n className={`relative flex aspect-square items-center justify-center rounded-full text-sm transition-colors ${\n isSelected\n ? `bg-${accentColor} text-${accentColor}-foreground`\n : isToday\n ? `bg-${accentColor}/30 text-${accentColor}-foreground hover:bg-${accentColor}/50`\n : `hover:bg-${accentColor}/50 hover:text-${accentColor}-foreground`\n } ${extraClassName}`}\n >\n {date.getDate()}\n {hasEvents && (\n <div\n className={`absolute bottom-1 h-1 w-1 rounded-full bg-${accentColor}`}\n />\n )}\n </button>\n );\n}\n\ntype CalendarWidgetProps = 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\nexport function CalendarWidget({\n // Title defaults\n titleEnabled = true,\n titleText = \"Calendar\",\n titleFontSize = \"xl\",\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 className,\n ...props\n}: CalendarWidgetProps): React.JSX.Element {\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 today = new Date();\n const [currentMonth, setCurrentMonth] = useState(today.getMonth());\n const [currentYear, setCurrentYear] = useState(today.getFullYear());\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [selectedDate, setSelectedDate] = useState<Date | null>(today);\n\n const { data: events = [], isLoading, isError } = useCalendarEvents();\n\n // Generate calendar grids\n const monthGrid = useMemo(\n () => generateMonthGrid(currentYear, currentMonth),\n [currentYear, currentMonth],\n );\n const weekGrid = useMemo(() => generateWeekGrid(), []);\n\n // Get events for selected date\n const selectedDateEvents = useMemo(() => {\n if (!selectedDate) return [];\n return getEventsForDate(selectedDate, events);\n }, [selectedDate, events]);\n\n // Navigation handlers\n const goToPrevMonth = () => {\n if (currentMonth === 0) {\n setCurrentMonth(11);\n setCurrentYear(currentYear - 1);\n } else {\n setCurrentMonth(currentMonth - 1);\n }\n };\n\n const goToNextMonth = () => {\n if (currentMonth === 11) {\n setCurrentMonth(0);\n setCurrentYear(currentYear + 1);\n } else {\n setCurrentMonth(currentMonth + 1);\n }\n };\n\n const monthYearLabel = new Date(currentYear, currentMonth).toLocaleString(\n \"en-US\",\n {\n month: \"long\",\n year: \"numeric\",\n },\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 {titleText}\n </h2>\n </div>\n )}\n\n {/* Loading state */}\n {isLoading ? (\n <div\n className={`flex min-h-[300px] 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 /* Error state */\n <ErrorState />\n ) : (\n <div className={`p-${padding}`}>\n {/* Desktop: Side by side layout */}\n <div className=\"@md:flex @md:gap-6\">\n {/* Calendar Section */}\n <div className=\"@md:flex-none\">\n {/* Month/Year Header with Navigation */}\n <div className=\"mb-4 flex items-center justify-between\">\n <button\n onClick={goToPrevMonth}\n className=\"hover:bg-foreground/10 rounded-full p-1\"\n aria-label=\"Previous month\"\n >\n <FontAwesomeIcon icon={faChevronLeft} />\n </button>\n\n <span className=\"text-base font-semibold\">\n {monthYearLabel}\n </span>\n\n <button\n onClick={goToNextMonth}\n className=\"hover:bg-foreground/10 rounded-full p-1\"\n aria-label=\"Next month\"\n >\n <FontAwesomeIcon icon={faChevronRight} />\n </button>\n </div>\n\n {/* Day Headers */}\n <div className=\"mb-2 grid grid-cols-7 gap-1 text-center\">\n {dayNames.map((day, idx) => (\n <div\n key={idx}\n className=\"text-xs font-medium uppercase opacity-60\"\n >\n {day}\n </div>\n ))}\n </div>\n\n {/* Calendar Grid - Week view on mobile when collapsed */}\n {isCollapsed && (\n <div className=\"grid grid-cols-7 gap-1 @md:hidden\">\n {weekGrid.map(({ date, isToday }, idx) => (\n <DayButton\n key={idx}\n date={date}\n isToday={isToday}\n isSelected={\n selectedDate?.toDateString() === date.toDateString()\n }\n hasEvents={hasEventsOnDate(date, events)}\n accentColor={accentColor}\n onClick={() => setSelectedDate(date)}\n />\n ))}\n </div>\n )}\n\n {/* Month view (always on desktop, when not collapsed on mobile) */}\n <div\n className={`grid grid-cols-7 gap-1 ${isCollapsed ? \"hidden @md:grid\" : \"grid\"}`}\n >\n {monthGrid.map((day, idx) => {\n if (!day.date) {\n return <div key={idx} className=\"aspect-square\" />;\n }\n\n return (\n <DayButton\n key={idx}\n date={day.date}\n isToday={day.isToday}\n isSelected={\n selectedDate?.toDateString() === day.date.toDateString()\n }\n hasEvents={hasEventsOnDate(day.date, events)}\n accentColor={accentColor}\n onClick={() => setSelectedDate(day.date)}\n extraClassName=\"p-2 @md:m-3\"\n />\n );\n })}\n </div>\n\n {/* Mobile collapse toggle */}\n <button\n onClick={() => setIsCollapsed(!isCollapsed)}\n className={`ml-2 flex w-full items-center justify-center gap-3 rounded-full p-1 text-${textColor}/50 @md:hidden`}\n aria-label={\n isCollapsed ? \"Expand calendar\" : \"Collapse calendar\"\n }\n >\n <div className={`h-1 w-1/2 bg-${textColor}/50`} />\n {isCollapsed ? (\n <FontAwesomeIcon icon={faChevronsDown} />\n ) : (\n <FontAwesomeIcon icon={faChevronsUp} />\n )}\n <div className={`h-1 w-1/2 bg-${textColor}/50`} />\n </button>\n </div>\n\n {/* Events Panel */}\n <div className=\"border-muted mt-4 pt-4 @md:mt-0 @md:w-56 @md:border-l @md:pt-0 @md:pl-6\">\n <div className=\"mb-2 text-sm font-medium opacity-60\">\n {selectedDate\n ? selectedDate.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n month: \"short\",\n day: \"numeric\",\n })\n : \"Select a date\"}\n </div>\n\n {selectedDateEvents.length > 0 ? (\n <div className=\"flex flex-col gap-3\">\n {selectedDateEvents.map((event, idx) => (\n <EventItem\n key={`${event.id}-${idx}`}\n {...event}\n accentColor={`var(--${accentColor})`}\n />\n ))}\n </div>\n ) : (\n <div className=\"text-sm opacity-50\">No events</div>\n )}\n </div>\n </div>\n </div>\n )}\n </div>\n );\n}\n\nexport const calendarWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"CalendarWidget\",\n displayName: \"Calendar 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 calendar\",\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 calendar\",\n defaultValue: \"Calendar\",\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 calendar 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 calendar 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 today highlight and event indicators\",\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 calendar 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 calendar container\",\n defaultValue: \"md\",\n tab: \"styling\",\n group: \"Design\",\n }),\n ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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I;EAAW,OAAO;EAAW,CAAC;CACjD,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;EAGF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;oDACa;GACZ,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;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;sDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;2DACmB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselWidget-0RP-Rd1D.mjs","names":["getBorderRadiusField"],"sources":["../src/widgets/CarouselWidget.tsx"],"sourcesContent":["import DOMPurify from \"dompurify\";\nimport { Button } from \"@fluid-app/ui-primitives\";\nimport { ScrollArrows } from \"../ui/scroll-arrows\";\nimport type { ComponentProps } from \"react\";\nimport { useEffect, useState, useCallback } from \"react\";\nimport {\n MediaRenderer,\n getMediaPropsFromWidgetSchema,\n} from \"../components/MediaRenderer\";\nimport type {\n WidgetSchema,\n BorderRadiusOptions,\n ColorOptions,\n AlignOptions,\n FontSizeOptions,\n PaddingOptions,\n ButtonSizeOptions,\n} from \"@fluid-app/rep-core/types\";\nimport {\n getHeightField,\n type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport {\n getBorderRadiusField,\n getColorField,\n getFontSizeField,\n getPaddingField,\n getButtonSizeField,\n} from \"../core/fields\";\n\nconst DEFAULT_SLIDES: CarouselSlide[] = [];\n\ntype CarouselSlide = {\n id: string;\n content: WidgetSchema;\n title?: string;\n description?: string;\n buttonEnabled?: boolean;\n buttonText?: string;\n buttonVariant?:\n | \"default\"\n | \"secondary\"\n | \"outline\"\n | \"destructive\"\n | \"ghost\"\n | \"link\";\n buttonLink?: string;\n};\n\ntype CarouselWidgetProps = ComponentProps<\"div\"> & {\n slides?: CarouselSlide[];\n autoScrollInterval?: number;\n enableAutoScroll?: boolean;\n\n // Layout\n align?: AlignOptions;\n carouselHeight?: string;\n borderRadius?: BorderRadiusOptions;\n padding?: PaddingOptions;\n\n // Text Styling\n headerSize?: FontSizeOptions;\n headerColor?: ColorOptions;\n textSize?: FontSizeOptions;\n textColor?: ColorOptions;\n textWidth?: string;\n\n // Button\n showButton?: boolean;\n buttonColor?: ColorOptions;\n buttonSize?: ButtonSizeOptions;\n\n // Overlay\n overlayEnabled?: boolean;\n overlayType?: \"solid\" | \"gradient\";\n overlayIntensity?: number;\n};\n\nexport function CarouselWidget({\n slides = DEFAULT_SLIDES,\n autoScrollInterval = 3000,\n enableAutoScroll = false,\n carouselHeight = \"400px\",\n align = { vertical: \"bottom\", horizontal: \"left\" },\n overlayIntensity = 40,\n borderRadius = \"none\",\n padding = 0,\n textWidth = \"100%\",\n headerSize = \"lg\",\n headerColor = \"background\",\n textSize = \"md\",\n textColor = \"background\",\n showButton = true,\n buttonColor = \"background\",\n buttonSize = \"default\",\n overlayEnabled = true,\n overlayType = \"solid\",\n className,\n ...props\n}: CarouselWidgetProps) {\n const [currentIndex, setCurrentIndex] = useState(0);\n const [isHovered, setIsHovered] = useState(false);\n\n const hasSlides = slides.length > 0;\n const totalSlides = slides.length;\n\n const goToNext = useCallback(() => {\n if (!hasSlides) return;\n setCurrentIndex((prev) => {\n if (prev === totalSlides - 1) {\n return 0;\n }\n return prev + 1;\n });\n }, [hasSlides, totalSlides]);\n\n const goToPrevious = useCallback(() => {\n if (!hasSlides) return;\n setCurrentIndex((prev) => {\n if (prev === 0) {\n return totalSlides - 1;\n }\n return prev - 1;\n });\n }, [hasSlides, totalSlides]);\n\n const goToSlide = useCallback(\n (index: number) => {\n if (!hasSlides) return;\n if (index >= 0 && index < totalSlides) {\n setCurrentIndex(index);\n }\n },\n [hasSlides, totalSlides],\n );\n\n // Auto-scroll effect\n useEffect(() => {\n if (!enableAutoScroll || !hasSlides || isHovered) return;\n\n const intervalId = setInterval(() => {\n goToNext();\n }, autoScrollInterval);\n\n return () => clearInterval(intervalId);\n }, [enableAutoScroll, autoScrollInterval, hasSlides, isHovered, goToNext]);\n\n // Reset to first slide if slides change\n useEffect(() => {\n if (currentIndex >= totalSlides && totalSlides > 0) {\n setCurrentIndex(0);\n }\n }, [totalSlides, currentIndex]);\n\n if (!hasSlides) {\n return (\n <div\n className={`rounded-${borderRadius} ${className} w-full overflow-hidden`}\n style={{ minHeight: carouselHeight }}\n {...props}\n >\n <div\n className=\"bg-muted flex h-full w-full items-center justify-center\"\n style={{ minHeight: carouselHeight }}\n >\n <div className=\"text-muted-foreground flex flex-col items-center gap-2\">\n <div className=\"text-4xl\">🎠</div>\n <p className=\"text-sm\">No slides added</p>\n <p className=\"text-muted-foreground/70 text-xs\">\n Add slides to create a carousel\n </p>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={`relative w-full overflow-hidden rounded-${borderRadius} ${className}`}\n style={{ minHeight: carouselHeight }}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n {...props}\n >\n {/* Slides Container */}\n <div\n className=\"relative h-full w-full\"\n style={{ minHeight: carouselHeight }}\n >\n <div\n className=\"flex h-full transition-transform duration-500 ease-in-out\"\n style={{\n transform: `translateX(-${currentIndex * 100}%)`,\n }}\n >\n {slides.map((slide) => (\n <div\n key={slide.id}\n className=\"relative h-full w-full flex-shrink-0\"\n style={{ minWidth: \"100%\", minHeight: carouselHeight }}\n >\n {/* Background image/content layer */}\n <div className=\"absolute inset-0 h-full w-full\">\n <MediaRenderer\n {...getMediaPropsFromWidgetSchema(slide.content)}\n />\n </div>\n\n {/* Dark overlay for text readability */}\n {overlayEnabled && (\n <div\n className={`absolute inset-0 z-9 ${\n overlayType === \"gradient\"\n ? \"bg-gradient-to-t from-black to-transparent\"\n : \"bg-black\"\n }`}\n style={{\n opacity:\n (Number(String(overlayIntensity).replace(\"%\", \"\")) ||\n 40) / 100,\n }}\n />\n )}\n\n {/* Content box */}\n <div\n className={`absolute inset-x-0 z-10 flex px-3 ${\n align.horizontal === \"left\"\n ? \"justify-start\"\n : align.horizontal === \"center\"\n ? \"justify-center\"\n : \"justify-end\"\n } ${\n align.vertical === \"top\"\n ? \"top-0 pt-13\"\n : align.vertical === \"center\"\n ? \"top-1/2 -translate-y-1/2\"\n : \"bottom-0 pb-13\"\n }`}\n >\n <div\n className={`p-${padding} flex flex-col gap-3`}\n style={{ maxWidth: textWidth }}\n >\n {/* Heading and text */}\n <div className={`flex flex-col text-${align.horizontal}`}>\n {slide.title && (\n <h2\n className={`mb-2 leading-tight font-bold text-${headerColor} text-${headerSize === \"md\" ? \"base\" : headerSize}`}\n >\n {slide.title}\n </h2>\n )}\n {slide.description && (\n <div\n className={`leading-snug text-${textColor} text-${textSize === \"md\" ? \"base\" : textSize} line-clamp-2`}\n dangerouslySetInnerHTML={{\n __html: DOMPurify.sanitize(slide.description, {\n ALLOWED_TAGS: [\n \"br\",\n \"strong\",\n \"em\",\n \"b\",\n \"i\",\n \"ul\",\n \"ol\",\n \"li\",\n \"p\",\n ],\n ALLOWED_ATTR: [],\n }),\n }}\n />\n )}\n </div>\n\n {/* Button */}\n {slide.buttonText && slide.buttonEnabled && showButton && (\n <div className={`text-${align.horizontal}`}>\n <Button\n size={buttonSize}\n className={`rounded-md py-1 font-semibold bg-${buttonColor} text-${buttonColor}-foreground hover:bg-${buttonColor}/90`}\n asChild\n >\n <a href={slide.buttonLink}>{slide.buttonText}</a>\n </Button>\n </div>\n )}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n {/* Dots and Navigation */}\n {totalSlides > 1 && (\n <div\n className={`p-${padding} absolute bottom-0 z-10 flex w-full items-center justify-between ${align.horizontal === \"center\" ? \"h-full\" : \"\"}`}\n >\n {/* Pagination dots - always at bottom */}\n <div\n className={`flex items-center ${\n align.horizontal === \"center\"\n ? `p-${padding} absolute inset-x-0 bottom-3 justify-center`\n : \"\"\n }`}\n >\n <div\n className={`flex items-center gap-2 ${\n align.horizontal === \"center\" ? \"justify-center\" : \"\"\n }`}\n >\n {slides.map((_, index) => (\n <button\n key={`dot-${index}`}\n className={`h-[6px] w-[6px] rounded-full transition-colors ${\n index === currentIndex\n ? \"bg-background\"\n : \"bg-background/40 hover:bg-background/60\"\n }`}\n onClick={() => goToSlide(index)}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === currentIndex ? \"true\" : \"false\"}\n />\n ))}\n </div>\n </div>\n\n {/* Navigation arrows - position changes based on alignment */}\n <div\n className={`flex items-center gap-[10px] ${\n align.horizontal === \"center\"\n ? `absolute inset-x-0 top-1/2 justify-between px-${padding}`\n : \"\"\n }`}\n >\n <ScrollArrows onPrevious={goToPrevious} onNext={goToNext} />\n </div>\n </div>\n )}\n </div>\n );\n}\n\nexport const carouselWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"CarouselWidget\",\n displayName: \"Carousel\",\n tabsConfig: [\n { id: \"styling\", label: \"Styling\" },\n { id: \"behavior\", label: \"Behavior\" },\n { id: \"data\", label: \"Data\" },\n ],\n dataSourceTargetProps: [\"slides\"],\n fields: [\n // Styling tab - Text Styling group\n getFontSizeField({\n defaultValue: \"lg\",\n key: \"headerSize\",\n label: \"Header Font Size\",\n description: \"Font size for the slide header\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n getColorField({\n defaultValue: \"background\",\n key: \"headerColor\",\n label: \"Header Color\",\n description: \"Color variant for the slide header\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n {\n key: \"separator\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Text Styling\",\n },\n getFontSizeField({\n defaultValue: \"md\",\n key: \"textSize\",\n label: \"Text Font Size\",\n description: \"Font size for the slide text\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n getColorField({\n defaultValue: \"background\",\n key: \"textColor\",\n label: \"Text Color\",\n description: \"Color variant for the slide text\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n // Styling tab - Layout group\n {\n key: \"align\",\n label: \"Alignment\",\n type: \"alignment\",\n description: \"Alignment of the carousel content\",\n defaultValue: { vertical: \"bottom\", horizontal: \"left\" },\n options: {\n verticalEnabled: true,\n horizontalEnabled: true,\n },\n tab: \"styling\",\n group: \"Layout\",\n },\n {\n key: \"textWidth\",\n label: \"Content Width\",\n type: \"text\",\n description: \"Maximum width for slide content (e.g., 100%, 50%, 600px)\",\n defaultValue: \"100%\",\n tab: \"styling\",\n group: \"Layout\",\n },\n // Styling tab - Design group\n getHeightField({\n key: \"carouselHeight\",\n label: \"Carousel Height\",\n description: \"Height of the carousel\",\n min: 100,\n max: 1200,\n step: 10,\n defaultValue: \"400px\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"separator2\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Design\",\n },\n getBorderRadiusField({\n defaultValue: \"md\",\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Rounded corners for the carousel\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getPaddingField({\n defaultValue: 4,\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding for the carousel\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"overlayEnabled\",\n label: \"Enable Overlay\",\n type: \"boolean\",\n description: \"Add background overlay to slide content\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Design\",\n },\n {\n key: \"overlayType\",\n label: \"Overlay Type\",\n type: \"buttonGroup\",\n description: \"Type of overlay to add to the slide content\",\n defaultValue: \"gradient\",\n options: [\n { label: \"Solid\", value: \"solid\" },\n { label: \"Gradient\", value: \"gradient\" },\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 background (0-100)\",\n min: 0,\n max: 100,\n step: 5,\n defaultValue: 50,\n unit: \"%\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"overlayEnabled\",\n },\n {\n key: \"showButton\",\n label: \"Show Button\",\n type: \"boolean\",\n description: \"Display the button in slide content\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Design\",\n },\n getColorField({\n defaultValue: \"primary\",\n key: \"buttonColor\",\n label: \"Button Color\",\n description: \"Color variant for the slide button\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"showButton\",\n }),\n getButtonSizeField({\n defaultValue: \"default\",\n key: \"buttonSize\",\n label: \"Button Size\",\n description: \"Size of the slide button\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"showButton\",\n }),\n // Behavior tab - Auto-Scroll group\n {\n key: \"enableAutoScroll\",\n label: \"Enable Auto-Scroll\",\n type: \"boolean\",\n description: \"Automatically advance to the next slide\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Auto-Scroll\",\n },\n {\n key: \"autoScrollInterval\",\n label: \"Auto-Scroll Interval (ms)\",\n type: \"number\",\n description: \"Time in milliseconds between automatic slide transitions\",\n min: 1000,\n max: 10000,\n step: 500,\n defaultValue: 3000,\n tab: \"behavior\",\n group: \"Auto-Scroll\",\n requiresKeyToBeTrue: \"enableAutoScroll\",\n },\n // Data tab - Data Configuration group\n {\n key: \"dataSource\",\n label: \"Data Source\",\n type: \"dataSource\",\n description: \"\",\n tab: \"data\",\n group: \"Data Configuration\",\n },\n ],\n // Per-item configuration schema for custom data sources\n itemConfigSchema: {\n description: \"Configure settings for this slide\",\n fields: [\n {\n key: \"title\",\n label: \"Custom Title\",\n type: \"text\",\n description: \"Override the item's title for this slide\",\n },\n {\n key: \"description\",\n label: \"Custom Description\",\n type: \"textarea\",\n description: \"Override the item's description for this slide\",\n rows: 3,\n },\n {\n key: \"buttonEnabled\",\n label: \"Show Button\",\n type: \"boolean\",\n description: \"Show the button in the slide\",\n defaultValue: false,\n },\n {\n key: \"buttonText\",\n label: \"Button Text\",\n type: \"text\",\n description: \"Text to display on the slide button\",\n requiresKeyToBeTrue: \"buttonEnabled\",\n },\n {\n key: \"buttonLink\",\n label: \"Button Link\",\n type: \"text\",\n description: \"URL for the slide button\",\n requiresKeyToBeTrue: \"buttonEnabled\",\n },\n ],\n },\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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EACF,cAAc;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD,iBAAiB;GACf,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF,cAAc;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EAEF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;IAAE,UAAU;IAAU,YAAY;IAAQ;GACxD,SAAS;IACP,iBAAiB;IACjB,mBAAmB;IACpB;GACD,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EAED,eAAe;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACDA,uBAAqB;GACnB,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF,gBAAgB;GACd,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;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,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAY,OAAO;IAAY,CACzC;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,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD,cAAc;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EACF,mBAAmB;GACjB,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAEF;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,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAED;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CAED,kBAAkB;EAChB,aAAa;EACb,QAAQ;GACN;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACd;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,MAAM;IACP;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,cAAc;IACf;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,qBAAqB;IACtB;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,qBAAqB;IACtB;GACF;EACF;CACF"}
|
|
1
|
+
{"version":3,"file":"CarouselWidget-0RP-Rd1D.mjs","names":["getBorderRadiusField"],"sources":["../src/widgets/CarouselWidget.tsx"],"sourcesContent":["import DOMPurify from \"dompurify\";\nimport { Button } from \"@fluid-app/ui-primitives\";\nimport { ScrollArrows } from \"../ui/scroll-arrows\";\nimport type { ComponentProps } from \"react\";\nimport { useEffect, useState, useCallback } from \"react\";\nimport type React from \"react\";\nimport {\n MediaRenderer,\n getMediaPropsFromWidgetSchema,\n} from \"../components/MediaRenderer\";\nimport type {\n WidgetSchema,\n BorderRadiusOptions,\n ColorOptions,\n AlignOptions,\n FontSizeOptions,\n PaddingOptions,\n ButtonSizeOptions,\n} from \"@fluid-app/rep-core/types\";\nimport {\n getHeightField,\n type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport {\n getBorderRadiusField,\n getColorField,\n getFontSizeField,\n getPaddingField,\n getButtonSizeField,\n} from \"../core/fields\";\n\nconst DEFAULT_SLIDES: CarouselSlide[] = [];\n\ntype CarouselSlide = {\n id: string;\n content: WidgetSchema;\n title?: string;\n description?: string;\n buttonEnabled?: boolean;\n buttonText?: string;\n buttonVariant?:\n | \"default\"\n | \"secondary\"\n | \"outline\"\n | \"destructive\"\n | \"ghost\"\n | \"link\";\n buttonLink?: string;\n};\n\ntype CarouselWidgetProps = ComponentProps<\"div\"> & {\n slides?: CarouselSlide[];\n autoScrollInterval?: number;\n enableAutoScroll?: boolean;\n\n // Layout\n align?: AlignOptions;\n carouselHeight?: string;\n borderRadius?: BorderRadiusOptions;\n padding?: PaddingOptions;\n\n // Text Styling\n headerSize?: FontSizeOptions;\n headerColor?: ColorOptions;\n textSize?: FontSizeOptions;\n textColor?: ColorOptions;\n textWidth?: string;\n\n // Button\n showButton?: boolean;\n buttonColor?: ColorOptions;\n buttonSize?: ButtonSizeOptions;\n\n // Overlay\n overlayEnabled?: boolean;\n overlayType?: \"solid\" | \"gradient\";\n overlayIntensity?: number;\n};\n\nexport function CarouselWidget({\n slides = DEFAULT_SLIDES,\n autoScrollInterval = 3000,\n enableAutoScroll = false,\n carouselHeight = \"400px\",\n align = { vertical: \"bottom\", horizontal: \"left\" },\n overlayIntensity = 40,\n borderRadius = \"none\",\n padding = 0,\n textWidth = \"100%\",\n headerSize = \"lg\",\n headerColor = \"background\",\n textSize = \"md\",\n textColor = \"background\",\n showButton = true,\n buttonColor = \"background\",\n buttonSize = \"default\",\n overlayEnabled = true,\n overlayType = \"solid\",\n className,\n ...props\n}: CarouselWidgetProps): React.JSX.Element {\n const [currentIndex, setCurrentIndex] = useState(0);\n const [isHovered, setIsHovered] = useState(false);\n\n const hasSlides = slides.length > 0;\n const totalSlides = slides.length;\n\n const goToNext = useCallback(() => {\n if (!hasSlides) return;\n setCurrentIndex((prev) => {\n if (prev === totalSlides - 1) {\n return 0;\n }\n return prev + 1;\n });\n }, [hasSlides, totalSlides]);\n\n const goToPrevious = useCallback(() => {\n if (!hasSlides) return;\n setCurrentIndex((prev) => {\n if (prev === 0) {\n return totalSlides - 1;\n }\n return prev - 1;\n });\n }, [hasSlides, totalSlides]);\n\n const goToSlide = useCallback(\n (index: number) => {\n if (!hasSlides) return;\n if (index >= 0 && index < totalSlides) {\n setCurrentIndex(index);\n }\n },\n [hasSlides, totalSlides],\n );\n\n // Auto-scroll effect\n useEffect(() => {\n if (!enableAutoScroll || !hasSlides || isHovered) return;\n\n const intervalId = setInterval(() => {\n goToNext();\n }, autoScrollInterval);\n\n return () => clearInterval(intervalId);\n }, [enableAutoScroll, autoScrollInterval, hasSlides, isHovered, goToNext]);\n\n // Reset to first slide if slides change\n useEffect(() => {\n if (currentIndex >= totalSlides && totalSlides > 0) {\n setCurrentIndex(0);\n }\n }, [totalSlides, currentIndex]);\n\n if (!hasSlides) {\n return (\n <div\n className={`rounded-${borderRadius} ${className} w-full overflow-hidden`}\n style={{ minHeight: carouselHeight }}\n {...props}\n >\n <div\n className=\"bg-muted flex h-full w-full items-center justify-center\"\n style={{ minHeight: carouselHeight }}\n >\n <div className=\"text-muted-foreground flex flex-col items-center gap-2\">\n <div className=\"text-4xl\">🎠</div>\n <p className=\"text-sm\">No slides added</p>\n <p className=\"text-muted-foreground/70 text-xs\">\n Add slides to create a carousel\n </p>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={`relative w-full overflow-hidden rounded-${borderRadius} ${className}`}\n style={{ minHeight: carouselHeight }}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n {...props}\n >\n {/* Slides Container */}\n <div\n className=\"relative h-full w-full\"\n style={{ minHeight: carouselHeight }}\n >\n <div\n className=\"flex h-full transition-transform duration-500 ease-in-out\"\n style={{\n transform: `translateX(-${currentIndex * 100}%)`,\n }}\n >\n {slides.map((slide) => (\n <div\n key={slide.id}\n className=\"relative h-full w-full flex-shrink-0\"\n style={{ minWidth: \"100%\", minHeight: carouselHeight }}\n >\n {/* Background image/content layer */}\n <div className=\"absolute inset-0 h-full w-full\">\n <MediaRenderer\n {...getMediaPropsFromWidgetSchema(slide.content)}\n />\n </div>\n\n {/* Dark overlay for text readability */}\n {overlayEnabled && (\n <div\n className={`absolute inset-0 z-9 ${\n overlayType === \"gradient\"\n ? \"bg-gradient-to-t from-black to-transparent\"\n : \"bg-black\"\n }`}\n style={{\n opacity:\n (Number(String(overlayIntensity).replace(\"%\", \"\")) ||\n 40) / 100,\n }}\n />\n )}\n\n {/* Content box */}\n <div\n className={`absolute inset-x-0 z-10 flex px-3 ${\n align.horizontal === \"left\"\n ? \"justify-start\"\n : align.horizontal === \"center\"\n ? \"justify-center\"\n : \"justify-end\"\n } ${\n align.vertical === \"top\"\n ? \"top-0 pt-13\"\n : align.vertical === \"center\"\n ? \"top-1/2 -translate-y-1/2\"\n : \"bottom-0 pb-13\"\n }`}\n >\n <div\n className={`p-${padding} flex flex-col gap-3`}\n style={{ maxWidth: textWidth }}\n >\n {/* Heading and text */}\n <div className={`flex flex-col text-${align.horizontal}`}>\n {slide.title && (\n <h2\n className={`mb-2 leading-tight font-bold text-${headerColor} text-${headerSize === \"md\" ? \"base\" : headerSize}`}\n >\n {slide.title}\n </h2>\n )}\n {slide.description && (\n <div\n className={`leading-snug text-${textColor} text-${textSize === \"md\" ? \"base\" : textSize} line-clamp-2`}\n dangerouslySetInnerHTML={{\n __html: DOMPurify.sanitize(slide.description, {\n ALLOWED_TAGS: [\n \"br\",\n \"strong\",\n \"em\",\n \"b\",\n \"i\",\n \"ul\",\n \"ol\",\n \"li\",\n \"p\",\n ],\n ALLOWED_ATTR: [],\n }),\n }}\n />\n )}\n </div>\n\n {/* Button */}\n {slide.buttonText && slide.buttonEnabled && showButton && (\n <div className={`text-${align.horizontal}`}>\n <Button\n size={buttonSize}\n className={`rounded-md py-1 font-semibold bg-${buttonColor} text-${buttonColor}-foreground hover:bg-${buttonColor}/90`}\n asChild\n >\n <a href={slide.buttonLink}>{slide.buttonText}</a>\n </Button>\n </div>\n )}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n {/* Dots and Navigation */}\n {totalSlides > 1 && (\n <div\n className={`p-${padding} absolute bottom-0 z-10 flex w-full items-center justify-between ${align.horizontal === \"center\" ? \"h-full\" : \"\"}`}\n >\n {/* Pagination dots - always at bottom */}\n <div\n className={`flex items-center ${\n align.horizontal === \"center\"\n ? `p-${padding} absolute inset-x-0 bottom-3 justify-center`\n : \"\"\n }`}\n >\n <div\n className={`flex items-center gap-2 ${\n align.horizontal === \"center\" ? \"justify-center\" : \"\"\n }`}\n >\n {slides.map((_, index) => (\n <button\n key={`dot-${index}`}\n className={`h-[6px] w-[6px] rounded-full transition-colors ${\n index === currentIndex\n ? \"bg-background\"\n : \"bg-background/40 hover:bg-background/60\"\n }`}\n onClick={() => goToSlide(index)}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === currentIndex ? \"true\" : \"false\"}\n />\n ))}\n </div>\n </div>\n\n {/* Navigation arrows - position changes based on alignment */}\n <div\n className={`flex items-center gap-[10px] ${\n align.horizontal === \"center\"\n ? `absolute inset-x-0 top-1/2 justify-between px-${padding}`\n : \"\"\n }`}\n >\n <ScrollArrows onPrevious={goToPrevious} onNext={goToNext} />\n </div>\n </div>\n )}\n </div>\n );\n}\n\nexport const carouselWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"CarouselWidget\",\n displayName: \"Carousel\",\n tabsConfig: [\n { id: \"styling\", label: \"Styling\" },\n { id: \"behavior\", label: \"Behavior\" },\n { id: \"data\", label: \"Data\" },\n ],\n dataSourceTargetProps: [\"slides\"],\n fields: [\n // Styling tab - Text Styling group\n getFontSizeField({\n defaultValue: \"lg\",\n key: \"headerSize\",\n label: \"Header Font Size\",\n description: \"Font size for the slide header\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n getColorField({\n defaultValue: \"background\",\n key: \"headerColor\",\n label: \"Header Color\",\n description: \"Color variant for the slide header\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n {\n key: \"separator\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Text Styling\",\n },\n getFontSizeField({\n defaultValue: \"md\",\n key: \"textSize\",\n label: \"Text Font Size\",\n description: \"Font size for the slide text\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n getColorField({\n defaultValue: \"background\",\n key: \"textColor\",\n label: \"Text Color\",\n description: \"Color variant for the slide text\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n // Styling tab - Layout group\n {\n key: \"align\",\n label: \"Alignment\",\n type: \"alignment\",\n description: \"Alignment of the carousel content\",\n defaultValue: { vertical: \"bottom\", horizontal: \"left\" },\n options: {\n verticalEnabled: true,\n horizontalEnabled: true,\n },\n tab: \"styling\",\n group: \"Layout\",\n },\n {\n key: \"textWidth\",\n label: \"Content Width\",\n type: \"text\",\n description: \"Maximum width for slide content (e.g., 100%, 50%, 600px)\",\n defaultValue: \"100%\",\n tab: \"styling\",\n group: \"Layout\",\n },\n // Styling tab - Design group\n getHeightField({\n key: \"carouselHeight\",\n label: \"Carousel Height\",\n description: \"Height of the carousel\",\n min: 100,\n max: 1200,\n step: 10,\n defaultValue: \"400px\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"separator2\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Design\",\n },\n getBorderRadiusField({\n defaultValue: \"md\",\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Rounded corners for the carousel\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getPaddingField({\n defaultValue: 4,\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding for the carousel\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"overlayEnabled\",\n label: \"Enable Overlay\",\n type: \"boolean\",\n description: \"Add background overlay to slide content\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Design\",\n },\n {\n key: \"overlayType\",\n label: \"Overlay Type\",\n type: \"buttonGroup\",\n description: \"Type of overlay to add to the slide content\",\n defaultValue: \"gradient\",\n options: [\n { label: \"Solid\", value: \"solid\" },\n { label: \"Gradient\", value: \"gradient\" },\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 background (0-100)\",\n min: 0,\n max: 100,\n step: 5,\n defaultValue: 50,\n unit: \"%\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"overlayEnabled\",\n },\n {\n key: \"showButton\",\n label: \"Show Button\",\n type: \"boolean\",\n description: \"Display the button in slide content\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Design\",\n },\n getColorField({\n defaultValue: \"primary\",\n key: \"buttonColor\",\n label: \"Button Color\",\n description: \"Color variant for the slide button\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"showButton\",\n }),\n getButtonSizeField({\n defaultValue: \"default\",\n key: \"buttonSize\",\n label: \"Button Size\",\n description: \"Size of the slide button\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"showButton\",\n }),\n // Behavior tab - Auto-Scroll group\n {\n key: \"enableAutoScroll\",\n label: \"Enable Auto-Scroll\",\n type: \"boolean\",\n description: \"Automatically advance to the next slide\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Auto-Scroll\",\n },\n {\n key: \"autoScrollInterval\",\n label: \"Auto-Scroll Interval (ms)\",\n type: \"number\",\n description: \"Time in milliseconds between automatic slide transitions\",\n min: 1000,\n max: 10000,\n step: 500,\n defaultValue: 3000,\n tab: \"behavior\",\n group: \"Auto-Scroll\",\n requiresKeyToBeTrue: \"enableAutoScroll\",\n },\n // Data tab - Data Configuration group\n {\n key: \"dataSource\",\n label: \"Data Source\",\n type: \"dataSource\",\n description: \"\",\n tab: \"data\",\n group: \"Data Configuration\",\n },\n ],\n // Per-item configuration schema for custom data sources\n itemConfigSchema: {\n description: \"Configure settings for this slide\",\n fields: [\n {\n key: \"title\",\n label: \"Custom Title\",\n type: \"text\",\n description: \"Override the item's title for this slide\",\n },\n {\n key: \"description\",\n label: \"Custom Description\",\n type: \"textarea\",\n description: \"Override the item's description for this slide\",\n rows: 3,\n },\n {\n key: \"buttonEnabled\",\n label: \"Show Button\",\n type: \"boolean\",\n description: \"Show the button in the slide\",\n defaultValue: false,\n },\n {\n key: \"buttonText\",\n label: \"Button Text\",\n type: \"text\",\n description: \"Text to display on the slide button\",\n requiresKeyToBeTrue: \"buttonEnabled\",\n },\n {\n key: \"buttonLink\",\n label: \"Button Link\",\n type: \"text\",\n description: \"URL for the slide button\",\n requiresKeyToBeTrue: \"buttonEnabled\",\n },\n ],\n },\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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EACF,cAAc;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD,iBAAiB;GACf,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF,cAAc;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EAEF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;IAAE,UAAU;IAAU,YAAY;IAAQ;GACxD,SAAS;IACP,iBAAiB;IACjB,mBAAmB;IACpB;GACD,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EAED,eAAe;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACDA,uBAAqB;GACnB,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF,gBAAgB;GACd,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;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,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAY,OAAO;IAAY,CACzC;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,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD,cAAc;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EACF,mBAAmB;GACjB,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAEF;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,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAED;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CAED,kBAAkB;EAChB,aAAa;EACb,QAAQ;GACN;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACd;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,MAAM;IACP;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,cAAc;IACf;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,qBAAqB;IACtB;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,qBAAqB;IACtB;GACF;EACF;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CarouselWidget-DLADgLPJ.cjs","names":["MediaRenderer","getMediaPropsFromWidgetSchema","DOMPurify","Button","ScrollArrows"],"sources":["../src/widgets/CarouselWidget.tsx"],"sourcesContent":["import DOMPurify from \"dompurify\";\nimport { Button } from \"@fluid-app/ui-primitives\";\nimport { ScrollArrows } from \"../ui/scroll-arrows\";\nimport type { ComponentProps } from \"react\";\nimport { useEffect, useState, useCallback } from \"react\";\nimport {\n MediaRenderer,\n getMediaPropsFromWidgetSchema,\n} from \"../components/MediaRenderer\";\nimport type {\n WidgetSchema,\n BorderRadiusOptions,\n ColorOptions,\n AlignOptions,\n FontSizeOptions,\n PaddingOptions,\n ButtonSizeOptions,\n} from \"@fluid-app/rep-core/types\";\nimport {\n getHeightField,\n type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport {\n getBorderRadiusField,\n getColorField,\n getFontSizeField,\n getPaddingField,\n getButtonSizeField,\n} from \"../core/fields\";\n\nconst DEFAULT_SLIDES: CarouselSlide[] = [];\n\ntype CarouselSlide = {\n id: string;\n content: WidgetSchema;\n title?: string;\n description?: string;\n buttonEnabled?: boolean;\n buttonText?: string;\n buttonVariant?:\n | \"default\"\n | \"secondary\"\n | \"outline\"\n | \"destructive\"\n | \"ghost\"\n | \"link\";\n buttonLink?: string;\n};\n\ntype CarouselWidgetProps = ComponentProps<\"div\"> & {\n slides?: CarouselSlide[];\n autoScrollInterval?: number;\n enableAutoScroll?: boolean;\n\n // Layout\n align?: AlignOptions;\n carouselHeight?: string;\n borderRadius?: BorderRadiusOptions;\n padding?: PaddingOptions;\n\n // Text Styling\n headerSize?: FontSizeOptions;\n headerColor?: ColorOptions;\n textSize?: FontSizeOptions;\n textColor?: ColorOptions;\n textWidth?: string;\n\n // Button\n showButton?: boolean;\n buttonColor?: ColorOptions;\n buttonSize?: ButtonSizeOptions;\n\n // Overlay\n overlayEnabled?: boolean;\n overlayType?: \"solid\" | \"gradient\";\n overlayIntensity?: number;\n};\n\nexport function CarouselWidget({\n slides = DEFAULT_SLIDES,\n autoScrollInterval = 3000,\n enableAutoScroll = false,\n carouselHeight = \"400px\",\n align = { vertical: \"bottom\", horizontal: \"left\" },\n overlayIntensity = 40,\n borderRadius = \"none\",\n padding = 0,\n textWidth = \"100%\",\n headerSize = \"lg\",\n headerColor = \"background\",\n textSize = \"md\",\n textColor = \"background\",\n showButton = true,\n buttonColor = \"background\",\n buttonSize = \"default\",\n overlayEnabled = true,\n overlayType = \"solid\",\n className,\n ...props\n}: CarouselWidgetProps) {\n const [currentIndex, setCurrentIndex] = useState(0);\n const [isHovered, setIsHovered] = useState(false);\n\n const hasSlides = slides.length > 0;\n const totalSlides = slides.length;\n\n const goToNext = useCallback(() => {\n if (!hasSlides) return;\n setCurrentIndex((prev) => {\n if (prev === totalSlides - 1) {\n return 0;\n }\n return prev + 1;\n });\n }, [hasSlides, totalSlides]);\n\n const goToPrevious = useCallback(() => {\n if (!hasSlides) return;\n setCurrentIndex((prev) => {\n if (prev === 0) {\n return totalSlides - 1;\n }\n return prev - 1;\n });\n }, [hasSlides, totalSlides]);\n\n const goToSlide = useCallback(\n (index: number) => {\n if (!hasSlides) return;\n if (index >= 0 && index < totalSlides) {\n setCurrentIndex(index);\n }\n },\n [hasSlides, totalSlides],\n );\n\n // Auto-scroll effect\n useEffect(() => {\n if (!enableAutoScroll || !hasSlides || isHovered) return;\n\n const intervalId = setInterval(() => {\n goToNext();\n }, autoScrollInterval);\n\n return () => clearInterval(intervalId);\n }, [enableAutoScroll, autoScrollInterval, hasSlides, isHovered, goToNext]);\n\n // Reset to first slide if slides change\n useEffect(() => {\n if (currentIndex >= totalSlides && totalSlides > 0) {\n setCurrentIndex(0);\n }\n }, [totalSlides, currentIndex]);\n\n if (!hasSlides) {\n return (\n <div\n className={`rounded-${borderRadius} ${className} w-full overflow-hidden`}\n style={{ minHeight: carouselHeight }}\n {...props}\n >\n <div\n className=\"bg-muted flex h-full w-full items-center justify-center\"\n style={{ minHeight: carouselHeight }}\n >\n <div className=\"text-muted-foreground flex flex-col items-center gap-2\">\n <div className=\"text-4xl\">🎠</div>\n <p className=\"text-sm\">No slides added</p>\n <p className=\"text-muted-foreground/70 text-xs\">\n Add slides to create a carousel\n </p>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={`relative w-full overflow-hidden rounded-${borderRadius} ${className}`}\n style={{ minHeight: carouselHeight }}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n {...props}\n >\n {/* Slides Container */}\n <div\n className=\"relative h-full w-full\"\n style={{ minHeight: carouselHeight }}\n >\n <div\n className=\"flex h-full transition-transform duration-500 ease-in-out\"\n style={{\n transform: `translateX(-${currentIndex * 100}%)`,\n }}\n >\n {slides.map((slide) => (\n <div\n key={slide.id}\n className=\"relative h-full w-full flex-shrink-0\"\n style={{ minWidth: \"100%\", minHeight: carouselHeight }}\n >\n {/* Background image/content layer */}\n <div className=\"absolute inset-0 h-full w-full\">\n <MediaRenderer\n {...getMediaPropsFromWidgetSchema(slide.content)}\n />\n </div>\n\n {/* Dark overlay for text readability */}\n {overlayEnabled && (\n <div\n className={`absolute inset-0 z-9 ${\n overlayType === \"gradient\"\n ? \"bg-gradient-to-t from-black to-transparent\"\n : \"bg-black\"\n }`}\n style={{\n opacity:\n (Number(String(overlayIntensity).replace(\"%\", \"\")) ||\n 40) / 100,\n }}\n />\n )}\n\n {/* Content box */}\n <div\n className={`absolute inset-x-0 z-10 flex px-3 ${\n align.horizontal === \"left\"\n ? \"justify-start\"\n : align.horizontal === \"center\"\n ? \"justify-center\"\n : \"justify-end\"\n } ${\n align.vertical === \"top\"\n ? \"top-0 pt-13\"\n : align.vertical === \"center\"\n ? \"top-1/2 -translate-y-1/2\"\n : \"bottom-0 pb-13\"\n }`}\n >\n <div\n className={`p-${padding} flex flex-col gap-3`}\n style={{ maxWidth: textWidth }}\n >\n {/* Heading and text */}\n <div className={`flex flex-col text-${align.horizontal}`}>\n {slide.title && (\n <h2\n className={`mb-2 leading-tight font-bold text-${headerColor} text-${headerSize === \"md\" ? \"base\" : headerSize}`}\n >\n {slide.title}\n </h2>\n )}\n {slide.description && (\n <div\n className={`leading-snug text-${textColor} text-${textSize === \"md\" ? \"base\" : textSize} line-clamp-2`}\n dangerouslySetInnerHTML={{\n __html: DOMPurify.sanitize(slide.description, {\n ALLOWED_TAGS: [\n \"br\",\n \"strong\",\n \"em\",\n \"b\",\n \"i\",\n \"ul\",\n \"ol\",\n \"li\",\n \"p\",\n ],\n ALLOWED_ATTR: [],\n }),\n }}\n />\n )}\n </div>\n\n {/* Button */}\n {slide.buttonText && slide.buttonEnabled && showButton && (\n <div className={`text-${align.horizontal}`}>\n <Button\n size={buttonSize}\n className={`rounded-md py-1 font-semibold bg-${buttonColor} text-${buttonColor}-foreground hover:bg-${buttonColor}/90`}\n asChild\n >\n <a href={slide.buttonLink}>{slide.buttonText}</a>\n </Button>\n </div>\n )}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n {/* Dots and Navigation */}\n {totalSlides > 1 && (\n <div\n className={`p-${padding} absolute bottom-0 z-10 flex w-full items-center justify-between ${align.horizontal === \"center\" ? \"h-full\" : \"\"}`}\n >\n {/* Pagination dots - always at bottom */}\n <div\n className={`flex items-center ${\n align.horizontal === \"center\"\n ? `p-${padding} absolute inset-x-0 bottom-3 justify-center`\n : \"\"\n }`}\n >\n <div\n className={`flex items-center gap-2 ${\n align.horizontal === \"center\" ? \"justify-center\" : \"\"\n }`}\n >\n {slides.map((_, index) => (\n <button\n key={`dot-${index}`}\n className={`h-[6px] w-[6px] rounded-full transition-colors ${\n index === currentIndex\n ? \"bg-background\"\n : \"bg-background/40 hover:bg-background/60\"\n }`}\n onClick={() => goToSlide(index)}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === currentIndex ? \"true\" : \"false\"}\n />\n ))}\n </div>\n </div>\n\n {/* Navigation arrows - position changes based on alignment */}\n <div\n className={`flex items-center gap-[10px] ${\n align.horizontal === \"center\"\n ? `absolute inset-x-0 top-1/2 justify-between px-${padding}`\n : \"\"\n }`}\n >\n <ScrollArrows onPrevious={goToPrevious} onNext={goToNext} />\n </div>\n </div>\n )}\n </div>\n );\n}\n\nexport const carouselWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"CarouselWidget\",\n displayName: \"Carousel\",\n tabsConfig: [\n { id: \"styling\", label: \"Styling\" },\n { id: \"behavior\", label: \"Behavior\" },\n { id: \"data\", label: \"Data\" },\n ],\n dataSourceTargetProps: [\"slides\"],\n fields: [\n // Styling tab - Text Styling group\n getFontSizeField({\n defaultValue: \"lg\",\n key: \"headerSize\",\n label: \"Header Font Size\",\n description: \"Font size for the slide header\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n getColorField({\n defaultValue: \"background\",\n key: \"headerColor\",\n label: \"Header Color\",\n description: \"Color variant for the slide header\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n {\n key: \"separator\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Text Styling\",\n },\n getFontSizeField({\n defaultValue: \"md\",\n key: \"textSize\",\n label: \"Text Font Size\",\n description: \"Font size for the slide text\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n getColorField({\n defaultValue: \"background\",\n key: \"textColor\",\n label: \"Text Color\",\n description: \"Color variant for the slide text\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n // Styling tab - Layout group\n {\n key: \"align\",\n label: \"Alignment\",\n type: \"alignment\",\n description: \"Alignment of the carousel content\",\n defaultValue: { vertical: \"bottom\", horizontal: \"left\" },\n options: {\n verticalEnabled: true,\n horizontalEnabled: true,\n },\n tab: \"styling\",\n group: \"Layout\",\n },\n {\n key: \"textWidth\",\n label: \"Content Width\",\n type: \"text\",\n description: \"Maximum width for slide content (e.g., 100%, 50%, 600px)\",\n defaultValue: \"100%\",\n tab: \"styling\",\n group: \"Layout\",\n },\n // Styling tab - Design group\n getHeightField({\n key: \"carouselHeight\",\n label: \"Carousel Height\",\n description: \"Height of the carousel\",\n min: 100,\n max: 1200,\n step: 10,\n defaultValue: \"400px\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"separator2\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Design\",\n },\n getBorderRadiusField({\n defaultValue: \"md\",\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Rounded corners for the carousel\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getPaddingField({\n defaultValue: 4,\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding for the carousel\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"overlayEnabled\",\n label: \"Enable Overlay\",\n type: \"boolean\",\n description: \"Add background overlay to slide content\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Design\",\n },\n {\n key: \"overlayType\",\n label: \"Overlay Type\",\n type: \"buttonGroup\",\n description: \"Type of overlay to add to the slide content\",\n defaultValue: \"gradient\",\n options: [\n { label: \"Solid\", value: \"solid\" },\n { label: \"Gradient\", value: \"gradient\" },\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 background (0-100)\",\n min: 0,\n max: 100,\n step: 5,\n defaultValue: 50,\n unit: \"%\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"overlayEnabled\",\n },\n {\n key: \"showButton\",\n label: \"Show Button\",\n type: \"boolean\",\n description: \"Display the button in slide content\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Design\",\n },\n getColorField({\n defaultValue: \"primary\",\n key: \"buttonColor\",\n label: \"Button Color\",\n description: \"Color variant for the slide button\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"showButton\",\n }),\n getButtonSizeField({\n defaultValue: \"default\",\n key: \"buttonSize\",\n label: \"Button Size\",\n description: \"Size of the slide button\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"showButton\",\n }),\n // Behavior tab - Auto-Scroll group\n {\n key: \"enableAutoScroll\",\n label: \"Enable Auto-Scroll\",\n type: \"boolean\",\n description: \"Automatically advance to the next slide\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Auto-Scroll\",\n },\n {\n key: \"autoScrollInterval\",\n label: \"Auto-Scroll Interval (ms)\",\n type: \"number\",\n description: \"Time in milliseconds between automatic slide transitions\",\n min: 1000,\n max: 10000,\n step: 500,\n defaultValue: 3000,\n tab: \"behavior\",\n group: \"Auto-Scroll\",\n requiresKeyToBeTrue: \"enableAutoScroll\",\n },\n // Data tab - Data Configuration group\n {\n key: \"dataSource\",\n label: \"Data Source\",\n type: \"dataSource\",\n description: \"\",\n tab: \"data\",\n group: \"Data Configuration\",\n },\n ],\n // Per-item configuration schema for custom data sources\n itemConfigSchema: {\n description: \"Configure settings for this slide\",\n fields: [\n {\n key: \"title\",\n label: \"Custom Title\",\n type: \"text\",\n description: \"Override the item's title for this slide\",\n },\n {\n key: \"description\",\n label: \"Custom Description\",\n type: \"textarea\",\n description: \"Override the item's description for this slide\",\n rows: 3,\n },\n {\n key: \"buttonEnabled\",\n label: \"Show Button\",\n type: \"boolean\",\n description: \"Show the button in the slide\",\n defaultValue: false,\n },\n {\n key: \"buttonText\",\n label: \"Button Text\",\n type: \"text\",\n description: \"Text to display on the slide button\",\n requiresKeyToBeTrue: \"buttonEnabled\",\n },\n {\n key: \"buttonLink\",\n label: \"Button Link\",\n type: \"text\",\n description: \"URL for the slide button\",\n requiresKeyToBeTrue: \"buttonEnabled\",\n },\n ],\n },\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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AO;GACP,KAAK;GACL,OAAO;GACR;2DACoB;GACnB,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;sDACc;GACd,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;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,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAY,OAAO;IAAY,CACzC;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,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;oDACa;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;yDACiB;GACjB,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAEF;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,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAED;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CAED,kBAAkB;EAChB,aAAa;EACb,QAAQ;GACN;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACd;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,MAAM;IACP;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,cAAc;IACf;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,qBAAqB;IACtB;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,qBAAqB;IACtB;GACF;EACF;CACF"}
|
|
1
|
+
{"version":3,"file":"CarouselWidget-DLADgLPJ.cjs","names":["MediaRenderer","getMediaPropsFromWidgetSchema","DOMPurify","Button","ScrollArrows"],"sources":["../src/widgets/CarouselWidget.tsx"],"sourcesContent":["import DOMPurify from \"dompurify\";\nimport { Button } from \"@fluid-app/ui-primitives\";\nimport { ScrollArrows } from \"../ui/scroll-arrows\";\nimport type { ComponentProps } from \"react\";\nimport { useEffect, useState, useCallback } from \"react\";\nimport type React from \"react\";\nimport {\n MediaRenderer,\n getMediaPropsFromWidgetSchema,\n} from \"../components/MediaRenderer\";\nimport type {\n WidgetSchema,\n BorderRadiusOptions,\n ColorOptions,\n AlignOptions,\n FontSizeOptions,\n PaddingOptions,\n ButtonSizeOptions,\n} from \"@fluid-app/rep-core/types\";\nimport {\n getHeightField,\n type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport {\n getBorderRadiusField,\n getColorField,\n getFontSizeField,\n getPaddingField,\n getButtonSizeField,\n} from \"../core/fields\";\n\nconst DEFAULT_SLIDES: CarouselSlide[] = [];\n\ntype CarouselSlide = {\n id: string;\n content: WidgetSchema;\n title?: string;\n description?: string;\n buttonEnabled?: boolean;\n buttonText?: string;\n buttonVariant?:\n | \"default\"\n | \"secondary\"\n | \"outline\"\n | \"destructive\"\n | \"ghost\"\n | \"link\";\n buttonLink?: string;\n};\n\ntype CarouselWidgetProps = ComponentProps<\"div\"> & {\n slides?: CarouselSlide[];\n autoScrollInterval?: number;\n enableAutoScroll?: boolean;\n\n // Layout\n align?: AlignOptions;\n carouselHeight?: string;\n borderRadius?: BorderRadiusOptions;\n padding?: PaddingOptions;\n\n // Text Styling\n headerSize?: FontSizeOptions;\n headerColor?: ColorOptions;\n textSize?: FontSizeOptions;\n textColor?: ColorOptions;\n textWidth?: string;\n\n // Button\n showButton?: boolean;\n buttonColor?: ColorOptions;\n buttonSize?: ButtonSizeOptions;\n\n // Overlay\n overlayEnabled?: boolean;\n overlayType?: \"solid\" | \"gradient\";\n overlayIntensity?: number;\n};\n\nexport function CarouselWidget({\n slides = DEFAULT_SLIDES,\n autoScrollInterval = 3000,\n enableAutoScroll = false,\n carouselHeight = \"400px\",\n align = { vertical: \"bottom\", horizontal: \"left\" },\n overlayIntensity = 40,\n borderRadius = \"none\",\n padding = 0,\n textWidth = \"100%\",\n headerSize = \"lg\",\n headerColor = \"background\",\n textSize = \"md\",\n textColor = \"background\",\n showButton = true,\n buttonColor = \"background\",\n buttonSize = \"default\",\n overlayEnabled = true,\n overlayType = \"solid\",\n className,\n ...props\n}: CarouselWidgetProps): React.JSX.Element {\n const [currentIndex, setCurrentIndex] = useState(0);\n const [isHovered, setIsHovered] = useState(false);\n\n const hasSlides = slides.length > 0;\n const totalSlides = slides.length;\n\n const goToNext = useCallback(() => {\n if (!hasSlides) return;\n setCurrentIndex((prev) => {\n if (prev === totalSlides - 1) {\n return 0;\n }\n return prev + 1;\n });\n }, [hasSlides, totalSlides]);\n\n const goToPrevious = useCallback(() => {\n if (!hasSlides) return;\n setCurrentIndex((prev) => {\n if (prev === 0) {\n return totalSlides - 1;\n }\n return prev - 1;\n });\n }, [hasSlides, totalSlides]);\n\n const goToSlide = useCallback(\n (index: number) => {\n if (!hasSlides) return;\n if (index >= 0 && index < totalSlides) {\n setCurrentIndex(index);\n }\n },\n [hasSlides, totalSlides],\n );\n\n // Auto-scroll effect\n useEffect(() => {\n if (!enableAutoScroll || !hasSlides || isHovered) return;\n\n const intervalId = setInterval(() => {\n goToNext();\n }, autoScrollInterval);\n\n return () => clearInterval(intervalId);\n }, [enableAutoScroll, autoScrollInterval, hasSlides, isHovered, goToNext]);\n\n // Reset to first slide if slides change\n useEffect(() => {\n if (currentIndex >= totalSlides && totalSlides > 0) {\n setCurrentIndex(0);\n }\n }, [totalSlides, currentIndex]);\n\n if (!hasSlides) {\n return (\n <div\n className={`rounded-${borderRadius} ${className} w-full overflow-hidden`}\n style={{ minHeight: carouselHeight }}\n {...props}\n >\n <div\n className=\"bg-muted flex h-full w-full items-center justify-center\"\n style={{ minHeight: carouselHeight }}\n >\n <div className=\"text-muted-foreground flex flex-col items-center gap-2\">\n <div className=\"text-4xl\">🎠</div>\n <p className=\"text-sm\">No slides added</p>\n <p className=\"text-muted-foreground/70 text-xs\">\n Add slides to create a carousel\n </p>\n </div>\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={`relative w-full overflow-hidden rounded-${borderRadius} ${className}`}\n style={{ minHeight: carouselHeight }}\n onMouseEnter={() => setIsHovered(true)}\n onMouseLeave={() => setIsHovered(false)}\n {...props}\n >\n {/* Slides Container */}\n <div\n className=\"relative h-full w-full\"\n style={{ minHeight: carouselHeight }}\n >\n <div\n className=\"flex h-full transition-transform duration-500 ease-in-out\"\n style={{\n transform: `translateX(-${currentIndex * 100}%)`,\n }}\n >\n {slides.map((slide) => (\n <div\n key={slide.id}\n className=\"relative h-full w-full flex-shrink-0\"\n style={{ minWidth: \"100%\", minHeight: carouselHeight }}\n >\n {/* Background image/content layer */}\n <div className=\"absolute inset-0 h-full w-full\">\n <MediaRenderer\n {...getMediaPropsFromWidgetSchema(slide.content)}\n />\n </div>\n\n {/* Dark overlay for text readability */}\n {overlayEnabled && (\n <div\n className={`absolute inset-0 z-9 ${\n overlayType === \"gradient\"\n ? \"bg-gradient-to-t from-black to-transparent\"\n : \"bg-black\"\n }`}\n style={{\n opacity:\n (Number(String(overlayIntensity).replace(\"%\", \"\")) ||\n 40) / 100,\n }}\n />\n )}\n\n {/* Content box */}\n <div\n className={`absolute inset-x-0 z-10 flex px-3 ${\n align.horizontal === \"left\"\n ? \"justify-start\"\n : align.horizontal === \"center\"\n ? \"justify-center\"\n : \"justify-end\"\n } ${\n align.vertical === \"top\"\n ? \"top-0 pt-13\"\n : align.vertical === \"center\"\n ? \"top-1/2 -translate-y-1/2\"\n : \"bottom-0 pb-13\"\n }`}\n >\n <div\n className={`p-${padding} flex flex-col gap-3`}\n style={{ maxWidth: textWidth }}\n >\n {/* Heading and text */}\n <div className={`flex flex-col text-${align.horizontal}`}>\n {slide.title && (\n <h2\n className={`mb-2 leading-tight font-bold text-${headerColor} text-${headerSize === \"md\" ? \"base\" : headerSize}`}\n >\n {slide.title}\n </h2>\n )}\n {slide.description && (\n <div\n className={`leading-snug text-${textColor} text-${textSize === \"md\" ? \"base\" : textSize} line-clamp-2`}\n dangerouslySetInnerHTML={{\n __html: DOMPurify.sanitize(slide.description, {\n ALLOWED_TAGS: [\n \"br\",\n \"strong\",\n \"em\",\n \"b\",\n \"i\",\n \"ul\",\n \"ol\",\n \"li\",\n \"p\",\n ],\n ALLOWED_ATTR: [],\n }),\n }}\n />\n )}\n </div>\n\n {/* Button */}\n {slide.buttonText && slide.buttonEnabled && showButton && (\n <div className={`text-${align.horizontal}`}>\n <Button\n size={buttonSize}\n className={`rounded-md py-1 font-semibold bg-${buttonColor} text-${buttonColor}-foreground hover:bg-${buttonColor}/90`}\n asChild\n >\n <a href={slide.buttonLink}>{slide.buttonText}</a>\n </Button>\n </div>\n )}\n </div>\n </div>\n </div>\n ))}\n </div>\n </div>\n {/* Dots and Navigation */}\n {totalSlides > 1 && (\n <div\n className={`p-${padding} absolute bottom-0 z-10 flex w-full items-center justify-between ${align.horizontal === \"center\" ? \"h-full\" : \"\"}`}\n >\n {/* Pagination dots - always at bottom */}\n <div\n className={`flex items-center ${\n align.horizontal === \"center\"\n ? `p-${padding} absolute inset-x-0 bottom-3 justify-center`\n : \"\"\n }`}\n >\n <div\n className={`flex items-center gap-2 ${\n align.horizontal === \"center\" ? \"justify-center\" : \"\"\n }`}\n >\n {slides.map((_, index) => (\n <button\n key={`dot-${index}`}\n className={`h-[6px] w-[6px] rounded-full transition-colors ${\n index === currentIndex\n ? \"bg-background\"\n : \"bg-background/40 hover:bg-background/60\"\n }`}\n onClick={() => goToSlide(index)}\n aria-label={`Go to slide ${index + 1}`}\n aria-current={index === currentIndex ? \"true\" : \"false\"}\n />\n ))}\n </div>\n </div>\n\n {/* Navigation arrows - position changes based on alignment */}\n <div\n className={`flex items-center gap-[10px] ${\n align.horizontal === \"center\"\n ? `absolute inset-x-0 top-1/2 justify-between px-${padding}`\n : \"\"\n }`}\n >\n <ScrollArrows onPrevious={goToPrevious} onNext={goToNext} />\n </div>\n </div>\n )}\n </div>\n );\n}\n\nexport const carouselWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"CarouselWidget\",\n displayName: \"Carousel\",\n tabsConfig: [\n { id: \"styling\", label: \"Styling\" },\n { id: \"behavior\", label: \"Behavior\" },\n { id: \"data\", label: \"Data\" },\n ],\n dataSourceTargetProps: [\"slides\"],\n fields: [\n // Styling tab - Text Styling group\n getFontSizeField({\n defaultValue: \"lg\",\n key: \"headerSize\",\n label: \"Header Font Size\",\n description: \"Font size for the slide header\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n getColorField({\n defaultValue: \"background\",\n key: \"headerColor\",\n label: \"Header Color\",\n description: \"Color variant for the slide header\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n {\n key: \"separator\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Text Styling\",\n },\n getFontSizeField({\n defaultValue: \"md\",\n key: \"textSize\",\n label: \"Text Font Size\",\n description: \"Font size for the slide text\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n getColorField({\n defaultValue: \"background\",\n key: \"textColor\",\n label: \"Text Color\",\n description: \"Color variant for the slide text\",\n tab: \"styling\",\n group: \"Text Styling\",\n }),\n // Styling tab - Layout group\n {\n key: \"align\",\n label: \"Alignment\",\n type: \"alignment\",\n description: \"Alignment of the carousel content\",\n defaultValue: { vertical: \"bottom\", horizontal: \"left\" },\n options: {\n verticalEnabled: true,\n horizontalEnabled: true,\n },\n tab: \"styling\",\n group: \"Layout\",\n },\n {\n key: \"textWidth\",\n label: \"Content Width\",\n type: \"text\",\n description: \"Maximum width for slide content (e.g., 100%, 50%, 600px)\",\n defaultValue: \"100%\",\n tab: \"styling\",\n group: \"Layout\",\n },\n // Styling tab - Design group\n getHeightField({\n key: \"carouselHeight\",\n label: \"Carousel Height\",\n description: \"Height of the carousel\",\n min: 100,\n max: 1200,\n step: 10,\n defaultValue: \"400px\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"separator2\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Design\",\n },\n getBorderRadiusField({\n defaultValue: \"md\",\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Rounded corners for the carousel\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getPaddingField({\n defaultValue: 4,\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding for the carousel\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"overlayEnabled\",\n label: \"Enable Overlay\",\n type: \"boolean\",\n description: \"Add background overlay to slide content\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Design\",\n },\n {\n key: \"overlayType\",\n label: \"Overlay Type\",\n type: \"buttonGroup\",\n description: \"Type of overlay to add to the slide content\",\n defaultValue: \"gradient\",\n options: [\n { label: \"Solid\", value: \"solid\" },\n { label: \"Gradient\", value: \"gradient\" },\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 background (0-100)\",\n min: 0,\n max: 100,\n step: 5,\n defaultValue: 50,\n unit: \"%\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"overlayEnabled\",\n },\n {\n key: \"showButton\",\n label: \"Show Button\",\n type: \"boolean\",\n description: \"Display the button in slide content\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Design\",\n },\n getColorField({\n defaultValue: \"primary\",\n key: \"buttonColor\",\n label: \"Button Color\",\n description: \"Color variant for the slide button\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"showButton\",\n }),\n getButtonSizeField({\n defaultValue: \"default\",\n key: \"buttonSize\",\n label: \"Button Size\",\n description: \"Size of the slide button\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyToBeTrue: \"showButton\",\n }),\n // Behavior tab - Auto-Scroll group\n {\n key: \"enableAutoScroll\",\n label: \"Enable Auto-Scroll\",\n type: \"boolean\",\n description: \"Automatically advance to the next slide\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Auto-Scroll\",\n },\n {\n key: \"autoScrollInterval\",\n label: \"Auto-Scroll Interval (ms)\",\n type: \"number\",\n description: \"Time in milliseconds between automatic slide transitions\",\n min: 1000,\n max: 10000,\n step: 500,\n defaultValue: 3000,\n tab: \"behavior\",\n group: \"Auto-Scroll\",\n requiresKeyToBeTrue: \"enableAutoScroll\",\n },\n // Data tab - Data Configuration group\n {\n key: \"dataSource\",\n label: \"Data Source\",\n type: \"dataSource\",\n description: \"\",\n tab: \"data\",\n group: \"Data Configuration\",\n },\n ],\n // Per-item configuration schema for custom data sources\n itemConfigSchema: {\n description: \"Configure settings for this slide\",\n fields: [\n {\n key: \"title\",\n label: \"Custom Title\",\n type: \"text\",\n description: \"Override the item's title for this slide\",\n },\n {\n key: \"description\",\n label: \"Custom Description\",\n type: \"textarea\",\n description: \"Override the item's description for this slide\",\n rows: 3,\n },\n {\n key: \"buttonEnabled\",\n label: \"Show Button\",\n type: \"boolean\",\n description: \"Show the button in the slide\",\n defaultValue: false,\n },\n {\n key: \"buttonText\",\n label: \"Button Text\",\n type: \"text\",\n description: \"Text to display on the slide button\",\n requiresKeyToBeTrue: \"buttonEnabled\",\n },\n {\n key: \"buttonLink\",\n label: \"Button Link\",\n type: \"text\",\n description: \"URL for the slide button\",\n requiresKeyToBeTrue: \"buttonEnabled\",\n },\n ],\n },\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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AO;GACP,KAAK;GACL,OAAO;GACR;2DACoB;GACnB,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;sDACc;GACd,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACR,CAAC;EACF;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,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAY,OAAO;IAAY,CACzC;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,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;oDACa;GACZ,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;yDACiB;GACjB,cAAc;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAEF;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,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAED;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,OAAO;GACR;EACF;CAED,kBAAkB;EAChB,aAAa;EACb,QAAQ;GACN;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACd;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,MAAM;IACP;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,cAAc;IACf;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,qBAAqB;IACtB;GACD;IACE,KAAK;IACL,OAAO;IACP,MAAM;IACN,aAAa;IACb,qBAAqB;IACtB;GACF;EACF;CACF"}
|