@@ -80,10 +79,18 @@ export const CalendarDaily = () => {
className="w-full border-b border-gray-200"
style={{ height: `${hourHeight}px` }}
onClick={(e) =>
- handleCellDblClick(e, currentDate.toDate().toLocaleDateString("en-CA"), twentyFourHoursFormat[timeIndex])
+ handleCellDblClick(
+ e,
+ currentDate.toDate().toLocaleDateString("en-CA"),
+ twentyFourHoursFormat[timeIndex]
+ )
}
onDoubleClick={(e) =>
- handleCellDblClick(e, currentDate.toDate().toLocaleDateString("en-CA"), twentyFourHoursFormat[timeIndex])
+ handleCellDblClick(
+ e,
+ currentDate.toDate().toLocaleDateString("en-CA"),
+ twentyFourHoursFormat[timeIndex]
+ )
}
/>
diff --git a/packages/frappe-ui-react/src/components/calendar/calendarEvent.tsx b/packages/frappe-ui-react/src/components/calendar/calendarEvent.tsx
index 4e5a79d2..4d39765b 100644
--- a/packages/frappe-ui-react/src/components/calendar/calendarEvent.tsx
+++ b/packages/frappe-ui-react/src/components/calendar/calendarEvent.tsx
@@ -120,7 +120,7 @@ export const CalendarEvent = ({
{!event.isFullDay && (
- { eventTime?.from_time &&
+ {eventTime?.from_time &&
eventTime?.to_time &&
formattedDuration(
eventTime.from_time,
diff --git a/packages/frappe-ui-react/src/components/calendar/calendarMonthly.tsx b/packages/frappe-ui-react/src/components/calendar/calendarMonthly.tsx
index 43b4cc8c..c0f997d2 100644
--- a/packages/frappe-ui-react/src/components/calendar/calendarMonthly.tsx
+++ b/packages/frappe-ui-react/src/components/calendar/calendarMonthly.tsx
@@ -106,7 +106,9 @@ export const CalendarMonthly = () => {
? "text-ink-gray-7"
: "text-ink-gray-3"
)}
- onDoubleClick={(e) => handleCellDblClick(e, date.toLocaleDateString("en-CA"))}
+ onDoubleClick={(e) =>
+ handleCellDblClick(e, date.toLocaleDateString("en-CA"))
+ }
>
(
fn: (item: T) => string
): { [key: string]: T[] } {
if (typeof fn !== "function") throw new Error(`${fn} should be a function`);
- return obj.reduce((acc, item) => {
- const group = fn(item);
- if (!acc[group]) {
- acc[group] = [];
- }
- acc[group].push(item);
- return acc;
- }, {} as { [key: string]: T[] });
+ return obj.reduce(
+ (acc, item) => {
+ const group = fn(item);
+ if (!acc[group]) {
+ acc[group] = [];
+ }
+ acc[group].push(item);
+ return acc;
+ },
+ {} as { [key: string]: T[] }
+ );
}
export function calculateMinutes(time: string): number {
@@ -361,12 +364,14 @@ export function sortMonthlyEvents(events: CalendarEvent[]) {
.filter((event) => !event.isFullDay)
.sort((a, b) =>
a.from_time !== b.from_time
- ? calculateMinutes(a.from_time || '00:00') > calculateMinutes(b.from_time || '00:00')
+ ? calculateMinutes(a.from_time || "00:00") >
+ calculateMinutes(b.from_time || "00:00")
+ ? 1
+ : -1
+ : calculateMinutes(a.to_time || "00:00") >
+ calculateMinutes(b.to_time || "00:00")
? 1
: -1
- : calculateMinutes(a.to_time || '00:00') > calculateMinutes(b.to_time || '00:00')
- ? 1
- : -1
);
return [...fullDayEvents, ...timedEvents];
diff --git a/packages/frappe-ui-react/src/components/calendar/calendarWeekly.tsx b/packages/frappe-ui-react/src/components/calendar/calendarWeekly.tsx
index e64f64f0..2426a666 100644
--- a/packages/frappe-ui-react/src/components/calendar/calendarWeekly.tsx
+++ b/packages/frappe-ui-react/src/components/calendar/calendarWeekly.tsx
@@ -1,5 +1,5 @@
import { ChevronDown, ChevronUp } from "lucide-react";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
import clsx from "clsx";
import {
@@ -26,8 +26,6 @@ export const CalendarWeekly = ({ weeklyDates }: CalendarWeeklyProps) => {
const { timedEvents, fullDayEvents } = useCalendarData(events, "Week");
const [isCollapsed, setIsCollapsed] = useState(false);
- const [showCollapsable, setShowCollapsable] = useState(true);
-
const gridRef = useRef
diff --git a/packages/frappe-ui-react/src/components/calendar/hooks/useCalendar.ts b/packages/frappe-ui-react/src/components/calendar/hooks/useCalendar.ts
index ce0e83a3..7ecc6b6d 100644
--- a/packages/frappe-ui-react/src/components/calendar/hooks/useCalendar.ts
+++ b/packages/frappe-ui-react/src/components/calendar/hooks/useCalendar.ts
@@ -29,7 +29,7 @@ export const useCalendar = (
const parsedEvents = useMemo(() => {
return (initialEvents || []).map((event) => {
- const { fromDate, fromTime, toTime, toDate, ...rest } = event;
+ const { fromDate, fromTime, toTime, ...rest } = event;
const date = parseDate(fromDate);
return event.isFullDay
? { ...rest, date }
diff --git a/packages/frappe-ui-react/src/components/calendar/hooks/useCalendarData.ts b/packages/frappe-ui-react/src/components/calendar/hooks/useCalendarData.ts
index c85d56d1..6bf345b7 100644
--- a/packages/frappe-ui-react/src/components/calendar/hooks/useCalendarData.ts
+++ b/packages/frappe-ui-react/src/components/calendar/hooks/useCalendarData.ts
@@ -27,7 +27,7 @@ export const useCalendarData = (events: CalendarEvent[], view = "") => {
task.endTime = calculateMinutes(task.to_time || "00:00");
return task;
});
- _value.sort((a, b) => a.startTime - b.startTime);
+ _value.sort((a, b) => a.startTime - b.startTime);
sortedArray[key] = findOverlappingEventsCount(_value);
}
}
diff --git a/packages/frappe-ui-react/src/components/calendar/hooks/useEventInteraction.ts b/packages/frappe-ui-react/src/components/calendar/hooks/useEventInteraction.ts
index 108a2602..860dca38 100644
--- a/packages/frappe-ui-react/src/components/calendar/hooks/useEventInteraction.ts
+++ b/packages/frappe-ui-react/src/components/calendar/hooks/useEventInteraction.ts
@@ -4,8 +4,10 @@ import {
offset,
shift,
useFloating,
+ type ExtendedRefs,
+ type ReferenceType,
} from "@floating-ui/react";
-import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import React, { useCallback, useEffect, useReducer, useRef, useState } from "react";
import type { CalendarConfig, CalendarEvent } from "../types";
import { calculateMinutes, convertMinutesToHours } from "../calendarUtils";
@@ -30,7 +32,28 @@ const repositionReducer = (
export const useEventInteraction = (
event: CalendarEvent,
config: CalendarConfig
-) => {
+): {
+ eventTime: { from_time: string; to_time: string } | undefined;
+ isPopoverOpen: boolean;
+ isEditModalOpen: boolean;
+ isResizing: boolean;
+ isRepositioning: boolean;
+ repositionState: { xAxis: number; yAxis: number };
+ eventRef: React.RefObject;
+ floatingRefs: {
+ reference: React.RefObject;
+ floating: React.RefObject;
+ setReference: (node: ReferenceType | null) => void;
+ setFloating: (node: HTMLElement | null) => void;
+ } & ExtendedRefs;
+ floatingStyles: React.CSSProperties;
+ setEditModalOpen: React.Dispatch>;
+ setPopoverOpen: React.Dispatch>;
+ handleEventClick: (_event: React.MouseEvent) => void;
+ handleEventDelete: () => void;
+ handleResizeMouseDown: (_event: React.MouseEvent) => void;
+ handleRepositionMouseDown: (e: React.MouseEvent) => void;
+} => {
const [isPopoverOpen, setPopoverOpen] = useState(false);
const [isEditModalOpen, setEditModalOpen] = useState(false);
const [isResizing, setIsResizing] = useState(false);
diff --git a/packages/frappe-ui-react/src/components/calendar/types.ts b/packages/frappe-ui-react/src/components/calendar/types.ts
index ed72531b..1cdb06f0 100644
--- a/packages/frappe-ui-react/src/components/calendar/types.ts
+++ b/packages/frappe-ui-react/src/components/calendar/types.ts
@@ -22,7 +22,7 @@ export interface CalendarConfig {
isEditMode: boolean;
eventIcons: Record;
redundantCellHeight: number;
- timeFormat: '12h' | '24h';
+ timeFormat: "12h" | "24h";
hourHeight: number;
enableShortcuts: boolean;
showIcon: boolean;
diff --git a/packages/frappe-ui-react/src/components/card/card.stories.tsx b/packages/frappe-ui-react/src/components/card/card.stories.tsx
new file mode 100644
index 00000000..b564fa6c
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/card/card.stories.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import {
+ Card,
+ CardHeader,
+ CardTitle,
+ CardDescription,
+ CardContent,
+ CardFooter,
+} from "./card";
+import { Button } from "../button";
+
+export default {
+ title: "Components/Card",
+ component: Card,
+ tags: ["autodocs"],
+ parameters: {
+ docs: {
+ description: {
+ component:
+ "Card component for grouping related content. Includes header, title, description, content, and footer.",
+ },
+ },
+ },
+};
+
+export const Basic = () => (
+
+
+ Card Title
+ This is a card description.
+
+
+
+
+
+
+
+);
diff --git a/packages/frappe-ui-react/src/components/card/card.tsx b/packages/frappe-ui-react/src/components/card/card.tsx
new file mode 100644
index 00000000..d4ab522b
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/card/card.tsx
@@ -0,0 +1,65 @@
+import * as React from "react";
+
+export const Card = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<
+ HTMLDivElement,
+ React.HTMLAttributes
+>(({ className, ...props }, ref) => (
+
+));
+CardFooter.displayName = "CardFooter";
diff --git a/packages/frappe-ui-react/src/components/charts/charts.tsx b/packages/frappe-ui-react/src/components/charts/charts.tsx
index 7de8ec5d..fed3aacf 100644
--- a/packages/frappe-ui-react/src/components/charts/charts.tsx
+++ b/packages/frappe-ui-react/src/components/charts/charts.tsx
@@ -44,7 +44,7 @@ const ChartsWrapper: React.FC = ({
resizeObserver.disconnect();
chartInstance.current?.dispose();
};
- }, [events]);
+ }, [events, theme]);
useEffect(() => {
if (chartInstance.current) {
diff --git a/packages/frappe-ui-react/src/components/charts/hooks/useAxisChartsOptions.ts b/packages/frappe-ui-react/src/components/charts/hooks/useAxisChartsOptions.ts
index 4447dddc..e1b9ab92 100644
--- a/packages/frappe-ui-react/src/components/charts/hooks/useAxisChartsOptions.ts
+++ b/packages/frappe-ui-react/src/components/charts/hooks/useAxisChartsOptions.ts
@@ -1,6 +1,6 @@
import useEchartsOptions from "./useEchartsOptions";
import { formatValue, mergeDeep } from "../helpers";
-import {
+import type {
AreaSeriesConfig,
AxisChartConfig,
BarSeriesConfig,
@@ -31,7 +31,7 @@ function getBarSeriesOptions(config: AxisChartConfig, series: BarSeriesConfig) {
}
function getLineSeriesOptions(
- config: AxisChartConfig,
+ _config: AxisChartConfig,
series: LineSeriesConfig
) {
const showSymbol = series.showDataPoints || series.showDataLabels;
@@ -49,7 +49,7 @@ function getLineSeriesOptions(
}
function getAreaSeriesOptions(
- config: AxisChartConfig,
+ _config: AxisChartConfig,
series: AreaSeriesConfig
) {
return {
diff --git a/packages/frappe-ui-react/src/components/charts/hooks/useDonutChartOptions.ts b/packages/frappe-ui-react/src/components/charts/hooks/useDonutChartOptions.ts
index 5b6f1e88..301f3729 100644
--- a/packages/frappe-ui-react/src/components/charts/hooks/useDonutChartOptions.ts
+++ b/packages/frappe-ui-react/src/components/charts/hooks/useDonutChartOptions.ts
@@ -1,12 +1,12 @@
import type {
- TooltipComponentOption,
+ TooltipComponentOption,
SingleAxisComponentOption,
PieSeriesOption,
} from "echarts";
import { getTitleOptions } from "./useEchartsOptions";
import { formatValue } from "../helpers";
-import { DonutChartConfig } from "../types";
+import type { DonutChartConfig } from "../types";
export default function useDonutChartOptions(config: DonutChartConfig) {
let data = config.data || [];
diff --git a/packages/frappe-ui-react/src/components/charts/hooks/useEchartsOptions.ts b/packages/frappe-ui-react/src/components/charts/hooks/useEchartsOptions.ts
index bb43f8aa..607fdf44 100644
--- a/packages/frappe-ui-react/src/components/charts/hooks/useEchartsOptions.ts
+++ b/packages/frappe-ui-react/src/components/charts/hooks/useEchartsOptions.ts
@@ -291,8 +291,7 @@ export default function useEchartsOptions(config: AxisChartConfig) {
`;
}
-
- if (Array.isArray(params)) {
+ else {
const t = params.map((p, idx) => {
const xValue = config.swapXY ? p.value[1] : p.value[0];
const yValue = config.swapXY ? p.value[0] : p.value[1];
diff --git a/packages/frappe-ui-react/src/components/charts/hooks/useFunnelChartOptions.ts b/packages/frappe-ui-react/src/components/charts/hooks/useFunnelChartOptions.ts
index 89a18ed0..61ff0e0e 100644
--- a/packages/frappe-ui-react/src/components/charts/hooks/useFunnelChartOptions.ts
+++ b/packages/frappe-ui-react/src/components/charts/hooks/useFunnelChartOptions.ts
@@ -6,7 +6,7 @@ import {
TITLE_HEIGHT,
} from "./useEchartsOptions";
import { formatValue } from "../helpers";
-import { ChartsWrapperProps, FunnelChartConfig } from "../types";
+import type { ChartsWrapperProps, FunnelChartConfig } from "../types";
export default function useFunnelChartOptions(
config: FunnelChartConfig
diff --git a/packages/frappe-ui-react/src/components/charts/numberChart.tsx b/packages/frappe-ui-react/src/components/charts/numberChart.tsx
index a14b3ecd..689d4397 100644
--- a/packages/frappe-ui-react/src/components/charts/numberChart.tsx
+++ b/packages/frappe-ui-react/src/components/charts/numberChart.tsx
@@ -1,7 +1,7 @@
import React from "react";
import { formatValue } from "./helpers";
-import { NumberChartConfig } from "./types";
+import type { NumberChartConfig } from "./types";
interface RenderPropHelpers {
formatValue: typeof formatValue;
diff --git a/packages/frappe-ui-react/src/components/charts/types.ts b/packages/frappe-ui-react/src/components/charts/types.ts
index 934e59a9..a4f37381 100644
--- a/packages/frappe-ui-react/src/components/charts/types.ts
+++ b/packages/frappe-ui-react/src/components/charts/types.ts
@@ -1,6 +1,6 @@
-import { EChartsOption } from "echarts";
+import type { EChartsOption } from "echarts";
-import { TimeGrain } from "./helpers";
+import type { TimeGrain } from "./helpers";
export type AxisChartConfig = {
data: RecordThis is the main content of the card.
+
-
@@ -209,11 +208,11 @@ const Dialog = ({
)}
+
+ ),
+ args: {
+ orientation: "horizontal",
+ },
+};
+
+export const Vertical: Story = {
+ render: (args) => (
+ Content above
+Content below
+
+ Left
+
+ ),
+ args: {
+ orientation: "vertical",
+ flexItem: true,
+ },
+};
+
+export const WithAction: Story = {
+ render: (args) => (
+
+
+ ),
+ args: {
+ orientation: "horizontal",
+ position: "center",
+ action: {
+ label: "Load More",
+ handler: () => alert("Action clicked!"),
+ loading: false,
+ },
+ },
+};
+
+export const ActionPositions: Story = {
+ render: () => (
+ Content above
+Content below
+
+
+ ),
+};
diff --git a/packages/frappe-ui-react/src/components/divider/divider.tsx b/packages/frappe-ui-react/src/components/divider/divider.tsx
index e1c07b40..c49b7b0e 100644
--- a/packages/frappe-ui-react/src/components/divider/divider.tsx
+++ b/packages/frappe-ui-react/src/components/divider/divider.tsx
@@ -2,7 +2,7 @@ import { useMemo } from "react";
import clsx from "clsx";
import { Button } from "../button";
-import { DividerProps } from "./types";
+import type { DividerProps } from "./types";
const Divider = ({
orientation = "horizontal",
diff --git a/packages/frappe-ui-react/src/components/dropdown/dropdown.tsx b/packages/frappe-ui-react/src/components/dropdown/dropdown.tsx
index 7b8d753f..4f702ccb 100644
--- a/packages/frappe-ui-react/src/components/dropdown/dropdown.tsx
+++ b/packages/frappe-ui-react/src/components/dropdown/dropdown.tsx
@@ -1,7 +1,7 @@
import React, { useMemo, useCallback } from "react";
-import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import { Menu } from "@base-ui/react/menu";
-import { Button, ButtonProps } from "../button";
+import { Button, type ButtonProps } from "../button";
import { Switch } from "../switch";
import type {
DropdownProps,
@@ -10,10 +10,11 @@ import type {
DropdownOptions,
} from "./types";
import FeatherIcon, { type FeatherIconProps } from "../featherIcon";
+import clsx from "clsx";
const cssClasses = {
dropdownContent:
- "min-w-40 divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-black focus:outline-none dropdown-content border border-outline-gray-1 z-100",
+ "min-w-40 divide-y divide-outline-gray-modals rounded-lg bg-surface-modal shadow-2xl ring-black focus:outline-none dropdown-content border border-outline-gray-1",
groupContainer: "p-1.5",
groupLabel: "flex h-7 items-center px-2 text-sm font-medium text-ink-gray-7",
itemLabel: "whitespace-nowrap",
@@ -23,6 +24,7 @@ const cssClasses = {
"group flex h-7 w-full items-center rounded px-2 text-base focus:outline-none",
submenuTrigger:
"group flex h-7 w-full items-center rounded px-2 text-base text-ink-gray-6 focus:outline-none",
+ dropdownPositioner: "z-100",
};
const Dropdown: React.FC
+ {} }}
+ />
+
+
+ {} }}
+ />
+
+
+ {} }}
+ />
+
+
- {submenuGroup.group && !submenuGroup.hideLabel && (
-
- {submenuGroup.group}
-
- )}
- {submenuGroup.items.map((subItem) => (
- subItem.onClick?.()}
- >
- {renderDropdownItem(subItem)}
-
- ))}
-
- ))}
-
- {group.group && !group.hideLabel && (
-
- {group.group}
-
- )}
- {group.items.map((item) => (
-
- ))}
-
- !item.switch && item.onClick?.()}>
- {renderDropdownItem(item)}
-
-
- ))}
-
+ !item.switch && item.onClick?.()}
+ render={renderDropdownItem(item)}
+ nativeButton={
+ !item.switch && !item.submenu && !item.component
+ }
+ />
+
+ ))}
+
+ Custom Content
+
+ );
+ const items = [{ label: "Custom", component: CustomComponent }];
+
+ render(
- {layoutReady &&
- renderItem({
- index,
- item: l,
- })}
+ {renderItem({
+ index,
+ item: l,
+ })}
))}
diff --git a/packages/frappe-ui-react/src/components/gridLayout/types.ts b/packages/frappe-ui-react/src/components/gridLayout/types.ts
index f674873c..4b3a33ad 100644
--- a/packages/frappe-ui-react/src/components/gridLayout/types.ts
+++ b/packages/frappe-ui-react/src/components/gridLayout/types.ts
@@ -1,4 +1,5 @@
-import { Layouts, Layout as RGL_Layout } from "react-grid-layout";
+import type { ReactNode } from "react";
+import type { Layouts, Layout as RGL_Layout } from "react-grid-layout";
export type Layout = RGL_Layout;
@@ -7,4 +8,5 @@ export interface GridLayoutProps {
cols?: number;
rowHeight?: number;
disabled?: boolean;
+ renderItem: (props: { index: number; item: Layout }) => ReactNode;
}
diff --git a/packages/frappe-ui-react/src/components/hooks/useResource.ts b/packages/frappe-ui-react/src/components/hooks/useResource.ts
index e7c7917c..88844154 100644
--- a/packages/frappe-ui-react/src/components/hooks/useResource.ts
+++ b/packages/frappe-ui-react/src/components/hooks/useResource.ts
@@ -10,8 +10,10 @@ interface ResourceState
diff --git a/packages/frappe-ui-react/src/components/password/password.tsx b/packages/frappe-ui-react/src/components/password/password.tsx
index b06cfafb..8e6e65a4 100644
--- a/packages/frappe-ui-react/src/components/password/password.tsx
+++ b/packages/frappe-ui-react/src/components/password/password.tsx
@@ -2,7 +2,7 @@ import React, { useState, useMemo, useEffect, useRef } from "react";
import { FormControl } from "../formControl";
import { Tooltip } from "../tooltip";
import KeyboardShortcut from "../keyboardShortcut";
-import { PasswordProps } from "./types";
+import type { PasswordProps } from "./types";
import { Eye, EyeOff } from "lucide-react";
const Password: React.FC = ({ value, ...attrs }) => {
@@ -21,12 +21,10 @@ const Password: React.FC = ({ value, ...attrs }) => {
};
const inputElement = inputRef.current;
- if (inputElement) {
- inputElement.addEventListener("keydown", handleKeyDown);
+ inputElement?.addEventListener("keydown", handleKeyDown);
return () => {
- inputElement.removeEventListener("keydown", handleKeyDown);
+ inputElement?.removeEventListener("keydown", handleKeyDown);
};
- }
}, []);
return (
diff --git a/packages/frappe-ui-react/src/components/popover/popover.tsx b/packages/frappe-ui-react/src/components/popover/popover.tsx
index 93b9a5c3..0a109782 100644
--- a/packages/frappe-ui-react/src/components/popover/popover.tsx
+++ b/packages/frappe-ui-react/src/components/popover/popover.tsx
@@ -39,8 +39,10 @@ interface PopoverTransitionClasses {
leaveToClass?: string;
}
-export interface PopoverProps
- extends Omit, "children" | "onSelect"> {
+export interface PopoverProps extends Omit<
+ React.HTMLAttributes,
+ "children" | "onSelect"
+> {
show?: boolean;
trigger?: "click" | "hover";
hoverDelay?: number;
@@ -141,11 +143,14 @@ const Popover: React.FC = ({
}
if (trigger === "hover") {
if (hoverDelay) {
- hoverTimer.current = setTimeout(() => {
- if (pointerOverTargetOrPopupRef.current) {
- open();
- }
- }, Number(hoverDelay) * 1000);
+ hoverTimer.current = setTimeout(
+ () => {
+ if (pointerOverTargetOrPopupRef.current) {
+ open();
+ }
+ },
+ Number(hoverDelay) * 1000
+ );
} else {
open();
}
@@ -164,11 +169,14 @@ const Popover: React.FC = ({
clearTimeout(leaveTimer.current);
}
if (leaveDelay) {
- leaveTimer.current = setTimeout(() => {
- if (!pointerOverTargetOrPopupRef.current) {
- close();
- }
- }, Number(leaveDelay) * 1000);
+ leaveTimer.current = setTimeout(
+ () => {
+ if (!pointerOverTargetOrPopupRef.current) {
+ close();
+ }
+ },
+ Number(leaveDelay) * 1000
+ );
} else {
if (!pointerOverTargetOrPopupRef.current) {
close();
@@ -364,7 +372,12 @@ const Popover: React.FC = ({
{createPortal(
= ({
size === "xl" ? "size-7" : "",
index <= hoveredRating && index > rating ? "!fill-yellow-200" : "",
index <= rating ? "!fill-yellow-500" : "",
- index > rating && index > hoveredRating ? "fill-gray-300 dark:fill-gray-900" : "",
+ index > rating && index > hoveredRating
+ ? "fill-gray-300 dark:fill-gray-900"
+ : "",
!readonly ? "cursor-pointer" : "",
"text-transparent",
"mr-0.5",
diff --git a/packages/frappe-ui-react/src/components/select/select.tsx b/packages/frappe-ui-react/src/components/select/select.tsx
index bfee0605..2c615021 100644
--- a/packages/frappe-ui-react/src/components/select/select.tsx
+++ b/packages/frappe-ui-react/src/components/select/select.tsx
@@ -100,7 +100,7 @@ const Select: React.FC = ({
xl: "pl-3",
}[size];
}, [size]);
-
+
return (
{prefix && (
diff --git a/packages/frappe-ui-react/src/components/sidebar/sidebar.stories.tsx b/packages/frappe-ui-react/src/components/sidebar/sidebar.stories.tsx
index eca4f198..d48b325d 100644
--- a/packages/frappe-ui-react/src/components/sidebar/sidebar.stories.tsx
+++ b/packages/frappe-ui-react/src/components/sidebar/sidebar.stories.tsx
@@ -1,7 +1,7 @@
import React from "react";
import type { Meta, StoryObj } from "@storybook/react-vite";
import {
- LucideBell,
+ LucideBell,
LucideBriefcase,
LucideBuilding,
LucideCheckSquare,
diff --git a/packages/frappe-ui-react/src/components/switch/switch.tsx b/packages/frappe-ui-react/src/components/switch/switch.tsx
index 9040e358..3ce66222 100644
--- a/packages/frappe-ui-react/src/components/switch/switch.tsx
+++ b/packages/frappe-ui-react/src/components/switch/switch.tsx
@@ -5,7 +5,7 @@ import {
Label,
Description,
} from "@headlessui/react";
-import { SwitchProps } from "./types";
+import type { SwitchProps } from "./types";
import FeatherIcon, { type FeatherIconProps } from "../featherIcon";
enum SwitchVariant {
@@ -39,11 +39,11 @@ const Switch: React.FC = ({
"disabled:cursor-not-allowed disabled:bg-surface-gray-3",
value
? "bg-surface-gray-7 enabled:hover:bg-surface-gray-6 active:bg-surface-gray-5"
- : "bg-surface-gray-4 enabled:hover:bg-gray-400 active:bg-gray-500",
+ : "bg-surface-gray-4 enabled:hover:bg-gray-400 active:bg-gray-500 dark:enabled:hover:bg-dark-gray-100 dark:active:bg-dark-gray-200",
switchType === SwitchVariant.ONLY_LABEL &&
(value
? "group-hover:enabled:bg-surface-gray-6"
- : "group-hover:enabled:bg-gray-400"),
+ : "group-hover:enabled:bg-gray-400 dark:group-hover:enabled:bg-dark-gray-100"),
size === "md" ? "h-5 w-8 border-[3px]" : "h-4 w-[26px] border-2",
].join(" ");
@@ -55,8 +55,8 @@ const Switch: React.FC = ({
? "translate-x-3 rtl:-translate-x-3"
: "translate-x-0"
: value
- ? "translate-x-2.5 rtl:-translate-x-2.5"
- : "translate-x-0",
+ ? "translate-x-2.5 rtl:-translate-x-2.5"
+ : "translate-x-0",
].join(" ");
const switchLabelClasses = [
diff --git a/packages/frappe-ui-react/src/components/tabButtons/index.stories.tsx b/packages/frappe-ui-react/src/components/tabButtons/index.stories.tsx
index 080ac1b1..2b909eb3 100644
--- a/packages/frappe-ui-react/src/components/tabButtons/index.stories.tsx
+++ b/packages/frappe-ui-react/src/components/tabButtons/index.stories.tsx
@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react-vite/*";
+import type { Meta, StoryObj } from "@storybook/react-vite";
import { useState } from "react";
import TabButtons from ".";
diff --git a/packages/frappe-ui-react/src/components/tabButtons/index.tsx b/packages/frappe-ui-react/src/components/tabButtons/index.tsx
index 7537b75f..cae1559a 100644
--- a/packages/frappe-ui-react/src/components/tabButtons/index.tsx
+++ b/packages/frappe-ui-react/src/components/tabButtons/index.tsx
@@ -57,8 +57,8 @@ const TabButtons = ({
button.disabled
? ""
: checked
- ? "text-ink-gray-9 shadow"
- : "!text-ink-gray-5"
+ ? "text-ink-gray-9 shadow"
+ : "!text-ink-gray-5"
} cursor-pointer`}
>
{!button.hideLabel && button.label && (
diff --git a/packages/frappe-ui-react/src/components/tabs/tabList.tsx b/packages/frappe-ui-react/src/components/tabs/tabList.tsx
index a46ed87b..c595f648 100644
--- a/packages/frappe-ui-react/src/components/tabs/tabList.tsx
+++ b/packages/frappe-ui-react/src/components/tabs/tabList.tsx
@@ -1,5 +1,5 @@
import { useRef, useEffect } from "react";
-import { TabItem } from "./tabs";
+import type { TabItem } from "./tabs";
interface TabListProps {
tabs: TabItem[];
diff --git a/packages/frappe-ui-react/src/components/tabs/tabPanel.tsx b/packages/frappe-ui-react/src/components/tabs/tabPanel.tsx
index 245ce936..ace1d5e0 100644
--- a/packages/frappe-ui-react/src/components/tabs/tabPanel.tsx
+++ b/packages/frappe-ui-react/src/components/tabs/tabPanel.tsx
@@ -1,4 +1,4 @@
-import { TabItem } from "./tabs";
+import type { TabItem } from "./tabs";
export interface TabPanelProps {
tabs: TabItem[];
diff --git a/packages/frappe-ui-react/src/components/taskStatus/index.tsx b/packages/frappe-ui-react/src/components/taskStatus/index.tsx
new file mode 100644
index 00000000..22373ed2
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/taskStatus/index.tsx
@@ -0,0 +1,39 @@
+const statusVariants: Record = {
+ Open: "bg-blue-100 text-blue-500 hover:bg-blue-200",
+ Working: "bg-orange-500/20 text-orange-500 hover:bg-orange-500/30",
+ "Pending Review": "bg-orange-100 text-orange-400 hover:bg-orange-500/20",
+ Overdue: "bg-red-500/20 text-red-500 hover:bg-red-500/20",
+ Template: "bg-slate-200 text-slate-900 hover:bg-slate-200",
+ Completed: "bg-green-600/20 text-green-600 hover:bg-green-600/20",
+ Cancelled: "bg-red-500/20 text-red-500 hover:bg-red-500/20",
+};
+
+export type TaskStatusProps =
+ | "Open"
+ | "Working"
+ | "Pending Review"
+ | "Overdue"
+ | "Template"
+ | "Completed"
+ | "Cancelled";
+
+interface TaskStatusComponentProps {
+ status: TaskStatusProps;
+}
+
+const TaskStatus = ({ status }: TaskStatusComponentProps) => {
+ const variantClass = statusVariants[status] || statusVariants["Open"];
+
+ return (
+ ;
+
+const Template: StoryObj<{ status: TaskStatusProps }> = {
+ render: (args) => (
+ {
+ iframe: {
+ setIframe: (options: SetIframeOptions) => ReturnType;
+ insertIframeURL: (url: string) => ReturnType;
+ setIframeAlign: (align: "left" | "center" | "right") => ReturnType;
+ openIframeDialog: () => ReturnType;
+ };
+ }
+}
+
+export const IframeExtension = Node.create({
+ name: "iframe",
+ group: "block",
+ selectable: true,
+ draggable: true,
+ atom: true,
+
+ addOptions() {
+ return {
+ allowedDomains: ALLOWED_DOMAINS,
+ blockedDomains: [],
+ HTMLAttributes: {},
+ };
+ },
+
+ addAttributes() {
+ return {
+ src: {
+ default: null,
+ parseHTML: (element) => element.getAttribute("src"),
+ renderHTML: (attributes) => ({
+ src: attributes.src,
+ }),
+ },
+ width: {
+ default: null,
+ parseHTML: (element) => {
+ const width = element.getAttribute("width");
+ return width ? parseInt(width, 10) : null;
+ },
+ renderHTML: (attributes) => ({
+ width: attributes.width ? String(attributes.width) : null,
+ }),
+ },
+ height: {
+ default: null,
+ parseHTML: (element) => {
+ const height = element.getAttribute("height");
+ return height ? parseInt(height, 10) : null;
+ },
+ renderHTML: (attributes) => ({
+ height: attributes.height ? String(attributes.height) : null,
+ }),
+ },
+ aspectRatio: {
+ default: 9 / 16, // Default 16:9 aspect ratio
+ parseHTML: () => null, // Don't parse from HTML
+ renderHTML: () => ({}), // Don't render to HTML
+ },
+ align: {
+ default: "center",
+ parseHTML: (element) => {
+ const align = (
+ element.getAttribute("data-align") ||
+ element.getAttribute("align") ||
+ "left"
+ ).toLowerCase();
+
+ if (["left", "center", "right"].includes(align)) {
+ return align as "left" | "center" | "right";
+ }
+ return "left";
+ },
+ renderHTML: (attributes) => {
+ return {
+ "data-align": attributes.align || "center",
+ };
+ },
+ },
+ title: {
+ default: null,
+ parseHTML: (element) => element.getAttribute("title"),
+ renderHTML: (attributes) => ({
+ title: attributes.title,
+ }),
+ },
+ frameborder: {
+ default: "0",
+ renderHTML: () => ({
+ frameborder: "0",
+ }),
+ },
+ allowfullscreen: {
+ default: "true",
+ renderHTML: () => ({
+ allowfullscreen: "true",
+ }),
+ },
+ sandbox: {
+ default: "allow-scripts allow-same-origin allow-popups allow-forms",
+ renderHTML: (attributes) => ({
+ sandbox: attributes.sandbox,
+ }),
+ },
+ interactive: {
+ default: false,
+ parseHTML: (el) => el.getAttribute("data-interactive") === "true",
+ renderHTML: (attrs) => ({
+ "data-interactive": attrs.interactive ? "true" : "false",
+ }),
+ },
+ };
+ },
+
+ parseHTML() {
+ return [
+ {
+ tag: "iframe[src]",
+ getAttrs: (element) => {
+ const src = (element as HTMLElement).getAttribute("src");
+ const width = (element as HTMLElement).getAttribute("width");
+ const height = (element as HTMLElement).getAttribute("height");
+ const title = (element as HTMLElement).getAttribute("title");
+ const align = (element as HTMLElement).getAttribute("data-align");
+
+ return {
+ src,
+ width: width ? parseInt(width, 10) : null,
+ height: height ? parseInt(height, 10) : null,
+ title: title || null,
+ align: align || "center",
+ };
+ },
+ },
+ ];
+ },
+
+ renderHTML({ HTMLAttributes }) {
+ return [
+ "iframe",
+ mergeAttributes(this.options.HTMLAttributes || {}, HTMLAttributes, {
+ loading: "lazy",
+ referrerpolicy: "no-referrer-when-downgrade",
+ }),
+ ];
+ },
+
+ addNodeView() {
+ return ReactNodeViewRenderer(IframeNodeView);
+ },
+
+ addCommands() {
+ return {
+ setIframeAlign:
+ (align: "left" | "center" | "right") =>
+ ({ commands }) => {
+ return commands.updateAttributes(this.name, { align });
+ },
+
+ setIframe:
+ (options: SetIframeOptions) =>
+ ({ commands, editor }) => {
+ if (!validateURL(options.src, this.options)) {
+ return false;
+ }
+
+ const processedSrc = processURL(options.src);
+
+ // Calculate optimal dimensions if not provided
+ const editorElement = editor.view.dom;
+ const editorWidth = editorElement?.clientWidth || 800;
+ const optimalDimensions = getOptimalDimensions(
+ processedSrc,
+ editorWidth
+ );
+
+ const attrs = {
+ src: processedSrc,
+ width: options.width || optimalDimensions.width,
+ height: options.height || optimalDimensions.height,
+ title: options.title,
+ align: options.align || "center",
+ aspectRatio: optimalDimensions.height / optimalDimensions.width,
+ interactive: options.interactive,
+ };
+
+ return commands.insertContent({
+ type: this.name,
+ attrs,
+ });
+ },
+
+ insertIframeURL:
+ (url: string) =>
+ ({ commands }) => {
+ const processedUrl = processURL(url);
+ return commands.setIframe({ src: processedUrl });
+ },
+
+ openIframeDialog:
+ () =>
+ ({ editor }) => {
+ // Emit a custom event on the editor's view DOM element
+ // This is more localized than document.dispatchEvent
+ const event = new CustomEvent("iframe:open-dialog", {
+ detail: { editor },
+ });
+ editor.view.dom.dispatchEvent(event);
+ return true;
+ },
+ };
+ },
+
+ // Add ProseMirror plugin for paste handling
+ addProseMirrorPlugins() {
+ return [
+ new Plugin({
+ key: new PluginKey("iframe-paste-handler"),
+ props: {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ handlePaste: (view: any, event: ClipboardEvent) => {
+ const text = event.clipboardData?.getData("text/plain");
+ const html = event.clipboardData?.getData("text/html");
+
+ // First, check for iframe embed codes in HTML content
+ if (html) {
+ const iframeData = parseIframeFromHTML(html);
+ if (iframeData) {
+ return createIframeNode(
+ view,
+ self,
+ iframeData.src,
+ iframeData.width,
+ iframeData.height,
+ iframeData.title
+ );
+ }
+ }
+
+ // Check if plain text contains iframe embed code
+ if (text && text.includes("]*src=["']([^"']+)["'][^>]*>/i);
+ if (iframeMatch) {
+ const src = iframeMatch[1];
+ const widthMatch = html.match(/width=["'](\d+)["']/i);
+ const heightMatch = html.match(/height=["'](\d+)["']/i);
+ const titleMatch = html.match(/title=["']([^"']+)["']/i);
+
+ return {
+ src,
+ width: widthMatch ? parseInt(widthMatch[1], 10) : undefined,
+ height: heightMatch ? parseInt(heightMatch[1], 10) : undefined,
+ title: titleMatch ? titleMatch[1] : undefined,
+ };
+ }
+ return null;
+ }
+
+ const src = iframe.getAttribute("src");
+ if (!src) return null;
+
+ const width = iframe.getAttribute("width")
+ ? parseInt(iframe.getAttribute("width")!, 10)
+ : undefined;
+ const height = iframe.getAttribute("height")
+ ? parseInt(iframe.getAttribute("height")!, 10)
+ : undefined;
+ const title = iframe.getAttribute("title") || undefined;
+
+ return { src, width, height, title };
+ } catch {
+ return null;
+ }
+}
+
+// Helper function to create iframe node from parsed data
+function createIframeNode(
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ view: any,
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ extensionThis: any,
+ src: string,
+ width?: number,
+ height?: number,
+ title?: string
+) {
+ // Ask user for confirmation before creating iframe
+ const shouldCreateEmbed = confirm(
+ `Do you want to embed this content?\n\nURL: ${src}\n\nClick "OK" to create an embed, or "Cancel" to paste as plain text.`
+ );
+
+ if (!shouldCreateEmbed) {
+ return false; // Allow default paste behavior (paste as text)
+ }
+
+ if (!validateURL(src, extensionThis.options)) {
+ return false;
+ }
+
+ console.log("URL validated, creating iframe node");
+ const processedUrl = processURL(src);
+ const editorElement = extensionThis.editor.view.dom;
+ const editorWidth = editorElement?.clientWidth || 800;
+
+ // Use provided dimensions or calculate optimal ones
+ const finalWidth =
+ width || getOptimalDimensions(processedUrl, editorWidth).width;
+ const finalHeight =
+ height || getOptimalDimensions(processedUrl, editorWidth).height;
+
+ const attrs = {
+ src: processedUrl,
+ width: finalWidth,
+ height: finalHeight,
+ title: title,
+ align: "center" as const,
+ aspectRatio: finalHeight / finalWidth,
+ };
+
+ const node = view.state.schema.nodes.iframe.create(attrs);
+ const tr = view.state.tr.replaceSelectionWith(node);
+ view.dispatch(tr);
+
+ return true; // Prevent default paste behavior
+}
+
+export default IframeExtension;
diff --git a/packages/frappe-ui-react/src/components/textEditor/extensions/iframe/iframeNodeView.tsx b/packages/frappe-ui-react/src/components/textEditor/extensions/iframe/iframeNodeView.tsx
new file mode 100644
index 00000000..94785f6b
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/textEditor/extensions/iframe/iframeNodeView.tsx
@@ -0,0 +1,341 @@
+/**
+ * External dependencies.
+ */
+import { useState, useRef, useEffect, CSSProperties } from "react";
+import { NodeViewWrapper, type NodeViewProps } from "@tiptap/react";
+import {
+ MoveDiagonal2,
+ AlignLeft,
+ AlignCenter,
+ AlignRight,
+} from "lucide-react";
+import clsx from "clsx";
+
+/**
+ * Internal dependencies.
+ */
+import { calculateAspectRatio } from "./utils";
+
+export function IframeNodeView(props: NodeViewProps) {
+ const iframeRef = useRef(null);
+ const containerRef = useRef(null);
+ const isResizingRef = useRef(false);
+ const startDragXRef = useRef(0);
+ const startWidthRef = useRef(0);
+ const originalAspectRatioRef = useRef(9 / 16); // Default 16:9
+ const [isEditable, setIsEditable] = useState(false);
+
+ const selectIframe = () => {
+ const pos = props.getPos();
+ if (typeof pos === "number") {
+ props.editor.commands.setNodeSelection(pos);
+ }
+ };
+
+ const iframeStyles = (): CSSProperties => {
+ const width = props.node.attrs.width || 640;
+ const height =
+ props.node.attrs.height || width * originalAspectRatioRef.current;
+
+ return {
+ width: `${width}px`,
+ height: `${height}px`,
+ };
+ };
+
+ useEffect(() => {
+ const { editor, node, updateAttributes } = props;
+ setIsEditable(editor.isEditable);
+
+ // Calculate aspect ratio from node attributes or URL
+ if (node.attrs.aspectRatio) {
+ originalAspectRatioRef.current = node.attrs.aspectRatio;
+ } else if (node.attrs.src) {
+ const aspectInfo = calculateAspectRatio(node.attrs.src);
+ originalAspectRatioRef.current = aspectInfo.ratio;
+
+ // Update node with calculated aspect ratio
+ updateAttributes({ aspectRatio: aspectInfo.ratio });
+ }
+
+ const handleUpdate = () => {
+ setIsEditable(editor.isEditable);
+ };
+
+ editor.on("update", handleUpdate);
+
+ return () => {
+ editor.off("update", handleUpdate);
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ const startResize = (event: React.MouseEvent) => {
+ if (!isEditable) return;
+ selectIframe();
+ isResizingRef.current = true;
+ startDragXRef.current = event.clientX;
+ startWidthRef.current =
+ containerRef.current?.offsetWidth || props.node.attrs.width || 640;
+
+ // Use stored aspect ratio or calculate from current dimensions
+ if (props.node.attrs.aspectRatio) {
+ originalAspectRatioRef.current = props.node.attrs.aspectRatio;
+ } else {
+ const width = props.node.attrs.width || startWidthRef.current;
+ const height =
+ props.node.attrs.height || width * originalAspectRatioRef.current;
+ if (width && height) {
+ originalAspectRatioRef.current = height / width;
+ }
+ }
+
+ window.addEventListener("mousemove", handleResize);
+ window.addEventListener("mouseup", stopResize);
+ document.body.style.cursor = "ew-resize";
+ };
+
+ const handleResize = (event: MouseEvent) => {
+ if (!isResizingRef.current || !iframeRef.current || !containerRef.current)
+ return;
+
+ const editorElement = props.editor.view.dom;
+ const editorWidth = editorElement.clientWidth;
+
+ const deltaX = event.clientX - startDragXRef.current;
+ let newWidth = startWidthRef.current + deltaX;
+
+ // Add constraints (minimum width, maximum editor width with padding)
+ const MIN_WIDTH = 200;
+ const PADDING = 40;
+ newWidth = Math.max(MIN_WIDTH, Math.min(newWidth, editorWidth - PADDING));
+
+ const newHeight = newWidth * originalAspectRatioRef.current;
+
+ // Apply temporary styles for visual feedback
+ iframeRef.current.style.width = `${newWidth}px`;
+ iframeRef.current.style.height = `${newHeight}px`;
+ containerRef.current.style.width = `${newWidth}px`;
+ };
+
+ const stopResize = () => {
+ if (!isResizingRef.current) return;
+
+ isResizingRef.current = false;
+ window.removeEventListener("mousemove", handleResize);
+ window.removeEventListener("mouseup", stopResize);
+ document.body.style.cursor = "";
+
+ if (iframeRef.current && containerRef.current) {
+ // Capture final dimensions while temporary styles are still applied
+ const finalWidth = iframeRef.current.offsetWidth;
+ const finalHeight = iframeRef.current.offsetHeight;
+
+ // Update attributes
+ props.updateAttributes({
+ width: finalWidth,
+ height: finalHeight,
+ aspectRatio: originalAspectRatioRef.current,
+ });
+
+ // Clear temporary styles immediately (like image extension)
+ iframeRef.current.style.width = "";
+ iframeRef.current.style.height = "";
+ containerRef.current.style.width = "";
+ }
+ };
+
+ const setAlignment = (align: "left" | "center" | "right") => {
+ props.updateAttributes({ align });
+ };
+
+ // Handle keyboard navigation
+ const handleKeydown = (event: React.KeyboardEvent) => {
+ if (event.key === "Enter") {
+ event.preventDefault();
+ createParagraphAfterIframe();
+ } else if (event.key === "Escape" || event.key === "ArrowDown") {
+ event.preventDefault();
+ setCursorAfterIframe();
+ }
+ if (event.key === "ArrowUp") {
+ event.preventDefault();
+ setCursorBeforeIframe();
+ }
+ };
+
+ const setCursorAt = (pos: number) => {
+ props.editor.commands.focus();
+ props.editor.chain().setTextSelection(pos).scrollIntoView().run();
+ };
+
+ const createParagraphAfterIframe = () => {
+ const pos = props.getPos();
+ if (typeof pos !== "number") return;
+ props.editor.commands.focus();
+ props.editor
+ .chain()
+ .setTextSelection(pos + 1)
+ .createParagraphNear()
+ .scrollIntoView()
+ .run();
+ };
+
+ const setCursorAfterIframe = () => {
+ const pos = props.getPos();
+ if (typeof pos === "number") {
+ setCursorAt(pos + 1);
+ }
+ };
+
+ const setCursorBeforeIframe = () => {
+ const pos = props.getPos();
+ if (typeof pos === "number") {
+ setCursorAt(pos - 1);
+ }
+ };
+
+ return (
+
+
+ {status}
+
+ );
+};
+
+export default TaskStatus;
diff --git a/packages/frappe-ui-react/src/components/taskStatus/taskStatus.stories.tsx b/packages/frappe-ui-react/src/components/taskStatus/taskStatus.stories.tsx
new file mode 100644
index 00000000..012fde5e
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/taskStatus/taskStatus.stories.tsx
@@ -0,0 +1,83 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import TaskStatus, { type TaskStatusProps } from "./index";
+
+export default {
+ title: "Components/TaskStatus",
+ component: TaskStatus,
+ parameters: {
+ layout: "centered",
+ },
+ tags: ["autodocs"],
+ argTypes: {
+ status: {
+ control: {
+ type: "select",
+ options: [
+ "Open",
+ "Working",
+ "Pending Review",
+ "Overdue",
+ "Template",
+ "Completed",
+ "Cancelled",
+ ],
+ },
+ description: "Status variant for the task",
+ },
+ },
+} as Meta
+
+ ),
+};
+
+export const Open = {
+ ...Template,
+ args: { status: "Open" },
+};
+export const Working = {
+ ...Template,
+ args: { status: "Working" },
+};
+export const PendingReview = {
+ ...Template,
+ args: { status: "Pending Review" },
+};
+export const Overdue = {
+ ...Template,
+ args: { status: "Overdue" },
+};
+export const TemplateStatus = {
+ ...Template,
+ args: { status: "Template" },
+};
+export const Completed = {
+ ...Template,
+ args: { status: "Completed" },
+};
+export const Cancelled = {
+ ...Template,
+ args: { status: "Cancelled" },
+};
+
+export const AllVariants = {
+ render: () => (
+
+ {[
+ "Open",
+ "Working",
+ "Pending Review",
+ "Overdue",
+ "Template",
+ "Completed",
+ "Cancelled",
+ ].map((status) => (
+
+ ),
+};
diff --git a/packages/frappe-ui-react/src/components/textEditor/extensions/iframe/iframe-extension.ts b/packages/frappe-ui-react/src/components/textEditor/extensions/iframe/iframe-extension.ts
new file mode 100644
index 00000000..f58edd60
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/textEditor/extensions/iframe/iframe-extension.ts
@@ -0,0 +1,401 @@
+/**
+ * External dependencies.
+ */
+import { ReactNodeViewRenderer, Node, mergeAttributes } from "@tiptap/react";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+
+/**
+ * Internal dependencies.
+ */
+import { IframeNodeView } from "./iframeNodeView";
+import {
+ validateURL,
+ processURL,
+ getOptimalDimensions,
+ ALLOWED_DOMAINS,
+ type IframeOptions,
+} from "./utils";
+
+export interface SetIframeOptions {
+ src: string;
+ width?: number;
+ height?: number;
+ title?: string;
+ interactive?: boolean;
+ align?: "left" | "center" | "right";
+}
+
+declare module "@tiptap/react" {
+ interface Commands
+
+ {props.node.attrs.src ? (
+