From ff181e566f9f1203f7434328b700a9f5b8555ebd Mon Sep 17 00:00:00 2001
From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com>
Date: Fri, 5 Sep 2025 15:51:05 +0530
Subject: [PATCH] [WEB-4738] feat: add Skeleton component with respective
 stories in propel (#7704)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ feat: add Skeleton component with respective stories in propel

* 🚨 fix: lint issues

* ♻️ refactor : enhance Skeleton component with improved props and structure

* ✨ feat: add Skeleton component entry to package.json

* 🚨 fix: lint

* ♻️ refactor: rename Skeleton to skeleton

* fix: rename fixes

* ♻️ refactor: rename skeleton

* 🚨 fix: lint

* ♻️ refactor: add skeleton entry to tsdown config and package.json

* ♻️  refactor: sorted propel exports

---------

Co-authored-by: sriramveeraghanta <veeraghanta.sriram@gmail.com>
---
 packages/propel/package.json                  |  1 +
 packages/propel/src/skeleton/index.ts         |  1 +
 packages/propel/src/skeleton/root.tsx         | 36 +++++++++++++++++++
 .../propel/src/skeleton/skeleton.stories.tsx  | 33 +++++++++++++++++
 packages/propel/tsdown.config.ts              |  1 +
 5 files changed, 72 insertions(+)
 create mode 100644 packages/propel/src/skeleton/index.ts
 create mode 100644 packages/propel/src/skeleton/root.tsx
 create mode 100644 packages/propel/src/skeleton/skeleton.stories.tsx

diff --git a/packages/propel/package.json b/packages/propel/package.json
index 1fab620b8..15933f2af 100644
--- a/packages/propel/package.json
+++ b/packages/propel/package.json
@@ -27,6 +27,7 @@
     "./icons": "./dist/icons/index.js",
     "./menu": "./dist/menu/index.js",
     "./popover": "./dist/popover/index.js",
+    "./skeleton": "./dist/skeleton/index.js",
     "./styles/fonts": "./dist/styles/fonts/index.css",
     "./switch": "./dist/switch/index.js",
     "./table": "./dist/table/index.js",
diff --git a/packages/propel/src/skeleton/index.ts b/packages/propel/src/skeleton/index.ts
new file mode 100644
index 000000000..1efe34c51
--- /dev/null
+++ b/packages/propel/src/skeleton/index.ts
@@ -0,0 +1 @@
+export * from "./root";
diff --git a/packages/propel/src/skeleton/root.tsx b/packages/propel/src/skeleton/root.tsx
new file mode 100644
index 000000000..dee2c27f0
--- /dev/null
+++ b/packages/propel/src/skeleton/root.tsx
@@ -0,0 +1,36 @@
+import React from "react";
+// helpers
+import { cn } from "../utils/classname";
+
+type SkeletonProps = {
+  children: React.ReactNode;
+  className?: string;
+  ariaLabel?: string;
+};
+
+const SkeletonRoot = ({ children, className = "", ariaLabel = "Loading content" }: SkeletonProps) => (
+  <div data-slot="skeleton" className={cn("animate-pulse", className)} role="status" aria-label={ariaLabel}>
+    {children}
+  </div>
+);
+
+type ItemProps = {
+  height?: string;
+  width?: string;
+  className?: string;
+};
+
+const SkeletonItem: React.FC<ItemProps> = ({ height = "auto", width = "auto", className = "" }) => (
+  <div
+    data-slot="skeleton-item"
+    className={cn("rounded-md bg-custom-background-80", className)}
+    style={{ height, width }}
+  />
+);
+
+const Skeleton = Object.assign(SkeletonRoot, { Item: SkeletonItem });
+
+SkeletonRoot.displayName = "plane-ui-skeleton";
+SkeletonItem.displayName = "plane-ui-skeleton-item";
+
+export { Skeleton };
diff --git a/packages/propel/src/skeleton/skeleton.stories.tsx b/packages/propel/src/skeleton/skeleton.stories.tsx
new file mode 100644
index 000000000..262bcd052
--- /dev/null
+++ b/packages/propel/src/skeleton/skeleton.stories.tsx
@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Skeleton } from "./index";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Components/Skeleton",
+  component: Skeleton,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Skeleton className="w-80 flex flex-col gap-2">
+      <Skeleton.Item height="40px" width="100%" />
+    </Skeleton>
+  ),
+};
+
+export const Card: Story = {
+  render: () => (
+    <Skeleton className="w-80 flex flex-col gap-4">
+      <Skeleton.Item height="200px" width="100%" />
+      <div className="flex flex-col gap-2">
+        <Skeleton.Item height="20px" width="50%" />
+        <Skeleton.Item height="20px" width="30%" />
+      </div>
+    </Skeleton>
+  ),
+};
diff --git a/packages/propel/tsdown.config.ts b/packages/propel/tsdown.config.ts
index 05d57001a..8f23c301c 100644
--- a/packages/propel/tsdown.config.ts
+++ b/packages/propel/tsdown.config.ts
@@ -13,6 +13,7 @@ export default defineConfig({
     "src/icons/index.ts",
     "src/menu/index.ts",
     "src/popover/index.ts",
+    "src/skeleton/index.ts",
     "src/switch/index.ts",
     "src/table/index.ts",
     "src/tabs/index.ts",