@pareto-engineering/design-system 5.3.0 → 5.5.0

package/src/ui/g/ExpandableLexicalPreview/ExpandableLexicalPreview.jsx

@@ -1,180 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useState } from 'react'
-
-import { Formik } from 'formik'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-// Local Definitions
-import { EditorInput } from 'ui/f'
-
-import { Button } from 'ui/b'
-
-import { NewWindowPortal } from './common'
-
-import './styles.scss'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'expandable-lexical-preview'
-
-/**
- * This is the component description.
- */
-const ExpandableLexicalPreview = ({
-  id,
-  className:userClassName,
-  style,
-  nodes,
-  name,
-  color,
-  resize,
-  pageTitle,
-  onBlock,
-  onOpen,
-  header,
-  rows,
-  // ...otherProps
-}) => {
-  const [isCollapsed, setIsCollapsed] = useState(false)
-
-  const handleButtonClick = () => {
-    setIsCollapsed(!isCollapsed)
-  }
-
-  return (
-    <Formik
-      initialValues={{
-        [name]:nodes,
-      }}
-    >
-      <div
-        id={id}
-        className={[
-          baseClassName,
-          componentClassName,
-          userClassName,
-          `y-${color}`,
-          isCollapsed && 'collapsed',
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={style}
-      >
-        {typeof header === 'string' ? <p className="title h2">{header}</p> : header}
-        {isCollapsed ? (
-          <>
-            <Button
-              onClick={handleButtonClick}
-              color="background-far"
-              isCompact
-            >
-              <span className="ai-icon c-x x-paragraph">
-                C
-              </span>
-            </Button>
-            <NewWindowPortal
-              pageTitle={pageTitle}
-              onBlock={() => {
-                onBlock?.()
-                setIsCollapsed(false)
-              }}
-              onOpen={() => {
-                onOpen?.()
-                setIsCollapsed(true)
-              }}
-            >
-              <EditorInput
-                name={name}
-                resize={resize}
-                disabled
-              />
-            </NewWindowPortal>
-          </>
-        ) : (
-          <>
-            <EditorInput
-              name={name}
-              resize={resize}
-              disabled
-              id={`${id}-editor-input`}
-              rows={rows}
-            />
-            <Button
-              id={id}
-              className="expand-button ai-icon"
-              color="background-far"
-              isCompact
-              onClick={handleButtonClick}
-            >
-              D
-            </Button>
-          </>
-        )}
-      </div>
-    </Formik>
-  )
-}
-
-ExpandableLexicalPreview.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),
-
-  /**
-   * Color of the text
-   */
-  color:PropTypes.string,
-
-  /**
-   * The nodes to render in the form of a json string
-   */
-  nodes:PropTypes.string,
-
-  /**
-   * The resize property of the textarea
-   */
-  resize:PropTypes.string,
-
-  /**
-   * The header for the preview component.
-   */
-  header:PropTypes.node,
-
-  /**
-   * The page title for the expanded preview.
-   */
-  pageTitle:PropTypes.string,
-
-  /**
-   * The name used to acces the nodes
-   */
-  name:PropTypes.string.isRequired,
-
-  /**
-   * The function to run when a new window portal can be opened
-   */
-  onBlock:PropTypes.func.isRequired,
-}
-
-ExpandableLexicalPreview.defaultProps = {
-  color :'paragraph',
-  resize:'vertical',
-}
-
-export default ExpandableLexicalPreview

package/src/ui/g/ExpandableLexicalPreview/common/NewWindowPortal/NewWindowPortal.jsx

@@ -1,80 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import { createPortal } from 'react-dom'
-
-import { useState, useEffect, useMemo } from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-// Local Definitions
-import { useTheme } from 'ui/a'
-
-import './styles.scss'
-
-const baseClassName = styleNames.base
-
-const copyStyles = (sourceDocument, targetDocument) => {
-  Array.from(sourceDocument.querySelectorAll('link[rel="stylesheet"], style'))
-    .forEach((link) => {
-      targetDocument.head.appendChild(link.cloneNode(true))
-    })
-}
-/**
- * This is the component description.
- */
-const NewWindowPortal = ({
-  children, pageTitle, onBlock, onOpen,
-}) => {
-  const [newWindow, setNewWindow] = useState(null)
-  const container = useMemo(() => document.createElement('div'), [])
-  const { userTheme = 'light' } = useTheme()
-
-  useEffect(() => {
-    if (!container) return
-
-    container.classList.add(baseClassName, 'new-window-portal', `ui-${userTheme}`)
-    const newExternalWindow = window.open('', pageTitle, 'width="100%",height="100%"')
-
-    if (newExternalWindow) {
-      newExternalWindow.document.title = pageTitle
-      newExternalWindow.document.body.appendChild(container)
-      setNewWindow(newExternalWindow)
-      onOpen()
-    } else {
-      console.warn('A new window / tab could not be opened. Check your settings and/or extensions, maybe it was blocked.')
-      onBlock()
-    }
-
-    // eslint-disable-next-line consistent-return
-    return () => {
-      container.classList.remove(...container.classList)
-      newExternalWindow?.close()
-    }
-  }, [container, pageTitle, userTheme])
-
-  useEffect(() => {
-    if (newWindow) {
-      copyStyles(document, newWindow.document)
-    }
-  }, [newWindow])
-
-  return createPortal(children, container)
-}
-NewWindowPortal.propTypes = {
-  /**
-   *  The children JSX
-   */
-  children:PropTypes.node,
-
-  /**
-   * The new window page title
-   */
-  pageTitle:PropTypes.string.isRequired,
-}
-
-NewWindowPortal.defaultProps = {
-  // someProp:false
-}
-
-export default NewWindowPortal

package/src/ui/g/ExpandableLexicalPreview/common/NewWindowPortal/index.js

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

package/src/ui/g/ExpandableLexicalPreview/common/NewWindowPortal/styles.scss

@@ -1,9 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-.#{bem.$base}.new-window-portal {
-  background-color: var(--background-far);
-  height: 100%;
-  width: 100%;
-}

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

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

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

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

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

@@ -1,33 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-.#{bem.$base}.expandable-lexical-preview {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: var(--gap);
-  position: relative;
-  width: 100%;
-
-  &.collapsed {
-    flex-direction: row;
-  }
-
-  > .title {
-    margin: 0;
-  }
-
-  > .#{bem.$base}.button {
-    align-items: center;
-    border: 1px solid var(--outline-inputs);
-    display: flex;
-  }
-
-  > .#{bem.$base}.expand-button {
-    border: 1px solid var(--outline-inputs);
-    position: absolute;
-    right: 1em;
-    top: 5.5rem;
-  }
-}

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

@@ -1,157 +0,0 @@
-/* @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,
-  readOnly,
-  shouldSubmit,
-  formBuilderId,
-  onBuilderFormSave,
-  onBuilderError,
-  onRendererFormSave,
-  onFileUpload,
-  onBuilderValidate,
-  initialBuilderValues,
-  fileUploadStatus,
-  handleFileDelete,
-  taskData,
-  // ...otherProps
-}) => {
-  const formattedJson = JSON.stringify(taskData, null, 2)
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      {
-        taskData && (
-          <pre className="task-data md-span-12 span-8 s-1">
-            {formattedJson}
-          </pre>
-        )
-      }
-      {mode === 'build' && (
-        <Builder
-          initialValues={initialBuilderValues}
-          formBuilderId={formBuilderId}
-          onSave={onBuilderFormSave}
-          onError={onBuilderError}
-          validate={onBuilderValidate}
-        />
-      )}
-      {mode === 'render' && (
-        <Renderer
-          formData={formData}
-          onSave={onRendererFormSave}
-          readOnly={readOnly}
-          shouldSubmit={shouldSubmit}
-          fileUploadStatus={fileUploadStatus}
-          handleFileDelete={handleFileDelete}
-          onFileUpload={onFileUpload}
-        />
-      )}
-    </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,
-
-  /**
-   *  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,
-
-  /**
-   * The upload status of files if any
-   */
-  fileUploadStatus:PropTypes.objectOf(PropTypes.string),
-
-  /**
-   * The task preview data
-   */
-  // eslint-disable-next-line react/forbid-prop-types
-  taskData:PropTypes.objectOf(PropTypes.any),
-}
-
-FormBuilder.defaultProps = {
-  mode    :'build',
-  readOnly:false,
-}
-
-FormBuilder.Builder = Builder
-FormBuilder.Renderer = Renderer
-
-export default FormBuilder

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

@@ -1,213 +0,0 @@
-/* @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'
-
-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,
-  onError,
-  validate,
-  formBuilderId,
-  initialValues = {},
-  // ...otherProps
-}) => {
-  const handleSubmit = (values) => {
-    const reOrderedValues = reorderInputs(values)
-    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 (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-    >
-
-      <p className="h3">Form Builder</p>
-      <Formik
-        initialValues={initialFormState}
-        onSubmit={handleSubmit}
-        validate={validate}
-      >
-        {({ 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}`}`,
-          }))
-
-          return (
-            <Form id={formBuilderId}>
-              <FieldArray name="sections">
-                {({ push, remove }) => (
-                  <>
-                    {values?.sections?.map((section, index) => (
-                      <Section
-                        key={section.key}
-                        index={index}
-                        handleDeleteSection={() => handleDeleteSection({
-                          index, remove, values, setFieldValue,
-                        })}
-                      />
-                    ))}
-                    <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