@examplary/ui 0.0.1 → 1.1.0

package/README.md

@@ -1,3 +1,3 @@
 # UI components for Examplary
 
-Read more in the [📘 Developer Documentation](https://developers.examplary.ai/question-types).
+Read more in the [📘 Developer Documentation](https://developers.examplary.ai/question-types).

package/dist/components/rich-text/index.d.ts

@@ -1,5 +1,5 @@
 export { RichTextDisplay } from "./rich-text-display";
-export { RichTextInput } from "./rich-text-input";
+export { RichTextField } from "./rich-text-field";
 export { RichTextToolbar } from "./rich-text-toolbar";
 export { MinimalRichTextField } from "./minimal-rich-text-field";
 export { processFilesAsString } from "./tiptap/file-handler";

package/dist/components/rich-text/index.js

@@ -1,5 +1,5 @@
 export { RichTextDisplay } from "./rich-text-display";
-export { RichTextInput } from "./rich-text-input";
+export { RichTextField } from "./rich-text-field";
 export { RichTextToolbar } from "./rich-text-toolbar";
 export { MinimalRichTextField } from "./minimal-rich-text-field";
 export { processFilesAsString } from "./tiptap/file-handler";

package/dist/components/rich-text/minimal-rich-text-field.d.ts

@@ -1,7 +1,6 @@
 import { EditorContentProps } from "@tiptap/react";
 export type MinimalRichTextFieldProps = {
     className?: string;
-    editorClassName?: string;
     value?: string;
     placeholder?: string;
     onChange?: (value: string) => void;
@@ -14,4 +13,4 @@ export type MinimalRichTextFieldProps = {
         name: string;
     }>;
 } & Omit<EditorContentProps, "editor">;
-export declare const MinimalRichTextField: ({ className, editorClassName, value, placeholder, onChange, slotBefore, singleLine, autoFocus, showFormattingMenu, uploadFile, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MinimalRichTextField: ({ className, value, placeholder, onChange, slotBefore, singleLine, autoFocus, showFormattingMenu, uploadFile, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/rich-text/minimal-rich-text-field.js

@@ -20,6 +20,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import Document from "@tiptap/extension-document";
@@ -39,19 +48,37 @@ import Image from "./tiptap/image";
 import PageClipping from "./tiptap/page-clipping";
 import { RichTextFormattingMenu } from "./tiptap/rich-text-formatting-menu";
 registerWebComponents();
+var isEmpty = function (value) {
+    var _a;
+    if (!value) {
+        return true;
+    }
+    if (!((_a = value.trim) === null || _a === void 0 ? void 0 : _a.call(value))) {
+        return true;
+    }
+    if (value.trim() === "<p></p>" || value.trim() === "<p><br></p>") {
+        return true;
+    }
+    if (value.trim() === "<p> </p>" || value.trim() === "<p></p><p></p>") {
+        return true;
+    }
+    return false;
+};
 export var MinimalRichTextField = function (_a) {
-    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.editorClassName, editorClassName = _c === void 0 ? "" : _c, _d = _a.value, value = _d === void 0 ? "" : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "" : _e, onChange = _a.onChange, slotBefore = _a.slotBefore, _f = _a.singleLine, singleLine = _f === void 0 ? false : _f, _g = _a.autoFocus, autoFocus = _g === void 0 ? false : _g, _h = _a.showFormattingMenu, showFormattingMenu = _h === void 0 ? false : _h, _j = _a.uploadFile, uploadFile = _j === void 0 ? undefined : _j, props = __rest(_a, ["className", "editorClassName", "value", "placeholder", "onChange", "slotBefore", "singleLine", "autoFocus", "showFormattingMenu", "uploadFile"]);
-    var _k = useState(value), content = _k[0], setContent = _k[1];
+    var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.value, value = _c === void 0 ? "" : _c, _d = _a.placeholder, placeholder = _d === void 0 ? "" : _d, onChange = _a.onChange, slotBefore = _a.slotBefore, _e = _a.singleLine, singleLine = _e === void 0 ? false : _e, _f = _a.autoFocus, autoFocus = _f === void 0 ? false : _f, _g = _a.showFormattingMenu, showFormattingMenu = _g === void 0 ? false : _g, _h = _a.uploadFile, uploadFile = _h === void 0 ? undefined : _h, props = __rest(_a, ["className", "value", "placeholder", "onChange", "slotBefore", "singleLine", "autoFocus", "showFormattingMenu", "uploadFile"]);
+    var _j = useState(value), content = _j[0], setContent = _j[1];
     var extensions = useMemo(function () {
-        return [
-            StarterKit.configure({
-                document: singleLine ? false : undefined,
-                link: false,
-            }),
-            singleLine &&
+        return __spreadArray(__spreadArray([], (singleLine
+            ? [
+                StarterKit.configure({
+                    document: false,
+                    link: false,
+                }),
                 Document.extend({
                     content: "block",
                 }),
+            ]
+            : [StarterKit.configure({ link: false })]), true), [
             Link.configure({
                 openOnClick: false,
             }),
@@ -63,12 +90,13 @@ export var MinimalRichTextField = function (_a) {
             // Mathematics,
             Highlight,
             uploadFile && fileHandler(uploadFile),
-        ].filter(Boolean);
+        ], false).filter(Boolean);
     }, [singleLine, placeholder, uploadFile]);
     var editor = useEditor({
         onUpdate: function (_a) {
             var editor = _a.editor;
             var html = editor.getHTML();
+            html = isEmpty(html) ? "" : html;
             setContent(html);
             onChange === null || onChange === void 0 ? void 0 : onChange(html);
         },
@@ -80,7 +108,7 @@ export var MinimalRichTextField = function (_a) {
         extensions: extensions,
         editorProps: {
             attributes: {
-                class: editorClassName || "",
+                class: cn("max-w-none", className),
             },
         },
     });
@@ -95,5 +123,5 @@ export var MinimalRichTextField = function (_a) {
             });
         }
     }, [value, content, editor]);
-    return (_jsxs(_Fragment, { children: [slotBefore ? slotBefore(editor) : null, showFormattingMenu && _jsx(RichTextFormattingMenu, { editor: editor }), _jsx("div", { className: cn("max-w-none", className), children: _jsx(EditorContent, __assign({ editor: editor }, props)) })] }));
+    return (_jsxs(_Fragment, { children: [slotBefore ? slotBefore(editor) : null, showFormattingMenu && _jsx(RichTextFormattingMenu, { editor: editor }), _jsx(EditorContent, __assign({ editor: editor }, props))] }));
 };

package/dist/components/rich-text/rich-text-field.d.ts

@@ -0,0 +1,2 @@
+import { MinimalRichTextFieldProps } from "./minimal-rich-text-field";
+export declare const RichTextField: ({ singleLine, className, ...props }: MinimalRichTextFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/{input.js → rich-text/rich-text-field.js}

@@ -21,11 +21,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "../utils";
-var Input = React.forwardRef(function (_a, ref) {
-    var className = _a.className, type = _a.type, props = __rest(_a, ["className", "type"]);
-    return (_jsx("input", __assign({ type: type, className: cn("flex h-10 w-full rounded-base border-2 text-text dark:text-darkText font-base selection:bg-main selection:text-text border-border dark:border-darkBorder bg-white dark:bg-secondaryBlack px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-base focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref }, props)));
-});
-Input.displayName = "Input";
-export { Input };
+import { MinimalRichTextField, } from "./minimal-rich-text-field";
+import { cn } from "../../utils";
+export var RichTextField = function (_a) {
+    var singleLine = _a.singleLine, className = _a.className, props = __rest(_a, ["singleLine", "className"]);
+    return (_jsx(MinimalRichTextField, __assign({ singleLine: singleLine, className: cn("box p-3 text-sm", !singleLine && "min-h-16", className) }, props)));
+};

package/dist/components/rich-text/tiptap/file-handler.d.ts

@@ -1,4 +1,4 @@
 import { Editor } from "@tiptap/react";
 export declare const processFilesAsString: (uploadFile: any, files: any) => Promise<unknown>;
 export declare const processFiles: (uploadFile: any, currentEditor: Editor, files: any, pos: any) => void;
-export declare const fileHandler: (uploadFile: any) => import("@tiptap/core").Extension<Omit<import("@tiptap-pro/extension-file-handler").FileHandlePluginOptions, "key" | "editor">, any>;
+export declare const fileHandler: (uploadFile: any) => import("@tiptap/core").Extension<Omit<import("@tiptap/extension-file-handler").FileHandlePluginOptions, "key" | "editor">, any>;

package/dist/components/rich-text/tiptap/file-handler.js

@@ -35,7 +35,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import toast from "react-hot-toast";
-import FileHandler from "@tiptap-pro/extension-file-handler";
+import FileHandler from "@tiptap/extension-file-handler";
 import { getImageSize } from "../tiptap/png-scanner";
 export var processFilesAsString = function (uploadFile, files) {
     return new Promise(function (resolve) {
@@ -178,6 +178,8 @@ export var fileHandler = function (uploadFile) {
             "application/pdf",
             "text/html",
             "text/plain",
+            "application/msword",
+            "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
         ],
         onDrop: function (currentEditor, files, pos) {
             processFiles(uploadFile, currentEditor, files, pos);

package/dist/index.d.ts

@@ -1,5 +1,3 @@
 export * from "./utils";
-export { Button } from "./components/button";
-export { Input } from "./components/input";
 export * from "./components/rich-text";
 export * as WebComponents from "./components/web-components";

package/dist/index.js

@@ -1,5 +1,3 @@
 export * from "./utils";
-export { Button } from "./components/button";
-export { Input } from "./components/input";
 export * from "./components/rich-text";
 export * as WebComponents from "./components/web-components";

package/package.json

@@ -2,7 +2,7 @@
   "name": "@examplary/ui",
   "description": "UI components for the Examplary testing platform.",
   "packageManager": "yarn@4.5.3",
-  "version": "0.0.1",
+  "version": "1.1.0",
   "type": "module",
   "main": "dist/index.js",
   "files": [
@@ -17,9 +17,8 @@
     "@floating-ui/dom": "^1.7.2",
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.16",
-    "@tiptap-pro/extension-file-handler": "^2.21.5",
-    "@tiptap-pro/extension-mathematics": "^2.18.0",
     "@tiptap/core": "^3.0.7",
+    "@tiptap/extension-file-handler": "^3.0.7",
     "@tiptap/extension-highlight": "^3.0.7",
     "@tiptap/extension-link": "^3.0.7",
     "@tiptap/extension-mathematics": "^3.0.7",
@@ -36,5 +35,10 @@
   },
   "devDependencies": {
     "typescript": "^5.8.3"
+  },
+  "homepage": "https://developers.examplary.ai",
+  "author": {
+    "name": "Examplary AI",
+    "email": "hi@examplary.ai"
   }
 }

package/dist/components/button.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { type VariantProps } from "class-variance-authority";
-declare const buttonVariants: (props?: {
-    variant?: "default" | "transparent" | "primary" | "noShadow" | "neutral" | "simple" | "pressed" | "reverse";
-    size?: "default" | "sm" | "lg" | "icon";
-} & import("class-variance-authority/types").ClassProp) => string;
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
-}
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-export { Button, buttonVariants };

package/dist/components/button.js

@@ -1,58 +0,0 @@
-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);
-};
-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 { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { cn } from "../utils";
-var buttonVariants = cva("inline-flex font-medium cursor-pointer items-center text-text justify-center whitespace-nowrap rounded-base text-sm font-base ring-offset-white transition-all gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
-    variants: {
-        variant: {
-            default: "bg-white border-2 border-border dark:border-darkBorder shadow-light dark:shadow-dark hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none dark:hover:shadow-none",
-            transparent: "border-2 border-border dark:border-darkBorder shadow-light dark:shadow-dark hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none dark:hover:shadow-none",
-            primary: "bg-bright border-2 border-border dark:border-darkBorder shadow-light dark:shadow-dark hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none dark:hover:shadow-none",
-            noShadow: "bg-white border-2 border-border dark:border-darkBorder",
-            neutral: "bg-white dark:bg-secondaryBlack dark:text-darkText border-2 border-border dark:border-darkBorder shadow-light dark:shadow-dark hover:translate-x-boxShadowX hover:translate-y-boxShadowY hover:shadow-none dark:hover:shadow-none",
-            simple: "bg-white border-2 border-border dark:border-darkBorder",
-            pressed: "bg-white border-2 border-border mt-1 ml-1",
-            reverse: "bg-white border-2 border-border dark:border-darkBorder hover:translate-x-reverseBoxShadowX hover:translate-y-reverseBoxShadowY hover:shadow-light dark:hover:shadow-dark",
-        },
-        size: {
-            default: "h-10 px-4 py-2",
-            sm: "h-9 px-3",
-            lg: "h-11 px-8",
-            icon: "h-10 w-10",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "default",
-    },
-});
-var Button = React.forwardRef(function (_a, ref) {
-    var className = _a.className, variant = _a.variant, size = _a.size, _b = _a.asChild, asChild = _b === void 0 ? false : _b, props = __rest(_a, ["className", "variant", "size", "asChild"]);
-    var Comp = asChild ? Slot : "button";
-    return (_jsx(Comp, __assign({ className: cn(buttonVariants({ variant: variant, size: size, className: className })), ref: ref }, props)));
-});
-Button.displayName = "Button";
-export { Button, buttonVariants };

package/dist/components/input.d.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
-declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-export { Input };

package/dist/components/rich-text/rich-text-input.d.ts

@@ -1,14 +0,0 @@
-import { MinimalRichTextFieldProps } from "./minimal-rich-text-field";
-export type RichTextInputProps = {
-    name: string;
-    defaultValue?: string;
-    className?: string;
-    disabled?: boolean;
-} & MinimalRichTextFieldProps;
-export declare const RichTextInput: ({ name, defaultValue, className, disabled, ...props }: {
-    [x: string]: any;
-    name: any;
-    defaultValue: any;
-    className?: string;
-    disabled?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/rich-text/rich-text-input.js

@@ -1,31 +0,0 @@
-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);
-};
-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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { MinimalRichTextField, } from "./minimal-rich-text-field";
-import { cn } from "../../utils";
-export var RichTextInput = function (_a) {
-    var name = _a.name, defaultValue = _a.defaultValue, _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, props = __rest(_a, ["name", "defaultValue", "className", "disabled"]);
-    var _d = useState(defaultValue), value = _d[0], setValue = _d[1];
-    return (_jsxs(_Fragment, { children: [_jsx("input", { type: "hidden", name: name, value: value }), _jsx(MinimalRichTextField, __assign({ className: cn("rounded-base border-2 text-sm font-base bg-white", "ring-offset-white focus-within:outline-none focus-within:ring-2 focus-within:ring-black focus-within:ring-offset-2", disabled && "opacity-50 pointer-events-none", className), editorClassName: "px-3 py-2", value: value, onChange: setValue }, props))] }));
-};