@pareto-engineering/design-system 5.3.0 → 5.4.0

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

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

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

@@ -1,59 +0,0 @@
-/* @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%;
-        }
-      }
-    }
-  }
-}
-
-

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

@@ -1,321 +0,0 @@
-/* @pareto-engineering/generator-front 1.1.1-alpha.2 */
-import * as React from 'react'
-
-import { useState } from 'react'
-
-import PropTypes from 'prop-types'
-
-import { FieldArray, useFormikContext } from 'formik'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import {
-  ChoicesInput, SelectInput, TextInput, integerAndGreaterThanZero, fileUploadOptions,
-} from 'ui/f'
-
-import { ToggleSwitch } from 'ui/a'
-
-import './styles.scss'
-
-// Local Definitions
-
-import { ActionsContainer } from '../ActionsContainer'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'input-builder'
-
-const getToggleSwitchStyles = (condition) => (
-  condition
-    ? { '--slider-background-color': 'var(--disabled)' }
-    : {}
-)
-
-/**
- * This is the component description.
- */
-const InputBuilder = ({
-  id,
-  className:userClassName,
-  style,
-  sectionIndex,
-  inputIndex,
-  onDelete,
-  // ...otherProps
-}) => {
-  const { values, setFieldValue } = useFormikContext()
-  const input = values.sections[sectionIndex]?.inputs[inputIndex]
-
-  const handleToggleRequired = () => {
-    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.required`, !input?.required)
-  }
-
-  const [hasDescription, setHasDescription] = useState(false)
-
-  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)
-  }
-
-  const isFile = input?.type === 'file'
-
-  const handleToggleShowSpecificFileTypes = () => {
-    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.showSpecificFileTypes`, !input.showSpecificFileTypes)
-  }
-
-  const textChoices = ['text', 'number', 'textarea', 'latex-preview-input']
-
-  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:'number',
-                label:'Number input',
-              },
-              {
-                value:'textarea',
-                label:'Long paragraph',
-              },
-              {
-                value:'select',
-                label:'Dropdown select',
-              },
-              {
-                value:'multiple',
-                label:'Checkboxes',
-              },
-              {
-                value:'choices',
-                label:'Radio buttons',
-              },
-              {
-                value:'file',
-                label:'File upload',
-              },
-              {
-                value:'latex-preview-input',
-                label:'Textbox with LaTeX preview',
-              },
-            ]}
-          />
-          <div className="controls">
-            <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={getToggleSwitchStyles(!input?.required)}
-                inputId={`sections_${sectionIndex}_inputs.${inputIndex}_toggle`}
-              />
-            </div>
-            <ActionsContainer>
-              <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>
-              </ul>
-            </ActionsContainer>
-          </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>
-        {textChoices.includes(input?.type) && (
-          <div className="character-limit-container">
-            <div className="is-required">
-              <span className="s0">
-                Limit number of characters permitted for this input
-              </span>
-              <ToggleSwitch
-                handleOnChange={() => {
-                  setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.hasCharacterLimit`, !input?.hasCharacterLimit)
-                  if (!input?.hasCharacterLimit) {
-                    setFieldValue(`sections.${sectionIndex}.inputs.${inputIndex}.maxLength`, '')
-                  }
-                }}
-                checked={input?.hasCharacterLimit}
-                style={getToggleSwitchStyles(!input?.hasCharacterLimit)}
-                inputId={`sections_${sectionIndex}_inputs.${inputIndex}_character_limit_toggle`}
-              />
-            </div>
-            <div className="character-limit-input">
-              {input?.hasCharacterLimit && (
-              <TextInput
-                label="Enter the maximum number of characters permitted."
-                name={`sections.${sectionIndex}.inputs.${inputIndex}.maxLength`}
-                placeholder=""
-                type="number"
-                validate={integerAndGreaterThanZero}
-                value={input?.maxLength}
-              />
-              )}
-            </div>
-          </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>
-        )}
-
-        {isFile && (
-          <div className="input-file-options">
-            <TextInput
-              label="Maximum number of files"
-              name={`sections.${sectionIndex}.inputs.${inputIndex}.maxCount`}
-              placeholder="1"
-              type="number"
-              min="0"
-              validate={integerAndGreaterThanZero}
-            />
-            <div className="specific-file-types">
-              <ToggleSwitch
-                handleOnChange={handleToggleShowSpecificFileTypes}
-                checked={input?.showSpecificFileTypes}
-                style={getToggleSwitchStyles(!input?.showSpecificFileTypes)}
-                inputId={`sections_${sectionIndex}_inputs.${inputIndex}_show_specific_file_types`}
-              />
-              <span className="s0">
-                Allow only specific file types
-              </span>
-            </div>
-            {input?.showSpecificFileTypes && (
-              <>
-                <ChoicesInput
-                  name={`sections.${sectionIndex}.inputs.${inputIndex}.accept`}
-                  options={fileUploadOptions}
-                  multiple
-                />
-              </>
-            )}
-          </div>
-        )}
-      </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),
-}
-
-InputBuilder.defaultProps = {
-  // some properties
-}
-
-export default InputBuilder

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

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

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

@@ -1,169 +0,0 @@
-/* @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}.input-builder {
-  border: var(--theme-default-border-style) var(--ui-lines);
-  border-radius: calc(var(--theme-default-border-radius) / 2);
-  display: flex;
-  margin-top: $default-margin;
-  padding: $default-padding;
-
-  > .drag-icon {
-    margin-right: $default-margin;
-  }
-
-  > .input-options-container {
-    flex: auto;
-
-    > .controls-container {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: $default-margin;
-
-      .#{bem.$base}.select-input {
-        flex: .3;
-      }
-
-      >.controls {
-        display: flex;
-        gap: var(--gap);
-
-        /* stylelint-disable selector-max-compound-selectors -- required */
-        > .is-required {
-          display: flex;
-        }
-
-        /* stylelint-disable selector-max-universal -- required */
-        > * {
-          height: fit-content;
-        }
-
-        > button {
-          background-color: transparent;
-          border: 0;
-          cursor: pointer;
-
-          /* stylelint-disable max-nesting-depth -- required */
-          > .ai-icon,
-          .icon {
-            font-size: calc(var(--s1) * 1rem);
-          }
-        }
-      }
-    }
-
-    > .input-name-description {
-      display: flex;
-      flex-direction: column;
-      gap: var(--gap);
-      margin-bottom: $default-margin;
-    }
-
-    > .character-limit-container {
-      display: flex;
-      flex-direction: column;
-      gap: var(--gap);
-
-      > .is-required {
-        display: flex;
-        flex-direction: row;
-      }
-
-      > .character-limit-input {
-        flex-direction: column;
-      }
-    }
-
-    > .input-options {
-      display: flex;
-      flex-direction: column;
-      gap: var(--gap);
-
-      > p {
-        margin: 0;
-      }
-
-      > .option-container {
-        align-items: center;
-        display: flex;
-        gap: calc(var(--gap) / 2);
-
-        > .input-icon-sample {
-          border: var(--theme-default-border-style) var(--outline-inputs);
-          border-radius: var(--theme-default-border-radius);
-          cursor: default;
-          height: 1.6rem;
-          width: 1.6rem;
-
-          &.checkbox {
-            border-radius: calc(var(--theme-default-border-radius) / 4);
-          }
-        }
-
-
-        > .#{bem.$base}.text-input {
-          flex: .5;
-        }
-
-        > .#{bem.$base}.select-input {
-          flex: .3;
-        }
-
-        > button {
-          background-color: transparent;
-          border: 0;
-          color: var(--ui-icons);
-          cursor: pointer;
-        }
-      }
-
-      >.add-option-cta {
-        --color: var(--interactive);
-        --border-color: var(--interactive);
-        align-items: center;
-        align-self: flex-start;
-        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);
-        }
-
-        > .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;
-        }
-      }
-    }
-
-    > .input-file-options {
-      display: flex;
-      flex-direction: column;
-      gap: var(--gap);
-      margin-bottom: $default-margin;
-
-      > .specific-file-types {
-        display: flex;
-      }
-    }
-  }
-}
-
-