@pareto-engineering/design-system 5.3.0 → 5.4.0

package/dist/es/a/Charts/Common/CustomLegend/styles.scss

@@ -1,75 +0,0 @@
-@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;
-$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
-$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 {
-    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 {
-        padding-top: $default-padding;
-      }
-    }
-
-    &.horizontal {
-      display: flex;
-    }
-
-    .item {
-      border-radius: $default-border-radius;
-      padding: $default-legend-padding;
-
-      .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);
-        }
-      }
-
-
-
-      .sub-title {
-        color: var(--heading);
-        display: flex;
-        font-size: calc($default-text-font-size * 1.2);
-        font-weight: 500;
-        justify-content: flex-start;
-        margin-left: 1rem;
-      }
-
-      .percentage-title {
-        color: var(--paragraph);
-        font-size: calc($default-text-font-size * .75);
-        justify-content: flex-start;
-      }
-    }
-  }
-}

package/dist/es/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js

@@ -1,175 +0,0 @@
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import { formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase } from "../../../../utils";
-import "./styles.scss";
-const baseClassName = styleNames.base;
-const componentClassName = 'custom-tooltip-content';
-const formatValue = (value, isTimeFormat) => {
-  if (isTimeFormat) {
-    return formatTime(value);
-  }
-  if (typeof value === 'number') {
-    return Number.isInteger(value) ? value : value.toFixed(2);
-  }
-  return value;
-};
-const PayoutPieChartLabel = ({
-  entry,
-  formatLabelValue
-}) => /*#__PURE__*/React.createElement("div", {
-  className: "pie-chart-label"
-}, /*#__PURE__*/React.createElement("div", {
-  className: "status"
-}, /*#__PURE__*/React.createElement("span", {
-  className: "dot",
-  style: {
-    backgroundColor: entry?.payload?.color
-  }
-}), /*#__PURE__*/React.createElement("p", {
-  className: "label",
-  key: `${entry.name}`,
-  style: {
-    color: entry.color,
-    textTransform: 'capitalize'
-  }
-}, `${snakeCaseToTitleCase(entry.name)}  `)), /*#__PURE__*/React.createElement("p", {
-  className: "value"
-}, `${formatLabelValue(entry.value)}`));
-const StandardPieChartLabel = ({
-  entry,
-  formatLabelValue
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Submissions"), /*#__PURE__*/React.createElement("div", {
-  className: "pie-chart-label"
-}, /*#__PURE__*/React.createElement("div", {
-  className: "status"
-}, /*#__PURE__*/React.createElement("span", {
-  className: "dot",
-  style: {
-    backgroundColor: entry?.payload?.color
-  }
-}), /*#__PURE__*/React.createElement("p", {
-  className: "label",
-  key: `${entry.name}`,
-  style: {
-    color: entry.color,
-    textTransform: 'capitalize'
-  }
-}, `${snakeCaseToTitleCase(entry.name)}  `)), /*#__PURE__*/React.createElement("p", {
-  className: "value"
-}, `${formatLabelValue(entry.value)}`), /*#__PURE__*/React.createElement("p", {
-  className: "percentage-title"
-}, `${entry?.payload?.percentage}%`)));
-const StandardChartLabel = ({
-  entry,
-  formatLabelValue
-}) => /*#__PURE__*/React.createElement("p", {
-  className: "label",
-  key: `${entry.name}`,
-  style: {
-    color: entry.color,
-    textTransform: 'capitalize'
-  }
-}, `${snakeCaseToTitleCase(entry.name)}: ${formatLabelValue(entry.value)}`);
-const CustomTooltipContent = ({
-  id,
-  className: userClassName,
-  dateFormat,
-  isTimeFormat,
-  isDateValue,
-  active,
-  payload,
-  label,
-  isPieChart,
-  isPayOutChart
-}) => {
-  const formatLabelValue = React.useCallback(value => formatValue(value, isTimeFormat), [isTimeFormat]);
-  const renderContent = React.useCallback(entry => {
-    if (isPieChart && isPayOutChart) {
-      return /*#__PURE__*/React.createElement(PayoutPieChartLabel, {
-        entry: entry,
-        formatLabelValue: formatLabelValue
-      });
-    }
-    if (isPieChart) {
-      return /*#__PURE__*/React.createElement(StandardPieChartLabel, {
-        entry: entry,
-        formatLabelValue: formatLabelValue
-      });
-    }
-    return /*#__PURE__*/React.createElement(StandardChartLabel, {
-      entry: entry,
-      formatLabelValue: formatLabelValue
-    });
-  }, [isPieChart, isPayOutChart, formatLabelValue]);
-  if (!active || !payload || !payload.length) {
-    return null;
-  }
-  const filteredPayload = payload.filter(item => item?.name !== 'bounds');
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(Boolean).join(' ')
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "label"
-  }, isDateValue ? formatDate(label, dateFormat) : label), filteredPayload.map(entry => /*#__PURE__*/React.createElement(React.Fragment, {
-    key: entry.name || entry.dataKey
-  }, renderContent(entry))));
-};
-CustomTooltipContent.propTypes = {
-  /**
-   * The id of the tooltip component
-   */
-  id: PropTypes.string,
-  /**
-   * Additional class names for the tooltip component
-   */
-  className: PropTypes.string,
-  /**
-   * Flag indicating whether values should be formatted as time
-   */
-  isTimeFormat: PropTypes.bool,
-  /**
-   * The format to use for date values
-   */
-  dateFormat: PropTypes.oneOf(Object.values(DATE_FORMATS)),
-  /**
-   * Flag indicating whether the label is a date value
-   */
-  isDateValue: PropTypes.bool,
-  /**
-   * If true, the tooltip is displayed
-   */
-  active: PropTypes.bool.isRequired,
-  /**
-   * The source data to be displayed in the tooltip
-   */
-  payload: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    payload: PropTypes.shape({}),
-    dataKey: PropTypes.string,
-    color: PropTypes.string
-  })).isRequired,
-  /**
-   * The label value which is active
-   */
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  /**
-   * Flag indicating whether the chart is a pie chart
-   */
-  isPieChart: PropTypes.bool,
-  /**
-   * Flag indicating whether the chart is a payout chart
-   */
-  isPayOutChart: PropTypes.bool
-};
-CustomTooltipContent.defaultProps = {
-  id: undefined,
-  className: undefined,
-  isTimeFormat: false,
-  isDateValue: true,
-  dateFormat: DATE_FORMATS.HUMAN_READABLE,
-  isPieChart: false,
-  isPayOutChart: false
-};
-export default /*#__PURE__*/React.memo(CustomTooltipContent);

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

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

package/dist/es/a/Charts/Common/CustomTooltipContent/styles.scss

@@ -1,26 +0,0 @@
-@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;
-$default-legend-dot-width: .5rem;
-$default-legend-dot-height: .5rem;
-$default-legend-dot-margin-right: .3125rem;
-
-.#{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/dist/es/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.js

@@ -1,86 +0,0 @@
-// DropdownStatus.js
-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 = '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 /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
-  }, /*#__PURE__*/React.createElement("button", {
-    className: "dropdown-button",
-    onClick: () => setIsOpen(!isOpen),
-    type: "button"
-  }, placeholder, /*#__PURE__*/React.createElement("span", {
-    className: `icon ${isOpen ? styleNames.modifierOpen : ''}`
-  }, "W")), /*#__PURE__*/React.createElement("div", {
-    className: `dropdown-content ${isOpen ? styleNames.modifierOpen : ''}`
-  }, allYLabels.map(item =>
-  /*#__PURE__*/
-  // eslint-disable-next-line max-len
-  // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
-  React.createElement("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)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "status-dot",
-    style: {
-      backgroundColor: item.color
-    }
-  }), snakeCaseToTitleCase(item.label), selectedYLabels.some(label => label.label === item.label) && /*#__PURE__*/React.createElement("span", {
-    className: "icon checkmark"
-  }, "I")))));
-};
-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/dist/es/a/Charts/Common/YLabelsDropDown/index.js

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

package/dist/es/a/Charts/Common/YLabelsDropDown/styles.scss

@@ -1,89 +0,0 @@
-@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/dist/es/a/Charts/Common/index.js

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

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

@@ -1,120 +0,0 @@
-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,
-  formatTotal,
-  subtitleToCurrency,
-  isPayOutChart
-}) => {
-  const total = data.reduce((sum, item) => sum + item[valueKey], 0);
-  const displayTotal = formatTotal ? formatTotal(total) : `${total}`;
-  const formattedData = data.map(item => ({
-    ...item,
-    label: item[labelKey],
-    color: colors[data.indexOf(item)],
-    percentage: total === 0 ? 0.0 : (item[valueKey] / total * 100).toFixed(0)
-  }));
-  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("div", {
-    className: "chart-content"
-  }, /*#__PURE__*/React.createElement(ResponsiveContainer, {
-    width: width,
-    height: height
-  }, /*#__PURE__*/React.createElement(RechartsPieChart, null, /*#__PURE__*/React.createElement(Pie, {
-    data: formattedData,
-    dataKey: valueKey,
-    nameKey: labelKey,
-    cx: "50%",
-    cy: "50%",
-    innerRadius: innerRadius,
-    outerRadius: outerRadius,
-    label: false,
-    paddingAngle: 0
-  }, formattedData.map((entry, index) => /*#__PURE__*/React.createElement(Cell, {
-    key: entry[labelKey],
-    fill: colors[index],
-    strokeWidth: 0
-  }))), /*#__PURE__*/React.createElement(Tooltip, {
-    content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
-      isDateValue: false,
-      isPieChart: true,
-      isPayOutChart: isPayOutChart
-    })
-  }), /*#__PURE__*/React.createElement("text", {
-    x: "50%",
-    y: "50%",
-    textAnchor: "middle",
-    dominantBaseline: "middle",
-    style: {}
-  }, /*#__PURE__*/React.createElement("tspan", {
-    x: "50%",
-    dy: "-1.2em",
-    fontSize: "14",
-    fill: "grey"
-  }, "Total"), /*#__PURE__*/React.createElement("tspan", {
-    x: "50%",
-    dy: "1.2em",
-    fill: "var(--heading)",
-    fontSize: "22"
-  }, displayTotal)))), /*#__PURE__*/React.createElement(CustomLegend, {
-    key: id,
-    colorsArray: colors,
-    yKeysArray: formattedData,
-    capitalizedLegend: true,
-    orientation: "vertical",
-    getLegendItemTitle: entry => entry[labelKey],
-    getLegendItemSubtitle: entry => entry[valueKey],
-    subtitleToCurrency: subtitleToCurrency,
-    isPayOutChart: isPayOutChart
-  })));
-};
-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]),
-  formatTotal: PropTypes.func,
-  subtitleToCurrency: PropTypes.bool,
-  isPayOutChart: PropTypes.bool
-};
-PieChart.defaultProps = {
-  id: undefined,
-  className: undefined,
-  width: '100%',
-  height: 300,
-  innerRadius: '50%',
-  outerRadius: '100%',
-  formatTotal: null,
-  subtitleToCurrency: false,
-  isPayOutChart: false
-};
-export default PieChart;

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

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