linkedunion-design-kit 1.11.6 → 1.11.8

package/dist/src/components/Skeleton/skeleton.stories.jsx

@@ -0,0 +1,734 @@
+import { BadgeSkeletonSize, HeadingSkeletonSize, InputSkeletonSize, Skeleton, TextSkeletonSize, } from "./skeleton";
+import { avatarSize } from "../Avatar/Avatar";
+import { buttonStyles } from "../Button";
+import { tableBodySize } from "../Table";
+import { comboboxSizes } from "../Dropdown/Combobox";
+import { iconSize as LUIconSizes } from "../Icons";
+import { checkboxSize } from "../Checkbox/checkbox";
+import { size as SwitchSizes } from "../Switch/switch";
+import { Body } from "../Typography/Body/body";
+import { Heading } from "../Typography/Heading/heading";
+// Dynamically define Skeleton variants
+var SKELETON_VARIANTS = [
+    "default",
+    "button",
+    "input",
+    "avatar",
+    "badge",
+    "card",
+    "tableRow",
+    "checkbox",
+    "switch",
+    "select",
+    "icon",
+    "text",
+    "heading",
+    "image",
+];
+var meta = {
+    title: "Components/Skeleton",
+    component: Skeleton,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "A component for displaying loading skeleton placeholders. ",
+            },
+        },
+        controls: {
+            expanded: true,
+            sort: "requiredFirst",
+            hideNoControlsWarning: true,
+            exclude: [],
+        },
+    },
+    args: {
+        className: "",
+        variant: "default",
+        size: "md",
+        isIcon: true,
+    },
+    argTypes: {
+        variant: {
+            control: { type: "select" },
+            options: SKELETON_VARIANTS,
+            description: "Select the skeleton component variant",
+            table: {
+                defaultValue: { summary: "default" },
+                type: { summary: "enum" },
+                category: "Component",
+            },
+        },
+        size: {
+            control: { type: "select" },
+            options: Object.keys(avatarSize), // Will be dynamically updated by decorator
+            description: "Size for Avatar, Button, Badge, Input, TableRow, Select, Icon, Text, and Heading skeletons (when applicable)",
+            table: {
+                defaultValue: { summary: "md" },
+                type: { summary: "enum" },
+                category: "Size",
+            },
+        },
+        columns: {
+            control: { type: "number", min: 1, max: 10 },
+            description: "Number of columns for TableRow skeleton",
+            table: {
+                type: { summary: "number" },
+                category: "TableRow",
+            },
+            if: { arg: "variant", eq: "tableRow" },
+        },
+        lines: {
+            control: { type: "number", min: 1, max: 10 },
+            description: "Number of lines for Text skeleton",
+            table: {
+                type: { summary: "number" },
+                category: "Text",
+            },
+            if: { arg: "variant", eq: "text" },
+        },
+        aspectRatio: {
+            control: { type: "select" },
+            options: ["square", "video", "portrait"],
+            description: "Aspect ratio for Image skeleton",
+            table: {
+                type: { summary: '"square" | "video" | "portrait"' },
+                category: "Image",
+            },
+            if: { arg: "variant", eq: "image" },
+        },
+        isIcon: {
+            control: { type: "boolean" },
+            description: "Toggle placeholder icon inside Image skeleton",
+            table: {
+                type: { summary: "boolean" },
+                defaultValue: { summary: "true" },
+                category: "Image",
+            },
+            if: { arg: "variant", eq: "image" },
+        },
+        className: {
+            control: "text",
+            description: "Custom className to override default sizing",
+            table: {
+                type: { summary: "string" },
+                category: "Styling",
+            },
+        },
+    },
+    decorators: [
+        function (Story, context) {
+            var currentVariant = context.args.variant;
+            // Dynamically determine which variants support size
+            var variantsWithSize = SKELETON_VARIANTS.filter(function (v) {
+                return [
+                    "button",
+                    "avatar",
+                    "badge",
+                    "input",
+                    "tableRow",
+                    "select",
+                    "icon",
+                    "text",
+                    "heading",
+                ].includes(v);
+            });
+            if (context.argTypes && context.argTypes.size) {
+                // Hide size control for variants that don't support it
+                if (!variantsWithSize.includes(currentVariant !== null && currentVariant !== void 0 ? currentVariant : "")) {
+                    context.argTypes.size.table = { disable: true };
+                    delete context.argTypes.size.control;
+                }
+                else {
+                    // Show size control and update options based on variant
+                    context.argTypes.size.control = { type: "select" };
+                    context.argTypes.size.table = {
+                        defaultValue: { summary: "md" },
+                        type: { summary: "enum" },
+                        category: "Size",
+                    };
+                    // Set default size and options based on variant
+                    if (currentVariant === "button") {
+                        context.argTypes.size.options = Object.keys(buttonStyles.size);
+                        // Set default size if not already set
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "avatar") {
+                        context.argTypes.size.options = Object.keys(avatarSize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "badge") {
+                        context.argTypes.size.options = Object.keys(BadgeSkeletonSize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "switch") {
+                        context.argTypes.size.options = Object.keys(SwitchSizes);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "input") {
+                        context.argTypes.size.options = Object.keys(InputSkeletonSize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "lg"; // Input default is lg
+                        }
+                    }
+                    else if (currentVariant === "tableRow") {
+                        context.argTypes.size.options = Object.keys(tableBodySize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "select") {
+                        context.argTypes.size.options = Object.keys(comboboxSizes);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "icon") {
+                        context.argTypes.size.options = Object.keys(LUIconSizes);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "text") {
+                        context.argTypes.size.options = Object.keys(TextSkeletonSize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "checkbox") {
+                        context.argTypes.size.options = Object.keys(checkboxSize);
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "md";
+                        }
+                    }
+                    else if (currentVariant === "heading") {
+                        context.argTypes.size.options = Object.keys(HeadingSkeletonSize);
+                        // Heading has a special default
+                        if (!context.args.size || context.args.size === "md") {
+                            context.args.size = "h2";
+                        }
+                        context.argTypes.size.table.defaultValue = { summary: "h2" };
+                    }
+                }
+            }
+            return <Story {...context}/>;
+        },
+    ],
+};
+export default meta;
+// Default Skeleton
+var Template = function (args) {
+    var _a = args.variant, variant = _a === void 0 ? "default" : _a, className = args.className, columns = args.columns, lines = args.lines, aspectRatio = args.aspectRatio, isIcon = args.isIcon;
+    // Set appropriate default size based on variant
+    // Narrow size type for each variant
+    var size = args.size;
+    if (!size) {
+        if (variant === "heading") {
+            size = "h2";
+        }
+        else {
+            size = "md";
+        }
+    }
+    switch (variant) {
+        case "button":
+            return (<Skeleton.Button size={size} className={className}/>);
+        case "input":
+            return (<Skeleton.Input size={size} className={className}/>);
+        case "avatar":
+            return (<Skeleton.Avatar size={size} className={className}/>);
+        case "badge":
+            return (<Skeleton.Badge size={size} className={className}/>);
+        case "card":
+            return <Skeleton.Card className={className}/>;
+        case "tableRow":
+            return (<Skeleton.TableRow columns={columns} size={size} className={className}/>);
+        case "checkbox":
+            return <Skeleton.Checkbox className={className}/>;
+        case "switch":
+            return <Skeleton.Switch className={className}/>;
+        case "select":
+            return (<Skeleton.Select size={size} className={className}/>);
+        case "icon":
+            return (<Skeleton.Icon size={size} className={className}/>);
+        case "text":
+            return (<Skeleton.Text lines={lines} size={size} className={className}/>);
+        case "heading":
+            return (<Skeleton.Heading size={size} className={className}/>);
+        case "image":
+            return (<Skeleton.Image aspectRatio={aspectRatio} isIcon={isIcon} className={className}/>);
+        case "default":
+        default:
+            return <Skeleton className={"w-48 h-48 ".concat(className)}/>;
+    }
+};
+export var Default = Template.bind({});
+// Button Skeletons - All Sizes
+export var ButtonSkeletons = function () { return (<div className="space-y-6">
+    <div>
+      <Heading variant="h4">Button Skeleton Sizes</Heading>
+      <div className="flex flex-col gap-4">
+        {Object.keys(buttonStyles.size).map(function (size) { return (<div key={size}>
+            <p>{size.toUpperCase()}</p>
+            <Skeleton.Button size={size}/>
+          </div>); })}
+      </div>
+    </div>
+    <div>
+      <Heading variant="h4">Custom Width</Heading>
+      <Skeleton.Button className="w-64"/>
+    </div>
+  </div>); };
+ButtonSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Button skeleton placeholders in all available sizes (sm, md, lg, xl).",
+        },
+    },
+};
+// Input Skeletons - All Sizes
+export var InputSkeletons = function () { return (<div className="space-y-4">
+    <div>
+      <Body>Small Input</Body>
+      <Skeleton.Input size="sm"/>
+    </div>
+    <div>
+      <Body>Medium Input</Body>
+      <Skeleton.Input size="md"/>
+    </div>
+    <div>
+      <Body>Large Input (Default)</Body>
+      <Skeleton.Input size="lg"/>
+    </div>
+    <div>
+      <Body>Custom Width</Body>
+      <Skeleton.Input className="w-1/2"/>
+    </div>
+  </div>); };
+InputSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Input skeleton placeholders with size options (sm, md, lg).",
+        },
+    },
+};
+// Avatar Skeletons - All Sizes
+export var AvatarSkeletons = function () {
+    var allAvatarSizes = Object.keys(avatarSize);
+    return (<div className="space-y-4">
+      <div className="flex items-center gap-4 flex-wrap">
+        {allAvatarSizes.map(function (size) { return (<div key={size} className="flex flex-col items-center gap-2">
+            <Skeleton.Avatar size={size}/>
+            <span className="text-xs text-gray-500">{size}</span>
+          </div>); })}
+      </div>
+    </div>);
+};
+AvatarSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Avatar skeleton placeholders in all available sizes.",
+        },
+    },
+};
+// Badge Skeletons - All Sizes
+export var BadgeSkeletons = function () { return (<div className="space-y-4">
+    <div>
+      <Body>Small Badge</Body>
+      <Skeleton.Badge size="sm"/>
+    </div>
+    <div>
+      <Body>Medium Badge (Default)</Body>
+      <Skeleton.Badge size="md"/>
+    </div>
+    <div>
+      <Body>Large Badge</Body>
+      <Skeleton.Badge size="lg"/>
+    </div>
+  </div>); };
+BadgeSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Badge skeleton placeholders with size options (sm, md, lg).",
+        },
+    },
+};
+// Card Skeleton
+export var CardSkeleton = function () { return (<div className="space-y-4">
+    <div>
+      <Body>Default Card Skeleton</Body>
+      <Skeleton.Card />
+    </div>
+    <div>
+      <Body>Custom Height</Body>
+      <Skeleton.Card className="h-64"/>
+    </div>
+  </div>); };
+CardSkeleton.parameters = {
+    docs: {
+        description: {
+            story: "Card skeleton placeholder for card components.",
+        },
+    },
+};
+// Table Row Skeletons
+export var TableRowSkeletons = function () { return (<div className="space-y-6">
+    <div>
+      <Body>3 Columns - Small</Body>
+      <Skeleton.TableRow columns={3} size="sm"/>
+    </div>
+    <div>
+      <Body>4 Columns - Medium</Body>
+      <Skeleton.TableRow columns={4} size="md"/>
+    </div>
+    <div>
+      <Body>5 Columns - Large</Body>
+      <Skeleton.TableRow columns={5} size="lg"/>
+    </div>
+    <div>
+      <Body>Full Table Example</Body>
+      <div className="space-y-2">
+        <Skeleton.TableRow columns={4} size="md"/>
+        <Skeleton.TableRow columns={4} size="md"/>
+        <Skeleton.TableRow columns={4} size="md"/>
+      </div>
+    </div>
+  </div>); };
+TableRowSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Table row skeleton with customizable columns and sizes. Perfect for table loading states.",
+        },
+    },
+};
+// Form Elements Skeletons
+export var FormElementsSkeletons = function () { return (<div className="space-y-6">
+    <div>
+      <Heading variant="h4">Checkbox</Heading>
+      <div className="flex items-center gap-2">
+        <Skeleton.Checkbox />
+        <Skeleton className="h-4 w-24"/>
+      </div>
+    </div>
+    <div>
+      <Heading variant="h4">Switch</Heading>
+      <div className="flex items-center gap-2">
+        <Skeleton.Switch />
+        <Skeleton className="h-4 w-32"/>
+      </div>
+    </div>
+    <div>
+      <Heading variant="h4">Select/Dropdown</Heading>
+      <div className="space-y-2">
+        <Skeleton.Select size="sm"/>
+        <Skeleton.Select size="md"/>
+        <Skeleton.Select size="lg"/>
+      </div>
+    </div>
+  </div>); };
+FormElementsSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Skeleton loaders for form elements like checkbox, switch, and select.",
+        },
+    },
+};
+// Icon Skeletons
+export var IconSkeletons = function () { return (<div className="space-y-4">
+    <div className="flex items-center gap-4">
+      <div className="flex flex-col items-center gap-2">
+        <Skeleton.Icon size="sm"/>
+        <span className="text-xs text-gray-500">Small</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Skeleton.Icon size="md"/>
+        <span className="text-xs text-gray-500">Medium</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Skeleton.Icon size="lg"/>
+        <span className="text-xs text-gray-500">Large</span>
+      </div>
+      <div className="flex flex-col items-center gap-2">
+        <Skeleton.Icon size="xl"/>
+        <span className="text-xs text-gray-500">XLarge</span>
+      </div>
+    </div>
+  </div>); };
+IconSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Icon skeleton placeholders in different sizes (sm, md, lg, xl).",
+        },
+    },
+};
+// Text Skeletons
+export var TextSkeletons = function () { return (<div className="space-y-6">
+    <div>
+      <Heading variant="h4">Text Sizes</Heading>
+      <div className="space-y-4">
+        <div>
+          <Body>Extra Small (xs)</Body>
+          <Skeleton.Text lines={1} size="xs"/>
+        </div>
+        <div>
+          <Body>Small (sm)</Body>
+          <Skeleton.Text lines={1} size="sm"/>
+        </div>
+        <div>
+          <Body>Medium (md) - Default</Body>
+          <Skeleton.Text lines={1} size="md"/>
+        </div>
+        <div>
+          <Body>Large (lg)</Body>
+          <Skeleton.Text lines={1} size="lg"/>
+        </div>
+        <div>
+          <Body>Extra Large (xl)</Body>
+          <Skeleton.Text lines={1} size="xl"/>
+        </div>
+      </div>
+    </div>
+    <div>
+      <Heading variant="h4">Multi-line Text</Heading>
+      <div className="space-y-4">
+        <div>
+          <Body>Two Lines</Body>
+          <Skeleton.Text lines={2}/>
+        </div>
+        <div>
+          <Body>Three Lines</Body>
+          <Skeleton.Text lines={3}/>
+        </div>
+        <div>
+          <Body>Five Lines</Body>
+          <Skeleton.Text lines={5}/>
+        </div>
+      </div>
+    </div>
+  </div>); };
+TextSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Text skeleton placeholders with multiple size options (xs, sm, md, lg, xl) and multi-line support. The last line is automatically 75% width for multi-line text.",
+        },
+    },
+};
+// Heading Skeletons
+export var HeadingSkeletons = function () { return (<div className="space-y-6">
+    <div>
+      <Heading variant="h4">Heading Sizes</Heading>
+      <div className="space-y-4">
+        <div>
+          <Body>H1 - Largest</Body>
+          <Skeleton.Heading size="h1"/>
+        </div>
+        <div>
+          <Body>H2 - Default</Body>
+          <Skeleton.Heading size="h2"/>
+        </div>
+        <div>
+          <Body>H3</Body>
+          <Skeleton.Heading size="h3"/>
+        </div>
+        <div>
+          <Body>H4</Body>
+          <Skeleton.Heading size="h4"/>
+        </div>
+        <div>
+          <Body>H5</Body>
+          <Skeleton.Heading size="h5"/>
+        </div>
+        <div>
+          <Body>H6 - Smallest</Body>
+          <Skeleton.Heading size="h6"/>
+        </div>
+      </div>
+    </div>
+  </div>); };
+HeadingSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Heading skeleton placeholders with all heading sizes (h1 through h6). Default width is 75% but can be customized with className.",
+        },
+    },
+};
+// Image Skeletons
+export var ImageSkeletons = function () { return (<div className="space-y-6">
+    <div>
+      <Body>Square Aspect Ratio</Body>
+      <div className="w-64">
+        <Skeleton.Image aspectRatio="square"/>
+      </div>
+    </div>
+    <div>
+      <Body>Video Aspect Ratio (16:9)</Body>
+      <div className="w-64">
+        <Skeleton.Image aspectRatio="video"/>
+      </div>
+    </div>
+    <div>
+      <Body>Portrait Aspect Ratio (3:4)</Body>
+      <div className="w-48">
+        <Skeleton.Image aspectRatio="portrait"/>
+      </div>
+    </div>
+    <div>
+      <Body>Icon Scale Variations</Body>
+      <div className="flex gap-6 flex-wrap">
+        <div className="w-40">
+          <Body>Scale: sm</Body>
+          <Skeleton.Image aspectRatio="square"/>
+        </div>
+        <div className="w-40">
+          <Body>Scale: md</Body>
+          <Skeleton.Image aspectRatio="square"/>
+        </div>
+        <div className="w-40">
+          <Body>Scale: lg</Body>
+          <Skeleton.Image aspectRatio="square"/>
+        </div>
+        <div className="w-40">
+          <Body>Scale: auto (responsive)</Body>
+          <Skeleton.Image aspectRatio="square"/>
+        </div>
+      </div>
+    </div>
+  </div>); };
+ImageSkeletons.parameters = {
+    docs: {
+        description: {
+            story: "Image skeleton placeholders with different aspect ratio options (square, video, portrait).",
+        },
+    },
+};
+// Complete Card Example
+export var CompleteCardExample = function () { return (<div className="w-80 rounded-lg border p-6">
+    <div className="flex items-center gap-4 mb-4">
+      <Skeleton.Avatar size="lg"/>
+      <div className="flex-1 space-y-2">
+        <Skeleton className="h-4 w-3/4"/>
+        <Skeleton className="h-3 w-1/2"/>
+      </div>
+    </div>
+    <div className="space-y-2 mb-4">
+      <Skeleton.Text lines={3}/>
+    </div>
+    <div className="flex gap-2">
+      <Skeleton.Button size="md" className="flex-1"/>
+      <Skeleton.Button size="md" className="flex-1"/>
+    </div>
+  </div>); };
+CompleteCardExample.parameters = {
+    docs: {
+        description: {
+            story: "A complete card loading state example using multiple skeleton components.",
+        },
+    },
+};
+// Complete Form Example
+export var CompleteFormExample = function () { return (<div className="w-96 space-y-4">
+    <div>
+      <Skeleton className="h-4 w-20 mb-2"/>
+      <Skeleton.Input size="lg"/>
+    </div>
+    <div>
+      <Skeleton className="h-4 w-24 mb-2"/>
+      <Skeleton.Input size="lg"/>
+    </div>
+    <div>
+      <Skeleton className="h-4 w-32 mb-2"/>
+      <Skeleton.Select size="md"/>
+    </div>
+    <div className="flex items-center gap-2">
+      <Skeleton.Checkbox />
+      <Skeleton className="h-4 w-40"/>
+    </div>
+    <div className="flex items-center gap-2">
+      <Skeleton.Switch />
+      <Skeleton className="h-4 w-36"/>
+    </div>
+    <Skeleton.Button size="lg" className="w-full"/>
+  </div>); };
+CompleteFormExample.parameters = {
+    docs: {
+        description: {
+            story: "A complete form loading state example with various input types.",
+        },
+    },
+};
+// All Variants Together
+export var AllVariants = function () { return (<div className="space-y-8">
+    <div>
+      <Heading variant="h4">Buttons</Heading>
+      <div className="flex gap-4">
+        <Skeleton.Button size="sm"/>
+        <Skeleton.Button size="md"/>
+        <Skeleton.Button size="lg"/>
+      </div>
+    </div>
+    <div>
+      <Heading variant="h4">Inputs & Selects</Heading>
+      <div className="space-y-2 max-w-md">
+        <Skeleton.Input size="sm"/>
+        <Skeleton.Input size="md"/>
+        <Skeleton.Select size="lg"/>
+      </div>
+    </div>
+    <div>
+      <Heading variant="h4">Avatars</Heading>
+      <div className="flex gap-4 items-center">
+        <Skeleton.Avatar size="sm"/>
+        <Skeleton.Avatar size="md"/>
+        <Skeleton.Avatar size="lg"/>
+        <Skeleton.Avatar size="xl"/>
+      </div>
+    </div>
+    <div>
+      <Heading variant="h4">Badges</Heading>
+      <div className="flex gap-4 items-center">
+        <Skeleton.Badge size="sm"/>
+        <Skeleton.Badge size="md"/>
+        <Skeleton.Badge size="lg"/>
+      </div>
+    </div>
+    <div>
+      <Heading variant="h4">Form Controls</Heading>
+      <div className="flex gap-4 items-center">
+        <Skeleton.Checkbox />
+        <Skeleton.Switch />
+        <Skeleton.Icon size="md"/>
+      </div>
+    </div>
+    <div>
+      <Heading variant="h4">Text</Heading>
+      <div className="max-w-md">
+        <Skeleton.Text lines={3}/>
+      </div>
+    </div>
+    <div>
+      <Heading variant="h4">Images</Heading>
+      <div className="flex gap-4">
+        <div className="w-32">
+          <Skeleton.Image aspectRatio="square"/>
+        </div>
+        <div className="w-48">
+          <Skeleton.Image aspectRatio="video"/>
+        </div>
+      </div>
+    </div>
+  </div>); };
+AllVariants.parameters = {
+    docs: {
+        description: {
+            story: "Overview of all skeleton variants and their common use cases.",
+        },
+    },
+};