Feature: Add comments and sheet components.

packages/frappe-ui-react/package.json

@@ -43,9 +43,12 @@
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.1",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tailwindcss/vite": "^4.1.11",
+    "class-variance-authority": "^0.7.1",
+    "date-fns": "^3.6.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "dompurify": "^3.2.6",
@@ -64,7 +67,8 @@
     "react-quill-new": "^3.6.0",
     "react-resizable": "^3.0.5",
     "styled-components": "^6.1.19",
-    "tailwindcss": "^4.1.11"
+    "tailwindcss": "^4.1.11",
+    "tailwind-merge": "^2.4.0"
   },
   "devDependencies": {
     "@types/feather-icons": "^4.29.4",

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>
+    <CardHeader>
+      <CardTitle>Card Title</CardTitle>
+      <CardDescription>This is a card description.</CardDescription>
+    </CardHeader>
+    <CardContent>
+      <p>This is the main content of the card.</p>
+    </CardContent>
+    <CardFooter>
+      <Button>Action</Button>
+    </CardFooter>
+  </Card>
+);

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<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`rounded-lg border bg-card text-black shadow-sm ${className}`}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+export const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`flex flex-col space-y-1.5 p-6 ${className}`}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+export const CardTitle = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`text-2xl font-semibold leading-none tracking-tight ${className}`}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+export const CardDescription = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`text-sm text-slate-500 ${className}`}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
+
+export const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={`p-6 pt-0 ${className}`} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+export const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={`flex items-center p-6 pt-0 ${className}`}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";

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<typeof Comments> = {
+  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<typeof Comments> = {
+  name: 'Full Interactive Comment Thread',
+  render: () => <Comments initialComments={initialComments} />,
+};