@pareto-engineering/design-system 5.0.0 → 5.0.2

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

@@ -0,0 +1,91 @@
+/* @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 (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        'form-input',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <TextareaInput
+        className="preview-child"
+        disabled={disabled}
+        {...otherProps}
+      />
+      {/* eslint-disable-next-line react/no-danger */}
+      <div className="latex-container preview-child" dangerouslySetInnerHTML={{ __html: LatexPreview }} />
+    </div>
+  )
+}
+
+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 memo(LatexPreviewInput)

package/src/ui/f/fields/LatexPreviewInput/convertLatexToHtml.jsx

@@ -0,0 +1,38 @@
+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(
+    <MathJaxContext>
+      <ReactMarkdown
+        remarkPlugins={[RemarkMathPlugin]}
+        rehypePlugins={[rehypeMathjax]}
+        components={{
+          math      :({ value }) => <MathJax.Node formula={value} />,
+          inlineMath:({ value }) => <MathJax.Node inline formula={value} />,
+        }}
+      >
+        {processedContent}
+      </ReactMarkdown>
+    </MathJaxContext>,
+  )
+
+  return renderedContent
+}
+
+export default convertLatexToHtml

package/src/ui/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/src/ui/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/src/ui/f/fields/index.js

@@ -9,6 +9,10 @@ export { Checkbox } from './Checkbox'
 export { QueryChoices } from './QueryChoices'
 export { LinkInput } from './LinkInput'
 export { EditorInput } from './EditorInput'
+export {
+  LatexPreviewInput,
+  convertLatexToHtml,
+} from './LatexPreviewInput'
 export {
   FileUpload,
   fileUploadOptions,

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

@@ -36,7 +36,6 @@ const FormBuilder = ({
   fileUploadStatus,
   handleFileDelete,
   taskData,
-  customInputMap,
   // ...otherProps
 }) => {
   const formattedJson = JSON.stringify(taskData, null, 2)
@@ -68,7 +67,6 @@ const FormBuilder = ({
           onSave={onBuilderFormSave}
           onError={onBuilderError}
           validate={onBuilderValidate}
-          customInputMap={customInputMap}
         />
       )}
       {mode === 'render' && (
@@ -80,7 +78,6 @@ const FormBuilder = ({
           fileUploadStatus={fileUploadStatus}
           handleFileDelete={handleFileDelete}
           onFileUpload={onFileUpload}
-          customInputMap={customInputMap}
         />
       )}
     </div>

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

@@ -43,7 +43,6 @@ const Builder = ({
   onError,
   validate,
   formBuilderId,
-  customInputMap,
   initialValues = {},
   // ...otherProps
 }) => {
@@ -126,7 +125,6 @@ const Builder = ({
                         handleDeleteSection={() => handleDeleteSection({
                           index, remove, values, setFieldValue,
                         })}
-                        customInputMap={customInputMap}
                       />
                     ))}
                     <div className="section-footer">

package/src/ui/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.jsx

@@ -41,7 +41,6 @@ const InputBuilder = ({
   sectionIndex,
   inputIndex,
   onDelete,
-  customInputMap,
   // ...otherProps
 }) => {
   const { values, setFieldValue } = useFormikContext()
@@ -71,8 +70,6 @@ const InputBuilder = ({
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes)
   }
 
-  const customInputTypes = customInputMap ? Object.keys(customInputMap) : []
-
   return (
     <div
       id={id}
@@ -130,10 +127,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',
+              },
             ]}
           />
           <div className="controls">

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

@@ -36,7 +36,6 @@ const Section = ({
   style,
   index,
   handleDeleteSection,
-  customInputMap,
   // ...otherProps
 }) => {
   const { values, setFieldValue } = useFormikContext()
@@ -70,7 +69,6 @@ const Section = ({
         inputIndex={indx}
         onDelete={handleDeleteInput}
         onCopy={handleCopyInput}
-        customInputMap={customInputMap}
       />,
       identifier:input.name,
     }))

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

@@ -78,7 +78,6 @@ const Renderer = ({
   handleFileDelete,
   onFileUpload,
   shouldUpdateInputStateInRealTime = true,
-  customInputMap,
   // ...otherProps
 }) => {
   const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
@@ -179,7 +178,6 @@ const Renderer = ({
                   handleFileDelete={handleFileDelete}
                   onFileUpload={onFileUpload}
                   sectionIndex={sectionIndex}
-                  customInputMap={customInputMap}
                 />
                 )
               ))}

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

@@ -40,71 +40,56 @@ const Section = ({
   handleFileDelete,
   onFileUpload,
   sectionIndex,
-  customInputMap,
   // ...otherProps
-}) => {
-  const customInputTypes = customInputMap ? Object.keys(customInputMap) : []
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <p className="h3">{title}</p>
-      <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 ? (
-            <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)
-                },
-              })}
-            />
-          ) : (
-            <CustomInputComponent
-              key={input.name}
-              {...input}
-              disabled={readOnly}
-            />
-          )
-        )
-      })}
-    </div>
-  )
-}
+}) => (
+  <div
+    id={id}
+    className={[
+      baseClassName,
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    <p className="h3">{title}</p>
+    <ExpandableLexicalPreview
+      nodes={description}
+      name="instructions"
+    />
+    {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>
+)
 
 Section.propTypes = {
   /**

package/src/ui/utils/formatting.js

@@ -0,0 +1,133 @@
+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`)
+
+  // Cater for decimal seconds
+  if (parts.length === 0) return '0s'
+
+  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'
+  }
+}
+
+export const snakeCaseToTitleCase = (word) => {
+  const result = word.replace(/([A-Z])/g, ' $1')
+  return result.charAt(0).toUpperCase() + result.slice(1)
+}

package/src/ui/utils/index.js

@@ -1 +1,4 @@
 export { useWindowSize, useDynamicPosition, useOutsideClick } from './hooks'
+export {
+  formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase,
+} from './formatting'