@pareto-engineering/design-system 5.3.0 → 5.5.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,306 +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 'ui/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 (
-    <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>
-
-      {isWorkerSubmissionChart && (
-      <div className="worker-submissions-total-percentage-container">
-        <p className="total-submissions-text">{totalSubmissions}</p>
-        <ThroughPutIndicator data={data} keyName="reserved" />
-      </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) => {
-              if (showOnlyDate) {
-                return formatDate(value, dateFormat)
-              }
-              return formatDate(value, DATE_FORMATS.HUMAN_READABLE_WITH_TIME)
-            }}
-          />
-          <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)
-            }}
-          />
-          <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)),
-
-  /**
-   * 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/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,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);
-  }
-}