@pareto-engineering/design-system 4.0.0-alpha.78 → 4.0.0-alpha.81

package/src/ui/f/fields/EditorInput/common/ColorPicker/ColorPicker.jsx

@@ -28,11 +28,11 @@ const ColorPicker = ({
   className:userClassName,
   style,
   icon,
-  color,
+  defaultColorHex,
   onChange,
   // ...otherProps
 }) => {
-  const [colorValue, setColor] = useColor(color)
+  const [colorValue, setColor] = useColor(defaultColorHex)
 
   const parentRef = useRef(null)
 
@@ -101,10 +101,15 @@ ColorPicker.propTypes = {
    * The React-written, css properties for this element.
    */
   style:PropTypes.objectOf(PropTypes.string),
+
+  /**
+   * The required default hex value for the color picker
+   */
+  defaultColorHex:PropTypes.string,
 }
 
 ColorPicker.defaultProps = {
-  // someProp:false
+  defaultColorHex:'#ffffff',
 }
 
 export default ColorPicker

package/src/ui/f/fields/EditorInput/common/ToolbarPlugin/ToolbarPlugin.jsx

@@ -98,8 +98,6 @@ const ToolbarPlugin = ({
   const [activeEditor, setActiveEditor] = useState(editor)
   const [blockType, setBlockType] = useState('paragraph')
   const [rootType, setRootType] = useState('root')
-  const [fontColor, setFontColor] = useState('#000000')
-  const [bgColor, setBgColor] = useState('#ffffff')
   const [fontSize, setFontSize] = useState('15px')
   const [isEditable, setIsEditable] = useState(() => editor.isEditable())
   const [isBold, setIsBold] = useState(false)
@@ -180,16 +178,6 @@ const ToolbarPlugin = ({
       setFontSize(
         $getSelectionStyleValueForProperty(selection, 'font-size', '15px'),
       )
-      setFontColor(
-        $getSelectionStyleValueForProperty(selection, 'color', '#000'),
-      )
-      setBgColor(
-        $getSelectionStyleValueForProperty(
-          selection,
-          'background-color',
-          '#fff',
-        ),
-      )
     }
   }, [activeEditor])
 
@@ -354,12 +342,10 @@ const ToolbarPlugin = ({
       <div className="group">
         <ColorPicker
           icon="'"
-          color={fontColor}
           onChange={onFontColorSelect}
         />
         <ColorPicker
           icon="#"
-          color={bgColor}
           onChange={onBgColorSelect}
         />
       </div>

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

@@ -32,6 +32,11 @@ $default-check-mark-dimensions: 1rem;
         border: $focus-border;
       }
     }
+
+    > .content-editable {
+      border-bottom-left-radius: $default-input-border-radius;
+      border-bottom-right-radius: $default-input-border-radius;
+    }
   }
 
   &.disabled {
@@ -40,6 +45,10 @@ $default-check-mark-dimensions: 1rem;
       color: var(--metadata);
       cursor: not-allowed;
     }
+
+    > .content-editable {
+      border-radius: $default-input-border-radius;
+    }
   }
 
   .color-menu-button {
@@ -70,8 +79,6 @@ $default-check-mark-dimensions: 1rem;
   > .content-editable {
     background: $default-background;
     border: $default-border;
-    border-bottom-left-radius: $default-input-border-radius;
-    border-bottom-right-radius: $default-input-border-radius;
     color: var(--y);
     height: var(--rows);
     outline: none;

package/src/ui/f/fields/SelectInput/SelectInput.jsx

@@ -29,6 +29,7 @@ const SelectInput = ({
   labelColor,
   color,
   options,
+  hasDefault,
   validate,
   optional,
   description,
@@ -46,6 +47,7 @@ const SelectInput = ({
     labelColor,
     color,
     options,
+    hasDefault,
     validate,
     optional,
     description,
@@ -162,11 +164,17 @@ SelectInput.propTypes = {
    * The placeholder of the select input
    */
   placeholder:PropTypes.string,
+
+  /**
+   * Whether this select input has a default value(s)
+   */
+  hasDefault:PropTypes.bool,
 }
 
 SelectInput.defaultProps = {
-  disabled:false,
-  multiple:false,
+  disabled  :false,
+  multiple  :false,
+  hasDefault:false,
 }
 
 export default memo(SelectInput)

package/src/ui/f/fields/SelectInput/common/Single/Single.jsx

@@ -1,6 +1,8 @@
 /* @pareto-engineering/generator-front 1.0.12 */
 import * as React from 'react'
 
+import { useEffect } from 'react'
+
 import { useField } from 'formik'
 
 import PropTypes from 'prop-types'
@@ -29,6 +31,7 @@ const Single = ({
   labelColor,
   color,
   options,
+  hasDefault,
   validate,
   optional,
   description,
@@ -37,7 +40,16 @@ const Single = ({
   autoComplete,
   // ...otherProps
 }) => {
-  const [field] = useField({ name, validate })
+  const [field, , helpers] = useField({ name, validate })
+
+  const { setValue } = helpers
+
+  useEffect(() => {
+    if (hasDefault && !field.value) {
+      const defaultOption = options.find((option) => option.isDefault)
+      setValue(defaultOption?.value)
+    }
+  }, [hasDefault])
 
   return (
     <div

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

@@ -83,7 +83,7 @@ $default-gap: var(--gap);
 
           /* stylelint-disable-next-line max-nesting-depth -- required */
           &:disabled {
-            opacity: 0%;
+            background: transparent;
           }
         }
       }

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/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 @@
+export { ExpandableLexicalPreview } from './ExpandableLexicalPreview'

package/src/ui/index.js

@@ -3,5 +3,6 @@ export * from './b'
 export * from './c'
 export * from './d'
 export * from './f'
+export * from './g'
 export * from './utils'
 export * from './test'