@pareto-engineering/design-system 4.0.0-alpha.9 → 4.0.0

package/src/ui/f/fields/TextareaInput/styles.scss

@@ -1,33 +1,53 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 
 @use "@pareto-engineering/bem";
-
-$default-padding: .5em;
+@use "@pareto-engineering/styles/src/mixins";
+@use "@pareto-engineering/styles/src/globals" as *;
+
+$default-padding: .55em .75em;
+$default-border: 1px solid var(--outline-inputs);
+$default-input-border-radius: var(--theme-default-input-border-radius);
+$default-border: var(--theme-default-input-border);
+$hover-border: var(--theme-hover-input-border);
+$focus-border: var(--theme-focus-input-border);
+$default-background: var(--background-inputs);
+$disabled-background: var(--background-inputs-30);
 
 .#{bem.$base}.text-area-input {
   display: flex;
   flex-direction: column;
 
-  .textarea {
-    background: var(--soft-y);
-    border: var(--theme-border-style) var(--hard-y);
-    color: var(--on-y);
+  > .#{bem.$base}.form-label {
+    margin-bottom: var(--gap);
+  }
+
+
+  > .textarea {
+    background: $default-background;
+    border: $default-border;
+    border-radius: $default-input-border-radius;
+    color: var(--y);
+    outline: none;
     padding: $default-padding;
+    width: 100%;
 
     &::placeholder {
       color: var(--metadata);
     }
 
-    &:not(:disabled):hover {
-      border: var(--theme-border-style) var(--soft-background4);
-    }
-
     &:disabled {
-      background-color: var(--hard-y);
+      background-color: $disabled-background;
     }
 
-    &:focus {
-      background: var(--soft-background4);
+    &:not(:disabled) {
+      &:hover,
+      &:active {
+        border: $hover-border;
+      }
+
+      &:focus {
+        border: $focus-border;
+      }
     }
   }
 }

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

@@ -7,3 +7,5 @@ export { QueryCombobox } from './QueryCombobox'
 export { QuerySelect } from './QuerySelect'
 export { Checkbox } from './Checkbox'
 export { QueryChoices } from './QueryChoices'
+export { LinkInput } from './LinkInput'
+export { EditorInput } from './EditorInput'

package/src/ui/form.scss

@@ -1,6 +1,6 @@
 @use "form-reset.scss";
 
-$form-input-border-bottom: 1px solid var(--hard-background1);
+$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%;

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

@@ -0,0 +1,118 @@
+/* @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 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)
+  }
+
+  return (
+    <Wrapper
+      id={id}
+      className={[
+
+        baseClassName,
+
+        componentClassName,
+        userClassName,
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      // {...otherProps}
+    >
+      {draggableItems.map(({
+        identifier, disabled, Content, ...rest
+      }, index) => (
+        <DraggableItem
+          draggable
+          onDrop={(e) => handleDrop(e, 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

@@ -0,0 +1,98 @@
+/* @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)
+  }
+
+  const handleDragOver = (e) => {
+    e.preventDefault()
+  }
+
+  return (
+    <Wrapper
+      id={id}
+      className={[
+        baseClassName,
+        componentClassName,
+        userClassName,
+        isDragging && 'dragging',
+      ]
+        .filter((e) => e)
+        .join(' ')}
+      style={style}
+      onDragStart={(e) => handleDragStart(e)}
+      onDragOver={(e) => handleDragOver(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

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

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

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

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

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

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

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

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

@@ -0,0 +1,180 @@
+/* @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,
+  // ...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="the-bad-ass-input"
+            />
+            <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

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

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

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

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

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

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

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

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

@@ -0,0 +1,34 @@
+/* @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/index.js

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

package/src/ui/index.js

@@ -1,8 +1,8 @@
-export * from './r' // Router Extensions
 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/utils/hooks/index.js

@@ -1,2 +1,3 @@
 export { default as useWindowSize } from './useWindowSize'
 export { default as useDynamicPosition } from './useDynamicPosition'
+export { default as useOutsideClick } from './useOutsideClick'

package/src/ui/utils/hooks/useOutsideClick.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+
+const useOutsideClick = (ref, callback) => {
+  // const ref = useRef(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback()
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    document.addEventListener('touchstart', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+      document.removeEventListener('touchstart', handleClickOutside)
+    }
+  }, [callback])
+}
+
+export default useOutsideClick

package/src/ui/utils/index.js

@@ -1 +1 @@
-export { useWindowSize, useDynamicPosition } from './hooks'
+export { useWindowSize, useDynamicPosition, useOutsideClick } from './hooks'