@pareto-engineering/design-system 4.0.0 → 4.1.0

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;
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+export { Builder } from './Builder'
+export { Renderer } from './Renderer'

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

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

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

@@ -0,0 +1,7 @@
+// /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+
+// @use "@pareto-engineering/bem";
+
+// .#{bem.$base}.form-builder{
+
+// }

package/src/ui/g/index.js

@@ -1,2 +1,3 @@
 export { ExpandableLexicalPreview } from './ExpandableLexicalPreview'
 export { DragAndDrop } from './DragAndDrop'
+export { FormBuilder } from './FormBuilder'