@pareto-engineering/design-system 5.3.0 → 5.5.0

package/dist/es/f/fields/FileUpload/FileUpload.js

@@ -1,237 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { useField } from 'formik';
-import styleNames from '@pareto-engineering/bem/exports';
-import "./styles.scss";
-import { Preview } from "./common";
-import { FormLabel, FormDescription } from "../../common";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'file-upload';
-const generateUniqueFileName = (originalName, existingFileNames) => {
-  const lastDotIndex = originalName.lastIndexOf('.');
-  const name = originalName.substring(0, lastDotIndex);
-  const ext = originalName.split('.').pop();
-  const numDuplicates = existingFileNames.filter(existingFileName => existingFileName?.startsWith(name)).length;
-  return numDuplicates > 0 ? `${name} (${numDuplicates}).${ext}` : originalName;
-};
-
-/**
- * This is the component description.
- */
-const FileUpload = ({
-  id,
-  className: userClassName,
-  style,
-  label,
-  description,
-  accept,
-  multiple,
-  name,
-  disabled,
-  maxCount,
-  maxCountError,
-  maxSize,
-  maxSizeError,
-  onChange,
-  uploadStatus,
-  filePreviewAlignment,
-  optional,
-  labelColor,
-  color,
-  viewOnly,
-  handleFileDelete
-  // ...otherProps
-}) => {
-  const [field,, helpers] = useField({
-    name
-  });
-  const {
-    value
-  } = field;
-  const {
-    setError,
-    setValue,
-    setTouched
-  } = helpers;
-  const handleChange = event => {
-    setTouched(true, false);
-    let newFiles = Array.from(event.currentTarget.files);
-    const currentFiles = value || [];
-    const currentCount = currentFiles.length + newFiles.length;
-    if (maxCount && currentCount > maxCount) {
-      setError(maxCountError || `Maximum of ${maxCount} files allowed`);
-      return;
-    }
-    const uploadedFiles = Object.keys(uploadStatus) || [];
-    const duplicateFiles = newFiles.filter(newFile => uploadedFiles.some(uploadedFile => uploadedFile === newFile.name));
-    if (duplicateFiles.length > 0) {
-      newFiles = newFiles.map(file => {
-        if (duplicateFiles.some(duplicateFile => duplicateFile.name === file.name)) {
-          return new File([file], generateUniqueFileName(file.name, uploadedFiles), {
-            type: file.type
-          });
-        }
-        return file;
-      });
-    }
-    if (maxSize) {
-      const oversizedFiles = newFiles.filter(file => file.size > maxSize);
-      if (oversizedFiles.length > 0) {
-        setError(maxSizeError || `File size exceeds the limit of ${maxSize} bytes`);
-        return;
-      }
-    }
-    const updatedFiles = [...currentFiles, ...newFiles];
-    setValue(updatedFiles);
-    onChange?.(updatedFiles);
-
-    // eslint-disable-next-line no-param-reassign
-    event.target.value = null;
-  };
-  const handleDelete = ({
-    fileIndex,
-    identifier
-  }) => {
-    const updatedFiles = value?.filter((_, i) => i !== fileIndex);
-    setValue(updatedFiles);
-    handleFileDelete?.({
-      fileIndex,
-      identifier
-    });
-  };
-  const acceptOptions = Array.isArray(accept) ? accept?.join(',') : accept;
-  const isAnyFileUploading = Object.values(uploadStatus ?? {})?.map(e => e?.status)?.some(status => status === 'pending');
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `preview-${filePreviewAlignment}`, `y-${color}`].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("p", null, label), /*#__PURE__*/React.createElement(FormDescription, {
-    className: "s-1",
-    description: description,
-    name: name
-  }), !viewOnly && /*#__PURE__*/React.createElement(FormLabel, {
-    name: name,
-    color: labelColor,
-    optional: optional
-  }, /*#__PURE__*/React.createElement("input", {
-    id: name,
-    className: "file",
-    type: "file",
-    accept: acceptOptions,
-    multiple: multiple || maxCount && maxCount > 0,
-    disabled: disabled || isAnyFileUploading,
-    onChange: handleChange
-  }), /*#__PURE__*/React.createElement("span", {
-    className: "ai-icon"
-  }, "U"), /*#__PURE__*/React.createElement("span", null, "Attach file")), value?.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: "attached-files"
-  }, /*#__PURE__*/React.createElement("p", null, "Attached files:"), /*#__PURE__*/React.createElement("div", {
-    className: "files"
-  }, value.map((file, indx) => /*#__PURE__*/React.createElement(Preview, {
-    file: file,
-    key: file.name,
-    writeOnly: !disabled,
-    handleDelete: () => handleDelete({
-      fileIndex: indx,
-      identifier: file?.id || file.name
-    }),
-    uploadStatus: uploadStatus?.[file?.name]?.status,
-    uploadProgress: uploadStatus?.[file?.name]?.progress
-  })))));
-};
-FileUpload.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: PropTypes.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: PropTypes.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: PropTypes.objectOf(PropTypes.string),
-  /**
-   * The label text for the file input
-   */
-  label: PropTypes.string,
-  /**
-   * The description text below the label
-   */
-  description: PropTypes.string,
-  /**
-   * The color of the text
-   */
-  color: PropTypes.string,
-  /**
-   * The accepted file types (e.g., 'image/*')
-   */
-  accept: PropTypes.string,
-  /**
-   *  Whether to allow multiple file uploads
-   */
-  multiple: PropTypes.bool,
-  /**
-   * The name attribute for the input
-   */
-  name: PropTypes.string.isRequired,
-  /**
-   * Whether the the input should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * The maximum number of files allowed
-   */
-  maxCount: PropTypes.number,
-  /**
-   * The error message when max count is exceeded
-   */
-  maxCountError: PropTypes.string,
-  /**
-   * The maximum size of files allowed (in bytes)
-   */
-  maxSize: PropTypes.number,
-  /**
-   * The error message when file size exceeds max size
-   */
-  maxSizeError: PropTypes.string,
-  /**
-   * The upload progress value (0-100)
-   */
-  // progress:PropTypes.number,
-
-  /**
-   * The function to handle file change events
-   */
-  onChange: PropTypes.func,
-  /**
-   * The function to handle file delete events
-   */
-  handleFileDelete: PropTypes.func,
-  /**
-   * The upload status of the file with the file name as the key
-   */
-  uploadStatus: PropTypes.objectOf(PropTypes.string),
-  /**
-   * The alignment for file previews WRT the upload input
-   */
-  filePreviewAlignment: PropTypes.oneOf(['left', 'right', 'top', 'bottom']),
-  /**
-   * Whether the file upload is in view only mode
-   */
-  viewOnly: PropTypes.bool
-};
-FileUpload.defaultProps = {
-  disabled: false,
-  color: 'paragraph',
-  filePreviewAlignment: 'bottom',
-  viewOnly: false,
-  multiple: true
-};
-FileUpload.Preview = Preview;
-export default FileUpload;

package/dist/es/f/fields/FileUpload/common/Preview/Preview.js

@@ -1,125 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import { LoadingCircle, ProgressBar, Tooltip } from "../../../../../a";
-
-// Local Definitions
-
-import "./styles.scss";
-import { Button } from "../../../../../b";
-import { getFileType, getFileTypeFromUrl } from "../../utils";
-const baseClassName = styleNames.base;
-const componentClassName = 'file-preview';
-const statusColorMap = {
-  pending: 'yellow',
-  error: 'red',
-  success: 'green'
-};
-const FILE_UPLOAD_COMPLETE_PROGRESS = 100;
-
-/**
- * This is the component description.
- */
-const Preview = ({
-  id,
-  className: userClassName,
-  style,
-  file,
-  handleDelete,
-  uploadStatus,
-  color,
-  uploadProgress,
-  writeOnly
-  // ...otherProps
-}) => {
-  const isFileObject = file instanceof File;
-  const type = isFileObject ? getFileType(file) : getFileTypeFromUrl(file?.url);
-  const statusColor = statusColorMap[uploadStatus] ?? color;
-  const isPending = uploadStatus === 'pending';
-  // isPreview means the file is uploaded and previewed while other files can still be uploaded
-  const isSuccess = uploadStatus === 'success' || file?.isPreview;
-  const handlePreview = () => {
-    if (!isFileObject) {
-      window.open(file.url, '_blank');
-    }
-  };
-  const canDelete = file?.isPreview || isFileObject;
-  const isFileBroken = !writeOnly && !file?.url;
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "identity"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: ['type', type.toLowerCase()].filter(e => e).join(' ')
-  }, type), /*#__PURE__*/React.createElement("span", {
-    title: file.name,
-    className: "name"
-  }, file.name), isFileBroken ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tooltip, {
-    description: "bulk-updates-text",
-    content: /*#__PURE__*/React.createElement("p", null, "This file doesn't have a link or the link is invalid.")
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon x-ui-icons c-x"
-  }, "h")), writeOnly && /*#__PURE__*/React.createElement(Button, {
-    color: "ui-icons",
-    isCompact: true,
-    isSimple: true,
-    onClick: () => handleDelete()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, canDelete ? 'Y' : '9'))) : /*#__PURE__*/React.createElement(Button, {
-    color: "ui-icons",
-    isCompact: true,
-    isSimple: true,
-    onClick: () => canDelete ? handleDelete() : handlePreview()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, canDelete ? 'Y' : '9'))), writeOnly && /*#__PURE__*/React.createElement("div", {
-    className: `progress-status x-${statusColor}`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "status"
-  }, isPending ? /*#__PURE__*/React.createElement(LoadingCircle, {
-    className: `x-${statusColor}`,
-    heightWidth: "1rem",
-    color: statusColor
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, isSuccess ? 'I' : 'Y'), /*#__PURE__*/React.createElement("span", null, isSuccess ? 'Uploaded' : 'Error'))), /*#__PURE__*/React.createElement(ProgressBar, {
-    color: statusColor,
-    progress: isPending ? uploadProgress : FILE_UPLOAD_COMPLETE_PROGRESS,
-    height: "3px"
-  })));
-};
-Preview.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: PropTypes.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: PropTypes.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: PropTypes.objectOf(PropTypes.string),
-  /**
-   * The base color of the file preview
-   */
-  color: PropTypes.string,
-  /**
-   * The upload progress of the file
-   */
-  uploadProgress: PropTypes.number,
-  /**
-   * Whether the preview is used in a context where the user can upload new files
-   */
-  writeOnly: PropTypes.bool
-};
-Preview.defaultProps = {
-  color: 'green',
-  uploadProgress: 0
-};
-export default Preview;

package/dist/es/f/fields/FileUpload/common/Preview/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { default as Preview } from "./Preview";

package/dist/es/f/fields/FileUpload/common/Preview/styles.scss

@@ -1,96 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-
-@use "@pareto-engineering/bem";
-
-$default-padding: 1rem;
-$default-margin: 1rem;
-$files-per-row: 3;
-$total-gaps: $files-per-row - 1;
-$combined-gap: calc(var(--gap) * $total-gaps);
-$width-without-gaps: calc(100% - $combined-gap);
-$default-file-width: calc($width-without-gaps / $files-per-row);
-
-.#{bem.$base}.file-preview {
-  border: var(--theme-default-border-style) var(--ui-lines);
-  border-radius: calc(var(--theme-default-border-radius) / 2);
-  display: flex;
-  flex-direction: column;
-  gap: calc(var(--gap) / 4);
-  padding: $default-padding;
-  width: $default-file-width;
-
-  > .identity {
-    align-items: center;
-    display: flex;
-    gap: calc(var(--gap) / 2);
-    justify-content: space-between;
-
-    > .type {
-      padding-block: calc($default-padding / 4);
-      padding-inline: calc($default-padding / 2);
-
-      // TODO: update the colors to use variables. These are colors from the new DS
-      &.pdf,
-      &.broken,
-      &.unknown {
-        background-color: #fdead7;
-        color: #b93814;
-      }
-
-      &.file {
-        background-color: #eef2f6;
-        color: #364151;
-      }
-
-      &.txt {
-        background-color: #d1dfff;
-        color: #004eeb;
-      }
-
-
-      &.vid {
-        background-color: #ebe9fe;
-        color: #5a25dc;
-      }
-
-      &.img {
-        background-color: #cbfbef;
-        color: #107569;
-      }
-
-      &.aud {
-        background-color: #fef7c3;
-        color: #a15c08;
-      }
-    }
-
-    > .name {
-      color: var(--on-x);
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    > .#{bem.$base}.button {
-      margin-left: auto;
-    }
-  }
-
-  > .progress-status {
-    > .status {
-      align-items: center;
-      color: var(--x);
-      display: flex;
-      gap: calc(var(--gap) / 2);
-      margin-bottom: calc($default-margin / 4);
-
-      > .icon {
-        background-color: var(--x);
-        border-radius: 50%;
-        color: var(--on-x);
-        font-size: calc(var(--s-2) * 1rem);
-        padding: calc($default-padding / 4);
-      }
-    }
-  }
-}

package/dist/es/f/fields/FileUpload/common/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { Preview } from "./Preview";

package/dist/es/f/fields/FileUpload/index.js

@@ -1,3 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { default as FileUpload } from "./FileUpload";
-export { fileUploadOptions, getFileType, getFileTypeFromUrl } from "./utils";

package/dist/es/f/fields/FileUpload/styles.scss

@@ -1,73 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-
-@use "@pareto-engineering/bem";
-
-$default-padding: 1rem;
-$default-margin: 1rem;
-
-.#{bem.$base}.file-upload {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gap);
-
-
-  > p {
-    color: var(--y);
-    margin: 0;
-  }
-
-  > .#{bem.$base}.description {
-    height: auto;
-  }
-
-  > .#{bem.$base}.form-label {
-    align-items: center;
-    border: var(--theme-default-border-style) var(--ui-lines);
-    border-radius: calc(var(--theme-default-border-radius) / 2);
-    color: var(--heading);
-    cursor: pointer;
-    display: flex;
-    gap: calc(var(--gap) / 2);
-    padding: $default-padding;
-    width: fit-content;
-
-    &:has(>input:disabled) {
-      --icon-color: var(--hard-disabled);
-      color: var(--hard-disabled);
-      cursor: not-allowed;
-    }
-
-    &:has(>input:not(:disabled)) {
-      &:hover,
-      &:active {
-        border: var(--theme-hover-input-border);
-      }
-    }
-
-    > .ai-icon {
-      color: var(--icon-color, var(--interactive));
-      font-size: calc(var(--s2) * 1rem);
-    }
-
-    > input[type="file"] {
-      display: none;
-    }
-  }
-
-  > .attached-files {
-    display: flex;
-    gap: var(--gap);
-
-    > p {
-      margin: 0;
-    }
-
-    > .files {
-      align-items: center;
-      display: flex;
-      flex-wrap: wrap;
-      gap: var(--gap);
-      width: 100%;
-    }
-  }
-}

package/dist/es/f/fields/FileUpload/utils.js

@@ -1,40 +0,0 @@
-export const fileUploadOptions = [{
-  key: 'FILE',
-  value: '.doc,.docx,.odt,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.oasis.opendocument.text',
-  label: 'Documents'
-}, {
-  key: 'TXT',
-  value: '.xls,.xlsx,.ods,.csv,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.oasis.opendocument.spreadsheet,text/csv',
-  label: 'Spreadsheets'
-}, {
-  key: 'PDF',
-  value: '.pdf,application/pdf',
-  label: 'PDF'
-}, {
-  key: 'VID',
-  value: '.mp4,.ogg,.webm,video/mp4,video/ogg,video/webm',
-  label: 'Videos'
-}, {
-  key: 'IMG',
-  value: '.png,.jpeg,.jpg,.gif,.webp,image/png,image/jpeg,image/gif,image/webp',
-  label: 'Images'
-}, {
-  key: 'AUD',
-  value: '.mp3,.ogg,.wav,audio/mpeg,audio/ogg,audio/wav',
-  label: 'Audio'
-}];
-export const getFileType = file => {
-  const mimeType = file?.type;
-  const extension = file?.name?.split('.').pop().toLowerCase();
-  const fileType = fileUploadOptions.find(option => option.value.includes(mimeType) || option.value.includes(extension));
-  return fileType ? fileType.key : 'unknown';
-};
-export const getFileTypeFromUrl = url => {
-  if (!url) {
-    return 'BROKEN';
-  }
-  const urlWithoutParams = url.split('?')[0];
-  const extension = urlWithoutParams.split('.').pop().toLowerCase();
-  const fileType = fileUploadOptions.find(option => option.value.includes(extension));
-  return fileType ? fileType.key : 'UNKNOWN';
-};

package/dist/es/f/fields/LatexPreviewInput/LatexPreviewInput.js

@@ -1,70 +0,0 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react';
-import { memo, useMemo } from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import { useFormikContext } from 'formik';
-import convertLatexToHtml from "./convertLatexToHtml";
-import { TextareaInput } from "../TextareaInput";
-import "./styles.scss";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'latex-preview-input';
-
-/**
- * This is the component description.
- */
-const LatexPreviewInput = ({
-  id,
-  className,
-  userClassName,
-  disabled,
-  style,
-  ...otherProps
-}) => {
-  const {
-    name
-  } = otherProps;
-  const {
-    values
-  } = useFormikContext();
-  const LatexPreview = useMemo(() => convertLatexToHtml(values[name]), [values[name]]);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, className, userClassName, 'form-input'].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement(TextareaInput, _extends({
-    className: "preview-child",
-    disabled: disabled
-  }, otherProps)), /*#__PURE__*/React.createElement("div", {
-    className: "latex-container preview-child",
-    dangerouslySetInnerHTML: {
-      __html: LatexPreview
-    }
-  }));
-};
-LatexPreviewInput.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: PropTypes.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: PropTypes.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: PropTypes.objectOf(PropTypes.string),
-  /**
-   * Whether the Form input input should be disabled
-   */
-  disabled: PropTypes.bool
-};
-LatexPreviewInput.defaultProps = {
-  disabled: false
-};
-export default /*#__PURE__*/memo(LatexPreviewInput);

package/dist/es/f/fields/LatexPreviewInput/convertLatexToHtml.js

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import ReactMarkdown from 'react-markdown';
-import RemarkMathPlugin from 'remark-math';
-import { MathJax, MathJaxContext } from 'better-react-mathjax';
-import rehypeMathjax from 'rehype-mathjax/svg';
-import ReactDOMServer from 'react-dom/server';
-const convertLatexToHtml = content => {
-  if (content.includes('https://forte-assets.pareto.ai/')) {
-    return content;
-  }
-  const processedContent = content.replaceAll(/\\\\/g, '\n\n');
-  const renderedContent = ReactDOMServer.renderToString(/*#__PURE__*/React.createElement(MathJaxContext, null, /*#__PURE__*/React.createElement(ReactMarkdown, {
-    remarkPlugins: [RemarkMathPlugin],
-    rehypePlugins: [rehypeMathjax],
-    components: {
-      math: ({
-        value
-      }) => /*#__PURE__*/React.createElement(MathJax.Node, {
-        formula: value
-      }),
-      inlineMath: ({
-        value
-      }) => /*#__PURE__*/React.createElement(MathJax.Node, {
-        inline: true,
-        formula: value
-      })
-    }
-  }, processedContent)));
-  return renderedContent;
-};
-export default convertLatexToHtml;

package/dist/es/f/fields/LatexPreviewInput/index.js

@@ -1,3 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-export { default as LatexPreviewInput } from "./LatexPreviewInput";
-export { default as convertLatexToHtml } from "./convertLatexToHtml";