@uxf/ui 11.45.1 → 11.47.0

package/readmes.js

@@ -36,33 +36,34 @@ const README_md_28 = __importDefault(require("./form-component/README.md"));
 const README_md_29 = __importDefault(require("./icon/README.md"));
 const README_md_30 = __importDefault(require("./icon-button/README.md"));
 const README_md_31 = __importDefault(require("./image-gallery/README.md"));
-const README_md_32 = __importDefault(require("./input/README.md"));
-const README_md_33 = __importDefault(require("./label/README.md"));
-const README_md_34 = __importDefault(require("./layout/README.md"));
-const README_md_35 = __importDefault(require("./list-item/README.md"));
-const README_md_36 = __importDefault(require("./loader/README.md"));
-const README_md_37 = __importDefault(require("./lozenge/README.md"));
-const README_md_38 = __importDefault(require("./message/README.md"));
-const README_md_39 = __importDefault(require("./modal/README.md"));
-const README_md_40 = __importDefault(require("./modal-dialog/README.md"));
-const README_md_41 = __importDefault(require("./modal-header/README.md"));
-const README_md_42 = __importDefault(require("./multi-combobox/README.md"));
-const README_md_43 = __importDefault(require("./multi-select/README.md"));
-const README_md_44 = __importDefault(require("./pagination/README.md"));
-const README_md_45 = __importDefault(require("./paper/README.md"));
-const README_md_46 = __importDefault(require("./radio/README.md"));
-const README_md_47 = __importDefault(require("./radio-group/README.md"));
-const README_md_48 = __importDefault(require("./raster-image/README.md"));
-const README_md_49 = __importDefault(require("./select/README.md"));
-const README_md_50 = __importDefault(require("./tabs/README.md"));
-const README_md_51 = __importDefault(require("./text-input/README.md"));
-const README_md_52 = __importDefault(require("./text-link/README.md"));
-const README_md_53 = __importDefault(require("./textarea/README.md"));
-const README_md_54 = __importDefault(require("./time-picker/README.md"));
-const README_md_55 = __importDefault(require("./time-picker-input/README.md"));
-const README_md_56 = __importDefault(require("./toggle/README.md"));
-const README_md_57 = __importDefault(require("./tooltip/README.md"));
-const README_md_58 = __importDefault(require("./typography/README.md"));
+const README_md_32 = __importDefault(require("./info-box/README.md"));
+const README_md_33 = __importDefault(require("./input/README.md"));
+const README_md_34 = __importDefault(require("./label/README.md"));
+const README_md_35 = __importDefault(require("./layout/README.md"));
+const README_md_36 = __importDefault(require("./list-item/README.md"));
+const README_md_37 = __importDefault(require("./loader/README.md"));
+const README_md_38 = __importDefault(require("./lozenge/README.md"));
+const README_md_39 = __importDefault(require("./message/README.md"));
+const README_md_40 = __importDefault(require("./modal/README.md"));
+const README_md_41 = __importDefault(require("./modal-dialog/README.md"));
+const README_md_42 = __importDefault(require("./modal-header/README.md"));
+const README_md_43 = __importDefault(require("./multi-combobox/README.md"));
+const README_md_44 = __importDefault(require("./multi-select/README.md"));
+const README_md_45 = __importDefault(require("./pagination/README.md"));
+const README_md_46 = __importDefault(require("./paper/README.md"));
+const README_md_47 = __importDefault(require("./radio/README.md"));
+const README_md_48 = __importDefault(require("./radio-group/README.md"));
+const README_md_49 = __importDefault(require("./raster-image/README.md"));
+const README_md_50 = __importDefault(require("./select/README.md"));
+const README_md_51 = __importDefault(require("./tabs/README.md"));
+const README_md_52 = __importDefault(require("./text-input/README.md"));
+const README_md_53 = __importDefault(require("./text-link/README.md"));
+const README_md_54 = __importDefault(require("./textarea/README.md"));
+const README_md_55 = __importDefault(require("./time-picker/README.md"));
+const README_md_56 = __importDefault(require("./time-picker-input/README.md"));
+const README_md_57 = __importDefault(require("./toggle/README.md"));
+const README_md_58 = __importDefault(require("./tooltip/README.md"));
+const README_md_59 = __importDefault(require("./typography/README.md"));
 exports.readmes = {
     "alert-bubble": README_md_1.default,
     "avatar": README_md_2.default,
@@ -95,31 +96,32 @@ exports.readmes = {
     "icon": README_md_29.default,
     "icon-button": README_md_30.default,
     "image-gallery": README_md_31.default,
-    "input": README_md_32.default,
-    "label": README_md_33.default,
-    "layout": README_md_34.default,
-    "list-item": README_md_35.default,
-    "loader": README_md_36.default,
-    "lozenge": README_md_37.default,
-    "message": README_md_38.default,
-    "modal": README_md_39.default,
-    "modal-dialog": README_md_40.default,
-    "modal-header": README_md_41.default,
-    "multi-combobox": README_md_42.default,
-    "multi-select": README_md_43.default,
-    "pagination": README_md_44.default,
-    "paper": README_md_45.default,
-    "radio": README_md_46.default,
-    "radio-group": README_md_47.default,
-    "raster-image": README_md_48.default,
-    "select": README_md_49.default,
-    "tabs": README_md_50.default,
-    "text-input": README_md_51.default,
-    "text-link": README_md_52.default,
-    "textarea": README_md_53.default,
-    "time-picker": README_md_54.default,
-    "time-picker-input": README_md_55.default,
-    "toggle": README_md_56.default,
-    "tooltip": README_md_57.default,
-    "typography": README_md_58.default,
+    "infobox": README_md_32.default,
+    "input": README_md_33.default,
+    "label": README_md_34.default,
+    "layout": README_md_35.default,
+    "list-item": README_md_36.default,
+    "loader": README_md_37.default,
+    "lozenge": README_md_38.default,
+    "message": README_md_39.default,
+    "modal": README_md_40.default,
+    "modal-dialog": README_md_41.default,
+    "modal-header": README_md_42.default,
+    "multi-combobox": README_md_43.default,
+    "multi-select": README_md_44.default,
+    "pagination": README_md_45.default,
+    "paper": README_md_46.default,
+    "radio": README_md_47.default,
+    "radio-group": README_md_48.default,
+    "raster-image": README_md_49.default,
+    "select": README_md_50.default,
+    "tabs": README_md_51.default,
+    "text-input": README_md_52.default,
+    "text-link": README_md_53.default,
+    "textarea": README_md_54.default,
+    "time-picker": README_md_55.default,
+    "time-picker-input": README_md_56.default,
+    "toggle": README_md_57.default,
+    "tooltip": README_md_58.default,
+    "typography": README_md_59.default,
 };

package/tabs/components/tabs-button.d.ts

@@ -1,5 +1,5 @@
 import { Nullish } from "@uxf/core/types";
-import { TabsVariant } from "@uxf/ui/tabs/theme";
+import { TabsVariant } from "@uxf/ui/tabs/types";
 import React, { ForwardedRef, ReactNode } from "react";
 interface TabsButtonProps {
     className?: string;

package/tabs/components/tabs-root.d.ts

@@ -1,4 +1,4 @@
-import { TabsVariant } from "@uxf/ui/tabs/theme";
+import { TabsVariant } from "@uxf/ui/tabs/types";
 import React, { ReactNode } from "react";
 interface TabsRootProps {
     className?: string;

package/tabs/index.d.ts

@@ -1 +1,2 @@
 export * from "./tabs";
+export * from "./types";

package/tabs/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./tabs"), exports);
+__exportStar(require("./types"), exports);

package/tabs/tabs.d.ts

@@ -1,4 +1,4 @@
-import { TabsVariant } from "@uxf/ui/tabs/theme";
+import { TabsVariant } from "@uxf/ui/tabs/types";
 import React, { ReactNode } from "react";
 import { Panel } from "./panel";
 import { PanelContent } from "./panel-content";

package/tabs/theme.d.ts

@@ -2,4 +2,3 @@ export interface TabsVariants {
     default: true;
     segmented: true;
 }
-export type TabsVariant = keyof TabsVariants;

package/tabs/types.d.ts

@@ -0,0 +1,2 @@
+import { TabsVariants } from "@uxf/ui/tabs/theme";
+export type TabsVariant = keyof TabsVariants;

package/tabs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/text-link/text-link.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./text-link").TextLinkProps & React.RefAttributes<HTMLAnchorElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/text-link/text-link.stories.js

@@ -6,10 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/TextLink",
-    component: index_1.TextLink,
-};
 function Default() {
     // eslint-disable-next-line no-console
     const onClick = console.log;

package/textarea/textarea.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./textarea").TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/textarea/textarea.stories.js

@@ -27,10 +27,6 @@ exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/Textarea",
-    component: index_1.Textarea,
-};
 function Default() {
     const [value, setValue] = (0, react_1.useState)("test");
     const onChange = (0, action_1.action)("onChange", setValue);

package/time-picker/time-picker.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.FC<import("./time-picker").TimePickerProps>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/time-picker/time-picker.stories.js

@@ -28,10 +28,6 @@ const noop_1 = require("@uxf/core/utils/noop");
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const time_picker_1 = require("./time-picker");
-exports.default = {
-    title: "UI/TimePicker",
-    component: time_picker_1.TimePicker,
-};
 function Default() {
     const [value, setValue] = (0, react_1.useState)(null);
     const onChange = (0, action_1.action)("onChange", setValue);

package/toggle/toggle.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./toggle").ToggleProps & React.RefAttributes<HTMLButtonElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/toggle/toggle.stories.js

@@ -27,10 +27,6 @@ exports.Default = Default;
 const react_1 = __importStar(require("react"));
 const action_1 = require("../utils/action");
 const index_1 = require("./index");
-exports.default = {
-    title: "UI/Toggle",
-    component: index_1.Toggle,
-};
 function Default() {
     const [isChecked, setIsChecked] = (0, react_1.useState)(true);
     const onChange = (0, action_1.action)("onChange", () => setIsChecked((prev) => !prev));

package/tooltip/tooltip.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<import("./tooltip").TooltipProps & React.RefAttributes<HTMLElement>>;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/tooltip/tooltip.stories.js

@@ -7,10 +7,6 @@ exports.Default = Default;
 const react_1 = __importDefault(require("react"));
 const chip_1 = require("../chip");
 const tooltip_1 = require("./tooltip");
-exports.default = {
-    title: "UI/Tooltip",
-    component: tooltip_1.Tooltip,
-};
 function Default() {
     const sides = ["top", "bottom", "bottom-start", "left", "right"];
     return (react_1.default.createElement("div", { className: "grid h-96 place-items-center" }, sides.map((placement) => (react_1.default.createElement(tooltip_1.Tooltip, { content: "My tooltip content", key: placement, placement: placement },

package/typography/typography.stories.d.ts

@@ -1,7 +1,2 @@
 import React from "react";
-declare const _default: {
-    title: string;
-    component: null;
-};
-export default _default;
 export declare function Default(): React.JSX.Element;

package/typography/typography.stories.js

@@ -5,10 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
 const react_1 = __importDefault(require("react"));
-exports.default = {
-    title: "UI/Typography",
-    component: null,
-};
 function Default() {
     return (react_1.default.createElement("div", { className: "space-y-4 dark:text-white" },
         react_1.default.createElement("h1", { className: "uxf-typo-h1" }, ".uxf-typo-h1"),

package/utils/files/get-file-icon.test.d.ts

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

package/utils/files/get-file-icon.test.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const get_file_icon_1 = require("./get-file-icon");
+describe("getIconNameFromFileExtension", () => {
+    it("should return 'imageFile' for image extensions", () => {
+        expect((0, get_file_icon_1.getIconNameFromFileExtension)("jpg")).toBe("imageFile");
+        expect((0, get_file_icon_1.getIconNameFromFileExtension)("jpeg")).toBe("imageFile");
+        expect((0, get_file_icon_1.getIconNameFromFileExtension)("png")).toBe("imageFile");
+        expect((0, get_file_icon_1.getIconNameFromFileExtension)("gif")).toBe("imageFile");
+    });
+    it("should return 'videoFile' for video extensions", () => {
+        expect((0, get_file_icon_1.getIconNameFromFileExtension)("mp4")).toBe("videoFile");
+        expect((0, get_file_icon_1.getIconNameFromFileExtension)("avi")).toBe("videoFile");
+        expect((0, get_file_icon_1.getIconNameFromFileExtension)("mov")).toBe("videoFile");
+    });
+    it("should return 'file' for unknown extensions", () => {
+        expect((0, get_file_icon_1.getIconNameFromFileExtension)("pdf")).toBe("file");
+        expect((0, get_file_icon_1.getIconNameFromFileExtension)("docx")).toBe("file");
+        expect((0, get_file_icon_1.getIconNameFromFileExtension)("txt")).toBe("file");
+        expect((0, get_file_icon_1.getIconNameFromFileExtension)("exe")).toBe("file");
+    });
+});

package/utils/files/get-file-url.test.d.ts

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

package/utils/files/get-file-url.test.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const get_file_url_1 = require("./get-file-url");
+describe("getFileUrl", () => {
+    it("should generate a correct file URL with default namespace", () => {
+        const domain = "https://example.com";
+        const file = {
+            id: 1,
+            name: "test",
+            namespace: null,
+            uuid: "123-456-789",
+            extension: "jpg",
+            type: "image/jpeg",
+        };
+        const result = (0, get_file_url_1.getFileUrl)(domain, file);
+        expect(result).toBe("https://example.com/upload/default/1/2/123-456-789.jpg");
+    });
+    it("should generate a correct file URL with specified namespace", () => {
+        const domain = "https://example.com";
+        const file = {
+            id: 2,
+            name: "anotherTest",
+            namespace: "customNamespace",
+            uuid: "123-456-789",
+            extension: "png",
+            type: "image/png",
+        };
+        const result = (0, get_file_url_1.getFileUrl)(domain, file);
+        expect(result).toBe("https://example.com/upload/customNamespace/1/2/123-456-789.png");
+    });
+    it("should generate a correct file URL with default namespace and different extension", () => {
+        const domain = "https://example.com";
+        const file = {
+            id: 3,
+            name: "document",
+            namespace: null,
+            uuid: "111-222-333",
+            extension: "pdf",
+            type: "application/pdf",
+        };
+        const result = (0, get_file_url_1.getFileUrl)(domain, file);
+        expect(result).toBe("https://example.com/upload/default/1/1/111-222-333.pdf");
+    });
+});

package/utils/get-dropzone-state.test.d.ts

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

package/utils/get-dropzone-state.test.js

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const get_dropzone_state_1 = require("./get-dropzone-state");
+describe("getDropzoneState", () => {
+    it("should return OK state when there are no files", () => {
+        const files = [];
+        const result = (0, get_dropzone_state_1.getDropzoneState)(files);
+        expect(result).toEqual({ status: "OK" });
+    });
+    it("should return UPLOADING state when there are files with negative IDs", () => {
+        const files = [
+            {
+                id: -1,
+                name: "file1.txt",
+                uuid: "uuid1",
+                extension: "txt",
+                error: null,
+                progress: null,
+                namespace: null,
+            },
+            { id: 1, name: "file2.txt", uuid: "uuid2", extension: "txt", error: null, progress: null, namespace: null },
+        ];
+        const result = (0, get_dropzone_state_1.getDropzoneState)(files);
+        expect(result).toEqual({ status: "UPLOADING" });
+    });
+    it("should return ERROR state with error messages when files have errors", () => {
+        const files = [
+            {
+                id: 1,
+                name: "file1.txt",
+                uuid: "uuid1",
+                extension: "txt",
+                error: "File too large",
+                progress: null,
+                namespace: null,
+            },
+            {
+                id: 2,
+                name: "file2.txt",
+                uuid: "uuid2",
+                extension: "txt",
+                error: "Unsupported format",
+                progress: null,
+                namespace: null,
+            },
+        ];
+        const result = (0, get_dropzone_state_1.getDropzoneState)(files);
+        expect(result).toEqual({
+            errorMessage: "File too large; Unsupported format",
+            status: "ERROR",
+        });
+    });
+    it("should return OK state when files are uploaded successfully", () => {
+        const files = [
+            { id: 1, name: "file1.txt", uuid: "uuid1", extension: "txt", error: null, progress: null, namespace: null },
+            { id: 2, name: "file2.txt", uuid: "uuid2", extension: "txt", error: null, progress: null, namespace: null },
+        ];
+        const result = (0, get_dropzone_state_1.getDropzoneState)(files);
+        expect(result).toEqual({ status: "OK" });
+    });
+    it("should return OK state when some files are uploading but no errors", () => {
+        const files = [
+            { id: 1, name: "file1.txt", uuid: "uuid1", extension: "txt", error: null, progress: 50, namespace: null },
+            { id: 2, name: "file2.txt", uuid: "uuid2", extension: "txt", error: null, progress: 75, namespace: null },
+        ];
+        const result = (0, get_dropzone_state_1.getDropzoneState)(files);
+        expect(result).toEqual({ status: "OK" });
+    });
+    it("should return ERROR state when there is a file with an error and uploading files", () => {
+        const files = [
+            {
+                id: -1,
+                name: "file1.txt",
+                uuid: "uuid1",
+                extension: "txt",
+                error: "File too large",
+                progress: null,
+                namespace: null,
+            },
+            { id: -2, name: "file2.txt", uuid: "uuid2", extension: "txt", error: null, progress: 50, namespace: null },
+        ];
+        const result = (0, get_dropzone_state_1.getDropzoneState)(files);
+        expect(result).toEqual({
+            errorMessage: "File too large",
+            status: "ERROR",
+        });
+    });
+});

package/utils/mocks/upload-file.mock.test.d.ts

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

package/utils/mocks/upload-file.mock.test.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const upload_file_mock_1 = require("./upload-file.mock");
+describe("uploadFile", () => {
+    const mockFile = new File(["file content"], "test.txt", { type: "text/plain" });
+    it("should resolve with a FileResponse object after upload", async () => {
+        const mockOnUploadProgress = jest.fn();
+        const mockAbortController = new AbortController();
+        const response = await (0, upload_file_mock_1.uploadFile)(mockFile, {
+            onUploadProgress: mockOnUploadProgress,
+            abortController: mockAbortController,
+        });
+        expect(response).toEqual({
+            id: expect.any(Number),
+            uuid: expect.any(String),
+            name: "test.txt",
+            namespace: null,
+            extension: "txt",
+        });
+    });
+    it("should call onUploadProgress with correct values", async () => {
+        const mockOnUploadProgress = jest.fn();
+        const mockAbortController = new AbortController();
+        await (0, upload_file_mock_1.uploadFile)(mockFile, {
+            onUploadProgress: mockOnUploadProgress,
+            abortController: mockAbortController,
+        });
+        expect(mockOnUploadProgress).toHaveBeenCalledWith(expect.objectContaining({
+            lengthComputable: true,
+            loaded: expect.any(Number),
+            total: mockFile.size,
+        }));
+    });
+});