@pareto-engineering/design-system 5.0.0 → 5.0.2

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

@@ -0,0 +1,117 @@
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import {
+  formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase,
+} from 'ui/utils'
+
+import './styles.scss'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'custom-tooltip-content'
+
+const CustomTooltipContent = ({
+  id,
+  className: userClassName,
+  dateFormat,
+  isTimeFormat,
+  isDateValue,
+  active,
+  payload,
+  label,
+}) => {
+  const formatLabelValue = (value) => {
+    if (isTimeFormat) {
+      return formatTime(value)
+    }
+
+    if (typeof value === 'number') {
+      if (Number.isInteger(value)) return value
+      return value.toFixed(2)
+    }
+
+    return value
+  }
+
+  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">
+          {isDateValue ? formatDate(label, dateFormat) : label}
+        </p>
+        {newPayload.map((entry) => (
+          <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
+            {`${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(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,
+
+  /**
+   * 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)),
+
+  /**
+   * Flag on whether the label is a date value or not
+   */
+  isDateValue:PropTypes.bool,
+
+  /**
+   * 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,
+  isDateValue :true,
+  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 { snakeCaseToTitleCase } from 'ui/utils'
+
+import './styles.scss'
+
+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 }}
+            />
+            {snakeCaseToTitleCase(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:'Select Item',
+}
+
+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,89 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-border: var(--theme-default-input-border);
+$default-border-radius: var(--theme-default-input-border-radius);
+$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(--background-far);
+      border: $default-border;
+      border-radius: calc($default-border-radius / 2);
+      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: calc($default-border-radius / 2);
+        color: var(--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/PieChart/PieChart.jsx

@@ -0,0 +1,125 @@
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+} from 'recharts'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { CustomLegend, CustomTooltipContent } from '../Common'
+
+import './styles.scss'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'pie-chart'
+
+const PieChart = ({
+  id,
+  className: userClassName,
+  data,
+  title,
+  valueKey,
+  labelKey,
+  colors,
+  height,
+  width,
+  innerRadius,
+  outerRadius,
+}) => {
+  const total = data.reduce((sum, item) => sum + item[valueKey], 0)
+
+  const formattedData = data.map((item) => ({
+    ...item,
+    label     :item[labelKey],
+    color     :colors[data.indexOf(item)],
+    percentage:((item[valueKey] / total) * 100).toFixed(0),
+  }))
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      <div className="chart-header">
+        <h3>{title}</h3>
+      </div>
+      <div className="chart-content">
+        <ResponsiveContainer width={width} height={height}>
+          <RechartsPieChart>
+            <Pie
+              data={formattedData}
+              dataKey={valueKey}
+              nameKey={labelKey}
+              cx="50%"
+              cy="50%"
+              innerRadius={innerRadius}
+              outerRadius={outerRadius}
+              label={false}
+              paddingAngle={0}
+            >
+              {formattedData.map((entry, index) => (
+                <Cell
+                  key={entry[labelKey]}
+                  fill={colors[index]}
+                  strokeWidth={0}
+                />
+              ))}
+            </Pie>
+            <Tooltip content={<CustomTooltipContent isDateValue={false} />} />
+          </RechartsPieChart>
+        </ResponsiveContainer>
+        <CustomLegend
+          colorsArray={colors}
+          yKeysArray={formattedData}
+          capitalizedLegend
+          orientation="vertical"
+          getLegendItemTitle={(entry) => entry[labelKey]}
+          getLegendItemSubtitle={(entry) => entry[valueKey]}
+        />
+      </div>
+    </div>
+  )
+}
+
+PieChart.propTypes = {
+  id       :PropTypes.string,
+  className:PropTypes.string,
+  data     :PropTypes.arrayOf(PropTypes.shape({
+    [PropTypes.string]:PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+  })).isRequired,
+  title      :PropTypes.string.isRequired,
+  valueKey   :PropTypes.string.isRequired,
+  labelKey   :PropTypes.string.isRequired,
+  colors     :PropTypes.arrayOf(PropTypes.string).isRequired,
+  height     :PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width      :PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  innerRadius:PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  outerRadius:PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+}
+
+PieChart.defaultProps = {
+  id         :undefined,
+  className  :undefined,
+  width      :'100%',
+  height     :300,
+  innerRadius:'0%',
+  outerRadius:'100%',
+}
+
+export default PieChart

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

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

package/src/ui/a/Charts/PieChart/styles.scss

@@ -0,0 +1,48 @@
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+$default-padding: 1rem;
+$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
+$default-text-font-size: calc(var(--s-1) * 1rem);
+
+.#{bem.$base} {
+  &.pie-chart {
+    background-color: var(--background-far);
+    border-radius: var(--theme-default-border-radius);
+    box-shadow: $default-box-shadow;
+    margin: $default-margin 0;
+    padding: $default-padding;
+
+    .chart-header {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: $default-margin;
+
+      h3 {
+        color: var(--subtitle);
+        margin: calc($default-margin / 5);
+        text-align: left;
+      }
+    }
+
+    .chart-content {
+      align-items: flex-start;
+      display: flex;
+    }
+
+    .recharts-wrapper {
+      .recharts-surface {
+        .recharts-text {
+          fill: var(--soft-paragraph);
+          font-size: calc($default-text-font-size * .75);
+        }
+
+        .recharts-text.recharts-label {
+          fill: var(--paragraph);
+          font-size: $default-text-font-size;
+        }
+      }
+    }
+  }
+}

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

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

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, PieChart } 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) {