@kala-ui/react 0.0.1-beta.1

package/dist/src/components/skeleton/skeleton.stories.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button } from "../button";
+import { CardContent, Card as UICard } from "../card";
+import { Skeleton, SkeletonAvatar, SkeletonButton, SkeletonCardContent, SkeletonCircle, SkeletonHeader, SkeletonParagraph, SkeletonRectangle, SkeletonText, SkeletonWrapper, } from "./index";
+const meta = {
+    title: "Layout/Skeleton",
+    parameters: {
+        layout: "padded",
+        docs: {
+            description: {
+                component: "Comprehensive skeleton loading system for preventing CLS and providing excellent loading experiences.",
+            },
+        },
+    },
+    tags: ["autodocs"],
+};
+export default meta;
+// ============================================================================
+// Base Skeleton
+// ============================================================================
+export const Default = {
+    render: () => _jsx(Skeleton, { className: "w-20 h-20" }),
+};
+export const FadeMode = {
+    render: () => (_jsx(Skeleton, { fade: true, fadeDuration: 500, className: "w-32 h-8" })),
+};
+export const CustomSizes = {
+    render: () => (_jsxs("div", { className: "space-y-4", children: [_jsx(Skeleton, { className: "w-16 h-16" }), _jsx(Skeleton, { className: "w-32 h-8" }), _jsx(Skeleton, { className: "w-48 h-6" })] })),
+};
+// ============================================================================
+// Skeleton Patterns
+// ============================================================================
+export const PatternsLibrary = {
+    render: () => (_jsxs("div", { className: "space-y-8 max-w-2xl", children: [_jsxs("div", { className: "space-y-4 rounded-lg border bg-card p-6 text-card-foreground theme-card", children: [_jsx("h3", { className: "font-semibold mb-4", children: "SkeletonText" }), _jsx(SkeletonText, {}), _jsx(SkeletonText, { lines: 5, lastLineWidth: "40%" }), _jsx(SkeletonText, { lines: 2, lastLineWidth: "90%" })] }), _jsxs("div", { className: "space-y-4 rounded-lg border bg-card p-6 text-card-foreground theme-card", children: [_jsx("h3", { className: "font-semibold mb-4", children: "SkeletonCircle" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(SkeletonCircle, { size: "2rem" }), _jsx(SkeletonCircle, { size: "3rem" }), _jsx(SkeletonCircle, { size: "4rem" })] })] }), _jsxs("div", { className: "space-y-4 rounded-lg border bg-card p-6 text-card-foreground theme-card", children: [_jsx("h3", { className: "font-semibold mb-4", children: "SkeletonRectangle" }), _jsxs("div", { className: "space-y-4", children: [_jsx(SkeletonRectangle, { width: "100%", height: "150px" }), _jsx(SkeletonRectangle, { width: "200px", height: "100px", rounded: "lg" })] })] }), _jsxs("div", { className: "space-y-4 rounded-lg border bg-card p-6 text-card-foreground theme-card", children: [_jsx("h3", { className: "font-semibold mb-4", children: "SkeletonAvatar" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(SkeletonAvatar, { size: "sm" }), _jsx(SkeletonAvatar, { size: "md" }), _jsx(SkeletonAvatar, { size: "lg" })] })] }), _jsxs("div", { className: "space-y-4 rounded-lg border bg-card p-6 text-card-foreground theme-card", children: [_jsx("h3", { className: "font-semibold mb-4", children: "SkeletonParagraph" }), _jsx(SkeletonParagraph, {}), _jsx(SkeletonParagraph, { paragraphs: 3 })] }), _jsxs("div", { className: "space-y-4 rounded-lg border bg-card p-6 text-card-foreground theme-card", children: [_jsx("h3", { className: "font-semibold mb-4", children: "SkeletonHeader" }), _jsx(SkeletonHeader, { showSubtitle: true }), _jsx(SkeletonHeader, { showSubtitle: false }), _jsx(SkeletonHeader, { titleWidth: "40%", subtitleWidth: "60%" })] }), _jsxs("div", { className: "space-y-4 rounded-lg border bg-card p-6 text-card-foreground theme-card", children: [_jsx("h3", { className: "font-semibold mb-4", children: "SkeletonButton" }), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(SkeletonButton, { width: "6rem", size: "sm" }), _jsx(SkeletonButton, { width: "8rem", size: "md" }), _jsx(SkeletonButton, { width: "10rem", size: "lg" })] })] }), _jsxs("div", { className: "space-y-4 rounded-lg border bg-card p-6 text-card-foreground theme-card", children: [_jsx("h3", { className: "font-semibold mb-4", children: "SkeletonCardContent" }), _jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [_jsx(SkeletonCardContent, {}), _jsx(SkeletonCardContent, { showHeader: false, contentLines: 2 })] })] })] })),
+};
+// ============================================================================
+// Composed Patterns
+// ============================================================================
+export const Card = {
+    name: "Card Pattern",
+    render: () => (_jsxs("div", { className: "flex flex-col gap-3 max-w-sm", children: [_jsx(SkeletonRectangle, { width: "100%", height: "200px", rounded: "lg" }), _jsx(SkeletonHeader, { showSubtitle: true }), _jsx(SkeletonText, { lines: 3 })] })),
+};
+export const List = {
+    render: () => (_jsx("div", { className: "flex flex-col gap-3 max-w-md w-full", children: Array.from({ length: 5 }).map((_, i) => (_jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-card p-4 text-card-foreground theme-card", children: [_jsx(SkeletonAvatar, { size: "md" }), _jsxs("div", { className: "flex-1 space-y-2", children: [_jsx(SkeletonHeader, { showSubtitle: false }), _jsx(SkeletonText, { lines: 1, lastLineWidth: "60%" })] })] }, `skeleton-item-${i}`))) })),
+};
+export const UserProfile = {
+    render: () => (_jsxs("div", { className: "flex items-center gap-4 rounded-lg border bg-card p-6 text-card-foreground theme-card", children: [_jsx(SkeletonAvatar, { size: "lg" }), _jsxs("div", { className: "space-y-2 flex-1", children: [_jsx(SkeletonHeader, { showSubtitle: true }), _jsx(SkeletonText, { lines: 2 })] })] })),
+};
+export const DataGrid = {
+    render: () => (_jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsx(UICard, { className: "h-full", children: _jsx(CardContent, { className: "p-6", children: _jsx(SkeletonCardContent, { showHeader: false, contentLines: 3, showFooter: false }) }) }, i))) })),
+};
+export const Article = {
+    render: () => (_jsxs("div", { className: "max-w-2xl space-y-4 rounded-lg border bg-card p-6 text-card-foreground theme-card", children: [_jsx(SkeletonHeader, { titleWidth: "60%" }), _jsx(SkeletonRectangle, { width: "100%", height: "250px", rounded: "lg" }), _jsx(SkeletonParagraph, { paragraphs: 2 }), _jsxs("div", { className: "flex gap-2", children: [_jsx(SkeletonButton, { width: "6rem" }), _jsx(SkeletonButton, { width: "6rem" })] })] })),
+};
+// ============================================================================
+// SkeletonWrapper
+// ============================================================================
+export const WithWrapper = {
+    render: () => {
+        const [isLoading, setIsLoading] = useState(true);
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Button, { onClick: () => setIsLoading(!isLoading), children: "Toggle Loading" }), _jsx(SkeletonWrapper, { isLoading: isLoading, skeleton: _jsxs("div", { className: "space-y-4", children: [_jsx(SkeletonHeader, {}), _jsx(SkeletonParagraph, {})] }), children: _jsxs("div", { className: "space-y-4", children: [_jsx("h2", { className: "text-2xl font-bold", children: "Article Title" }), _jsx("p", { className: "text-muted-foreground", children: "This is the actual content that smoothly fades in after loading. The skeleton fades out with a smooth transition, and this content fades in." }), _jsx("p", { className: "text-muted-foreground", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua." })] }) })] }));
+    },
+};
+export const WrapperCustomDuration = {
+    render: () => {
+        const [isLoading, setIsLoading] = useState(true);
+        const [duration, setDuration] = useState(300);
+        return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, { onClick: () => setIsLoading(!isLoading), children: "Toggle Loading" }), _jsx(Button, { onClick: () => setDuration(150), variant: "outline", children: "Fast (150ms)" }), _jsx(Button, { onClick: () => setDuration(300), variant: "outline", children: "Normal (300ms)" }), _jsx(Button, { onClick: () => setDuration(600), variant: "outline", children: "Slow (600ms)" })] }), _jsxs("p", { className: "text-sm text-muted-foreground", children: ["Current duration: ", duration, "ms"] }), _jsx(SkeletonWrapper, { isLoading: isLoading, duration: duration, skeleton: _jsx(SkeletonHeader, {}), children: _jsx("h2", { className: "text-2xl font-bold", children: "Content with custom transition" }) })] }));
+    },
+};
+export const WrapperMultipleCards = {
+    render: () => {
+        const [isLoading, setIsLoading] = useState(true);
+        return (_jsxs("div", { className: "space-y-4", children: [_jsx(Button, { onClick: () => setIsLoading(!isLoading), children: "Toggle All Loading" }), _jsx("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: Array.from({ length: 6 }).map((_, i) => (_jsx(UICard, { children: _jsx(CardContent, { className: "p-6", children: _jsx(SkeletonWrapper, { isLoading: isLoading, skeleton: _jsxs("div", { className: "space-y-3", children: [_jsx(SkeletonHeader, { showSubtitle: false }), _jsx(SkeletonText, { lines: 2 })] }), children: _jsxs("div", { className: "space-y-3", children: [_jsxs("h4", { className: "font-semibold", children: ["Card Title ", i + 1] }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Card description goes here." })] }) }) }) }, i))) })] }));
+    },
+};
+//# sourceMappingURL=skeleton.stories.js.map

package/dist/src/components/skeleton/skeleton.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.stories.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/skeleton/skeleton.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=skeleton.test.d.ts.map

package/dist/src/components/skeleton/skeleton.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.test.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.test.tsx"],"names":[],"mappings":""}

package/dist/src/components/skeleton/skeleton.test.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Skeleton } from "./skeleton";
+describe("Skeleton", () => {
+    it("should render skeleton", () => {
+        const { container } = render(_jsx(Skeleton, {}));
+        const skeleton = container.querySelector('[data-slot="skeleton"]');
+        expect(skeleton).toBeInTheDocument();
+    });
+    it("should apply custom className", () => {
+        const { container } = render(_jsx(Skeleton, { className: "custom-skeleton" }));
+        const skeleton = container.querySelector('[data-slot="skeleton"]');
+        expect(skeleton).toHaveClass("custom-skeleton");
+    });
+    it("should render with custom dimensions", () => {
+        const { container } = render(_jsx(Skeleton, { className: "w-20 h-20" }));
+        const skeleton = container.querySelector('[data-slot="skeleton"]');
+        expect(skeleton).toHaveClass("w-20", "h-20");
+    });
+    it("should render multiple skeletons", () => {
+        const { container } = render(_jsxs("div", { children: [_jsx(Skeleton, {}), _jsx(Skeleton, {}), _jsx(Skeleton, {})] }));
+        const skeletons = container.querySelectorAll('[data-slot="skeleton"]');
+        expect(skeletons).toHaveLength(3);
+    });
+    describe("Fade Mode", () => {
+        it("should render with pulse animation by default", () => {
+            const { container } = render(_jsx(Skeleton, {}));
+            const skeleton = container.querySelector('[data-slot="skeleton"]');
+            expect(skeleton).toHaveClass("animate-pulse");
+            expect(skeleton).not.toHaveClass("animate-fade-in");
+        });
+        it("should render with fade animation when fade prop is true", () => {
+            const { container } = render(_jsx(Skeleton, { fade: true }));
+            const skeleton = container.querySelector('[data-slot="skeleton"]');
+            expect(skeleton).toHaveClass("animate-fade-in");
+            expect(skeleton).not.toHaveClass("animate-pulse");
+        });
+        it("should apply custom fade duration", () => {
+            const { container } = render(_jsx(Skeleton, { fade: true, fadeDuration: 500 }));
+            const skeleton = container.querySelector('[data-slot="skeleton"]');
+            expect(skeleton).toHaveStyle({ transitionDuration: "500ms" });
+        });
+        it("should use default fade duration of 300ms", () => {
+            const { container } = render(_jsx(Skeleton, { fade: true }));
+            const skeleton = container.querySelector('[data-slot="skeleton"]');
+            expect(skeleton).toHaveStyle({ transitionDuration: "300ms" });
+        });
+    });
+    describe("Forward Ref", () => {
+        it("should forward ref to div element", () => {
+            const ref = { current: null };
+            render(_jsx(Skeleton, { ref: ref }));
+            expect(ref.current).toBeInstanceOf(HTMLDivElement);
+        });
+    });
+    describe("Accessibility", () => {
+        it("should have data-slot attribute for testing", () => {
+            const { container } = render(_jsx(Skeleton, {}));
+            const skeleton = container.querySelector('[data-slot="skeleton"]');
+            expect(skeleton).toBeInTheDocument();
+        });
+        it("should allow passing through aria attributes", () => {
+            const { container } = render(_jsx(Skeleton, { "aria-label": "Loading content" }));
+            const skeleton = container.querySelector('[data-slot="skeleton"]');
+            expect(skeleton).toHaveAttribute("aria-label", "Loading content");
+        });
+    });
+    describe("Custom Styles", () => {
+        it("should merge custom style with inline styles", () => {
+            const { container } = render(_jsx(Skeleton, { fade: true, fadeDuration: 400, style: { width: "200px", height: "100px" } }));
+            const skeleton = container.querySelector('[data-slot="skeleton"]');
+            expect(skeleton).toHaveStyle({
+                width: "200px",
+                height: "100px",
+                transitionDuration: "400ms",
+            });
+        });
+        it("should preserve existing transitionDuration in style prop", () => {
+            const { container } = render(_jsx(Skeleton, { style: { transitionDuration: "200ms" } }));
+            const skeleton = container.querySelector('[data-slot="skeleton"]');
+            expect(skeleton).toHaveStyle({ transitionDuration: "200ms" });
+        });
+    });
+});
+//# sourceMappingURL=skeleton.test.js.map

package/dist/src/components/skeleton/skeleton.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.test.js","sourceRoot":"","sources":["../../../../src/components/skeleton/skeleton.test.tsx"],"names":[],"mappings":"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"}