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

package/dist/es/f/fields/V2/EditorInput/EditorInput.js

@@ -1,192 +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 /*#__PURE__*/React.createElement(LexicalComposer, {
-    initialConfig: initialConfig
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`, disabled && 'disabled'].filter(e => e).join(' '),
-    style: {
-      ...style,
-      '--resize': resize,
-      '--rows': `${rows}em`
-    }
-  }, /*#__PURE__*/React.createElement(FormLabelV2, {
-    name: name,
-    color: labelColor,
-    optional: optional
-  }, label), !disabled && /*#__PURE__*/React.createElement(Toolbar, null), /*#__PURE__*/React.createElement(RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
-      id: name,
-      className: "content-editable"
-    })
-  }), /*#__PURE__*/React.createElement(OnChangePlugin, {
-    onChange: onChange
-  }), /*#__PURE__*/React.createElement(LinkPlugin, null), /*#__PURE__*/React.createElement(ListPlugin, null), /*#__PURE__*/React.createElement(TabIndentationPlugin, null), /*#__PURE__*/React.createElement(HistoryPlugin, null), /*#__PURE__*/React.createElement(FormDescriptionV2, {
-    className: "s-1",
-    description: description,
-    name: name
-  }), showDebugger && /*#__PURE__*/React.createElement(TreeViewPlugin, null)));
-};
-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 /*#__PURE__*/memo(EditorInput);

package/dist/es/f/fields/V2/EditorInput/common/Toolbar.js

@@ -1,246 +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 "../../../../..";
-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 /*#__PURE__*/React.createElement("div", {
-    className: `${baseClassName} ${componentClassName}`
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "group"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isBold ? 'active' : undefined,
-    onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "|")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isItalic ? 'active' : undefined,
-    onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'italic')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "}")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isUnderline ? 'active' : undefined,
-    onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'underline')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "~")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isStrikethrough ? 'active' : undefined,
-    onClick: () => editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'strikethrough')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "?")), /*#__PURE__*/React.createElement("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'
-    }
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon",
-    style: {
-      color
-    }
-  }, "Q"), /*#__PURE__*/React.createElement(Popover, {
-    parentRef: colorMenuRef
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "color-menu"
-  }, colorOptions.map(option => /*#__PURE__*/React.createElement("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"))))), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isLink ? 'active' : undefined,
-    onClick: () => formatLink()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "]")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: blockType === 'ul' ? 'active' : undefined,
-    onClick: () => formatBulletList()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, ".")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: blockType === 'ol' ? 'active' : undefined,
-    onClick: () => formatNumberedList()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "-"))), /*#__PURE__*/React.createElement("div", {
-    className: "group"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'left')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "^")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'center')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "_")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'right')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "`")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, 'justify')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "{"))), /*#__PURE__*/React.createElement("div", {
-    className: "group"
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(UNDO_COMMAND)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "\\")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "flip",
-    onClick: () => editor.dispatchCommand(REDO_COMMAND)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "\\"))));
-};
-export default Toolbar;

package/dist/es/f/fields/V2/EditorInput/common/TreeViewPlugin.js

@@ -1,11 +0,0 @@
-import React from 'react';
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
-import { TreeView } from '@lexical/react/LexicalTreeView';
-const TreeViewPlugin = () => {
-  const [editor] = useLexicalComposerContext();
-  return /*#__PURE__*/React.createElement(TreeView, {
-    viewClassName: "tree-view-output",
-    editor: editor
-  });
-};
-export default TreeViewPlugin;

package/dist/es/f/fields/V2/EditorInput/common/index.js

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

package/dist/es/f/fields/V2/EditorInput/index.js

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

package/dist/es/f/fields/V2/EditorInput/styles.scss

@@ -1,149 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-$default-gap: calc(var(--gap) / 2);
-$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);
-$focus-border: var(--theme-focus-input-border);
-$active-background: var(--hard-background-inputs);
-$default-background: var(--background-inputs);
-$default-icon-color: var(--on-background-inputs);
-$disabled-background: var(--background-inputs-30);
-$default-color-menu-padding: .5em .25em;
-
-.#{bem.$base}.editor-input {
-  display: flex;
-  flex-direction: column;
-
-  > .#{bem.$base}.form-label {
-    margin-bottom: var(--gap);
-  }
-
-  > .#{bem.$base}.toolbar {
-    display: flex;
-    gap: $default-gap;
-    margin-bottom: .25em;
-
-    > .group {
-      > button {
-        background: $default-background;
-        border: $default-border;
-        color: $default-icon-color;
-        padding: $default-padding;
-
-        &.active {
-          background-color: $active-background;
-        }
-      }
-    }
-
-    .flip {
-      transform: scaleX(-1);
-    }
-  }
-
-  &:not(.disabled) {
-    &:hover,
-    &:focus,
-    &:active {
-      > .textarea {
-        border: $focus-border;
-      }
-    }
-  }
-
-  &.disabled {
-    > .textarea {
-      background: $disabled-background;
-      color: var(--metadata);
-      cursor: not-allowed;
-    }
-  }
-
-  .color-menu-button {
-    &:hover {
-      > .#{bem.$base}.popover {
-        display: block;
-      }
-    }
-
-    > .#{bem.$base}.popover {
-      padding: $default-color-menu-padding;
-
-      .color-menu {
-        display: flex;
-        flex-wrap: wrap;
-        gap: calc($default-gap / 2);
-        justify-content: center;
-        max-width: 10em;
-        min-width: 5em;
-      }
-
-      .color-option:hover {
-        opacity: .5;
-      }
-    }
-  }
-
-  > .content-editable {
-    background: $default-background;
-    border: $default-border;
-    border-radius: $default-input-border-radius;
-    color: var(--y);
-    height: var(--rows);
-    outline: none;
-    overflow: auto;
-    padding: $default-padding;
-    resize: var(--resize);
-    width: 100%;
-
-    li:has(ol, ul) {
-      list-style-type: none;
-    }
-
-    p,
-    span,
-    strong,
-    em,
-    li {
-      &.underlined {
-        text-decoration: underline;
-
-        &.strikethrough {
-          text-decoration: underline line-through;
-        }
-      }
-
-      &.strikethrough {
-        text-decoration: line-through;
-      }
-
-      &.italic {
-        font-style: italic;
-      }
-    }
-
-    :first-child {
-      margin-top: 0;
-    }
-
-    &::placeholder {
-      color: var(--metadata);
-    }
-  }
-
-
-  > .tree-view-output {
-    background: $default-background;
-    border: $default-border;
-    border-radius: $default-input-border-radius;
-    max-height: 20em;
-    overflow: auto;
-    padding: $default-padding;
-  }
-}