@pareto-engineering/design-system 4.0.0 → 4.1.0

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

@@ -0,0 +1,279 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react'
+
+import { useState, useRef } from 'react'
+
+import PropTypes from 'prop-types'
+
+import { FieldArray, useFormikContext } from 'formik'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { SelectInput, TextInput } from 'ui/f'
+
+import { ToggleSwitch, Popover } from 'ui/a'
+
+import { useOutsideClick } from 'ui/utils'
+
+import './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'input-builder'
+
+/**
+ * This is the component description.
+ */
+const InputBuilder = ({
+  id,
+  className:userClassName,
+  style,
+  sectionIndex,
+  inputIndex,
+  onDelete,
+  // onCopy,
+  preferredPopoverOrder,
+  // ...otherProps
+}) => {
+  const { values, setFieldValue } = useFormikContext()
+  const input = values.sections[sectionIndex].inputs[inputIndex]
+
+  const handleToggleRequired = () => {
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input.required)
+  }
+
+  const toggleSwitchStyles = {
+    ...(!input?.required
+      ? {
+        '--slider-background-color':'var(--disabled)',
+      }
+      : {}
+    ),
+  }
+
+  const parentRef = useRef(null)
+  const [isOpen, setIsOpen] = useState(false)
+  useOutsideClick(parentRef, () => setIsOpen(false))
+
+  const [hasDescription, setHasDescription] = useState(false)
+
+  const handleToggleConditionalNavigation = () => {
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.conditionalNavigation`, !input.conditionalNavigation)
+  }
+
+  const availableSections = values.sections.map((section, idx) => ({
+    value:idx,
+    label:`Go to ${section.title || `Untitled Section ${idx + 1}`}`,
+  }))
+
+  const shouldRenderOptions = input?.type === 'select' || input?.type === 'multiple' || input?.type === 'choices'
+
+  const handleSelectOptionBlur = (e, optionIndex) => {
+    const { value } = e.target
+    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.label`, value)
+  }
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <div className="drag-icon">
+        <span className="ai-icon">
+          H
+        </span>
+      </div>
+      <div className="input-options-container">
+        <div className="controls-container">
+          <SelectInput
+            name={`sections.${sectionIndex}.inputs.${inputIndex}.type`}
+            options={[
+              {
+                value   :'',
+                label   :'Select an option',
+                disabled:true,
+              },
+              {
+                value:'text',
+                label:'Basic input',
+              },
+              {
+                value:'textarea',
+                label:'Long paragraph',
+              },
+              {
+                value:'select',
+                label:'Dropdown select',
+              },
+              {
+                value:'editor',
+                label:'Editor input',
+              },
+              {
+                value:'multiple',
+                label:'Checkboxes',
+              },
+              {
+                value:'choices',
+                label:'Radio buttons',
+              },
+            ]}
+          />
+          <div className="controls">
+            {/* TODO */}
+            {/* <button type="button" onClick={() => onCopy(inputIndex)}>
+              <span className="ai-icon x-ui-icons c-x">I</span>
+            </button> */}
+            <button type="button" onClick={() => onDelete(inputIndex)}>
+              <span className="icon x-ui-icons c-x">D</span>
+            </button>
+            <div className="is-required">
+              <span className="s0">
+                Required
+              </span>
+              <ToggleSwitch
+                handleOnChange={handleToggleRequired}
+                checked={input?.required}
+                style={toggleSwitchStyles}
+                inputId={`sections_${sectionIndex}_inputs.${inputIndex}_toggle`}
+              />
+            </div>
+            <div className="actions" ref={parentRef}>
+              <button type="button" onClick={() => setIsOpen(!isOpen)}>
+                <span className="icon x-ui-icons c-x">!</span>
+              </button>
+              <Popover
+                isOpen={isOpen}
+                parentRef={parentRef}
+                preferredPrimaryOrder={preferredPopoverOrder}
+              >
+                <p>Show</p>
+                <ul>
+                  <li className={`option ${hasDescription ? 'with-check-mark' : ''}`}>
+                    {hasDescription
+                     && <span className="x-ui-icons c-x icon">I</span>}
+                    <button
+                      onClick={() => setHasDescription(!hasDescription)}
+                      type="button"
+                    >
+                      Description
+                    </button>
+                  </li>
+                  <li className={`option ${input?.conditionalNavigation ? 'with-check-mark' : ''}`}>
+                    {input?.conditionalNavigation && <span className="x-ui-icons c-x icon">I</span>}
+                    <button
+                      onClick={handleToggleConditionalNavigation}
+                      type="button"
+                    >
+                      Go to section based on answer
+                    </button>
+                  </li>
+                </ul>
+              </Popover>
+            </div>
+          </div>
+        </div>
+        <div className="input-name-description">
+          <TextInput
+            label="Input name"
+            name={`sections.${sectionIndex}.inputs.${inputIndex}.label`}
+            placeholder="Question"
+          />
+          {hasDescription && (
+            <TextInput
+              label="Description(optional)"
+              name={`sections.${sectionIndex}.inputs.${inputIndex}.description`}
+              placeholder="Describe details for the question"
+            />
+          )}
+        </div>
+        {shouldRenderOptions && (
+          <FieldArray name={`sections.${sectionIndex}.inputs.${inputIndex}.options`}>
+            {({ push, remove }) => (
+              <div className="input-options">
+                <p>Options</p>
+                {input?.options.map((option, optionIndex) => (
+                  <div key={option.key} className="option-container">
+                    {input.type !== 'select' && <div className={`input-icon-sample ${input.type}`} />}
+
+                    <TextInput
+                      name={`sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.value`}
+                      placeholder={`Option ${optionIndex + 1}`}
+                      onBlur={(e) => handleSelectOptionBlur(e, optionIndex)}
+                    />
+
+                    {input?.conditionalNavigation && (
+                      <>
+                        <SelectInput
+                          options={[{ label: 'Select section', value: '', disabled: true }, ...availableSections]}
+                          name={`sections.${sectionIndex}.inputs.${inputIndex}.options.${optionIndex}.nextSection`}
+                        />
+                      </>
+                    )}
+                    <button className="icon" type="button" onClick={() => remove(optionIndex)}>Y</button>
+                  </div>
+                ))}
+                <button
+                  className="add-option-cta"
+                  type="button"
+                  onClick={() => push({
+                    key        :`sections-${sectionIndex}-inputs-${inputIndex}-options-${input.options.length - 1}`,
+                    value      :'',
+                    label      :'',
+                    nextSection:'',
+                  })}
+                >
+                  <div className="icon-container">
+                    <span className="icon">
+                      +
+                    </span>
+                  </div>
+                  <span className="text x-paragraph c-x">Add Option</span>
+                </button>
+              </div>
+            )}
+          </FieldArray>
+        )}
+      </div>
+    </div>
+  )
+}
+InputBuilder.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),
+
+  /**
+   * The preferred primary order of the popover
+   */
+  preferredPopoverOrder:PropTypes.arrayOf(PropTypes.string),
+
+}
+
+InputBuilder.defaultProps = {
+  preferredPopoverOrder:['right', 'bottom', 'left', 'top'],
+}
+
+export default InputBuilder

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

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

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

@@ -0,0 +1,192 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-padding: 1rem;
+$default-margin: 1rem;
+$default-list-width: var(--action-button-width, 18rem);
+
+.#{bem.$base}.input-builder {
+  border: var(--theme-default-border-style) var(--ui-lines);
+  border-radius: calc(var(--theme-default-border-radius) / 2);
+  display: flex;
+  margin-top: $default-margin;
+  padding: $default-padding;
+
+  > .drag-icon {
+    margin-right: $default-margin;
+  }
+
+  > .input-options-container {
+    flex: auto;
+
+    > .controls-container {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: $default-margin;
+
+      .#{bem.$base}.select-input {
+        flex: .3;
+      }
+
+      >.controls {
+        display: flex;
+        gap: var(--gap);
+
+        /* stylelint-disable selector-max-compound-selectors -- required */
+        > .is-required {
+          display: flex;
+        }
+
+        /* stylelint-disable selector-max-universal -- required */
+        > * {
+          height: fit-content;
+        }
+
+        > button {
+          background-color: transparent;
+          border: 0;
+          cursor: pointer;
+
+          /* stylelint-disable max-nesting-depth -- required */
+          > .ai-icon,
+          .icon {
+            font-size: calc(var(--s1) * 1rem);
+          }
+        }
+
+        > .actions {
+          position: relative;
+
+          > button {
+            background-color: transparent;
+            border: 0;
+            cursor: pointer;
+          }
+
+          > .#{bem.$base}.popover {
+            background-color: var(--background-cards);
+            border: var(--theme-default-border-style) var(--main2);
+            border-radius: calc(var(--theme-default-border-radius) / 2);
+            cursor: default;
+            padding: $default-padding;
+            width: $default-list-width;
+
+            > p {
+              margin: 0;
+            }
+
+            > ul {
+              list-style: none;
+              margin: 0;
+              padding: 0;
+              white-space: nowrap;
+
+              > .option {
+                cursor: pointer;
+                padding-block: calc($default-padding / 4);
+
+                &:not(.with-check-mark) {
+                  padding-inline: $default-padding;
+                }
+
+                > button {
+                  background: transparent;
+                  border: 0;
+                  color: var(--paragraph);
+                  cursor: pointer;
+                  font-size: calc(var(--s0) * .875rem);
+                  text-align: left;
+                  width: 100%;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    > .input-name-description {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+      margin-bottom: $default-margin;
+    }
+
+    > .input-options {
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap);
+
+      > p {
+        margin: 0;
+      }
+
+      > .option-container {
+        align-items: center;
+        display: flex;
+        gap: calc(var(--gap) / 2);
+
+        > .input-icon-sample {
+          border: var(--theme-default-border-style) var(--outline-inputs);
+          border-radius: var(--theme-default-border-radius);
+          cursor: default;
+          height: 1.6rem;
+          width: 1.6rem;
+
+          &.checkbox {
+            border-radius: calc(var(--theme-default-border-radius) / 4);
+          }
+        }
+
+
+        > .#{bem.$base}.text-input {
+          flex: .5;
+        }
+
+        > .#{bem.$base}.select-input {
+          flex: .3;
+        }
+
+        > button {
+          background-color: transparent;
+          border: 0;
+          color: var(--ui-icons);
+          cursor: pointer;
+        }
+      }
+
+      >.add-option-cta {
+        --color: var(--interactive);
+        --border-color: var(--interactive);
+        align-items: center;
+        align-self: flex-start;
+        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);
+        }
+
+        > .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;
+        }
+      }
+    }
+  }
+}
+
+

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

@@ -0,0 +1,156 @@
+/* @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'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'section'
+
+/**
+ * This is the component description.
+ */
+const Section = ({
+  id,
+  className:userClassName,
+  style,
+  index,
+  // ...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 items = inputs.map((input, indx) => ({
+      Content:<InputBuilder
+        key={input.name}
+        sectionIndex={index}
+        inputIndex={indx}
+        onDelete={handleDeleteInput}
+        onCopy={handleCopyInput}
+      />,
+      identifier:input.name,
+    }))
+    setDraggableInputs(items)
+  }, [inputs.length, index])
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+      <p className="h4">
+        {index === 0 ? 'Form title' : `Section ${index + 1}`}
+      </p>
+      <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={draggableInputs.length}
+            />
+            <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

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

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

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

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

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