@pareto-engineering/design-system 5.0.0 → 5.0.1

package/dist/cjs/g/FormBuilder/FormBuilder.js

@@ -40,8 +40,7 @@ const FormBuilder = _ref => {
     initialBuilderValues,
     fileUploadStatus,
     handleFileDelete,
-    taskData,
-    customInputMap
+    taskData
     // ...otherProps
   } = _ref;
   const formattedJson = JSON.stringify(taskData, null, 2);
@@ -57,8 +56,7 @@ const FormBuilder = _ref => {
     formBuilderId: formBuilderId,
     onSave: onBuilderFormSave,
     onError: onBuilderError,
-    validate: onBuilderValidate,
-    customInputMap: customInputMap
+    validate: onBuilderValidate
   }), mode === 'render' && /*#__PURE__*/React.createElement(_common.Renderer, {
     formData: formData,
     onSave: onRendererFormSave,
@@ -66,8 +64,7 @@ const FormBuilder = _ref => {
     shouldSubmit: shouldSubmit,
     fileUploadStatus: fileUploadStatus,
     handleFileDelete: handleFileDelete,
-    onFileUpload: onFileUpload,
-    customInputMap: customInputMap
+    onFileUpload: onFileUpload
   }));
 };
 FormBuilder.propTypes = {

package/dist/cjs/g/FormBuilder/common/Builder/Builder.js

@@ -42,7 +42,6 @@ const Builder = _ref => {
     onError,
     validate,
     formBuilderId,
-    customInputMap,
     initialValues = {}
     // ...otherProps
   } = _ref;
@@ -121,8 +120,7 @@ const Builder = _ref => {
           remove,
           values,
           setFieldValue
-        }),
-        customInputMap: customInputMap
+        })
       })), /*#__PURE__*/React.createElement("div", {
         className: "section-footer"
       }, /*#__PURE__*/React.createElement("button", {

package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js

@@ -36,8 +36,7 @@ const InputBuilder = _ref => {
     style,
     sectionIndex,
     inputIndex,
-    onDelete,
-    customInputMap
+    onDelete
     // ...otherProps
   } = _ref;
   const {
@@ -64,7 +63,6 @@ const InputBuilder = _ref => {
   const handleToggleShowSpecificFileTypes = () => {
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes);
   };
-  const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -104,10 +102,10 @@ const InputBuilder = _ref => {
     }, {
       value: 'file',
       label: 'File upload'
-    }, ...(customInputTypes && customInputTypes.map(customInputKey => ({
-      value: customInputKey,
-      label: customInputMap[customInputKey].label
-    })))]
+    }, {
+      value: 'latex-preview-input',
+      label: 'Textbox with LaTeX preview'
+    }]
   }), /*#__PURE__*/React.createElement("div", {
     className: "controls"
   }, /*#__PURE__*/React.createElement("button", {

package/dist/cjs/g/FormBuilder/common/Builder/common/Section/Section.js

@@ -33,8 +33,7 @@ const Section = _ref => {
     className: userClassName,
     style,
     index,
-    handleDeleteSection,
-    customInputMap
+    handleDeleteSection
     // ...otherProps
   } = _ref;
   const {
@@ -66,8 +65,7 @@ const Section = _ref => {
         sectionIndex: index,
         inputIndex: indx,
         onDelete: handleDeleteInput,
-        onCopy: handleCopyInput,
-        customInputMap: customInputMap
+        onCopy: handleCopyInput
       }),
       identifier: input.name
     }));

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

@@ -71,8 +71,7 @@ const Renderer = _ref => {
     fileUploadStatus,
     handleFileDelete,
     onFileUpload,
-    shouldUpdateInputStateInRealTime = true,
-    customInputMap
+    shouldUpdateInputStateInRealTime = true
     // ...otherProps
   } = _ref;
   const [currentSectionIndex, setCurrentSectionIndex] = (0, _react.useState)(0);
@@ -150,8 +149,7 @@ const Renderer = _ref => {
       fileUploadStatus: fileUploadStatus,
       handleFileDelete: handleFileDelete,
       onFileUpload: onFileUpload,
-      sectionIndex: sectionIndex,
-      customInputMap: customInputMap
+      sectionIndex: sectionIndex
     }))), /*#__PURE__*/React.createElement("div", {
       className: "navigator-container"
     }, updatedFormData.sections.length > 1 && /*#__PURE__*/React.createElement(_b.Button, {

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

@@ -39,11 +39,9 @@ const Section = _ref => {
     fileUploadStatus,
     handleFileDelete,
     onFileUpload,
-    sectionIndex,
-    customInputMap
+    sectionIndex
     // ...otherProps
   } = _ref;
-  const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
@@ -55,9 +53,7 @@ const Section = _ref => {
     name: "instructions"
   }), inputs?.map((input, inputIndex) => {
     const isFileInput = input.type === 'file';
-    const isCustomInput = customInputTypes.includes(input.type);
-    const CustomInputComponent = isCustomInput ? customInputMap[input.type].component : null;
-    return !isCustomInput ? /*#__PURE__*/React.createElement(_f.FormInput, _extends({
+    return /*#__PURE__*/React.createElement(_f.FormInput, _extends({
       key: input.name
     }, input, {
       disabled: readOnly
@@ -76,10 +72,6 @@ const Section = _ref => {
         }));
         onFileUpload(filesToUpload);
       }
-    })) : /*#__PURE__*/React.createElement(CustomInputComponent, _extends({
-      key: input.name
-    }, input, {
-      disabled: readOnly
     }));
   }));
 };

package/dist/cjs/utils/formatting.js

@@ -0,0 +1,111 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatTime = exports.formatDate = exports.DATE_FORMATS = void 0;
+const DATE_FORMATS = exports.DATE_FORMATS = {
+  HUMAN_READABLE: 'human_readable',
+  TIME: 'time',
+  DATETIME: 'datetime',
+  CHART_DATE: 'chart_date',
+  CHART_TIME: 'chart_time',
+  WEEKDAY_DATE: 'weekday_date',
+  DAY_VIEW: 'day_view'
+};
+const isValidDate = date => date instanceof Date && !Number.isNaN(date);
+const isTimeSliceFormat = input => {
+  const timeSliceRegex = /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/;
+  return timeSliceRegex.test(input);
+};
+const createTimeFromSlice = timeSlice => {
+  const [hours, minutes] = timeSlice.split(':').map(Number);
+  const date = new Date();
+  date.setHours(hours, minutes, 0, 0);
+  return date;
+};
+const format12Hour = date => {
+  const hour = date.getHours();
+  const ampm = hour >= 12 ? 'PM' : 'AM';
+  const hour12 = hour % 12 || 12;
+  return `${hour12} ${ampm}`;
+};
+const shouldShowYear = date => {
+  const currentYear = new Date().getFullYear();
+  return date.getFullYear() !== currentYear;
+};
+const formatTime = seconds => {
+  if (!seconds) return '0s';
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  const parts = [];
+  if (hours > 0) parts.push(`${hours}h`);
+  if (minutes > 0 || hours > 0 && remainingSeconds > 0) parts.push(`${minutes}m`);
+  if (remainingSeconds > 0) parts.push(`${remainingSeconds}s`);
+  return parts.join(' ');
+};
+exports.formatTime = formatTime;
+const parseDate = input => {
+  if (input instanceof Date) return input;
+  if (typeof input === 'number') return new Date(input);
+  if (typeof input === 'string') {
+    if (isTimeSliceFormat(input)) {
+      return createTimeFromSlice(input);
+    }
+    const parsed = new Date(input);
+    if (isValidDate(parsed)) return parsed;
+    const timestamp = parseInt(input, 10);
+    if (!Number.isNaN(timestamp)) {
+      const date = new Date(timestamp * 1000);
+      if (isValidDate(date)) return date;
+    }
+  }
+  return null;
+};
+const formatStrategies = {
+  [DATE_FORMATS.CHART_DATE]: date => {
+    const monthDay = date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      timeZone: 'UTC'
+    });
+    return shouldShowYear(date) ? `${monthDay} ${date.getFullYear()}` : monthDay;
+  },
+  [DATE_FORMATS.CHART_TIME]: date => format12Hour(date),
+  [DATE_FORMATS.HUMAN_READABLE]: date => date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    timeZone: 'UTC'
+  }),
+  default: date => date.toISOString()
+};
+const formatDate = function (input) {
+  let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DATE_FORMATS.HUMAN_READABLE;
+  try {
+    if (typeof input === 'string' && isTimeSliceFormat(input)) {
+      if (format === DATE_FORMATS.CHART_TIME || format === DATE_FORMATS.TIME) {
+        const date = createTimeFromSlice(input);
+        if (format === DATE_FORMATS.CHART_TIME) {
+          return format12Hour(date);
+        }
+        return date.toLocaleTimeString('en-US', {
+          hour: '2-digit',
+          minute: '2-digit',
+          timeZone: 'UTC'
+        });
+      }
+      return input;
+    }
+    const date = parseDate(input);
+    if (!date && (typeof input === 'string' || typeof input === 'number')) {
+      return input.toString();
+    }
+    const formatStrategy = formatStrategies[format] || formatStrategies.default;
+    return formatStrategy(date);
+  } catch (error) {
+    return 'Invalid Date';
+  }
+};
+exports.formatDate = formatDate;

package/dist/cjs/utils/index.js

@@ -3,6 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DATE_FORMATS", {
+  enumerable: true,
+  get: function () {
+    return _formatting.DATE_FORMATS;
+  }
+});
+Object.defineProperty(exports, "formatDate", {
+  enumerable: true,
+  get: function () {
+    return _formatting.formatDate;
+  }
+});
+Object.defineProperty(exports, "formatTime", {
+  enumerable: true,
+  get: function () {
+    return _formatting.formatTime;
+  }
+});
 Object.defineProperty(exports, "useDynamicPosition", {
   enumerable: true,
   get: function () {
@@ -21,4 +39,5 @@ Object.defineProperty(exports, "useWindowSize", {
     return _hooks.useWindowSize;
   }
 });
-var _hooks = require("./hooks");
+var _hooks = require("./hooks");
+var _formatting = require("./formatting");

package/dist/es/a/{AreaChart → Charts/AreaChart}/AreaChart.js

@@ -1,13 +1,11 @@
-// front/packages/design-system/src/ui/a/AreaChart/AreaChart.jsx
-
 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 "../../../utils";
+import { CustomLegend, CustomTooltipContent, YLabelsDropDown } from "../Common";
 import "./styles.scss";
-
-// Local Definitions
-
 const baseClassName = styleNames.base;
 const componentClassName = 'area-chart';
 const AreaChart = ({
@@ -22,9 +20,16 @@ const AreaChart = ({
   colors,
   filled,
   height,
-  width
-  // ...otherProps
+  width,
+  isTimeFormat,
+  dateFormat,
+  capitalizedLegend
 }) => {
+  const allYLabels = yKeys.map(key => ({
+    label: key,
+    color: colors[yKeys.indexOf(key)]
+  }));
+  const [selectedYLabels, setSelectedYLabels] = useState(allYLabels);
   const processedData = data.map(item => {
     const yValues = yKeys.map(key => item[key]);
     const lowerBound = Math.min(...yValues);
@@ -32,7 +37,8 @@ const AreaChart = ({
     const margin = (upperBound - lowerBound) * 0.1;
     return {
       ...item,
-      bounds: [lowerBound - margin, upperBound + margin]
+      bounds: [lowerBound - margin, upperBound + margin],
+      isTimeFormat
     };
   });
   const yAxisBounds = () => {
@@ -42,49 +48,19 @@ const AreaChart = ({
     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, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "chart-header"
+  }, /*#__PURE__*/React.createElement("h3", null, title), /*#__PURE__*/React.createElement(YLabelsDropDown, {
+    allYLabels: allYLabels,
+    selectedYLabels: selectedYLabels,
+    setSelectedYLabels: setSelectedYLabels
+  })), /*#__PURE__*/React.createElement(CustomLegend, {
     colorsArray: colors,
-    yKeysArray: yKeys
+    yKeysArray: yKeys,
+    capitalizedLegend: capitalizedLegend
   }), /*#__PURE__*/React.createElement(ResponsiveContainer, {
     width: width,
     height: height
@@ -101,7 +77,8 @@ const AreaChart = ({
     },
     axisLine: false,
     tickLine: false,
-    tickCount: 3
+    tickCount: 3,
+    tickFormatter: value => formatDate(value, dateFormat)
   }), /*#__PURE__*/React.createElement(YAxis, {
     domain: yAxisBounds,
     scale: "linear",
@@ -110,7 +87,7 @@ const AreaChart = ({
       value: yLabel,
       angle: -90,
       position: 'left',
-      offset: 1,
+      offset: -3,
       style: {
         textAnchor: 'middle'
       }
@@ -120,10 +97,17 @@ const AreaChart = ({
       bottom: 10
     },
     axisLine: false,
-    tickLine: true,
-    tickFormatter: value => value.toFixed(2)
+    tickLine: false,
+    tickFormatter: value => {
+      if (isTimeFormat) {
+        return formatTime(value);
+      }
+      return value.toFixed(2);
+    }
   }), /*#__PURE__*/React.createElement(Tooltip, {
-    content: /*#__PURE__*/React.createElement(CustomTooltipContent, null)
+    content: /*#__PURE__*/React.createElement(CustomTooltipContent, {
+      xLabel: xLabel
+    })
   }), filled && /*#__PURE__*/React.createElement(Area, {
     id: "bounds",
     type: "linear",
@@ -135,12 +119,12 @@ const AreaChart = ({
     dot: false,
     label: false,
     isAnimationActive: false
-  }), yKeys.map((key, index) => /*#__PURE__*/React.createElement(Area, {
-    id: key,
-    key: key,
+  }), selectedYLabels.map(key => /*#__PURE__*/React.createElement(Area, {
+    id: key.label,
+    key: key.label,
     type: "linear",
-    dataKey: key,
-    stroke: colors[index],
+    dataKey: key.label,
+    stroke: key.color,
     fill: "none",
     connectNulls: true,
     dot: false,
@@ -151,21 +135,66 @@ const AreaChart = ({
   })))));
 };
 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: 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
+  height: 300,
+  capitalizedLegend: false,
+  isTimeFormat: false,
+  dateFormat: DATE_FORMATS.HUMAN_READABLE
 };
 export default AreaChart;

package/dist/es/a/Charts/AreaChart/styles.scss

@@ -0,0 +1,48 @@
+@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;
+        }
+      }
+    }
+  }
+}