@pareto-engineering/design-system 5.2.1 → 5.4.0

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

@@ -1,71 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-
-.#{bem.$base}.builder-section {
-  border-bottom: var(--theme-default-border-style) var(--on-background-inputs);
-
-
-  > .section-header {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  > .#{bem.$base}.editor-input {
-    margin-top: $default-margin;
-  }
-
-  > form {
-
-    /* stylelint-disable selector-max-compound-selectors -- required */
-
-    > .#{bem.$base}.drag-and-drop {
-      >.drag-over {
-        > .#{bem.$base}.input-builder {
-          border: 1px dashed var(--ui-lines);
-        }
-      }
-    }
-
-    > .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;
-
-      &:hover {
-        color: var(--interactive);
-
-        > .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/Builder/common/index.js

@@ -1,3 +0,0 @@
-export { Section } from './Section'
-export { InputBuilder } from './InputBuilder'
-export { ActionsContainer } from './ActionsContainer'

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

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

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

@@ -1,63 +0,0 @@
-/* @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);
-
-        /* stylelint-disable-next-line selector-max-compound-selectors -- required */
-        > span {
-          white-space: nowrap;
-        }
-
-        > .#{bem.$base}.select-input {
-          flex: auto;
-        }
-      }
-    }
-  }
-}

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

@@ -1,240 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react'
-
-import { useState, useEffect, useRef } from 'react'
-
-import { Formik, Form } from 'formik'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import { Button } from 'ui/b'
-
-import './styles.scss'
-
-// Local Definitions
-
-import { applyCharacterLimit } from 'ui/utils'
-import { Section } from './common'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'renderer'
-
-const validate = (currentSectionIndex, formData, values) => {
-  const errors = {}
-
-  const hasAtLeastOneValue = Object.keys(values).some((valueKey) => {
-    const inputValue = values[valueKey]
-    return inputValue && inputValue !== ''
-  })
-
-  if (!hasAtLeastOneValue) {
-    errors.message = 'At least one input must have a value'
-  }
-
-  // Check required fields for current section
-  formData.sections[currentSectionIndex].inputs.forEach((input) => {
-    if (input.required && !values[input.name]) {
-      errors[input.name] = 'This field is required'
-    }
-  })
-
-  return errors
-}
-
-const reconstructFormDataWithValues = (formData, values) => {
-  const valuesMap = {}
-  Object.keys(values).forEach(async (key) => {
-    if (!key.includes('files')) {
-      valuesMap[key] = values[key]
-    }
-  })
-  const newData = {
-    ...formData,
-    sections:formData.sections.map((section) => ({
-      ...section,
-      inputs:section.inputs.map((input) => ({
-        ...input,
-        value:valuesMap[input.name] !== undefined ? valuesMap[input.name] : input.value,
-      })),
-    })),
-  }
-  return newData
-}
-
-/**
- * This is the component description.
- */
-const Renderer = ({
-  id,
-  className:userClassName,
-  style,
-  formData,
-  readOnly,
-  onSave,
-  shouldSubmit,
-  fileUploadStatus,
-  handleFileDelete,
-  onFileUpload,
-  shouldUpdateInputStateInRealTime = true,
-  // ...otherProps
-}) => {
-  const [currentSectionIndex, setCurrentSectionIndex] = useState(0)
-  const [sectionHistory, setSectionHistory] = useState([])
-  const [updatedFormData, setUpdatedFormData] = useState({ ...formData })
-
-  useEffect(() => {
-    setUpdatedFormData(formData)
-  }, [formData])
-
-  const initialValues = formData.sections.reduce((acc, section) => {
-    section.inputs.forEach((input) => {
-      acc[input.name] = input.value || ''
-    })
-    return acc
-  }, {})
-
-  const handleSubmit = (values) => {
-    const currentSection = updatedFormData.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'
-        ? updatedFormData.sections.length // submit
-        : parseInt(currentSection.navigation.nextSection, 10) // go to specific section
-    }
-
-    if (nextSectionIndex >= updatedFormData.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])
-    }
-  }
-
-  const isSubmit = currentSectionIndex === updatedFormData.sections.length - 1
-  || updatedFormData.sections[currentSectionIndex].navigation.nextSection === 'submit'
-
-  const ref = useRef(null)
-
-  const currentSectionInputs = updatedFormData.sections[currentSectionIndex].inputs
-  const hasErrorsOnInitialRender = currentSectionInputs
-    .some((input) => (input.required && !ref.current?.values[input.name])
-    || ref.current?.errors[input.name])
-
-  return (
-    <div
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-
-    >
-      <Formik
-        initialValues={initialValues}
-        onSubmit={handleSubmit}
-        validate={(values) => validate(currentSectionIndex, updatedFormData, values)}
-        innerRef={ref}
-      >
-        {({ values, errors }) => {
-          useEffect(() => {
-            if (shouldUpdateInputStateInRealTime) {
-              const formDataWithValues = reconstructFormDataWithValues(updatedFormData, values)
-              onSave?.(formDataWithValues)
-            }
-          }, [values])
-
-          useEffect(() => {
-            applyCharacterLimit({ setMaxLength: false })
-          }, [values])
-
-          const hasErrors = Object.keys(errors).length > 0
-          return (
-            <Form>
-              {updatedFormData.sections.map((section, sectionIndex) => (
-                sectionIndex === currentSectionIndex && (
-                <Section
-                  key={`${section.title}`}
-                  {...section}
-                  readOnly={readOnly}
-                  fileUploadStatus={fileUploadStatus}
-                  handleFileDelete={handleFileDelete}
-                  onFileUpload={onFileUpload}
-                  sectionIndex={sectionIndex}
-                />
-                )
-              ))}
-              <div className="navigator-container">
-                {
-                  updatedFormData.sections.length > 1 && (
-                    <Button
-                      className="previous-button"
-                      color="interactive"
-                      isGradient
-                      isCompact
-                      isGhost
-                      onClick={handlePrevious}
-                      disabled={sectionHistory.length === 0}
-                    >
-                      Previous
-                    </Button>
-                  )
-                }
-                {(!isSubmit || shouldSubmit) && (
-                  <Button color="interactive" isGradient type="submit" disabled={hasErrors || hasErrorsOnInitialRender}>
-                    {isSubmit ? '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),
-}
-
-Renderer.defaultProps = {
-  // someProp: false,
-}
-
-export default Renderer

package/src/ui/g/FormBuilder/common/Renderer/common/Section/Section.jsx

@@ -1,114 +0,0 @@
-/* eslint-disable no-alert */
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react'
-
-import PropTypes from 'prop-types'
-
-// Local Definitions
-
-import { FormInput, getFileType } from 'ui/f'
-
-import { ExpandableLexicalPreview } from 'ui/g'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'section'
-
-const fileTypeMapper = {
-  VID :'Video',
-  TXT :'Text',
-  IMG :'Image',
-  PDF :'PDF',
-  AUD :'Audio',
-  FILE:'Generic',
-}
-
-/**
- * This is the component description.
- */
-const Section = ({
-  id,
-  className:userClassName,
-  style,
-  title,
-  description,
-  inputs,
-  readOnly,
-  fileUploadStatus,
-  handleFileDelete,
-  onFileUpload,
-  sectionIndex,
-  // ...otherProps
-}) => (
-  <div
-    id={id}
-    className={[
-      baseClassName,
-      componentClassName,
-      userClassName,
-    ]
-      .filter((e) => e)
-      .join(' ')}
-    style={style}
-  >
-    <p className="h3">{title}</p>
-    <ExpandableLexicalPreview
-      nodes={description}
-      name="instructions"
-    />
-    {inputs?.map((input, inputIndex) => {
-      const isFileInput = input.type === 'file'
-      return (
-        <FormInput
-          key={input.name}
-          {...input}
-          disabled={readOnly}
-          {...(isFileInput && {
-            uploadStatus:fileUploadStatus,
-            handleFileDelete,
-            onChange    :(files) => {
-              const filesToUpload = files
-                ?.filter((file) => file instanceof File)
-                .map((file) => ({
-                  file,
-                  name    :file.name,
-                  mimeType:file.type,
-                  type    :fileTypeMapper[getFileType(file)] || 'Generic',
-                  title   :file.name,
-                  sectionIndex,
-                  inputIndex,
-                }))
-
-              onFileUpload(filesToUpload)
-            },
-          })}
-        />
-      )
-    })}
-  </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

@@ -1,2 +0,0 @@
-/* @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

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

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

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

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

@@ -1,30 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-
-@use "@pareto-engineering/bem";
-
-$default-margin: 1rem;
-
-.#{bem.$base}.renderer {
-  > form {
-    > .#{bem.$base}.section {
-      margin-bottom: calc($default-margin * 2);
-
-      > p {
-        margin: 0;
-      }
-      > .#{bem.$base}.expandable-lexical-preview {
-        margin-bottom: $default-margin;
-      }
-    }
-
-    > .navigator-container {
-      display: flex;
-      gap: var(--gap);
-      justify-content: space-between;
-
-      > .previous-button {
-        align-items: center;
-      }
-    }
-  }
-}

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

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

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

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

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

@@ -1,25 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-
-@use "@pareto-engineering/bem";
-
-$default-border: 1px solid var(--ui-lines);
-$default-border-radius: .5em;
-$default-max-height: 10em;
-$default-padding: calc(var(--gap) / 2);
-$default-margin: var(--gap);
-
-.#{bem.$base}.form-builder {
-  > .task-data {
-    background: var(--background-inputs);
-    border: $default-border;
-    border-radius: $default-border-radius;
-    color: var(--on-background-far);
-    height: $default-max-height;
-    margin-bottom: $default-margin;
-    max-width: 100%;
-    overflow: auto;
-    padding: $default-padding;
-    resize: vertical;
-    text-wrap: wrap;
-  }
-}

package/src/ui/g/index.js

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

package/src/ui/index.js

@@ -1,8 +0,0 @@
-export * from './a'
-export * from './b'
-export * from './c'
-export * from './d'
-export * from './f'
-export * from './g'
-export * from './utils'
-export * from './test'

package/src/ui/test/QueryLoader/QueryLoader.jsx

@@ -1,41 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useEffect, Suspense } from 'react'
-
-import { useQueryLoader, graphql } from 'react-relay'
-
-// Local Definitions
-
-import { PreloadedTestData } from './common'
-
-const testQuery = graphql`
-  query QueryLoaderHelloQuery {
-    hello
-  }
-`
-
-/**
- * This is the component description.
- */
-const QueryLoader = () => {
-  const [queryReference, loadQuery] = useQueryLoader(testQuery)
-
-  useEffect(() => {
-    loadQuery({})
-  }, [])
-
-  return (
-    <Suspense fallback="loading">
-      {queryReference ? (
-        <PreloadedTestData queryReference={queryReference} query={testQuery} />
-      ) : null}
-    </Suspense>
-  )
-}
-
-QueryLoader.defaultProps = {
-  // someProp:false
-}
-
-export default QueryLoader

package/src/ui/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js

@@ -1,68 +0,0 @@
-/**
- * @flow
- */
-
-/* eslint-disable */
-
-'use strict';
-
-/*::
-import type { ConcreteRequest } from 'relay-runtime';
-export type QueryLoaderHelloQueryVariables = {||};
-export type QueryLoaderHelloQueryResponse = {|
-  +hello: ?string
-|};
-export type QueryLoaderHelloQuery = {|
-  variables: QueryLoaderHelloQueryVariables,
-  response: QueryLoaderHelloQueryResponse,
-|};
-*/
-
-
-/*
-query QueryLoaderHelloQuery {
-  hello
-}
-*/
-
-const node/*: ConcreteRequest*/ = (function(){
-var v0 = [
-  {
-    "alias": null,
-    "args": null,
-    "kind": "ScalarField",
-    "name": "hello",
-    "storageKey": null
-  }
-];
-return {
-  "fragment": {
-    "argumentDefinitions": [],
-    "kind": "Fragment",
-    "metadata": null,
-    "name": "QueryLoaderHelloQuery",
-    "selections": (v0/*: any*/),
-    "type": "Query",
-    "abstractKey": null
-  },
-  "kind": "Request",
-  "operation": {
-    "argumentDefinitions": [],
-    "kind": "Operation",
-    "name": "QueryLoaderHelloQuery",
-    "selections": (v0/*: any*/)
-  },
-  "params": {
-    "cacheID": "463f9ee8a82dd6ec8dedeb28649cce74",
-    "id": null,
-    "metadata": {},
-    "name": "QueryLoaderHelloQuery",
-    "operationKind": "query",
-    "text": "query QueryLoaderHelloQuery {\n  hello\n}\n"
-  }
-};
-})();
-// prettier-ignore
-(node/*: any*/).hash = 'b92d001ab0208bd484a99f77c274d5ef';
-
-module.exports = node;