@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.1-alpha.1

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'

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

@@ -0,0 +1,106 @@
+/* @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);
+
+        > .#{bem.$base}.select-input {
+          flex: auto;
+        }
+      }
+    }
+    > .#{bem.$base}.section {
+      border-bottom: var(--theme-default-border-style) var(--on-background-inputs);
+
+      > .#{bem.$base}.editor-input {
+        margin-top: $default-margin;
+      }
+
+      > form {
+        /* stylelint-disable selector-max-compound-selectors -- required */
+        > .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;
+
+          /* stylelint-disable-next-line max-nesting-depth -- required */
+          &:hover {
+            color: var(--interactive);
+
+            /* stylelint-disable max-nesting-depth -- required */
+            > .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/Renderer/Renderer.jsx

@@ -0,0 +1,145 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react'
+
+import { Formik, Form } from 'formik'
+
+import { useState } from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { Button } from 'ui/b'
+
+import './styles.scss'
+
+// Local Definitions
+
+import { Section } from './common'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'renderer'
+
+/**
+ * This is the component description.
+ */
+const Renderer = ({
+  id,
+  className:userClassName,
+  style,
+  formData,
+  onSave,
+  // ...otherProps
+}) => {
+  const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
+  const [sectionHistory, setSectionHistory] = useState([])
+
+  const initialValues = formData.sections.reduce((acc, section) => {
+    section.inputs.forEach((input) => {
+      acc[input.name] = ''
+    })
+    return acc
+  }, {})
+
+  const handleSubmit = (values) => {
+    const currentSection = formData.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'
+        ? formData.sections.length // submit
+        : parseInt(currentSection.navigation.nextSection, 10) // go to specific section
+    }
+
+    if (nextSectionIndex >= formData.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])
+    }
+  }
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+
+    >
+      <Formik
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+      >
+        <Form>
+          {formData.sections.map((section, sectionIndex) => (
+            sectionIndex === currentSectionIndex && (
+            <Section key={`${section.title}`} {...section} />
+            )
+          ))}
+          <div className="navigator-container">
+            <Button color="interactive" isGradient isGhost onClick={handlePrevious} disabled={sectionHistory.length === 0}>
+              Previous
+            </Button>
+            <Button color="interactive" isGradient type="submit">
+              {formData.sections[currentSectionIndex].navigation.nextSection === 'submit' ? '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),
+
+  /**
+   *  The children JSX
+   */
+  formData:PropTypes.shape({
+    formTitle      :PropTypes.string.isRequired,
+    formDescription:PropTypes.string.isRequired,
+    sections       :PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any)),
+  }),
+}
+
+Renderer.defaultProps = {
+  // someProp:false
+}
+
+export default Renderer

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

@@ -0,0 +1,75 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+// Local Definitions
+
+import { FormInput } from 'ui/f'
+
+import { ExpandableLexicalPreview } from 'ui/g'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'section'
+
+/**
+ * This is the component description.
+ */
+const Section = ({
+  id,
+  className:userClassName,
+  style,
+  title,
+  description,
+  inputs,
+  // ...otherProps
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+  >
+    <h3>{title}</h3>
+    <ExpandableLexicalPreview
+      nodes={description}
+      name="instructions"
+    />
+    {inputs.map((input) => (
+      <FormInput key={input.name} {...input} />
+    ))}
+  </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

@@ -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/Renderer/common/index.js

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

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

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

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

@@ -0,0 +1,15 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+@use "@pareto-engineering/bem";
+
+$default-margin: 1rem;
+
+.#{bem.$base}.renderer {
+  > form {
+    > .navigator-container {
+      display: flex;
+      gap: var(--gap);
+      margin-top: $default-margin;
+    }
+  }
+}