@pareto-engineering/design-system 4.0.0 → 4.1.0

package/src/stories/g/FormBuilder.stories.jsx

@@ -0,0 +1,97 @@
+/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
+import * as React from 'react'
+
+import { useState } from 'react'
+
+import { FormBuilder, Button } from 'ui'
+
+export default {
+  title        :'g/FormBuilder',
+  component    :FormBuilder,
+  subcomponents:{
+    // Item:FormBuilder.Item
+  },
+  decorators:[
+    // storyfn => <div className="">{ storyfn() }</div>,
+  ],
+  argTypes:{
+    backgroundColor:{ control: 'color' },
+  },
+}
+
+export const Builder = {
+  args:{
+    mode:'build',
+  },
+  render:(args) => {
+    const [values, setValues] = useState({})
+
+    const handleSampleSaveOnNext = (argsValues) => {
+      setValues(argsValues)
+    }
+
+    return (
+      <>
+        <FormBuilder {...args} onBuilderFormSave={handleSampleSaveOnNext} formBuilderId="some-sample-form-id" />
+        <Button form="some-sample-form-id" type="submit">
+          Sample Next Button in a Work flow
+        </Button>
+        <pre>{JSON.stringify(values, null, 2)}</pre>
+      </>
+    )
+  },
+}
+const sampleFormData = {
+  sections:[
+    {
+      title      :'titlel',
+      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"background-color: #a37575;","text":"asdvczvcsdvjksadvkl sdvasdvn mdvaskldvnsdavkjc,mndsvb asdvsdvsadv","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
+      key        :'section-title',
+      inputs     :[
+        {
+          name    :'section_0_input_0',
+          label   :'Names',
+          type    :'multiple',
+          required:false,
+          options :[
+            {
+              key        :'sections-0-inputs-0-options--1',
+              value      :'James',
+              label      :'James',
+              nextSection:'',
+            },
+            {
+              key        :'sections-0-inputs-0-options-0',
+              value      :'Coigo',
+              label      :'Coigo',
+              nextSection:'',
+            },
+            {
+              key        :'sections-0-inputs-0-options-1',
+              value      :'Nyanjui',
+              label      :'Nyanjui',
+              nextSection:'',
+            },
+            {
+              key        :'sections-0-inputs-0-options-2',
+              value      :'Masalia',
+              label      :'Masalia',
+              nextSection:'',
+            },
+          ],
+          conditionalLogic:null,
+          description     :'',
+        },
+      ],
+      navigation:{
+        nextSection:'next',
+      },
+    },
+  ],
+}
+export const Renderer = {
+  args:{
+    mode    :'render',
+    formData:sampleFormData,
+  },
+}

package/src/ui/a/ToggleSwitch/ToggleSwitch.jsx

@@ -23,6 +23,7 @@ const ToggleSwitch = ({
   handleOnChange,
   checked,
   size,
+  inputId,
   // ...otherProps
 }) => (
   <button
@@ -45,12 +46,12 @@ const ToggleSwitch = ({
   >
     <input
       type="checkbox"
-      id="switch"
+      id={inputId}
       checked={checked}
       onChange={handleOnChange}
     />
     {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-    <label htmlFor="switch" />
+    <label htmlFor={inputId} />
   </button>
 )
 
@@ -84,10 +85,15 @@ ToggleSwitch.propTypes = {
    * The size of this element
    */
   size:PropTypes.string,
+
+  /**
+   * The ID of the elelment to be toggled
+   */
+  inputId:PropTypes.string,
 }
 
 ToggleSwitch.defaultProps = {
-  // someProp:false,
+  inputId:'switch',
 }
 
 export default ToggleSwitch

package/src/ui/f/FormInput/FormInput.jsx

@@ -51,6 +51,16 @@ const FormInput = ({
       />
     )
   }
+  if (type === 'multiple') {
+    return (
+      <ChoicesInput
+        className={newClassName}
+        disabled={disabled}
+        multiple
+        {...otherProps}
+      />
+    )
+  }
   if (type === 'choices') {
     return (
       <ChoicesInput

package/src/ui/f/fields/EditorInput/EditorInput.jsx

@@ -62,12 +62,13 @@ const EditorInput = ({
   showDebugger,
   stopPropagationKeys,
   setEditorState,
+  // handleOnChange,
   // ...otherProps
 }) => {
-  const formik = useFormikContext()
+  const { values, setFieldValue } = useFormikContext()
 
   const setInitialValue = () => {
-    const value = formik.values[name]
+    const value = values[name]
 
     try {
       JSON.parse(value)
@@ -108,10 +109,7 @@ const EditorInput = ({
   }
 
   const onChange = (state) => {
-    formik.setValues({
-      ...formik.values,
-      [name]:JSON.stringify(state),
-    })
+    setFieldValue(name, JSON.stringify(state))
   }
 
   const initialConfig = {
@@ -177,6 +175,7 @@ const EditorInput = ({
             <ContentEditable
               className="content-editable"
               id={name}
+              name={name}
             />
           )}
           ErrorBoundary={LexicalErrorBoundary}

package/src/ui/f/fields/SelectInput/SelectInput.jsx

@@ -39,7 +39,7 @@ const SelectInput = ({
   placeholder,
   getTagColor,
   multiple,
-  // ...otherProps
+  ...otherProps
 }) => {
   const inputProps = {
     name,
@@ -72,7 +72,10 @@ const SelectInput = ({
         .join(' ')}
       style={style}
     >
-      <Input {...inputProps} />
+      <Input
+        {...inputProps}
+        {...otherProps}
+      />
     </div>
   )
 }

package/src/ui/f/fields/SelectInput/common/Single/Single.jsx

@@ -38,7 +38,7 @@ const Single = ({
   disabled,
   isLoading,
   autoComplete,
-  // ...otherProps
+  ...otherProps
 }) => {
   const [field, , helpers] = useField({ name, validate })
 
@@ -82,6 +82,7 @@ const Single = ({
           id={name}
           disabled={disabled}
           autoComplete={autoComplete}
+          {...otherProps}
         >
           {
           options.map((option) => {

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