@pareto-engineering/design-system 5.3.0 → 5.4.0

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

@@ -1,121 +0,0 @@
-// 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

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

package/src/ui/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/src/ui/a/Charts/Common/index.js

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

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

@@ -1,163 +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 (
-    <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}
-                  isPieChart
-                  isPayOutChart={isPayOutChart}
-                />
-              )}
-            />
-
-            <text
-              x="50%"
-              y="50%"
-              textAnchor="middle"
-              dominantBaseline="middle"
-              style={{
-              }}
-            >
-              <tspan x="50%" dy="-1.2em" fontSize="14" fill="grey">
-                Total
-              </tspan>
-              <tspan x="50%" dy="1.2em" fill="var(--heading)" fontSize="22">
-                {displayTotal}
-              </tspan>
-            </text>
-          </RechartsPieChart>
-        </ResponsiveContainer>
-        <CustomLegend
-          key={id}
-          colorsArray={colors}
-          yKeysArray={formattedData}
-          capitalizedLegend
-          orientation="vertical"
-          getLegendItemTitle={(entry) => entry[labelKey]}
-          getLegendItemSubtitle={(entry) => entry[valueKey]}
-          subtitleToCurrency={subtitleToCurrency}
-          isPayOutChart={isPayOutChart}
-        />
-      </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]),
-  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/src/ui/a/Charts/PieChart/index.js

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

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

@@ -1,136 +0,0 @@
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-$default-padding: 1rem;
-$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
-$soft-box-shadow: 0 .25rem 1rem var(--soft-shadow);
-$default-text-font-size: calc(var(--s-1) * 1rem);
-$default-legend-dot-width: .75rem;
-$default-legend-dot-height: .75rem;
-$default-legend-dot-margin-right: .3125rem;
-
-.#{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;
-
-    .custom-legend {
-      .item {
-        padding-top: 0;
-      }
-
-      .title .dot {
-        height: $default-legend-dot-height;
-        width: $default-legend-dot-width;
-      }
-
-      .title .text {
-        font-size: calc($default-text-font-size * 1.5);
-      }
-
-      .sub-title-percentage-container {
-        align-items: center;
-        display: flex;
-        gap: .8rem;
-        margin-left: .5rem;
-        width: fit-content;
-      }
-
-      .sub-title-percentage-container .sub-title {
-        font-size: calc($default-text-font-size * 1.25);
-      }
-
-      .sub-title-percentage-container .percentage-title {
-        font-size: calc($default-text-font-size * 1);
-      }
-    }
-
-    .custom-tooltip-content {
-      box-shadow: $soft-box-shadow;
-
-      p {
-        color: var(--hard-paragraph);
-        font-size: calc($default-text-font-size * .8);
-        font-weight: 600;
-        margin: 0;
-      }
-
-      .pie-chart-label {
-        align-items: center;
-        display: flex;
-        gap: 1.25rem;
-        justify-content: flex-start;
-
-        .status {
-          align-items: center;
-          display: flex;
-          gap: .1rem;
-        }
-
-        .label {
-          color: var(--hard-paragraph);
-          font-size: calc($default-text-font-size * 1);
-          font-weight: 600;
-          text-transform: capitalize;
-        }
-
-        .dot {
-          border-radius: 50%;
-          display: inline-block;
-          height: $default-legend-dot-height;
-          margin-right: $default-legend-dot-margin-right;
-          width: $default-legend-dot-width;
-        }
-
-        .value {
-          color: var(--hard-paragraph);
-          font-size: calc($default-text-font-size * 1);
-          font-weight: 600;
-          text-transform: capitalize;
-        }
-
-        .percentage-title {
-          color: var(--soft-paragraph);
-          font-size: calc($default-text-font-size * 1);
-          font-weight: 300;
-          text-transform: capitalize;
-        }
-      }
-    }
-
-    .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

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

package/src/ui/a/ContentTree/ContentTree.jsx

@@ -1,88 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import './styles.scss'
-
-// Local Definitions
-import { Tree, useContentTree } from './common'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'content-tree'
-
-/**
- * This is the component description.
- */
-const ContentTree = ({
-  id,
-  className:userClassName,
-  style,
-  target,
-  selectors,
-  color,
-  // ...otherProps
-}) => {
-  const contentTree = useContentTree(target, selectors)
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      <Tree color={color} tree={contentTree} />
-    </div>
-  )
-}
-
-ContentTree.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 selectors to use to extract the navigation tree from the content.
-   */
-  selectors:PropTypes.arrayOf(PropTypes.string),
-
-  /**
-   * The reference to the parent element.
-   */
-  target:PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.node }),
-  ]),
-
-  /**
-   * The color for the tree.
-   */
-  color:PropTypes.string,
-}
-
-ContentTree.defaultProps = {
-  selectors:['h2', 'h3'],
-}
-
-export default ContentTree