@pareto-engineering/design-system 5.0.5 → 5.1.1

package/src/ui/a/Charts/PieChart/PieChart.jsx

@@ -0,0 +1,125 @@
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import {
+  PieChart as RechartsPieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  Tooltip,
+} from 'recharts'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { CustomLegend, CustomTooltipContent } from '../Common'
+
+import './styles.scss'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'pie-chart'
+
+const PieChart = ({
+  id,
+  className: userClassName,
+  data,
+  title,
+  valueKey,
+  labelKey,
+  colors,
+  height,
+  width,
+  innerRadius,
+  outerRadius,
+}) => {
+  const total = data.reduce((sum, item) => sum + item[valueKey], 0)
+
+  const formattedData = data.map((item) => ({
+    ...item,
+    label     :item[labelKey],
+    color     :colors[data.indexOf(item)],
+    percentage:((item[valueKey] / total) * 100).toFixed(0),
+  }))
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+    >
+      <div className="chart-header">
+        <h3>{title}</h3>
+      </div>
+      <div className="chart-content">
+        <ResponsiveContainer width={width} height={height}>
+          <RechartsPieChart>
+            <Pie
+              data={formattedData}
+              dataKey={valueKey}
+              nameKey={labelKey}
+              cx="50%"
+              cy="50%"
+              innerRadius={innerRadius}
+              outerRadius={outerRadius}
+              label={false}
+              paddingAngle={0}
+            >
+              {formattedData.map((entry, index) => (
+                <Cell
+                  key={entry[labelKey]}
+                  fill={colors[index]}
+                  strokeWidth={0}
+                />
+              ))}
+            </Pie>
+            <Tooltip content={<CustomTooltipContent isDateValue={false} />} />
+          </RechartsPieChart>
+        </ResponsiveContainer>
+        <CustomLegend
+          colorsArray={colors}
+          yKeysArray={formattedData}
+          capitalizedLegend
+          orientation="vertical"
+          getLegendItemTitle={(entry) => entry[labelKey]}
+          getLegendItemSubtitle={(entry) => entry[valueKey]}
+        />
+      </div>
+    </div>
+  )
+}
+
+PieChart.propTypes = {
+  id       :PropTypes.string,
+  className:PropTypes.string,
+  data     :PropTypes.arrayOf(PropTypes.shape({
+    [PropTypes.string]:PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.number,
+    ]),
+  })).isRequired,
+  title      :PropTypes.string.isRequired,
+  valueKey   :PropTypes.string.isRequired,
+  labelKey   :PropTypes.string.isRequired,
+  colors     :PropTypes.arrayOf(PropTypes.string).isRequired,
+  height     :PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width      :PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  innerRadius:PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  outerRadius:PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+}
+
+PieChart.defaultProps = {
+  id         :undefined,
+  className  :undefined,
+  width      :'100%',
+  height     :300,
+  innerRadius:'0%',
+  outerRadius:'100%',
+}
+
+export default PieChart

package/src/ui/a/Charts/PieChart/index.js

@@ -0,0 +1 @@
+export { default as PieChart } from './PieChart'

package/src/ui/a/Charts/PieChart/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} {
+  &.pie-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;
+      }
+    }
+
+    .chart-content {
+      align-items: flex-start;
+      display: flex;
+    }
+
+    .recharts-wrapper {
+      .recharts-surface {
+        .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;
+        }
+      }
+    }
+  }
+}

package/src/ui/a/Charts/index.js

@@ -1,2 +1,3 @@
 export { AreaChart } from './AreaChart'
 export { BarChart } from './BarChart'
+export { PieChart } from './PieChart'

package/src/ui/a/Notification/styles.scss

@@ -4,6 +4,7 @@
 @use "@pareto-engineering/styles/src/mixins";
 @use "@pareto-engineering/styles/src/globals" as *;
 
+$default-border: 1px solid var(--x);
 $default-padding: 1rem;
 $default-margin: 1rem;
 $default-border-radius: 1.5rem;
@@ -12,10 +13,11 @@ $default-height: var(--notification-height, 5rem);
 
 .#{bem.$base}.notification {
   align-items: center;
-  background-color: var(--x);
+  background-color: var(--background-far);
+  border: $default-border;
   border-radius: $default-border-radius;
   bottom: 0;
-  color: var(--on-x);
+  color: var(--paragraph);
   display: flex;
   justify-content: space-between;
   margin-bottom: $default-margin;
@@ -31,8 +33,16 @@ $default-height: var(--notification-height, 5rem);
   > .message-container {
     align-items: center;
     display: flex;
+    gap: $default-padding;
     overflow: auto;
 
+    > .icon {
+      background-color: var(--x);
+      border-radius: 50%;
+      color: var(--white);
+      padding: calc($default-padding / 2);
+    }
+
     > .message {
       font-size: calc(var(--s0) * 1rem);
       margin-left: calc($default-margin / 2);
@@ -44,12 +54,14 @@ $default-height: var(--notification-height, 5rem);
   }
 
   .#{bem.$base}.button {
+    background-color: transparent;
+    color: var(--paragraph);
     padding: calc($default-padding / 2);
 
-    &:focus {
+    &:focus,
+    &:hover {
       background-color: transparent;
+      color: var(--hard-paragraph);
     }
   }
 }
-
-

package/src/ui/a/index.js

@@ -30,4 +30,4 @@ export { ToggleSwitch } from './ToggleSwitch'
 export { XMLEditor } from './XMLEditor'
 export { DatePicker } from './DatePicker'
 export { Tooltip } from './Tooltip'
-export { AreaChart, BarChart } from './Charts'
+export { AreaChart, BarChart, PieChart } from './Charts'

package/src/ui/f/FormInput/FormInput.jsx

@@ -42,6 +42,7 @@ const FormInput = ({
   const newClassName = [
     className,
     componentClassName,
+    otherProps.hasCharacterLimit && otherProps.maxLength && `limit-character-count-${otherProps.maxLength}`,
   ].filter(Boolean).join(' ')
 
   if (type === 'textarea') {

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

@@ -26,7 +26,12 @@ import styleNames from '@pareto-engineering/bem/exports'
 // Local Definitions
 
 import { FormLabel, FormDescription } from '../../common'
-import { ToolbarPlugin, TreeViewPlugin, StopPropagationPlugin } from './common'
+import {
+  ToolbarPlugin,
+  TreeViewPlugin,
+  StopPropagationPlugin,
+  ExposePlainTextPlugin,
+} from './common'
 
 import './styles.scss'
 
@@ -60,6 +65,7 @@ const EditorInput = ({
   disabled,
   showDebugger,
   setEditorState,
+  setPlainTextKey,
   // ...otherProps
 }) => {
   const [field, ,] = useField(name)
@@ -157,14 +163,17 @@ const EditorInput = ({
           '--rows'  :`${rows}em`,
         }}
       >
-        <FormLabel
-          name={name}
-          color={labelColor}
-          optional={optional}
-        >
-          {label}
-        </FormLabel>
-
+        {
+          label && (
+            <FormLabel
+              name={name}
+              color={labelColor}
+              optional={optional}
+            >
+              {label}
+            </FormLabel>
+          )
+        }
         { !disabled && <ToolbarPlugin /> }
         <RichTextPlugin
           contentEditable={(
@@ -187,6 +196,12 @@ const EditorInput = ({
         <StopPropagationPlugin />
         <FormDescription className="s-1" description={description} name={name} />
         { showDebugger && <TreeViewPlugin /> }
+        {setPlainTextKey && (
+          <ExposePlainTextPlugin
+            setFieldValue={setFieldValue}
+            setPlainTextKey={setPlainTextKey}
+          />
+        )}
       </div>
     </LexicalComposer>
   )

package/src/ui/f/fields/EditorInput/common/ExposePlainTextPlugin.jsx

@@ -0,0 +1,42 @@
+import { useEffect } from 'react'
+
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+
+import {
+  $getRoot,
+} from 'lexical'
+
+import PropTypes from 'prop-types'
+
+/**
+ * This is the component description
+ */
+const ExposePlainTextPlugin = ({
+  setFieldValue,
+  setPlainTextKey,
+}) => {
+  const [editor] = useLexicalComposerContext()
+
+  useEffect(() => (
+    editor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        const root = $getRoot()
+        const textContent = root.getTextContent()
+        setFieldValue(setPlainTextKey, textContent)
+      })
+    })
+  ), [editor])
+
+  return null
+}
+
+ExposePlainTextPlugin.propTypes = {
+  setFieldValue  :PropTypes.func.isRequired,
+  setPlainTextKey:PropTypes.string.isRequired,
+}
+
+ExposePlainTextPlugin.defaultProps = {
+  //
+}
+
+export default ExposePlainTextPlugin

package/src/ui/f/fields/EditorInput/common/ToolbarPlugin/ToolbarPlugin.jsx

@@ -254,7 +254,7 @@ const ToolbarPlugin = ({
         baseClassName,
         componentClassName,
         userClassName,
-        `x-${baseBgColor}`,
+        `x-${baseBgColor} b-x`,
       ]
         .filter((e) => e)
         .join(' ')}

package/src/ui/f/fields/EditorInput/common/index.js

@@ -4,3 +4,4 @@ export { default as StopPropagationPlugin } from './StopPropagationPlugin'
 export { ToolbarPlugin } from './ToolbarPlugin'
 export { ColorPicker } from './ColorPicker'
 export { FontSizeDropDown } from './FontSizeDropDown'
+export { default as ExposePlainTextPlugin } from './ExposePlainTextPlugin'

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

@@ -44,6 +44,7 @@ const LatexPreviewInput = ({
       className={[
         baseClassName,
         componentClassName,
+        className,
         userClassName,
         'form-input',
       ]

package/src/ui/f/fields/LatexPreviewInput/styles.scss

@@ -11,6 +11,7 @@ $default-margin: 1em;
 
   > .preview-child {
     flex: 1;
+    position: relative;
   }
 
   > .latex-container {

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

@@ -38,6 +38,7 @@ const TextareaInput = ({
   placeholder,
   autoComplete,
   resize,
+  maxLength,
   // ...otherProps
 }) => {
   const [field] = useField({ name, validate })
@@ -73,6 +74,7 @@ const TextareaInput = ({
         rows={rows}
         disabled={disabled}
         autoComplete={autoComplete}
+        maxLength={maxLength}
       >
         {/* It was a dark and stormy night... */}
       </textarea>

package/src/ui/g/ExpandableLexicalPreview/ExpandableLexicalPreview.jsx

@@ -37,6 +37,7 @@ const ExpandableLexicalPreview = ({
   onBlock,
   onOpen,
   header,
+  rows,
   // ...otherProps
 }) => {
   const [isCollapsed, setIsCollapsed] = useState(false)
@@ -54,9 +55,7 @@ const ExpandableLexicalPreview = ({
       <div
         id={id}
         className={[
-
           baseClassName,
-
           componentClassName,
           userClassName,
           `y-${color}`,
@@ -102,7 +101,8 @@ const ExpandableLexicalPreview = ({
               name={name}
               resize={resize}
               disabled
-              id="the-bad-ass-input"
+              id={`${id}-editor-input`}
+              rows={rows}
             />
             <Button
               id={id}

package/src/ui/g/ExpandableLexicalPreview/styles.scss

@@ -10,7 +10,6 @@
   position: relative;
   width: 100%;
 
-
   &.collapsed {
     flex-direction: row;
   }

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

@@ -70,6 +70,8 @@ const InputBuilder = ({
     setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes)
   }
 
+  const textChoices = ['text', 'number', 'textarea', 'latex-preview-input']
+
   return (
     <div
       id={id}
@@ -179,6 +181,38 @@ const InputBuilder = ({
             />
           )}
         </div>
+        {textChoices.includes(input?.type) && (
+          <div className="character-limit-container">
+            <div className="is-required">
+              <span className="s0">
+                Limit number of characters permitted for this input
+              </span>
+              <ToggleSwitch
+                handleOnChange={() => {
+                  setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.hasCharacterLimit`, !input?.hasCharacterLimit)
+                  if (!input?.hasCharacterLimit) {
+                    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.maxLength`, '')
+                  }
+                }}
+                checked={input?.hasCharacterLimit}
+                style={getToggleSwitchStyles(!input?.hasCharacterLimit)}
+                inputId={`sections_${sectionIndex}_inputs.${inputIndex}_character_limit_toggle`}
+              />
+            </div>
+            <div className="character-limit-input">
+              {input?.hasCharacterLimit && (
+              <TextInput
+                label="Enter the maximum number of characters permitted."
+                name={`sections.${sectionIndex}.inputs.${inputIndex}.maxLength`}
+                placeholder=""
+                type="number"
+                validate={integerAndGreaterThanZero}
+                value={input?.maxLength}
+              />
+              )}
+            </div>
+          </div>
+        )}
         {shouldRenderOptions && (
           <FieldArray name={`sections.${sectionIndex}.inputs.${inputIndex}.options`}>
             {({ push, remove }) => (

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'