@luscii-healthtech/web-ui 24.1.0 → 25.1.0

package/dist/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+export type FileUploadProps = {
+    /**
+     * The file types that the input should accept.
+     */
+    accept?: string;
+    /**
+     * The maximum size of the file in MBs.
+     */
+    maxFileSize?: number;
+    /**
+     * The name of the field input.
+     */
+    name?: string;
+    /**
+     * The id of the field input.
+     * To be used with a `<label htmlFor={id}>`.
+     */
+    id?: string;
+    onChange?: (file: File) => void;
+    /**
+     * Disallow the user to change the file input value.
+     */
+    isDisabled?: boolean;
+    /**
+     * The text to be displayed on the button controlling the file input.
+     *
+     * @default "Upload a file"
+     */
+    buttonText: string;
+};
+export declare const FileUpload: React.FC<FileUploadProps>;

package/dist/components/TextEditor/TextEditor.d.ts

@@ -1,9 +1,16 @@
 import React from "react";
-import { ReactQuillProps } from "react-quill";
-import "react-quill/dist/quill.snow.css";
+import type { Delta, EmitterSource } from "quill/core";
+import "quill/dist/quill.snow.css";
 import "./TextEditor.scss";
-type TextEditorProps = Pick<ReactQuillProps, "defaultValue" | "placeholder"> & {
-    onValueChange: ReactQuillProps["onChange"];
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Called when the value of the editor changes.
+     *
+     * @param html string of html
+     * @param delta Quill Delta object
+     * @param source source of the change
+     */
+    onValueChange: (html: string, delta: Delta, source: EmitterSource) => void;
     /**
      * Which formats to allow in the editor, like "bold" and "italic".
      *
@@ -42,6 +49,14 @@ type TextEditorProps = Pick<ReactQuillProps, "defaultValue" | "placeholder"> & {
      * See: https://github.com/zenoamaro/react-quill#custom-toolbar
      */
     toolbar?: TextEditorToolbarOption[][];
+    /**
+     * A string of html.
+     */
+    defaultValue?: string;
+    /**
+     * Placeholder text to show in the editor when it is empty.
+     */
+    placeholder?: string;
 };
 type TextEditorToolbarOption = "bold" | "italic" | "underline" | "strike" | "link" | "video" | {
     list: "ordered";
@@ -49,5 +64,5 @@ type TextEditorToolbarOption = "bold" | "italic" | "underline" | "strike" | "lin
     list: "bullet";
 };
 type TextEditorFormat = "background" | "bold" | "color" | "font" | "code" | "italic" | "link" | "size" | "strike" | "script" | "underline" | "blockquote" | "header" | "list" | "align";
-export declare const TextEditor: React.FC<TextEditorProps>;
+export declare const TextEditor: React.FC<Props>;
 export default TextEditor;

package/dist/index.d.ts

@@ -92,4 +92,5 @@ export { Dropzone, type DropzoneProps } from "./components/Dropzone";
 export { FilterBar, FilterBarUtils } from "./components/FilterBar";
 export { type Weekday, WeekdaysPicker, } from "./components/WeekdaysPicker/WeekdaysPicker";
 export { default as DragHandle, type DragHandleProps, } from "./components/DragHandle";
+export { FileUpload as File, type FileUploadProps as FileProps, } from "./components/FileUpload/FileUpload";
 export { StatusIndicator } from "./components/StatusIndicator/StatusIndicator";

package/dist/index.development.js

@@ -31,8 +31,8 @@ var ReactSelect = require('react-select');
 var groupBy = require('lodash/groupBy');
 var debounce = require('lodash.debounce');
 var reactLazyLoadImageComponent = require('react-lazy-load-image-component');
-var ReactQuill = require('react-quill');
-require('react-quill/dist/quill.snow.css');
+var Quill = require('quill');
+require('quill/dist/quill.snow.css');
 var react = require('@headlessui/react');
 var solid = require('@heroicons/react/20/solid');
 var ToggleGroup = require('@radix-ui/react-toggle-group');
@@ -72,7 +72,7 @@ var FlyOutMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(FlyOutMenuPr
 var ReactSelect__default = /*#__PURE__*/_interopDefault(ReactSelect);
 var groupBy__default = /*#__PURE__*/_interopDefault(groupBy);
 var debounce__default = /*#__PURE__*/_interopDefault(debounce);
-var ReactQuill__default = /*#__PURE__*/_interopDefault(ReactQuill);
+var Quill__default = /*#__PURE__*/_interopDefault(Quill);
 var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 
 /******************************************************************************
@@ -5284,32 +5284,38 @@ const Textarea = React__namespace.default.forwardRef((_a, ref) => {
 var css_248z = "/**\n * --- DEPRECATED ---\n * DON'T USE ANYTHING FROM THIS FILE IN FUTURE CHANGES. WE SHOULD BE\n * USING TAILWIND CLASSES DIRECTLY IN OUR COMPONENTS.\n */\n.ql-editor {\n  resize: vertical;\n  min-height: 10rem;\n}\n\n.ql-snow.ql-toolbar {\n  display: block;\n  background: #f1f5f9;\n  border-top-left-radius: 0.5em;\n  border-top-right-radius: 0.5em;\n  margin-top: 0.5em;\n}";
 styleInject(css_248z);
 
-const TextEditor = ({ defaultValue, onValueChange, placeholder, toolbar = [
-  ["bold", "italic", "underline", "strike"],
-  [{ list: "ordered" }, { list: "bullet" }],
-  ["link"]
-], formats = ["bold", "italic", "underline", "strike", "list", "link"] }) => {
+const TextEditor = (_a) => {
+  var { defaultValue, formats, toolbar = [
+    ["bold", "italic", "underline", "strike"],
+    [{ list: "ordered" }, { list: "bullet" }],
+    ["link"]
+  ], placeholder, onValueChange } = _a, attrs = __rest(_a, ["defaultValue", "formats", "toolbar", "placeholder", "onValueChange"]);
+  const editorRef = React.useRef(null);
   const quillRef = React.useRef(null);
   React.useEffect(() => {
-    var _a, _b, _c;
-    if (quillRef.current) {
-      const tooltip = (_c = (_b = (_a = quillRef.current) === null || _a === void 0 ? void 0 : _a.editor) === null || _b === void 0 ? void 0 : _b.theme) === null || _c === void 0 ? void 0 : _c.tooltip;
-      if (typeof tooltip === "object" && tooltip !== null && "save" in tooltip) {
-        const save = tooltip.save;
-        tooltip.save = function() {
-          let url = this.textbox.value;
-          if (url.indexOf("http") === -1 || url.indexOf("https") === -1) {
-            url = `https://${url}`;
-            this.textbox.value = url;
-          }
-          save.call(this);
-        };
-      }
+    if (editorRef.current) {
+      const quill = new Quill__default.default(editorRef.current, {
+        theme: "snow",
+        formats,
+        modules: {
+          toolbar
+        },
+        placeholder
+      });
+      quill.on("text-change", (value, _, source) => {
+        onValueChange(quill.getSemanticHTML(), value, source);
+      });
+      quill.setContents(quill.clipboard.convert({
+        html: defaultValue
+      }));
+      quillRef.current = quill;
     }
   }, []);
-  return React__namespace.default.createElement(ReactQuill__default.default, { ref: quillRef, theme: "snow", modules: {
-    toolbar: { container: toolbar }
-  }, placeholder, formats, value: defaultValue, onChange: onValueChange });
+  return React__namespace.default.createElement(
+    "div",
+    Object.assign({}, attrs),
+    React__namespace.default.createElement("div", { ref: editorRef })
+  );
 };
 
 function Link(props) {
@@ -6010,6 +6016,60 @@ const WeekdaysPicker = (props) => {
 WeekdaysPicker.weekdayNameToIndex = weekdayNameToIndex;
 WeekdaysPicker.indexToWeekdayName = indexToWeekdayName;
 
+const FileUpload = React.forwardRef((props, ref) => {
+  const { accept, maxFileSize, name, id, onChange, isDisabled = false, buttonText = "Upload a file" } = props, otherProps = __rest(props, ["accept", "maxFileSize", "name", "id", "onChange", "isDisabled", "buttonText"]);
+  const [selectedFile, setSelectedFile] = React.useState(null);
+  const fileUploadRef = React.useRef(null);
+  const handleOnUploadClick = () => {
+    var _a;
+    (_a = fileUploadRef.current) === null || _a === void 0 ? void 0 : _a.click();
+  };
+  const handleChangeEvent = (event) => {
+    var _a;
+    const uploadedFile = (_a = event.target.files) === null || _a === void 0 ? void 0 : _a[0];
+    if (uploadedFile) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(uploadedFile);
+      setSelectedFile(uploadedFile);
+    }
+  };
+  const handleOnUnselectFile = () => {
+    setSelectedFile(null);
+    if (fileUploadRef.current) {
+      fileUploadRef.current.value = "";
+    }
+  };
+  if (selectedFile) {
+    return React__namespace.default.createElement(UploadedFileSection, { file: selectedFile, onRemove: handleOnUnselectFile });
+  }
+  return React__namespace.default.createElement(
+    FlexRow,
+    null,
+    React__namespace.default.createElement(SecondaryButton, { onClick: handleOnUploadClick }, buttonText),
+    React__namespace.default.createElement("input", Object.assign({ type: "file", className: "ui-hidden", accept, size: maxFileSize ? maxFileSize * 1024 * 1024 : void 0, name, id, ref: (element) => {
+      fileUploadRef.current = element;
+      if (ref) {
+        if (typeof ref === "function") {
+          ref(element);
+        } else {
+          ref.current = element;
+        }
+      }
+    }, onChange: handleChangeEvent, disabled: isDisabled }, otherProps))
+  );
+});
+const UploadedFileSection = ({ file, onRemove }) => {
+  return React__namespace.default.createElement(
+    "div",
+    { className: "ui-inline-block ui-flex-row ui-rounded-lg ui-bg-blue-100" },
+    React__namespace.default.createElement(
+      Stack,
+      { axis: "x", justify: "center", align: "center", gap: "xxxs", py: "xxs", px: "m", title: file.name },
+      React__namespace.default.createElement(Text, { truncate: true, className: "ui-max-w-55" }, file.name),
+      React__namespace.default.createElement(TertiaryButton, { icon: "TrashBinIcon", onClick: onRemove })
+    )
+  );
+};
+
 const StatusIndicator = (props) => {
   const { status, children } = props;
   return React__namespace.default.createElement(
@@ -6094,6 +6154,7 @@ exports.EyeClosedIcon = EyeClosedIcon;
 exports.EyeIcon = EyeOpenIcon;
 exports.EyeIconSlashed = EyeClosedIcon;
 exports.EyeOpenIcon = EyeOpenIcon;
+exports.File = FileUpload;
 exports.FilterBar = FilterBar;
 exports.FilterBarUtils = FilterBar_utils;
 exports.FilterIcon = FilterIcon;