@pareto-engineering/design-system 5.2.1 → 5.4.0

package/dist/es/a/AppContext/ContextProvider.js

@@ -1,77 +0,0 @@
-/* @pareto-engineering/generator-front 0.2.3 */
-import * as React from 'react';
-import { useReducer } from 'react';
-import PropTypes from 'prop-types';
-import useTheme from "./useTheme";
-
-// Package-level Imports
-import Context from "./Context";
-
-// Component-level imports
-
-// Helper Definitions
-
-const reducer = (state, action) => {
-  switch (action.type) {
-    case 'UPDATE_STATE':
-      return {
-        ...state,
-        ...action.payload
-      };
-    default:
-      return state;
-  }
-};
-const AppContextProvider = ({
-  children,
-  initialTheme,
-  config,
-  initialState
-  // ...otherProps
-}) => {
-  const theme = useTheme(initialTheme);
-  const [state, dispatch] = useReducer(reducer, initialState);
-  return /*#__PURE__*/React.createElement(Context.Provider, {
-    value: {
-      state,
-      dispatch,
-      ...config,
-      ...theme
-    }
-  }, children);
-};
-AppContextProvider.propTypes = {
-  /**
-   *  The children JSX
-   */
-  children: PropTypes.node,
-  /**
-   * The initial theme for the website. If undefined, fallbacks on system preference.
-   */
-  initialTheme: PropTypes.string,
-  /**
-   * A dictionnary containing settings and preferences to be used application-wide
-   */
-  config: PropTypes.shape({
-    APP: PropTypes.shape({
-      NAME: PropTypes.string.isRequired,
-      CANONICAL: PropTypes.string.isRequired,
-      SUPPORT_EMAIL: PropTypes.string,
-      TITLE_SUFFIX: PropTypes.string
-    }),
-    SOCIAL: PropTypes.shape({
-      FACEBOOK: PropTypes.string,
-      INSTAGRAM: PropTypes.string,
-      YOUTUBE: PropTypes.string
-    }),
-    CONSTANTS: PropTypes.shape({})
-  }).isRequired,
-  /**
-   * Application context initial state
-   */
-  initialState: PropTypes.objectOf(PropTypes.string)
-};
-AppContextProvider.defaultProps = {
-  initialState: {}
-};
-export default AppContextProvider;

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

@@ -1,5 +0,0 @@
-/* @pareto-engineering/generator-front 0.2.3 */
-export { default as AppContext } from "./Context";
-export { default as AppContextProvider } from "./ContextProvider";
-export { default as useApp } from "./useApp";
-export { default as useTheme } from "./useTheme";

package/dist/es/a/AppContext/useApp.js

@@ -1,3 +0,0 @@
-import { useContext } from 'react';
-import Context from "./Context";
-export default () => useContext(Context);

package/dist/es/a/AppContext/useTheme.js

@@ -1,31 +0,0 @@
-import { useCallback, useState, useEffect } from 'react';
-export default (initialTheme, storageKey = 'theme') => {
-  const isClient = typeof window === 'object';
-  const [preferredTheme, setPreferredTheme] = useState(initialTheme);
-  const [userTheme, setUserTheme] = useState();
-  useEffect(() => {
-    const storage = window.localStorage;
-    if (isClient) {
-      const storedTheme = window.localStorage.getItem(storageKey);
-      if (storedTheme && storedTheme !== userTheme) {
-        setPreferredTheme(storedTheme);
-        setUserTheme(storedTheme);
-      } else if (preferredTheme && preferredTheme.length && preferredTheme !== 'system') {
-        setUserTheme(preferredTheme);
-        storage.setItem(storageKey, preferredTheme);
-      } else {
-        setUserTheme(window.matchMedia('(prefers-color-scheme:dark)').matches ? 'dark' : 'light');
-        storage.removeItem(storageKey);
-      }
-    } else {
-      setUserTheme('light');
-    }
-  }, [preferredTheme, isClient]);
-  const isTheme = useCallback(theme => userTheme === theme || undefined, [userTheme]);
-  return {
-    userTheme,
-    preferredTheme,
-    setPreferredTheme,
-    isTheme
-  };
-};

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,191 +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 } from "../../../utils";
-import { CustomLegend, CustomTooltipContent, YLabelsDropDown } from "../Common";
-import "./styles.scss";
-const baseClassName = styleNames.base;
-const componentClassName = 'area-chart';
-const AreaChart = ({
-  id,
-  className: userClassName,
-  data,
-  title,
-  xKey,
-  yKeys,
-  xLabel,
-  yLabel,
-  colors,
-  filled,
-  height,
-  width,
-  isTimeFormat,
-  dateFormat,
-  capitalizedLegend
-}) => {
-  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 [min - margin, max + margin];
-  };
-  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: 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 => formatDate(value, dateFormat)
-  }), /*#__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);
-      }
-      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))
-};
-AreaChart.defaultProps = {
-  filled: false,
-  width: '100%',
-  height: 300,
-  capitalizedLegend: false,
-  isTimeFormat: false,
-  dateFormat: DATE_FORMATS.HUMAN_READABLE
-};
-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,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} {
-  &.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;
-      }
-    }
-
-    /* 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/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;
-        }
-      }
-    }
-  }
-}