@pareto-engineering/design-system 5.3.0 → 5.4.0

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

@@ -1,295 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-import * as React from 'react'
-import { memo, useEffect } from 'react'
-import { $getRoot } from 'lexical'
-import { useField, 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 LexicalClickableLinkPlugin from '@lexical/react/LexicalClickableLinkPlugin'
-import { ListPlugin } from '@lexical/react/LexicalListPlugin'
-import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary'
-import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin'
-import { AutoLinkNode, LinkNode } from '@lexical/link'
-import { ListItemNode, ListNode } from '@lexical/list'
-import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin'
-import { HeadingNode, QuoteNode } from '@lexical/rich-text'
-import { CodeHighlightNode, CodeNode } from '@lexical/code'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
-
-import PropTypes from 'prop-types'
-import styleNames from '@pareto-engineering/bem/exports'
-
-// Local Definitions
-
-import { FormLabel, FormDescription } from '../../common'
-import {
-  ToolbarPlugin,
-  TreeViewPlugin,
-  StopPropagationPlugin,
-  ExposePlainTextPlugin,
-} from './common'
-
-import './styles.scss'
-
-const baseClassName = styleNames.base
-const componentClassName = 'editor-input'
-
-const ExposeEditorStatePlugin = ({ setEditorState }) => {
-  const [editor] = useLexicalComposerContext()
-  useEffect(() => {
-    setEditorState(editor)
-  }, [editor])
-
-  return null
-}
-
-/**
- * This is the component description.
- */
-const EditorInput = ({
-  id,
-  className:userClassName,
-  style,
-  name,
-  label,
-  resize,
-  color,
-  rows,
-  optional,
-  labelColor,
-  description,
-  disabled,
-  showDebugger,
-  setEditorState,
-  setPlainTextKey,
-  validate,
-  // ...otherProps
-}) => {
-  const [field, ,] = useField(name)
-  const { setFieldValue } = useFormikContext()
-
-  const setInitialValue = () => {
-    try {
-      const parsedValue = JSON.parse(field.value)
-      // A pure number value will break the editor, so we throw an error to return
-      // the default value in the catch block.
-      if (typeof parsedValue === 'number') {
-        throw new Error('Number')
-      }
-      return field.value
-    } catch {
-      const defaultValue = {
-        root:{
-          children:[
-            {
-              children:[
-                {
-                  detail :0,
-                  format :0,
-                  mode   :'normal',
-                  style  :'',
-                  text   :field.value,
-                  type   :'text',
-                  version:1,
-                },
-              ],
-              direction:'ltr',
-              format   :'',
-              indent   :0,
-              type     :'paragraph',
-              version  :1,
-            },
-          ],
-          direction:'ltr',
-          format   :'',
-          indent   :0,
-          type     :'root',
-          version  :1,
-        },
-      }
-      return JSON.stringify(defaultValue)
-    }
-  }
-
-  const onChange = (state) => {
-    setFieldValue(name, JSON.stringify(state))
-    validate?.(state.read(() => {
-      const root = $getRoot()
-      const textContent = root.getTextContent()
-      return textContent
-    }))
-  }
-
-  const initialConfig = {
-    nameSpace  :name,
-    editable   :!disabled,
-    editorState:setInitialValue(),
-    theme      :{
-      text:{
-        italic       :'italic',
-        strikethrough:'strikethrough',
-        underline    :'underlined',
-      },
-      list:{
-        listitemChecked  :'lexical-list-item-checked',
-        listitemUnchecked:'lexical-list-item-unchecked',
-      },
-      code:'lexical-code',
-    },
-    nodes:[
-      HeadingNode,
-      QuoteNode,
-      CodeNode,
-      CodeHighlightNode,
-      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`,
-        }}
-      >
-        {
-          label && (
-            <FormLabel
-              name={name}
-              color={labelColor}
-              optional={optional}
-            >
-              {label}
-            </FormLabel>
-          )
-        }
-        { !disabled && <ToolbarPlugin /> }
-        <RichTextPlugin
-          contentEditable={(
-            <ContentEditable
-              className="content-editable"
-              id={name}
-              name={name}
-            />
-          )}
-          ErrorBoundary={LexicalErrorBoundary}
-        />
-        <ListPlugin />
-        <CheckListPlugin />
-        <OnChangePlugin onChange={onChange} />
-        <LinkPlugin />
-        <LexicalClickableLinkPlugin />
-        <TabIndentationPlugin />
-        {setEditorState && <ExposeEditorStatePlugin setEditorState={setEditorState} />}
-        <HistoryPlugin />
-        <StopPropagationPlugin />
-        <FormDescription className="s-1" description={description} name={name} />
-        { showDebugger && <TreeViewPlugin /> }
-        {setPlainTextKey && (
-          <ExposePlainTextPlugin
-            setFieldValue={setFieldValue}
-            setPlainTextKey={setPlainTextKey}
-          />
-        )}
-      </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 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']),
-
-  /**
-   * Whether to show the debugger or not
-   */
-  showDebugger:PropTypes.bool,
-}
-
-EditorInput.defaultProps = {
-  rows    :10,
-  disabled:false,
-  color   :'paragraph',
-  resize  :'vertical',
-}
-
-export default memo(EditorInput)

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

@@ -1,292 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-import * as React from 'react'
-
-import { useState, useRef } from 'react'
-
-import {
-  $createParagraphNode,
-  $getSelection,
-  $isRangeSelection,
-  DEPRECATED_$isGridSelection,
-} from 'lexical'
-
-import {
-  $createHeadingNode,
-  $createQuoteNode,
-} from '@lexical/rich-text'
-
-import {
-  $setBlocksType,
-} from '@lexical/selection'
-
-import {
-  INSERT_CHECK_LIST_COMMAND,
-  INSERT_ORDERED_LIST_COMMAND,
-  INSERT_UNORDERED_LIST_COMMAND,
-  REMOVE_LIST_COMMAND,
-} from '@lexical/list'
-
-import { $createCodeNode } from '@lexical/code'
-
-import PropTypes from 'prop-types'
-
-import styleNames from '@pareto-engineering/bem/exports'
-
-import './styles.scss'
-
-import { Popover } from 'ui/a'
-
-import { useOutsideClick } from 'ui/utils'
-
-import { blockTypeToBlockName } from '../ToolbarPlugin/ToolbarPlugin'
-
-// Local Definitions
-
-const baseClassName = styleNames.base
-
-const componentClassName = 'block-format-drop-down'
-
-const iconsMap = {
-  bullet   :{ icon: '.', className: 'icon' },
-  check    :{ icon: '4', className: 'ai-icon' },
-  code     :{ icon: '6', className: 'ai-icon' },
-  h1       :{ icon: '1', className: 'ai-icon' },
-  h2       :{ icon: '2', className: 'ai-icon' },
-  h3       :{ icon: '3', className: 'ai-icon' },
-  number   :{ icon: '-', className: 'icon' },
-  paragraph:{ icon: 'N', className: 'ai-icon' },
-  quote    :{ icon: '5', className: 'ai-icon' },
-
-}
-/**
- * This is the component description.
- */
-const BlockFormatDropDown = ({
-  id,
-  className:userClassName,
-  style,
-  editor,
-  blockType,
-  // ...otherProps
-}) => {
-  const formatParagraph = () => {
-    editor.update(() => {
-      const selection = $getSelection()
-      if (
-        $isRangeSelection(selection)
-        || DEPRECATED_$isGridSelection(selection)
-      ) {
-        $setBlocksType(selection, () => $createParagraphNode())
-      }
-    })
-  }
-
-  const formatHeading = (headingSize) => {
-    if (blockType !== headingSize) {
-      editor.update(() => {
-        const selection = $getSelection()
-        if (
-          $isRangeSelection(selection)
-          || DEPRECATED_$isGridSelection(selection)
-        ) {
-          $setBlocksType(selection, () => $createHeadingNode(headingSize))
-        }
-      })
-    }
-  }
-
-  const formatBulletList = () => {
-    if (blockType !== 'bullet') {
-      editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)
-    }
-  }
-
-  const formatCheckList = () => {
-    if (blockType !== 'check') {
-      editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined)
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)
-    }
-  }
-
-  const formatNumberedList = () => {
-    if (blockType !== 'number') {
-      editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)
-    } else {
-      editor.dispatchCommand(REMOVE_LIST_COMMAND, undefined)
-    }
-  }
-
-  const formatQuote = () => {
-    if (blockType !== 'quote') {
-      editor.update(() => {
-        const selection = $getSelection()
-        if (
-          $isRangeSelection(selection)
-          || DEPRECATED_$isGridSelection(selection)
-        ) {
-          $setBlocksType(selection, () => $createQuoteNode())
-        }
-      })
-    }
-  }
-
-  const formatCode = () => {
-    if (blockType !== 'code') {
-      editor.update(() => {
-        let selection = $getSelection()
-
-        if (
-          $isRangeSelection(selection)
-          || DEPRECATED_$isGridSelection(selection)
-        ) {
-          if (selection.isCollapsed()) {
-            $setBlocksType(selection, () => $createCodeNode())
-          } else {
-            const textContent = selection.getTextContent()
-            const codeNode = $createCodeNode()
-            selection.insertNodes([codeNode])
-            selection = $getSelection()
-            if ($isRangeSelection(selection)) selection.insertRawText(textContent)
-          }
-        }
-      })
-    }
-  }
-
-  const parentRef = useRef(null)
-
-  const [isOpen, setIsOpen] = useState(false)
-
-  useOutsideClick(parentRef, () => setIsOpen(false))
-
-  return (
-    <button
-      id={id}
-      className={[
-        baseClassName,
-        componentClassName,
-        userClassName,
-        'group',
-      ]
-        .filter((e) => e)
-        .join(' ')}
-      style={style}
-      ref={parentRef}
-      type="button"
-      onClick={() => setIsOpen(!isOpen)}
-      // {...otherProps}
-    >
-      <span className={iconsMap[blockType].className}>
-        {iconsMap[blockType].icon}
-      </span>
-      <span>{blockTypeToBlockName[blockType]}</span>
-      <span className="icon">V</span>
-      {isOpen && (
-        <Popover
-          parentRef={parentRef}
-          isOpen={isOpen}
-          color="background-far"
-        >
-          <button
-            className={`item ${blockType === 'paragraph' ? 'active' : ''}`}
-            onClick={formatParagraph}
-            type="button"
-          >
-            <span className="ai-icon">N</span>
-            <span className="text">Normal</span>
-          </button>
-          <button
-            className={`item ${blockType === 'h1' ? 'active' : ''}`}
-            onClick={() => formatHeading('h1')}
-            type="button"
-          >
-            <span className="ai-icon">1</span>
-            <span className="text">Heading 1</span>
-          </button>
-          <button
-            className={`item ${blockType === 'h2' ? 'active' : ''}`}
-            onClick={() => formatHeading('h2')}
-            type="button"
-          >
-            <span className="ai-icon">2</span>
-            <span className="text">Heading 2</span>
-          </button>
-          <button
-            className={`item ${blockType === 'h3' ? 'active' : ''}`}
-            onClick={() => formatHeading('h3')}
-            type="button"
-          >
-            <span className="ai-icon">3</span>
-            <span className="text">Heading 3</span>
-          </button>
-          <button
-            className={`item ${blockType === 'bullet' ? 'active' : ''}`}
-            onClick={formatBulletList}
-            type="button"
-          >
-            <span className="icon">.</span>
-            <span className="text">Bullet List</span>
-          </button>
-          <button
-            className={`item ${blockType === 'number' ? 'active' : ''}`}
-            onClick={formatNumberedList}
-            type="button"
-          >
-            <span className="icon">-</span>
-            <span className="text">Numbered List</span>
-          </button>
-          <button
-            className={`item ${blockType === 'check' ? 'active' : ''}`}
-            onClick={formatCheckList}
-            type="button"
-          >
-            <span className="ai-icon">4</span>
-            <span className="text">Check List</span>
-          </button>
-          <button
-            className={`item ${blockType === 'quote' ? 'active' : ''}`}
-            onClick={formatQuote}
-            type="button"
-          >
-            <span className="ai-icon">5</span>
-            <span className="text">Quote</span>
-          </button>
-          <button
-            className={`item ${blockType === 'code' ? 'active' : ''}`}
-            onClick={formatCode}
-            type="button"
-          >
-            <span className="ai-icon">6</span>
-            <span className="text">Code Block</span>
-          </button>
-        </Popover>
-      )}
-    </button>
-  )
-}
-
-BlockFormatDropDown.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),
-}
-
-BlockFormatDropDown.defaultProps = {
-  // someProp:false
-}
-
-export default BlockFormatDropDown

package/src/ui/f/fields/EditorInput/common/BlockFormatDropDown/index.js

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

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

@@ -1,55 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-
-$default-width: 15em;
-
-.#{bem.$base}.block-format-drop-down {
-  align-items: center;
-  background-color: var(--x);
-  border: 0;
-  color: var(--on-background-inputs);
-  cursor: pointer;
-  display: flex;
-  gap: calc(var(--gap) / 2);
-  margin-inline: calc(var(--theme-default-padding) / 4);
-  padding: calc(var(--theme-default-padding) / 2);
-  position: relative;
-
-  &:hover {
-    background: var(--hard-x);
-    border-radius: calc(var(--theme-default-border-radius) / 2);
-  }
-
-  > .#{bem.$base}.popover {
-    background-color: var(--background-far);
-    border: 1px solid var(--hard-background-cards);
-    border-radius: calc(var(--theme-default-border-radius) / 2);
-    color: var(--heading);
-    display: flex;
-    flex-direction: column;
-    padding: calc(var(--theme-default-padding) / 2);
-    width: $default-width;
-
-    > .item {
-      align-items: center;
-      background-color: var(--x);
-      border: 0;
-      border-radius: calc(var(--theme-default-border-radius) / 2);
-      color: var(--paragraph);
-      cursor: pointer;
-      display: flex;
-      gap: calc(var(--gap) / 2);
-      padding: calc(var(--theme-default-padding) / 2);
-      transition: all .2s;
-
-      &:hover {
-        background-color: var(--hard-x);
-      }
-
-      &.active {
-        background-color: var(--hard-ui-main);
-      }
-    }
-  }
-}