@pareto-engineering/design-system 4.9.2 → 4.10.0

package/dist/es/a/AreaChart/AreaChart.js

@@ -0,0 +1,163 @@
+// 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 /*#__PURE__*/React.createElement("div", {
+        className: "custom-tooltip"
+      }, /*#__PURE__*/React.createElement("p", {
+        className: "label"
+      }, `${xLabel}: ${label}`), newPayload.map(entry => /*#__PURE__*/React.createElement("p", {
+        className: "label",
+        key: `${entry.name}`,
+        style: {
+          color: entry.color
+        }
+      }, `${entry.name}: ${entry.value}`)));
+    }
+    return null;
+  };
+  const CustomLegend = ({
+    colorsArray,
+    yKeysArray
+  }) => /*#__PURE__*/React.createElement("div", {
+    className: "custom-legend"
+  }, yKeysArray.map((key, index) => /*#__PURE__*/React.createElement("div", {
+    key: key,
+    className: "item"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "line",
+    style: {
+      backgroundColor: colorsArray[index]
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "text"
+  }, key))));
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' ')
+  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(CustomLegend, {
+    colorsArray: colors,
+    yKeysArray: yKeys
+  }), /*#__PURE__*/React.createElement(ResponsiveContainer, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(RechartsAreaChart, {
+    data: processedData
+  }, /*#__PURE__*/React.createElement(CartesianGrid, {
+    strokeDasharray: "3 3"
+  }), /*#__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, {
+    domain: yAxisBounds,
+    label: {
+      value: yLabel,
+      angle: -90,
+      position: 'insideLeft',
+      offset: 15
+    },
+    axisLine: false,
+    tickLine: false,
+    tickFormatter: value => value.toFixed(2)
+  }), /*#__PURE__*/React.createElement(Tooltip, {
+    content: /*#__PURE__*/React.createElement(CustomTooltipContent, null)
+  }), 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
+  }), yKeys.map((key, index) => /*#__PURE__*/React.createElement(Area, {
+    id: key,
+    key: key,
+    type: "linear",
+    dataKey: key,
+    stroke: colors[index],
+    fill: "none",
+    connectNulls: true,
+    dot: false,
+    activeDot: {
+      r: 4
+    },
+    isAnimationActive: false
+  })))));
+};
+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/dist/es/a/AreaChart/index.js

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

package/dist/es/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/dist/es/a/XMLEditor/XMLEditor.js

@@ -4,7 +4,7 @@ import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { EditorState } from '@codemirror/state';
 import { EditorView, keymap, lineNumbers, drawSelection, dropCursor, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, crosshairCursor, rectangularSelection } from '@codemirror/view';
-import { defaultKeymap, indentWithTab } from '@codemirror/commands';
+import { defaultKeymap, indentWithTab, history, historyKeymap } from '@codemirror/commands';
 import { indentOnInput, bracketMatching, foldGutter } from '@codemirror/language';
 import { xml } from '@codemirror/lang-xml';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -33,7 +33,7 @@ const XMLEditor = ({
   useEffect(() => {
     const startState = EditorState.create({
       doc: config,
-      extensions: [keymap.of([defaultKeymap, indentWithTab]), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
+      extensions: [keymap.of([defaultKeymap, indentWithTab, ...historyKeymap]), indentOnInput(), lineNumbers(), bracketMatching(), foldGutter(), drawSelection(), highlightActiveLine(), highlightActiveLineGutter(), highlightSpecialChars(), dropCursor(), rectangularSelection(), crosshairCursor(), xml(), history(), theme, EditorState.readOnly.of(readOnly), EditorView.updateListener.of(view => {
         onChange(view);
         // view.state.doc.toString() to receive the current content in the editor.
       }), EditorView.focusChangeEffect.of((state, focused) => {

package/dist/es/a/index.js

@@ -27,4 +27,5 @@ export { Removable } from "./Removable";
 export { ToggleSwitch } from "./ToggleSwitch";
 export { XMLEditor } from "./XMLEditor";
 export { DatePicker } from "./DatePicker";
-export { Tooltip } from "./Tooltip";
+export { Tooltip } from "./Tooltip";
+export { AreaChart } from "./AreaChart";

package/dist/es/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/dist/es/g/FormBuilder/FormBuilder.js

@@ -24,8 +24,8 @@ const FormBuilder = ({
   formBuilderId,
   onBuilderFormSave,
   onBuilderError,
-  onRendererError,
   onRendererFormSave,
+  onFileUpload,
   onBuilderValidate,
   initialBuilderValues,
   fileUploadStatus,
@@ -52,9 +52,9 @@ const FormBuilder = ({
     onSave: onRendererFormSave,
     readOnly: readOnly,
     shouldSubmit: shouldSubmit,
-    onError: onRendererError,
     fileUploadStatus: fileUploadStatus,
-    handleFileDelete: handleFileDelete
+    handleFileDelete: handleFileDelete,
+    onFileUpload: onFileUpload
   }));
 };
 FormBuilder.propTypes = {

package/dist/es/g/FormBuilder/common/Renderer/Renderer.js

@@ -1,7 +1,7 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /* @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';
 import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem/exports';
@@ -13,28 +13,6 @@ import "./styles.scss";
 import { Section } from "./common";
 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 = {};
   const hasAtLeastOneValue = Object.keys(values).some(valueKey => {
@@ -53,6 +31,25 @@ 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.
@@ -64,15 +61,18 @@ const Renderer = ({
   formData,
   readOnly,
   onSave,
-  onError,
   shouldSubmit,
   fileUploadStatus,
-  handleFileDelete
+  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);
   }, [formData]);
@@ -112,6 +112,9 @@ 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 /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -119,30 +122,27 @@ const Renderer = ({
   }, /*#__PURE__*/React.createElement(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 /*#__PURE__*/React.createElement(Form, null, updatedFormData.sections.map((section, sectionIndex) => sectionIndex === currentSectionIndex && /*#__PURE__*/React.createElement(Section, _extends({
       key: `${section.title}`
     }, section, {
       readOnly: readOnly,
-      setUpdatedFormData: setUpdatedFormData,
       fileUploadStatus: fileUploadStatus,
-      handleFileDelete: handleFileDelete
+      handleFileDelete: handleFileDelete,
+      onFileUpload: onFileUpload,
+      sectionIndex: sectionIndex
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(Button, {
@@ -157,7 +157,7 @@ const Renderer = ({
       color: "interactive",
       isGradient: true,
       type: "submit",
-      disabled: hasErrors
+      disabled: hasErrors || hasErrorsOnInitialRender
     }, isSubmit ? 'Submit' : 'Next')));
   }));
 };

package/dist/es/g/FormBuilder/common/Renderer/common/Section/Section.js

@@ -6,11 +6,19 @@ import PropTypes from 'prop-types';
 
 // Local Definitions
 
-import { FormInput } from "../../../../../../f";
+import { FormInput, getFileType } from "../../../../../../f";
 import { ExpandableLexicalPreview } from "../../../../..";
 import styleNames from '@pareto-engineering/bem/exports';
 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.
@@ -24,7 +32,9 @@ const Section = ({
   inputs,
   readOnly,
   fileUploadStatus,
-  handleFileDelete
+  handleFileDelete,
+  onFileUpload,
+  sectionIndex
   // ...otherProps
 }) => /*#__PURE__*/React.createElement("div", {
   id: id,
@@ -35,13 +45,29 @@ const Section = ({
 }, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
   nodes: description,
   name: "instructions"
-}), inputs?.map(input => /*#__PURE__*/React.createElement(FormInput, _extends({
-  key: input.name
-}, input, {
-  disabled: readOnly,
-  uploadStatus: fileUploadStatus,
-  handleFileDelete: handleFileDelete
-}))));
+}), inputs?.map((input, inputIndex) => {
+  const isFileInput = input.type === 'file';
+  return /*#__PURE__*/React.createElement(FormInput, _extends({
+    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);
+    }
+  }));
+}));
 Section.propTypes = {
   /**
    * The HTML id for this element

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "4.9.2",
+  "version": "4.10.0",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -59,7 +59,7 @@
     "@lexical/selection": "0.12.2",
     "@lexical/table": "0.12.2",
     "@lexical/utils": "0.12.2",
-    "@pareto-engineering/assets": "^4.9.0",
+    "@pareto-engineering/assets": "^4.9.3",
     "@pareto-engineering/bem": "^4.8.1",
     "@pareto-engineering/styles": "^4.2.0",
     "@pareto-engineering/utils": "^4.0.0",
@@ -79,8 +79,9 @@
     "react-helmet-async": "^1.3.0",
     "react-relay": "^15.0.0",
     "react-router-dom": "^5.3.4",
+    "recharts": "^2.13.3",
     "relay-test-utils": "^15.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "d7034652bbfb7fa7362d9cedaa04ae23fc8323ad"
+  "gitHead": "a7230fcb13b180d33c831ed413f8fc039e95fc89"
 }

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',
+  },
+]