@pareto-engineering/design-system 4.0.0-alpha.77 → 4.0.0-alpha.79

package/tests/mockResizeObserver.js

@@ -0,0 +1,9 @@
+class MockResizeObserver {
+  constructor() {
+    this.observe = () => {}
+    this.unobserve = () => {}
+    this.disconnect = () => {}
+  }
+}
+
+export default MockResizeObserver

package/tests/test-setup.js

@@ -1,4 +1,7 @@
+import MockResizeObserver from './mockResizeObserver'
+
 const noop = () => {}
 const emptyDirFunc = () => ({})
+global.ResizeObserver = MockResizeObserver
 Object.defineProperty(window, 'scrollTo', { value: noop, writable: true })
 Object.defineProperty(window, 'matchMedia', { value: emptyDirFunc, writable: true })

package/dist/cjs/a/LexicalPreview/LexicalPreview.js

@@ -1,90 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _LexicalComposer = require("@lexical/react/LexicalComposer");
-var _LexicalRichTextPlugin = require("@lexical/react/LexicalRichTextPlugin");
-var _LexicalContentEditable = require("@lexical/react/LexicalContentEditable");
-var _link = require("@lexical/link");
-var _list = require("@lexical/list");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-require("./styles.scss");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* @pareto-engineering/generator-front 1.0.12 */
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-
-// Local Definitions
-
-const baseClassName = _exports.default.base;
-const componentClassName = 'lexical-preview';
-
-/**
- * This is the component description.
- */
-const LexicalPreview = _ref => {
-  let {
-    id,
-    className: userClassName,
-    style,
-    nodes,
-    color
-    // ...otherProps
-  } = _ref;
-  const initialConfig = {
-    nameSpace: id,
-    editable: false,
-    editorState: nodes,
-    theme: {
-      text: {
-        italic: 'italic',
-        strikethrough: 'strikethrough',
-        underline: 'underlined'
-      }
-    },
-    nodes: [_link.AutoLinkNode, _link.LinkNode, _list.ListNode, _list.ListItemNode]
-  };
-  return /*#__PURE__*/React.createElement(_LexicalComposer.LexicalComposer, {
-    initialConfig: initialConfig
-  }, /*#__PURE__*/React.createElement("div", {
-    id: id,
-    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement(_LexicalRichTextPlugin.RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(_LexicalContentEditable.ContentEditable, {
-      id: id,
-      className: "content-editable"
-    })
-  })));
-};
-LexicalPreview.propTypes = {
-  /**
-   * The HTML id for this element
-   */
-  id: _propTypes.default.string,
-  /**
-   * The HTML class names for this element
-   */
-  className: _propTypes.default.string,
-  /**
-   * The React-written, css properties for this element.
-   */
-  style: _propTypes.default.objectOf(_propTypes.default.string),
-  /**
-   * Color of the text
-   */
-  color: _propTypes.default.string,
-  /**
-   * The nodes to render in the form of a json string
-   */
-  nodes: _propTypes.default.string
-};
-LexicalPreview.defaultProps = {
-  color: 'paragraph'
-};
-var _default = exports.default = LexicalPreview;

package/dist/cjs/a/LexicalPreview/styles.scss

@@ -1,46 +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 *;
-
-.#{bem.$base}.lexical-preview {
-  > .content-editable {
-    color: var(--y);
-    overflow: auto;
-
-    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);
-    }
-  }
-}

package/dist/cjs/b/ExpandableLexicalPreview/styles.scss

@@ -1,84 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* stylelint-disable max-nesting-depth -- required */
-
-@use "@pareto-engineering/bem";
-@use "@pareto-engineering/styles/src/mixins";
-@use "@pareto-engineering/styles/src/globals" as *;
-
-.#{bem.$base}.expandable-lexical-preview {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: wrap;
-  gap: var(--gap);
-  width: 100%;
-
-  &.collapsed {
-    flex-direction: row;
-  }
-
-  > .title {
-    margin: 0;
-  }
-
-
-  > .#{bem.$base}.button {
-    align-items: center;
-    border: 1px solid var(--outline-inputs);
-    display: flex;
-  }
-
-  > .lexical-content {
-    position: relative;
-
-    > .content-editable {
-      background: var(--background-inputs);
-      border: 1px solid var(--outline-inputs);
-      border-radius: var(--theme-default-border-radius);
-      color: var(--y);
-      overflow: auto;
-      padding: var(--gap);
-      resize: var(--resize);
-
-      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);
-      }
-    }
-
-    > .#{bem.$base}.expand-button {
-      border: 1px solid var(--outline-inputs);
-      position: absolute;
-      right: 1em;
-      top: 1em;
-    }
-  }
-}

package/dist/cjs/f/fields/EditorInput/common/Toolbar.js

@@ -1,257 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var React = _react;
-var _lexical = require("lexical");
-var _list = require("@lexical/list");
-var _selection = require("@lexical/selection");
-var _link = require("@lexical/link");
-var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
-var _utils = require("@lexical/utils");
-var _ = require("../../../..");
-var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-
-const baseClassName = _exports.default.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 (0, _selection.$isAtNodeEnd)(focus) ? anchorNode : focusNode;
-  }
-  return (0, _selection.$isAtNodeEnd)(anchor) ? focusNode : anchorNode;
-};
-const defaultColor = 'var(--paragraph)';
-const colorOptions = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'pink', 'brown'];
-const Toolbar = () => {
-  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
-  const [isBold, setIsBold] = (0, _react.useState)(false);
-  const [isItalic, setIsItalic] = (0, _react.useState)(false);
-  const [isStrikethrough, setIsStrikethrough] = (0, _react.useState)(false);
-  const [blockType, setBlockType] = (0, _react.useState)('paragraph');
-  const [isLink, setIsLink] = (0, _react.useState)(false);
-  const [isUnderline, setIsUnderline] = (0, _react.useState)(false);
-  const [color, setColor] = (0, _react.useState)(defaultColor);
-  const colorMenuRef = (0, _react.useRef)(false);
-  const formatBulletList = () => {
-    if (blockType !== 'ul') {
-      editor.dispatchCommand(_list.INSERT_UNORDERED_LIST_COMMAND);
-    } else {
-      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND);
-    }
-  };
-  const formatNumberedList = () => {
-    if (blockType !== 'ol') {
-      editor.dispatchCommand(_list.INSERT_ORDERED_LIST_COMMAND);
-    } else {
-      editor.dispatchCommand(_list.REMOVE_LIST_COMMAND);
-    }
-  };
-  const formatLink = (0, _react.useCallback)(() => {
-    if (!isLink) {
-      // eslint-disable-next-line no-alert
-      const path = prompt('Enter the full URL. Ex: https://www.example.com');
-      editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, path);
-    } else {
-      editor.dispatchCommand(_link.TOGGLE_LINK_COMMAND, null);
-    }
-  }, [editor, isLink]);
-  const updateToolbar = (0, _react.useCallback)(() => {
-    const selection = (0, _lexical.$getSelection)();
-
-    // Check list selection
-    if ((0, _lexical.$isRangeSelection)(selection)) {
-      const anchorNode = selection.anchor.getNode();
-      const element = anchorNode.getKey() === 'root' ? anchorNode : anchorNode.getTopLevelElementOrThrow();
-      if ((0, _list.$isListNode)(element)) {
-        const parentList = (0, _utils.$getNearestNodeOfType)(anchorNode, _list.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 ((0, _link.$isLinkNode)(parent) || (0, _link.$isLinkNode)(node)) {
-        setIsLink(true);
-      } else {
-        setIsLink(false);
-      }
-    }
-  }, [editor]);
-  const UPDATE_COLOR_COMMAND = (0, _lexical.createCommand)();
-  editor.registerCommand(UPDATE_COLOR_COMMAND, payload => {
-    const selection = (0, _lexical.$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}`);
-      }
-    });
-  }, _lexical.COMMAND_PRIORITY_NORMAL);
-  (0, _react.useEffect)(() => (0, _utils.mergeRegister)(editor.registerUpdateListener(_ref => {
-    let {
-      editorState
-    } = _ref;
-    editorState.read(() => {
-      updateToolbar();
-    });
-  })), [updateToolbar, editor]);
-  const dispatchUpdateColor = (0, _react.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(_lexical.FORMAT_TEXT_COMMAND, 'bold')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "|")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isItalic ? 'active' : undefined,
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, 'italic')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "}")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isUnderline ? 'active' : undefined,
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_TEXT_COMMAND, 'underline')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "~")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: isStrikethrough ? 'active' : undefined,
-    onClick: () => editor.dispatchCommand(_lexical.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(_lexical.FORMAT_ELEMENT_COMMAND, 'left')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "^")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, 'center')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "_")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(_lexical.FORMAT_ELEMENT_COMMAND, 'right')
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "`")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: () => editor.dispatchCommand(_lexical.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(_lexical.UNDO_COMMAND)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "\\")), /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    className: "flip",
-    onClick: () => editor.dispatchCommand(_lexical.REDO_COMMAND)
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "icon"
-  }, "\\"))));
-};
-var _default = exports.default = Toolbar;

package/dist/es/a/LexicalPreview/LexicalPreview.js

@@ -1,80 +0,0 @@
-/* @pareto-engineering/generator-front 1.0.12 */
-/* eslint-disable import/no-extraneous-dependencies -- required here */
-import * as React from 'react';
-import { LexicalComposer } from '@lexical/react/LexicalComposer';
-import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
-import { ContentEditable } from '@lexical/react/LexicalContentEditable';
-import { AutoLinkNode, LinkNode } from '@lexical/link';
-import { ListItemNode, ListNode } from '@lexical/list';
-import PropTypes from 'prop-types';
-import styleNames from '@pareto-engineering/bem/exports';
-import "./styles.scss";
-
-// Local Definitions
-
-const baseClassName = styleNames.base;
-const componentClassName = 'lexical-preview';
-
-/**
- * This is the component description.
- */
-const LexicalPreview = ({
-  id,
-  className: userClassName,
-  style,
-  nodes,
-  color
-  // ...otherProps
-}) => {
-  const initialConfig = {
-    nameSpace: id,
-    editable: false,
-    editorState: nodes,
-    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}`].filter(e => e).join(' '),
-    style: style
-  }, /*#__PURE__*/React.createElement(RichTextPlugin, {
-    contentEditable: /*#__PURE__*/React.createElement(ContentEditable, {
-      id: id,
-      className: "content-editable"
-    })
-  })));
-};
-LexicalPreview.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
-};
-LexicalPreview.defaultProps = {
-  color: 'paragraph'
-};
-export default LexicalPreview;

package/dist/es/a/LexicalPreview/index.js

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

package/dist/es/a/LexicalPreview/styles.scss

@@ -1,46 +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 *;
-
-.#{bem.$base}.lexical-preview {
-  > .content-editable {
-    color: var(--y);
-    overflow: auto;
-
-    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);
-    }
-  }
-}