- {!hideSearch && (
-
-
-
-
query}
- onChange={(
- event: React.ChangeEvent
- ) => {
- cancelRef.current?.removeAttribute("inert");
- cancelRef.current?.removeAttribute("aria-hidden");
- setQuery(event.target.value);
- }}
- autoComplete="off"
- onBlur={() => {
- cancelRef.current?.removeAttribute("inert");
- cancelRef.current?.removeAttribute("aria-hidden");
- }}
- placeholder="Search"
- />
- {
- cancelRef.current?.removeAttribute("inert");
- cancelRef.current?.removeAttribute("aria-hidden");
- }}
- >
- {loading ? (
-
+ )}
+
+
+ {!hideSearch && (
+
+
+
+
query}
+ onChange={(
+ event: React.ChangeEvent
+ ) => {
+ cancelRef.current?.removeAttribute("inert");
+ cancelRef.current?.removeAttribute("aria-hidden");
+ setQuery(event.target.value);
+ }}
+ autoComplete="off"
+ onBlur={() => {
+ cancelRef.current?.removeAttribute("inert");
+ cancelRef.current?.removeAttribute("aria-hidden");
+ }}
+ placeholder="Search"
/>
- ) : (
-
- )}
+ {loading ? (
+
+ ) : (
+
+ )}
+
+
-
- )}
+ )}
-
- {groups.length === 0 ? (
-
- No results found
-
- ) : (
- groups.map((group) => (
-
- {group.group && !group.hideLabel && (
-
- {group.group}
-
- )}
- {group.items.slice(0, maxOptions).map((option, idx) => (
-
- `flex cursor-pointer items-center justify-between rounded px-2.5 py-1.5 text-base ${
- focus ? "bg-surface-gray-3" : ""
- } ${
- (option as Option).disabled ? "opacity-50" : ""
- }`
- }
- >
- <>
-
- {(itemPrefix || multiple) && (
-
- {itemPrefix ? (
- itemPrefix(option as AutocompleteOption)
- ) : isOptionSelected(option as Option) ? (
-
- ) : (
-
+
+ {groups.length === 0 ? (
+
+ No results found
+
+ ) : (
+ groups.map((group) => (
+
+ {group.group && !group.hideLabel && (
+
+ {group.group}
+
+ )}
+ {group.items
+ .slice(0, maxOptions)
+ .map((option, idx) => (
+
+ `flex cursor-pointer items-center justify-between rounded px-2.5 py-1.5 text-base ${
+ focus ? "bg-surface-gray-3" : ""
+ } ${
+ (option as Option).disabled
+ ? "opacity-50"
+ : ""
+ }`
+ }
+ >
+ <>
+
+ {(itemPrefix || multiple) && (
+
+ {itemPrefix ? (
+ itemPrefix(
+ option as AutocompleteOption
+ )
+ ) : isOptionSelected(
+ option as Option
+ ) ? (
+
+ ) : (
+
+ )}
+
)}
+
+ {getLabel(option)}
+
- {itemSuffix(option as Option)}
- {(option as Option)?.description && (
-
- {(option as Option).description}
+
+ {itemSuffix && (
+
+ {itemSuffix(option as Option)}
+ {(option as Option)?.description && (
+
+ {(option as Option).description}
+
+ )}
)}
-
- )}
-
-
- ))}
-
-
- {showFooter && multiple && (
-
- {multiple ? (
-
- {!areAllOptionsSelected && (
-
- )}
- {areAllOptionsSelected && (
-
- )}
-
- ) : (
-
-
-
+
+
+ ))}
+
+ ))
)}
-
- )}
-
+ {multiple ? (
+
+ {!areAllOptionsSelected && (
+
+ )}
+ {areAllOptionsSelected && (
+
+ )}
+
+ ) : (
+
+
+
+ )}
+
);
};
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.
+
+
+ This is the main content of the card.
+
+
+
+
+
+);
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..55d0127c
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/card/card.tsx
@@ -0,0 +1,69 @@
+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/comments/comment.stories.tsx b/packages/frappe-ui-react/src/components/comments/comment.stories.tsx
new file mode 100644
index 00000000..a6066531
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/comments/comment.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Comments from './comments';
+import type { CommentData } from './types';
+
+const meta: Meta = {
+ title: 'Components/Comment System',
+ component: Comments,
+ parameters: {
+ layout: 'centered',
+ },
+ tags: ['autodocs'],
+};
+
+export default meta;
+
+const initialComments: CommentData[] = [
+ {
+ id: 1,
+ author: {
+ name: 'Kanchan Chauhan',
+ avatarUrl: 'https://i.pravatar.cc/40?img=1',
+ },
+ timestamp: '1 month ago',
+ text: 'Hi @Devarshi Sathiya, did you check the assignment sent over by the candidate?',
+ replies: [
+ {
+ id: 2,
+ author: {
+ name: 'Devarshi Sathiya',
+ avatarUrl: 'https://i.pravatar.cc/40?img=2',
+ },
+ timestamp: '1 month ago',
+ text: 'Minor Update: Seems the assignment submission was not made properly adhering the guidelines, have asked the candidate to use our portal instead.',
+ replies: [
+ {
+ id: 3,
+ author: {
+ name: 'Niraj Gautam',
+ avatarUrl: 'https://i.pravatar.cc/40?img=3',
+ },
+ timestamp: '1 month ago',
+ text: 'Sure, works for me. Thanks!',
+ replies: [],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ id: 4,
+ author: {
+ name: 'Niraj Gautam',
+ avatarUrl: 'https://i.pravatar.cc/40?img=3',
+ },
+ timestamp: '1 month ago',
+ text: 'Hey @Devarshi Sathiya, can you tell me what happened to my assignment submission? Seems to be pending for a while.',
+ replies: [
+ {
+ id: 5,
+ author: {
+ name: 'Devarshi Sathiya',
+ avatarUrl: 'https://i.pravatar.cc/40?img=2',
+ },
+ timestamp: '1 month ago',
+ text: "Yes, I am currently checking it. It seems to be well done, I'll submit over the full report by the end of the day.",
+ replies: [],
+ },
+ ],
+ },
+];
+
+export const FullThread: StoryObj = {
+ name: 'Full Interactive Comment Thread',
+ render: () => ,
+};
\ No newline at end of file
diff --git a/packages/frappe-ui-react/src/components/comments/comment.tsx b/packages/frappe-ui-react/src/components/comments/comment.tsx
new file mode 100644
index 00000000..ab7d74f4
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/comments/comment.tsx
@@ -0,0 +1,123 @@
+import React, { useCallback, useState } from "react";
+import CommentForm from "./commentForm";
+import type { CommentData } from "./types";
+import { Avatar } from "../avatar";
+import { Button } from "../button";
+import { MessageSquareText, ReplyIcon } from "lucide-react";
+
+interface CommentProps {
+ comment: CommentData;
+ onAddReply: (parentId: number, text: string) => void;
+ handleEditComment: (id: number, text: string) => void;
+}
+
+function parseMentions(text: string): React.ReactNode[] {
+ const mentionRegex = /(@\w+\s\w+)/g;
+ const parts = text.split(mentionRegex);
+
+ return parts.map((part, index) =>
+ mentionRegex.test(part) ? (
+
+ {part}
+
+ ) : (
+ <>
+
+
+ )
+ );
+}
+
+function Comment({ comment, onAddReply, handleEditComment }: CommentProps) {
+ const [isReplying, setIsReplying] = useState(false);
+ const [isEditing, setIsEditing] = useState(false);
+
+ const handleReplySubmit = useCallback((text: string): void => {
+ if (isReplying) {
+ onAddReply(comment.id, text);
+ setIsReplying(false);
+ }else{
+ handleEditComment(comment.id, text);
+ setIsEditing(false);
+ }
+ }, [comment.id, handleEditComment, isReplying, onAddReply]);
+
+ return (
+
+
+
+
+
+ {comment.author.name} commented
+ ยท {comment.timestamp}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {parseMentions(comment.text)}
+
+
+
+
+
+ {isReplying && (
+
+
+
+ )}
+
+ {isEditing && (
+
+
+
+ )}
+
+ {comment.replies &&
+ comment.replies.length > 0 &&
+ comment.replies.map((reply, index) => (
+
+ ))}
+
+
Comments
+
+ {comments.length === 0 && (
+
+ )}
+
+
+ {comments.map((comment, index) => (
+
+ ))}
+
+
+ setValue(_value)}
+ />
+
);
},
};
diff --git a/packages/frappe-ui-react/src/components/hoverCard/index.tsx b/packages/frappe-ui-react/src/components/hoverCard/index.tsx
new file mode 100644
index 00000000..cd33559d
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/hoverCard/index.tsx
@@ -0,0 +1,28 @@
+/*
+ * External dependencies.
+ */
+import { Root, Trigger, Content, type HoverCardContentProps } from "@radix-ui/react-hover-card";
+
+/**
+ * Internal dependencies.
+ */
+import { mergeClassNames } from "../../utils";
+
+const HoverCard = Root;
+
+const HoverCardTrigger = Trigger;
+
+const HoverCardContent = ({ className = "", align = "center", sideOffset = 4, ...props }: HoverCardContentProps, ref: React.Ref) => (
+
+);
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
\ No newline at end of file
diff --git a/packages/frappe-ui-react/src/components/index.ts b/packages/frappe-ui-react/src/components/index.ts
index dc7053e8..740334d6 100644
--- a/packages/frappe-ui-react/src/components/index.ts
+++ b/packages/frappe-ui-react/src/components/index.ts
@@ -47,3 +47,5 @@ export {
export { default as keyboardShortcut } from "./keyboardShortcut";
export { default as LoadingIndicator } from "./loadingIndicator";
export { default as LoadingText } from "./loadingText";
+export * from './sheet';
+export * from './comments';
diff --git a/packages/frappe-ui-react/src/components/listview/listHeader.tsx b/packages/frappe-ui-react/src/components/listview/listHeader.tsx
index 605f3ce3..c1f03207 100644
--- a/packages/frappe-ui-react/src/components/listview/listHeader.tsx
+++ b/packages/frappe-ui-react/src/components/listview/listHeader.tsx
@@ -35,7 +35,7 @@ const ListHeader: React.FC = ({ children }) => {
item={column}
lastItem={index === list.columns.length - 1}
onColumnWidthUpdated={(width: number) => {
- list.updateColumnWidth(index, width);
+ list.options.updateColumnWidth(index, width);
}}
/>
))}
diff --git a/packages/frappe-ui-react/src/components/listview/listprovider.tsx b/packages/frappe-ui-react/src/components/listview/listprovider.tsx
index 2c7bc539..5244b598 100644
--- a/packages/frappe-ui-react/src/components/listview/listprovider.tsx
+++ b/packages/frappe-ui-react/src/components/listview/listprovider.tsx
@@ -58,8 +58,9 @@ export const ListProvider: React.FC = ({
title: "No Data",
description: "No data available",
},
+ updateColumnWidth,
};
- }, [options]);
+ }, [options, updateColumnWidth]);
const showGroupedRows = useMemo(
() => rows.every((row) => row.group && row.rows && Array.isArray(row.rows)),
@@ -135,7 +136,6 @@ export const ListProvider: React.FC = ({
toggleAllRows,
emptyState: options.emptyState,
setColumns: () => {},
- updateColumnWidth,
},
}),
[
@@ -150,7 +150,6 @@ export const ListProvider: React.FC = ({
allRowsSelected,
toggleRow,
toggleAllRows,
- updateColumnWidth,
]
);
return (
diff --git a/packages/frappe-ui-react/src/components/sheet/index.tsx b/packages/frappe-ui-react/src/components/sheet/index.tsx
new file mode 100644
index 00000000..f640f822
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/sheet/index.tsx
@@ -0,0 +1,110 @@
+/**
+ * External dependencies.
+ */
+import * as React from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+/**
+ * Internal dependencies.
+ */
+import { mergeClassNames } from "../../utils";
+
+const sheetVariants = cva(
+ "fixed z-51 gap-4 bg-surface-white p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+ {
+ variants: {
+ side: {
+ top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+ bottom:
+ "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+ left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+ right:
+ "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+ },
+ },
+ defaultVariants: {
+ side: "right",
+ },
+ }
+);
+
+interface SheetContentProps
+ extends React.ComponentPropsWithoutRef,
+ VariantProps {}
+
+const Sheet = SheetPrimitive.Root;
+const SheetTrigger = SheetPrimitive.Trigger;
+const SheetClose = SheetPrimitive.Close;
+
+const SheetContent =({ side = "right", className, children, ...props }: SheetContentProps, ref?: React.Ref) => (
+
+
+
+ {children}
+
+
+ Close
+
+
+
+);
+
+const SheetHeader = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+
+const SheetFooter = ({
+ className,
+ ...props
+}: React.HTMLAttributes) => (
+
+);
+
+const SheetTitle = ({ className, ...props }: SheetPrimitive.DialogTitleProps, ref?: React.Ref) => (
+
+);
+
+const SheetDescription = ({ className, ...props }: SheetPrimitive.DialogDescriptionProps, ref?: React.Ref) => (
+
+);
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+ Sheet,
+ SheetTrigger,
+ SheetClose,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+};
\ No newline at end of file
diff --git a/packages/frappe-ui-react/src/components/sheet/sheet.stories.tsx b/packages/frappe-ui-react/src/components/sheet/sheet.stories.tsx
new file mode 100644
index 00000000..c9716f0e
--- /dev/null
+++ b/packages/frappe-ui-react/src/components/sheet/sheet.stories.tsx
@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import {
+ Sheet,
+ SheetTrigger,
+ SheetContent,
+ SheetHeader,
+ SheetFooter,
+ SheetTitle,
+ SheetDescription,
+ SheetClose,
+} from './';
+import { Button } from '../button';
+import FormLabel from '../formLabel';
+import { TextInput } from '../textInput';
+
+const meta: Meta = {
+ title: 'Components/Sheet',
+ component: SheetContent,
+ tags: ['autodocs'],
+ argTypes: {
+ side: {
+ control: 'radio',
+ options: ['top', 'bottom', 'left', 'right'],
+ description: 'Which side the sheet appears from.',
+ },
+ },
+ parameters: {
+ component: null,
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ name: 'Default (Right Side)',
+ args: {
+ side: 'right',
+ },
+ render: (args) => (
+
+
+
+
+
+
+ Edit Profile
+
+ Make changes to your profile here. Click save when you're done.
+
+
+
+
+
+
+
+
+
+
+ ),
+};
+
+
+export const LeftSide: Story = {
+ ...Default,
+ name: 'From Left',
+ args: {
+ side: 'left',
+ },
+};
+
+export const TopSide: Story = {
+ ...Default,
+ name: 'From Top',
+ args: {
+ side: 'top',
+ },
+};
+
+export const BottomSide: Story = {
+ ...Default,
+ name: 'From Bottom',
+ args: {
+ side: 'bottom',
+ },
+};
\ No newline at end of file
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 (
+
+ {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;
+
+const Template: StoryObj<{ status: TaskStatusProps }> = {
+ render: (args) => (
+
+
+
+ ),
+};
+
+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/index.tsx b/packages/frappe-ui-react/src/components/textEditor/index.tsx
index ff4a03ab..bc2c9c83 100644
--- a/packages/frappe-ui-react/src/components/textEditor/index.tsx
+++ b/packages/frappe-ui-react/src/components/textEditor/index.tsx
@@ -25,6 +25,7 @@ export interface TextEditorProps extends ReactQuill.ReactQuillProps {
onChange: (value: string) => void;
value?: string;
placeholder?: string;
+ editingAreaRef?: React.RefObject;
}
Quill.register("modules/imageResize", ImageResize);
diff --git a/packages/frappe-ui-react/src/components/textarea/textarea.tsx b/packages/frappe-ui-react/src/components/textarea/textarea.tsx
index 453676eb..f33a36b6 100644
--- a/packages/frappe-ui-react/src/components/textarea/textarea.tsx
+++ b/packages/frappe-ui-react/src/components/textarea/textarea.tsx
@@ -16,6 +16,8 @@ const Textarea = forwardRef(
rows = 3,
htmlId,
placeholder,
+ extraClasses = '',
+ ...props
},
ref
) => {
@@ -62,7 +64,7 @@ const Textarea = forwardRef(
const textColor = disabled ? "text-ink-gray-5" : "text-ink-gray-8";
- return `resize-y transition-colors w-full block outline-none ${sizeClasses} ${paddingClasses} ${variantClasses} ${textColor}`;
+ return `resize-y transition-colors w-full block outline-none ${sizeClasses} ${paddingClasses} ${variantClasses} ${textColor} ${extraClasses}`;
}, [size, disabled, variant]);
const labelClasses = useMemo(() => {
@@ -117,7 +119,8 @@ const Textarea = forwardRef(
id={htmlId}
value={value}
onChange={handleChange}
- data-testid="textarea"
+ data-testid="textarea"
+ {...props}
/>