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

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

@@ -0,0 +1,85 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+// Local Definitions
+
+import { Renderer, Builder } from './common'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'form-builder'
+
+/**
+ * This is the component description.
+ */
+const FormBuilder = ({
+  id,
+  className:userClassName,
+  style,
+  mode,
+  formData,
+  formBuilderId,
+  onBuilderFormSave,
+  onRendererFormSave,
+  // ...otherProps
+}) => (
+  <div
+    id={id}
+    className={[
+
+      baseClassName,
+
+      componentClassName,
+      userClassName,
+    ]
+      .filter((e) => e)
+      .join(' ')}
+    style={style}
+    // {...otherProps}
+  >
+    {mode === 'build' && <Builder formBuilderId={formBuilderId} onSave={onBuilderFormSave} />}
+    {mode === 'render' && <Renderer formData={formData} onSave={onRendererFormSave} />}
+  </div>
+)
+
+FormBuilder.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 mode of the form builder to determine whether to render a form or build a form
+   */
+  mode:PropTypes.oneOf(['build', 'render']),
+
+  /**
+   * This is the ID of the form element in the <Builder /> component
+   */
+  formBuilderId:PropTypes.string.isRequired,
+}
+
+FormBuilder.defaultProps = {
+  mode:'build',
+}
+
+FormBuilder.Builder = Builder
+FormBuilder.Renderer = Renderer
+
+export default FormBuilder

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

@@ -0,0 +1,175 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react'
+
+import { Formik, Form, FieldArray } from 'formik'
+
+import PropTypes from 'prop-types'
+
+import styleNames from '@pareto-engineering/bem/exports'
+
+import { SelectInput } from 'ui/f'
+
+import { Section } from './common'
+
+import './styles.scss'
+
+// Local Definitions
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'builder'
+
+const reorderInputs = (values) => {
+  const valuesCopy = JSON.parse(JSON.stringify(values))
+
+  valuesCopy.sections.forEach((section) => {
+    const orderMap = new Map()
+    section.orderedInputDragIds.forEach((id, index) => orderMap.set(id, index))
+    section.inputs.sort((a, b) => orderMap.get(a.name) - orderMap.get(b.name))
+  })
+
+  return valuesCopy
+}
+
+/**
+ */
+const Builder = ({
+  id,
+  className:userClassName,
+  style,
+  onSave,
+  formBuilderId,
+  // ...otherProps
+}) => {
+  const handleSubmit = (values) => {
+    const reOrderedValues = reorderInputs(values)
+    onSave(reOrderedValues)
+  }
+
+  return (
+    <div
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+    >
+
+      <p className="h3">Form Builder</p>
+      <Formik
+        initialValues={{
+          sections:[
+            {
+              title              :'',
+              description        :'',
+              key                :'section-0',
+              inputs             :[],
+              orderedInputDragIds:[],
+              navigation         :{ nextSection: 'next' },
+            },
+          ],
+        }}
+        onSubmit={handleSubmit}
+      >
+        {({ values }) => {
+          const availableSections = values.sections.map((section, idx) => ({
+            value:idx,
+            label:`Go to ${section.title || `Untitled Section ${idx + 1}`}`,
+          }))
+
+          return (
+            <Form id={formBuilderId}>
+              <FieldArray name="sections">
+                {({ push }) => (
+                  <>
+                    {values.sections.map((section, index) => (
+                      <Section key={section.key} index={index} />
+                    ))}
+                    <div className="section-footer">
+                      <button
+                        className="add-section-cta"
+                        type="button"
+                        onClick={() => {
+                          const currentIndex = values.sections.length
+
+                          return push({
+                            title      :'',
+                            description:'',
+                            key        :`section-${currentIndex}`,
+                            inputs     :[
+                              {
+                                type       :'text',
+                                options    :[],
+                                required   :true,
+                                description:'',
+                                name       :`section_${values.sections.length}_input_0`,
+                                label      :'',
+                              },
+                            ],
+                            orderedInputDragIds:[],
+                            navigation         :{ nextSection: 'next' },
+                          })
+                        }}
+                      >
+                        <div className="icon-container">
+                          <span className="icon">
+                            +
+                          </span>
+                        </div>
+                        <span className="text x-paragraph c-x">Add Section</span>
+                      </button>
+                      <div className="section-navigation">
+                        <span className="x-paragraph c-x">
+                          After Section
+                          {' '}
+                          {values.sections.length}
+                        </span>
+                        <SelectInput
+                          name={`sections.${values.sections.length - 1}.navigation.nextSection`}
+                          options={[
+                            { label: 'Select section', value: '', disabled: true },
+                            { label: 'Continue to next section', value: 'next' },
+                            ...availableSections,
+                            { label: 'Submit form', value: 'submit' },
+                          ]}
+                        />
+                      </div>
+                    </div>
+                  </>
+                )}
+              </FieldArray>
+
+            </Form>
+          )
+        }}
+      </Formik>
+    </div>
+  )
+}
+
+Builder.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),
+}
+
+Builder.defaultProps = {
+  // someProp:false
+}
+
+export default Builder

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'