@pareto-engineering/design-system 5.3.0 → 5.5.0

package/dist/es/a/BlurOverlay/BlurOverlay.js

@@ -1,45 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import "./styles.scss";
-const baseClassName = styleNames.base;
-const componentClassName = 'blur-overlay';
-const BlurOverlay = ({
-  id,
-  className: userClassName,
-  style,
-  children,
-  blur
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName, blur && styleNames.modifierActive].filter(e => e).join(' '),
-  style: style
-}, children);
-BlurOverlay.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 children JSX
-   */
-  children: PropTypes.node,
-  /**
-   *  Boolean to toggle blur effect
-   */
-  blur: PropTypes.bool
-};
-BlurOverlay.defaultProps = {
-  blur: true
-  // someProp:false
-};
-export default BlurOverlay;

package/dist/es/a/BlurOverlay/index.js

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

package/dist/es/a/BlurOverlay/styles.scss

@@ -1,33 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.1 */
-
-@use "@pareto-engineering/bem";
-
-.#{bem.$base}.blur-overlay {
-  background: inherit;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 3;
-  &.#{bem.$modifier-active} {
-    animation: blurAnimation .3s ease-in-out;
-    backdrop-filter: blur(5px);
-    background: var(--blur-overlay-background, inherit);
-    height: 100%;
-    z-index: var(--blur-overlay-z-index, 3);
-  }
-}
-
-@keyframes blurAnimation {
-  0% {
-    transform: translateX(-100%);
-  }
-
-  1% {
-    transform: translateX(0);
-  }
-
-  100% {
-    transform: translateX(0);
-  }
-}

package/dist/es/a/Charts/AreaChart/AreaChart.js

@@ -1,246 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import { AreaChart as RechartsAreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
-import styleNames from '@pareto-engineering/bem/exports';
-import { formatTime, formatDate, DATE_FORMATS, parseDate } from "../../../utils";
-import { ThroughPutIndicator } from "../../ThroughPutIndicator";
-import { CustomLegend, CustomTooltipContent, YLabelsDropDown } from "../Common";
-import "./styles.scss";
-const baseClassName = styleNames.base;
-const componentClassName = 'area-chart';
-
-/**
- * Determines whether to show only date or date with time based on the data range
- *
- * @param {Array} data - The chart data array
- * @param {string} xKey - The key for the x-axis values (dates)
- * @returns {boolean} - True if only date should be shown, false if date and time should be shown
- */
-const shouldShowOnlyDate = (data, xKey) => {
-  if (!data || data.length < 2 || !xKey) return true;
-
-  // Extract dates from the data
-  const dates = data.map(item => parseDate(item[xKey])).filter(date => date !== null);
-  if (dates.length < 2) return true;
-
-  // Sort dates chronologically
-  dates.sort((a, b) => a.getTime() - b.getTime());
-
-  // Calculate the difference in days between the first and last date
-  const firstDate = dates[0];
-  const lastDate = dates[dates.length - 1];
-  const diffInMs = lastDate.getTime() - firstDate.getTime();
-  const diffInDays = diffInMs / (1000 * 60 * 60 * 24);
-
-  // If the data spans less than 4 days, show only date
-  return diffInDays > 4;
-};
-const AreaChart = ({
-  id,
-  className: userClassName,
-  data,
-  title,
-  xKey,
-  yKeys,
-  xLabel,
-  yLabel,
-  colors,
-  filled,
-  height,
-  width,
-  isTimeFormat,
-  dateFormat,
-  capitalizedLegend,
-  isWorkerSubmissionChart,
-  totalSubmissions
-}) => {
-  const allYLabels = yKeys.map(key => ({
-    label: key,
-    color: colors[yKeys.indexOf(key)]
-  }));
-  const [selectedYLabels, setSelectedYLabels] = useState(allYLabels);
-  const yAxisBounds = () => {
-    const yValues = data.map(item => yKeys.map(key => item[key]));
-    const min = Math.min(...yValues.flat());
-    const max = Math.max(...yValues.flat());
-    const margin = (max - min) * 0.1;
-    return [Math.max(min - margin, 0), max + margin];
-  };
-  const showOnlyDate = shouldShowOnlyDate(data, xKey);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "chart-header"
-  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(YLabelsDropDown, {
-    allYLabels: allYLabels,
-    selectedYLabels: selectedYLabels,
-    setSelectedYLabels: setSelectedYLabels
-  })), isWorkerSubmissionChart && /*#__PURE__*/React.createElement("div", {
-    className: "worker-submissions-total-percentage-container"
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "total-submissions-text"
-  }, totalSubmissions), /*#__PURE__*/React.createElement(ThroughPutIndicator, {
-    data: data,
-    keyName: "reserved"
-  })), /*#__PURE__*/React.createElement(CustomLegend, {
-    key: id,
-    colorsArray: colors,
-    yKeysArray: yKeys,
-    capitalizedLegend: capitalizedLegend
-  }), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/React.createElement(RechartsAreaChart, {
-    data: data
-  }, /*#__PURE__*/React.createElement(CartesianGrid, {
-    strokeDasharray: "3 3"
-  }), /*#__PURE__*/React.createElement(XAxis, {
-    dataKey: xKey,
-    label: {
-      value: xLabel,
-      position: 'insideBottom',
-      offset: -5
-    },
-    axisLine: false,
-    tickLine: false,
-    tickCount: 3,
-    tickFormatter: value => {
-      if (showOnlyDate) {
-        return formatDate(value, dateFormat);
-      }
-      return formatDate(value, DATE_FORMATS.HUMAN_READABLE_WITH_TIME);
-    }
-  }), /*#__PURE__*/React.createElement(YAxis, {
-    domain: yAxisBounds,
-    scale: "linear",
-    interval: "equidistantPreserveStart",
-    label: {
-      value: yLabel,
-      angle: -90,
-      position: 'left',
-      offset: -3,
-      style: {
-        textAnchor: 'middle'
-      }
-    },
-    padding: {
-      top: 10,
-      bottom: 10
-    },
-    axisLine: false,
-    tickLine: false,
-    tickFormatter: value => {
-      if (isTimeFormat) {
-        return formatTime(value);
-      }
-      if (isWorkerSubmissionChart) {
-        return Math.round(value);
-      }
-      return value.toFixed(2);
-    }
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
-      dateFormat: dateFormat,
-      isTimeFormat: isTimeFormat
-    })
-  }), filled && /*#__PURE__*/React.createElement(Area, {
-    id: "bounds",
-    type: "linear",
-    dataKey: "bounds",
-    stroke: "none",
-    fill: "var(--hard-ui-main-2)",
-    fillOpacity: 0.4,
-    activeDot: false,
-    dot: false,
-    label: false,
-    isAnimationActive: false
-  }), selectedYLabels.map(key => /*#__PURE__*/React.createElement(Area, {
-    id: key.label,
-    key: key.label,
-    type: "linear",
-    dataKey: key.label,
-    stroke: key.color,
-    fill: "none",
-    connectNulls: true,
-    dot: false,
-    activeDot: {
-      r: 4
-    },
-    isAnimationActive: false
-  })))));
-};
-AreaChart.propTypes = {
-  /**
-   * Array of data objects to be displayed in the chart.
-   */
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Title of the chart.
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * Key for the x-axis data.
-   */
-  xKey: PropTypes.string.isRequired,
-  /**
-   * Array of keys for the y-axis data.
-   */
-  yKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
-  /**
-   * Label for the x-axis.
-   */
-  xLabel: PropTypes.string,
-  /**
-   * Label for the y-axis.
-   */
-  yLabel: PropTypes.string,
-  /**
-   * Array of colors corresponding to the y-axis data keys.
-   */
-  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-  /**
-   * Boolean to determine if the area under the curve should be filled.
-   */
-  filled: PropTypes.bool,
-  /**
-   * Height of the chart.
-   */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Width of the chart.
-   */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Flag on whether to capitalize legend keys
-   */
-  capitalizedLegend: PropTypes.bool,
-  /**
-   * 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 chart is a worker submission chart or not
-   */
-  isWorkerSubmissionChart: PropTypes.bool,
-  /**
-   * Total submissions
-   */
-  totalSubmissions: PropTypes.number
-};
-AreaChart.defaultProps = {
-  filled: false,
-  width: '100%',
-  height: 300,
-  capitalizedLegend: false,
-  isTimeFormat: false,
-  dateFormat: DATE_FORMATS.HUMAN_READABLE,
-  isWorkerSubmissionChart: false
-};
-export default AreaChart;

package/dist/es/a/Charts/AreaChart/index.js

@@ -1 +0,0 @@
-export { default as AreaChart } from "./AreaChart";

package/dist/es/a/Charts/AreaChart/styles.scss

@@ -1,70 +0,0 @@
-@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} {
-  &.area-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;
-      }
-    }
-
-    .worker-submissions-total-percentage-container {
-      align-items: center;
-      display: flex;
-      gap: 1rem;
-      justify-content: flex-start;
-
-      .total-submissions-text {
-        font-size: calc($default-text-font-size * 2);
-      }
-    }
-
-    /* stylelint-disable selector-max-compound-selectors -- nested elements */
-    .recharts-wrapper {
-      .recharts-surface {
-        .recharts-cartesian-grid line {
-          stroke: var(--ui-lines);
-        }
-
-        .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;
-        }
-      }
-    }
-  }
-}
-
-.worker-submissions-total-percentage-container {
-  align-items: center;
-  display: flex;
-  gap: 1rem;
-  justify-content: flex-start;
-
-  .total-submissions-text {
-    font-size: calc($default-text-font-size * 2);
-  }
-}

package/dist/es/a/Charts/BarChart/BarChart.js

@@ -1,129 +0,0 @@
-import * as React from 'react';
-import { useState } from 'react';
-import PropTypes from 'prop-types';
-import { BarChart as RechartsBarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
-import styleNames from '@pareto-engineering/bem/exports';
-import { CustomLegend, CustomTooltipContent, YLabelsDropDown } from "../Common";
-import "./styles.scss";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'bar-chart';
-const BarChart = ({
-  id,
-  className: userClassName,
-  data,
-  title,
-  xKey,
-  yKeys,
-  xLabel,
-  yLabel,
-  colors,
-  height,
-  width,
-  isTimeFormat,
-  capitalizedLegend
-}) => {
-  const allYLabels = yKeys.map(key => ({
-    label: key,
-    color: colors[yKeys.indexOf(key)]
-  }));
-  const [selectedYLabels, setSelectedYLabels] = useState(allYLabels);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "chart-header"
-  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(YLabelsDropDown, {
-    allYLabels: allYLabels,
-    selectedYLabels: selectedYLabels,
-    setSelectedYLabels: setSelectedYLabels
-  })), /*#__PURE__*/React.createElement(CustomLegend, {
-    key: id,
-    colorsArray: selectedYLabels.map(item => item.color),
-    yKeysArray: selectedYLabels.map(item => item.label),
-    capitalizedLegend: capitalizedLegend
-  }), /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/React.createElement(RechartsBarChart, {
-    data: data
-  }, /*#__PURE__*/React.createElement(CartesianGrid, {
-    vertical: false
-  }), /*#__PURE__*/React.createElement(XAxis, {
-    dataKey: xKey,
-    label: {
-      value: xLabel,
-      position: 'insideBottom',
-      offset: -5
-    } // Adjusted offset for padding
-    ,
-    axisLine: false,
-    tickLine: false,
-    tickCount: 3
-  }), /*#__PURE__*/React.createElement(YAxis, {
-    label: {
-      value: yLabel,
-      angle: -90,
-      position: 'insideLeft',
-      offset: 15
-    },
-    axisLine: false,
-    tickLine: false
-  }), /*#__PURE__*/React.createElement(Tooltip, {
-    content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
-      isTimeFormat: isTimeFormat
-    })
-  }), selectedYLabels.map(key => /*#__PURE__*/React.createElement(Bar, {
-    stackId: "a",
-    id: key.label,
-    key: key.label,
-    dataKey: key.label,
-    fill: key.color
-  })))));
-};
-BarChart.propTypes = {
-  /**
-   * Array of data objects to be displayed in the chart.
-   */
-  // eslint-disable-next-line react/forbid-prop-types
-  data: PropTypes.arrayOf(PropTypes.object).isRequired,
-  /**
-   * Title of the chart.
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * Key for the x-axis data.
-   */
-  xKey: PropTypes.string.isRequired,
-  /**
-   * Array of keys for the y-axis data.
-   */
-  yKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
-  /**
-   * Label for the x-axis.
-   */
-  xLabel: PropTypes.string,
-  /**
-   * Label for the y-axis.
-   */
-  yLabel: PropTypes.string,
-  /**
-   * Array of colors corresponding to the y-axis data keys.
-   */
-  colors: PropTypes.arrayOf(PropTypes.string).isRequired,
-  /**
-   * Height of the chart.
-   */
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Width of the chart.
-   */
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-};
-BarChart.defaultProps = {
-  width: '100%',
-  height: 300
-};
-export default BarChart;

package/dist/es/a/Charts/BarChart/index.js

@@ -1 +0,0 @@
-export { default as BarChart } from "./BarChart";

package/dist/es/a/Charts/BarChart/styles.scss

@@ -1,48 +0,0 @@
-@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} {
-  &.bar-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;
-      }
-    }
-
-    /* stylelint-disable selector-max-compound-selectors -- nested elements */
-    .recharts-wrapper {
-      .recharts-surface {
-        .recharts-cartesian-grid line {
-          stroke: var(--ui-lines);
-        }
-
-        .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/dist/es/a/Charts/Common/CustomLegend/CustomLegend.js

@@ -1,94 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import { snakeCaseToTitleCase } from "../../../../utils";
-import "./styles.scss";
-const baseClassName = styleNames.base;
-const componentClassName = 'custom-legend';
-const toCurrency = value => {
-  const formatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD'
-  });
-  return formatter.format(value);
-};
-const CustomLegend = ({
-  id,
-  className: userClassName,
-  colorsArray,
-  yKeysArray,
-  orientation,
-  getLegendItemTitle,
-  getLegendItemSubtitle,
-  capitalizedLegend,
-  subtitleToCurrency,
-  isPayOutChart
-}) => /*#__PURE__*/React.createElement("div", {
-  id: id,
-  className: [baseClassName, componentClassName, userClassName, orientation].filter(e => e).join(' ')
-}, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
-  key: key,
-  className: "item"
-}, /*#__PURE__*/React.createElement("div", {
-  className: "title"
-}, /*#__PURE__*/React.createElement("span", {
-  className: "dot",
-  style: {
-    backgroundColor: colorsArray[index]
-  }
-}), /*#__PURE__*/React.createElement("span", {
-  className: "text"
-}, capitalizedLegend ? snakeCaseToTitleCase(getLegendItemTitle(key)) : getLegendItemTitle(key))), /*#__PURE__*/React.createElement("div", {
-  className: "sub-title-percentage-container"
-}, /*#__PURE__*/React.createElement("span", {
-  className: "sub-title"
-}, subtitleToCurrency ? toCurrency(getLegendItemSubtitle(key)) : getLegendItemSubtitle(key)), Object.prototype.hasOwnProperty.call(key, 'percentage') && !isPayOutChart && /*#__PURE__*/React.createElement("span", {
-  className: "percentage-title"
-}, `${key?.percentage}%`)))));
-CustomLegend.propTypes = {
-  /**
-   * The id of the dropdown component.
-   */
-  id: PropTypes.string,
-  /**
-   * Additional class names for the dropdown component.
-   */
-  className: PropTypes.string,
-  /**
-   * Array of colors corresponding to the y-axis data keys.
-   */
-  colorsArray: PropTypes.arrayOf(PropTypes.string).isRequired,
-  /**
-   * Array of keys for the y-axis data.
-   */
-  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
-   */
-  capitalizedLegend: PropTypes.bool,
-  /**
-   * Flag on whether to convert the subtitle to currency
-   */
-  subtitleToCurrency: PropTypes.bool
-};
-CustomLegend.defaultProps = {
-  orientation: 'horizontal',
-  getLegendItemTitle: key => key,
-  /* eslint-disable no-unused-vars */
-  getLegendItemSubtitle: () => {},
-  capitalizedLegend: false,
-  subtitleToCurrency: false
-};
-export default CustomLegend;

package/dist/es/a/Charts/Common/CustomLegend/index.js

@@ -1 +0,0 @@
-export { default as CustomLegend } from "./CustomLegend";