@pareto-engineering/design-system 5.0.0 → 5.0.1

package/dist/es/f/fields/LatexPreviewInput/LatexPreviewInput.js

@@ -0,0 +1,70 @@
+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.0.12 */
+import * as React from 'react';
+import { memo, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import styleNames from '@pareto-engineering/bem/exports';
+import { useFormikContext } from 'formik';
+import convertLatexToHtml from "./convertLatexToHtml";
+import { TextareaInput } from "../TextareaInput";
+import "./styles.scss";
+
+// Local Definitions
+
+const baseClassName = styleNames.base;
+const componentClassName = 'latex-preview-input';
+
+/**
+ * This is the component description.
+ */
+const LatexPreviewInput = ({
+  id,
+  className,
+  userClassName,
+  disabled,
+  style,
+  ...otherProps
+}) => {
+  const {
+    name
+  } = otherProps;
+  const {
+    values
+  } = useFormikContext();
+  const LatexPreview = useMemo(() => convertLatexToHtml(values[name]), [values[name]]);
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, 'form-input'].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(TextareaInput, _extends({
+    className: "preview-child",
+    disabled: disabled
+  }, otherProps)), /*#__PURE__*/React.createElement("div", {
+    className: "latex-container preview-child",
+    dangerouslySetInnerHTML: {
+      __html: LatexPreview
+    }
+  }));
+};
+LatexPreviewInput.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),
+  /**
+   * Whether the Form input input should be disabled
+   */
+  disabled: PropTypes.bool
+};
+LatexPreviewInput.defaultProps = {
+  disabled: false
+};
+export default /*#__PURE__*/memo(LatexPreviewInput);

package/dist/es/f/fields/LatexPreviewInput/convertLatexToHtml.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import ReactMarkdown from 'react-markdown';
+import RemarkMathPlugin from 'remark-math';
+import { MathJax, MathJaxContext } from 'better-react-mathjax';
+import rehypeMathjax from 'rehype-mathjax/svg';
+import ReactDOMServer from 'react-dom/server';
+const convertLatexToHtml = content => {
+  if (content.includes('https://forte-assets.pareto.ai/')) {
+    return content;
+  }
+  const processedContent = content.replaceAll(/\\\\/g, '\n\n');
+  const renderedContent = ReactDOMServer.renderToString(/*#__PURE__*/React.createElement(MathJaxContext, null, /*#__PURE__*/React.createElement(ReactMarkdown, {
+    remarkPlugins: [RemarkMathPlugin],
+    rehypePlugins: [rehypeMathjax],
+    components: {
+      math: ({
+        value
+      }) => /*#__PURE__*/React.createElement(MathJax.Node, {
+        formula: value
+      }),
+      inlineMath: ({
+        value
+      }) => /*#__PURE__*/React.createElement(MathJax.Node, {
+        inline: true,
+        formula: value
+      })
+    }
+  }, processedContent)));
+  return renderedContent;
+};
+export default convertLatexToHtml;

package/dist/es/f/fields/LatexPreviewInput/index.js

@@ -0,0 +1,3 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+export { default as LatexPreviewInput } from "./LatexPreviewInput";
+export { default as convertLatexToHtml } from "./convertLatexToHtml";

package/dist/es/f/fields/LatexPreviewInput/styles.scss

@@ -0,0 +1,24 @@
+/* @pareto-engineering/generator-front 1.0.12 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1em;
+
+.#{bem.$base}.latex-preview-input {
+  display: flex;
+  flex-direction: row;
+  gap: $default-margin;
+
+  > .preview-child {
+    flex: 1;
+  }
+
+  > .latex-container {
+    border: 1px solid var(--ui-lines);
+    border-radius: var(--theme-default-border-radius);
+    margin-top: calc($default-margin * 2.5);
+    max-width: 50%;
+    overflow: auto;
+    padding: 0 $default-margin;
+  }
+}

package/dist/es/f/fields/index.js

@@ -9,4 +9,5 @@ export { Checkbox } from "./Checkbox";
 export { QueryChoices } from "./QueryChoices";
 export { LinkInput } from "./LinkInput";
 export { EditorInput } from "./EditorInput";
+export { LatexPreviewInput, convertLatexToHtml } from "./LatexPreviewInput";
 export { FileUpload, fileUploadOptions, getFileType, getFileTypeFromUrl } from "./FileUpload";

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

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

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

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

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

@@ -26,8 +26,7 @@ const InputBuilder = ({
   style,
   sectionIndex,
   inputIndex,
-  onDelete,
-  customInputMap
+  onDelete
   // ...otherProps
 }) => {
   const {
@@ -54,7 +53,6 @@ const InputBuilder = ({
   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(' '),
@@ -94,10 +92,10 @@ const InputBuilder = ({
     }, {
       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/es/g/FormBuilder/common/Builder/common/Section/Section.js

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

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

@@ -65,8 +65,7 @@ const Renderer = ({
   fileUploadStatus,
   handleFileDelete,
   onFileUpload,
-  shouldUpdateInputStateInRealTime = true,
-  customInputMap
+  shouldUpdateInputStateInRealTime = true
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0);
@@ -143,8 +142,7 @@ const Renderer = ({
       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(Button, {

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

@@ -34,50 +34,40 @@ const Section = ({
   fileUploadStatus,
   handleFileDelete,
   onFileUpload,
-  sectionIndex,
-  customInputMap
+  sectionIndex
   // ...otherProps
-}) => {
-  const customInputTypes = customInputMap ? Object.keys(customInputMap) : [];
-  return /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "h3"
-  }, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
-    nodes: description,
-    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(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);
-      }
-    })) : /*#__PURE__*/React.createElement(CustomInputComponent, _extends({
-      key: input.name
-    }, input, {
-      disabled: readOnly
-    }));
+}) => /*#__PURE__*/React.createElement("div", {
+  id: id,
+  className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
+  style: style
+}, /*#__PURE__*/React.createElement("p", {
+  className: "h3"
+}, title), /*#__PURE__*/React.createElement(ExpandableLexicalPreview, {
+  nodes: description,
+  name: "instructions"
+}), 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/dist/es/utils/formatting.js

@@ -0,0 +1,102 @@
+export const 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;
+};
+export 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(' ');
+};
+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()
+};
+export const formatDate = (input, format = 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';
+  }
+};

package/dist/es/utils/index.js

@@ -1 +1,2 @@
-export { useWindowSize, useDynamicPosition, useOutsideClick } from "./hooks";
+export { useWindowSize, useDynamicPosition, useOutsideClick } from "./hooks";
+export { formatTime, formatDate, DATE_FORMATS } from "./formatting";

package/jest.config.js

@@ -10,6 +10,9 @@ module.exports = {
   moduleNameMapper:{
     '^.+\\.(css|scss)$'                :'<rootDir>/tests/staticStub.js',
     '^.+\\.(mdx)$'                     :'<rootDir>/tests/staticStub.js',
+    'react-markdown'                   :'<rootDir>/tests/emptyMock.js',
+    'remark-math'                      :'<rootDir>/tests/emptyMock.js',
+    'rehype-mathjax'                   :'<rootDir>/tests/emptyMock.js',
     // https://jestjs.io/docs/webpack#mocking-css-modules
     '^@pareto-engineering/bem$'        :'identity-obj-proxy',
     '^@pareto-engineering/bem/exports$':'identity-obj-proxy',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",
@@ -63,6 +63,7 @@
     "@pareto-engineering/bem": "^5.0.0",
     "@pareto-engineering/styles": "^5.0.0",
     "@pareto-engineering/utils": "^5.0.0",
+    "better-react-mathjax": "^2.0.3",
     "codemirror": "^6.0.1",
     "date-fns": "^2.29.3",
     "downshift": "^6.1.12",
@@ -77,11 +78,14 @@
     "react-day-picker": "^8.10.0",
     "react-dom": "^18.2.0",
     "react-helmet-async": "^1.3.0",
+    "react-markdown": "^9.0.1",
     "react-relay": "^15.0.0",
     "react-router-dom": "^5.3.4",
     "recharts": "^2.13.3",
-    "relay-test-utils": "^15.0.0"
+    "rehype-mathjax": "^6.0.0",
+    "relay-test-utils": "^15.0.0",
+    "remark-math": "^6.0.0"
   },
   "browserslist": "> 2%",
-  "gitHead": "6892e855aadac7d1c0e4a8f00570e644ba9cfb55"
+  "gitHead": "874a3dc9198810523c6fe0edbaf72f43ddd6612d"
 }

package/src/stories/a/BarChart.stories.jsx

@@ -0,0 +1,89 @@
+// front/packages/design-system/src/ui/a/BarChart/BarChart.stories.jsx
+
+import React from 'react'
+import { BarChart } from 'ui'
+
+export default {
+  title    :'a/BarChart',
+  component:BarChart,
+}
+
+const data = [
+  {
+    date:'Jan', pendingReview:200, accepted:150, rejected:100, toRevise:250, revised:50,
+  },
+  {
+    date:'Feb', pendingReview:180, accepted:160, rejected:120, toRevise:240, revised:60,
+  },
+  {
+    date:'Mar', pendingReview:220, accepted:140, rejected:110, toRevise:230, revised:70,
+  },
+  {
+    date:'Apr', pendingReview:210, accepted:130, rejected:130, toRevise:220, revised:80,
+  },
+  {
+    date:'May', pendingReview:230, accepted:120, rejected:140, toRevise:210, revised:90,
+  },
+  {
+    date:'Jun', pendingReview:240, accepted:110, rejected:150, toRevise:200, revised:100,
+  },
+  {
+    date:'Jul', pendingReview:250, accepted:100, rejected:160, toRevise:190, revised:110,
+  },
+  {
+    date:'Aug', pendingReview:260, accepted:90, rejected:170, toRevise:180, revised:120,
+  },
+  {
+    date:'Sep', pendingReview:270, accepted:80, rejected:180, toRevise:170, revised:130,
+  },
+  {
+    date:'Oct', pendingReview:280, accepted:70, rejected:190, toRevise:160, revised:140,
+  },
+  {
+    date:'Nov', pendingReview:290, accepted:60, rejected:200, toRevise:150, revised:150,
+  },
+  {
+    date:'Dec', pendingReview:300, accepted:50, rejected:210, toRevise:140, revised:160,
+  },
+]
+
+const Template = (args) => (
+  <div style={{ height: '100%', width: '100%' }}>
+    <BarChart {...args} />
+  </div>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  data,
+  title :'Throughput',
+  xKey  :'date',
+  yKeys :['pendingReview', 'accepted', 'rejected', 'toRevise', 'revised'],
+  xLabel:'Date',
+  yLabel:'Submissions',
+  colors:['purple', 'green', 'orange', 'blue', 'red'],
+  height:400,
+}
+
+const TemplateSideBySide = (args) => (
+  <div style={{ display: 'flex', gap: '20px' }}>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <BarChart {...args[0]} />
+    </div>
+    <div style={{ flex: 1 }}>
+      {/* eslint-disable-next-line react/destructuring-assignment */}
+      <BarChart {...args[1]} />
+    </div>
+  </div>
+)
+
+export const SideBySide = TemplateSideBySide.bind({})
+SideBySide.args = [
+  {
+    ...Default.args,
+  },
+  {
+    ...Default.args,
+  },
+]