@pareto-engineering/design-system 5.0.0 → 5.0.1

package/src/ui/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.jsx

@@ -0,0 +1,105 @@
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { formatTime, formatDate, DATE_FORMATS } from 'ui/utils'
+
+import './styles.scss'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'custom-tooltip-content'
+
+const CustomTooltipContent = ({
+  id,
+  className: userClassName,
+  xLabel,
+  dateFormat,
+  isTimeFormat,
+  active,
+  payload,
+  label,
+}) => {
+  if (active && payload && payload.length) {
+    const newPayload = payload.filter((item) => item.name !== 'bounds')
+    return (
+      <div
+        id={id}
+        className={[
+          baseClassName,
+          componentClassName,
+          userClassName,
+        ]
+          .filter((e) => e)
+          .join(' ')}
+      >
+        <p className="label">
+          {`${xLabel}: ${formatDate(label, dateFormat)}`}
+        </p>
+        {newPayload.map((entry) => (
+          <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
+            {`${entry.name}: ${
+              isTimeFormat
+                ? formatTime(entry.value)
+                : entry.value
+            }`}
+          </p>
+        ))}
+      </div>
+    )
+  }
+  return null
+}
+
+CustomTooltipContent.propTypes = {
+  /**
+ * The id of the dropdown component.
+ */
+  id:PropTypes.string,
+
+  /**
+   * Additional class names for the dropdown component.
+   */
+  className:PropTypes.string,
+
+  /**
+   * The label for the x-axis.
+   */
+  xLabel:PropTypes.string,
+
+  /**
+   * Flag on whether it is a timeformat or not
+   */
+  isTimeFormat:PropTypes.bool,
+
+  /**
+   * The type of format for the datetime value
+   */
+  dateFormat:PropTypes.oneOf(Object.values(DATE_FORMATS)),
+
+  /**
+   * If set true, the tooltip is displayed.
+   * If set false, the tooltip is hidden, usually calculated internally.
+   */
+  active:PropTypes.bool.isRequired,
+
+  /**
+   * The source data of the content to be displayed in the tooltip,
+   * always calculated internally and cannot be user set.
+   */
+  payload:PropTypes.arrayOf(PropTypes.string).isRequired,
+
+  /**
+   *The label value which is active now, usually calculated internally.
+   */
+  label:PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+}
+
+CustomTooltipContent.defaultProps = {
+  isTimeFormat:false,
+  dateFormat  :DATE_FORMATS.HUMAN_READABLE,
+}
+
+export default CustomTooltipContent

package/src/ui/a/Charts/Common/CustomTooltipContent/index.js

@@ -0,0 +1 @@
+export { default as CustomTooltipContent } from './CustomTooltipContent'

package/src/ui/a/Charts/Common/CustomTooltipContent/styles.scss

@@ -0,0 +1,22 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-padding: 1rem;
+$default-text-font-size: calc(var(--s-1) * 1rem);
+$default-border-radius: .25rem;
+$default-border-line-width: .0625rem;
+
+.#{bem.$base} {
+  &.custom-tooltip-content {
+    background-color: var(--background-far);
+    border: $default-border-line-width solid var(--ui-lines);
+    border-radius: $default-border-radius;
+    padding: calc($default-padding * .25);
+
+    .label {
+      color: var(--hard-paragraph);
+      font-size: $default-text-font-size;
+      margin: calc($default-margin * .25);
+    }
+  }
+}

package/src/ui/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.jsx

@@ -0,0 +1,121 @@
+// DropdownStatus.js
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'y-labels-dropdown'
+
+const YLabelsDropDown = ({
+  id,
+  className: userClassName,
+  placeholder,
+  selectedYLabels,
+  setSelectedYLabels,
+  allYLabels,
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const toggleYLabel = (yLabel) => {
+    setSelectedYLabels((prev) => (prev.some((label) => label.label === yLabel.label)
+      ? prev.filter((label) => label.label !== yLabel.label)
+      : [...prev, yLabel]),
+    )
+  }
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      <button
+        className="dropdown-button"
+        onClick={() => setIsOpen(!isOpen)}
+        type="button"
+      >
+        {placeholder}
+        <span className={`icon ${isOpen ? styleNames.modifierOpen : ''}`}>
+          W
+        </span>
+      </button>
+      <div className={`dropdown-content ${isOpen ? styleNames.modifierOpen : ''}`}>
+        {allYLabels.map((item) => (
+          // eslint-disable-next-line max-len
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
+          <div
+            key={item.label}
+            className={`dropdown-item ${selectedYLabels.some((label) => label.label === item.label) ? styleNames.modifierActive : ''}`}
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+            onClick={() => toggleYLabel(item)}
+          >
+            <span
+              className="status-dot"
+              style={{ backgroundColor: item.color }}
+            />
+            {item.label}
+            {selectedYLabels.some((label) => label.label === item.label) && (
+              <span className="icon checkmark">I</span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+YLabelsDropDown.propTypes = {
+  /**
+   * The id of the dropdown component.
+   */
+  id:PropTypes.string,
+
+  /**
+   * Additional class names for the dropdown component.
+   */
+  className:PropTypes.string,
+
+  /**
+   * Placeholder text for the dropdown button.
+   */
+  placeholder:PropTypes.string,
+
+  /**
+   * Array of selected Y labels with their corresponding colors.
+   */
+  selectedYLabels:PropTypes.arrayOf(PropTypes.shape({
+    label:PropTypes.string,
+    color:PropTypes.string,
+  })),
+
+  /**
+   * Function to set the selected Y labels.
+   */
+  setSelectedYLabels:PropTypes.func,
+
+  /**
+   * Array of all Y labels with their corresponding colors.
+   */
+  allYLabels:PropTypes.arrayOf(PropTypes.shape({
+    label:PropTypes.string,
+    color:PropTypes.string,
+  })),
+}
+
+YLabelsDropDown.defaultProps = {
+  placeholder:'Submission status',
+}
+
+export default YLabelsDropDown

package/src/ui/a/Charts/Common/YLabelsDropDown/index.js

@@ -0,0 +1 @@
+export { default as YLabelsDropDown } from './YlabelsDropDown'

package/src/ui/a/Charts/Common/YLabelsDropDown/styles.scss

@@ -0,0 +1,88 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-border-radius: .25rem;
+$default-padding: 1rem;
+$default-width: 15rem;
+$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$default-dot-width: .5rem;
+$default-dot-height: .5rem;
+$default-checkmark-font-size: calc(var(--s-1) * .75rem);
+
+.#{bem.$base} {
+  &.y-labels-dropdown {
+    display: inline-block;
+    position: relative;
+
+    .dropdown-button {
+      align-items: center;
+      background-color: var(--soft-background-inputs);
+      border: none;
+      border-radius: $default-border-radius;
+      color: var(--hard-paragraph);
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      padding: calc($default-padding * .5);
+      text-align: left;
+      width: $default-width;
+
+      .icon {
+        color: var(--hard-ui-icons);
+        font-size: calc($default-checkmark-font-size * 1.25);
+
+        &.#{bem.$modifier-open} {
+          transform: rotate(180deg);
+        }
+      }
+    }
+
+    .dropdown-content {
+      background-color: var(--background-far);
+      border-radius: $default-border-radius;
+      box-shadow: $default-box-shadow;
+      display: none;
+      margin-top: calc($default-margin * .125);
+      position: absolute;
+      width: $default-width;
+      z-index: 1;
+
+      &.#{bem.$modifier-open} {
+        display: block;
+      }
+
+      .dropdown-item {
+        align-items: center;
+        border-radius: $default-border-radius;
+        color: var(--hard-paragraph);
+        cursor: pointer;
+        display: flex;
+        margin: calc($default-margin * .125);
+        padding: calc($default-padding * .5);
+        text-decoration: none;
+
+        &.#{bem.$modifier-active} {
+          background-color: var(--background-near);
+        }
+
+        &:hover {
+          background-color: var(--background-near);
+        }
+
+        .status-dot {
+          border-radius: 50%;
+          display: inline-block;
+          height: $default-dot-height;
+          margin-right: calc($default-margin * .5);
+          width: $default-dot-width;
+        }
+
+        .checkmark {
+          color: var(--hard-main);
+          font-size: $default-checkmark-font-size;
+          margin-left: auto;
+        }
+      }
+    }
+  }
+}

package/src/ui/a/Charts/Common/index.js

@@ -0,0 +1,3 @@
+export { CustomLegend } from './CustomLegend'
+export { CustomTooltipContent } from './CustomTooltipContent'
+export { YLabelsDropDown } from './YLabelsDropDown'

package/src/ui/a/Charts/index.js

@@ -0,0 +1,2 @@
+export { AreaChart } from './AreaChart'
+export { BarChart } from './BarChart'

package/src/ui/a/Tooltip/styles.scss

@@ -14,6 +14,7 @@ $default-width: var(--tooltip-width, 20rem);
     background: var(--x);
     border: var(--theme-default-border-style) var(--ui-lines);
     border-radius: calc(var(--theme-default-border-radius) / 2);
+    min-width: $default-width;
     opacity: 0;
     overflow: hidden;
     padding: $default-block-padding $default-inline-padding;
@@ -21,7 +22,6 @@ $default-width: var(--tooltip-width, 20rem);
     transform: translateX(var(--horizontal, 0)) translateY(var(--vertical, 0));
     transition: opacity .2s ease, transform .2s ease;
     visibility: hidden;
-    width: $default-width;
     z-index: 10;
 
     &.top {

package/src/ui/a/index.js

@@ -30,4 +30,4 @@ export { ToggleSwitch } from './ToggleSwitch'
 export { XMLEditor } from './XMLEditor'
 export { DatePicker } from './DatePicker'
 export { Tooltip } from './Tooltip'
-export { AreaChart } from './AreaChart'
+export { AreaChart, BarChart } from './Charts'

package/src/ui/f/FormInput/FormInput.jsx

@@ -18,6 +18,7 @@ import {
   LinkInput,
   EditorInput,
   FileUpload,
+  LatexPreviewInput,
 } from '../fields'
 
 import './styles.scss'
@@ -158,6 +159,16 @@ const FormInput = ({
     )
   }
 
+  if (type === 'latex-preview-input') {
+    return (
+      <LatexPreviewInput
+        className={newClassName}
+        disabled={disabled}
+        {...otherProps}
+      />
+    )
+  }
+
   if (extraTypes?.[type]) {
     const Component = extraTypes[type]
     return (

package/src/ui/f/fields/FileUpload/FileUpload.jsx

@@ -19,6 +19,16 @@ 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.
  */
@@ -54,7 +64,7 @@ const FileUpload = ({
 
   const handleChange = (event) => {
     setTouched(true, false)
-    const newFiles = Array.from(event.currentTarget.files)
+    let newFiles = Array.from(event.currentTarget.files)
     const currentFiles = value || []
 
     const currentCount = currentFiles.length + newFiles.length
@@ -63,13 +73,23 @@ const FileUpload = ({
       return
     }
 
+    const uploadedFiles = Object.keys(uploadStatus) || []
+
     const duplicateFiles = newFiles.filter(
-      (newFile) => currentFiles.some((currentFile) => currentFile.name === newFile.name),
+      (newFile) => uploadedFiles.some((uploadedFile) => uploadedFile === newFile.name),
     )
 
     if (duplicateFiles.length > 0) {
-      setError('You cannot upload the same file twice.')
-      return
+      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) {

package/src/ui/f/fields/LatexPreviewInput/LatexPreviewInput.jsx

@@ -0,0 +1,91 @@
+/* @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 (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        'form-input',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <TextareaInput
+        className="preview-child"
+        disabled={disabled}
+        {...otherProps}
+      />
+      {/* eslint-disable-next-line react/no-danger */}
+      <div className="latex-container preview-child" dangerouslySetInnerHTML={{ __html: LatexPreview }} />
+    </div>
+  )
+}
+
+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 memo(LatexPreviewInput)

package/src/ui/f/fields/LatexPreviewInput/convertLatexToHtml.jsx

@@ -0,0 +1,38 @@
+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(
+    <MathJaxContext>
+      <ReactMarkdown
+        remarkPlugins={[RemarkMathPlugin]}
+        rehypePlugins={[rehypeMathjax]}
+        components={{
+          math      :({ value }) => <MathJax.Node formula={value} />,
+          inlineMath:({ value }) => <MathJax.Node inline formula={value} />,
+        }}
+      >
+        {processedContent}
+      </ReactMarkdown>
+    </MathJaxContext>,
+  )
+
+  return renderedContent
+}
+
+export default convertLatexToHtml

package/src/ui/f/fields/LatexPreviewInput/index.js

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

package/src/ui/f/fields/LatexPreviewInput/styles.scss

@@ -0,0 +1,24 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+
+.#{bem.$base}.latex-preview-input {
+  display: flex;
+  flex-direction: row;
+  gap: $default-margin;
+
+  > .preview-child {
+    flex: 1;
+  }
+
+  > .latex-container {
+    border: 1px solid var(--ui-lines);
+    border-radius: var(--theme-default-border-radius);
+    margin-top: calc($default-margin * 2.5);
+    max-width: 50%;
+    overflow: auto;
+    padding: 0 $default-margin;
+  }
+}

package/src/ui/f/fields/index.js

@@ -9,6 +9,10 @@ export { Checkbox } from './Checkbox'
 export { QueryChoices } from './QueryChoices'
 export { LinkInput } from './LinkInput'
 export { EditorInput } from './EditorInput'
+export {
+  LatexPreviewInput,
+  convertLatexToHtml,
+} from './LatexPreviewInput'
 export {
   FileUpload,
   fileUploadOptions,

package/src/ui/g/FormBuilder/FormBuilder.jsx

@@ -36,7 +36,6 @@ const FormBuilder = ({
   fileUploadStatus,
   handleFileDelete,
   taskData,
-  customInputMap,
   // ...otherProps
 }) => {
   const formattedJson = JSON.stringify(taskData, null, 2)
@@ -68,7 +67,6 @@ const FormBuilder = ({
           onSave={onBuilderFormSave}
           onError={onBuilderError}
           validate={onBuilderValidate}
-          customInputMap={customInputMap}
         />
       )}
       {mode === 'render' && (
@@ -80,7 +78,6 @@ const FormBuilder = ({
           fileUploadStatus={fileUploadStatus}
           handleFileDelete={handleFileDelete}
           onFileUpload={onFileUpload}
-          customInputMap={customInputMap}
         />
       )}
     </div>

package/src/ui/g/FormBuilder/common/Builder/Builder.jsx

@@ -43,7 +43,6 @@ const Builder = ({
   onError,
   validate,
   formBuilderId,
-  customInputMap,
   initialValues = {},
   // ...otherProps
 }) => {
@@ -126,7 +125,6 @@ const Builder = ({
                         handleDeleteSection={() => handleDeleteSection({
                           index, remove, values, setFieldValue,
                         })}
-                        customInputMap={customInputMap}
                       />
                     ))}
                     <div className="section-footer">