@pareto-engineering/design-system 5.0.5 → 5.1.0

package/src/ui/g/FormBuilder/common/Builder/common/InputBuilder/styles.scss

@@ -64,6 +64,21 @@ $default-list-width: var(--action-button-width, 18rem);
       margin-bottom: $default-margin;
     }
 
+    > .character-limit-container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+
+      > .is-required {
+        display: flex;
+        flex-direction: row;
+      }
+
+      > .character-limit-input {
+        flex-direction: column;
+      }
+    }
+
     > .input-options {
       display: flex;
       flex-direction: column;

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

@@ -62,7 +62,13 @@ const Section = ({
   const { inputs } = section
 
   useEffect(() => {
-    const items = inputs.map((input, indx) => ({
+    const orderMap = new Map()
+    section.orderedInputDragIds.forEach(
+      (identifier, indx) => orderMap.set(identifier, indx),
+    )
+    const orderedInputs = inputs.sort((a, b) => orderMap.get(a.name) - orderMap.get(b.name))
+
+    const items = orderedInputs.map((input, indx) => ({
       Content:<InputBuilder
         key={input.name}
         sectionIndex={index}
@@ -75,6 +81,8 @@ const Section = ({
     setDraggableInputs(items)
   }, [inputs.length, index])
 
+  const dragAndDropKey = draggableInputs.map((e) => e.identifier).join(',')
+
   return (
     <div
       id={id}
@@ -128,7 +136,7 @@ const Section = ({
                 const ids = reOrderedItems.map((e) => e.identifier)
                 setFieldValue(`sections.${index}.orderedInputDragIds`, ids)
               }}
-              key={draggableInputs.length}
+              key={dragAndDropKey}
             />
             <button
               type="button"

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

@@ -15,6 +15,7 @@ import './styles.scss'
 
 // Local Definitions
 
+import { applyCharacterLimit } from 'ui/utils'
 import { Section } from './common'
 
 const baseClassName = styleNames.base
@@ -165,6 +166,10 @@ const Renderer = ({
             }
           }, [values])
 
+          useEffect(() => {
+            applyCharacterLimit({ setMaxLength: false })
+          }, [values])
+
           const hasErrors = Object.keys(errors).length > 0
           return (
             <Form>

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

@@ -60,7 +60,6 @@ const Section = ({
     />
     {inputs?.map((input, inputIndex) => {
       const isFileInput = input.type === 'file'
-
       return (
         <FormInput
           key={input.name}

package/src/ui/utils/applyCharacterLimit.js

@@ -0,0 +1,80 @@
+export const applyCharacterLimit = (setMaxLength = true) => {
+  setTimeout(() => {
+    document.querySelectorAll("[class*='limit-character-count-']").forEach((parent) => {
+      const match = parent.className.match(/limit-character-count-(\d+)/)
+      if (!match) return
+
+      const maxLength = parseInt(match[1], 10)
+
+      const fields = parent.matches("input[type='text'], input[type='email'], input[type='password'], input[type='search'], textarea")
+        ? [parent]
+        : Array.from(parent.querySelectorAll("input[type='text'], input[type='email'], input[type='password'], input[type='search'], textarea"))
+
+      if (!fields.length) return
+
+      const characterCounterBaseClassName = 's-2 character-counter'
+      const characterCounterClassName = `${characterCounterBaseClassName} x-paragraph c-x`
+      const characterCounterWarningClassName = `${characterCounterBaseClassName} x-orange c-x`
+      const characterCounterErrorClassName = `${characterCounterBaseClassName} x-error c-x`
+
+      fields.forEach((field) => {
+        if (field.parentNode.querySelector('.character-counter')) return
+
+        if (setMaxLength) {
+          field.setAttribute('maxlength', maxLength)
+        }
+
+        const counter = document.createElement('span')
+        counter.className = characterCounterClassName
+        counter.style.position = 'absolute'
+        counter.style.right = '10px'
+        counter.style.bottom = '-20px'
+        counter.style.pointerEvents = 'none'
+
+        let wrapper
+        const { parentNode } = field
+        const computedStyle = window.getComputedStyle(parentNode)
+        if ((parentNode.style && parentNode.style.position === 'relative') || computedStyle.getPropertyValue('position') === 'relative') {
+          wrapper = parentNode
+        } else {
+          wrapper = document.createElement('div')
+          wrapper.style.position = 'relative'
+          wrapper.style.display = 'inline-block'
+          wrapper.style.width = '100%'
+          field.parentNode.insertBefore(wrapper, field)
+          wrapper.appendChild(field)
+        }
+
+        wrapper.appendChild(counter)
+
+        function updateCounter() {
+          if (field.value.length > maxLength) {
+            // eslint-disable-next-line no-param-reassign
+            field.value = field.value.substring(0, maxLength)
+          }
+
+          const { length } = field.value
+          counter.textContent = `${length}/${maxLength}`
+
+          if (length >= maxLength) {
+            counter.className = characterCounterErrorClassName
+          } else if (length >= maxLength * 0.9) {
+            counter.className = characterCounterWarningClassName
+          } else {
+            counter.className = characterCounterClassName
+          }
+        }
+
+        field.removeEventListener('input', updateCounter)
+        field.removeEventListener('paste', updateCounter)
+
+        field.addEventListener('input', updateCounter)
+        field.addEventListener('paste', () => {
+          setTimeout(updateCounter, 0)
+        })
+
+        updateCounter()
+      })
+    })
+  }, 100) // Small delay to ensure DOM is ready
+}

package/src/ui/utils/formatting.js

@@ -46,6 +46,9 @@ export const formatTime = (seconds) => {
   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(' ')
 }
 
@@ -123,3 +126,8 @@ export const formatDate = (input, format = DATE_FORMATS.HUMAN_READABLE) => {
     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,2 +1,5 @@
 export { useWindowSize, useDynamicPosition, useOutsideClick } from './hooks'
-export { formatTime, formatDate, DATE_FORMATS } from './formatting'
+export {
+  formatTime, formatDate, DATE_FORMATS, snakeCaseToTitleCase,
+} from './formatting'
+export { applyCharacterLimit } from './applyCharacterLimit'