npm - linkedunion-design-kit - Versions diffs - 1.9.2 → 1.9.3 - Mend

linkedunion-design-kit 1.9.2 → 1.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/dist/src/components/Icons/stories/InteractiveIconSelector.jsx ADDED Viewed

@@ -0,0 +1,86 @@
+import React, { useState } from "react";
+import { iconList } from "../../../utils/iconList";
+import LUIcon from "../LUIcon";
+import { iconSize, iconWithBgColor } from "../index";
+import { IconDropdown } from "./IconDropdown";
+import { Heading } from "../../../components/Typography/Heading/heading";
+import { Body } from "../../../components/Typography/Body/body";
+import { Label } from "../../../components/Label/Label";
+export var InteractiveIconSelector = function () {
+    var _a = useState("info"), selectedIcon = _a[0], setSelectedIcon = _a[1];
+    var _b = useState("md"), selectedSize = _b[0], setSelectedSize = _b[1];
+    var _c = useState("default"), selectedVariant = _c[0], setSelectedVariant = _c[1];
+    var _d = useState("blue"), selectedColor = _d[0], setSelectedColor = _d[1];
+    var generateUsageCode = function () {
+        var code = "<LUIcon icon=\"".concat(selectedIcon, "\" size=\"").concat(selectedSize, " color=\"").concat(selectedColor, "\"");
+        if (selectedVariant === "padded") {
+            code += " variant=\"padded\" \"";
+        }
+        code += " />";
+        return code;
+    };
+    return (<div className="p-5">
+      <Heading variant="h3" className="mb-3">
+        Interactive Icon Selector
+      </Heading>
+      <Body variant="body-md" className="mb-6 text-gray-600">
+        This demonstrates a custom searchable dropdown that shows icons
+        alongside their names.
+      </Body>
+      <div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4 mb-6">
+        <div>
+          <Label variant="label-md" className="block mb-2 ">
+            Select Icon:
+          </Label>
+          <IconDropdown value={selectedIcon} onChange={setSelectedIcon} options={Object.keys(iconList).sort()}/>
+        </div>
+        <div>
+          <Label variant="label-md" className="block mb-2 ">
+            Size:
+          </Label>
+          <select value={selectedSize} onChange={function (e) { return setSelectedSize(e.target.value); }} className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+            {Object.keys(iconSize).map(function (size) { return (<option key={size} value={size}>
+                {size}
+              </option>); })}
+          </select>
+        </div>
+        <div>
+          <Label variant="label-md" className="block mb-2 ">
+            Variant:
+          </Label>
+          <select value={selectedVariant} onChange={function (e) {
+            return setSelectedVariant(e.target.value);
+        }} className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+            <option value="default">Default</option>
+            <option value="padded">Padded</option>
+          </select>
+        </div>
+        <div>
+          <Label variant="label-md" className="block mb-2">
+            Color:
+          </Label>
+          <select value={selectedColor} onChange={function (e) { return setSelectedColor(e.target.value); }} className="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+            {Object.keys(iconWithBgColor).map(function (color) { return (<option key={color} value={color}>
+                {color}
+              </option>); })}
+          </select>
+        </div>
+      </div>
+      <div className="p-6 border-2 border-dashed border-gray-300 rounded-lg text-center bg-gray-50">
+        <Heading variant="h4" className="mb-4">
+          Preview:
+        </Heading>
+        <div className="my-4">
+          <LUIcon icon={selectedIcon} size={selectedSize} variant={selectedVariant} color={selectedColor}/>
+        </div>
+        <div className="font-mono text-sm bg-gray-100 p-2 rounded">
+          {generateUsageCode()}
+        </div>
+      </div>
+    </div>);
+};

package/dist/src/components/Icons/stories/LUIcon.stories.jsx ADDED Viewed

@@ -0,0 +1,108 @@
+import { iconList } from "../../../utils/iconList";
+import { InteractiveIconSelector as InteractiveIconSelectorComponent, IconGallery as IconGalleryComponent, } from ".";
+import LUIcon from "../LUIcon";
+import { iconColor, IconShape, iconSize } from "..";
+export default {
+    title: "Components/Icon",
+    component: LUIcon,
+    tags: ["autodocs"],
+    argTypes: {
+        size: {
+            control: { type: "select" },
+            options: Object.keys(iconSize),
+            description: "Size of the icon",
+        },
+        icon: {
+            control: {
+                type: "select",
+                labels: Object.fromEntries(Object.keys(iconList)
+                    .sort()
+                    .map(function (key) { return [key]; })),
+            },
+            options: Object.keys(iconList).sort(), // Sort alphabetically for easier finding
+            description: "Icon to display (searchable dropdown with formatted labels)",
+        },
+        variant: {
+            control: { type: "select" },
+            options: ["default", "padded"],
+            description: "Type of the icon",
+        },
+        shape: {
+            control: {
+                type: "radio",
+                options: Object.keys(IconShape),
+            },
+            options: Object.keys(IconShape),
+            description: "Shape of the padded icon",
+            if: { arg: "variant", eq: "padded" },
+        },
+        color: {
+            control: { type: "select" },
+            options: Object.keys(iconColor),
+            description: "Text color (no background)",
+            table: {
+                defaultValue: { summary: "inherit" },
+            },
+        },
+        className: {
+            control: { type: "text" },
+            description: "Additional CSS classes",
+            table: {
+                defaultValue: { summary: "" },
+            },
+        },
+    },
+};
+export var Default = {
+    args: {
+        size: "md",
+        icon: Object.keys(iconList)[0],
+        color: "",
+        variant: "default",
+    },
+};
+export var IconVariants = function () { return (<div className="flex flex-row space-x-2">
+    <LUIcon icon="star" variant="default" size="lg"/>
+    <LUIcon icon="star" variant="padded" color="blue" size="lg"/>
+  </div>); };
+export var DefaultIconSizes = function () { return (<div className="flex flex-row space-x-2">
+    {Object.keys(iconSize).map(function (size) { return (<LUIcon key={size} icon="star" size={size}/>); })}
+  </div>); };
+export var PaddedIconSizes = function () { return (<div className="flex gap-2">
+    {Object.keys(iconSize).map(function (size) { return (<LUIcon key={size} icon="star" color="blue" size={size} variant="padded"/>); })}
+  </div>); };
+export var PaddedIconSizesRounded = function () { return (<div className="flex gap-2">
+    {Object.keys(iconSize).map(function (size) { return (<LUIcon key={size} icon="star" color="blue" shape="rounded" size={size} variant="padded"/>); })}
+  </div>); };
+export var IconColors = function () { return (<>
+    <div className="flex flex-row space-x-2 mb-2">
+      {Object.keys(iconColor).map(function (color) { return (<LUIcon key={color} icon="star" size="lg" color={color}/>); })}
+    </div>
+    <div className="flex flex-row space-x-2">
+      {Object.keys(iconColor).map(function (color) { return (<LUIcon key={color} icon="star" variant="padded" size="lg" color={color}/>); })}
+    </div>
+  </>); };
+// Export stories using separate components for better maintainability
+export var InteractiveIconSelector = function () { return (<InteractiveIconSelectorComponent />); };
+export var IconGallery = function () { return <IconGalleryComponent />; };
+// Set parameters for the stories
+InteractiveIconSelector.parameters = {
+    docs: {
+        description: {
+            story: "Use this interactive tool to select icons with a custom dropdown that shows both the icon and its name. Perfect for developers to quickly find and preview icons.",
+        },
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};
+IconGallery.parameters = {
+    docs: {
+        description: {
+            story: "Browse and search through all available icons. Click on any icon to see a preview and get the usage code.",
+        },
+        source: {
+            code: null, // This hides the source code
+        },
+    },
+};

package/dist/src/components/ImageUploader/ImageUploader.stories.jsx ADDED Viewed

@@ -0,0 +1,50 @@
+import ImageUploader from "./imageUploader";
+import { Dummy_Image } from "../../utils/constants";
+var meta = {
+    title: "Components/ImageUploader",
+    component: ImageUploader,
+    tags: ["autodocs"],
+    argTypes: {
+        onChange: { action: "changed" }, // For logging in the Storybook actions panel
+        onRemove: { action: "removed" }, // For logging removal actions
+        labels: {
+            description: "Object containing customizable text labels for UI messages and localization.",
+            control: "object",
+        },
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        value: null,
+        onChange: function (previewUrl, file) {
+            console.log("Selected file:", file);
+        },
+        onRemove: function () {
+            console.log("Image removed");
+        },
+    },
+};
+export var WithRequired = {
+    args: {
+        value: null,
+        required: true,
+        onChange: function (previewUrl, file) {
+            console.log("Selected file:", file);
+        },
+        onRemove: function () {
+            console.log("Image removed from required uploader");
+        },
+    },
+};
+export var WithPreloadedImage = {
+    args: {
+        value: Dummy_Image,
+        onChange: function (previewUrl, file) {
+            console.log("Selected file:", file);
+        },
+        onRemove: function () {
+            console.log("Preloaded image removed");
+        },
+    },
+};

package/dist/src/components/ImageUploader/imageUploader.jsx ADDED Viewed

@@ -0,0 +1,94 @@
+"use client";
+import { useState, useEffect } from "react";
+import { useDropzone } from "react-dropzone";
+import { cn } from "../../lib/utils";
+import LUIcon from "../Icons/LUIcon";
+import LuImage from "../Images/LuImage";
+import { Body } from "../Typography/Body/body";
+import { Button } from "../Button/Button/Button";
+var ImageUploader = function (_a) {
+    var value = _a.value, onChange = _a.onChange, onRemove = _a.onRemove, required = _a.required, className = _a.className, _b = _a.maxFileSizeMB, maxFileSizeMB = _b === void 0 ? 6 : _b, _c = _a.acceptedTypes, acceptedTypes = _c === void 0 ? ["image/png", "image/jpeg", "image/jpg", "image/svg+xml"] : _c, _d = _a.labels, labels = _d === void 0 ? {
+        chooseFile: "Choose a file or drag & drop it here",
+        supportedFormats: "Supported formats: JPEG, PNG, SVG",
+        fileTypeError: "Only JPEG/JPG, PNG, and SVG files are supported",
+        fileSizeError: "File size exceeds ".concat(maxFileSizeMB, "MB"),
+        imageRequired: "Image is required",
+        removeImage: "Remove Image",
+    } : _d;
+    var _e = useState(null), preview = _e[0], setPreview = _e[1];
+    var _f = useState(""), fileError = _f[0], setFileError = _f[1];
+    useEffect(function () {
+        if (value && typeof value === "string") {
+            setPreview(value);
+        }
+        else if (value instanceof File) {
+            setPreview(URL.createObjectURL(value));
+        }
+        else {
+            setPreview(null);
+        }
+    }, [value]);
+    var onDrop = function (acceptedFiles) {
+        var file = acceptedFiles[0];
+        if (!file)
+            return;
+        if (!acceptedTypes.includes(file.type)) {
+            setFileError(labels === null || labels === void 0 ? void 0 : labels.fileTypeError);
+            return;
+        }
+        var sizeMB = file.size / 1024 / 1024;
+        if (sizeMB > maxFileSizeMB) {
+            setFileError(labels === null || labels === void 0 ? void 0 : labels.fileSizeError);
+            return;
+        }
+        var previewUrl = URL.createObjectURL(file);
+        setPreview(previewUrl);
+        setFileError("");
+        onChange(previewUrl, file);
+    };
+    var removeFile = function () {
+        setPreview(null);
+        setFileError("");
+        onChange(null, null);
+        // If onRemove prop is provided, call it after internal cleanup
+        if (onRemove) {
+            onRemove();
+        }
+    };
+    var _g = useDropzone({
+        onDrop: onDrop,
+        multiple: false,
+        accept: {
+            "image/*": acceptedTypes,
+        },
+    }), getRootProps = _g.getRootProps, getInputProps = _g.getInputProps;
+    return (<div className={cn("flex flex-col items-center", className)}>
+      <div {...getRootProps()} className={cn("!border !border-dashed !border-gray-300 !rounded-lg cursor-pointer w-64 !p-2")}>
+        <div className="min-h-40 flex items-center justify-center bg-gray-100 !rounded-lg">
+          <input {...getInputProps()}/>
+          {preview ? (<div className="relative w-full h-40 !mx-auto overflow-hidden">
+              <LuImage src={preview} alt="Uploaded" className="aspect-square object-contain" fill/>
+            </div>) : (<div className="text-center text-sm text-muted-foreground">
+              <LUIcon icon="upload" size="lg" className="!mx-auto !mb-4"/>
+              <Body variant="body-xs-600" className="!px-1">
+                {labels === null || labels === void 0 ? void 0 : labels.chooseFile}
+              </Body>
+              <p className="text-xs text-muted-foreground">
+                {labels === null || labels === void 0 ? void 0 : labels.supportedFormats}
+              </p>
+            </div>)}
+        </div>
+      </div>
+      {fileError && (<p className="text-sm text-red-500 text-center mt-2">{fileError}</p>)}
+      {required && !preview && !fileError && (<p className="text-sm text-red-500 text-center !mt-2">
+          {labels === null || labels === void 0 ? void 0 : labels.imageRequired}
+        </p>)}
+      {preview && (<Button variant="link" color="red" onClick={removeFile} className="!mt-2">
+          {labels === null || labels === void 0 ? void 0 : labels.removeImage}
+        </Button>)}
+    </div>);
+};
+export default ImageUploader;

package/dist/src/components/Images/LuImage.jsx ADDED Viewed

@@ -0,0 +1,19 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import Image from "next/image";
+import { aspectRatio } from ".";
+var LuImage = function (_a) {
+    var _b = _a.ratio, ratio = _b === void 0 ? "square" : _b, props = __rest(_a, ["ratio"]);
+    // eslint-disable-next-line jsx-a11y/alt-text
+    return <Image className={"".concat(aspectRatio[ratio])} {...props}/>;
+};
+export default LuImage;

package/dist/src/components/Images/LuImage.stories.jsx ADDED Viewed

@@ -0,0 +1,154 @@
+import LuImage from "./LuImage";
+import { aspectRatio } from ".";
+export default {
+    title: "Components/Image",
+    component: LuImage,
+    argTypes: {
+        src: {
+            control: "text",
+            description: "Image source URL",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        width: {
+            control: "number",
+            description: "Image width",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: "240" },
+            },
+        },
+        height: {
+            control: "number",
+            description: "Image width",
+            table: {
+                type: { summary: "number" },
+                defaultValue: { summary: "240" },
+            },
+        },
+        alt: {
+            control: "text",
+            description: "Image alt text",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "Demo Image" },
+            },
+        },
+        loader: {
+            control: false,
+            description: "loader={imageLoader}",
+            table: {
+                type: { summary: "function" },
+            },
+        },
+        fill: {
+            control: "boolean",
+            description: "fill={false}",
+            table: {
+                type: { summary: "boolean" },
+            },
+        },
+        sizes: {
+            control: "text",
+            description: "sizes=(max-width: 768px) 100vw, 33vw",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        quality: {
+            control: "number",
+            description: "Image quality",
+            table: {
+                type: { summary: "Integer (1-100)" },
+            },
+        },
+        priority: {
+            control: "boolean",
+            description: "priority={false}",
+            table: {
+                type: { summary: "boolean" },
+            },
+        },
+        placeholder: {
+            control: "select",
+            options: ["blur", "empty"],
+            description: "placeholder={blur}",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        style: {
+            control: "object",
+            description: "stye={{ objectFit: contain }}",
+            table: {
+                type: { summary: "object" },
+            },
+        },
+        className: { control: "text" },
+        onLoad: {
+            control: false,
+            description: "onLoad={event => done())}",
+            table: {
+                type: { summary: "function" },
+            },
+        },
+        onError: {
+            description: "onError={event => fail()}",
+            table: {
+                type: { summary: "function" },
+            },
+            control: false,
+        },
+        loading: {
+            control: "select",
+            options: ["lazy", "eager"],
+            description: "Image loading",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        blurDataURL: {
+            control: "text",
+            description: "blurDataURL=data:image/jpeg...",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        overrideSrc: {
+            control: "text",
+            description: "overrideSrc=/seo.png",
+            table: {
+                type: { summary: "string" },
+            },
+        },
+        ratio: {
+            control: "select",
+            options: Object.keys(aspectRatio),
+            description: "Aspect ratio of the image",
+            table: {
+                type: { summary: "string" },
+                defaultValue: { summary: "square" },
+            },
+        },
+    },
+};
+var Template = function (args) { return <LuImage {...args}/>; };
+export var _Image = Template.bind({});
+_Image.args = {
+    src: "/images/demo-image.jpg",
+    ratio: "square",
+    width: 240,
+    height: 240,
+    alt: "Demo Image",
+};
+_Image.argTypes = {
+    ratio: {
+        control: {
+            type: "select",
+            labels: Object.keys(aspectRatio),
+        },
+        options: Object.keys(aspectRatio),
+        defaultValue: "square",
+    },
+};

package/dist/src/components/Images/LuImage.test.jsx ADDED Viewed

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+import LuImage from "./LuImage";
+import { aspectRatio } from ".";
+// Mock next/image to render a basic `img` element for testing
+jest.mock("next/image", function () { return ({
+    __esModule: true,
+    default: function (props) {
+        // eslint-disable-next-line @next/next/no-img-element
+        return <img alt="" {...props}/>;
+    },
+}); });
+describe("LuImage component", function () {
+    it("renders with default props", function () {
+        render(<LuImage src="/test.jpg" width={100} height={100} alt="Demo Image"/>);
+        var image = screen.getByAltText("Demo Image");
+        expect(image).toBeInTheDocument();
+        expect(image).toHaveAttribute("src", "/test.jpg");
+        expect(image).toHaveClass("aspect-square");
+    });
+    it("uses correct aspect ratio class", function () {
+        var ratio = "aspect-4/3";
+        render(<LuImage src="/test.jpg" width={100} height={100} ratio={ratio} alt="Demo Image"/>);
+        var image = screen.getByAltText("Demo Image");
+        expect(image).toHaveClass(aspectRatio[ratio]);
+    });
+    it("accepts custom alt text", function () {
+        render(<LuImage src="/test.jpg" width={100} height={100} alt="Custom Alt"/>);
+        var image = screen.getByAltText("Custom Alt");
+        expect(image).toBeInTheDocument();
+    });
+    it("accepts additional className", function () {
+        render(<LuImage src="/test.jpg" width={100} height={100} className="rounded-full" alt="Demo Image"/>);
+        var image = screen.getByAltText("Demo Image");
+        expect(image).toHaveClass("rounded-full");
+    });
+    it("renders with different aspect ratios", function () {
+        for (var ratio in aspectRatio) {
+            var typedRatio = ratio;
+            render(<LuImage key={typedRatio} src="/test.jpg" width={100} height={100} ratio={typedRatio} alt={"Image with ratio ".concat(typedRatio)}/>);
+            var image = screen.getByAltText("Image with ratio ".concat(typedRatio));
+            expect(image).toHaveClass(aspectRatio[typedRatio]);
+        }
+    });
+});