@pareto-engineering/design-system 5.2.1 → 5.4.0

package/src/ui/a/AppContext/ContextProvider.jsx

@@ -1,90 +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 (
-    <Context.Provider
-      value={{
-        state,
-        dispatch,
-        ...config,
-        ...theme,
-      }}
-    >
-      {children}
-    </Context.Provider>
-  )
-}
-
-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/src/ui/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/src/ui/a/AppContext/useApp.js

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

package/src/ui/a/AppContext/useTheme.js

@@ -1,43 +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/src/ui/a/BlurOverlay/BlurOverlay.jsx

@@ -1,69 +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,
-}) => (
-  <div
-    id={id}
-    className={[
-      baseClassName,
-      componentClassName,
-      userClassName,
-      blur && styleNames.modifierActive,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-  >
-    { children }
-  </div>
-)
-
-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/src/ui/a/BlurOverlay/index.js

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

package/src/ui/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/src/ui/a/Charts/AreaChart/AreaChart.jsx

@@ -1,242 +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 'ui/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 (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-    >
-      <div className="chart-header">
-        <h3>{title}</h3>
-        <YLabelsDropDown
-          allYLabels={allYLabels}
-          selectedYLabels={selectedYLabels}
-          setSelectedYLabels={setSelectedYLabels}
-        />
-      </div>
-      <CustomLegend
-        key={id}
-        colorsArray={colors}
-        yKeysArray={yKeys}
-        capitalizedLegend={capitalizedLegend}
-      />
-      <ResponsiveContainer width={width} height={height}>
-        <RechartsAreaChart data={data}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis
-            dataKey={xKey}
-            label={{ value: xLabel, position: 'insideBottom', offset: -5 }}
-            axisLine={false}
-            tickLine={false}
-            tickCount={3}
-            tickFormatter={(value) => formatDate(value, dateFormat)}
-          />
-          <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)
-            }}
-          />
-          <Tooltip content={(
-            <CustomTooltipContent
-              dateFormat={dateFormat}
-              isTimeFormat={isTimeFormat}
-            />
-          )}
-          />
-          {filled && (
-            <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) => (
-            <Area
-              id={key.label}
-              key={key.label}
-              type="linear"
-              dataKey={key.label}
-              stroke={key.color}
-              fill="none"
-              connectNulls
-              dot={false}
-              activeDot={{ r: 4 }}
-              isAnimationActive={false}
-            />
-          ))}
-        </RechartsAreaChart>
-      </ResponsiveContainer>
-    </div>
-  )
-}
-
-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/src/ui/a/Charts/AreaChart/index.js

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

package/src/ui/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/src/ui/a/Charts/BarChart/BarChart.jsx

@@ -1,168 +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 (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-    >
-      <div className="chart-header">
-        <h3>{title}</h3>
-        <YLabelsDropDown
-          allYLabels={allYLabels}
-          selectedYLabels={selectedYLabels}
-          setSelectedYLabels={setSelectedYLabels}
-        />
-      </div>
-      <CustomLegend
-        key={id}
-        colorsArray={selectedYLabels.map((item) => item.color)}
-        yKeysArray={selectedYLabels.map((item) => item.label)}
-        capitalizedLegend={capitalizedLegend}
-      />
-      <ResponsiveContainer width={width} height={height}>
-        <RechartsBarChart data={data}>
-          <CartesianGrid vertical={false} />
-          <XAxis
-            dataKey={xKey}
-            label={{ value: xLabel, position: 'insideBottom', offset: -5 }} // Adjusted offset for padding
-            axisLine={false}
-            tickLine={false}
-            tickCount={3}
-          />
-          <YAxis
-            label={{
-              value:yLabel, angle:-90, position:'insideLeft', offset:15,
-            }}
-            axisLine={false}
-            tickLine={false}
-          />
-          <Tooltip content={<CustomTooltipContent isTimeFormat={isTimeFormat} />} />
-          {selectedYLabels.map((key) => (
-            <Bar
-              stackId="a"
-              id={key.label}
-              key={key.label}
-              dataKey={key.label}
-              fill={key.color}
-            />
-          ))}
-        </RechartsBarChart>
-      </ResponsiveContainer>
-    </div>
-  )
-}
-
-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/src/ui/a/Charts/BarChart/index.js

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