@pareto-engineering/design-system 4.9.1 → 4.9.3

package/src/stories/a/AreaChart.stories.jsx

@@ -0,0 +1,118 @@
+// front/packages/design-system/src/ui/a/AreaChart/AreaChart.stories.jsx
+
+import React from 'react'
+import { AreaChart } from 'ui'
+
+export default {
+  title    :'a/AreaChart',
+  component:AreaChart,
+}
+
+const data = [
+  {
+    date:'2023-01-01', Average:0.49, Best:0.50, Worst:0.48,
+  },
+  {
+    date:'2023-01-02', Average:0.48, Best:0.49, Worst:0.47,
+  },
+  {
+    date:'2023-01-03', Average:0.47, Best:0.48, Worst:0.46,
+  },
+  {
+    date:'2023-01-04', Average:0.50, Best:0.51, Worst:0.49,
+  },
+  {
+    date:'2023-01-05', Average:0.52, Best:0.53, Worst:0.51,
+  },
+  {
+    date:'2023-01-06', Average:0.51, Best:0.52, Worst:0.50,
+  },
+  {
+    date:'2023-01-07', Average:0.49, Best:0.50, Worst:0.48,
+  },
+]
+
+const data2 = [
+  {
+    date:'2023-01-01', Average:0.60, Best:0.62, Worst:0.58,
+  },
+  {
+    date:'2023-01-02', Average:0.59, Best:0.61, Worst:0.57,
+  },
+  {
+    date:'2023-01-03', Average:0.58, Best:0.60, Worst:0.56,
+  },
+  {
+    date:'2023-01-04', Average:0.61, Best:0.63, Worst:0.59,
+  },
+  {
+    date:'2023-01-05', Average:0.63, Best:0.65, Worst:0.61,
+  },
+  {
+    date:'2023-01-06', Average:0.62, Best:0.64, Worst:0.60,
+  },
+  {
+    date:'2023-01-07', Average:0.60, Best:0.62, Worst:0.58,
+  },
+]
+
+const Template = (args) => (
+  <div style={{ height: '100%', width: '100%' }}>
+    <AreaChart {...args} />
+  </div>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  data,
+  title :'Approval rate over time',
+  xKey  :'date',
+  yKeys :['Average', 'Best', 'Worst'],
+  xLabel:'Date',
+  yLabel:'Approval rate',
+  colors:['purple', 'green', 'orange'],
+  height:400,
+}
+
+export const Filled = Template.bind({})
+Filled.args = {
+  ...Default.args,
+  filled:true,
+}
+
+const TemplateSideBySide = (args) => (
+  <div style={{ display: 'flex', gap: '20px' }}>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <AreaChart {...args[0]} />
+    </div>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <AreaChart {...args[1]} />
+    </div>
+  </div>
+)
+
+export const SideBySide = TemplateSideBySide.bind({})
+SideBySide.args = [
+  {
+    ...Default.args,
+  },
+  {
+    ...Default.args,
+    title:'Submission rate over time',
+    data :data2,
+  },
+]
+
+export const SideBySideFilled = TemplateSideBySide.bind({})
+SideBySideFilled.args = [
+  {
+    ...Filled.args,
+  },
+  {
+    ...Filled.args,
+    data :data2,
+    title:'Submission rate over time',
+  },
+]

package/src/ui/a/AreaChart/AreaChart.jsx

@@ -0,0 +1,185 @@
+// front/packages/design-system/src/ui/a/AreaChart/AreaChart.jsx
+
+import * as React 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 './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'area-chart'
+
+const AreaChart = ({
+  id,
+  className: userClassName,
+  data,
+  title,
+  xKey,
+  yKeys,
+  xLabel,
+  yLabel,
+  colors,
+  filled,
+  height,
+  width,
+  // ...otherProps
+}) => {
+  const processedData = data.map((item) => {
+    const yValues = yKeys.map((key) => item[key])
+    const lowerBound = Math.min(...yValues)
+    const upperBound = Math.max(...yValues)
+    const margin = (upperBound - lowerBound) * 0.1
+    return {
+      ...item,
+      bounds:[lowerBound - margin, upperBound + margin],
+    }
+  })
+
+  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]
+  }
+
+  const CustomTooltipContent = ({ active, payload, label }) => {
+    if (active && payload && payload.length) {
+      const newPayload = payload.filter((item) => item.name !== 'bounds')
+      return (
+        <div className="custom-tooltip">
+          <p className="label">{`${xLabel}: ${label}`}</p>
+          {newPayload.map((entry) => (
+            <p className="label" key={`${entry.name}`} style={{ color: entry.color }}>
+              {`${entry.name}: ${entry.value}`}
+            </p>
+          ))}
+        </div>
+      )
+    }
+    return null
+  }
+
+  const CustomLegend = ({ colorsArray, yKeysArray }) => (
+    <div className="custom-legend">
+      {yKeysArray.map((key, index) => (
+        <div key={key} className="item">
+          <span
+            className="line"
+            style={{ backgroundColor: colorsArray[index] }}
+          />
+          <span className="text">{key}</span>
+        </div>
+      ))}
+    </div>
+  )
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      <h3>{title}</h3>
+      <CustomLegend colorsArray={colors} yKeysArray={yKeys} />
+      <ResponsiveContainer width={width} height={height}>
+        <RechartsAreaChart data={processedData}>
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis
+            dataKey={xKey}
+            label={{ value: xLabel, position: 'insideBottom', offset: -5 }} // Adjusted offset for padding
+            axisLine={false}
+            tickLine={false}
+            tickCount={3}
+          />
+          <YAxis
+            domain={yAxisBounds}
+            label={{
+              value:yLabel, angle:-90, position:'insideLeft', offset:15,
+            }}
+            axisLine={false}
+            tickLine={false}
+            tickFormatter={(value) => value.toFixed(2)}
+          />
+          <Tooltip content={<CustomTooltipContent />} />
+          {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}
+            />
+          )}
+          {yKeys.map((key, index) => (
+            <Area
+              id={key}
+              key={key}
+              type="linear"
+              dataKey={key}
+              stroke={colors[index]}
+              fill="none"
+              connectNulls
+              dot={false}
+              activeDot={{ r: 4 }}
+              isAnimationActive={false}
+            />
+          ))}
+        </RechartsAreaChart>
+      </ResponsiveContainer>
+    </div>
+  )
+}
+
+AreaChart.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  data  :PropTypes.arrayOf(PropTypes.object).isRequired,
+  title :PropTypes.string.isRequired,
+  xKey  :PropTypes.string.isRequired,
+  yKeys :PropTypes.arrayOf(PropTypes.string).isRequired,
+  xLabel:PropTypes.string,
+  yLabel:PropTypes.string,
+  colors:PropTypes.arrayOf(PropTypes.string).isRequired,
+  filled:PropTypes.bool,
+  height:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+  width:PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+  ]),
+}
+
+AreaChart.defaultProps = {
+  filled:false,
+  width :'100%',
+  height:300,
+}
+
+export default AreaChart

package/src/ui/a/AreaChart/index.js

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

package/src/ui/a/AreaChart/styles.scss

@@ -0,0 +1,89 @@
+@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);
+$default-border-radius: .25rem;
+$default-legend-gap: .625rem;
+$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
+$default-legend-line-width: 1.25rem;
+$default-legend-line-height: .125rem;
+$default-legend-line-margin-right: .3125rem;
+$default-border-line-width: .0625rem;
+
+.#{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;
+
+    h3 {
+      color: var(--subtitle);
+      margin: calc($default-margin / 5);
+      text-align: left;
+    }
+
+    .custom-legend {
+      display: flex;
+      gap: $default-legend-gap;
+      justify-content: flex-end;
+      padding-bottom: $default-padding;
+      padding-right: calc($default-padding * .25);
+
+      .item {
+        align-items: center;
+        border: $default-border-line-width solid var(--ui-lines);
+        border-radius: $default-border-radius;
+        display: flex;
+        padding: $default-legend-padding;
+      }
+
+      .line {
+        display: inline-block;
+        height: $default-legend-line-height;
+        margin-right: $default-legend-line-margin-right;
+        width: $default-legend-line-width;
+      }
+
+      .text {
+        color: var(--paragraph);
+        font-size: calc($default-text-font-size * .75);
+      }
+    }
+
+    .custom-tooltip {
+      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);
+      }
+    }
+
+    /* 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/XMLEditor/XMLEditor.jsx

@@ -23,6 +23,8 @@ import {
 import {
   defaultKeymap,
   indentWithTab,
+  history,
+  historyKeymap,
 } from '@codemirror/commands'
 
 import {
@@ -65,7 +67,7 @@ const XMLEditor = ({
     const startState = EditorState.create({
       doc       :config,
       extensions:[
-        keymap.of([defaultKeymap, indentWithTab]),
+        keymap.of([defaultKeymap, indentWithTab, ...historyKeymap]),
         indentOnInput(),
         lineNumbers(),
         bracketMatching(),
@@ -78,6 +80,7 @@ const XMLEditor = ({
         rectangularSelection(),
         crosshairCursor(),
         xml(),
+        history(),
         theme,
         EditorState.readOnly.of(readOnly),
         EditorView.updateListener.of((view) => {

package/src/ui/a/index.js

@@ -30,3 +30,4 @@ export { ToggleSwitch } from './ToggleSwitch'
 export { XMLEditor } from './XMLEditor'
 export { DatePicker } from './DatePicker'
 export { Tooltip } from './Tooltip'
+export { AreaChart } from './AreaChart'

package/src/ui/f/fields/FileUpload/FileUpload.jsx

@@ -98,6 +98,8 @@ const FileUpload = ({
 
   const acceptOptions = Array.isArray(accept) ? accept?.join(',') : accept
 
+  const isAnyFileUploading = Object.values(uploadStatus ?? {})?.map((e) => e?.status)?.some((status) => status === 'pending')
+
   return (
     <div
       id={id}
@@ -128,7 +130,7 @@ const FileUpload = ({
             type="file"
             accept={acceptOptions}
             multiple={multiple || (maxCount && maxCount > 0)}
-            disabled={disabled}
+            disabled={disabled || isAnyFileUploading}
             onChange={handleChange}
           />
           <span className="ai-icon">
@@ -270,6 +272,7 @@ FileUpload.defaultProps = {
   color               :'paragraph',
   filePreviewAlignment:'bottom',
   viewOnly            :false,
+  multiple            :true,
 }
 
 FileUpload.Preview = Preview