[WEB-4738] feat: add Skeleton component with respective stories in propel

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",

packages/propel/src/skeleton/index.ts

@@ -0,0 +1 @@
+export * from "./root";

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 };

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>
+  ),
+};

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",