linkedunion-design-kit 1.5.2 → 1.5.3

package/dist/src/components/Button/IconButton.test.jsx

@@ -0,0 +1,29 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { buttonColors, buttonShapes, iconButtonSize } from ".";
+import LUIcon from "../Icons/LUIcon";
+import IconButton from "./IconButton";
+describe("Icon Button Component", function () {
+    it("renders icon button with required icon prop", function () {
+        render(<IconButton icon={<LUIcon icon="chart-simple" size="xs"/>}/>);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+    it("calls onClick handler when clicked", function () {
+        var handleClick = jest.fn();
+        render(<IconButton onClick={handleClick} icon={<LUIcon icon="chart-simple" size="xs"/>}/>);
+        fireEvent.click(screen.getByRole("button"));
+        expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+    it("applies correct color, shape, and size classes", function () {
+        render(<IconButton color="primary" shape="rounded-lg" size="lg" icon={<LUIcon icon="chart-simple" size="xs"/>}/>);
+        var buttonElement = screen.getByRole("button");
+        expect(buttonElement).toHaveClass(buttonColors["primary"], buttonShapes["rounded-lg"], iconButtonSize["lg"]);
+    });
+    it("applies additional className when provided", function () {
+        render(<IconButton className="custom-class" icon={<LUIcon icon="chart-simple" size="xs"/>}/>);
+        expect(screen.getByRole("button")).toHaveClass("custom-class");
+    });
+    it("renders without crashing when all required props are provided", function () {
+        render(<IconButton icon={<LUIcon icon="chart-simple" size="xs"/>}/>);
+        expect(screen.getByRole("button")).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,39 @@
+export declare const buttonColors: {
+    primary: string;
+    "primary-light": string;
+    success: string;
+    warning: string;
+    danger: string;
+    info: string;
+    gray: string;
+    "primary-outline": string;
+    "success-outline": string;
+    "warning-outline": string;
+    "danger-outline": string;
+    "info-outline": string;
+    "gray-outline": string;
+};
+export declare const buttonShapes: {
+    "rounded-none": string;
+    "rounded-xs": string;
+    "rounded-sm": string;
+    "rounded-md": string;
+    "rounded-lg": string;
+    "rounded-xl": string;
+    "rounded-2xl": string;
+    "rounded-3xl": string;
+    "rounded-full": string;
+};
+export declare const buttonSizes: {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};
+export declare const iconButtonSize: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+};

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

@@ -0,0 +1,39 @@
+export var buttonColors = {
+    primary: "text-primary-0 bg-primary-600 hover:bg-primary-700 focus:bg-primary-600 active:bg-primary-800",
+    "primary-light": "text-primary-600 bg-primary-100 hover:bg-primary-600 hover:text-primary-100",
+    success: "text-success-0 bg-success-600 hover:bg-success-700 focus:bg-success-600 active:bg-success-800",
+    warning: "text-warning-1000 bg-warning-500 hover:bg-warning-600 focus:bg-warning-500 active:bg-warning-700",
+    danger: "text-danger-0 bg-danger-600 hover:bg-danger-700 focus:bg-danger-600 active:bg-danger-800",
+    info: "text-info-0 bg-info-600 hover:bg-info-700 focus:bg-info-600 active:bg-info-800",
+    gray: "text-neutral-1000 bg-neutral-0 hover:bg-neutral-100 focus:bg-neutral-0 active:bg-neutral-300",
+    "primary-outline": "text-primary-600 border-2 border-primary-600 bg-white hover:border-primary-700 hover:text-primary-700 focus:border-primary-600 focus:text-primary-600 active:border-primary-800 active:text-primary-800",
+    "success-outline": "text-success-600 border-2 border-success-600 bg-white hover:border-success-700 hover:text-success-700 focus:border-success-600 focus:text-success-600 active:border-success-800 active:text-success-800",
+    "warning-outline": "text-warning-500 border-2 border-warning-500 hover:border-warning-600 hover:text-warning-600 focus:border-warning-500 focus:text-warning-500 active:border-warning-700 active:text-warning-700",
+    "danger-outline": "text-danger-600 border-2 border-danger-600 bg-white hover:border-danger-700 hover:text-danger-700 focus:border-danger-600 focus:text-danger-600 active:border-danger-800 active:text-danger-800",
+    "info-outline": "text-info-600 border-2 border-info-600 bg-white hover:border-info-700 hover:text-info-700 focus:border-info-600 focus:text-info-600 active:border-info-800 active:text-info-800",
+    "gray-outline": "text-neutral-0 border-2 border-neutral-0 bg-white hover:border-neutral-100 hover:text-neutral-100 focus:border-neutral-0 focus:text-neutral-0 active:border-neutral-300 active:text-neutral-300",
+};
+export var buttonShapes = {
+    "rounded-none": "rounded-none",
+    "rounded-xs": "rounded-sm",
+    "rounded-sm": "rounded",
+    "rounded-md": "rounded-md",
+    "rounded-lg": "rounded-lg",
+    "rounded-xl": "rounded-xl",
+    "rounded-2xl": "rounded-2xl",
+    "rounded-3xl": "rounded-3xl",
+    "rounded-full": "!rounded-full",
+};
+export var buttonSizes = {
+    sm: "py-2 px-3 text-base font-normal",
+    md: "py-2 px-4 text-base font-normal",
+    lg: "py-3 px-5 text-lg font-normal",
+    xl: "py-4 px-6 text-xl font-normal",
+};
+export var iconButtonSize = {
+    xs: "!p-1",
+    sm: "p-2",
+    md: "p-2",
+    lg: "p-3",
+    xl: "p-5",
+};

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { buttonShapes, buttonSizes, buttonColors, iconButtonSize } from ".";
+type colors = keyof typeof buttonColors;
+type buttonShapes = keyof typeof buttonShapes;
+type buttonSizes = keyof typeof buttonSizes;
+type iconButtonSize = keyof typeof iconButtonSize;
+export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    color?: colors;
+    onClick?: () => void;
+    size?: buttonSizes;
+    startIcon?: React.ReactNode;
+    endIcon?: React.ReactNode;
+    shape?: buttonShapes;
+    className?: string;
+    children: React.ReactNode;
+}
+export interface IconButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+    color?: colors;
+    onClick?: () => void;
+    size?: iconButtonSize;
+    shape?: buttonShapes;
+    className?: string;
+    icon: React.ReactNode;
+}
+export {};

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

@@ -0,0 +1,3 @@
+import { ColorPickerInterface } from "./type";
+declare const ColorPicker: ({ onChange, value }: ColorPickerInterface) => import("react/jsx-runtime").JSX.Element;
+export default ColorPicker;

package/dist/src/components/ColorPicker/ColorPicker.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { Input } from "../ui/input";
+var ColorPicker = function (_a) {
+    var onChange = _a.onChange, _b = _a.value, value = _b === void 0 ? "#000000" : _b;
+    var _c = useState(value), hexColor = _c[0], setHexColor = _c[1];
+    // Handle input changes (color picker or text field)
+    var handleColorChange = function (newColor) {
+        setHexColor(newColor);
+        onChange(newColor);
+    };
+    // Handle hex input change
+    var handleHexChange = function (e) {
+        var inputValue = e.target.value;
+        // Ensure it starts with #
+        var formattedValue = inputValue.startsWith("#")
+            ? inputValue
+            : "#".concat(inputValue);
+        handleColorChange(formattedValue);
+    };
+    // Handle color input change (from native color picker)
+    var handleColorInputChange = function (e) {
+        handleColorChange(e.target.value);
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "flex", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: "size-9 shrink-0 rounded-l-sm", style: { backgroundColor: hexColor } }), _jsx(Input, { type: "color", value: hexColor, onChange: handleColorInputChange, className: "absolute inset-0 opacity-0 cursor-pointer rounded-r-sm", "aria-label": "Select color" })] }), _jsx(Input, { id: "color-picker", type: "text", value: hexColor, onChange: handleHexChange, className: "rounded-r-sm border min-w-25" })] }) }));
+};
+export default ColorPicker;

package/dist/src/components/ColorPicker/ColorPicker.jsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { Input } from "../ui/input";
+var ColorPicker = function (_a) {
+    var onChange = _a.onChange, _b = _a.value, value = _b === void 0 ? "#000000" : _b;
+    var _c = useState(value), hexColor = _c[0], setHexColor = _c[1];
+    // Handle input changes (color picker or text field)
+    var handleColorChange = function (newColor) {
+        setHexColor(newColor);
+        onChange(newColor);
+    };
+    // Handle hex input change
+    var handleHexChange = function (e) {
+        var inputValue = e.target.value;
+        // Ensure it starts with #
+        var formattedValue = inputValue.startsWith("#")
+            ? inputValue
+            : "#".concat(inputValue);
+        handleColorChange(formattedValue);
+    };
+    // Handle color input change (from native color picker)
+    var handleColorInputChange = function (e) {
+        handleColorChange(e.target.value);
+    };
+    return (<>
+      <div className="flex">
+        <div className="relative">
+          <div className="size-9 shrink-0 rounded-l-sm" style={{ backgroundColor: hexColor }}/>
+          <Input type="color" value={hexColor} onChange={handleColorInputChange} className="absolute inset-0 opacity-0 cursor-pointer rounded-r-sm" aria-label="Select color"/>
+        </div>
+        <Input id="color-picker" type="text" value={hexColor} onChange={handleHexChange} className="rounded-r-sm border min-w-25"/>
+      </div>
+    </>);
+};
+export default ColorPicker;

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

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

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

@@ -0,0 +1,24 @@
+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 ColorPicker from "./ColorPicker";
+export default {
+    title: "Components/ColorPicker",
+    component: ColorPicker,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (_jsx(ColorPicker, __assign({}, args))); };
+export var _ColorPicker = Template.bind({});
+_ColorPicker.args = {
+    value: "#000000", // Default color
+    onChange: function () { },
+};

package/dist/src/components/ColorPicker/ColorPicker.stories.jsx

@@ -0,0 +1,12 @@
+import ColorPicker from "./ColorPicker";
+export default {
+    title: "Components/ColorPicker",
+    component: ColorPicker,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (<ColorPicker {...args}/>); };
+export var _ColorPicker = Template.bind({});
+_ColorPicker.args = {
+    value: "#000000", // Default color
+    onChange: function () { },
+};

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

@@ -0,0 +1,4 @@
+export interface ColorPickerInterface {
+    onChange: (color: string) => void;
+    value: string;
+}

package/dist/src/components/Colors/color.d.ts

@@ -0,0 +1,4 @@
+import { colors } from "../../utils/colors";
+export declare const Color: ({ color }: {
+    color?: keyof typeof colors;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/components/Colors/color.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { colors } from "../../utils/colors";
+export var Color = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "black" : _b;
+    return _jsx("div", { style: { color: colors[color] || colors.black }, children: color });
+};

package/dist/src/components/Colors/color.jsx

@@ -0,0 +1,5 @@
+import { colors } from "../../utils/colors";
+export var Color = function (_a) {
+    var _b = _a.color, color = _b === void 0 ? "black" : _b;
+    return <div style={{ color: colors[color] || colors.black }}>{color}</div>;
+};

package/dist/src/components/Colors/color.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/react";
+import { colors } from "../../utils/colors";
+declare const _default: Meta;
+export default _default;
+export declare const _Color: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
+    color: keyof typeof colors;
+}>;

package/dist/src/components/Colors/color.stories.js

@@ -0,0 +1,32 @@
+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 { colors } from "../../utils/colors";
+import { Color } from "./color";
+export default {
+    title: "Components/Color",
+    component: Color,
+};
+var Template = function (args) { return (_jsx(Color, __assign({}, args))); };
+export var _Color = Template.bind({});
+_Color.args = {
+    color: "black", // Default color
+};
+_Color.argTypes = {
+    color: {
+        control: {
+            type: "select",
+            labels: Object.keys(colors),
+        },
+        options: Object.keys(colors),
+    },
+};

package/dist/src/components/Colors/color.stories.jsx

@@ -0,0 +1,20 @@
+import { colors } from "../../utils/colors";
+import { Color } from "./color";
+export default {
+    title: "Components/Color",
+    component: Color,
+};
+var Template = function (args) { return (<Color {...args}/>); };
+export var _Color = Template.bind({});
+_Color.args = {
+    color: "black", // Default color
+};
+_Color.argTypes = {
+    color: {
+        control: {
+            type: "select",
+            labels: Object.keys(colors),
+        },
+        options: Object.keys(colors),
+    },
+};

package/dist/src/components/Colors/color.test.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { colors } from "../../utils/colors";
+import { Color } from "./color";
+describe("TextColor Component", function () {
+    it("renders with default color (black)", function () {
+        render(_jsx(Color, {}));
+        var textElement = screen.getByText("black");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors.black });
+    });
+    it("renders with a specified color", function () {
+        render(_jsx(Color, { color: "primary-500" }));
+        var textElement = screen.getByText("primary-500");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors["primary-500"] });
+    });
+    it("handles invalid color gracefully", function () {
+        render(_jsx(Color, { color: "invalid-color" }));
+        var textElement = screen.getByText("invalid-color");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors.black }); // It should default to black
+    });
+});

package/dist/src/components/Colors/color.test.jsx

@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import { colors } from "../../utils/colors";
+import { Color } from "./color";
+describe("TextColor Component", function () {
+    it("renders with default color (black)", function () {
+        render(<Color />);
+        var textElement = screen.getByText("black");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors.black });
+    });
+    it("renders with a specified color", function () {
+        render(<Color color="primary-500"/>);
+        var textElement = screen.getByText("primary-500");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors["primary-500"] });
+    });
+    it("handles invalid color gracefully", function () {
+        render(<Color color={"invalid-color"}/>);
+        var textElement = screen.getByText("invalid-color");
+        expect(textElement).toBeInTheDocument();
+        expect(textElement).toHaveStyle({ color: colors.black }); // It should default to black
+    });
+});

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

@@ -0,0 +1,4 @@
+declare const EditorTooltip: ({ title }: {
+    title: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export default EditorTooltip;

package/dist/src/components/EditorTooltip/EditorTooltip.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip";
+import IconButton from "../Button/IconButton";
+import LUIcon from "../Icons/LUIcon";
+var EditorTooltip = function (_a) {
+    var title = _a.title;
+    return (_jsx(TooltipProvider, { children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { children: _jsx(IconButton, { icon: _jsx(LUIcon, { icon: "question", size: "xxs" }), size: "xs", shape: "rounded-full", color: "primary-light" }) }), _jsx(TooltipContent, { children: _jsx("p", { children: title }) })] }) }));
+};
+export default EditorTooltip;

package/dist/src/components/EditorTooltip/EditorTooltip.jsx

@@ -0,0 +1,18 @@
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "../ui/tooltip";
+import IconButton from "../Button/IconButton";
+import LUIcon from "../Icons/LUIcon";
+import { Dummy_Para } from "../../utils/constants";
+var EditorTooltip = function (_a) {
+    var _b = _a.title, title = _b === void 0 ? Dummy_Para : _b;
+    return (<TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger>
+          <IconButton icon={<LUIcon icon="question" size="xxs"/>} size="xs" shape="rounded-full" color="primary-light"/>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{title}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>);
+};
+export default EditorTooltip;

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

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

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

@@ -0,0 +1,24 @@
+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 EditorTooltip from "./EditorTooltip";
+import { Dummy_Para } from "../../utils/constants";
+export default {
+    title: "Components/EditorTooltip",
+    component: EditorTooltip,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (_jsx(EditorTooltip, __assign({}, args))); };
+export var _EditorTooltip = Template.bind({});
+_EditorTooltip.args = {
+    title: Dummy_Para,
+};

package/dist/src/components/EditorTooltip/EditorTooltip.stories.jsx

@@ -0,0 +1,12 @@
+import EditorTooltip from "./EditorTooltip";
+import { Dummy_Para } from "../../utils/constants";
+export default {
+    title: "Components/EditorTooltip",
+    component: EditorTooltip,
+    tags: ["autodocs"],
+};
+var Template = function (args) { return (<EditorTooltip {...args}/>); };
+export var _EditorTooltip = Template.bind({});
+_EditorTooltip.args = {
+    title: Dummy_Para,
+};

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

@@ -0,0 +1,3 @@
+export interface EditorTooltipInterface {
+    title: string;
+}

package/dist/{components → src/components}/Icons/IconList.test.js

@@ -1,9 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("@testing-library/react");
-var IconView_1 = require("./IconView");
-var iconList_1 = require("../../utils/iconList");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { IconView } from "./IconView";
+import { iconList } from "../../utils/iconList";
 // Mocking iconList for the tests
 jest.mock("../../utils/iconList", function () { return ({
     iconList: [
@@ -14,43 +12,43 @@ jest.mock("../../utils/iconList", function () { return ({
 describe("IconView Component", function () {
     // Test: Check if the correct number of icons are rendered
     it("should render the correct number of icons", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(IconView_1.IconView, {}));
-        var iconContainers = react_1.screen.getAllByTestId("single-icon");
-        expect(iconContainers).toHaveLength(iconList_1.iconList.length); // Should match the length of iconList
+        render(_jsx(IconView, {}));
+        var iconContainers = screen.getAllByTestId("single-icon");
+        expect(iconContainers).toHaveLength(iconList.length); // Should match the length of iconList
     });
     // Test: Ensure each icon has a path with correct `d` attribute
     it("should render each icon with the correct path", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(IconView_1.IconView, {}));
+        render(_jsx(IconView, {}));
         // Ensure the correct number of icon containers are rendered
-        var iconContainers = react_1.screen.getAllByTestId("single-icon");
+        var iconContainers = screen.getAllByTestId("single-icon");
         iconContainers.forEach(function (_, index) {
             // const svgElement = screen.getByTestId(`single-icon-svg-${index}`);
-            var pathElement = react_1.screen.getByTestId("icon-path-".concat(index));
+            var pathElement = screen.getByTestId("icon-path-".concat(index));
             // Find the corresponding icon object
-            var icon = iconList_1.iconList[index];
+            var icon = iconList[index];
             // Check that the path matches the icon's path
             expect(pathElement).toHaveAttribute("d", icon.path);
         });
     });
     // Test: Ensure each icon has the correct label
     it("should render each icon with the correct label", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(IconView_1.IconView, {}));
-        iconList_1.iconList.forEach(function (icon, index) {
-            var labelElement = react_1.screen.getByTestId("icon-label-".concat(index));
+        render(_jsx(IconView, {}));
+        iconList.forEach(function (icon, index) {
+            var labelElement = screen.getByTestId("icon-label-".concat(index));
             expect(labelElement).toHaveTextContent(icon.label); // Check label text content
         });
     });
     // Test: Ensure the grid structure is correct
     it("should render icons inside a grid structure", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(IconView_1.IconView, {}));
-        var gridContainer = react_1.screen.getByTestId("icons-list");
+        render(_jsx(IconView, {}));
+        var gridContainer = screen.getByTestId("icons-list");
         expect(gridContainer).toBeInTheDocument();
         expect(gridContainer).toHaveClass("grid");
     });
     // Test: Check hover behavior for icons (optional)
     it("should change background color on hover", function () {
-        (0, react_1.render)((0, jsx_runtime_1.jsx)(IconView_1.IconView, {}));
-        var iconContainers = react_1.screen.getAllByTestId("single-icon");
+        render(_jsx(IconView, {}));
+        var iconContainers = screen.getAllByTestId("single-icon");
         var icon = iconContainers[0];
         // Simulate hover effect by adding the class for hover
         icon.classList.add("hover:bg-gray-200");

package/dist/src/components/Icons/IconList.test.jsx

@@ -0,0 +1,57 @@
+import { render, screen } from "@testing-library/react";
+import { IconView } from "./IconView";
+import { iconList } from "../../utils/iconList";
+// Mocking iconList for the tests
+jest.mock("../../utils/iconList", function () { return ({
+    iconList: [
+        { label: "Home", path: "M10 10 L20 20 L30 10 Z" },
+        { label: "Search", path: "M15 15 L25 25 L35 15 Z" },
+    ],
+}); });
+describe("IconView Component", function () {
+    // Test: Check if the correct number of icons are rendered
+    it("should render the correct number of icons", function () {
+        render(<IconView />);
+        var iconContainers = screen.getAllByTestId("single-icon");
+        expect(iconContainers).toHaveLength(iconList.length); // Should match the length of iconList
+    });
+    // Test: Ensure each icon has a path with correct `d` attribute
+    it("should render each icon with the correct path", function () {
+        render(<IconView />);
+        // Ensure the correct number of icon containers are rendered
+        var iconContainers = screen.getAllByTestId("single-icon");
+        iconContainers.forEach(function (_, index) {
+            // const svgElement = screen.getByTestId(`single-icon-svg-${index}`);
+            var pathElement = screen.getByTestId("icon-path-".concat(index));
+            // Find the corresponding icon object
+            var icon = iconList[index];
+            // Check that the path matches the icon's path
+            expect(pathElement).toHaveAttribute("d", icon.path);
+        });
+    });
+    // Test: Ensure each icon has the correct label
+    it("should render each icon with the correct label", function () {
+        render(<IconView />);
+        iconList.forEach(function (icon, index) {
+            var labelElement = screen.getByTestId("icon-label-".concat(index));
+            expect(labelElement).toHaveTextContent(icon.label); // Check label text content
+        });
+    });
+    // Test: Ensure the grid structure is correct
+    it("should render icons inside a grid structure", function () {
+        render(<IconView />);
+        var gridContainer = screen.getByTestId("icons-list");
+        expect(gridContainer).toBeInTheDocument();
+        expect(gridContainer).toHaveClass("grid");
+    });
+    // Test: Check hover behavior for icons (optional)
+    it("should change background color on hover", function () {
+        render(<IconView />);
+        var iconContainers = screen.getAllByTestId("single-icon");
+        var icon = iconContainers[0];
+        // Simulate hover effect by adding the class for hover
+        icon.classList.add("hover:bg-gray-200");
+        // Check that the hover class is applied
+        expect(icon).toHaveClass("hover:bg-gray-200");
+    });
+});

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { colors } from "../../utils/colors";
+import { iconList } from "../../utils/iconList";
+export var IconView = function () {
+    return (_jsx(_Fragment, { children: _jsx("div", { className: "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-6 gap-6", "data-testid": "icons-list", children: iconList.map(function (icon, index) {
+                return (_jsxs("div", { className: "flex flex-col items-center justify-center bg-neutral-100 rounded-lg p-4 shadow-md hover:bg-neutral-200", "data-testid": "single-icon", children: [_jsxs("svg", { width: "25", height: "25", viewBox: "0 0 32 32", fill: "none", className: "mb-2", role: "img", children: [_jsx("g", { clipPath: "url(#clip0_9168_14965)", children: _jsx("path", { "data-testid": "icon-path-".concat(index), d: icon === null || icon === void 0 ? void 0 : icon.path, fill: colors["neutral-1000"] }) }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_9168_14965", children: _jsx("rect", { width: "32", height: "32", fill: "black" }) }) })] }), _jsx("p", { "data-testid": "icon-label-".concat(index), className: "text-xs font-normal ".concat(colors["neutral-600"], " text-center"), children: icon === null || icon === void 0 ? void 0 : icon.label })] }, index));
+            }) }) }));
+};