@pareto-engineering/design-system 5.0.0 → 5.0.1

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,125 @@
+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/src/ui/utils/index.js

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