Merge pull request #181 from rtCamp/feat/component-skeleton

Feat: Component Skeleton

Author: ayushnirwal

packages/frappe-ui-react/src/components/index.ts

@@ -26,6 +26,7 @@ export * from "./popover";
 export * from "./rating";
 export * from "./select";
 export * from "./sidebar";
+export * from "./skeleton";
 export * from "./spinner";
 export * from "./switch";
 export { default as TabButtons } from "./tabButtons";

packages/frappe-ui-react/src/components/skeleton/index.ts

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

packages/frappe-ui-react/src/components/skeleton/skeleton.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Skeleton } from "./skeleton";
+
+const meta: Meta<typeof Skeleton> = {
+  title: "Components/Skeleton",
+  tags: ["autodocs"],
+  component: Skeleton,
+  parameters: { docs: { source: { type: "dynamic" } }, layout: "centered" },
+  argTypes: {
+    className: {
+      control: "text",
+      description: "CSS classes for the Label",
+      type: "string",
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Skeleton>;
+
+export const Default: Story = {
+  args: {
+    className: "w-[100px] h-[100px]",
+  },
+  render: (args) => {
+    return <Skeleton className={args.className} />;
+  },
+};

packages/frappe-ui-react/src/components/skeleton/skeleton.tsx

@@ -0,0 +1,16 @@
+/**
+ * External dependencies.
+ */
+import clsx from "clsx";
+
+export const Skeleton = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className={clsx("animate-pulse rounded-md bg-surface-gray-4", className)}
+      {...props}
+    />
+  );
+};