@pareto-engineering/design-system 4.2.0 → 4.2.1-alpha.0

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

@@ -44,38 +44,82 @@ export const Builder = {
 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',
+      title      :'This is a survey of some of the best LLM models out there',
+      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Best LLM models for software developers","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"heading","version":1,"tag":"h3"},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Chat GPT","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Perplexity","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Gemini","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Claude","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":4}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"bullet","start":1,"tag":"ul"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Please add more exciting models that we might missed","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"quote","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"You can make them ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"bold","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" or ","type":"text","version":1},{"detail":0,"format":2,"mode":"normal","style":"","text":"Italic or ","type":"text","version":1},{"detail":0,"format":10,"mode":"normal","style":"","text":"underlined","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":4,"mode":"normal","style":"color: #110b53;","text":"You can also color them and strike through them!","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
+      key        :'section-0',
       inputs     :[
         {
-          name    :'section_0_input_0',
-          label   :'Names',
-          type    :'multiple',
-          required:false,
-          options :[
+          name            :'section_0_input_0',
+          label           :'Name the Model',
+          type            :'text',
+          required        :true,
+          options         :[],
+          conditionalLogic:null,
+          description     :'',
+        },
+        {
+          name            :'section_0_input_1',
+          label           :'Describe the Model in detail',
+          type            :'textarea',
+          required        :false,
+          options         :[],
+          conditionalLogic:null,
+          description     :'brief model description',
+        },
+      ],
+      orderedInputDragIds:[],
+      navigation         :{
+        nextSection:'next',
+      },
+    },
+    {
+      title      :'Rate the Models',
+      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Best LLM models for software developers","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Chat GPT","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Perplexity","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Gemini","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Claude","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":4}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"bullet","start":1,"tag":"ul"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Please add more exciting models that we might missed","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"quote","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"You can make them ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"bold","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" or ","type":"text","version":1},{"detail":0,"format":2,"mode":"normal","style":"","text":"Italic or ","type":"text","version":1},{"detail":0,"format":10,"mode":"normal","style":"","text":"underlined","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":4,"mode":"normal","style":"","text":"You can also color them and strike through them!","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
+      key        :'section-1',
+      inputs     :[
+        {
+          type   :'choices',
+          options:[
             {
-              key        :'sections-0-inputs-0-options--1',
-              value      :'James',
-              label      :'James',
+              key        :'sections-1-inputs-0-options--1',
+              value      :'Chat GPT',
+              label      :'Chat GPT',
               nextSection:'',
             },
             {
-              key        :'sections-0-inputs-0-options-0',
-              value      :'Coigo',
-              label      :'Coigo',
+              key        :'sections-1-inputs-0-options-0',
+              value      :'Gemini',
+              label      :'Gemini',
+              nextSection:'',
+            },
+          ],
+          required   :true,
+          description:'',
+          name       :'section_1_input_0',
+          label      :'Which is better between the 2?',
+        },
+        {
+          name    :'section_1_input_1',
+          label   :'Choose the worst of them ',
+          type    :'multiple',
+          required:false,
+          options :[
+            {
+              key        :'sections-1-inputs-1-options--1',
+              value      :'Chat GPT',
+              label      :'Chat GPT',
               nextSection:'',
             },
             {
-              key        :'sections-0-inputs-0-options-1',
-              value      :'Nyanjui',
-              label      :'Nyanjui',
+              key        :'sections-1-inputs-1-options-0',
+              value      :'Gemini',
+              label      :'Gemini',
               nextSection:'',
             },
             {
-              key        :'sections-0-inputs-0-options-2',
-              value      :'Masalia',
-              label      :'Masalia',
+              key        :'sections-1-inputs-1-options-1',
+              value      :'Claude',
+              label      :'Claude',
               nextSection:'',
             },
           ],
@@ -83,15 +127,66 @@ const sampleFormData = {
           description     :'',
         },
       ],
-      navigation:{
+      orderedInputDragIds:[],
+      navigation         :{
+        nextSection:'next',
+      },
+    },
+    {
+      title      :'General sentiments',
+      description:'{"root":{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Best LLM models for software developers","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"heading","version":1,"tag":"h3"},{"children":[{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Chat GPT","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Perplexity","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":2},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Gemini","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":3},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Claude","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"listitem","version":1,"value":4}],"direction":"ltr","format":"","indent":0,"type":"list","version":1,"listType":"bullet","start":1,"tag":"ul"},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"Please add more exciting models that we might missed","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"quote","version":1},{"children":[{"detail":0,"format":0,"mode":"normal","style":"","text":"You can make them ","type":"text","version":1},{"detail":0,"format":1,"mode":"normal","style":"","text":"bold","type":"text","version":1},{"detail":0,"format":0,"mode":"normal","style":"","text":" or ","type":"text","version":1},{"detail":0,"format":2,"mode":"normal","style":"","text":"Italic or ","type":"text","version":1},{"detail":0,"format":10,"mode":"normal","style":"","text":"underlined","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1},{"children":[{"detail":0,"format":4,"mode":"normal","style":"","text":"You can also color them and strike through them!","type":"text","version":1}],"direction":"ltr","format":"","indent":0,"type":"paragraph","version":1}],"direction":"ltr","format":"","indent":0,"type":"root","version":1}}',
+      key        :'section-2',
+      inputs     :[
+        {
+          type       :'textarea',
+          options    :[],
+          required   :true,
+          description:'',
+          name       :'section_2_input_0',
+          label      :'Give a final brief description of your findings',
+        },
+      ],
+      orderedInputDragIds:[],
+      navigation         :{
         nextSection:'next',
       },
     },
   ],
 }
+
 export const Renderer = {
   args:{
     mode    :'render',
     formData:sampleFormData,
   },
+  render:(args) => {
+    const [values, setValues] = useState({})
+
+    const handleFormDataUpdateWithValues = (argsValues) => {
+      setValues(argsValues)
+    }
+
+    return (
+      <>
+        <FormBuilder {...args} onRendererFormSave={handleFormDataUpdateWithValues} />
+        <pre>{JSON.stringify(values, null, 2)}</pre>
+      </>
+    )
+  },
+}
+
+export const RendererWithSubmit = {
+  ...Renderer,
+  args:{
+    ...Renderer.args,
+    shouldSubmit:true,
+  },
+}
+
+export const RendererWithDisabled = {
+  ...Renderer,
+  args:{
+    ...Renderer.args,
+    readOnly:true,
+  },
 }

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

@@ -2,7 +2,7 @@
 /* eslint-disable import/no-extraneous-dependencies -- required here */
 import * as React from 'react'
 import { memo, useEffect } from 'react'
-import { useFormikContext } from 'formik'
+import { useField, useFormikContext } from 'formik'
 import { LexicalComposer } from '@lexical/react/LexicalComposer'
 import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
 import { ContentEditable } from '@lexical/react/LexicalContentEditable'
@@ -62,17 +62,15 @@ const EditorInput = ({
   showDebugger,
   stopPropagationKeys,
   setEditorState,
-  // handleOnChange,
   // ...otherProps
 }) => {
-  const { values, setFieldValue } = useFormikContext()
+  const [field, ,] = useField(name)
+  const { setFieldValue } = useFormikContext()
 
   const setInitialValue = () => {
-    const value = values[name]
-
     try {
-      JSON.parse(value)
-      return value
+      JSON.parse(field.value)
+      return field.value
     } catch {
       const defaultValue = {
         root:{
@@ -103,7 +101,7 @@ const EditorInput = ({
           version  :1,
         },
       }
-      defaultValue.root.children[0].children[0].text = value
+      defaultValue.root.children[0].children[0].text = field.value
       return JSON.stringify(defaultValue)
     }
   }

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

@@ -24,9 +24,15 @@ const FormBuilder = ({
   style,
   mode,
   formData,
+  readOnly,
+  shouldSubmit,
   formBuilderId,
   onBuilderFormSave,
+  onBuilderError,
+  onRendererError,
   onRendererFormSave,
+  onBuilderValidate,
+  initialBuilderValues,
   // ...otherProps
 }) => (
   <div
@@ -43,8 +49,24 @@ const FormBuilder = ({
     style={style}
     // {...otherProps}
   >
-    {mode === 'build' && <Builder formBuilderId={formBuilderId} onSave={onBuilderFormSave} />}
-    {mode === 'render' && <Renderer formData={formData} onSave={onRendererFormSave} />}
+    {mode === 'build' && (
+      <Builder
+        initialValues={initialBuilderValues}
+        formBuilderId={formBuilderId}
+        onSave={onBuilderFormSave}
+        onError={onBuilderError}
+        validate={onBuilderValidate}
+      />
+    )}
+    {mode === 'render' && (
+      <Renderer
+        formData={formData}
+        onSave={onRendererFormSave}
+        readOnly={readOnly}
+        shouldSubmit={shouldSubmit}
+        onError={onRendererError}
+      />
+    )}
   </div>
 )
 
@@ -73,10 +95,35 @@ FormBuilder.propTypes = {
    * This is the ID of the form element in the <Builder /> component
    */
   formBuilderId:PropTypes.string.isRequired,
+
+  /**
+   *  The form data to be used to construct the form builder in renderer mode
+   */
+  formData:PropTypes.shape({
+    sections:PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any)),
+  }),
+
+  /**
+   *  The initial values to instatiate form builder in builder mode
+   */
+  initialBuilderValues:PropTypes.shape({
+    sections:PropTypes.arrayOf(PropTypes.objectOf(PropTypes.any)),
+  }),
+
+  /**
+   * Whether the whole Form in renderer mode should be readOnly
+   */
+  readOnly:PropTypes.bool,
+
+  /**
+   * Whether the form builder in renderer mode should submit the form values itself
+   */
+  shouldSubmit:PropTypes.bool,
 }
 
 FormBuilder.defaultProps = {
-  mode:'build',
+  mode    :'build',
+  readOnly:false,
 }
 
 FormBuilder.Builder = Builder

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

@@ -1,6 +1,8 @@
 /* @pareto-engineering/generator-front 1.1.1-alpha.2 */
 import * as React from 'react'
 
+import { useEffect } from 'react'
+
 import { Formik, Form, FieldArray } from 'formik'
 
 import PropTypes from 'prop-types'
@@ -38,12 +40,43 @@ const Builder = ({
   className:userClassName,
   style,
   onSave,
+  onError,
+  validate,
   formBuilderId,
+  initialValues = {},
   // ...otherProps
 }) => {
   const handleSubmit = (values) => {
     const reOrderedValues = reorderInputs(values)
-    onSave(reOrderedValues)
+    onSave?.(reOrderedValues)
+  }
+
+  const initialFormState = initialValues?.sections
+    ? initialValues
+    : {
+      sections:[
+        {
+          title              :'',
+          description        :'',
+          key                :'section-0',
+          inputs             :[],
+          orderedInputDragIds:[],
+          navigation         :{ nextSection: 'next' },
+        },
+      ],
+    }
+
+  const handleDeleteSection = ({ index, remove, values }) => {
+    remove(index)
+
+    values.sections.splice(index, 1)
+
+    values.sections.forEach((section, sectionIndex) => {
+      section.inputs.forEach((input, inputIndex) => {
+        // eslint-disable-next-line no-param-reassign
+        input.name = `section_${sectionIndex}_input_${inputIndex}`
+      })
+    })
   }
 
   return (
@@ -61,22 +94,21 @@ const Builder = ({
 
       <p className="h3">Form Builder</p>
       <Formik
-        initialValues={{
-          sections:[
-            {
-              title              :'',
-              description        :'',
-              key                :'section-0',
-              inputs             :[],
-              orderedInputDragIds:[],
-              navigation         :{ nextSection: 'next' },
-            },
-          ],
-        }}
+        initialValues={initialFormState}
         onSubmit={handleSubmit}
+        validate={validate}
       >
-        {({ values }) => {
-          const availableSections = values.sections.map((section, idx) => ({
+        {({ values, errors, setFieldValue }) => {
+          useEffect(() => {
+            const reOrderedValues = reorderInputs(values)
+            onSave?.(reOrderedValues)
+          }, [values])
+
+          useEffect(() => {
+            onError?.(errors)
+          }, [errors, values])
+
+          const availableSections = values?.sections?.map((section, idx) => ({
             value:idx,
             label:`Go to ${section.title || `Untitled Section ${idx + 1}`}`,
           }))
@@ -84,10 +116,16 @@ const Builder = ({
           return (
             <Form id={formBuilderId}>
               <FieldArray name="sections">
-                {({ push }) => (
+                {({ push, remove }) => (
                   <>
-                    {values.sections.map((section, index) => (
-                      <Section key={section.key} index={index} />
+                    {values?.sections?.map((section, index) => (
+                      <Section
+                        key={section.key}
+                        index={index}
+                        handleDeleteSection={() => handleDeleteSection({
+                          index, remove, values, setFieldValue,
+                        })}
+                      />
                     ))}
                     <div className="section-footer">
                       <button

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

@@ -0,0 +1,97 @@
+/* @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 styleNames from '@pareto-engineering/bem/exports'
+
+import './styles.scss'
+
+// Local Definitions
+
+import { useOutsideClick } from 'ui/utils'
+
+import { Popover } from 'ui/a'
+
+const baseClassName = styleNames.base
+
+const componentClassName = 'actions-container'
+
+/**
+ * This is the component description.
+ */
+const ActionsContainer = ({
+  id,
+  className:userClassName,
+  style,
+  preferredPopoverOrder,
+  children,
+  // ...otherProps
+}) => {
+  const parentRef = useRef(null)
+  const [isOpen, setIsOpen] = useState(false)
+  useOutsideClick(parentRef, () => setIsOpen(false))
+
+  return (
+    <div
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      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}
+      >
+        {children}
+      </Popover>
+    </div>
+  )
+}
+
+ActionsContainer.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 order for the popover
+   */
+  preferredPopoverOrder:PropTypes.arrayOf(PropTypes.string),
+
+  /**
+   * The children of the actions container
+   */
+  children:PropTypes.node,
+}
+
+ActionsContainer.defaultProps = {
+  preferredPopoverOrder:['right', 'bottom', 'left', 'top'],
+}
+
+export default ActionsContainer

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

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

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

@@ -0,0 +1,59 @@
+/* @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}.actions-container {
+  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;
+        }
+
+        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
+        > button {
+          background: transparent;
+          border: 0;
+          color: var(--paragraph);
+          cursor: pointer;
+          font-size: calc(var(--s0) * .875rem);
+          text-align: left;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+