@pareto-engineering/design-system 5.2.1 → 5.4.0

package/src/ui/f/fields/index.js

@@ -1,21 +0,0 @@
-export { TextInput } from './TextInput'
-export { SelectInput } from './SelectInput'
-export { ChoicesInput } from './ChoicesInput'
-export { TextareaInput } from './TextareaInput'
-export { RatingsInput } from './RatingsInput'
-export { QueryCombobox } from './QueryCombobox'
-export { QuerySelect } from './QuerySelect'
-export { Checkbox } from './Checkbox'
-export { QueryChoices } from './QueryChoices'
-export { LinkInput } from './LinkInput'
-export { EditorInput } from './EditorInput'
-export {
-  LatexPreviewInput,
-  convertLatexToHtml,
-} from './LatexPreviewInput'
-export {
-  FileUpload,
-  fileUploadOptions,
-  getFileType,
-  getFileTypeFromUrl,
-} from './FileUpload'

package/src/ui/f/index.js

@@ -1,3 +0,0 @@
-export * from './common'
-export * from './fields'
-export { FormInput } from './FormInput'

package/src/ui/form-reset.scss

@@ -1,86 +0,0 @@
-form {
-  border: 0;
-  font-family: inherit;
-  font-size: 100%;
-  font-style: inherit;
-  font-weight: inherit;
-  margin: 0;
-  outline: 0;
-  padding: 0;
-  vertical-align: baseline;
-}
-
-/**
-1. Change the font styles in all browsers.
-2. Remove the margin in Firefox and Safari.
-*/
-input,
-button,
-textarea,
-label,
-select {
-  // background-color: inherit;
-  border: 0;
-  display: inline-block;
-  font: inherit;
-  font-size: 100%;
-  margin: 0;
-  outline: none;
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-
-/**
-Remove the inheritance of text transform in Edge and Firefox.
-*/
-
-button,
-select {
-  text-transform: none;
-}
-
-/**
-Correct the inability to style clickable types in iOS and Safari.
-*/
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  appearance: button;
-}
-
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/* Remove outline on focus */
-:focus {
-  outline: 0;
-}

package/src/ui/form.scss

@@ -1,34 +0,0 @@
-@use "form-reset.scss";
-
-$form-input-border-bottom: 1px solid var(--hard-background-far);
-$form-input-on-focus-border-bottom: 1px solid var(--soft-main1);
-$form-input-on-error-border-bottom: 1px solid var(--error);
-$label-input-heigth-width: 100%;
-
-:root {
-  --form-input-border-bottom: #{$form-input-border-bottom};
-  --form-input-on-focus-border-bottom: #{$form-input-on-focus-border-bottom};
-  --form-input-on-error-border-bottom: #{$form-input-on-error-border-bottom};
-}
-
-@mixin radio-checkbox-input-selected {
-  border: var(--form-input-on-focus-border-bottom);
-  position: relative;
-}
-
-
-@mixin radio-checkbox-input-not-selected {
-  border: var(--form-input-border-bottom);
-  position: relative;
-}
-
-
-@mixin radio-checkbox-input {
-  appearance: none;
-  cursor: pointer;
-  height: $label-input-heigth-width;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: $label-input-heigth-width;
-}

package/src/ui/g/DragAndDrop/DragAndDrop.jsx

@@ -1,125 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useState } from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import { DraggableItem } from './common'
-
-// Local Definitions
-
-import './styles.scss'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'drag-and-drop'
-
-/**
- * This is the component description.
- */
-const DragAndDrop = ({
-  id,
-  className:userClassName,
-  style,
-  as:Wrapper,
-  onOrderChange,
-  items,
-  // ...otherProps
-}) => {
-  const [draggableItems, setDraggableItems] = useState(items)
-  const [dragOverIndex, setDragOverIndex] = useState(null)
-
-  const handleDrop = (e, dragOverItemIndex) => {
-    e.preventDefault()
-    const dragItemIndex = e.dataTransfer.getData('text')
-    const orderedItems = [...draggableItems]
-    const [reorderedItem] = orderedItems.splice(dragItemIndex, 1)
-    orderedItems.splice(dragOverItemIndex, 0, reorderedItem)
-    setDraggableItems(orderedItems)
-    onOrderChange?.(orderedItems)
-    setDragOverIndex(null)
-  }
-
-  return (
-    <Wrapper
-      id={id}
-      className={[
-
-        baseClassName,
-
-        componentClassName,
-        userClassName,
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      // {...otherProps}
-    >
-      {draggableItems.map(({
-        identifier, disabled, Content, ...rest
-      }, index) => (
-        <DraggableItem
-          className={dragOverIndex === index && 'drag-over'}
-          draggable
-          onDrop={(e) => handleDrop(e, index)}
-          onDragOver={(e) => {
-            e.preventDefault()
-            setDragOverIndex(index)
-          }}
-          index={index}
-          key={identifier}
-          {...rest}
-        >
-          {Content}
-        </DraggableItem>
-      ))}
-    </Wrapper>
-  )
-}
-
-DragAndDrop.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 html element to use to display this component.
-   */
-  as:PropTypes.string,
-
-  /**
-   * The node list of items to be dragged around
-   */
-  items:PropTypes.arrayOf(PropTypes.shape({
-    Content   :PropTypes.node.isRequired,
-    identifier:PropTypes.string.isRequired,
-    as        :PropTypes.string,
-  })).isRequired,
-
-  /*
-  * A function to be called when the draggable items are re-ordered
-  */
-  onOrderChange:PropTypes.func,
-}
-
-DragAndDrop.defaultProps = {
-  as:'ul',
-}
-
-DragAndDrop.DraggableItem = DraggableItem
-
-export default DragAndDrop

package/src/ui/g/DragAndDrop/common/DraggableItem/DraggableItem.jsx

@@ -1,93 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useState } from 'react'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import './styles.scss'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'draggable-item'
-
-/**
- * This is the component description.
- */
-const DraggableItem = ({
-  id,
-  className:userClassName,
-  style,
-  as:Wrapper,
-  children,
-  index,
-  ...otherProps
-}) => {
-  const [isDragging, setIsDragging] = useState(false)
-
-  const handleDragStart = (e) => {
-    setIsDragging(true)
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', index)
-  }
-
-  const handleDragEnd = () => {
-    setIsDragging(false)
-  }
-
-  return (
-    <Wrapper
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        isDragging && 'dragging',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      onDragStart={(e) => handleDragStart(e)}
-      onDragEnd={(e) => handleDragEnd(e)}
-      {...otherProps}
-    >
-      {children}
-    </Wrapper>
-  )
-}
-DraggableItem.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 children JSX
-   */
-  children:PropTypes.node,
-
-  /**
-   * The html element to use to display this component.
-   */
-  as:PropTypes.string,
-}
-
-DraggableItem.defaultProps = {
-  as:'li',
-}
-
-export default DraggableItem

package/src/ui/g/DragAndDrop/common/DraggableItem/index.js

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

package/src/ui/g/DragAndDrop/common/DraggableItem/styles.scss

@@ -1,12 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-.#{bem.$base}.draggable-item {
-  cursor: move;
-  list-style: none;
-
-  &.dragging {
-    opacity: .5;
-  }
-}

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

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

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

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

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

@@ -1,8 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-.#{bem.$base}.drag-and-drop {
-  margin: 0;
-  padding: 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'