@pareto-engineering/design-system 4.0.0-alpha.63 → 4.0.0-alpha.64

package/src/ui/f/fields/V2/EditorInput/EditorInput.jsx

@@ -1,244 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-import * as React from 'react'
-import { useInsertionEffect, memo } from 'react'
-import { useFormikContext } from 'formik'
-import { LexicalComposer } from '@lexical/react/LexicalComposer'
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin'
-import { ContentEditable } from '@lexical/react/LexicalContentEditable'
-import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin'
-import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin'
-import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin'
-import { ListPlugin } from '@lexical/react/LexicalListPlugin'
-import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin'
-import { AutoLinkNode, LinkNode } from '@lexical/link'
-import { ListItemNode, ListNode } from '@lexical/list'
-
-import PropTypes from 'prop-types'
-import styleNames from '@pareto-engineering/bem/exports'
-
-// Local Definitions
-
-import { FormLabelV2, FormDescriptionV2 } from '../../../common'
-import { Toolbar, TreeViewPlugin } from './common'
-
-const baseClassName = styleNames.base
-const componentClassName = 'editor-input'
-
-/**
- * This is the component description.
- */
-const EditorInput = ({
-  id,
-  className:userClassName,
-  style,
-  name,
-  label,
-  // validate,
-  resize,
-  color,
-  rows,
-  optional,
-  labelColor,
-  description,
-  disabled,
-  showDebugger,
-  // ...otherProps
-}) => {
-  useInsertionEffect(() => {
-    import('./styles.scss')
-  }, [])
-
-  const formik = useFormikContext()
-
-  const setInitialValue = () => {
-    const value = formik.values[name]
-    try {
-      JSON.parse(value)
-      return value
-    } catch {
-      const defaultValue = {
-        root:{
-          children:[
-            {
-              children:[
-                {
-                  detail :0,
-                  format :0,
-                  mode   :'normal',
-                  style  :'',
-                  text   :'',
-                  type   :'text',
-                  version:1,
-                },
-              ],
-              direction:'ltr',
-              format   :'',
-              indent   :0,
-              type     :'paragraph',
-              version  :1,
-            },
-          ],
-          direction:'ltr',
-          format   :'',
-          indent   :0,
-          type     :'root',
-          version  :1,
-        },
-      }
-      defaultValue.root.children[0].children[0].text = value
-      return JSON.stringify(defaultValue)
-    }
-  }
-
-  const onChange = (state) => {
-    formik.setValues({
-      ...formik.values,
-      [name]:JSON.stringify(state),
-    })
-  }
-
-  const initialConfig = {
-    nameSpace  :name,
-    editable   :!disabled,
-    editorState:setInitialValue(),
-    theme      :{
-      text:{
-        italic       :'italic',
-        strikethrough:'strikethrough',
-        underline    :'underlined',
-      },
-    },
-    nodes:[
-      AutoLinkNode,
-      LinkNode,
-      ListNode,
-      ListItemNode,
-    ],
-  }
-
-  return (
-    <LexicalComposer
-      initialConfig={initialConfig}
-    >
-      <div
-        id={id}
-        className={[
-          baseClassName,
-          componentClassName,
-          userClassName,
-          `y-${color}`,
-          disabled && 'disabled',
-        ]
-          .filter((e) => e)
-          .join(' ')}
-        style={{
-          ...style,
-          '--resize':resize,
-          '--rows'  :`${rows}em`,
-        }}
-      >
-        <FormLabelV2
-          name={name}
-          color={labelColor}
-          optional={optional}
-        >
-          {label}
-        </FormLabelV2>
-
-        { !disabled && <Toolbar /> }
-        <RichTextPlugin
-          contentEditable={(
-            <ContentEditable
-              id={name}
-              className="content-editable"
-            />
-          )}
-        />
-        <OnChangePlugin onChange={onChange} />
-        <LinkPlugin />
-        <ListPlugin />
-        <TabIndentationPlugin />
-        <HistoryPlugin />
-        <FormDescriptionV2 className="s-1" description={description} name={name} />
-        { showDebugger && <TreeViewPlugin />}
-      </div>
-    </LexicalComposer>
-  )
-}
-
-EditorInput.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 input name (html - and Formik state)
-   */
-  name:PropTypes.string.isRequired,
-
-  /**
-   * The input label
-   */
-  label:PropTypes.string.isRequired,
-
-  /**
-   * The input value validator function
-   */
-  // validate:PropTypes.func,
-
-  /**
-   * The number of rows int the text area
-   */
-  rows:PropTypes.number,
-
-  /**
-   * Color of the text
-   */
-  color:PropTypes.string,
-
-  /**
-   * Label base color
-   */
-  labelColor:PropTypes.string,
-
-  /**
-   * Text area description
-   */
-  description:PropTypes.string,
-
-  /**
-   * Whether the text area should be disabled
-   */
-  disabled:PropTypes.bool,
-
-  /**
-  * Whether the input is optional or not
-  */
-  optional:PropTypes.bool,
-
-  /**
-   * The resize property of the text area
-   */
-  resize:PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical']),
-}
-
-EditorInput.defaultProps = {
-  rows    :10,
-  disabled:false,
-  color   :'paragraph',
-  resize  :'vertical',
-}
-
-export default memo(EditorInput)

package/src/ui/f/fields/V2/EditorInput/common/Toolbar.jsx

@@ -1,356 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-import * as React from 'react'
-
-import {
-  useEffect,
-  useState,
-  useCallback,
-  useRef,
-} from 'react'
-
-import {
-  $getSelection,
-  $isRangeSelection,
-  FORMAT_TEXT_COMMAND,
-  FORMAT_ELEMENT_COMMAND,
-  UNDO_COMMAND,
-  REDO_COMMAND,
-  COMMAND_PRIORITY_NORMAL,
-  createCommand,
-} from 'lexical'
-import {
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  REMOVE_LIST_COMMAND,
-  $isListNode,
-  ListNode,
-} from '@lexical/list'
-import {
-  $isAtNodeEnd,
-} from '@lexical/selection'
-import {
-  $isLinkNode,
-  TOGGLE_LINK_COMMAND,
-} from '@lexical/link'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { mergeRegister, $getNearestNodeOfType } from '@lexical/utils'
-
-import { Popover } from 'ui'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'toolbar'
-
-const getSelectedNode = (selection) => {
-  const { anchor, focus } = selection
-  const anchorNode = selection.anchor.getNode()
-  const focusNode = selection.focus.getNode()
-  if (anchorNode === focusNode) {
-    return anchorNode
-  }
-  const isBackward = selection.isBackward()
-  if (isBackward) {
-    return $isAtNodeEnd(focus) ? anchorNode : focusNode
-  }
-  return $isAtNodeEnd(anchor) ? focusNode : anchorNode
-}
-
-const defaultColor = 'var(--paragraph)'
-
-const colorOptions = [
-  'red',
-  'blue',
-  'green',
-  'yellow',
-  'orange',
-  'purple',
-  'pink',
-  'brown',
-]
-
-const Toolbar = () => {
-  const [editor] = useLexicalComposerContext()
-  const [isBold, setIsBold] = useState(false)
-  const [isItalic, setIsItalic] = useState(false)
-  const [isStrikethrough, setIsStrikethrough] = useState(false)
-  const [blockType, setBlockType] = useState('paragraph')
-  const [isLink, setIsLink] = useState(false)
-  const [isUnderline, setIsUnderline] = useState(false)
-  const [color, setColor] = useState(defaultColor)
-
-  const colorMenuRef = useRef(false)
-
-  const formatBulletList = () => {
-    if (blockType !== 'ul') {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND)
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND)
-    }
-  }
-
-  const formatNumberedList = () => {
-    if (blockType !== 'ol') {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND)
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND)
-    }
-  }
-
-  const formatLink = useCallback(() => {
-    if (!isLink) {
-      // eslint-disable-next-line no-alert
-      const path = prompt('Enter the full URL. Ex: https://www.example.com')
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, path)
-    } else {
-      editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
-    }
-  }, [editor, isLink])
-
-  const updateToolbar = useCallback(() => {
-    const selection = $getSelection()
-
-    // Check list selection
-    if ($isRangeSelection(selection)) {
-      const anchorNode = selection.anchor.getNode()
-      const element = anchorNode.getKey() === 'root'
-        ? anchorNode
-        : anchorNode.getTopLevelElementOrThrow()
-      if ($isListNode(element)) {
-        const parentList = $getNearestNodeOfType(anchorNode, ListNode)
-        const type = parentList ? parentList.getTag() : element.getTag()
-        setBlockType(type)
-      } else {
-        setBlockType(element)
-      }
-
-      // Check nodes for color
-      const nodes = selection.getNodes().filter((node) => node.getType() === 'text')
-      nodes.forEach((node) => {
-        const style = node.getStyle()
-        const colorProperty = style.match(/color: ([^;]+)/)
-        if (colorProperty) {
-          setColor(colorProperty[1])
-          return
-        }
-        setColor(false)
-      })
-
-      // Check selection text styles
-      setIsBold(selection.hasFormat('bold'))
-      setIsItalic(selection.hasFormat('italic'))
-      setIsStrikethrough(selection.hasFormat('strikethrough'))
-      setIsUnderline(selection.hasFormat('underline'))
-      setIsLink(selection.hasFormat('link'))
-
-      // Check links
-      const node = getSelectedNode(selection)
-      const parent = node.getParent()
-      if ($isLinkNode(parent) || $isLinkNode(node)) {
-        setIsLink(true)
-      } else {
-        setIsLink(false)
-      }
-    }
-  }, [editor])
-
-  const UPDATE_COLOR_COMMAND = createCommand()
-
-  editor.registerCommand(UPDATE_COLOR_COMMAND, (payload) => {
-    const selection = $getSelection()
-    const nodes = selection?.extract().filter((node) => node.getType() === 'text')
-    nodes?.forEach((node) => {
-      const style = node.getStyle()
-      const colorProperty = style?.match(/color: ([^;]+)/)
-      if (colorProperty && color !== payload) {
-        node.setStyle(style.replace(colorProperty[0], `color: ${payload}`))
-      } else if (colorProperty) {
-        node.setStyle(`color: ${defaultColor}`)
-      } else {
-        node.setStyle(`color: ${payload}`)
-      }
-    })
-  }, COMMAND_PRIORITY_NORMAL)
-
-  useEffect(() => mergeRegister(
-    editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        updateToolbar()
-      })
-    }),
-  ), [updateToolbar, editor])
-
-  const dispatchUpdateColor = useCallback((e, payload) => {
-    e.stopPropagation()
-    editor.dispatchCommand(UPDATE_COLOR_COMMAND, payload)
-  }, [editor])
-
-  return (
-    <div className={`${baseClassName} ${componentClassName}`}>
-      <div className="group">
-        <button
-          type="button"
-          className={isBold ? 'active' : undefined}
-          onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')}
-        >
-          <span className="icon">
-            |
-          </span>
-        </button>
-        <button
-          type="button"
-          className={isItalic ? 'active' : undefined}
-          onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')}
-        >
-          <span className="icon">
-            &#125;
-          </span>
-        </button>
-        <button
-          type="button"
-          className={isUnderline ? 'active' : undefined}
-          onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')}
-        >
-          <span className="icon">
-            ~
-          </span>
-        </button>
-        <button
-          type="button"
-          className={isStrikethrough ? 'active' : undefined}
-          onClick={() => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')}
-        >
-          <span className="icon">
-            ?
-          </span>
-        </button>
-        <button
-          type="button"
-          className={color && color !== defaultColor ? 'active color-menu-button' : 'color-menu-button'}
-          onClick={() => editor.dispatchCommand(UPDATE_COLOR_COMMAND,
-            color !== defaultColor ? defaultColor : color)}
-          ref={colorMenuRef}
-          style={{ position: 'relative' }}
-        >
-          <span
-            className="icon"
-            style={{
-              color,
-            }}
-          >
-            Q
-          </span>
-          <Popover
-            parentRef={colorMenuRef}
-          >
-            <div className="color-menu">
-              {
-                colorOptions.map((option) => (
-                  <span
-                    role="button"
-                    className="icon color-option"
-                    style={{
-                      color:option,
-                    }}
-                    onClick={(e) => dispatchUpdateColor(e, option)}
-                    onKeyDown={(e) => dispatchUpdateColor(e, option)}
-                    tabIndex={0}
-                    key={option}
-                  >
-                    o
-                  </span>
-                ))
-              }
-            </div>
-          </Popover>
-        </button>
-
-        <button
-          type="button"
-          className={isLink ? 'active' : undefined}
-          onClick={() => formatLink()}
-        >
-          <span className="icon">
-            &#93;
-          </span>
-        </button>
-        <button
-          type="button"
-          className={blockType === 'ul' ? 'active' : undefined}
-          onClick={() => formatBulletList()}
-        >
-          <span className="icon">
-            .
-          </span>
-        </button>
-        <button
-          type="button"
-          className={blockType === 'ol' ? 'active' : undefined}
-          onClick={() => formatNumberedList()}
-        >
-          <span className="icon">
-            -
-          </span>
-        </button>
-      </div>
-
-      <div className="group">
-        <button
-          type="button"
-          onClick={() => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left')}
-        >
-          <span className="icon">
-            ^
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center')}
-        >
-          <span className="icon">
-            _
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right')}
-        >
-          <span className="icon">
-            `
-          </span>
-        </button>
-        <button
-          type="button"
-          onClick={() => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify')}
-        >
-          <span className="icon">
-            &#123;
-          </span>
-        </button>
-      </div>
-
-      <div className="group">
-        <button
-          type="button"
-          onClick={() => editor.dispatchCommand(UNDO_COMMAND)}
-        >
-          <span className="icon">
-            \
-          </span>
-        </button>
-        <button
-          type="button"
-          className="flip"
-          onClick={() => editor.dispatchCommand(REDO_COMMAND)}
-        >
-          <span className="icon">
-            \
-          </span>
-        </button>
-      </div>
-    </div>
-  )
-}
-
-export default Toolbar

package/src/ui/f/fields/V2/EditorInput/common/TreeViewPlugin.jsx

@@ -1,16 +0,0 @@
-import React from 'react'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-import { TreeView } from '@lexical/react/LexicalTreeView'
-
-const TreeViewPlugin = () => {
-  const [editor] = useLexicalComposerContext()
-
-  return (
-    <TreeView
-      viewClassName="tree-view-output"
-      editor={editor}
-    />
-  )
-}
-
-export default TreeViewPlugin

package/src/ui/f/fields/V2/EditorInput/common/index.jsx

@@ -1,2 +0,0 @@
-export { default as Toolbar } from './Toolbar'
-export { default as TreeViewPlugin } from './TreeViewPlugin'

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

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