linkedunion-design-kit 1.5.2 → 1.5.4

package/dist/src/components/Icons/SingleIcon.test.js

@@ -0,0 +1,67 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import LUIcon from "./LUIcon";
+import { iconList } from "../../utils/iconList";
+import { iconSize } from ".";
+describe("LUIcon Component", function () {
+    it("renders correctly when a valid icon is provided", function () {
+        var props = {
+            size: "xs",
+            icon: iconList[0].key,
+        };
+        render(_jsx(LUIcon, __assign({}, props)));
+        // Select the element
+        var singleIconElement = screen.getByTestId("lu-icon");
+        expect(singleIconElement).toHaveClass(iconSize[props.size]);
+        // Assert that the fill class is applied correctly on the <path>
+        var pathElement = screen.getByTestId("lu-path");
+        expect(pathElement).toBeInTheDocument();
+        var selectedIcon = iconList.find(function (icon) { return icon.key === props.icon; });
+        expect(pathElement).toHaveAttribute("d", (selectedIcon === null || selectedIcon === void 0 ? void 0 : selectedIcon.path) || "");
+    });
+    it("renders correctly when an invalid icon is provided", function () {
+        var props = {
+            size: "md",
+            icon: "non-existent-icon", // Invalid icon
+        };
+        render(_jsx(LUIcon, __assign({}, props)));
+        var svgElement = screen.getByTestId("lu-icon");
+        expect(svgElement).toBeInTheDocument();
+        var pathElement = screen.getByTestId("lu-path");
+        expect(pathElement).toBeInTheDocument();
+        // Since the icon does not exist, path should be an empty string
+        expect(pathElement).toHaveAttribute("d", "");
+    });
+    it("applies additional className correctly", function () {
+        var props = {
+            size: "lg",
+            icon: iconList[0].key,
+            className: "custom-class",
+        };
+        render(_jsx(LUIcon, __assign({}, props)));
+        var singleIconElement = screen.getByTestId("lu-icon");
+        expect(singleIconElement).toHaveClass(iconSize[props.size]);
+        expect(singleIconElement).toHaveClass("custom-class");
+    });
+    it("renders correctly when selectedIcon is undefined", function () {
+        var props = {
+            size: "md",
+            icon: "", // Pass an empty string to ensure find() returns undefined
+        };
+        render(_jsx(LUIcon, __assign({}, props)));
+        var pathElement = screen.getByTestId("lu-path");
+        expect(pathElement).toBeInTheDocument();
+        expect(pathElement).toHaveAttribute("d", ""); // Expect empty path when selectedIcon is undefined
+    });
+});

package/dist/src/components/Icons/index.d.ts

@@ -0,0 +1,16 @@
+export declare const iconSize: {
+    xxs: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    "2xl": string;
+    "3xl": string;
+    "4xl": string;
+    "5xl": string;
+    "6xl": string;
+    "7xl": string;
+    huge: string;
+    massive: string;
+};

package/dist/src/components/Icons/index.js

@@ -0,0 +1,16 @@
+export var iconSize = {
+    xxs: "w-2 h-2",
+    xs: "w-3 h-3",
+    sm: "w-3.5 h-3.5",
+    md: "w-4 h-4",
+    lg: "w-5 h-5",
+    xl: "w-6 h-6",
+    "2xl": "w-6 h-6",
+    "3xl": "w-7 h-7",
+    "4xl": "w-8 h-8",
+    "5xl": "w-9 h-9",
+    "6xl": "w-10 h-10",
+    "7xl": "w-12 h-12",
+    huge: "w-16 h-16",
+    massive: "w-20 h-20",
+};

package/dist/src/components/Icons/type.d.ts

@@ -0,0 +1,8 @@
+import { iconSize } from ".";
+type iconSize = keyof typeof iconSize;
+export interface IconProps extends React.HTMLAttributes<HTMLOrSVGElement> {
+    size: iconSize;
+    icon?: string;
+    className?: string;
+}
+export {};

package/dist/src/components/ImageUploader/ImageUploader.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import ImageUploader from "../ui/imageUploader";
+declare const meta: Meta<typeof ImageUploader>;
+export default meta;
+type Story = StoryObj<typeof ImageUploader>;
+export declare const Default: Story;

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

@@ -0,0 +1,18 @@
+import ImageUploader from "../ui/imageUploader";
+var meta = {
+    title: "Components/ImageUploader",
+    component: ImageUploader,
+    tags: ["autodocs"],
+    argTypes: {
+        onChange: { action: "changed" }, // For logging in the Storybook actions panel
+    },
+};
+export default meta;
+export var Default = {
+    args: {
+        value: null,
+        onChange: function (previewUrl, file) {
+            console.log("Selected file:", file);
+        },
+    },
+};

package/dist/src/components/ImageUploader/type.d.ts

@@ -0,0 +1,8 @@
+export interface ImageUploaderProps {
+    value: string | File | null;
+    onChange: (previewUrl: string | null, file: File | null) => void;
+    required?: boolean;
+    className?: string;
+    maxFileSizeMB?: number;
+    acceptedTypes?: string[];
+}

package/dist/src/components/Images/LuImage.d.ts

@@ -0,0 +1,3 @@
+import { AspectRatioProps } from "./type";
+declare const LuImage: ({ ratio, ...props }: AspectRatioProps) => import("react/jsx-runtime").JSX.Element;
+export default LuImage;

package/dist/{components/Typography/Body/Body.js → src/components/Images/LuImage.js}

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,12 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var constants_1 = require("../../../utils/constants");
-var _1 = require("./");
-var Body = function (_a) {
-    var _b = _a.body, body = _b === void 0 ? _1.BODY_CLASSES[0] : _b, _c = _a.label, label = _c === void 0 ? constants_1.Dummy_Para : _c, _d = _a.className, className = _d === void 0 ? "" : _d, props = __rest(_a, ["body", "label", "className"]);
-    return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "".concat(body, " ").concat(className).trim() }, props, { children: label })));
+import { jsx as _jsx } from "react/jsx-runtime";
+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 _jsx(Image, __assign({ className: "".concat(aspectRatio[ratio]) }, props));
 };
-exports.default = Body;
+export default LuImage;

package/dist/src/components/Images/LuImage.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/react";
+import LuImage from "./LuImage";
+import { AspectRatioProps } from "./type";
+declare const _default: Meta<typeof LuImage>;
+export default _default;
+export declare const _Image: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, AspectRatioProps>;

package/dist/src/components/Images/LuImage.stories.js

@@ -0,0 +1,166 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+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 _jsx(LuImage, __assign({}, 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.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/components/Images/LuImage.test.js

@@ -0,0 +1,56 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+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 _jsx("img", __assign({ alt: "" }, props));
+    },
+}); });
+describe("LuImage component", function () {
+    it("renders with default props", function () {
+        render(_jsx(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(_jsx(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(_jsx(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(_jsx(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(_jsx(LuImage, { src: "/test.jpg", width: 100, height: 100, ratio: typedRatio, alt: "Image with ratio ".concat(typedRatio) }, typedRatio));
+            var image = screen.getByAltText("Image with ratio ".concat(typedRatio));
+            expect(image).toHaveClass(aspectRatio[typedRatio]);
+        }
+    });
+});

package/dist/src/components/Images/index.d.ts

@@ -0,0 +1,19 @@
+export declare const aspectRatio: {
+    square: string;
+    "aspect-5/4": string;
+    "aspect-4/5": string;
+    "aspect-4/3": string;
+    "aspect-3/4": string;
+    "aspect-7/5": string;
+    "aspect-5/7": string;
+    "aspect-3/2": string;
+    "aspect-2/3": string;
+    "aspect-16/10": string;
+    "aspect-10/16": string;
+    "aspect-5/3": string;
+    "aspect-3/5": string;
+    "aspect-16/9": string;
+    "aspect-9/16": string;
+    "aspect-2/1": string;
+    "aspect-1/2": string;
+};

package/dist/src/components/Images/index.js

@@ -0,0 +1,19 @@
+export var aspectRatio = {
+    square: "aspect-square",
+    "aspect-5/4": "aspect-5/4",
+    "aspect-4/5": "aspect-4/5",
+    "aspect-4/3": "aspect-4/3",
+    "aspect-3/4": "aspect-3/4",
+    "aspect-7/5": "aspect-7/5",
+    "aspect-5/7": "aspect-5/7",
+    "aspect-3/2": "aspect-3/2",
+    "aspect-2/3": "aspect-2/3",
+    "aspect-16/10": "aspect-16/10",
+    "aspect-10/16": "aspect-10/16",
+    "aspect-5/3": "aspect-5/3",
+    "aspect-3/5": "aspect-3/5",
+    "aspect-16/9": "aspect-16/9",
+    "aspect-9/16": "aspect-9/16",
+    "aspect-2/1": "aspect-2/1",
+    "aspect-1/2": "aspect-1/2",
+};

package/dist/src/components/Images/type.d.ts

@@ -0,0 +1,7 @@
+import { ImageProps } from "next/image";
+import { aspectRatio } from ".";
+type aspectRatio = keyof typeof aspectRatio;
+export interface AspectRatioProps extends ImageProps {
+    ratio?: aspectRatio;
+}
+export {};

package/dist/src/components/Images/type.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/Input/Input.d.ts

@@ -0,0 +1,3 @@
+import { InputFieldProps } from "./type";
+declare const Input: ({ type, placeholder, className, ...props }: InputFieldProps) => import("react/jsx-runtime").JSX.Element;
+export default Input;

package/dist/{components/Typography/Headings/Headings.js → src/components/Input/Input.js}

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,12 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var constants_1 = require("../../../utils/constants");
-var _1 = require("./");
-var Heading = function (_a) {
-    var _b = _a.heading, heading = _b === void 0 ? _1.Heading_Classes["lu-heading-h1"] : _b, _c = _a.label, label = _c === void 0 ? constants_1.Dummy_Para : _c, _d = _a.className, className = _d === void 0 ? "" : _d, props = __rest(_a, ["heading", "label", "className"]);
-    return ((0, jsx_runtime_1.jsx)("h1", __assign({}, props, { className: "".concat(heading, " ").concat(className), children: label })));
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Input as ShadInput } from "../../components/ui/input";
+var Input = function (_a) {
+    var _b = _a.type, type = _b === void 0 ? "text" : _b, _c = _a.placeholder, placeholder = _c === void 0 ? "Type Placeholder here" : _c, className = _a.className, props = __rest(_a, ["type", "placeholder", "className"]);
+    return (_jsx(_Fragment, { children: _jsx(ShadInput, __assign({ type: type, placeholder: placeholder, className: className }, props)) }));
 };
-exports.default = Heading;
+export default Input;

package/dist/src/components/Input/Input.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+import { InputFieldProps } from "./type";
+declare const _default: Meta<InputFieldProps>;
+export default _default;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, InputFieldProps>;

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

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input } from "../ui/input";
+import { inputType } from "."; // Ensure this exports an object like { text: 'text', email: 'email', ... }
+export default {
+    title: "Components/Input",
+    component: Input,
+    tags: ["autodocs"],
+    argTypes: {
+        type: {
+            control: {
+                type: "select",
+                labels: Object.keys(inputType),
+            },
+            options: Object.keys(inputType),
+            defaultValue: "text",
+        },
+        placeholder: {
+            control: "text",
+            defaultValue: "Enter text",
+        },
+        disabled: {
+            control: "boolean",
+            defaultValue: false,
+        },
+        className: {
+            control: "text",
+        },
+    },
+};
+var Template = function (args) { return _jsx(Input, __assign({}, args)); };
+export var Default = Template.bind({});
+Default.args = {
+    type: "text",
+    placeholder: "Enter your input",
+};

package/dist/src/components/Input/index.d.ts

@@ -0,0 +1,10 @@
+export declare const inputType: {
+    text: string;
+    password: string;
+    email: string;
+    file: string;
+    number: string;
+    search: string;
+    tel: string;
+    url: string;
+};

package/dist/src/components/Input/index.js

@@ -0,0 +1,10 @@
+export var inputType = {
+    text: "text",
+    password: "password",
+    email: "email",
+    file: "file",
+    number: "number",
+    search: "search",
+    tel: "tel",
+    url: "url",
+};

package/dist/src/components/Input/type.d.ts

@@ -0,0 +1,8 @@
+export interface InputFieldProps extends React.HTMLAttributes<HTMLInputElement> {
+    type: string;
+    id?: string;
+    placeholder?: string;
+    className?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string;
+}

package/dist/src/components/Input/type.js

@@ -0,0 +1 @@
+export {};

package/dist/src/components/Label/Label.d.ts

@@ -0,0 +1,3 @@
+import { LabelProps } from "./type";
+declare const Label: ({ htmlFor, children, ...props }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export default Label;

package/dist/{components/Typography/Display/Display.js → src/components/Label/Label.js}

@@ -1,4 +1,3 @@
-"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -21,12 +20,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var constants_1 = require("../../../utils/constants");
-var _1 = require("./");
-var Display = function (_a) {
-    var _b = _a.display, display = _b === void 0 ? _1.Display_Classes["lu-display-1"] : _b, _c = _a.label, label = _c === void 0 ? constants_1.Dummy_Para : _c, _d = _a.className, className = _d === void 0 ? "" : _d, props = __rest(_a, ["display", "label", "className"]);
-    return ((0, jsx_runtime_1.jsx)("div", __assign({}, props, { className: "".concat(display, " ").concat(className, " "), children: label })));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Label as ShadLabel } from "../../components/ui/label";
+var Label = function (_a) {
+    var _b = _a.htmlFor, htmlFor = _b === void 0 ? "text" : _b, _c = _a.children, children = _c === void 0 ? "Label" : _c, props = __rest(_a, ["htmlFor", "children"]);
+    return (_jsx(ShadLabel, __assign({ htmlFor: htmlFor }, props, { children: children })));
 };
-exports.default = Display;
+export default Label;

package/dist/src/components/Label/Label.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from "@storybook/react";
+import { LabelProps } from "./type";
+declare const _default: Meta;
+export default _default;
+export declare const _Label: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, LabelProps>;