@pareto-engineering/design-system 5.0.5 → 5.1.1

package/dist/es/utils/applyCharacterLimit.js

@@ -0,0 +1,67 @@
+export const applyCharacterLimit = (setMaxLength = true) => {
+  setTimeout(() => {
+    document.querySelectorAll("[class*='limit-character-count-']").forEach(parent => {
+      const match = parent.className.match(/limit-character-count-(\d+)/);
+      if (!match) return;
+      const maxLength = parseInt(match[1], 10);
+      const fields = parent.matches("input[type='text'], input[type='email'], input[type='password'], input[type='search'], textarea") ? [parent] : Array.from(parent.querySelectorAll("input[type='text'], input[type='email'], input[type='password'], input[type='search'], textarea"));
+      if (!fields.length) return;
+      const characterCounterBaseClassName = 's-2 character-counter';
+      const characterCounterClassName = `${characterCounterBaseClassName} x-paragraph c-x`;
+      const characterCounterWarningClassName = `${characterCounterBaseClassName} x-orange c-x`;
+      const characterCounterErrorClassName = `${characterCounterBaseClassName} x-error c-x`;
+      fields.forEach(field => {
+        if (field.parentNode.querySelector('.character-counter')) return;
+        if (setMaxLength) {
+          field.setAttribute('maxlength', maxLength);
+        }
+        const counter = document.createElement('span');
+        counter.className = characterCounterClassName;
+        counter.style.position = 'absolute';
+        counter.style.right = '10px';
+        counter.style.bottom = '-20px';
+        counter.style.pointerEvents = 'none';
+        let wrapper;
+        const {
+          parentNode
+        } = field;
+        const computedStyle = window.getComputedStyle(parentNode);
+        if (parentNode.style && parentNode.style.position === 'relative' || computedStyle.getPropertyValue('position') === 'relative') {
+          wrapper = parentNode;
+        } else {
+          wrapper = document.createElement('div');
+          wrapper.style.position = 'relative';
+          wrapper.style.display = 'inline-block';
+          wrapper.style.width = '100%';
+          field.parentNode.insertBefore(wrapper, field);
+          wrapper.appendChild(field);
+        }
+        wrapper.appendChild(counter);
+        function updateCounter() {
+          if (field.value.length > maxLength) {
+            // eslint-disable-next-line no-param-reassign
+            field.value = field.value.substring(0, maxLength);
+          }
+          const {
+            length
+          } = field.value;
+          counter.textContent = `${length}/${maxLength}`;
+          if (length >= maxLength) {
+            counter.className = characterCounterErrorClassName;
+          } else if (length >= maxLength * 0.9) {
+            counter.className = characterCounterWarningClassName;
+          } else {
+            counter.className = characterCounterClassName;
+          }
+        }
+        field.removeEventListener('input', updateCounter);
+        field.removeEventListener('paste', updateCounter);
+        field.addEventListener('input', updateCounter);
+        field.addEventListener('paste', () => {
+          setTimeout(updateCounter, 0);
+        });
+        updateCounter();
+      });
+    });
+  }, 100); // Small delay to ensure DOM is ready
+};

package/dist/es/utils/formatting.js

@@ -37,6 +37,9 @@ export const formatTime = seconds => {
   if (hours > 0) parts.push(`${hours}h`);
   if (minutes > 0 || hours > 0 && remainingSeconds > 0) parts.push(`${minutes}m`);
   if (remainingSeconds > 0) parts.push(`${remainingSeconds}s`);
+
+  // Cater for decimal seconds
+  if (parts.length === 0) return '0s';
   return parts.join(' ');
 };
 const parseDate = input => {
@@ -99,4 +102,8 @@ export const formatDate = (input, format = DATE_FORMATS.HUMAN_READABLE) => {
   } catch (error) {
     return 'Invalid Date';
   }
+};
+export const snakeCaseToTitleCase = word => {
+  const result = word.replace(/([A-Z])/g, ' $1');
+  return result.charAt(0).toUpperCase() + result.slice(1);
 };

package/dist/es/utils/index.js

@@ -1,2 +1,3 @@
 export { useWindowSize, useDynamicPosition, useOutsideClick } from "./hooks";
-export { formatTime, formatDate, DATE_FORMATS } from "./formatting";
+export { formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase } from "./formatting";
+export { applyCharacterLimit } from "./applyCharacterLimit";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "5.0.5",
+  "version": "5.1.1",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -59,7 +59,7 @@
     "@lexical/selection": "0.12.2",
     "@lexical/table": "0.12.2",
     "@lexical/utils": "0.12.2",
-    "@pareto-engineering/assets": "^5.0.0",
+    "@pareto-engineering/assets": "^5.1.1",
     "@pareto-engineering/bem": "^5.0.0",
     "@pareto-engineering/styles": "^5.0.0",
     "@pareto-engineering/utils": "^5.0.0",
@@ -87,5 +87,5 @@
     "remark-math": "^6.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "d907245c47d1feee890e349bb9fa1d6d69b775d5"
+  "gitHead": "9af8ec028d247f108df8577a080c663edadc205b"
 }

package/src/stories/a/AreaChart.stories.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { AreaChart } from 'ui'
 
 export default {
-  title    :'a/AreaChart',
+  title    :'a/Charts/AreaChart',
   component:AreaChart,
 }
 

package/src/stories/a/BarChart.stories.jsx

@@ -4,7 +4,7 @@ import React from 'react'
 import { BarChart } from 'ui'
 
 export default {
-  title    :'a/BarChart',
+  title    :'a/Charts/BarChart',
   component:BarChart,
 }
 

package/src/stories/a/PieChart.stories.jsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { PieChart } from 'ui'
+
+export default {
+  title    :'a/Charts/PieChart',
+  component:PieChart,
+}
+
+const data = [
+  { status: 'pendingReview', value: 230 },
+  { status: 'accepted', value: 350 },
+  { status: 'rejected', value: 80 },
+  { status: 'toRevise', value: 10 },
+  { status: 'revised', value: 60 },
+]
+
+const Template = (args) => (
+  <div style={{ height: '100%', width: '100%' }}>
+    <PieChart {...args} />
+  </div>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  data,
+  valueKey:'value',
+  labelKey:'status',
+  colors  :['#8CB0F8', '#7F7CF6', '#FFD66E', '#E8E9ED', '#F6BC7E'],
+  height  :400,
+}
+
+const TemplateSideBySide = (args) => (
+  <div style={{ display: 'flex', gap: '20px' }}>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <PieChart {...args[0]} />
+    </div>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <PieChart {...args[1]} />
+    </div>
+  </div>
+)
+
+export const SideBySide = TemplateSideBySide.bind({})
+SideBySide.args = [
+  {
+    ...Default.args,
+  },
+  {
+    ...Default.args,
+  },
+]

package/src/ui/a/Charts/AreaChart/AreaChart.jsx

@@ -50,18 +50,6 @@ const AreaChart = ({
 
   const [selectedYLabels, setSelectedYLabels] = useState(allYLabels)
 
-  const processedData = data.map((item) => {
-    const yValues = yKeys.map((key) => item[key])
-    const lowerBound = Math.min(...yValues)
-    const upperBound = Math.max(...yValues)
-    const margin = (upperBound - lowerBound) * 0.1
-    return {
-      ...item,
-      bounds:[lowerBound - margin, upperBound + margin],
-      isTimeFormat,
-    }
-  })
-
   const yAxisBounds = () => {
     const yValues = data.map((item) => yKeys.map((key) => item[key]))
     const min = Math.min(...yValues.flat())
@@ -95,7 +83,7 @@ const AreaChart = ({
         capitalizedLegend={capitalizedLegend}
       />
       <ResponsiveContainer width={width} height={height}>
-        <RechartsAreaChart data={processedData}>
+        <RechartsAreaChart data={data}>
           <CartesianGrid strokeDasharray="3 3" />
           <XAxis
             dataKey={xKey}
@@ -126,7 +114,13 @@ const AreaChart = ({
               return value.toFixed(2)
             }}
           />
-          <Tooltip content={<CustomTooltipContent xLabel={xLabel} />} />
+          <Tooltip content={(
+            <CustomTooltipContent
+              dateFormat={dateFormat}
+              isTimeFormat={isTimeFormat}
+            />
+          )}
+          />
           {filled && (
             <Area
               id="bounds"

package/src/ui/a/Charts/BarChart/BarChart.jsx

@@ -38,7 +38,8 @@ const BarChart = ({
   colors,
   height,
   width,
-  // ...otherProps
+  isTimeFormat,
+  capitalizedLegend,
 }) => {
   const allYLabels = yKeys.map((key) => ({
     label:key,
@@ -69,6 +70,7 @@ const BarChart = ({
       <CustomLegend
         colorsArray={selectedYLabels.map((item) => item.color)}
         yKeysArray={selectedYLabels.map((item) => item.label)}
+        capitalizedLegend={capitalizedLegend}
       />
       <ResponsiveContainer width={width} height={height}>
         <RechartsBarChart data={data}>
@@ -87,7 +89,7 @@ const BarChart = ({
             axisLine={false}
             tickLine={false}
           />
-          <Tooltip content={<CustomTooltipContent xLabel={xLabel} />} />
+          <Tooltip content={<CustomTooltipContent isTimeFormat={isTimeFormat} />} />
           {selectedYLabels.map((key) => (
             <Bar
               stackId="a"

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

@@ -4,6 +4,8 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
+import { snakeCaseToTitleCase } from 'ui/utils'
+
 import './styles.scss'
 
 const baseClassName = styleNames.base
@@ -15,40 +17,44 @@ const CustomLegend = ({
   className: userClassName,
   colorsArray,
   yKeysArray,
+  orientation,
+  getLegendItemTitle,
+  getLegendItemSubtitle,
   capitalizedLegend,
-}) => {
-  const capitalizeWord = (word) => {
-    if (!capitalizedLegend) return word
-    const wordsToCapitalize = ['average', 'best', 'worst']
-    return word.split(' ').map((part) => (wordsToCapitalize.includes(part.toLowerCase())
-      ? part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()
-      : part),
-    ).join(' ')
-  }
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-    >
-      {yKeysArray.map((key, index) => (
-        <div key={key} className="item">
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+      orientation,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+  >
+    {yKeysArray.map((key, index) => (
+      <div key={key} className="item">
+        <div className="title">
           <span
             className="dot"
             style={{ backgroundColor: colorsArray[index] }}
           />
-          <span className="text">{capitalizeWord(key)}</span>
+          <span className="text">
+            {
+              capitalizedLegend
+                ? snakeCaseToTitleCase(getLegendItemTitle(key))
+                : getLegendItemTitle(key)
+            }
+          </span>
         </div>
-      ))}
-    </div>
-  )
-}
+        <span className="sub-title">
+          {getLegendItemSubtitle(key)}
+        </span>
+      </div>
+    ))}
+  </div>
+)
 
 CustomLegend.propTypes = {
   /**
@@ -71,6 +77,21 @@ CustomLegend.propTypes = {
    */
   yKeysArray:PropTypes.arrayOf(PropTypes.string).isRequired,
 
+  /**
+   * The orientation of the Legend
+   */
+  orientation:PropTypes.oneOf(['vertical', 'horizontal']),
+
+  /**
+   * The function to get the legendItemKey
+   */
+  getLegendItemTitle:PropTypes.func,
+
+  /**
+   * The function to get legend children
+   */
+  getLegendItemSubtitle:PropTypes.func,
+
   /**
    * Flag on whether to capitalize legend keys
    */
@@ -78,7 +99,11 @@ CustomLegend.propTypes = {
 }
 
 CustomLegend.defaultProps = {
-  capitalizedLegend:false,
+  orientation          :'horizontal',
+  getLegendItemTitle   :(key) => key,
+  /* eslint-disable no-unused-vars */
+  getLegendItemSubtitle:() => {},
+  capitalizedLegend    :false,
 }
 
 export default CustomLegend

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

@@ -1,6 +1,7 @@
 @use "@pareto-engineering/bem";
 
 $default-padding: 1rem;
+$default-margin: 1rem;
 $default-text-font-size: calc(var(--s-1) * 1rem);
 $default-border-radius: .25rem;
 $default-legend-gap: .625rem;
@@ -8,33 +9,59 @@ $default-legend-padding: calc($default-padding * .125) calc($default-padding * .
 $default-legend-dot-width: .5rem;
 $default-legend-dot-height: .5rem;
 $default-legend-dot-margin-right: .3125rem;
+$default-box-shadow: 0 4px 16px 0 var(--soft-shadow);
 
 .#{bem.$base} {
   &.custom-legend {
-    display: flex;
     gap: $default-legend-gap;
     justify-content: flex-end;
     padding-bottom: $default-padding;
     padding-right: calc($default-padding * .25);
 
+    &.vertical {
+      display: block;
+      margin-right: calc($default-margin * 2);
+      min-width: fit-content;
+
+      .item {
+        box-shadow: $default-box-shadow;
+        padding-top: $default-padding;
+      }
+    }
+
+    &.horizontal {
+      display: flex;
+    }
+
     .item {
-      align-items: center;
       border-radius: $default-border-radius;
-      display: flex;
       padding: $default-legend-padding;
-    }
 
-    .dot {
-      border-radius: 50%;
-      display: inline-block;
-      height: $default-legend-dot-height;
-      margin-right: $default-legend-dot-margin-right;
-      width: $default-legend-dot-width;
-    }
+      .title {
+        align-items: center;
+        display: flex;
+
+        .dot {
+          border-radius: 50%;
+          display: inline-block;
+          height: $default-legend-dot-height;
+          margin-right: $default-legend-dot-margin-right;
+          width: $default-legend-dot-width;
+        }
+
+        .text {
+          color: var(--paragraph);
+          font-size: calc($default-text-font-size * .75);
+        }
+      }
 
-    .text {
-      color: var(--paragraph);
-      font-size: calc($default-text-font-size * .75);
+      .sub-title {
+        color: var(--heading);
+        display: flex;
+        font-size: calc($default-text-font-size * 1.2);
+        font-weight: 500;
+        justify-content: flex-end;
+      }
     }
   }
 }

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

@@ -4,7 +4,9 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import { formatTime, formatDate, DATE_FORMATS } from 'ui/utils'
+import {
+  formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase,
+} from 'ui/utils'
 
 import './styles.scss'
 
@@ -15,13 +17,26 @@ const componentClassName = 'custom-tooltip-content'
 const CustomTooltipContent = ({
   id,
   className: userClassName,
-  xLabel,
   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 (
@@ -36,15 +51,11 @@ const CustomTooltipContent = ({
           .join(' ')}
       >
         <p className="label">
-          {`${xLabel}: ${formatDate(label, dateFormat)}`}
+          {isDateValue ? formatDate(label, dateFormat) : label}
         </p>
         {newPayload.map((entry) => (
           <p className="label" key={`${entry.name}`} style={{ color: entry.color, textTransform: 'capitalize' }}>
-            {`${entry.name}: ${
-              isTimeFormat
-                ? formatTime(entry.value)
-                : entry.value
-            }`}
+            {`${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`}
           </p>
         ))}
       </div>
@@ -64,11 +75,6 @@ CustomTooltipContent.propTypes = {
    */
   className:PropTypes.string,
 
-  /**
-   * The label for the x-axis.
-   */
-  xLabel:PropTypes.string,
-
   /**
    * Flag on whether it is a timeformat or not
    */
@@ -79,6 +85,11 @@ CustomTooltipContent.propTypes = {
    */
   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.
@@ -99,6 +110,7 @@ CustomTooltipContent.propTypes = {
 
 CustomTooltipContent.defaultProps = {
   isTimeFormat:false,
+  isDateValue :true,
   dateFormat  :DATE_FORMATS.HUMAN_READABLE,
 }
 

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

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types'
 
 import styleNames from '@pareto-engineering/bem/exports'
 
-import './styles.scss'
+import { snakeCaseToTitleCase } from 'ui/utils'
 
-// Local Definitions
+import './styles.scss'
 
 const baseClassName = styleNames.base
 
@@ -65,7 +65,7 @@ const YLabelsDropDown = ({
               className="status-dot"
               style={{ backgroundColor: item.color }}
             />
-            {item.label}
+            {snakeCaseToTitleCase(item.label)}
             {selectedYLabels.some((label) => label.label === item.label) && (
               <span className="icon checkmark">I</span>
             )}
@@ -115,7 +115,7 @@ YLabelsDropDown.propTypes = {
 }
 
 YLabelsDropDown.defaultProps = {
-  placeholder:'Submission status',
+  placeholder:'Select Item',
 }
 
 export default YLabelsDropDown

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

@@ -1,7 +1,8 @@
 @use "@pareto-engineering/bem";
 
 $default-margin: 1rem;
-$default-border-radius: .25rem;
+$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);
@@ -16,9 +17,9 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
     .dropdown-button {
       align-items: center;
-      background-color: var(--soft-background-inputs);
-      border: none;
-      border-radius: $default-border-radius;
+      background-color: var(--background-far);
+      border: $default-border;
+      border-radius: calc($default-border-radius / 2);
       color: var(--hard-paragraph);
       cursor: pointer;
       display: flex;
@@ -53,8 +54,8 @@ $default-checkmark-font-size: calc(var(--s-1) * .75rem);
 
       .dropdown-item {
         align-items: center;
-        border-radius: $default-border-radius;
-        color: var(--hard-paragraph);
+        border-radius: calc($default-border-radius / 2);
+        color: var(--paragraph);
         cursor: pointer;
         display: flex;
         margin: calc($default-margin * .125);