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

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

@@ -0,0 +1,257 @@
+"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/cjs/f/fields/V2/EditorInput/common/TreeViewPlugin.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
+var _LexicalTreeView = require("@lexical/react/LexicalTreeView");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const TreeViewPlugin = () => {
+  const [editor] = (0, _LexicalComposerContext.useLexicalComposerContext)();
+  return /*#__PURE__*/_react.default.createElement(_LexicalTreeView.TreeView, {
+    viewClassName: "tree-view-output",
+    editor: editor
+  });
+};
+var _default = exports.default = TreeViewPlugin;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Toolbar", {
+  enumerable: true,
+  get: function () {
+    return _Toolbar.default;
+  }
+});
+Object.defineProperty(exports, "TreeViewPlugin", {
+  enumerable: true,
+  get: function () {
+    return _TreeViewPlugin.default;
+  }
+});
+var _Toolbar = _interopRequireDefault(require("./Toolbar"));
+var _TreeViewPlugin = _interopRequireDefault(require("./TreeViewPlugin"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EditorInput", {
+  enumerable: true,
+  get: function () {
+    return _EditorInput.default;
+  }
+});
+var _EditorInput = _interopRequireDefault(require("./EditorInput"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

@@ -0,0 +1,149 @@
+/* @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;
+  }
+}

package/dist/cjs/f/fields/V2/LinkInput/LinkInput.js

@@ -0,0 +1,156 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _exports = _interopRequireDefault(require("@pareto-engineering/bem/exports"));
+var _formik = require("formik");
+var _common = require("../../../common");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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 */
+// Local Definitions
+
+const baseClassName = _exports.default.base;
+const componentClassName = 'link-input';
+
+/**
+ * This is the component description.
+ */
+const LinkInput = _ref => {
+  let {
+    id,
+    className: userClassName,
+    style,
+    name,
+    label,
+    color,
+    labelColor,
+    validate,
+    description,
+    disabled,
+    placeholder,
+    optional,
+    autoComplete
+    // ...otherProps
+  } = _ref;
+  (0, _react.useInsertionEffect)(() => {
+    Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
+  }, []);
+  const [field] = (0, _formik.useField)({
+    name,
+    validate
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: [baseClassName, componentClassName, userClassName, `y-${color}`].filter(e => e).join(' '),
+    style: style
+  }, /*#__PURE__*/React.createElement(_common.FormLabelV2, {
+    name: name,
+    color: labelColor,
+    optional: optional
+    // {...otherProps}
+  }, label), /*#__PURE__*/React.createElement("div", {
+    className: "input-link-wrapper"
+  }, /*#__PURE__*/React.createElement("input", _extends({
+    id: name,
+    className: "input",
+    type: "text",
+    disabled: disabled,
+    placeholder: placeholder,
+    autoComplete: autoComplete
+  }, field)), /*#__PURE__*/React.createElement("a", {
+    href: field.value,
+    target: "_blank",
+    rel: "noopener noreferrer"
+  }, "\u2192")), /*#__PURE__*/React.createElement(_common.FormDescriptionV2, {
+    className: "s-1",
+    description: description,
+    name: name
+  }));
+};
+LinkInput.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),
+  /**
+   * The input name (html - and Formik state)
+   */
+  name: _propTypes.default.string.isRequired,
+  /**
+   * The input label
+   */
+  label: _propTypes.default.string.isRequired,
+  /**
+   * The input label color
+   */
+  labelColor: _propTypes.default.string,
+  /**
+   * The input field validator function
+   */
+  validate: _propTypes.default.func,
+  /**
+   * If the slide will only have one input
+   */
+  oneInputLabel: _propTypes.default.bool,
+  /**
+   * Input description
+   */
+  description: _propTypes.default.string,
+  /**
+   * Whether the text input should be disabled
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * The placeholder text for the input
+   */
+  placeholder: _propTypes.default.string,
+  /**
+   * The text input color
+   */
+  color: _propTypes.default.string,
+  /**
+  * Whether the input is optional or not
+  */
+  optional: _propTypes.default.bool,
+  /**
+   * The autoComplete value that the browser should watch for the input
+   * `https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete`
+   */
+  autoComplete: _propTypes.default.string,
+  /**
+   * The number of columns the label should span
+   */
+  labelSpan: _propTypes.default.number,
+  /**
+   * The number of columns the input should span
+   */
+  inputSpan: _propTypes.default.number,
+  /**
+   * The number of columns the label should span on desktop
+   */
+  desktopLabelSpan: _propTypes.default.number,
+  /**
+   * The number of columns the input should span on desktop
+   */
+  desktopInputSpan: _propTypes.default.number
+};
+LinkInput.defaultProps = {
+  color: 'paragraph',
+  disabled: false
+};
+var _default = exports.default = /*#__PURE__*/(0, _react.memo)(LinkInput);

package/dist/cjs/f/fields/V2/LinkInput/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "LinkInput", {
+  enumerable: true,
+  get: function () {
+    return _LinkInput.default;
+  }
+});
+var _LinkInput = _interopRequireDefault(require("./LinkInput"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }