@pareto-engineering/design-system 5.3.0 → 5.4.0

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

@@ -1,186 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react'
-
-import {
-  useState, useEffect,
-} from 'react'
-
-import { Form, FieldArray, useFormikContext } from 'formik'
-
-import PropTypes from 'prop-types'
-
-// Local Definitions
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import { TextInput, EditorInput } from 'ui/f'
-
-import { DragAndDrop } from 'ui/g'
-
-import { InputBuilder } from '../InputBuilder'
-
-import { ActionsContainer } from '../ActionsContainer'
-
-import './styles.scss'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'builder-section'
-
-/**
- * This is the component description.
- */
-const Section = ({
-  id,
-  className:userClassName,
-  style,
-  index,
-  handleDeleteSection,
-  // ...otherProps
-}) => {
-  const { values, setFieldValue } = useFormikContext()
-  const section = values.sections[index]
-
-  const handleDeleteInput = (inputIndex) => {
-    const newInputs = [...section.inputs]
-    newInputs.splice(inputIndex, 1)
-    setFieldValue(`sections.${index}.inputs`, newInputs)
-  }
-
-  const handleCopyInput = (inputIndex) => {
-    const inputToCopy = section.inputs[inputIndex]
-
-    const newInputs = [
-      ...section.inputs,
-      { ...inputToCopy, name: `section_${index}_input_${section.inputs.length}` },
-    ]
-    setFieldValue(`sections.${index}.inputs`, newInputs)
-  }
-
-  const [draggableInputs, setDraggableInputs] = useState([])
-
-  const { inputs } = section
-
-  useEffect(() => {
-    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}
-        inputIndex={indx}
-        onDelete={handleDeleteInput}
-        onCopy={handleCopyInput}
-      />,
-      identifier:input.name,
-    }))
-    setDraggableInputs(items)
-  }, [inputs.length, index])
-
-  const dragAndDropKey = draggableInputs.map((e) => e.identifier).join(',')
-
-  return (
-    <div
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-      <div className="section-header">
-        <p className="h4">
-          {index === 0 ? 'Form title' : `Section ${index + 1}`}
-        </p>
-        {index !== 0 && (
-          <ActionsContainer>
-            <ul>
-              <li className="option">
-                <button
-                  type="button"
-                  className="remove-section-cta"
-                  onClick={handleDeleteSection}
-                >
-                  Delete Section
-                </button>
-              </li>
-            </ul>
-          </ActionsContainer>
-        )}
-      </div>
-      <TextInput
-        name={`sections.${index}.title`}
-        placeholder={`Title of the ${index === 0 ? 'form' : 'section'}`}
-      />
-      <EditorInput
-        name={`sections.${index}.description`}
-        label={`${index === 0 ? 'Form' : 'Section'} description`}
-      />
-
-      <FieldArray name={`sections.${index}.inputs`}>
-        {({ push }) => (
-          <Form>
-            <DragAndDrop
-              items={draggableInputs}
-              onOrderChange={(reOrderedItems) => {
-                setDraggableInputs(reOrderedItems)
-                const ids = reOrderedItems.map((e) => e.identifier)
-                setFieldValue(`sections.${index}.orderedInputDragIds`, ids)
-              }}
-              key={dragAndDropKey}
-            />
-            <button
-              type="button"
-              className="add-question-cta"
-              onClick={() => push({
-                name            :`section_${index}_input_${section.inputs.length}`,
-                label           :'',
-                type            :'text',
-                required        :false,
-                options         :[],
-                conditionalLogic:null,
-                description     :'',
-              })}
-            >
-              <div className="icon-container">
-                <span className="icon ">+</span>
-              </div>
-              Add question
-            </button>
-          </Form>
-        )}
-      </FieldArray>
-    </div>
-  )
-}
-Section.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),
-}
-
-Section.defaultProps = {
-  // someProp:false
-}
-
-export default Section

package/src/ui/g/FormBuilder/common/Builder/common/Section/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { default as Section } from './Section'

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

@@ -1,71 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-
-.#{bem.$base}.builder-section {
-  border-bottom: var(--theme-default-border-style) var(--on-background-inputs);
-
-
-  > .section-header {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  > .#{bem.$base}.editor-input {
-    margin-top: $default-margin;
-  }
-
-  > form {
-
-    /* stylelint-disable selector-max-compound-selectors -- required */
-
-    > .#{bem.$base}.drag-and-drop {
-      >.drag-over {
-        > .#{bem.$base}.input-builder {
-          border: 1px dashed var(--ui-lines);
-        }
-      }
-    }
-
-    > .add-question-cta {
-      align-items: center;
-      background-color: transparent;
-      border: 0;
-      color: var(--hard-interactive);
-      cursor: pointer;
-      display: flex;
-      gap: var(--gap);
-      margin-block: calc($default-margin * 1.5);
-      margin-left: auto;
-      padding: 0;
-      transition: all .2s;
-
-      &:hover {
-        color: var(--interactive);
-
-        > .icon-container {
-          background-color: var(--interactive);
-        }
-      }
-
-      > .icon-container {
-        align-items: center;
-        background-color: var(--hard-interactive);
-        border-radius: 50%;
-        display: flex;
-        height: 1.6rem;
-        justify-content: center;
-        width: 1.6rem;
-
-        > .icon {
-          color: var(--on-interactive);
-        }
-      }
-    }
-  }
-}
-
-

package/src/ui/g/FormBuilder/common/Builder/common/index.js

@@ -1,3 +0,0 @@
-export { Section } from './Section'
-export { InputBuilder } from './InputBuilder'
-export { ActionsContainer } from './ActionsContainer'

package/src/ui/g/FormBuilder/common/Builder/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { default as Builder } from './Builder'

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

@@ -1,63 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-
-.#{bem.$base}.builder {
-  > form {
-    > .section-footer {
-      align-items: center;
-      display: flex;
-      justify-content: space-between;
-      margin-top: calc($default-margin * 1.5);
-
-
-      >.add-section-cta {
-        --color: var(--interactive);
-        --border-color: var(--interactive);
-        align-items: center;
-        background-color: transparent;
-        border: 0;
-        color: var(--color);
-        cursor: pointer;
-        display: flex;
-        gap: calc(var(--gap) / 1.5);
-        padding: 0;
-        transition: all .2s;
-
-        &:hover {
-          --color: var(--soft-interactive);
-          --border-color: var(--soft-interactive);
-        }
-
-        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
-        > .icon-container {
-          align-items: center;
-          border: 2px solid var(--border-color);
-          border-radius: 50%;
-          display: flex;
-          height: 1.6rem;
-          justify-content: center;
-          width: 1.6rem;
-        }
-      }
-
-      > .section-navigation {
-        align-items: center;
-        display: flex;
-        flex: .4;
-        gap: var(--gap);
-
-        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
-        > span {
-          white-space: nowrap;
-        }
-
-        > .#{bem.$base}.select-input {
-          flex: auto;
-        }
-      }
-    }
-  }
-}

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

@@ -1,240 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react'
-
-import { useState, useEffect, useRef } from 'react'
-
-import { Formik, Form } from 'formik'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import { Button } from 'ui/b'
-
-import './styles.scss'
-
-// Local Definitions
-
-import { applyCharacterLimit } from 'ui/utils'
-import { Section } from './common'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'renderer'
-
-const validate = (currentSectionIndex, formData, values) => {
-  const errors = {}
-
-  const hasAtLeastOneValue = Object.keys(values).some((valueKey) => {
-    const inputValue = values[valueKey]
-    return inputValue && inputValue !== ''
-  })
-
-  if (!hasAtLeastOneValue) {
-    errors.message = 'At least one input must have a value'
-  }
-
-  // Check required fields for current section
-  formData.sections[currentSectionIndex].inputs.forEach((input) => {
-    if (input.required && !values[input.name]) {
-      errors[input.name] = 'This field is required'
-    }
-  })
-
-  return errors
-}
-
-const reconstructFormDataWithValues = (formData, values) => {
-  const valuesMap = {}
-  Object.keys(values).forEach(async (key) => {
-    if (!key.includes('files')) {
-      valuesMap[key] = values[key]
-    }
-  })
-  const newData = {
-    ...formData,
-    sections:formData.sections.map((section) => ({
-      ...section,
-      inputs:section.inputs.map((input) => ({
-        ...input,
-        value:valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value,
-      })),
-    })),
-  }
-  return newData
-}
-
-/**
- * This is the component description.
- */
-const Renderer = ({
-  id,
-  className:userClassName,
-  style,
-  formData,
-  readOnly,
-  onSave,
-  shouldSubmit,
-  fileUploadStatus,
-  handleFileDelete,
-  onFileUpload,
-  shouldUpdateInputStateInRealTime = true,
-  // ...otherProps
-}) => {
-  const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
-  const [sectionHistory, setSectionHistory] = useState([])
-  const [updatedFormData, setUpdatedFormData] = useState({ ...formData })
-
-  useEffect(() => {
-    setUpdatedFormData(formData)
-  }, [formData])
-
-  const initialValues = formData.sections.reduce((acc, section) => {
-    section.inputs.forEach((input) => {
-      acc[input.name] = input.value || ''
-    })
-    return acc
-  }, {})
-
-  const handleSubmit = (values) => {
-    const currentSection = updatedFormData.sections[currentSectionIndex]
-    // by default, 'next' section is the immediate section after the current one
-    let nextSectionIndex = currentSectionIndex + 1
-
-    // Any other value is either submit or an index to a section
-    if (currentSection.navigation.nextSection !== 'next') {
-      nextSectionIndex = currentSection.navigation.nextSection === 'submit'
-        ? updatedFormData.sections.length // submit
-        : parseInt(currentSection.navigation.nextSection, 10) // go to specific section
-    }
-
-    if (nextSectionIndex >= updatedFormData.sections.length) {
-      // submit
-      onSave(values)
-    } else {
-      // Record index history to navigate back
-      setSectionHistory([...sectionHistory, currentSectionIndex])
-      // go to evaluated next section
-      setCurrentSectionIndex(nextSectionIndex)
-    }
-  }
-
-  const handlePrevious = () => {
-    if (sectionHistory.length > 0) {
-      // get the last index of array(the immediate last section)
-      const previousSectionIndex = sectionHistory.pop()
-      // set the immediate last section indx as current
-      setCurrentSectionIndex(previousSectionIndex)
-      setSectionHistory([...sectionHistory])
-    }
-  }
-
-  const isSubmit = currentSectionIndex === updatedFormData.sections.length - 1
-  || updatedFormData.sections[currentSectionIndex].navigation.nextSection === 'submit'
-
-  const ref = useRef(null)
-
-  const currentSectionInputs = updatedFormData.sections[currentSectionIndex].inputs
-  const hasErrorsOnInitialRender = currentSectionInputs
-    .some((input) => (input.required && !ref.current?.values[input.name])
-    || ref.current?.errors[input.name])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-
-    >
-      <Formik
-        initialValues={initialValues}
-        onSubmit={handleSubmit}
-        validate={(values) => validate(currentSectionIndex, updatedFormData, values)}
-        innerRef={ref}
-      >
-        {({ values, errors }) => {
-          useEffect(() => {
-            if (shouldUpdateInputStateInRealTime) {
-              const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values)
-              onSave?.(formDataWithValues)
-            }
-          }, [values])
-
-          useEffect(() => {
-            applyCharacterLimit({ setMaxLength: false })
-          }, [values])
-
-          const hasErrors = Object.keys(errors).length > 0
-          return (
-            <Form>
-              {updatedFormData.sections.map((section, sectionIndex) => (
-                sectionIndex === currentSectionIndex && (
-                <Section
-                  key={`${section.title}`}
-                  {...section}
-                  readOnly={readOnly}
-                  fileUploadStatus={fileUploadStatus}
-                  handleFileDelete={handleFileDelete}
-                  onFileUpload={onFileUpload}
-                  sectionIndex={sectionIndex}
-                />
-                )
-              ))}
-              <div className="navigator-container">
-                {
-                  updatedFormData.sections.length > 1 && (
-                    <Button
-                      className="previous-button"
-                      color="interactive"
-                      isGradient
-                      isCompact
-                      isGhost
-                      onClick={handlePrevious}
-                      disabled={sectionHistory.length === 0}
-                    >
-                      Previous
-                    </Button>
-                  )
-                }
-                {(!isSubmit || shouldSubmit) && (
-                  <Button color="interactive" isGradient type="submit" disabled={hasErrors || hasErrorsOnInitialRender}>
-                    {isSubmit ? 'Submit' : 'Next'}
-                  </Button>
-                )}
-              </div>
-            </Form>
-          )
-        }}
-      </Formik>
-    </div>
-  )
-}
-
-Renderer.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),
-}
-
-Renderer.defaultProps = {
-  // someProp: false,
-}
-
-export default Renderer

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

@@ -1,114 +0,0 @@
-/* eslint-disable no-alert */
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-// Local Definitions
-
-import { FormInput, getFileType } from 'ui/f'
-
-import { ExpandableLexicalPreview } from 'ui/g'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'section'
-
-const fileTypeMapper = {
-  VID :'Video',
-  TXT :'Text',
-  IMG :'Image',
-  PDF :'PDF',
-  AUD :'Audio',
-  FILE:'Generic',
-}
-
-/**
- * This is the component description.
- */
-const Section = ({
-  id,
-  className:userClassName,
-  style,
-  title,
-  description,
-  inputs,
-  readOnly,
-  fileUploadStatus,
-  handleFileDelete,
-  onFileUpload,
-  sectionIndex,
-  // ...otherProps
-}) => (
-  <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 = {
-  /**
-   * 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),
-}
-
-Section.defaultProps = {
-  // someProp:false
-}
-
-export default Section

package/src/ui/g/FormBuilder/common/Renderer/common/Section/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { default as Section } from './Section'

package/src/ui/g/FormBuilder/common/Renderer/common/index.js

@@ -1 +0,0 @@
-export { Section } from './Section'

package/src/ui/g/FormBuilder/common/Renderer/index.js

@@ -1,2 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-export { default as Renderer } from './Renderer'