@pareto-engineering/design-system 4.9.2 → 4.10.0

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/b/Button/styles.scss

@@ -124,6 +124,7 @@ $default-animation-time: .31s;
   }
 
   &.#{bem.$modifier-simple} {
+    --stroke-color: var(--x, var(--#{$default-color}));
     background: transparent;
     border: 1px solid transparent;
     color: var(--x, var(--#{$default-color}));

package/src/ui/g/FormBuilder/FormBuilder.jsx

@@ -29,8 +29,8 @@ const FormBuilder = ({
   formBuilderId,
   onBuilderFormSave,
   onBuilderError,
-  onRendererError,
   onRendererFormSave,
+  onFileUpload,
   onBuilderValidate,
   initialBuilderValues,
   fileUploadStatus,
@@ -75,9 +75,9 @@ const FormBuilder = ({
           onSave={onRendererFormSave}
           readOnly={readOnly}
           shouldSubmit={shouldSubmit}
-          onError={onRendererError}
           fileUploadStatus={fileUploadStatus}
           handleFileDelete={handleFileDelete}
+          onFileUpload={onFileUpload}
         />
       )}
     </div>

package/src/ui/g/FormBuilder/common/Renderer/Renderer.jsx

@@ -1,7 +1,7 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react'
 
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 
 import { Formik, Form } from 'formik'
 
@@ -21,31 +21,6 @@ const baseClassName = styleNames.base
 
 const componentClassName = 'renderer'
 
-const reconstructFormDataWithValues = (formData, values) => {
-  const valuesMap = {}
-  Object.keys(values).forEach(async (key) => {
-    if (key.includes('files')) {
-      const files = values[key].map((file) => (
-        file instanceof File ? URL.createObjectURL(file) : file
-      ))
-      valuesMap[key] = files
-    } else {
-      valuesMap[key] = values[key]
-    }
-  })
-  const newData = {
-    ...formData,
-    sections:formData.sections.map((section) => ({
-      ...section,
-      inputs:section.inputs.map((input) => ({
-        ...input,
-        value:valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value,
-      })),
-    })),
-  }
-  return newData
-}
-
 const validate = (currentSectionIndex, formData, values) => {
   const errors = {}
 
@@ -68,6 +43,26 @@ const validate = (currentSectionIndex, formData, values) => {
   return errors
 }
 
+const reconstructFormDataWithValues = (formData, values) => {
+  const valuesMap = {}
+  Object.keys(values).forEach(async (key) => {
+    if (!key.includes('files')) {
+      valuesMap[key] = values[key]
+    }
+  })
+  const newData = {
+    ...formData,
+    sections:formData.sections.map((section) => ({
+      ...section,
+      inputs:section.inputs.map((input) => ({
+        ...input,
+        value:valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value,
+      })),
+    })),
+  }
+  return newData
+}
+
 /**
  * This is the component description.
  */
@@ -78,15 +73,16 @@ const Renderer = ({
   formData,
   readOnly,
   onSave,
-  onError,
   shouldSubmit,
   fileUploadStatus,
   handleFileDelete,
+  onFileUpload,
+  shouldUpdateInputStateInRealTime = true,
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
   const [sectionHistory, setSectionHistory] = useState([])
-  const [updatedFormData, setUpdatedFormData] = useState(formData)
+  const [updatedFormData, setUpdatedFormData] = useState({ ...formData })
 
   useEffect(() => {
     setUpdatedFormData(formData)
@@ -135,6 +131,13 @@ const Renderer = ({
   const isSubmit = currentSectionIndex === updatedFormData.sections.length - 1
   || updatedFormData.sections[currentSectionIndex].navigation.nextSection === 'submit'
 
+  const ref = useRef(null)
+
+  const currentSectionInputs = updatedFormData.sections[currentSectionIndex].inputs
+  const hasErrorsOnInitialRender = currentSectionInputs
+    .some((input) => (input.required && !ref.current?.values[input.name])
+    || ref.current?.errors[input.name])
+
   return (
     <div
       id={id}
@@ -151,21 +154,18 @@ const Renderer = ({
       <Formik
         initialValues={initialValues}
         onSubmit={handleSubmit}
-        validate={(values) => validate(currentSectionIndex, formData, values)}
+        validate={(values) => validate(currentSectionIndex, updatedFormData, values)}
+        innerRef={ref}
       >
         {({ values, errors }) => {
           useEffect(() => {
-            const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values)
-            setUpdatedFormData(formDataWithValues)
-            onSave?.(formDataWithValues)
+            if (shouldUpdateInputStateInRealTime) {
+              const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values)
+              onSave?.(formDataWithValues)
+            }
           }, [values])
 
-          useEffect(() => {
-            onError?.({ errors, values })
-          }, [errors, values])
-
           const hasErrors = Object.keys(errors).length > 0
-
           return (
             <Form>
               {updatedFormData.sections.map((section, sectionIndex) => (
@@ -174,9 +174,10 @@ const Renderer = ({
                   key={`${section.title}`}
                   {...section}
                   readOnly={readOnly}
-                  setUpdatedFormData={setUpdatedFormData}
                   fileUploadStatus={fileUploadStatus}
                   handleFileDelete={handleFileDelete}
+                  onFileUpload={onFileUpload}
+                  sectionIndex={sectionIndex}
                 />
                 )
               ))}
@@ -197,7 +198,7 @@ const Renderer = ({
                   )
                 }
                 {(!isSubmit || shouldSubmit) && (
-                  <Button color="interactive" isGradient type="submit" disabled={hasErrors}>
+                  <Button color="interactive" isGradient type="submit" disabled={hasErrors || hasErrorsOnInitialRender}>
                     {isSubmit ? 'Submit' : 'Next'}
                   </Button>
                 )}

package/src/ui/g/FormBuilder/common/Renderer/common/Section/Section.jsx

@@ -6,7 +6,7 @@ import PropTypes from 'prop-types'
 
 // Local Definitions
 
-import { FormInput } from 'ui/f'
+import { FormInput, getFileType } from 'ui/f'
 
 import { ExpandableLexicalPreview } from 'ui/g'
 
@@ -16,6 +16,15 @@ const baseClassName = styleNames.base
 
 const componentClassName = 'section'
 
+const fileTypeMapper = {
+  VID :'Video',
+  TXT :'Text',
+  IMG :'Image',
+  PDF :'PDF',
+  AUD :'Audio',
+  FILE:'Generic',
+}
+
 /**
  * This is the component description.
  */
@@ -29,6 +38,8 @@ const Section = ({
   readOnly,
   fileUploadStatus,
   handleFileDelete,
+  onFileUpload,
+  sectionIndex,
   // ...otherProps
 }) => (
   <div
@@ -49,15 +60,35 @@ const Section = ({
       nodes={description}
       name="instructions"
     />
-    {inputs?.map((input) => (
-      <FormInput
-        key={input.name}
-        {...input}
-        disabled={readOnly}
-        uploadStatus={fileUploadStatus}
-        handleFileDelete={handleFileDelete}
-      />
-    ))}
+    {inputs?.map((input, inputIndex) => {
+      const isFileInput = input.type === 'file'
+      return (
+        <FormInput
+          key={input.name}
+          {...input}
+          disabled={readOnly}
+          {...(isFileInput && {
+            uploadStatus:fileUploadStatus,
+            handleFileDelete,
+            onChange    :(files) => {
+              const filesToUpload = files
+                ?.filter((file) => file instanceof File)
+                .map((file) => ({
+                  file,
+                  name    :file.name,
+                  mimeType:file.type,
+                  type    :fileTypeMapper[getFileType(file)] || 'Generic',
+                  title   :file.name,
+                  sectionIndex,
+                  inputIndex,
+                }))
+
+              onFileUpload(filesToUpload)
+            },
+          })}
+        />
+      )
+    })}
   </div>
 )